WebDev
Quick
- Lorem ipsum
- Line Break Removal Tool - Remove line breaks from blocks of text but preserve paragraph breaks.
javascript:(function(){var t=['div','header','nav','main','section','footer','table','th','td','tr','form','fieldset','label','img','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul','li'];var c=['blue','blue','blue','blue','blue','blue','teal','teal','teal','teal','orange','orange','orange','red','red','red','red','red','red','red','red','red','red','green','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';}}})(); bookmarklet to highlight elements [1] data:text/html, <html contenteditable> quick nodepad [2] data:text/html;base64,PHRpdGxlPkRvSlM8L3RpdGxlPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+I2V7Zm9udC1zaXplOiAxNnB4OyBwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtyaWdodDowO2JvdHRvbTowO2xlZnQ6MDt9PC9zdHlsZT48ZGl2IGlkPSJlIj48L2Rpdj48c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXdnaXRodWIuY29tL2FqYXhvcmcvYWNlLWJ1aWxkcy9tYXN0ZXIvc3JjLW1pbi1ub2NvbmZsaWN0L2FjZS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3Z2l0aHViLmNvbS9hamF4b3JnL2FjZS1idWlsZHMvbWFzdGVyL3NyYy1taW4tbm9jb25mbGljdC9rZXliaW5kaW5nLXZpbS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdD52YXIgZT1hY2UuZWRpdCgiZSIpO2Uuc2V0VGhlbWUoImFjZS90aGVtZS9tb25va2FpIik7ZS5zZXRLZXlib2FyZEhhbmRsZXIoYWNlLnJlcXVpcmUoImFjZS9rZXlib2FyZC92aW0iKS5oYW5kbGVyKTtlLmdldFNlc3Npb24oKS5zZXRNb2RlKCJhY2UvbW9kZS9qYXZhc2NyaXB0Iik7PC9zY3JpcHQ+ ACE with Vim keybindings [3]
General
- frontend-dev-bookmarks - A badass list of frontend development resources I collected over time. Pull requests are welcome. Website coming soon. [5]
Productivity
- https://github.com/leftnode/get-shit-done - restarts network, kills audio streams
- https://github.com/jcromartie/gsd.sh - echo/sed to hosts, currently using
- to check; https://github.com/sjhcockrell/gsd , http://afgomez.es/blog/lets-be-productive/
Documentation
- Read the Docs hosts documentation, making it fully searchable and easy to find. You can import your docs using any major version control system, including Mercurial, Git, Subversion, and Bazaar. We support webhooks so your docs get built when you commit code. There's also support for versioning so you can build docs from tags and branches of your code in your repository.
- OverAPI.com - Collecting All Cheat Sheets
News and blogs
- Functionn is a blog dedicated to share top quality web resources for web developers and web designers alike. We collect the best resources from around the web like JavaScript libraries, fonts, templates, themes and more and post them here regularly for you to consume without having to look for them yourself.
Opinion
- Slant is a collaboratively edited resource that helps you quickly make decisions.
Guides and articles
- Move the Web Forward - You can make the web as awesome as you want it to be.
- Ops School is a comprehensive program that will help you learn to be an operations engineer.
CSS
- https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
- https://developers.google.com/speed/docs/best-practices/rendering
oocss
Development
- Page Weight Matters - "By keeping your client side code small and lightweight, you can literally open your product up to new markets."
- 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://linkedlists.net/
- The Toolbox - A collection of the best time-saving apps, tools, and widgets from around the web.
- http://rubytune.com/cheat
- http://dailytekk.com/2012/09/24/100-terrific-tools-for-coders-developers/
- http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html
Network
See Network
- http://isup.me - pings
- http://downrightnow.com/ - ugc, announcements
- http://wheresitup.com/ - multiple locations
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!
Validation
- Validator.nu - (X)HTML5 Validator (Living Validator)
- http://validator.aborla.net/ - older, uses HTML Tidy
- http://htmlhelp.com/tools/validator/ - html4
- HTML Inspector is a highly-customizable, code quality JavaScript tool to help you (and your team) write better markup. It aims to find a balance between the uncompromisingly strict W3C validator and having absolutely no rules at all (the unfortunate reality for most of us).
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
- https://developers.google.com/speed/pagespeed/insights
- http://www.appneta.com/blog/bootstrap-pagespeed/ [8]
Authoring
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.
Ace
- 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.
Orion
- Orion is an open source project under the Eclipse top-level project. Orion's objective is to create a browser-based open tool integration platform which is entirely focused on developing for the web, in the web. Tools are written in JavaScript and run in the browser. Unlike other attempts at creating browser-based development tools, this is not an IDE running in a single tab. Links work and can be shared. You can open a file in a new tab. Great care has been taken to provide a web experience for development. Orion components are individually consumable and examples of this are Mozilla Firefox Scratchpad, Scripted Editor. All the components of Orion together can be viewed at the public facing OrionHub site where anyone can create an account and try Orion out.
Ninja IDE
- 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.
Cloud9 IDE
- 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!
Node.js, ACE
Scripted
- Scripted is a fast and lightweight code editor with an initial focus on JavaScript editing. Scripted is a browser based editor and the editor itself is served from a locally running Node.js server instance.
Maqetta
- 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.
BlufGriffon
- 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.
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.
Aptana Studio 3
- 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.
Intel XDK
Other
- Tiled Text engine, an Android compatible framework for making slick, makes mobile computers awesome; editing text with them still sucks. The solution: the Tiled Text engine
- http://www.enginehere.com/ - mixing code with q&a support
- https://github.com/dart-lang/spark - google
Services
jsFiddle
- http://jsfiddle.net/
- http://doc.jsfiddle.net/
- 2*2 layout
- js lint, tidyup
- scss, coffeescript [10]
- http://jsfiddle.net/draft - for fullscreen last
- uses codemirror, but configuration method not explicit..
- no live update
jsBin
- http://jsbin.com/
- https://github.com/remy/jsbin/ - node.js
- 2/3/4 vertical column layout
- uses codemirror, set options
- js hint
- live update
- no line numbers
in console;
jsbin.settings.editor.key = value; [11] jsbin.settings.editor. smartIndent = false;
codepen.io
- Has Sass/SCSS, etc.
- Live update
- Vertical or horizontal columns
- uses CodeMirror.
cssdeck
- http://cssdeck.com/labs
- http://cssdeck.com/docs/labs/keyboard
- minimal and functional
- scss/etc., zen coding
scratchpad.io
- line numbers!
- er, no seperate panes? bad ui
other
- http://html5snippet.net/ - preview on left :(
- http://cssdesk.com/ - no js pane
- https://thimble.webmaker.org/ - mozilla. no separate panes
- http://liveweave.com/ - no separate panes
- https://codeanywhere.net/ - no anon
- http://plnkr.co/edit/ - nice so far..
Coderpad.io
Other
- http://repl.it/ - v bsic
- https://friendco.de/ - social aspect
- codepad is an online compiler/interpreter, and a simple collaboration tool Paste your code below, and codepad will run it and give you a short URL you can use to share it in chat or email.
- Ideone is something more than a pastebin; it's an online compiler and debugging tool which allows to compile and run code online in more than 40 programming languages.
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.
Other
- Fiddler is a free web debugging proxy which logs all HTTP(s) traffic between your computer and the Internet. Use it to debug traffic from virtually any application that supports a proxy like IE, Chrome, Safari, Firefox, Opera, and more.
Templates and Frameworks
H5BP
- HTML5 ★ Boilerplate - "it's not a framework, it's just a bunch of files"
Bootstrap
- Bootstrap CDN - The recommended CDN for Bootstrap, Font Awesome, and Bootswatch. MaxCDN.
- Bootstrap Expo - Beautiful and inspiring uses of Bootstrap
Sass
Reference
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
V3
- Bootstrap 3 released - 19 Aug 2013
Migration
- Bootstrap 3 Upgrader - Update to Bootstrap 3.0. your HTML code from Bootstrap 2.3
- http://code.divshot.com/bootstrap3_upgrader/
- http://upgrade-bootstrap.bootply.com/
Theme templates and 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
- https://gist.github.com/nodesocket/5843712 - quick flat conversion
Videos
v2:
- Twitter Bootstrap Quickstart - 13m intro
- Twitter Bootstrap 101: Introducing 2.0 - similar
Forms
v2:
Glyphs
- http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css
- basically, no. use a webfont symbol icon.
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
- http://www.larentis.eu/switch/ - switch checkboxes
Foundation
Forms
Other
- https://github.com/maker/ratchet - mobile prototyping
- https://github.com/bjankord/Style-Guide-Boilerplate - style guide
- Semantic UI - creating a language for sharing UI. [14]
- https://github.com/pixate/freestyle/ - mobile
Themes
- http://www.oswd.org/ Open Source Web Design is a site to download free web design templates and share yours with others. We help make the internet a prettier place.
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
- https://github.com/BBC-News/wraith - headless screenshot diffs
Services
- http://saucelabs.com/opensource - free for OSS
Windows
See also Stack#VirtualBox
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 - apt-get based
Android
See Android#PC
A/B
Web API
Websockets
Web Workers
WebRTC
- http://tincan.im/
- tincan - A WebRTC demonstration. Secure calls. No strings attached.
- Baron is a WebRTC-based web application that allows people to have peer-to-peer text, audio and video conversations with permanent accounts and contact lists. The back-end is written in JavaScript (Node.js), the signaling channel uses Socket.io. The front-end is written in Ember.js. Authentication is done using Mozilla Persona.
- https://github.com/jitsi/jitsi-videobridge
- https://jitsi.org/Projects/JitsiVideobridge
- https://www.youtube.com/watch?v=x-YGw3bgB_s
Audio
See also JS scripts#Media
- ZX2C4 Music web application that serves and transcodes tagged music libraries using Flask and Backbone.js.
- music-streamer - Listen to music from your own server in your browser using HTML 5.
Web Audio API
- https://developer.mozilla.org/en-US/docs/Web/API/AudioContext
- http://css.dzone.com/articles/exploring-html5-web-audio
- http://ianreah.com/2013/02/28/Real-time-analysis-of-streaming-audio-data-with-Web-Audio-API.html
- http://webaudio.prototyping.bbc.co.uk/
- http://noisehack.com/generate-noise-web-audio-api/
- http://smus.com/ultrasonic-networking/ [16]
- http://jsantell.github.io/dancer.js/
- http://joewlarson.com/thunderjs/demo.html
- https://github.com/jakesgordon/javascript-audio-fx/
- http://www.createjs.com/#!/SoundJS
- http://www.schillmania.com/projects/soundmanager2/
- http://oampo.github.io/Audiolet/
- http://lowlag.alienbill.com/ - .... now!
Libraries
- https://github.com/web-audio-components/web-audio-components-spec
- http://component.fm/
- https://groups.google.com/forum/#!forum/web-audio-components
- Timbre.js provides a functional processing and synthesizing audio in your web apps with modern JavaScript's way like jQuery or node.js. It has many T-Object (formally: Timbre Object) that connected together to define the graph-based routing for overall audio rendering. It is a goal of this project to approach the next generation audio processing for web.
- Band.js - Music Composer - An interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.
Examples
- http://nmf.cappel-nord.de/ - networked
API
- stackoverflow: What should a developer know before building a public web site? - 1240 votes
- ProgrammableWeb - API Dashboard
- Mashape - Free APIs
- http://developer.echonest.com/ - music related
Google Feed API
- https://developers.google.com/feed/v1/devguide
- https://developers.google.com/feed/v1/reference
- https://code.google.com/apis/ajax/playground/#load_feed
REST
- http://www.infoq.com/articles/rest-introduction
- http://stackoverflow.com/questions/671118/what-exactly-is-restful-programming [17]
- http://jacobian.org/writing/rest-worst-practices/
- http://news.ycombinator.com/item?id=3538134
- http://stackoverflow.com/questions/1619152/how-to-create-rest-urls-without-verbs/1619677#1619677
- http://blog.steveklabnik.com/posts/2012-02-13-an-api-ontology
- http://blog.mugunthkumar.com/articles/restful-api-server-doing-it-the-right-way-part-1/
- http://www.spire.io/posts/rest-tutorial.html
- http://blog.apigee.com/detail/restful_api_design/
- http://restcookbook.com/
- http://shkspr.mobi/blog/index.php/2012/03/api-design-is-ui-for-developers/
- https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm
- https://github.com/zapier/resthooks - pubsub
SOAP
Geo
Web Apps
Flash
- https://github.com/mojombo/clippy
- https://github.com/zeroclipboard/ZeroClipboard
- http://www.steamdev.com/zclip/
- http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard - sans flash solution
- https://github.com/mozilla/shumway - flash in js
General
- Talk: Tooling & The Webapp Development Stack - Paul Irish, May 1st, 2012
http://bentilly.blogspot.co.uk/2012/10/ab-testing-scale-cheat-sheet.html
- http://www.webdesignshock.com/web-design-software - to check
- http://stackoverflow.com/questions/5199902/isnt-it-silly-that-a-tiny-favicon-requires-yet-another-http-request-how-to-mak
Accessibility
- http://en.wikipedia.org/wiki/Web_accessibility
- http://diveintoaccessibility.info/table_of_contents.html - free book, 30 days to a more accessible web site
- accessability
W3C
Specs
BS 8878, Web accessibility - Code of Practice, is consistent with the Equality Act 2010 and is referenced in the UK government’s e-Accessibility Action Plan
Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [20]
- http://laneshill.me/2012/12/10-easy-things-all-web-developers-should-do-for-web-accessibility/
- http://blog.silktide.com/2013/01/things-learned-pretending-to-be-blind-for-a-week/
Screen readers
Web tools
- http://ifconfig.me/ - client info via curl
- http://redbot.org/
Mockup
Support
Subscrption
HAR
- http://www.softwareishard.com/blog/har-12-spec/
- http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/
Typing
Services
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