WebDev
hmm.
javascript:(function(){var t=['div','table','form','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul', 'li'];var c=['blue','blue','blue','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green', 'yellow'];for (var i in t){var l=document.getElementsByTagName(t[i]);var j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})();
data:text/html, <html contenteditable> [1]
General
- http://k0s.org/toolbox/
- http://www.thetoolbox.cc/
- https://makandracards.com/makandra/topics
- http://rubytune.com/cheat
News and blogs
Articles
- https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
- https://developers.google.com/speed/docs/best-practices/rendering
- http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques/ - general overview of modern web techniques
- http://www.amazedsaint.com/2012/11/changing-times-for-web-developers-6.html
- http://coding.smashingmagazine.com/2010/05/05/the-poetics-of-coding/ - best case scenario/budget configuration
Books
wiki
Humour
Tools
See also Browsers
- http://isup.me - pings
- http://downrightnow.com/ - ugc, announcements
- http://dailytekk.com/2012/09/24/100-terrific-tools-for-coders-developers/
- http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html
Coding
Validation
- Validator.nu - (X)HTML5 Validator (Living Validator)
- http://validator.aborla.net/ - older, uses HTML Tidy
- http://htmlhelp.com/tools/validator/ - html4
Cleanup and Optimisation
to merge with other sections
HTML
- Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.
CSS
- CSS tools - check, refactor, minify. Toolkit that allows people to work on nicely formatted CSS, then automatically refactor and minify for publication. Python.
- Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be "safely" deleted. Ruby.
Firefox extensions;
- Dust-Me Selectors - scans HTML pages to find unused CSS selectors.
- https://addons.mozilla.org/en-us/firefox/addon/css-usage/ - firebug extra
- http://cssbeautify.com/ - node.js
- https://github.com/operasoftware/ucss - node.js
- http://www.cleancss.com/ - web
- CSS Ratiocinator automatically refactors your CSS and generates a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.
Services
- http://unused-css.com/ - more than very basic costs
Authoring
Ninja
- Ninja Ninja HTML5 Authoring Tool is a fully featured content authoring tool for creative professionals who need to deploy HTML5 web applications for desktop or mobile, and want to create content in a visual way.
old site dead?
- http://ninja-ide.org/ NINJA-IDE started as a project focused at providing an IDE specially designed for Python Applications Development, with this scope in mind, we put our ninja-skills into the development of a free and open source project which grows based on the community's necessities.
CodeMirror
- CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation. A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.
brackets
- Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.
- aka Adobe Edge Code
Windows and Mac only as of yet.
codepen.io
Has Sass/SCSS, etc. Live update, easy altering of editor size, uses CodeMirror.
jsFiddle
- http://jsfiddle.net/
- http://doc.jsfiddle.net/
- 2*2 layout
- js lint, tidyup
- scss, coffeescript [4]
- http://jsfiddle.net/draft - for fullscreen last
- uses codemirror, but configuration method not explicit..
- doesn't autoupdate (Run) - possible?
Control + Shift + ↑ Toggle sidebar Control + ↑ or Control + ↓ Switch editor windows Control + Return Run fiddle Control + s Save fiddle (Save or Update) Control + Shift + Return Load draft
jsBin
- http://jsbin.com/
- https://github.com/remy/jsbin/ - node.js
- 2/3/4 column layout
- uses codemirror, set options
- js hint
in console;
jsbin.settings.editor.key = value; [5] jsbin.settings.editor. smartIndent = false;
urls;
/ Show the full rendered output. This content will update in real time as it's updated from the /edit url. /edit Edit the current bin /watch Follow a Code Casting session /embed Create an embeddable version of the bin /milk/last View the last edited bin for this user /milk/last/edit Edit the last edited bin for this user /milk/last/watch Follow the Code Casting session for the latest bin for this user /quiet Remove analytics and edit button from rendered output #html Load on HTML .js #javascript Load only the JavaScript for a bin .css Load only the CSS for a bin
http://jsbin.com/gist/271333
cssdesk
- http://cssdeck.com/labs
- http://cssdeck.com/docs/labs/keyboard
- minimal and functional
- scss/etc., zen coding
other
- Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.
- BlueGriffon is a new WYSIWYG content editor for the World Wide Web. Powered by Gecko, the rendering engine of Firefox, it's a modern and robust solution to edit Web pages in conformance to the latest Web Standards.
- Aptana Studio 3 - Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.
- Ace is a standalone code editor written in JavaScript. Our goal is to create a web based code editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page and JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.
- Cloud9 IDE - Write, run, and debug your code with our powerful and flexible cloud IDE. Collaborate on your workspaces publicly, or keep them private. The choice is yours!
Saving
wget
- http://www.editcorp.com/Personal/Lars_Appel/wget/v1/wget_7.html
- http://www.unixmen.com/wget-command-line-cheatsheet/
- http://fosswire.com/post/2008/04/create-a-mirror-of-a-website-with-wget/
- http://superuser.com/questions/55040/save-a-single-web-page-with-background-images-with-wget
- http://stackoverflow.com/questions/6145641/wget-how-to-mirror-only-a-section-of-a-website
- http://stackoverflow.com/questions/10712344/mirror-http-website-excluding-certain-files - downloads /then/ filters, often not handy...
wget -O myzip.zip https://github.com/zeromq/jzmq/zipball/master
wget -m http://example.com --mirror wget -mk http://example.com --convert-links wget -mk -w 20 http://example.com with delay between requests
wget -E -H -k -K -p -nd http://example.com to mirror a single page --adjust-extension --span-hosts --convert-links --backup-converted --page-requisites --no-directories - httpd access permission issues. to try next time; -nH
cURL
- curl is a tool to transfer data from or to a server, using one of the supported protocols (DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMTP, SMTPS, TELNET and TFTP). The command is designed to work without user interaction.
curl http://www.google.com/search.js -o /path/to/local/file.js
curl http://site.{one,two,three}.com
curl ftp://ftp.numericals.com/file[1-100].txt ftp://ftp.numericals.com/file[001-100].txt (with leading zeros) ftp://ftp.letters.com/file[a-z].txt sequences of alphanumeric series by using []
curl http://any.org/archive[1996-1999]/vol[1-4]/part{a,b,c}.html Nested sequences are not supported, but you can use several ones next to each other:
curl http://www.numericals.com/file[1-100:10].txt http://www.letters.com/file[a-z:2].txt multiple urls + specify a step counter for the ranges to get every Nth number or letter:
other
- mulk - Multi-connection command line tool for downloading Internet sites with image filtering and Metalink support. Similar to wget and cURL, but it manages up to 50 simultaneous and parallel links. Main features are: HTML code parsing, recursive fetching, Metalink retrieving, segmented download and image filtering by width and height. It is based on libcurl, liburiparser, libtidy, libmetalink and libcrypto.
- aria2 is a lightweight multi-protocol & multi-source command-line download utility. It supports HTTP/HTTPS, FTP, BitTorrent and Metalink. aria2 can be manipulated via built-in JSON-RPC and XML-RPC interfaces.
- HTTrack allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site's relative link-structure. Simply open a page of the "mirrored" website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads.
httrack "https://example.com" -O ExampleMirrorDirectory \ "-*" \ "+https://example.com/images/*" \ "-*.swf"
Bookmarklets
Overlay
div { outline:1px solid red; }
- http://aymanh.com/css-debugging-bookmarklets - outline is border not outline >_<
javascript:(function(){var t=['div','table','form','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul', 'li'];var c=['blue','blue','blue','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green', 'yellow'];for (var i in t){var l=document.getElementsByTagName(t[i]);var j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})();
Needs section, etc, rainbow colours!
Also, switch margin and or padding with transparent border.
Regex
- http://us2.php.net/manual/en/regexp.introduction.php
- http://us2.php.net/manual/en/reference.pcre.pattern.modifiers.php
- http://us2.php.net/manual/en/regexp.reference.escape.php
- http://refiddle.com/
- http://regex.learncodethehardway.org/book/
- http://www.regextester.com/index2.html
- http://myregextester.com/
- http://regexpal.com/
- http://regex.inginf.units.it/
- http://www.spaweditor.com/scripts/regex/
Templates and Frameworks
H5BP
- HTML5 ★ Boilerplate - "it's not a framework, it's just a bunch of files"
Bootstrap
Reference
- http://twitter.github.com/bootstrap/scaffolding.html
- http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it-all-fit-t
fluid grid. nested rows add to 12, using percentages behind. nested grids also add up to 12.
<div class="row-fluid"> <div class="span12"> Fluid 12 <div class="row-fluid"> <div class="span6"> Fluid 6 <div class="row-fluid"> <div class="span6">Fluid 6</div> <div class="span6">Fluid 6</div> </div> </div> <div class="span6">Fluid 6</div> </div> </div> </div>
- https://github.com/saikiranmothe/Twitter-Bootstrap-Cheat-Sheet
- https://github.com/oguzserdar/twitter-bootstrap-cheatsheet/blob/master/index.html
Videos
- Twitter Bootstrap Quickstart - 13m intro
- Twitter Bootstrap 101: Introducing 2.0 - similar
Forms
Sass
2.2.2;
2.2.1;
Glyphs
- http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css
- basically, no. use a webfont symbol icon.
Styles
- http://bootswatch.com/ - Saving the web from default Bootstrap
- http://builtwithbootstrap.com/
- https://wrapbootstrap.com/ - Non-free themes for Bootstrap
- https://github.com/ckrack/fbootstrapp - HTML, CSS, and JS toolkit for facebook apps
Tools
Buttons
- http://charliepark.org/bootstrap_buttons/ - no direct hex input!
- http://www.plugolabs.com/twitter-bootstrap-button-generator/ - minimal colour choice
Other
- http://bootsnipp.com/ - HTML snippets for Bootstrap
- http://bootsnipp.com/resources - misc other bootstrap extras
Foundation
Other
Testing
Browsers available:
- Chromium 22 (Dev)
- Google Chrome 20
- Firefox 13
- Firefox 16 (Nightly)
- Opera 12
Plus Windows; Firefox, Chrome, IE.
To check
Tools
- The Screening tool lets you automate testing of web-based applications. You can use it to; Create test scripts by recording actions that you perform on an application, Run automated tests applications, Script tests by using the Screening tool’s API
- Selenium is a portable software testing framework for web applications. Selenium provides a record/playback tool for authoring tests without learning a test scripting language (Selenium IDE). It also provides a test domain-specific language (Selenese) to write tests in a number of popular programming languages, including C#, Java, Groovy, Perl, PHP, Python and Ruby. The tests can then be run against most modern web browsers.
- iMacros is an extension for the Mozilla Firefox, Google Chrome, and Internet Explorer web browsers which adds record and replay functionality similar to that found in web testing and form filler software. The macros can be combined and controlled via JavaScript. Demo macros and JavaScript code examples are included with the software. iMacros was developed by iOpus. First released in 2001, iMacros was the first macro recorder tool specifically designed and optimized for web browsers and form filling.
- PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
- webshots - A utility for taking Web page screenshots with common browser resolutions and saving them as PNG files using PhantomJS.
webshots http://example.com create several screenshots at common browser resolutions webshots --width=800 --height=600 http://example.com single screenshot at the given browser resolution
Services
- http://saucelabs.com/opensource - free for OSS
Windows
- rar x Windows_7_IE9.part01.exe
- Added .vhd as IDE (rather than SATA, which causes problems for some)
- Admin, Password1
- cmd; slmgr –rearm
- Power down, take snapshot
Also; https://github.com/xdissent/ievms
A/B
to sort
- Talk: Tooling & The Webapp Development Stack - Paul Irish, May 1st, 2012
http://bentilly.blogspot.co.uk/2012/10/ab-testing-scale-cheat-sheet.html
News
- rwd on Twitter
Dev folk
- http://paulirish.com/
- http://codinghorror.com/blog/ - Jeff Atwood
- http://braythwayt.com/ - Reginald Braithwaite
General
python2
python -m SimpleHTTPServer 8000
python3
python -m http.server 5674
Analysis
- http://ifconfig.me/ - client info via curl
- http://redbot.org/
Mockup
Templates
Coding
- Bookmarklet Crunchinator - Based on the Javascript Crunchinator Demo, you can use this to quickly create a bookmarklet from some javascript code. Enter your javascript code in the text area below Input. Enter a name for the bookmarklet in the Name field. Click crunch, and the code will be compressed, and turned into a link under output. You can then drag this to your bookmarks toolbar as a bookmarklet, or right click and bookmark it, or just click it to try it out. Note that your code will automatically be wrapped in a function to make it bookmarklet-friendly.
- EightPack consists of the following tools: JSLint, JSHint, JS Beautifier, JSMin, CSS Beautify, and cssmin.js. Uses V8 engine.
- http://code.google.com/p/minify/ - php css and js
- JShrink is a php class that minifies javascript so that it can be delivered to the client quicker. This code can be used by any product looking to minify their javascript on the fly (although caching the results is suggested for performance reasons). Unlike many other products this is not a port into php but a native application, resulting in better performance.
- CSSO (CSS Optimizer) is a CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers. Node.js.
- Collide is an open-source "collaborative IDE" demonstration. Pick a folder you want to edit on your local file system. Run Collide from the command line in that folder. You and your amigos browse to http://your_host_name:8080. Collaboratively edit :). Java.
- CSSLint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.
- Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
CSS 3 tools
- http://www.layerstyles.org/ - box shadow, etc.
- http://www.css3d.net/ribbon-generator/
- Ceaser - CSS Easing Animation Tool
- http://www.patternify.com/ - CSS Pattern Generator
Support
Scratchpad
Search
Apache Solr
- Solr is the popular, blazing fast open source enterprise search platform from the Apache Lucene project. Its major features include powerful full-text search, hit highlighting, faceted search, near real-time indexing, dynamic clustering, database integration, rich document (e.g., Word, PDF) handling, and geospatial search. Solr is highly reliable, scalable and fault tolerant, providing distributed indexing, replication and load-balanced querying, automated failover and recovery, centralized configuration and more. Solr powers the search and navigation features of many of the world's largest internet sites. Solr is written in Java and runs as a standalone full-text search server within a servlet container such as Tomcat. Solr uses the Lucene Java search library at its core for full-text indexing and search, and has REST-like HTTP/XML and JSON APIs that make it easy to use from virtually any programming language. Solr's powerful external configuration allows it to be tailored to almost any type of application without Java coding, and it has an extensive plugin architecture when more advanced customization is required.
/var/lib/tomcat6/webapps/solr /etc/tomcat6/Catalina/localhost/solr.xml
Websockets
HAR
- http://www.softwareishard.com/blog/har-12-spec/
- http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/