Difference between revisions of "WebDev"

From Things and Stuff Wiki
Jump to navigation Jump to search
 
(93 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
== Quick ==
 
== Quick ==
 +
* [https://webcode.tools Web Code Tools] - Code generators for front-end development.
 +
 +
 
* [[Lorem ipsum]]
 
* [[Lorem ipsum]]
  
Line 11: Line 14:
 
* https://github.com/milkmiruku/webdev-bookmarklet - bookmarklet to highlight elements
 
* https://github.com/milkmiruku/webdev-bookmarklet - bookmarklet to highlight elements
  
−
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';}}})();
 
−
 
  
 
  data:text/html, <html contenteditable>
 
  data:text/html, <html contenteditable>
 
   quick nodepad [http://news.ycombinator.com/item?id=5135194]
 
   quick nodepad [http://news.ycombinator.com/item?id=5135194]
 
   
 
   
−
  data:text/html;base64,PHRpdGxlPkRvSlM8L3RpdGxlPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+I2V7Zm9udC1zaXplOiAxNnB4OyBwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtyaWdodDowO2JvdHRvbTowO2xlZnQ6MDt9PC9zdHlsZT48ZGl2IGlkPSJlIj48L2Rpdj48c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXdnaXRodWIuY29tL2FqYXhvcmcvYWNlLWJ1aWxkcy9tYXN0ZXIvc3JjLW1pbi1ub2NvbmZsaWN0L2FjZS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3Z2l0aHViLmNvbS9hamF4b3JnL2FjZS1idWlsZHMvbWFzdGVyL3NyYy1taW4tbm9jb25mbGljdC9rZXliaW5kaW5nLXZpbS5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+PC9zY3JpcHQ+PHNjcmlwdD52YXIgZT1hY2UuZWRpdCgiZSIpO2Uuc2V0VGhlbWUoImFjZS90aGVtZS9tb25va2FpIik7ZS5zZXRLZXlib2FyZEhhbmRsZXIoYWNlLnJlcXVpcmUoImFjZS9rZXlib2FyZC92aW0iKS5oYW5kbGVyKTtlLmdldFNlc3Npb24oKS5zZXRNb2RlKCJhY2UvbW9kZS9qYXZhc2NyaXB0Iik7PC9zY3JpcHQ+
+
  data uri: [https://gist.github.com/mxmilkiib/954c530c2f2f4584f1e3b871a9f3e5aa ACE with Vim keybindings] [https://news.ycombinator.com/item?id=6005295]
−
  ACE with Vim keybindings [https://news.ycombinator.com/item?id=6005295]
+
 
  
 
* https://coderwall.com/p/lhsrcq/one-line-browser-notepad
 
* https://coderwall.com/p/lhsrcq/one-line-browser-notepad
Line 30: Line 31:
  
 
* [http://webdevchecklist.com/ Web Developer Checklist] [http://news.ycombinator.com/item?id=5022523]
 
* [http://webdevchecklist.com/ Web Developer Checklist] [http://news.ycombinator.com/item?id=5022523]
−
* https://tryblocks.com/departure/index.html [https://news.ycombinator.com/item?id=9522885]
 
  
−
* [https://github.com/dypsilon/frontend-dev-bookmarks frontend-dev-bookmarks] - A badass list of frontend development resources I collected over time. Pull requests are welcome. Website coming soon. [https://news.ycombinator.com/item?id=5922791]
+
* https://news.ycombinator.com/item?id=9522885
 +
 
 +
 
 +
* https://github.com/dypsilon/frontend-dev-bookmarks - list of frontend development resources. Pull requests are welcome. Website coming soon. [https://news.ycombinator.com/item?id=5922791]
  
 
* [http://pineapple.io/ pineapple.io] - A central hub of Tutorials, Tools and Assets for developers and designers
 
* [http://pineapple.io/ pineapple.io] - A central hub of Tutorials, Tools and Assets for developers and designers
Line 43: Line 46:
  
 
* [http://paulirish.com/2012/talk-tooling-the-webapp-development-stack/ Talk: Tooling & The Webapp Development Stack] - Paul Irish, May 1st, 2012
 
* [http://paulirish.com/2012/talk-tooling-the-webapp-development-stack/ Talk: Tooling & The Webapp Development Stack] - Paul Irish, May 1st, 2012
−
** [http://dl.dropbox.com/u/39519/talks/tooling-q1/index.html Slides]
 
  
−
http://bentilly.blogspot.co.uk/2012/10/ab-testing-scale-cheat-sheet.html
+
 
−
* http://www.webdesignshock.com/web-design-software - to check
+
* http://bentilly.blogspot.co.uk/2012/10/ab-testing-scale-cheat-sheet.html
 +
 
 
* http://stackoverflow.com/questions/5199902/isnt-it-silly-that-a-tiny-favicon-requires-yet-another-http-request-how-to-mak
 
* http://stackoverflow.com/questions/5199902/isnt-it-silly-that-a-tiny-favicon-requires-yet-another-http-request-how-to-mak
  
Line 52: Line 55:
  
 
* http://httparchive.org/
 
* http://httparchive.org/
 +
 +
=== Web design ===
 +
See also [[Design]], [[UI]]
 +
 +
* [http://www.alistapart.com/articles/ A List Apart: Articles]
 +
 +
* [http://www.smashingmagazine.com/ Smashing Magazine]
 +
 +
* [http://www.netmagazine.com/ .net mag]
 +
 +
 +
 +
* https://news.layervault.com/
 +
 +
 +
* [https://archive.li/UTMBp Stop Redesigning! Lean Rapid Interface Iteration Thoughts and Tips]
 +
 +
 +
* [http://www.vanseodesign.com/web-design/design-elements/ The Elements Of Design] - series of blog posts
 +
* [http://www.youtube.com/watch?v=iJDoxOTyMdk Google I/O 2012 - Advanced Design for Engineers]
 +
 +
 +
* [http://startupsthisishowdesignworks.com/ Startups, this is how design works]
 +
 +
 +
* http://weavora.com/blog/2012/10/21/web-design-trends-we-love/ [http://news.ycombinator.com/item?id=4709055]
 +
 +
* http://www.creativebloq.com/web-design/attention-grabbing-homepages-11121253
 +
 +
* http://contrastrebellion.com/
 +
 +
* http://colly.com/comments/bauhaus_ideology_and_the_future_of_web_design/
 +
 +
 +
* http://csszengarden.com/
 +
* http://css1k.com/
 +
 +
 +
* http://www.siteinspire.com/
 +
 +
* http://unmatchedstyle.com/gallery
 +
 +
* http://webcreme.com/
 +
 +
* [https://onepagelove.com/ One Page Love]
 +
 +
 +
 +
* http://hackdesign.org/
 +
 +
 +
* http://bounceapp.com - critique a page
 +
 +
* http://www.spurapp.com/ - alternate views for design considerations
 +
 +
* http://designmodo.github.com/Flat-UI/ - templates
 +
 +
* http://econsultancy.com/uk/blog/62335-14-lousy-web-design-trends-that-are-making-a-comeback-due-to-html5
 +
 +
* http://goodui.org/
 +
 +
* http://shouldiuseacarousel.com/ [https://news.ycombinator.com/item?id=6018316]
 +
 +
* http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/
 +
 +
 +
 +
* [https://freshchalk.com/blog/150k-small-business-website-teardown-2019 150k Small Business Website Teardown 2019 • Fresh Chalk] -  [https://news.ycombinator.com/item?id=20286250]
 +
 +
* [https://webtransparency.cs.princeton.edu/dark-patterns/ Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites] -  [https://news.ycombinator.com/item?id=20278283]
 +
 +
 +
* https://webflow.com/free-website-templates
 +
 +
 +
==== Commercial ====
 +
* https://creativemarket.com/
 +
 +
=== Basic project ===
 +
* domain
 +
* hosting or provision
 +
* backups
 +
* analytics
 +
 +
* initialise project
 +
* fill with content - get a copywriter
 +
 +
 +
* Webfonts for headings, paragraphs, navigation, etc. (optimised via Font Squirrel)
 +
* Scale and vertical rhythm baseline (proportions for font-size and line-height)
 +
* Visual hierarchy
 +
* Main and section colour palette (CSS)
 +
* And other creative magick
 +
 +
 +
* Check in different browsers
 +
 +
* Quick; Ask folk for remote feedback
 +
 +
* Detailed; Get folk to browse it, quietly watch over their shoulder, tell them to access certain info, ask them to vocalise all thoughts, write down their actions and issues, communicate more, refine design, implement
  
 
=== Productivity ===
 
=== Productivity ===
 
* https://github.com/leftnode/get-shit-done - restarts network, kills streams
 
* https://github.com/leftnode/get-shit-done - restarts network, kills streams
 +
 
* https://github.com/jcromartie/gsd.sh - echo/sed to hosts, currently using
 
* 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/
+
 
 +
* to check; https://github.com/sjhcockrell/gsd
  
 
=== Documentation ===
 
=== Documentation ===
Line 63: Line 168:
  
 
=== News and blogs ===
 
=== News and blogs ===
−
* [http://www.functionn.in/ 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.
+
 
  
 
* http://sidebar.io/
 
* http://sidebar.io/
Line 75: Line 180:
 
* https://thebestmotherfuckingwebsite.co/
 
* https://thebestmotherfuckingwebsite.co/
 
* https://bestmotherfucking.website/
 
* https://bestmotherfucking.website/
 +
 +
* https://2008.maxspeicher.com/2014/03/03/this-is-a-motherfucking-website-and-its-fucking-not-completely-perfect/ [https://news.ycombinator.com/item?id=8024799]
 +
 +
* [https://perfectmotherfuckingwebsite.com/ Perfect Motherfucking Website] - [https://news.ycombinator.com/item?id=26740593]
 +
 +
* [https://makefrontendshitagain.party/ Make Frontend Shit Again] - [https://lobste.rs/s/vsyvll/make_frontend_shit_again]
 +
 +
* [https://startafuckingblog.com/ Start a Fucking Blog] - [https://news.ycombinator.com/item?id=34231152]
 +
 +
* [https://rednafi.com/zephyr/an_ode_to_the_neo_grotesque_web/ An ode to the neo-grotesque web | Redowan's Reflections] [https://lobste.rs/s/8t0ed7/ode_neo_grotesque_web]
 +
 +
* https://this-page-intentionally-left-blank.org
 +
 +
 +
 +
 +
* [https://ploum.net/2023-08-01-splitting-the-web.html Splitting the Web] - by Ploum on 2023-08-01, "There’s an increasing chasm dividing the modern web. On one side, the commercial, monopolies-riddled, media-adored web. A web which has only one objective: making us click. It measures clicks, optimises clicks, generates clicks. It gathers as much information as it could about us and spams every second of our life with ads, beep, notifications, vibrations, blinking LEDs, background music and fluorescent titles. A web which boils down to Idiocracy in a Blade Runner landscape, a complete cyberpunk dystopia. Then there’s the tech-savvy web. People who install adblockers or alternative browsers. People who try alternative networks such as Mastodon or, God forbid, Gemini. People who poke fun at the modern web by building true HTML and JavaScript-less pages." [https://news.ycombinator.com/item?id=36955146]
  
 
=== Guides and articles ===
 
=== Guides and articles ===
−
* [http://thomaslevine.com/!/making-your-personal-website/ How to make a personal website, in 9001 easy steps] [https://news.ycombinator.com/item?id=8969757]
 
  
 
* [http://hashphp.org/ What should I know about building a website?]
 
* [http://hashphp.org/ What should I know about building a website?]
Line 96: Line 217:
  
 
==== CSS ====
 
==== CSS ====
−
* https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
+
* https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirect=no - old
 +
 
 +
* [https://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/ Performance Calendar » CSS Selector Performance has changed! (For the better)] - newer
 +
 
 +
 
 
* https://developers.google.com/speed/docs/best-practices/rendering
 
* https://developers.google.com/speed/docs/best-practices/rendering
  
Line 103: Line 228:
  
 
==== Development ====
 
==== Development ====
−
* http://duruk.net/some-web-development-tips/
+
* [https://htmldom.dev/ HTML DOM] - Common tasks of managing HTML DOM with vanilla JavaScript] [https://news.ycombinator.com/item?id=22758218]
 +
 
 +
 
 +
* [http://duruk.net/some-web-development-tips Some Web Development Tips]
 +
 
 +
 
 
* http://zef.me/4235/pick-your-battles [http://news.ycombinator.com/item?id=4918315]
 
* http://zef.me/4235/pick-your-battles [http://news.ycombinator.com/item?id=4918315]
  
Line 128: Line 258:
  
 
* http://bookofspeed.com
 
* http://bookofspeed.com
−
 
−
=== wiki ===
 
−
* http://lbyrne.sdf1.org/index.cgi
 
  
 
=== Humour ===
 
=== Humour ===
Line 226: Line 353:
  
 
* [https://github.com/philipwalton/html-inspector/ 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).
 
* [https://github.com/philipwalton/html-inspector/ 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).
 +
 +
 +
* [http://iframely.com/debug Iframely URL Debugger] - test Open Graph, Twitter Cards, oEmbed
  
 
=== Cleanup and Optimisation ===
 
=== Cleanup and Optimisation ===
Line 289: Line 419:
  
 
* http://www.modern.ie/report
 
* http://www.modern.ie/report
 +
 +
 +
 +
==== Images ====
 +
 +
* [https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques Images done right: Web graphics, good to the last byte — Martian Chronicles, Evil Martians’ team blog] - [https://news.ycombinator.com/item?id=21181015]
  
 
=== Authoring ===
 
=== Authoring ===
 
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
 
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
 +
 +
See also [[Development#IDE]]
 +
 +
==== Maqetta ====
 +
* [http://maqetta.org/ Maqetta] - 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.
 +
** http://maqetta.org:55556/maqetta/app/docs/index.html#tutorials/tutorials
 +
 +
==== BlufGriffon ====
 +
* [http://bluegriffon.org/ BlueGriffon] - 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.
 +
  
 
==== CodeMirror ====
 
==== CodeMirror ====
−
* [http://codemirror.net/index.html 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.
+
* [http://codemirror.net/index.html CodeMirror] - 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.
 
** http://codemirror.net/doc/manual.html
 
** http://codemirror.net/doc/manual.html
  
Line 302: Line 448:
  
 
==== Ace ====
 
==== Ace ====
−
* [http://ace.ajax.org/ 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.
+
* [http://ace.ajax.org/ Ace] - 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 ====
−
* [http://www.eclipse.org/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.
+
* [http://www.eclipse.org/orion/ Orion] - 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.
 
** http://wiki.eclipse.org/Orion
 
** http://wiki.eclipse.org/Orion
  
 
* https://orionhub.org
 
* https://orionhub.org
  
−
==== Ninja IDE ====
 
−
* [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.
 
−
** https://github.com/ninja-ide/ninja-ide
 
  
 
==== Cloud9 IDE ====
 
==== Cloud9 IDE ====
−
* [https://c9.io/ 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!
+
* [https://aws.amazon.com/cloud9/?origin=c9io AWS Cloud9 Amazon Web Services] - a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser. It includes a code editor, debugger, and terminal. Cloud9 comes prepackaged with essential tools for popular programming languages, including JavaScript, Python, PHP, and more, so you don’t need to install files or configure your development machine to start new projects. Since your Cloud9 IDE is cloud-based, you can work on your projects from your office, home, or anywhere using an internet-connected machine. Cloud9 also provides a seamless experience for developing serverless applications enabling you to easily define resources, debug, and switch between local and remote execution of serverless applications. With Cloud9, you can quickly share your development environment with your team, enabling you to pair program and track each other's inputs in real time.
 +
** https://github.com/c9/core
  
−
* https://github.com/ajaxorg/cloud9/
 
  
−
Node.js, ACE
+
==== Cloudbox ====
 +
* [https://www.codebox.io/ Codebox] - a complete and modular Cloud IDE. It can run on any unix-like machine (Linux, Mac OS X). It is an open source component of codebox.io (Cloud IDE as a Service). The IDE can run on your desktop (Linux or Mac), on your server or the cloud. You can use the codebox.io service to host and manage IDE instances.
 +
** https://github.com/FriendCode/codebox [https://news.ycombinator.com/item?id=7023393]
  
−
* https://c9.io/
+
==== Thimble ====
 +
* [https://thimble.mozilla.org Thimble] - an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. [https://news.ycombinator.com/item?id=12527203]
  
−
==== Cloudbox ====
+
==== Glitch ====
−
* [https://www.codebox.io/ Codebox] is a complete and modular Cloud IDE. It can run on any unix-like machine (Linux, Mac OS X). It is an open source component of codebox.io (Cloud IDE as a Service). The IDE can run on your desktop (Linux or Mac), on your server or the cloud. You can use the codebox.io service to host and manage IDE instances.
+
* [https://glitch.com/ Glitch]
−
** https://github.com/FriendCode/codebox [https://news.ycombinator.com/item?id=7023393]
+
** https://github.com/FogCreek
  
−
==== Light Table ====
+
* https://gomix.com
−
* https://github.com/LightTable/LightTable
 
  
−
* https://news.ycombinator.com/item?id=8394381
+
* http://anildash.com/2016/12/im-at-fog-creek-and-were-introducing-gomix.html [https://news.ycombinator.com/item?id=13289484]
  
 
==== Scripted ====
 
==== Scripted ====
−
* [https://github.com/scripted-editor/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.
+
* [https://github.com/scripted-editor/scripted Scripted] - 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 ====
 
−
* [http://maqetta.org/ 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.
 
−
** http://maqetta.org:55556/maqetta/app/docs/index.html#tutorials/tutorials
 
  
−
==== BlufGriffon ====
 
−
* [http://bluegriffon.org/ 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 ====
−
* [http://brackets.io 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.
+
* [http://brackets.io Brackets] - 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.
 
** https://github.com/adobe/brackets
 
** https://github.com/adobe/brackets
 
* aka Adobe Edge Code
 
* aka Adobe Edge Code
  
−
Windows and Mac only as of yet.
 
  
 
==== Aptana Studio 3 ====
 
==== Aptana Studio 3 ====
 
* [http://aptana.com/products/studio3 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.
 
* [http://aptana.com/products/studio3 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 ====
 
−
* http://software.intel.com/en-us/html5/tools [https://news.ycombinator.com/item?id=6965372]
 
  
 
==== Zed ====
 
==== Zed ====
−
* [http://zedapp.org/ Zed] is a fully offline-capable, open source, keyboard-focused, Chrome-based text and code editor you can use to edit local files as well as remote files on any server. It’s built using web technologies (100% HTML, CSS and JavaScript) yet has all features you’d expect from a capable code editor.
+
* [http://zedapp.org/ Zed] - a fully offline-capable, open source, keyboard-focused, Chrome-based text and code editor you can use to edit local files as well as remote files on any server. It’s built using web technologies (100% HTML, CSS and JavaScript) yet has all features you’d expect from a capable code editor.
  
 
==== MadEye ====
 
==== MadEye ====
−
* [http://madeye.io/ MadEye] is a collaborative web editor backed by your filesystem. Launches from the shell, uses ACE.
+
* [http://madeye.io/ MadEye] - a collaborative web editor backed by your filesystem. Launches from the shell, uses ACE.
  
 
==== Atom ====
 
==== Atom ====
−
* [https://atom.io/ Atom] is a hackable text editor for the 21st century.
+
* [https://atom.io/ Atom] - a hackable text editor for the 21st century.
  
−
==== Gomix ====
 
−
* https://gomix.com
 
  
−
* http://anildash.com/2016/12/im-at-fog-creek-and-were-introducing-gomix.html [https://news.ycombinator.com/item?id=13289484]
+
==== Tiled Text ====
−
 
+
* [http://www.tiledtext.com/ Tiled Text] - an Android compatible framework for making slick, makes mobile computers awesome; editing text with them still sucks. The solution: the Tiled Text engine
−
==== Other ====
 
−
* [http://www.tiledtext.com/ 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
 
−
 
 
−
 
 
−
* http://brackets.io/ - psd2css
 
  
 
=== Services ===
 
=== Services ===
Line 467: Line 589:
 
* [http://ideone.com/ 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.
 
* [http://ideone.com/ 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.
  
−
=== IDE ===
+
=== Bookmarklets ===
−
==== Thimble ====
+
* http://speckyboy.com/2009/02/16/32-indispensable-bookmarklets-for-web-developers-and-designers
−
* https://thimble.mozilla.org/ [https://news.ycombinator.com/item?id=12527203]
 
  
−
==== Other ====
 
−
* https://hyperdev.com/
 
−
 
−
* https://ide.coding.net/
 
−
 
−
=== Bookmarklets ===
 
−
* http://speckyboy.com/2009/02/16/32-indispensable-bookmarklets-for-web-developers-and-designers/
 
  
 
* [http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ Responsive Design bookmarklet]
 
* [http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ Responsive Design bookmarklet]
 
** https://github.com/benkeen/responsive-design-bookmarklet-generator
 
** https://github.com/benkeen/responsive-design-bookmarklet-generator
 +
  
 
* [http://code.google.com/p/h5o/ HTML5 outliner (h5o)]
 
* [http://code.google.com/p/h5o/ HTML5 outliner (h5o)]
 
** https://github.com/sideshowbarker/h5o-dymonaz
 
** https://github.com/sideshowbarker/h5o-dymonaz
 +
  
 
* http://yahoo.github.com/debugCSS/
 
* http://yahoo.github.com/debugCSS/
 
** https://github.com/yahoo/debugCSS
 
** https://github.com/yahoo/debugCSS
 +
  
 
* http://marklets.com/Results.aspx
 
* http://marklets.com/Results.aspx
  
−
* http://westciv.com/mri/
+
 
 +
* http://westciv.com/mri
 +
 
  
 
* http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
 
* http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
 +
  
 
* http://stackoverflow.com/questions/1601928/incrementing-the-css-padding-top-property-in-javascript
 
* http://stackoverflow.com/questions/1601928/incrementing-the-css-padding-top-property-in-javascript
 +
 +
 +
 +
* [http://dmcritchie.mvps.org/dolphin/lesson_from_newtab.htm Bookmarklets, history, exported bookmarks, extensions for Chrome & Firefox (2020-08-17)]
 +
 +
 +
 +
* https://github.com/mrmrs/pesticide - Kill your css layout bugs
  
 
=== Overlay ===
 
=== Overlay ===
Line 509: Line 637:
  
 
* http://subtlegradient.com/articles/2009/07/23/subtle_hover_css_inspect_bookmarklet.html
 
* http://subtlegradient.com/articles/2009/07/23/subtle_hover_css_inspect_bookmarklet.html
 +
 +
 +
*,*::before,*::after { outline: 1px solid red; }
  
 
=== Sourcemaps ===
 
=== Sourcemaps ===
Line 521: Line 652:
 
* [http://fiddler2.com/ 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.
 
* [http://fiddler2.com/ 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 ==
+
 
−
* http://usablica.github.com/front-end-frameworks/compare.html?v=2.0
+
* [https://www.styleurl.app/ StyleURL] - the easiest way for developers & designers to collaborate on CSS changes. Make style changes from Chrome Inspector, and StyleURL will show you the diff of your CSS changes in the page. [https://news.ycombinator.com/item?id=17662068]
 +
** https://github.com/Jarred-Sumner/StyleURL-extension
 +
 
 +
== Templates and frameworks ==
 +
* [http://usablica.github.io/front-end-frameworks/compare.html CSS Front-end Frameworks with comparison]
 +
** https://github.com/usablica/front-end-frameworks
  
 
* http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/ [https://news.ycombinator.com/item?id=11379581]
 
* http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/ [https://news.ycombinator.com/item?id=11379581]
 +
  
 
=== H5BP ===
 
=== H5BP ===
 
* [http://html5boilerplate.com/ HTML5 ★ Boilerplate] - "it's not a framework, it's just a bunch of files"
 
* [http://html5boilerplate.com/ HTML5 ★ Boilerplate] - "it's not a framework, it's just a bunch of files"
−
** http://html5boilerplate.com/docs/css/
+
** https://github.com/h5bp/html5-boilerplate
 +
** http://html5boilerplate.com/docs/css
 +
 
 +
* YouTube: [http://www.youtube.com/watch?v=qyM37XKkmKQ Paul Irish on HTML5 Boilerplate] - 2011
  
−
* [http://www.youtube.com/watch?v=qyM37XKkmKQ Paul Irish on HTML5 Boilerplate] - 2011
 
  
−
* https://github.com/h5bp/html5-boilerplate
 
 
* https://github.com/h5bp/mobile-boilerplate
 
* https://github.com/h5bp/mobile-boilerplate
  
 
=== Bootstrap ===
 
=== Bootstrap ===
−
* http://getbootstrap.com/
+
* [http://getbootstrap.com/ Bootstrap]
 +
** https://github.com/twbs/bootstrap
 
** https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
 
** https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
  
Line 543: Line 682:
 
* [http://expo.getbootstrap.com/ Bootstrap Expo] - Beautiful and inspiring uses of Bootstrap
 
* [http://expo.getbootstrap.com/ Bootstrap Expo] - Beautiful and inspiring uses of Bootstrap
  
−
==== Sass ====
 
−
* https://github.com/jlong/sass-twitter-bootstrap
 
−
** http://thesassway.com/projects/sass-twitter-bootstrap
 
−
 
−
* https://github.com/yabawock/bootstrap-sass-rails
 
−
 
−
* https://github.com/thomas-mcdonald/bootstrap-sass
 
  
 
==== Reference ====
 
==== Reference ====
Line 555: Line 687:
 
* http://getbootstrap.com/css/
 
* http://getbootstrap.com/css/
  
−
<pre><!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></pre>
 
  
 
* http://getbootstrap.com/css/#grid
 
* http://getbootstrap.com/css/#grid
Line 589: Line 697:
 
* http://getbootstrap.com/examples/theme/
 
* http://getbootstrap.com/examples/theme/
  
−
==== V3 ====
 
−
* [http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ Bootstrap 3 released] - 19 Aug 2013
 
−
 
−
* [http://www.helloerik.com/bootstrap-3-grid-introduction Bootstrap 3 Grid Introduction]
 
−
 
−
* http://rriepe.github.io/1pxdeep/
 
−
 
−
===== Migration =====
 
−
* http://stackoverflow.com/questions/17974998/updating-bootstrap-to-version-3-what-do-i-have-to-do
 
−
 
−
* http://bootply.com/bootstrap-3-migration-guide
 
−
 
−
* http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
 
−
 
−
* [http://bootstrap3.kissr.com/ 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/
 
−
 
−
===== Grid =====
 
−
* https://news.ycombinator.com/item?id=8040716
 
−
 
−
* http://shoelace.io/ [https://news.ycombinator.com/item?id=8043058]
 
  
−
==== V4 ====
 
 
* http://hackerthemes.com/bootstrap-cheatsheet [https://news.ycombinator.com/item?id=11542005]
 
* http://hackerthemes.com/bootstrap-cheatsheet [https://news.ycombinator.com/item?id=11542005]
  
Line 637: Line 722:
  
 
* http://www.prepbootstrap.com/
 
* http://www.prepbootstrap.com/
−
 
−
* http://www.wrapbootstrap.com/ - $
 
  
  
 
* https://news.ycombinator.com/item?id=8378819 - material design
 
* https://news.ycombinator.com/item?id=8378819 - material design
  
−
==== Videos ====
 
−
v2:
 
−
* [http://www.youtube.com/watch?v=x560t2eOP6U Twitter Bootstrap Quickstart] - 13m intro
 
−
* [http://www.youtube.com/watch?v=DgwtRpf60xI Twitter Bootstrap 101: Introducing 2.0] - similar
 
−
 
−
==== Forms ====
 
−
v2:
 
−
* http://stackoverflow.com/questions/11188964/fluid-input-append-in-bootstrap-responsive
 
−
 
−
* http://www.panopta.com/2013/02/06/bootstrap-application-wizard/
 
  
 
==== Glyphs ====
 
==== Glyphs ====
 
* http://twitter.github.com/bootstrap/base-css.html#icons
 
* http://twitter.github.com/bootstrap/base-css.html#icons
 +
  
 
* http://erickryski.com/bootstrap-template/
 
* http://erickryski.com/bootstrap-template/
 +
 
* http://marcoceppi.github.com/bootstrap-glyphicons/
 
* http://marcoceppi.github.com/bootstrap-glyphicons/
 +
  
 
* http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css
 
* http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css
Line 665: Line 741:
 
* [http://fian.my.id/marka/ Marka] - Beautiful icon transformations [https://news.ycombinator.com/item?id=8159386]
 
* [http://fian.my.id/marka/ Marka] - Beautiful icon transformations [https://news.ycombinator.com/item?id=8159386]
  
−
==== Tools ====
 
−
* [http://jetstrap.com/ Jetstrap] is a 100% web-based interface building tool for Twitter Bootstrap.
 
−
* [https://app.divshot.com/ Divshot]
 
  
−
* http://stylebootstrap.info/
 
  
−
* http://bootply.com/
 
  
−
 
−
* http://pingendo.com/ [https://news.ycombinator.com/item?id=11006174]
 
  
 
* https://bootstrapstudio.io/ [https://news.ycombinator.com/item?id=11005811]
 
* https://bootstrapstudio.io/ [https://news.ycombinator.com/item?id=11005811]
Line 704: Line 773:
  
 
=== Foundation ===
 
=== Foundation ===
−
* [http://foundation.zurb.com/ Zurb Foundation 3]
+
* [http://foundation.zurb.com/ Zurb Foundation 6]
 
** https://github.com/zurb/foundation
 
** https://github.com/zurb/foundation
  
Line 715: Line 784:
 
=== Other ===
 
=== Other ===
 
* https://github.com/rfreebern/zeitgeist.css
 
* https://github.com/rfreebern/zeitgeist.css
 +
  
 
* http://yeoman.io/
 
* http://yeoman.io/
 +
  
 
* http://html5bones.com/
 
* http://html5bones.com/
 +
  
 
* https://github.com/PascalPrecht/wbb [http://news.ycombinator.com/item?id=4996964]
 
* https://github.com/PascalPrecht/wbb [http://news.ycombinator.com/item?id=4996964]
 +
  
 
* http://www.framerjs.com/
 
* http://www.framerjs.com/
 +
  
 
* http://justspamjustin.github.com/junior/#home
 
* http://justspamjustin.github.com/junior/#home
 +
  
 
* http://basethe.me/
 
* http://basethe.me/
 +
  
 
* https://github.com/cbrauckmuller/helium - 30k
 
* https://github.com/cbrauckmuller/helium - 30k
 +
  
 
* http://purecss.io/
 
* http://purecss.io/
 +
  
 
* http://topcoat.io/
 
* http://topcoat.io/
 +
  
 
* http://astuteo.com/slickmap
 
* http://astuteo.com/slickmap
 +
  
 
* http://www.getskeleton.com/
 
* http://www.getskeleton.com/
 
** https://github.com/dmur/Skeleton
 
** https://github.com/dmur/Skeleton
 +
  
 
* https://github.com/necolas/suit
 
* https://github.com/necolas/suit
 +
  
 
* http://justspamjustin.github.io/junior
 
* http://justspamjustin.github.io/junior
 +
  
 
* https://github.com/maker/ratchet - mobile prototyping
 
* https://github.com/maker/ratchet - mobile prototyping
 +
  
 
* https://github.com/bjankord/Style-Guide-Boilerplate - style guide
 
* https://github.com/bjankord/Style-Guide-Boilerplate - style guide
 +
  
 
* http://icalialabs.github.io/furatto/ - flat
 
* http://icalialabs.github.io/furatto/ - flat
 +
  
 
* http://www.vinisketch.fr/
 
* http://www.vinisketch.fr/
 
** http://vinisketch.github.io/VSToolkit/
 
** http://vinisketch.github.io/VSToolkit/
 +
  
 
* http://ink.sapo.pt/
 
* http://ink.sapo.pt/
 +
  
 
* http://getuikit.com/
 
* http://getuikit.com/
 +
  
 
* [http://semantic-ui.com/ Semantic UI] - creating a language for sharing UI. [https://news.ycombinator.com/item?id=6381220] [https://news.ycombinator.com/item?id=14075720]
 
* [http://semantic-ui.com/ Semantic UI] - creating a language for sharing UI. [https://news.ycombinator.com/item?id=6381220] [https://news.ycombinator.com/item?id=14075720]
 +
  
 
* http://patorjk.com/text-color-fader/
 
* http://patorjk.com/text-color-fader/
 +
  
 
* https://github.com/guardian/frontend
 
* https://github.com/guardian/frontend
 +
  
 
* https://github.com/pixate/freestyle/ - mobile
 
* https://github.com/pixate/freestyle/ - mobile
 +
  
 
* http://jh3y.github.io/progre-c-ss/ - css progress bar [https://news.ycombinator.com/item?id=7196744]
 
* http://jh3y.github.io/progre-c-ss/ - css progress bar [https://news.ycombinator.com/item?id=7196744]
 +
  
 
* http://elrumordelaluz.github.io/csshake/
 
* http://elrumordelaluz.github.io/csshake/
 +
  
 
* http://tympanus.net/Development/ProgressButtonStyles/ [https://news.ycombinator.com/item?id=7540114]
 
* http://tympanus.net/Development/ProgressButtonStyles/ [https://news.ycombinator.com/item?id=7540114]
Line 773: Line 868:
  
 
* http://material-ui.com/#/ [https://news.ycombinator.com/item?id=8582439]
 
* http://material-ui.com/#/ [https://news.ycombinator.com/item?id=8582439]
 +
  
 
* https://www.muicss.com/ [https://news.ycombinator.com/item?id=9073984]
 
* https://www.muicss.com/ [https://news.ycombinator.com/item?id=9073984]
 +
  
 
* http://www.daveliepmann.com/tufte-css/ [https://news.ycombinator.com/item?id=10012360]
 
* http://www.daveliepmann.com/tufte-css/ [https://news.ycombinator.com/item?id=10012360]
 +
  
 
* https://github.com/marmelab/universal.css - lol [https://news.ycombinator.com/item?id=11752740]
 
* https://github.com/marmelab/universal.css - lol [https://news.ycombinator.com/item?id=11752740]
Line 782: Line 880:
  
 
* http://www.oswd.org/
 
* http://www.oswd.org/
 +
 +
 +
* [https://teutonic.co/ Teutonic CSS] - 12KB of CSS to jump start your HTML. A modern CSS framework — versatile, well documented.
 +
 +
 +
* [https://mblode.github.io/marx/ Marx] - a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.
 +
** https://github.com/mblode/marx
 +
 +
 +
* [https://bulma.io/ Bulma] - Free, open source, & modern CSS framework based on Flexbox
 +
** https://github.com/jgthms/bulma/
 +
 +
 +
* [https://minicss.org/ mini.css] - minimal, responsive, style-agnostic CSS framework
 +
 +
 +
* [https://rbitr.github.io/ChartS.css/ ChartS.css] - accessible html/css charts with markdown support [https://news.ycombinator.com/item?id=23270581]
 +
 +
=== Tailwind CSS ===
 +
* [https://tailwindcss.com/ Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs] - a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 +
** https://github.com/tailwindcss/tailwindcss
 +
 +
 +
* [https://tailwind.build/ Tailwind Builder] - Use the capabilities of our editor in working with the Tailwind CSS framework to speed up the front-end development process. [https://news.ycombinator.com/item?id=21439918]
 +
 +
 +
* [https://matt-rickard.com/why-tailwind-css-won Why Tailwind CSS Won] [https://news.ycombinator.com/item?id=37143837]
  
 
=== Responsive ===
 
=== Responsive ===
Line 790: Line 915:
  
 
* https://kristopolous.github.io/BOOTSTRA.386/ [https://news.ycombinator.com/item?id=7983008]
 
* https://kristopolous.github.io/BOOTSTRA.386/ [https://news.ycombinator.com/item?id=7983008]
−
 
−
== Templating ==
 
−
* http://jade-lang.com/
 
  
 
== Testing ==
 
== Testing ==
Line 798: Line 920:
  
 
=== Tools ===
 
=== Tools ===
−
* https://appetize.io/ [https://news.ycombinator.com/item?id=8487809] - iOS simulator
+
==== PhantomJS ====
−
 
+
* [http://phantomjs.org/ PhantomJS] - a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
−
* [http://phantomjs.org/ 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.
 
 
** https://news.ycombinator.com/item?id=8753369
 
** https://news.ycombinator.com/item?id=8753369
  
−
* [https://github.com/detro/ghostdriver Ghost Driver] is an implementation of the Remote WebDriver Wire protocol, using PhantomJS as back-end
+
==== Ghost Driver ====
−
** [https://www.youtube.com/watch?v=h7AedWwkbx4 Ivan De Marino, Getting started with GhostDriver]
+
* https://github.com/detro/ghostdriver - an implementation of the Remote WebDriver Wire protocol, using PhantomJS as back-end
 +
** YouTube: [https://www.youtube.com/watch?v=h7AedWwkbx4 Ivan De Marino, Getting started with GhostDriver]
  
 +
==== webshots ====
 
* [https://github.com/yaph/webshots webshots] - A utility for taking Web page screenshots with common browser resolutions and saving them as PNG files using PhantomJS.
 
* [https://github.com/yaph/webshots webshots] - A utility for taking Web page screenshots with common browser resolutions and saving them as PNG files using PhantomJS.
 
** [http://geeksta.net/geeklog/web-page-screenshots-phantomjs-python/ Taking Web Page Screenshots with PhantomJS and Python]
 
** [http://geeksta.net/geeklog/web-page-screenshots-phantomjs-python/ Taking Web Page Screenshots with PhantomJS and Python]
Line 815: Line 938:
 
   single screenshot at the given browser resolution
 
   single screenshot at the given browser resolution
  
−
* http://www.nightmarejs.org/ [https://news.ycombinator.com/item?id=8416693]
+
==== Nightmare ====
 +
* [http://www.nightmarejs.org/ Nightmare] - A high-level browser automation library. [https://news.ycombinator.com/item?id=8416693]
 +
** https://github.com/segmentio/nightmare
  
−
* [http://slimerjs.org/ SlimerJS] is similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit (And it is not yet truly headless).
+
==== SlimerJS ====
 +
* [http://slimerjs.org/ SlimerJS] - similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit (And it is not yet truly headless).
  
−
* [https://github.com/BBC-News/wraith Wraith] is a screenshot comparison tool, created by developers at BBC News. Wraith uses either PhantomJS or SlimerJS to create screen-shots of different environments and then creates a diff of the two images, the affected areas are highlighted in blue.
+
==== Wraith ====
 +
* https://github.com/BBC-News/wraith - a screenshot comparison tool, created by developers at BBC News. Wraith uses either PhantomJS or SlimerJS to create screen-shots of different environments and then creates a diff of the two images, the affected areas are highlighted in blue.
  
−
* [https://github.com/fouber/page-monitor Page Monitor] - capture webpage and diff the dom change with phantomjs [https://news.ycombinator.com/item?id=8253608]
+
==== Page Monitor ====
 +
* https://github.com/fouber/page-monitor - capture webpage and diff the dom change with phantomjs [https://news.ycombinator.com/item?id=8253608]
  
−
* [http://cutycapt.sourceforge.net/ CutyCapt] is a small cross-platform command-line utility to capture WebKit's rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.
+
==== CutyCapt ====
 +
* [http://cutycapt.sourceforge.net/ CutyCapt] - a small cross-platform command-line utility to capture WebKit's rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.
  
−
* [http://www.chromium.org/developers/telemetry Telemetry] is Chrome's performance testing framework.  It allows you to perform arbitrary actions on a set of web pages and report metrics about it.  The framework abstracts: Launching a browser with arbitrary flags on any platform, Opening a tab and navigating to the page under test, Fetching data via the Inspector timeline and traces, Using Web Page Replay to cache real-world websites so they don’t change when used in benchmarks.
+
==== Telemetry ====
 +
* [http://www.chromium.org/developers/telemetry Telemetry] - Chrome's performance testing framework.  It allows you to perform arbitrary actions on a set of web pages and report metrics about it.  The framework abstracts: Launching a browser with arbitrary flags on any platform, Opening a tab and navigating to the page under test, Fetching data via the Inspector timeline and traces, Using Web Page Replay to cache real-world websites so they don’t change when used in benchmarks.
  
 +
==== Web Page Replay ====
 
* [https://github.com/chromium/web-page-replay Web Page Replay] - Record live Web pages and use them for local performance testing! Use local DNS and HTTP(S) proxies to captures your live traffic. Then use these captures in order to replay the same exact content, making sure that your tests get consistent results, that are not affected by the origin servers, the network, etc.
 
* [https://github.com/chromium/web-page-replay Web Page Replay] - Record live Web pages and use them for local performance testing! Use local DNS and HTTP(S) proxies to captures your live traffic. Then use these captures in order to replay the same exact content, making sure that your tests get consistent results, that are not affected by the origin servers, the network, etc.
  
 +
==== Opera Mobile Classic Emulator ====
 
* [http://www.opera.com/developer/mobile-emulator Opera Mobile Classic Emulator]
 
* [http://www.opera.com/developer/mobile-emulator Opera Mobile Classic Emulator]
  
 +
==== Opera Mini ====
 
* [http://dev.opera.com/articles/installing-opera-mini-on-your-computer/ Installing Opera Mini on Your Computer]
 
* [http://dev.opera.com/articles/installing-opera-mini-on-your-computer/ Installing Opera Mini on Your Computer]
  
 +
==== Opera TV Emulator ====
 
* [http://www.operasoftware.com/products/tv-emulator Opera TV Emulator] allows web developers to test HTML5 and CE-HTML content for TVs and other appliances running the Opera Devices SDK, as well as HTML-based applications for the Opera TV Store. It comes packaged as an Oracle VirtualBox image and can be run on Windows, Mac and Linux hosts.
 
* [http://www.operasoftware.com/products/tv-emulator Opera TV Emulator] allows web developers to test HTML5 and CE-HTML content for TVs and other appliances running the Opera Devices SDK, as well as HTML-based applications for the Opera TV Store. It comes packaged as an Oracle VirtualBox image and can be run on Windows, Mac and Linux hosts.
  
−
* [http://tetsubo.org/docs/screening/ 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
+
==== The Screening ====
 +
* [http://tetsubo.org/docs/screening/ The Screening] - 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
 +
 
 +
==== IMacros ====
 +
* https://en.wikipedia.org/wiki/IMacros - 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.
 +
 
 +
 
 +
==== BrowserStack ====
 +
* [https://www.browserstack.com BrowserStack] - Instant access to 2000+ real mobile devices and browsers. Ship mobile apps and websites that work for everyone, every time.
 +
** https://github.com/browserstack
  
−
* [http://en.wikipedia.org/wiki/IMacros 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.
+
* https://github.com/bennylope/screenshooter - A tool for generating BrowserStack screenshots from the command line.
 +
 
 +
==== Appetize.io ====
 +
* [https://appetize.io/ Appetize.io] - Run native mobile apps in your browser. For app demos, training, customer support, development, testing, and more [https://news.ycombinator.com/item?id=8487809]
  
 
=== Services ===
 
=== Services ===
Line 869: Line 1,015:
  
 
=== Mobile ===
 
=== Mobile ===
 +
See also [[Android#PC]]
 +
 +
 
* [http://remotedebug.org/ RemoteDebug] is an initiative to bring a common remote debugging protocol to today's browsers. The vision is to enable a new generation of DevTools and editors that are able to communicate independently of their vendor.
 
* [http://remotedebug.org/ RemoteDebug] is an initiative to bring a common remote debugging protocol to today's browsers. The vision is to enable a new generation of DevTools and editors that are able to communicate independently of their vendor.
  
−
See also [[Android#PC]]
+
 
 +
 
 +
 
 +
* https://github.com/liriliri/eruda - Console for Mobile Browsers.
  
 
=== A/B ===
 
=== A/B ===
Line 878: Line 1,030:
 
== Web API ==
 
== Web API ==
 
* http://www.w3.org/2008/webapps/wiki/PubStatus
 
* http://www.w3.org/2008/webapps/wiki/PubStatus
 +
  
 
* http://meemoo.org/iframework/#gist/3707631
 
* http://meemoo.org/iframework/#gist/3707631
 +
  
 
* http://www.w3.org/TR/WebCryptoAPI/
 
* http://www.w3.org/TR/WebCryptoAPI/
  
−
=== Websockets ===
 
−
* http://caitiem.com/2013/12/02/a-websocket-primer/
 
−
* http://lucumr.pocoo.org/2012/9/24/websockets-101/
 
  
−
* http://websocketd.com/ [https://news.ycombinator.com/item?id=6879667] [https://news.ycombinator.com/item?id=9050970]
+
* [https://webapicontroversy.com/ Web API Controversy] -  Very much still a work in progress, please help out in the repository.
−
** https://gist.github.com/jeroenjanssens/7896821
+
 
 +
 
 +
=== Webhooks ===
 +
 
 +
* https://en.wikipedia.org/wiki/Webhook - a method of augmenting or altering the behaviour of a web page, or web application, with custom callbacks. These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application. The term "webhook" was coined by Jeff Lindsay in 2007 from the computer programming term hook.
  
−
* https://deepstream.io/ - a fast, secure and scalable websocket & tcp server for mobile, web & iot
 
  
−
* https://github.com/uWebSockets/uWebSockets [https://news.ycombinator.com/item?id=12643373]
+
* [https://requestbin.fullcontact.com/ RequestBin] - gives you a URL that will collect requests made to it and let you inspect them in a human-friendly way.Use RequestBin to see what your HTTP client is sending or to inspect and debug webhook requests.
 +
 
 +
* [http://httpresponder.com/ HTTP Responder] - Create an endpoint to collect and respond to web hooks. View the last several requests, and configure canned responses in both JSON and XML.
 +
** https://github.com/aaronlerch/respond-to-it
 +
 
 +
=== WebSocket ===
 +
See [[WebSocket]]
 +
 
 +
=== Web workers ===
 +
* [https://html.spec.whatwg.org/multipage/workers.html#workers HTML Standard: Web workers] -  an API for running scripts in the background independently of any user interface scripts.This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. The examples below show some appropriate uses of workers.Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.
 +
 
  
−
=== Web Workers ===
 
 
* https://zapier.com/engineering/intro-to-web-workers/
 
* https://zapier.com/engineering/intro-to-web-workers/
 +
 +
 +
* https://github.com/neomjs/neo - The webworkers driven UI framework (Beta version)
 +
 +
=== Service Workers ===
 +
* [https://w3c.github.io/ServiceWorker/ Service Workers] - This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.The core of this system is an event-driven Web Worker, which responds to events dispatched from documents and other sources. A system for managing installation, versions, and upgrades is provided.
 +
 +
=== Service Workers ===
 +
* [https://w3c.github.io/ServiceWorker/ Service Workers] - This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.The core of this system is an event-driven Web Worker, which responds to events dispatched from documents and other sources. A system for managing installation, versions, and upgrades is provided.
  
 
=== WebRTC ===
 
=== WebRTC ===
Line 902: Line 1,074:
  
 
* https://news.ycombinator.com/item?id=13264952
 
* https://news.ycombinator.com/item?id=13264952
 +
 +
 +
 +
* https://github.com/rtctunnel/rtctunnel - build network tunnels over WebRTC [https://news.ycombinator.com/item?id=18475179]
  
 
=== Audio ===
 
=== Audio ===
Line 926: Line 1,102:
  
 
=== Web Audio API ===
 
=== Web Audio API ===
−
See also [[JS libs#Media]]
+
See [[Web Audio]], also [[JS libs#Media]]
−
 
 
−
* w3.org: [https://www.w3.org/TR/webaudio/ Web Audio API] - specification describes a high-level JavaScript API for processing and synthesizing audio in web applications. The primary paradigm is of an audio routing graph, where a number of AudioNode objects are connected together to define the overall audio rendering. The actual processing will primarily take place in the underlying implementation (typically optimized Assembly / C / C++ code), but direct JavaScript processing and synthesis is also supported.
 
−
 
 
−
 
 
−
* https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
 
−
 
 
−
* http://www.w3.org/community/audio-dev/
 
−
 
 
−
 
 
−
* https://webaudio.github.io/web-midi-api/
 
−
** https://github.com/WebAudio/web-audio-api
 
−
 
 
−
* http://www.kreativekorp.com/app/mymidikeyboard/
 
−
 
 
−
* https://www.youtube.com/watch?v=pg-Rig1XU2s
 
−
 
 
−
 
 
−
* http://teropa.info/blog/2016/07/28/javascript-systems-music.html [https://news.ycombinator.com/item?id=12518768]
 
−
 
 
−
 
 
−
* http://www.reddit.com/r/webaudio
 
−
 
 
−
* 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/ [https://news.ycombinator.com/item?id=6181627]
 
−
 
 
−
* [https://github.com/h5bp/lazyweb-requests/issues/82 A standardized framework for building and including Web Audio API instrument/effect "patches"]
 
−
 
 
−
* 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/
 
−
 
 
−
* https://www.resistorsings.com/106/
 
−
 
 
−
* http://lowlag.alienbill.com/ - .... now!
 
−
 
 
−
* http://www.igorski.nl/experiment/websid
 
−
 
 
−
* http://webaudio.github.io/web-midi-api/
 
−
 
 
−
* http://arstechnica.co.uk/information-technology/2015/05/google-chrome-gains-midi-support-enables-web-based-synths-and-daws/
 
−
 
 
−
* https://github.com/timbresmith/pandemonium
 
−
 
 
−
* https://news.ycombinator.com/item?id=12252462
 
−
 
 
−
* https://wavesurfer-js.org/ a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas. With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application.
 
−
 
 
−
* http://www.g200kg.com/archives/2017/02/webaudio-api-4.html
 
−
** https://github.com/g200kg/webaudiodesigner
 
−
 
 
−
==== Libraries ====
 
−
* https://github.com/web-audio-components/web-audio-components-spec
 
−
* http://component.fm/
 
−
* https://groups.google.com/forum/#!forum/web-audio-components
 
−
 
 
−
* http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
 
−
 
 
−
* http://audiolibjs.org/
 
−
* https://github.com/corbanbrook/dsp.js
 
−
 
 
−
* http://lowlag.alienbill.com/
 
−
* [http://mohayonao.github.io/timbre.js/ 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.
 
−
 
 
−
* [https://github.com/meenie/band.js Band.js - Music Composer] - An interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.
 
−
 
 
−
* http://greweb.me/2013/09/beez/
 
−
 
 
−
* https://news.ycombinator.com/item?id=9332267
 
−
 
 
−
* https://github.com/rserota/wad
 
−
 
 
−
* http://hoch.github.io/WAAX/
 
−
** https://github.com/hoch/waax
 
−
 
 
−
 
 
−
* https://tonejs.github.io/examples/#jump
 
−
 
 
−
 
 
−
==== Examples ====
 
−
* http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html
 
−
 
 
−
* http://nmf.cappel-nord.de/ - networked
 
−
 
 
−
* http://tytel.org/lissa
 
−
 
 
−
* https://github.com/Dinahmoe/tuna
 
−
 
 
−
* http://labs.dinahmoe.com/plink/
 
−
 
 
−
* http://questionpark.com/electro-theremin/
 
−
 
 
−
* http://plucked.de/
 
−
 
 
−
* http://chromium.googlecode.com/svn/trunk/samples/audio/convolution-effects.html
 
−
 
 
−
* http://www.oampo.co.uk/labs/technocrat/
 
−
 
 
−
* http://aikelab.net/websynth/
 
−
 
 
−
* http://errozero.co.uk/acid-machine/ [https://news.ycombinator.com/item?id=9178933]
 
−
 
 
−
* http://billgathen.github.io/pentaphone/ [https://news.ycombinator.com/item?id=10602323]
 
−
 
 
−
* http://www.synth.fm/ [https://news.ycombinator.com/item?id=9573471]
 
−
 
 
−
* http://nicroto.github.io/viktor/ [https://news.ycombinator.com/item?id=9640218]
 
−
 
 
−
* https://news.ycombinator.com/item?id=13004621
 
−
 
 
−
* https://factotumo.com/web-midi-console/
 
−
** https://github.com/benschmaus/web-midi-console
 
−
 
 
−
* https://www.noisebridge.net/wiki/Web_Sound_Toys
 
−
 
 
−
* https://www.tones.fm/stfwn [https://news.ycombinator.com/item?id=16552777
 
  
 
=== WebVR ===
 
=== WebVR ===
Line 1,057: Line 1,110:
 
* https://news.ycombinator.com/item?id=13023683
 
* https://news.ycombinator.com/item?id=13023683
  
−
== API ==
+
=== WebHID ===
−
* https://en.wikipedia.org/wiki/Web_API
+
* [https://wicg.github.io/webhid/ WebHID API] - This document describes an API for providing access to devices that support the Human Interface Device (HID) protocol.
−
* https://en.wikipedia.org/wiki/Open_API
 
  
−
* https://ifttt.com/wtf
 
  
−
* https://www.apitools.com/apis
+
* https://github.com/robatwilliams/awesome-webhid - WebHID is a browser API (navigator.hid) that provides access to HID input/output devices. It's a higher level of abstraction than the WebUSB and Web Bluetooth APIs, but lower than the Gamepad API and basic input (pointer/keyboard).
  
−
* stackoverflow: [http://stackoverflow.hewgill.com/questions/723/94.html What should a developer know before building a public web site?] - 1240 votes
+
=== Native ===
  
−
* [http://www.programmableweb.com/apis ProgrammableWeb] - API Dashboard
+
* https://github.com/koute/stdweb
−
* [http://www.mashape.com/search?query=free Mashape] - Free APIs
 
  
−
* http://apify.heroku.com/resources
+
== Geo ==
−
http://www.diffbot.com/
+
* http://www.maxmind.com/en/geolocation_landing
−
 
 
−
* http://www.bbc.co.uk/developer/technology/apis.html
 
−
 
 
−
* http://developer.echonest.com/ - music related
 
  
−
* http://webshell.io/
 
  
−
* http://www.zazler.com/
+
== Translation ==
  
−
=== Google Feed API ===
+
* [https://www.w3.org/TR/mlw-metadata-us-impl/#Introduction Metadata for the Multilingual Web - Usage Scenarios and Implementations]
−
* https://developers.google.com/feed/v1/devguide
 
−
* https://developers.google.com/feed/v1/reference
 
−
* https://code.google.com/apis/ajax/playground/#load_feed
 
  
−
=== REST ===
+
== Security ==
−
* https://en.wikipedia.org/wiki/Representational_State_Transfer
+
* [http://html5sec.org/ HTML5 Security Cheatsheet]
  
 +
* [http://lcamtuf.coredump.cx/postxss/ Postcards from the post-XSS world] - Michal Zalewski
  
 +
* http://www.exploit-db.com/google-dorks/
 +
* http://www.aldeid.com/wiki/Google-hacking-diggity-project
  
−
* https://en.wikipedia.org/wiki/HATEOAS - Hypermedia As The Engine Of Application State (HATEOAS) is a constraint of the REST application architecture that distinguishes it from other network application architectures. With HATEOAS, a client interacts with a network application that application servers provide dynamically entirely through hypermedia. A REST client needs no prior knowledge about how to interact with an application or server beyond a generic understanding of hypermedia. By contrast, clients and servers in some service-oriented architectures (SOA) interact through a fixed interface shared through documentation or an interface description language (IDL). The way that the HATEOAS constraint decouples client and server enables the server functionality to evolve independently.
+
* http://www.portswigger.net/burp/
  
 +
* http://wpscan.org/
  
  
−
* https://chrome.google.com/webstore/detail/rest/flkpngnnmfhmdcoggeompbgbpocpfmgk
+
* https://blog.appsecco.com/a-penetration-testers-guide-to-sub-domain-enumeration-7d842d5570f6 [https://news.ycombinator.com/item?id=15676951]
  
−
* http://tomayko.com/writings/rest-to-my-wife
 
  
−
* http://www.infoq.com/articles/rest-introduction
 
−
* http://stackoverflow.com/questions/671118/what-exactly-is-restful-programming [http://news.ycombinator.com/item?id=3538585]
 
−
* 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
 
  
 +
=== OWASP ===
 +
* https://www.owasp.org/index.php/Main_Page  Open Web Application Security Project (OWASP) is a 501(c)(3) worldwide not-for-profit charitable organization focused on improving the security of software. Our mission is to make software security visible, so that individuals and organizations worldwide can make informed decisions about true software security risks.
  
−
* http://mikehadlow.blogspot.co.uk/2012/08/rest-epic-semantic-fail.html
+
* https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_of_Contents
  
 +
* https://www.owasp.org/index.php/Cheat_Sheets
 +
* https://www.owasp.org/index.php/Web_Application_Security_Testing_Cheat_Sheet
  
−
* http://broadcast.oreilly.com/2011/06/the-good-the-bad-the-ugly-of-rest-apis.html
+
* https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
  
−
* http://ql.io/
+
=== Fingerprinting ===
 +
* https://news.ycombinator.com/item?id=13925238
  
−
* http://gist.io/3169140
 
−
* http://apify.heroku.com/resources
 
  
−
* http://static.matthewlmcclure.com/s/2012/11/24/hypermedia-is-the-new-rest.html
+
=== CSP ===
 +
* https://en.wikipedia.org/wiki/Content_Security_Policy
  
−
* http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api [https://news.ycombinator.com/item?id=5819231]
 
  
−
* http://www.onebigfluke.com/2013/08/throw-away-the-rest.html
 
  
−
* https://github.com/zapier/resthooks - pubsub
 
−
 
−
* https://news.ycombinator.com/item?id=10765148
 
−
 
−
=== SOAP ===
 
−
* http://www.thetwowayweb.com/soapmeetsrss
 
−
 
−
=== Software ===
 
−
* https://openresty.org/
 
−
 
−
* http://ramses.tech/
 
−
 
−
== Geo ==
 
−
* http://www.maxmind.com/en/geolocation_landing
 
  
 
== Web Apps ==
 
== Web Apps ==
 
* http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
 
* http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
  
−
== Houdini ==
 
−
* https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of [https://news.ycombinator.com/item?id=11357794]
 
  
−
== WebAssembly ==
+
* [https://developers.google.com/web/fundamentals/integration/webapks WebAPKs on Android  |  Web Fundamentals  |  Google Developers] - Add to Home Screen on Android does more than just add the Progressive Web App to the users Home Screen. Chrome automatically generates and installs a special APK of your app. We sometimes refer to this as a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.
−
* https://en.wikipedia.org/wiki/WebAssembly
 
  
 +
* [https://www.inovex.de/blog/progressive-web-apps-vs-webapks/ Progressive Web Apps vs. WebAPKs: Explained]
  
−
* https://hacks.mozilla.org/2017/03/previewing-the-webassembly-explorer/
+
* [https://developers.google.com/web/progressive-web-apps/checklist Progressive Web App Checklist  |  Web  |  Google Developers]
  
−
* https://mayaposch.wordpress.com/2015/12/30/a-look-at-asm-js-and-the-future-with-webassembly/ [https://news.ycombinator.com/item?id=10914208]
+
* [https://medium.com/@indreklasn/everything-you-need-to-know-about-pwas-8e41a7e745aa Everything You Need to Know About PWAs – Indrek Lasn] - [https://lobste.rs/s/st6y2g/everything_you_need_know_about_pwas]
  
−
* http://cultureofdevelopment.com/blog/build-your-first-thing-with-web-assembly/ [https://news.ycombinator.com/item?id=11976509]
 
  
−
* https://github.com/AndrewScheidecker/WAVM [https://news.ycombinator.com/item?id=11844171]
+
* [https://www.w3.org/TR/appmanifest/ Web App Manifest] - This specification defines a JSON-based manifest file that provides developers with a centralized place to put metadata associated with a web application. This metadata includes, but is not limited to, the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). Additionally, the manifest allows a developer to "scope" a web application to a URL. This restricts the URLs to which the manifest is applied and provides a means to "deep link" into a web application from other applications.Using this metadata, user agents can provide developers with means to create user experiences that are more comparable to that of a native application.
  
−
* https://webassembly.studio
+
* https://github.com/pwa-builder/PWABuilder-CLI - used to create hosted web applications based on a W3C Web App manifest.
−
** [https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/ Sneak Peek at WebAssembly Studio – Mozilla Hacks – the Web developer blog] - [https://news.ycombinator.com/item?id=16811721]
 
  
−
== 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
 
  
−
* https://stevefaulkner.github.io/html-mapping-tests/
 
  
−
* https://khan.github.io/tota11y/ [https://news.ycombinator.com/item?id=9797197]
+
* [https://web.dev/workbox-share-targets/ Integrate PWAs into native sharing UIs with Workbox] - [https://news.ycombinator.com/item?id=21997955]
  
−
=== W3C ===
+
== Houdini ==
−
* [http://www.w3.org/TR/WCAG20/ Web Content Accessibility Guidelines (WCAG) 2.0]
+
* https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of [https://news.ycombinator.com/item?id=11357794]
−
** [http://www.w3.org/WAI/intro/wcag.php Web Content Accessibility Guidelines (WCAG) Overview]
 
−
** [http://www.w3.org/WAI/WCAG20/quickref/Overview.php How to Meet WCAG 2.0]
 
−
** [http://www.w3.org/TR/WCAG20-TECHS Techniques for WCAG 2.0] [http://www.w3.org/TR/WCAG10-TECHS/]
 
−
 
 
−
* http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page
 
−
 
 
−
=== Specs ===
 
−
* http://webaim.org/articles/
 
−
* http://wave.webaim.org/
 
−
 
 
−
* http://www.sigmer.com/accessibility_statement.html
 
−
 
 
−
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
 
−
* http://www.hassellinclusion.com/bs8878/
 
−
* http://www.access8878.co.uk/
 
−
 
 
−
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". [http://drupal.org/node/561750]
 
−
 
 
−
* http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/
 
−
 
 
−
* http://webaim.org/techniques/keyboard/tabindex
 
−
** http://wave.webaim.org/toolbar - for firefox
 
−
 
 
−
* http://www.daltonize.org/
 
−
 
 
−
* 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/
 
−
 
 
−
=== Colour blindness ===
 
−
* [http://helloworlddesignco.com/web-design-news-portland-oregon.php?pid=51 Is your website colorblind friendly?] [https://news.ycombinator.com/item?id=7990382]
 
−
 
 
−
=== Screen readers ===
 
−
* http://www.freedomscientific.com/products/fs/jaws-product-page.asp
 
−
* http://www.nvda-project.org/
 
−
 
 
−
* https://live.gnome.org/LSR
 
−
 
 
−
* http://www.youtube.com/watch?v=92pM6hJG6Wo
 
  
 
== Virtual ==
 
== Virtual ==
Line 1,230: Line 1,205:
 
* http://nwtools.com/
 
* http://nwtools.com/
 
* http://urlspy.co.uk/
 
* http://urlspy.co.uk/
 +
 +
 +
 +
* https://www.pipes.digital/
  
 
== Mockup ==
 
== Mockup ==
Line 1,236: Line 1,215:
  
 
* http://magicmockups.com/mockup/1/
 
* http://magicmockups.com/mockup/1/
 +
 +
 +
* https://github.com/karanchahal/DoodleMaster - seeks to turn your UI mockups into real code. Currently this repository just serves to demonstrate a Proof Of Concept of Artificially Intelligent Design Tools. [https://news.ycombinator.com/item?id=18480115]
  
 
== Support ==
 
== Support ==
Line 1,245: Line 1,227:
 
* https://www.subtome.com/ - by Superfeedr
 
* https://www.subtome.com/ - by Superfeedr
 
** http://blog.superfeedr.com/asset-hosting-ssl-domain/
 
** http://blog.superfeedr.com/asset-hosting-ssl-domain/
 +
 +
 +
* [http://bhfsteve.blogspot.com/2013/03/monitoring-web-page-for-changes-using.html Steve's Blog: Monitoring a web page for changes using bash]
  
 
== HAR ==
 
== HAR ==
Line 1,274: Line 1,259:
  
  
 +
* https://github.com/adam-golab/react-developer-roadmap
 +
 +
* https://github.com/InterviewMap/InterviewMap
  
 
=== Tracking ===
 
=== Tracking ===
 
* http://www.aboutads.info/choices/ [https://news.ycombinator.com/item?id=11392366]
 
* http://www.aboutads.info/choices/ [https://news.ycombinator.com/item?id=11392366]
−
 
  
 
== Flash ==
 
== Flash ==
Line 1,304: Line 1,291:
  
 
* http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard - sans flash solution
 
* http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard - sans flash solution
 +
 +
== App ==
 +
 +
 +
 +
* [https://cobalt.foo/ Cobalt] - A high-performance, small-footprint platform that implements a subset of HTML5/CSS/JS to run applications

Latest revision as of 05:12, 28 March 2024

Quick




data:text/html, <html contenteditable>
  quick nodepad [2]

data uri: ACE with Vim keybindings [3]


General

See also Development


  • pineapple.io - A central hub of Tutorials, Tools and Assets for developers and designers




Web design

See also Design, UI













Commercial

Basic project

  • domain
  • hosting or provision
  • backups
  • analytics
  • initialise project
  • fill with content - get a copywriter


  • Webfonts for headings, paragraphs, navigation, etc. (optimised via Font Squirrel)
  • Scale and vertical rhythm baseline (proportions for font-size and line-height)
  • Visual hierarchy
  • Main and section colour palette (CSS)
  • And other creative magick


  • Check in different browsers
  • Quick; Ask folk for remote feedback
  • Detailed; Get folk to browse it, quietly watch over their shoulder, tell them to access certain info, ask them to vocalise all thoughts, write down their actions and issues, communicate more, refine design, implement

Productivity

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

Opinion

  • Slant is a collaboratively edited resource that helps you quickly make decisions.



  • Splitting the Web - by Ploum on 2023-08-01, "There’s an increasing chasm dividing the modern web. On one side, the commercial, monopolies-riddled, media-adored web. A web which has only one objective: making us click. It measures clicks, optimises clicks, generates clicks. It gathers as much information as it could about us and spams every second of our life with ads, beep, notifications, vibrations, blinking LEDs, background music and fluorescent titles. A web which boils down to Idiocracy in a Blade Runner landscape, a complete cyberpunk dystopia. Then there’s the tech-savvy web. People who install adblockers or alternative browsers. People who try alternative networks such as Mastodon or, God forbid, Gemini. People who poke fun at the modern web by building true HTML and JavaScript-less pages." [16]

Guides and articles

  • Ops School is a comprehensive program that will help you learn to be an operations engineer.

CSS


oocss

Development

  • HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript] [18]



  • Page Weight Matters - "By keeping your client side code small and lightweight, you can literally open your product up to new markets."

Books

Humour

Tools

See also Browsers

  • pup is a command line tool for processing HTML. It reads from stdin, prints to stdout, and allows the user to filter parts of the page using CSS selectors. Inspired by jq, pup aims to be a fast and flexible way of exploring HTML from the terminal. [20]

Network

See Network

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.
  • 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

  • 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

  • CSSess is a JS tool that helps find extra CSS rules on your site. It is designed to be used as a bookmarklet. CSSess has many improvements over Helium:
  • 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;

  • 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


Images

Authoring

See also Development#IDE

Maqetta

BlufGriffon

  • BlueGriffon - 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.


CodeMirror

  • CodeMirror - 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 - 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 - 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.


Cloud9 IDE

  • AWS Cloud9 Amazon Web Services - a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser. It includes a code editor, debugger, and terminal. Cloud9 comes prepackaged with essential tools for popular programming languages, including JavaScript, Python, PHP, and more, so you don’t need to install files or configure your development machine to start new projects. Since your Cloud9 IDE is cloud-based, you can work on your projects from your office, home, or anywhere using an internet-connected machine. Cloud9 also provides a seamless experience for developing serverless applications enabling you to easily define resources, debug, and switch between local and remote execution of serverless applications. With Cloud9, you can quickly share your development environment with your team, enabling you to pair program and track each other's inputs in real time.


Cloudbox

  • Codebox - a complete and modular Cloud IDE. It can run on any unix-like machine (Linux, Mac OS X). It is an open source component of codebox.io (Cloud IDE as a Service). The IDE can run on your desktop (Linux or Mac), on your server or the cloud. You can use the codebox.io service to host and manage IDE instances.

Thimble

  • Thimble - an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. [29]

Glitch

Scripted

  • Scripted - 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.


Brackets

  • Brackets - 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


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.

Zed

  • Zed - a fully offline-capable, open source, keyboard-focused, Chrome-based text and code editor you can use to edit local files as well as remote files on any server. It’s built using web technologies (100% HTML, CSS and JavaScript) yet has all features you’d expect from a capable code editor.

MadEye

  • MadEye - a collaborative web editor backed by your filesystem. Launches from the shell, uses ACE.

Atom

  • Atom - a hackable text editor for the 21st century.


Tiled Text

  • Tiled Text - an Android compatible framework for making slick, makes mobile computers awesome; editing text with them still sucks. The solution: the Tiled Text engine

Services

jsFiddle

jsBin

in console; 

jsbin.settings.editor.key = value; [32]

jsbin.settings.editor. smartIndent = false;

codepen.io

  • Has Sass/SCSS, etc.
  • Live update
  • Vertical or horizontal columns
  • uses CodeMirror.

cssdeck

scratchpad.io

  • line numbers!
  • er, no seperate panes? bad ui

Coderpad.io

Other

  • 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; }


Improved bookmarklet: 

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';}}})();

Needs section, etc, rainbow colours! Also, switch margin and or padding with transparent border. 



*,*::before,*::after { outline: 1px solid red; }

Sourcemaps

  • Introduction to JavaScript Source Maps - HTML5 Rocks - Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps.

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


Bootstrap

  • Bootstrap CDN - The recommended CDN for Bootstrap, Font Awesome, and Bootswatch. MaxCDN.


Reference



Theme templates and styles



Glyphs





Buttons

Other

Foundation


Forms

Other

































  • Teutonic CSS - 12KB of CSS to jump start your HTML. A modern CSS framework — versatile, well documented.


  • Marx - a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.



  • mini.css - minimal, responsive, style-agnostic CSS framework


Tailwind CSS


  • Tailwind Builder - Use the capabilities of our editor in working with the Tailwind CSS framework to speed up the front-end development process. [49]


Responsive

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

See also Development#Testing, JS tools#Testing

Tools

PhantomJS

Ghost Driver

webshots

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

Nightmare

SlimerJS

  • SlimerJS - similar to PhantomJs, except that it runs Gecko, the browser engine of Mozilla Firefox, instead of Webkit (And it is not yet truly headless).

Wraith

  • https://github.com/BBC-News/wraith - a screenshot comparison tool, created by developers at BBC News. Wraith uses either PhantomJS or SlimerJS to create screen-shots of different environments and then creates a diff of the two images, the affected areas are highlighted in blue.

Page Monitor

CutyCapt

  • CutyCapt - a small cross-platform command-line utility to capture WebKit's rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.

Telemetry

  • Telemetry - Chrome's performance testing framework. It allows you to perform arbitrary actions on a set of web pages and report metrics about it. The framework abstracts: Launching a browser with arbitrary flags on any platform, Opening a tab and navigating to the page under test, Fetching data via the Inspector timeline and traces, Using Web Page Replay to cache real-world websites so they don’t change when used in benchmarks.

Web Page Replay

  • Web Page Replay - Record live Web pages and use them for local performance testing! Use local DNS and HTTP(S) proxies to captures your live traffic. Then use these captures in order to replay the same exact content, making sure that your tests get consistent results, that are not affected by the origin servers, the network, etc.

Opera Mobile Classic Emulator

Opera Mini

Opera TV Emulator

  • Opera TV Emulator allows web developers to test HTML5 and CE-HTML content for TVs and other appliances running the Opera Devices SDK, as well as HTML-based applications for the Opera TV Store. It comes packaged as an Oracle VirtualBox image and can be run on Windows, Mac and Linux hosts.

The Screening

  • The Screening - 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

IMacros

  • WP: IMacros - 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.


BrowserStack

Appetize.io

  • Appetize.io - Run native mobile apps in your browser. For app demos, training, customer support, development, testing, and more [55]

Services

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

Mobile

See also Android#PC


  • RemoteDebug is an initiative to bring a common remote debugging protocol to today's browsers. The vision is to enable a new generation of DevTools and editors that are able to communicate independently of their vendor.



A/B

Web API





Webhooks

  • WP: Webhook - a method of augmenting or altering the behaviour of a web page, or web application, with custom callbacks. These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application. The term "webhook" was coined by Jeff Lindsay in 2007 from the computer programming term hook.


  • RequestBin - gives you a URL that will collect requests made to it and let you inspect them in a human-friendly way.Use RequestBin to see what your HTTP client is sending or to inspect and debug webhook requests.

WebSocket

See WebSocket

Web workers

  • HTML Standard: Web workers - an API for running scripts in the background independently of any user interface scripts.This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. The examples below show some appropriate uses of workers.Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.



Service Workers

  • Service Workers - This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.The core of this system is an event-driven Web Worker, which responds to events dispatched from documents and other sources. A system for managing installation, versions, and upgrades is provided.

Service Workers

  • Service Workers - This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.The core of this system is an event-driven Web Worker, which responds to events dispatched from documents and other sources. A system for managing installation, versions, and upgrades is provided.

WebRTC

See Sharing#WebRTC



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

See Web Audio, also JS libs#Media

WebVR


WebHID

  • WebHID API - This document describes an API for providing access to devices that support the Human Interface Device (HID) protocol.


  • https://github.com/robatwilliams/awesome-webhid - WebHID is a browser API (navigator.hid) that provides access to HID input/output devices. It's a higher level of abstraction than the WebUSB and Web Bluetooth APIs, but lower than the Gamepad API and basic input (pointer/keyboard).

Native

Geo


Translation

Security



OWASP

  • https://www.owasp.org/index.php/Main_Page Open Web Application Security Project (OWASP) is a 501(c)(3) worldwide not-for-profit charitable organization focused on improving the security of software. Our mission is to make software security visible, so that individuals and organizations worldwide can make informed decisions about true software security risks.

Fingerprinting


CSP



Web Apps


  • WebAPKs on Android | Web Fundamentals | Google Developers - Add to Home Screen on Android does more than just add the Progressive Web App to the users Home Screen. Chrome automatically generates and installs a special APK of your app. We sometimes refer to this as a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android's app settings and to register a set of intent filters.


  • Web App Manifest - This specification defines a JSON-based manifest file that provides developers with a centralized place to put metadata associated with a web application. This metadata includes, but is not limited to, the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). Additionally, the manifest allows a developer to "scope" a web application to a URL. This restricts the URLs to which the manifest is applied and provides a means to "deep link" into a web application from other applications.Using this metadata, user agents can provide developers with means to create user experiences that are more comparable to that of a native application.


Houdini

Virtual

Web tools


Mockup

  • RoughDraft.js - Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code.



Support

Subscrption


HAR

Typing

Services

to sort

http://bentilly.blogspot.co.uk/2012/10/ab-testing-scale-cheat-sheet.html




Tracking

Flash

  • quvi project parses stream URLs for Internet applications to access the media of those hosting websites that use the “adobe flash multimedia platform” and require the installation of the flash-player plugin.

MP3

Clipboard

App

  • Cobalt - A high-performance, small-footprint platform that implements a subset of HTML5/CSS/JS to run applications
Retrieved from "https://wiki.thingsandstuff.org/index.php?title=WebDev&oldid=64309"