How to HTML5

how-to-html5.md

How to HTML5

Author: Josef Jezek

• http://html5please.com
• http://caniuse.com
• http://browserhacks.com
• http://www.html5rocks.com

Learn

• http://flukeout.github.io
• http://mdo.github.io/code-guide

Demos

• http://html5-demos.appspot.com
• http://shinydemos.com
• http://simpl.info

HTML5 User Interface

Form Autocomplete

• http://www.chromium.org/developers/using-requestautocomplete

Web Components

• http://www.nikgraf.com/post/55711411091/getting-started-with-polymer-dart
• http://www.2ality.com/2013/05/google-polymer.html
• http://www.2ality.com/2013/05/web-components-angular-ember.html

Boilerplate

• Initializr
• HTML5 Boilerplate
• HTML Email Boilerplate

Bootstrap

• Bootstrap Inspiration
• http://expo.getbootstrap.com
• http://lovebootstrap.com
• http://made-with-bootstrap.com
• http://builtwithbootstrap.com
• http://spyrestudios.com/40-websites-built-with-the-twitter-bootstrap-framework
• Customizing Bootstrap
• http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap
• http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices
• Extends
• Fuel UX Controls
• Flat Design
• Flatstrap
• Flat UI
• https://creativemarket.com/artlabs/6965-FlatScroller-Bootstrap-flat-landing
• Libraries
• Bootstrap Wysiwyg
• http://hackerwins.github.io/summernote
• X-editable
• Bootstrap Markdown
• Image Gallery
• http://bootboxjs.com
• Megamenu
• http://timschlechter.github.io/bootstrap-tagsinput/examples
• CDN
• BootstrapCDN
• Framework
• http://designmodo.com
• Snippets
• http://bootsnipp.com
• Themes
• Bootswatch
• WrapBootstrap
• http://www.bootstraptor.com
• Tools
• http://www.bootply.com
• Online Editor
• http://www.divshot.com
• http://www.lavishbootstrap.com
• https://www.jetstrap.com
• Blog Info
• http://bootstrap-code.tumblr.com
• Docs
• http://ely-s.github.io/mixin/

Bootstrap 3

• http://bootstrap3.kissr.com

• http://designmodo.com/twitter-bootstrap-3

• http://bootstrap-code.tumblr.com/post/51714283880/bootstrap-3-migration

Topcoat

Fries

Ratchet

• http://cardinalcss.com
• http://purecss.io

Font

• Google Fonts
• Adobe Edge Web Fonts
• Adobe Typekit

Grid layout

• Semantic grid

Icon

• Fontello

• http://fontastic.me

• Font Awesome

• IcoMoon

• iconmonstr

• Elusive-Icons Webfont

• Ligature Symbols

• Sosa

• http://thenounproject.com

• Free eCommerce icons

• Font Custom

• pictonic

• http://overgrowth.wp.irishmiss.com/wp-content/themes/im-overgrowth/assets/css/bootstrap/packed.css

• Maps

• http://sathomas.me/continental

• http://ionicons.com

HTML

• Jade
• Jade HTML5 Boilerplate

CSS

• Flexbox
• Stylus
• http://roole.org
• Bootstrap Stylus
• http://lea.verou.me/css3patterns
• Tools
• http://www.cssmatic.com
• Sprite sheet generator
• http://draeton.github.io/stitches
• Spritemapper

JavaScript

AngularJS

• Tutorial

• Video tutorial

• AngularJS SEO

• AngularJS Testacular

• AngularJS Animation

• Sharing data across controllers

• http://builtwith.angularjs.org

• Mobile with PhoneGap

• http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs

• http://briantford.com/blog/angular-phonegap.html

• http://www.mindmeister.com/287580661/phonegap-and-angularjs

• https://github.com/thewildpendulum/angular-phonegap-seed

• https://docs.google.com/a/jezek.co.cz/presentation/d/1vO5NlWGjwUpMYlSSpqFnYYimbKvi1l4f-s7c3sbEZZY/edit#slide=id.p

• http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications

• Angular Modules

• AngularUI

• ngTranslate

• Restangular

• http://www.blogeek.com.ar/2013/04/09/restangular-new-angular-framework-to-handle-restful-resources-properly-and-easily

• https://github.com/yaru22/angular-hovercard

• Testing

• http://karma-runner.github.io/0.10/index.html

• SVG

• http://gaslight.co/blog/angular-backed-svgs

• http://www.phloxblog.in/angular-js-service-dependency-injection

• http://blog.codebrag.com/post/57412530001/preventing-duplicated-requests-in-angularjs

• http://www.phloxblog.in/single-page-application-angular-js-node-js-mongodb-mongojs-module

• https://gist.github.com/ProLoser/6181026

CofeeScript

• js2coffee

Dart

• Dart Performance
• Dart Cookbook
• Dart Synonym
• Try Dart
• Dart Packages
• widget - Bootstrap Demo
• http://news.dartlang.org/2013/08/dart-libraries-for-google-apis-and.html

Angular.Dart

Tools

• PageSpeed
• PhantomJS
• Postman
• Editor
• Brackets
• Plunker
• http://screensiz.es/phone
• http://livestyle.emmet.io
• Animation
• http://html5maker.com

http://matthewhudson.me/projects/device.js

Background

• http://patternizer.com

Workflow Tools

• Yeoman
• Playing with Yeoman

Mobile Framework

• http://cordova.apache.org
• http://phonegap.com

Image

• http://clippingmagic.com
• http://zurb.com/playground/twentytwenty
• http://www.nacodes.com/2013/03/20/Animated-Responsive-Image-Grid

Libraries

• Modernizr
• Google Chrome Frame

Link

• http://tympanus.net/codrops/2013/08/06/creative-link-effects

Gallery

• least.js

Menu

• http://www.nacodes.com/2013/04/20/Responsive-Multi-Level-Menu-Space-saving-drop-down-menu-with-subtle-effects
• https://github.com/codrops/GoogleNexusWebsiteMenu

Modal

• CSS Modal

Lazy load

• Unveil.js

Light box

• http://flipgallery.net/fliplightbox.html

Loader

• http://padolsey.net/p/Sonic/repo/demo/demo.html

Chart

• Peity

Time

• http://timeago.yarp.com
• http://flipclockjs.com
• http://amsul.ca/pickadate.js/index.htm

UI

• http://labs.mintchaos.com/flippant.js

Scroll

• http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites

Testing

• http://google.github.io/tracing-framework

CDN

• Google Hosted Libraries
• cdnjs
• jsDelivr