This week features a ton of great tutorials and articles. Some highlights include Toby Ho’s opinion piece on how JavaScript library authors need to work on creating more modular and smaller libraries. Also, the Simpson’s drawn using pure HTML and CSS. Or check out Sara Soueidan showing how to create non-rectangular layouts using CSS shapes. Plus, AngularJS 1.2, tons more tutorials and a number of interesting new libraries.
Tutorials
Toby Ho says that authors can do better towards making their JavaScript libraries smaller and more modular.
Towards a More Modular Future for JavaScript Libraries
Nicolas Bevacqua introduces a JavaScript event emitter pattern he calls Obey and Report that plays nicely with AngularJS.
Obey and Report – A JavaScript Event Emitter Pattern
The Simpsons characters recreated using just HTML and CSS.
The Simpsons in CSS
A great introduction to creating print-like layouts with non-rectangular shapes using CSS Shapes by Sara Soueidan.
Creating Non-Rectangular Layouts with CSS Shapes
Dale Schouten shares ten things ECMAScript-6 that you try right now, at least on Firefox Aurora.
10 Ecmascript-6 tricks you can perform right now
Paul Lewis and Paul Irish look at how to make animations perform well in the browser, avoiding expensive layout or paints.
High Performance Animations
IIFEs are very familiar in JavaScript today, but Axel Rauschmayer details the less familiar immediately invoked constructors and object literals.
Immediately invoked constructors and object literals
Sara Soueidan explores several techniques for creating a dimmed overlay with CSS, and the pros and cons of each.
CSS Overlay Techniques
Chris Coyier offers a solution for making tabs work better when translated to small screens.
Transformer Tabs
Some really nice animated icons created with SVG and the new Snap.svg library by Mary Lou.
Animated SVG Icons with Snap.svg
CJ Gammon details how to create responsive layouts using the new CSS Regions specification.
Killer Responsive Layouts With CSS Regions
Lea Verou shows how to recreate the Google apps style loading animation in CSS and HTML.
Flexible Google-style loader with CSS
Libraries and Frameworks
Learn some of the basics of Express.js from Azat Mardanov.
Express.js Fundamentals
AngularJS 1.2.0 includes remastered animations/transitions, better error reporting, promise A+ compliance and more.
AngularJS: AngularJS 1.2.0: timely-delivery
Julien Knebel posts a thorough introduction to Ember.js for newcomers to the framework.
An In-Depth Introduction To Ember.js
Azat Mardanov walks through building a sample Express.js and Mongoose application.
Express.js and Mongoose Example: Building HackHall
Mobile
Raymond Camden explains a simple use case for Grunt to watch and automatically build your PhoneGap/Cordova project.
Using Grunt to automatically build your PhoneGap/Cordova projects
Christophe Coenraets shares a version of his Employee Directory sample mobile application built with AngularJS.
Sample Mobile Application with AngularJS
See how to create a responsive off-canvas navigation using Bootstrap 3 by Burke Holland.
Creating A RWD Off-Canvas Layout With Bootstrap 3
My latest article for Adobe Inspire shows how one company leveraged their web design expertise to build apps with PhoneGap.
Web designers become app developers with PhoneGap
New and Updated Libraries and Frameworks
hoquet is a JavaScript templating library based on Clojure’s Hiccup.
hoquet
Purescript is a strongly typed compile-to-JavaScript language with extensible records and type-safe blocks.
Purescript
stickUp is a jQuery Plugin for creating navigation menus that are pinned to the top of the page, even during scroll.
stickUp
grasp is a Node-based command-line utility to search and replace JavaScript code based on structure rather than text.
grasp – JavaScript structural search and replace
The Ripple emulator has been relaunched as an Apache project and Raymond Camden explains how it has changed.
Ripple is Reborn!
ESLint v0.1.0 is a new JavaScript code quality tool with most JSHint rules, the ability to load new rules and more.
Now available: ESLint v0.1.0
Riot.js is a less than 1kb Model-View-Presenter JavaScript framework with a template engine, router, event library and more.
Riot.js — The 1kb client-side MVP framework
Etc.
Check out October’s top HTML, CSS, JavaScript Content on the Flippin’ Awesome.
October’s HTML, CSS, JavaScript Content on the Flippin’ Awesome
The November issue of Appliness includes an interview with Middleman Creator, Thomas Reynolds and tons of tutorials.
November issue with Thomas Reynolds, creator of Middleman is available!
Learn about the many changes over the past year to the Brackets open source code editor from Raymond Camden.
Deeper In the Brackets Editor
Brian Rinaldi is the founder of Flippin’ Awesome. Brian works as the Developer Content Manager at Telerik (though this site is not affiliated with his employer) focused on ensuring that the Developer Relations team creates top notch content for the web development community. Previously, Brian focused on publishing HTML, CSS and JavaScript developer content for the Adobe Developer Connection at Adobe.
Brian has published in a variety of technical publications over the years, has presented at numerous conferences and events and has served as a technical editor on a number of books.
You can read Brian’s blog archive with 9+ years of content at remotesynthesis.com (he still posts, infrequently). You can find a full list of Brian’s past publications and presentations. Follow Brian on Twitter @remotesynth.
I think you should add mimosa.io to the list of new and awesome tools. It really helps streamline your workflow if using pre-compilers.