708 lines
27 KiB
HTML
708 lines
27 KiB
HTML
<h1 id="awesome-html5-awesome-build-status">Awesome HTML5 <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a> <a
|
||
href="https://travis-ci.org/diegocard/awesome-html5"><img
|
||
src="https://api.travis-ci.org/diegocard/awesome-html5.svg?branch=master"
|
||
alt="Build Status" /></a></h1>
|
||
<p>A curated list of awesome HTML5 resources. Inspired by <a
|
||
href="https://github.com/ziadoz/awesome-php">awesome-php</a> and <a
|
||
href="https://github.com/vinta/awesome-python">awesome-python</a></p>
|
||
<h2 id="table-of-contents">Table of Contents</h2>
|
||
<ul>
|
||
<li><a href="#articles-and-standards">Articles and standards</a></li>
|
||
<li><a href="#multimedia-capabilities">Multimedia capabilities</a>
|
||
<ul>
|
||
<li><a href="#audio">Audio</a></li>
|
||
<li><a href="#media-capture">Media capture</a></li>
|
||
<li><a href="#picture-in-picture">Picture in Picture</a></li>
|
||
<li><a href="#speech-synthesis">Speech synthesis</a></li>
|
||
<li><a href="#voice-recognition">Voice recognition</a></li>
|
||
<li><a href="#virtual-reality">Virtual Reality (VR)</a></li>
|
||
<li><a href="#web-animations">Web animations</a></li>
|
||
</ul></li>
|
||
<li><a href="#elements">Elements</a>
|
||
<ul>
|
||
<li><a href="#canvas">Canvas</a></li>
|
||
<li><a href="#head">Head</a></li>
|
||
<li><a href="#sectioning">Sectioning</a></li>
|
||
<li><a href="#media-elements">Media Elements</a></li>
|
||
<li><a href="#forms">Forms</a></li>
|
||
<li><a href="#time">Time</a></li>
|
||
<li><a href="#webtt">WebVTT</a></li>
|
||
<li><a href="#html-imports">HTML Imports</a></li>
|
||
</ul></li>
|
||
<li><a href="#development-apis">Development APIs</a>
|
||
<ul>
|
||
<li><a href="#permissions">Permissions</a></li>
|
||
<li><a href="#geolocation">Geolocation</a></li>
|
||
<li><a href="#cryptography">Cryptography</a></li>
|
||
<li><a href="#file">File</a></li>
|
||
<li><a href="#frame-timing">Frame timing</a></li>
|
||
<li><a href="#requestidlecallback">requestIdleCallback</a></li>
|
||
<li><a href="#requestanimationframe">requestAnimationFrame</a></li>
|
||
<li><a href="#web-payments">Web payments</a></li>
|
||
</ul></li>
|
||
<li><a href="#semantics">Semantics</a></li>
|
||
<li><a href="#accessibility">Accessibility</a></li>
|
||
<li><a href="#dom-management">DOM management</a>
|
||
<ul>
|
||
<li><a href="#shadow-dom">Shadow DOM</a></li>
|
||
<li><a href="#data-binding">Data Binding</a></li>
|
||
<li><a href="#web-components">Web Components</a></li>
|
||
</ul></li>
|
||
<li><a href="#progressive-web-apps">Progressive web apps</a>
|
||
<ul>
|
||
<li><a href="#service-workers">Service Workers</a></li>
|
||
<li><a href="#offline-caching">Offline caching</a></li>
|
||
<li><a href="#push-notifications">Push Notifications</a></li>
|
||
</ul></li>
|
||
<li><a href="#client-side-storage">Client side storage</a></li>
|
||
<li><a href="#performance">Performance</a></li>
|
||
<li><a href="#mobile">Mobile</a></li>
|
||
<li><a href="#communications-and-interoperability">Communications and
|
||
interoperability</a>
|
||
<ul>
|
||
<li><a href="#web-sockets">Web Sockets</a></li>
|
||
<li><a href="#webrtc">WebRTC</a></li>
|
||
</ul></li>
|
||
<li><a href="#web-workers">Web Workers</a></li>
|
||
<li><a href="#webgl">WebGL</a></li>
|
||
<li><a href="#browser-compatibility">Browser compatibility</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#game-development">Game development</a></li>
|
||
<li><a href="#bootcamp">Bootcamp</a></li>
|
||
<li><a href="#videos-and-keynotes">Videos and Keynotes</a></li>
|
||
<li><a href="#websites-and-resources">Websites and resources</a>
|
||
<ul>
|
||
<li><a href="#websites">Websites</a></li>
|
||
<li><a href="#weekly-news">Weekly news</a></li>
|
||
<li><a href="#twitter">Twitter</a></li>
|
||
</ul></li>
|
||
<li><a href="#contributing">Contributing</a></li>
|
||
</ul>
|
||
<h2 id="articles-and-standards">Articles and standards</h2>
|
||
<ul>
|
||
<li><a href="https://w3c.github.io/html/">HTML 5.3</a> - Current HTML5
|
||
spec</li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/">Progressive
|
||
enhancement</a></li>
|
||
<li><a href="https://extensiblewebmanifesto.org/">The extensible web
|
||
manifesto</a></li>
|
||
<li><a href="https://www.w3.org/TR/html5-diff/">Differences between
|
||
HTML5 and HTML4 from W3C</a></li>
|
||
</ul>
|
||
<h2 id="multimedia-capabilities">Multimedia capabilities</h2>
|
||
<h3 id="audio">Audio</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/webaudio/intro/?redirect_from_locale=es">Getting
|
||
started with the Web Audio API</a></li>
|
||
<li><a href="https://developer.mozilla.org/es/docs/Web_Audio_API">Web
|
||
Audio API at MDN</a></li>
|
||
<li><a
|
||
href="https://jonathan.bergknoff.com/journal/making-a-guitar-tuner-html5">Making
|
||
a Guitar Tuner with HTML5</a></li>
|
||
<li><a
|
||
href="https://www.twilio.com/blog/audio-visualisation-web-audio-api--react">Audio
|
||
visualisation with the Web Audio API and React</a></li>
|
||
</ul>
|
||
<h3 id="media-capture">Media Capture</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/es/tutorials/getusermedia/intro/">Capturing
|
||
Audio & Video in HTML5</a></li>
|
||
<li><a
|
||
href="https://www.sitepoint.com/using-the-media-capture-api/">Using the
|
||
media capture API</a></li>
|
||
</ul>
|
||
<h3 id="picture-in-picture">Picture in Picture</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture">Chrome’s
|
||
new Picture in Picture API</a></li>
|
||
</ul>
|
||
<h3 id="speech-synthesis">Speech Synthesis</h3>
|
||
<ul>
|
||
<li><a
|
||
href="http://creative-punch.net/2014/10/intro-html5-speech-synthesis-api/">Intro
|
||
to the HTML5 Speech Synthesis API</a></li>
|
||
<li><a
|
||
href="https://shapeshed.com/html5-speech-recognition-api/">Another
|
||
useful intro</a></li>
|
||
</ul>
|
||
<h3 id="voice-recognition">Voice Recognition</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.google.com/intl/en/chrome/demos/speech.html">Web
|
||
speech API demo</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using
|
||
the Web Speech API</a></li>
|
||
<li><a
|
||
href="https://www.sitepoint.com/experimenting-web-speech-api/">Experimenting
|
||
with the Web Speech API</a></li>
|
||
<li><a href="https://www.talater.com/annyang/">Free voice recognition
|
||
library (annyang)</a></li>
|
||
</ul>
|
||
<h3 id="virtual-reality">Virtual Reality</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://blog.mozilla.org/blog/2018/09/18/firefox-reality-now-available/">Firefox
|
||
Reality now available</a></li>
|
||
</ul>
|
||
<h3 id="web-animations">Web animations</h3>
|
||
<ul>
|
||
<li><a
|
||
href="http://danielcwilson.com/blog/2015/07/animations-intro/">Intro to
|
||
web animations</a></li>
|
||
<li><a href="http://danielcwilson.com/blog/2016/08/why-waapi/">When to
|
||
Use the Web Animations API</a></li>
|
||
</ul>
|
||
<h2 id="elements">Elements</h2>
|
||
<h3 id="canvas">Canvas</h3>
|
||
<ul>
|
||
<li><a href="https://www.w3schools.com/tags/tag_canvas.asp">Brief
|
||
description from W3 Schools</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial
|
||
from MDN</a></li>
|
||
<li><a href="https://www.html5canvastutorials.com/">Various
|
||
Tutorials</a></li>
|
||
<li><a
|
||
href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Cheat
|
||
Sheet</a></li>
|
||
</ul>
|
||
<h3 id="head">Head</h3>
|
||
<ul>
|
||
<li><a href="https://gethead.info/">A list of things that go in your
|
||
pages’ HEAD element</a></li>
|
||
</ul>
|
||
<h3 id="sectioning">Sectioning</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://blog.teamtreehouse.com/use-html5-sectioning-elements">How
|
||
to Use The HTML5 Sectioning Elements</a></li>
|
||
</ul>
|
||
<h3 id="media-elements">Media Elements</h3>
|
||
<ul>
|
||
<li>Audio and Video
|
||
<ul>
|
||
<li><a href="https://www.w3schools.com/tags/tag_audio.asp">audio tag
|
||
from W3Schools</a></li>
|
||
<li><a href="https://www.w3schools.com/tags/tag_video.asp">video tag
|
||
from W3 Schools</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Tutorial
|
||
from MDN</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/getusermedia/intro/">Capturing
|
||
audio and video in HTML5</a></li>
|
||
</ul></li>
|
||
<li>embed tag
|
||
<ul>
|
||
<li><a href="https://www.w3schools.com/tags/tag_embed.asp">Brief
|
||
description from W3 Schools</a></li>
|
||
</ul></li>
|
||
<li>source tag
|
||
<ul>
|
||
<li><a href="https://www.w3schools.com/tags/tag_source.asp">Brief
|
||
description from W3 Schools</a></li>
|
||
</ul></li>
|
||
<li>track tag
|
||
<ul>
|
||
<li><a href="https://www.w3schools.com/tags/tag_track.asp">Brief
|
||
description from W3 Schools</a></li>
|
||
</ul></li>
|
||
</ul>
|
||
<h3 id="forms">Forms</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Changes
|
||
to forms in HTML5 from MDN</a></li>
|
||
<li><a href="https://www.w3schools.com/html/html_forms.asp">HTML
|
||
Forms</a></li>
|
||
</ul>
|
||
<h3 id="details">Details</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://blog.teamtreehouse.com/use-details-summary-elements">How
|
||
to Use the Details and Summary Elements</a></li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2014/11/complete-polyfill-html5-details-element/">Details
|
||
element polyfill</a></li>
|
||
</ul>
|
||
<h3 id="time">Time</h3>
|
||
<ul>
|
||
<li><a href="https://www.sitepoint.com/html5-time-element-guide/">Time
|
||
element guide</a></li>
|
||
</ul>
|
||
<h3 id="webvtt">WebVTT</h3>
|
||
<ul>
|
||
<li><a href="http://www.w3.org/TR/2014/WD-webvtt1-20141113/">First draft
|
||
from W3C</a></li>
|
||
</ul>
|
||
<h3 id="html-imports">HTML Imports</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.webcomponents.org/community/articles/introduction-to-html-imports">Introduction
|
||
to HTML imports</a></li>
|
||
</ul>
|
||
<h2 id="development-apis">Development APIs</h2>
|
||
<h3 id="permissions">Permissions</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web">Permissions
|
||
API for the Web by Google</a></li>
|
||
</ul>
|
||
<h3 id="geolocation">Geolocation</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API">Using
|
||
Geolocation</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/html5-apps-positioning-with-geolocation--mobile-456">HTML5
|
||
Apps: Positioning with Geolocation</a></li>
|
||
</ul>
|
||
<h3 id="cryptography">Cryptography</h3>
|
||
<ul>
|
||
<li><a href="http://www.w3.org/TR/WebCryptoAPI/">Web Cryptography API
|
||
draft</a></li>
|
||
<li><a href="http://diafygi.github.io/webcrypto-examples/">Table of web
|
||
cryptography support</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto">Window.crypto</a></li>
|
||
<li><a
|
||
href="http://www.w3.org/2012/webcrypto/webcrypto-next-workshop/report.html">Cryptography
|
||
next steps from W3C</a></li>
|
||
</ul>
|
||
<h3 id="file">File</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications">Using
|
||
files from web applications (MDN)</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/file/dndfiles/">Reading
|
||
local files in JavaScript</a></li>
|
||
<li><a href="https://w3c.github.io/FileAPI/">File API Draft</a></li>
|
||
<li><a href="http://www.w3.org/TR/file-system-api/">File system
|
||
API</a></li>
|
||
</ul>
|
||
<h3 id="frame-timing">Frame timing</h3>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=4zoC3eaa9z0">Video from
|
||
google developers</a></li>
|
||
<li><a href="https://w3c.github.io/frame-timing/">Draft from
|
||
W3C</a></li>
|
||
</ul>
|
||
<h3 id="requestidlecallback">requestIdleCallback</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2015/08/using-requestidlecallback">On
|
||
Google developers</a></li>
|
||
</ul>
|
||
<h3 id="requestanimationframe">requestAnimationFrame</h3>
|
||
<ul>
|
||
<li><a href="https://css-tricks.com/using-requestanimationframe/">Using
|
||
requestAnimationFrame (CSS Tricks)</a></li>
|
||
<li><a
|
||
href="https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4#.9gev5fdub">Great
|
||
article by Paul Irish</a></li>
|
||
</ul>
|
||
<h3 id="web-payments">Web payments</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/payments/">Web
|
||
payments API overview</a></li>
|
||
</ul>
|
||
<h2 id="semantics">Semantics</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.w3schools.com/html/html5_semantic_elements.asp">Semantic
|
||
elements from W3Schools</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections
|
||
and Outlines of an HTML5 from MDN Document</a></li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2011/11/html5-semantics/">HTML5
|
||
Semantics from Smashing Magazine</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Lesser
|
||
known semantics element from W3C & Opera</a></li>
|
||
</ul>
|
||
<h2 id="accessibility">Accessibility</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/accessibility/">Excellent
|
||
intro to accessibility from Google’s fundamentals</a></li>
|
||
<li><a href="https://webaim.org/standards/wcag/checklist">Accessibility
|
||
checklist for web developers</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA
|
||
from MDN</a></li>
|
||
<li><a href="https://a11y-style-guide.com/style-guide/">Great
|
||
Accessibility Style Guide</a></li>
|
||
<li><a
|
||
href="https://alistapart.com/article/designing-for-cognitive-differences">Designing
|
||
for Cognitive Differences</a></li>
|
||
<li><a href="https://thepaciellogroup.github.io/AT-browser-tests/">Guide
|
||
on how HTML elements are supported by screen readers</a></li>
|
||
<li><a
|
||
href="https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-accessibility-testing-tools-for-websites">Top
|
||
25 Accessibility Testing Tools for Website</a></li>
|
||
<li><a href="http://www.w3.org/WAI/ER/tools/">Web Accessibility
|
||
Evaluation Tools List from W3</a></li>
|
||
<li><a href="http://pa11y.org/">Pa11y - automated accessibility
|
||
testing</a></li>
|
||
<li><a
|
||
href="https://developer.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-the-neighborhood/">Aria
|
||
in HTML</a></li>
|
||
<li><a
|
||
href="https://2017.ind.ie/blog/accessible-video-player/">Accessible and
|
||
Responsive HTML5 Video Player</a></li>
|
||
</ul>
|
||
<h2 id="dom-management">DOM Management</h2>
|
||
<h3 id="shadow-dom">Shadow DOM</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/web-components/shadowdom">Shadow
|
||
DOM v1: self-contained web components</a></li>
|
||
<li><a href="https://hayato.io/2016/shadowdomv1/">What’s New in Shadow
|
||
DOM v1 (by examples)</a></li>
|
||
</ul>
|
||
<h3 id="data-binding">Data Binding</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/es7/observe/">Data-binding
|
||
Revolutions with Object.observe()</a></li>
|
||
</ul>
|
||
<h3 id="web-components">Web Components</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/web-components/customelements">Custom
|
||
elements v1: reusable web components</a></li>
|
||
<li><a
|
||
href="https://hacks.mozilla.org/2018/11/the-power-of-web-components/">The
|
||
power of web components</a></li>
|
||
<li><a href="https://github.com/polymer">Polymer project</a></li>
|
||
<li><a
|
||
href="https://www.webcomponents.org/community/articles/a-quick-polymer-introduction">A
|
||
Quick Introduction To Polymer</a></li>
|
||
<li><a href="https://www.polymer-project.org/blog/es6">Building web
|
||
components using Polymer and ES6 classes</a></li>
|
||
<li><a
|
||
href="http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/">Demythstifying
|
||
Web Components</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/webcomponents/imports/">HTML
|
||
imports</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/webcomponents/yeoman/">Building
|
||
Webapps with Yeoman and Polymer</a></li>
|
||
</ul>
|
||
<h2 id="progressive-web-apps">Progressive web apps</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/progressive-web-apps/">Intro to
|
||
PWAs</a></li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/">An
|
||
Extensive Guide To Progressive Web Applications</a></li>
|
||
<li><a
|
||
href="https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/">The
|
||
Business Case for Progressive Web Apps</a></li>
|
||
</ul>
|
||
<h3 id="service-workers">Service Workers</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service
|
||
Worker fundamentals</a></li>
|
||
<li><a href="https://serviceworkies.com/">ServiceWorkies - Learn SWs
|
||
playing a game</a></li>
|
||
<li><a href="https://serviceworke.rs/">The Service Worker
|
||
Cookbook</a></li>
|
||
<li><a
|
||
href="https://www.madebymike.com.au/writing/service-workers/">Offline
|
||
content with service workers</a></li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2016/02/making-a-service-worker/">Making
|
||
a Service Worker: a case study (Smashing Magazine)</a></li>
|
||
<li><a
|
||
href="https://github.com/w3c/ServiceWorker/blob/master/explainer.md">Service
|
||
workers explained</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=IIRj8DftkqE">Service Worker
|
||
Libraries, Totally Tooling Tips</a></li>
|
||
<li><a
|
||
href="https://ponyfoo.com/articles/serviceworker-revolution">ServiceWorker:
|
||
Revolution of the Web Platform</a></li>
|
||
</ul>
|
||
<h3 id="offline-caching">Offline caching</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/">The
|
||
Offline Cookbook</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=qDJAz3IIq18">Instant-loading
|
||
Offline-first (Progressive Web App Summit 2016)</a></li>
|
||
<li><a
|
||
href="https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.jsbxgywzz">Offline
|
||
Storage for Progressive Web Apps (article by Addy Osmani)</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/appcache/beginner/">A
|
||
Beginner’s Guide to Using the Application Cache</a></li>
|
||
</ul>
|
||
<h3 id="push-notifications">Push Notifications</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/push-notifications/">Web
|
||
Push Notifications (Google’s Web fundamentals)</a></li>
|
||
<li><a href="http://w3c.github.io/push-api/">Push API W3C draft</a></li>
|
||
<li><a href="https://notifications.spec.whatwg.org/">Notifications API
|
||
spec</a></li>
|
||
</ul>
|
||
<h2 id="client-side-storage">Client side storage</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/offline/storage/">Client-Side
|
||
Storage</a></li>
|
||
<li><a href="https://jakearchibald.com/2014/offline-cookbook/">Offline
|
||
Cookbook</a></li>
|
||
<li><a href="https://www.codemag.com/Article/1411041">Introduction to
|
||
IndexedDB</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/real-world-off-line-data-storage--net-34063">Real-World
|
||
Off-Line Data Storage</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Overlay_Extensions/XUL_School/Local_Storage">Local
|
||
storage tutorial</a></li>
|
||
</ul>
|
||
<h2 id="performance">Performance</h2>
|
||
<ul>
|
||
<li><a href="https://www.ampproject.org/learn/overview/">Accelerated
|
||
Mobile Pages (AMP)</a></li>
|
||
<li><a
|
||
href="https://developers.google.com/speed/docs/insights/rules">Google
|
||
developers best practices</a></li>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/performance/why-performance-matters/">Optimizing
|
||
performance from Google Web Fundamentals</a></li>
|
||
<li><a
|
||
href="http://www.w3.org/TR/2014/WD-resource-hints-20141021/">Resource
|
||
hints draft (preconnect and preload)</a></li>
|
||
<li><a
|
||
href="https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d">Prefetching
|
||
and prerendeding</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/speed/img-compression/">Image
|
||
compression</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/speed/txt-compression/">Text
|
||
compression</a></li>
|
||
<li><a href="http://www.w3.org/TR/resource-timing/">Resource timing
|
||
spec</a></li>
|
||
</ul>
|
||
<h2 id="mobile">Mobile</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/web-app-manifest/">The
|
||
Web App Manifest (Google’s fundamentals)</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/webappfieldguide/toc/index/">Field
|
||
guide to web applications</a></li>
|
||
<li><a href="http://ccoenraets.github.io/cordova-tutorial/">Apache
|
||
Cordova tutorial</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/phonegap-from-scratch-introduction--mobile-9171">PhoneGap
|
||
from Scratch</a></li>
|
||
<li><a href="https://www.html5rocks.com/en/tutorials/speed/quick/">Best
|
||
practices for mobile web apps</a></li>
|
||
<li><a
|
||
href="https://docs.telerik.com/kendo-ui/controls/hybrid/introduction">Build
|
||
mobile apps with Kendo UI</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/html5-vibration-api--mobile-22585">HTML5
|
||
Vibration API</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/html5-battery-status-api--mobile-22795">HTML5
|
||
Battery Status API</a></li>
|
||
<li><a href="https://eprint.iacr.org/2015/616.pdf">Privacy analysis of
|
||
the HTML5 Battery Status API</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/html5-network-information-api--cms-21598">HTML5
|
||
Network Information API</a></li>
|
||
<li><a href="https://docs.sencha.com/">Sencha Touch tutorials</a></li>
|
||
</ul>
|
||
<h2 id="communications-and-interoperability">Communications and
|
||
interoperability</h2>
|
||
<h3 id="web-sockets">Web Sockets</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/websockets/basics/">Introducing
|
||
Websockets</a></li>
|
||
<li><a href="https://www.websocket.org/aboutwebsocket.html">About HTML5
|
||
WebSocket</a></li>
|
||
<li><a
|
||
href="http://www.tutorialspark.com/html5/HTML5_WebSockets.php">HTML5 Web
|
||
Sockets API</a></li>
|
||
</ul>
|
||
<h3 id="webrtc">WebRTC</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.innoarchitech.com/what-is-webrtc-and-how-does-it-work/">What
|
||
is WebRTC and how does it work</a></li>
|
||
<li><a
|
||
href="https://blog.carbonfive.com/2014/10/16/webrtc-made-simple/">WebRTC
|
||
made simple</a></li>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/webrtc/datachannels/">WebRTC
|
||
data channels tutorial</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels">WebRTC
|
||
data channels from MDN</a></li>
|
||
</ul>
|
||
<h2 id="web-workers">Web Workers</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/workers/basics/">Web
|
||
Worker Basics</a></li>
|
||
<li><a
|
||
href="https://hacks.mozilla.org/2015/07/how-fast-are-web-workers/">How
|
||
fast are web workers?</a></li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web
|
||
Workers in MDN</a></li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/getting-started-with-web-workers--net-27667">Getting
|
||
started with Web Workers</a></li>
|
||
</ul>
|
||
<h2 id="webgl">WebGL</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL
|
||
Fundamentals</a></li>
|
||
</ul>
|
||
<h2 id="browser-compatibility">Browser compatibility</h2>
|
||
<ul>
|
||
<li><a href="http://www.iwanttouse.com/">I want to use</a></li>
|
||
<li><a href="https://caniuse.com/">Can I use…</a></li>
|
||
<li><a href="http://w3c.github.io/developers/tools/">W3C quality
|
||
tools</a></li>
|
||
<li><a href="http://beta.html5test.com/">HTML5 test</a></li>
|
||
<li><a href="https://bestvpn.org/html5demos/">HTML5 demos</a></li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<ul>
|
||
<li><a href="http://diveinto.html5doctor.com/">Dive Into HTML5</a></li>
|
||
<li><a
|
||
href="https://www.amazon.com/HTML5-Running-Dive-Future-Development/dp/0596806027">HTML5:
|
||
Up and Running</a></li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920021360.do">Using the
|
||
HTML5 Filesystem API</a></li>
|
||
<li><a href="https://www.apress.com/us/book/9781430266976">HTML5 Game
|
||
Development Insights</a></li>
|
||
<li><a href="https://www.manning.com/books/web-design-playground">Web
|
||
Design Playground: HTML & CSS The Interactive Way</a></li>
|
||
</ul>
|
||
<h2 id="game-development">Game development</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://hacks.mozilla.org/2013/09/getting-started-with-html5-game-development/">Getting
|
||
started with HTML5 Game Development from Mozilla Hacks</a></li>
|
||
<li><a
|
||
href="https://hacks.mozilla.org/2016/02/html-5-game-development-video-series/">HTML
|
||
5 game development video series by Mozilla</a></li>
|
||
<li><a href="http://html5gamedevelopment.com/">Info, news and
|
||
tutorials</a></li>
|
||
<li><a
|
||
href="https://html5-game-development.zeef.com/andre.antonio.schmitz">Over
|
||
380 resources on HTML5 game development</a></li>
|
||
<li>Opensource JavaScript game engines
|
||
<ul>
|
||
<li><a href="https://github.com/pixijs/pixi.js">Pixi.js</a></li>
|
||
<li><a href="https://github.com/photonstorm/phaser">Phaser</a></li>
|
||
<li><a href="https://github.com/melonjs/melonJS">MelonJS</a></li>
|
||
<li><a href="https://github.com/gamelab/kiwi.js">Kiwi.js</a></li>
|
||
<li><a href="https://github.com/craftyjs/Crafty">Crafty</a></li>
|
||
<li><a
|
||
href="https://github.com/wellcaffeinated/PhysicsJS">PhysicsJS</a></li>
|
||
<li><a href="https://github.com/shakiba/stage.js">Stage.js</a></li>
|
||
<li><a href="https://github.com/cocos2d/cocos2d-html5">Cocos2d</a></li>
|
||
</ul></li>
|
||
</ul>
|
||
<h2 id="bootcamp">Bootcamp</h2>
|
||
<p><em><a href="https://www.freecodecamp.org/">Learn coding for free
|
||
online</a> </em><a href="https://www.khanacademy.org/">Free online
|
||
cources</a></p>
|
||
<h2 id="videos-and-keynotes">Videos and Keynotes</h2>
|
||
<ul>
|
||
<li><a href="https://html5devconf.com/videos.html">HTML5 Developer
|
||
Conference</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=DH1vTVkqCDQ">Polymer:
|
||
declarative, encapsulated, reusable components</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=EXjPsvwIDwU">Making the
|
||
mobile web fast, feature-rich, and beautiful</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=euCNWhs7ivQ">Dart: HTML of
|
||
the Future, Today!</a></li>
|
||
</ul>
|
||
<h2 id="websites-and-resources">Websites and resources</h2>
|
||
<h3 id="websites">Websites</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://webplatform.github.io/docs/Main_Page/index.html">HTML
|
||
official reference</a> (allows collaborative modification of content
|
||
like wiki)</li>
|
||
<li><a href="https://www.html5rocks.com/en/">HTML5 Rocks</a> (news,
|
||
tutorials and updates)</li>
|
||
<li><a href="http://html5gallery.com/">HTML5 Gallery</a> (a showcase of
|
||
sites using HTML5 markup and API’s)</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML5
|
||
development guide from MDN</a></li>
|
||
<li><a href="http://www.w3.org/2014/06/w3c-highlights/">W3C Highlights
|
||
form June 2014</a></li>
|
||
<li><a href="https://html5please.com/">HTML5 Please</a> (Know when HTML5
|
||
feature are ready to use)</li>
|
||
<li><a href="https://keenhtml.com">Keen HTML</a> (Free interactive
|
||
lessons to learn HTML)</li>
|
||
<li><a href="https://css-tricks.com/complete-guide-table-element/">A
|
||
Complete Guide to the Table Element</a></li>
|
||
</ul>
|
||
<h3 id="weekly-news">Weekly news</h3>
|
||
<ul>
|
||
<li><a href="https://frontendfoc.us/">HTML5 Weekly</a></li>
|
||
<li><a
|
||
href="https://hacks.mozilla.org/category/mozilla-hacks-weekly/">Mozilla
|
||
Hacks Weekly Articles</a></li>
|
||
<li><a href="http://responsivedesignweekly.com/">Responsive Design
|
||
Newsletter</a></li>
|
||
</ul>
|
||
<h3 id="twitter">Twitter</h3>
|
||
<ul>
|
||
<li><a href="https://twitter.com/html5"><span class="citation"
|
||
data-cites="html5">@html5</span></a></li>
|
||
<li><a href="https://twitter.com/html5rock"><span class="citation"
|
||
data-cites="html5rock">@html5rock</span></a></li>
|
||
<li><a href="https://twitter.com/html5gallery"><span class="citation"
|
||
data-cites="html5gallery">@html5gallery</span></a></li>
|
||
<li><a href="https://twitter.com/html5doctor"><span class="citation"
|
||
data-cites="html5doctor">@html5doctor</span></a></li>
|
||
<li><a href="https://twitter.com/GameDevHTML5"><span class="citation"
|
||
data-cites="GameDevHTML5">@GameDevHTML5</span></a></li>
|
||
<li><a href="https://twitter.com/mozhacks"><span class="citation"
|
||
data-cites="mozhacks">@mozhacks</span></a></li>
|
||
<li><a href="https://twitter.com/googlechrome"><span class="citation"
|
||
data-cites="googlechrome">@googlechrome</span></a></li>
|
||
</ul>
|
||
<h2 id="other-awesome-lists">Other awesome lists</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/bayandin/awesome-awesomeness">awesome-awesomeness</a></li>
|
||
<li><a href="https://github.com/jnv/lists">lists</a></li>
|
||
<li><a href="https://hackr.io/tutorials/learn-html-5">Community Curated
|
||
Resources</a></li>
|
||
</ul>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Your contributions are always welcome!</p>
|
||
<p><a href="https://github.com/diegocard/awesome-html5">html5.md
|
||
Github</a></p>
|