Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/lifeisfoo/html5-dev

An HTML5 development journey
https://github.com/lifeisfoo/html5-dev

Last synced: 2 months ago
JSON representation

An HTML5 development journey

Awesome Lists containing this project

README 

          
#An HTML5 development journey



Typography

=========

* [Control whitespaces with css](http://www.impressivewebs.com/css-white-space/)

* http://www.greywyvern.com/?post=337

* [em VS px VS pt](http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/)

* [ftellipsis](https://github.com/ftlabs/ftellipsis)

* [JQuery dot dot dot](http://dotdotdot.frebsite.nl/)

* [l20n responsive localization](http://l20n.org/)

* [Squishy - fit text into element](http://cmsauve.com/labs/squishy/)

* [Bigfoot, jQuery footnotes](http://www.bigfootjs.com/)

* [FontFabric](http://fontfabric.com/)

* [FontSquirrel](http://www.fontsquirrel.com/)

* [Lettering.js - span injector for radical web typography](https://github.com/davatron5000/Lettering.js)

* [FitText.js - responsive text](http://fittextjs.com/)

 

HTML5

=====

* [Semantic page structure](http://diveintohtml5.info/semantics.html)

* [Reference doc for page structure elements](http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html)

* [HTML5 outliner - test your structure](http://gsnedders.html5.org/outliner/)

* [HTML5 section flowchart (what element I need?)](http://html5doctor.com/downloads/h5d-sectioning-flowchart.png)



Responsive and high-density images

======

* [Angular retina](https://github.com/jrief/angular-retina)

* [jQuery picture](http://jquerypicture.com/)

* [ResponsiveJS](http://responsejs.com/)

* [Responsive design with ResponsiveJS (article)](http://davidwalsh.name/responsive-design)

* [Mobify.js](http://www.mobify.com/mobifyjs/)

* [Mobify automation (article)](http://mobile.smashingmagazine.com/2013/10/24/automate-your-responsive-images-with-mobify-js/)

* [Picturefill - polifyll](https://github.com/scottjehl/picturefill)

* [Device pixel ratio detection](http://bjango.com/articles/min-device-pixel-ratio/)

* [Slimmage - responsive images](https://github.com/imazen/slimmage)

* [WebP homepage](https://developers.google.com/speed/webp/?hl=it)

* [High DPI images for variable pixel densities (article)](http://www.html5rocks.com/en/mobile/high-dpi/?redirect_from_locale=it)



SPA SEO

======

* [AngularJS SEO](https://coderwall.com/p/vqpfka)

* [HTML5 history api](http://diveintohtml5.info/history.html)

* [AngularJS $location](http://docs.angularjs.org/guide/dev_guide.services.$location)

* [AngularJS html5/hasbang url mode](http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting)

* [AngularJS direct url](http://stackoverflow.com/questions/15250090/angularjs-why-when-changing-url-address-routeprovider-doesnt-seem-to-work-an)

* [AngularJS direct url 2](http://stackoverflow.com/questions/16371555/angularjs-how-to-user-accessible-url-routing)

* [Apache rewrite for angular](http://stackoverflow.com/questions/15284038/rewrite-rules-for-apache-2-to-use-with-angular-js)



Generic

======

* [BEM methology-1](http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/)

* [BEM methology-2](http://coding.smashingmagazine.com/2013/02/21/the-history-of-the-bem-methodology/)

* [yeoman - development workflow tools](http://yeoman.io/)

* [yo community generators](http://yeoman.io/community-generators.html)

* http://www.polymer-project.org/

* https://github.com/getify/h5ive



Javascript

======

* [Microjs framework listing](https://github.com/madrobby/microjs.com)

* [JS design patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/)

* [Google closure library](https://developers.google.com/closure/library/)

* [SugarJS, Javascript sweetened](http://sugarjs.com/)

* [AngularJS modules](http://ngmodules.org/)

* [BreezeJS](http://www.breezejs.com/)

* [Angular provider presentation](http://slides.wesalvaro.com/20121113/)

* [Lo-Dash](http://lodash.com/)

* [_Underscore.js](http://documentcloud.github.io/underscore/)

* [Hammer.js - touch gestures for web app](http://eightmedia.github.io/hammer.js)

* [easyAB - AB testing with google analytics (zepto/jQuery)](http://srom.github.io/easyAB/)

* [ABalytics - AB testing in pure js with google analytics](https://github.com/danmaz74/ABalytics)



Node

====

* [REST api with Express](http://blog.modulus.io/nodejs-and-express-create-rest-api)

* [Sessions with Express](http://blog.modulus.io/nodejs-and-express-sessions)

* [REST api with Express and Mongodb](http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/)

* [Node.js error handling pattern](http://www.nodewiz.biz/nodejs-error-handling-pattern/)

* [Locomotive MVC framework](https://github.com/jaredhanson/locomotive)

* [Holla WebRTC abstraction!](https://github.com/wearefractal/holla)



Graphics and animation

=========

* [threejs - 3D animation in javascript](http://threejs.org/)

* http://www.minimamente.com/magic-css3-animations/

* https://github.com/visionmedia/move.js

* http://labs.bigroomstudios.com/libraries/animo-js

* https://github.com/peachananr/onepage-scroll

* [iScroll 5](http://cubiq.org/iscroll-5)

* [iDangerous touch swiper - accelerated](http://www.idangero.us/sliders/swiper/)

* [Desaturate an image with CSS](http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS)

* [Blur image with CSS](http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS)

* [Isotope](http://isotope.metafizzy.co/)

* [Adaptive Images (server side)](https://github.com/MattWilcox/Adaptive-Images)

* [Pixtulate (adapt images - web service)](http://www.pixtulate.com/)

* [Pixijs, 2D webGL renderer with canvas fallback](pixijs.com)

* [jQuery Parallax](https://github.com/IanLunn/jQuery-Parallax)

* [Squence.js - Responsive Slider with Advanced CSS3 Transitions](https://github.com/IanLunn/Sequence)

* [Hover.css - CSS3 transition onHover](http://ianlunn.github.io/Hover/)

* [FitVid.js - jQuery plugin to embed videos in a responsive way](http://fitvidsjs.com/)

* [Lazy Line Painter - Animate SVG lines with js from file](http://lazylinepainter.info/)

* [Hook.js - Pull to refresh. For the web](http://usehook.com/)

* [Animate.css](http://daneden.github.io/animate.css/)

* [RaphaelJS - standard vector graphics](http://raphaeljs.com/)



Editors e tools

======

* [Facebook Origami](http://facebook.github.io/origami/)

* [Sketch - vectorial editor](http://www.bohemiancoding.com/sketch/)

* [AngularJS sublime plugin](https://github.com/angular-ui/AngularJS-sublime-package)

* [Monaca](http://monaca.mobi/)



Online editors

======

* [Easel](https://www.easel.io/)

* [Divshot](http://divshot.com)

* [Jetstrap](http://jetstrap.com)

* [List](http://mashable.com/2013/10/20/bootstrap-editors/)



UI

======



* [Ionic framework - The beautiful, open source front-end framework for developing hybrid mobile apps with HTML5.](http://ionicframework.com/)

* [jQuery mobile](http://jquerymobile.com/)

* [Kendo UI](http://www.kendoui.com/)

* [APP UI](http://triceam.github.io/app-UI/)

* [Moobile](https://github.com/jpdery/moobile-core)

* [Mobiscroll components](http://mobiscroll.com/) €

* [Sencha touch](http://www.sencha.com/)

* [iUI](https://github.com/iui/iUI)

* [Zurb foundation](http://foundation.zurb.com/)

* [Bootstrap iOS7](http://jasonbradley.me/bootstrap-ios7/)

* [UI kits (mobile)](http://www.cssflow.com/ui-kits)

* [UI elements](http://ui-cloud.com/free-ui-elements/)

* [Bootstrap select](http://silviomoreto.github.io/bootstrap-select/)

* [Bootstrap snippet!](http://bootsnipp.com/)

* [LESShat mixins](https://github.com/csshat/lesshat)

* [Topcoat](https://github.com/topcoat/topcoat)

* [Intel App framework](https://github.com/01org/appframework)

* [Susy, responsive grids for Compass](http://susy.oddbird.net/)

* [Bourbon, SASS mixins](http://bourbon.io/)

* [SASS](http://sass-lang.com/)

* [Angular Foundation](https://github.com/madmimi/angular-foundation)

* [CSSDB](http://cssdb.co/)

* [Onsen UI](http://www.onsenui.io/)

* [Facebook React](http://facebook.github.io/react/)

* [Furatto](https://github.com/IcaliaLabs/furatto)



Wrapper (multiplatform app)

=======



* https://www.ludei.com/cocoonjs/

* https://trigger.io/



Native emulation

======



* [Page SLider - Load and replace page in the DOM](https://github.com/ccoenraets/PageSlider). Intro on his [http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/](blog)

* [Page preloading](http://polycademy.com/blog/id/147/preloading_page_content_like_youtube_using_angularjs)

* [Adobe phonegap basics presentation - tips](http://tricedesigns.com/presentations/dreamforce/native-like%20phonegap%20apps/)

* [Chrome Apps in Cordova](https://github.com/MobileChromeApps/mobile-chrome-apps)



CDNs

=====

* [jsdelivr](http://www.jsdelivr.com/)

* [cdnjs - github driven cdn](https://github.com/cdnjs/cdnjs)



jQuery plugin

=====

* http://imakewebthings.com/jquery-waypoints/

* [Superslides, jquery fullscreen slider](https://github.com/nicinabox/superslides)



CORS

=====

* [CORS MDN](https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control)

* [Enable-CORS](https://github.com/monsur/enable-cors.org)

* [CORS tips](http://www.html5rocks.com/en/tutorials/cors/)

* Access-Control-Allow-Origin can't be '*' when Access-Control-Allow-Credentials is true (cookie aware) 

* Multi origin must be managed via conditional cors (server side: if(req.ip === '192.168.0.56') {res.setHeader...}) 



Ghost

=====

* [Plugin architecture - not yet implemented](https://github.com/TryGhost/Ghost/issues/769)

* [Apps & developer tools - early](https://github.com/TryGhost/Ghost/issues/1474)

* [App builerplate - early](https://github.com/TryGhost/Ghost-App)



Wordpress

=====

* [Redux Options Framework](https://github.com/ReduxFramework/ReduxFramework)

* [Options Panel Framework](https://github.com/devinsays/options-framework-plugin)

* [Roots: modern and clean theme framework with grunt, bootstrap3, less, js, etc](http://roots.io/)