Best of JavaScript, HTML & CSS – Week of April 21, 2014
The modern web is always changing, and this article is more than two years old.
So much good stuff to cover this week! I was away on vacation without Internet access (can you believe it!?!), so this post covers the past two weeks. This week features a ton of CSS, SVG and ES6. Anyway, lots to cover, so I won’t waste any more of your time on intros.
Tutorials
An awesome demo recreating the title theme of True Detective using CSS by Tyler Gaw.
CSS True Titles
An excellent article by Sara Soueidan going in depth into the new CSS shapes specification.
CSS Shapes 101
Good comparison of inline SVG vs icon fonts by Chris Coyier. tl;dr: SVG is better if you can live with the browser support.
Inline SVG vs Icon Fonts [CAGEMATCH]
Learn how to animate inline SVG using CSS from Chris Coyier.
Animating SVG with CSS
A great list of little known CSS quirks, some more useful than others, from Louis Lazaris.
12 Little-Known CSS Facts
Hans Muller explores options for adding captions to images in HTML and CSS.
Captioneering
Stephen Greig shows how much you can do with the CSS timing function for CSS transitions and animations.
Understanding CSS Timing Functions
Daniel Buchner shows how you can achieve element queries, which are like media queries but on a specific DOM element, using current browser technology.
Preview: Element Queries, From the Feet Up
Aurelio De Rosa explains the web notifications API and shows how to use it.
An Introduction to the Web Notifications API
Nicholas Zakas explains how ES6 proxies let you create defensive objects that can prevent common type-checking errors.
Creating defensive objects with ES6 proxies
Jack Franklin begins a series on ES6 features with an in-depth look at arrow functions.
Real Life ES6 – Arrow Functions
Web Components are hot, but Christian Heilmann warns us to avoid making some mistakes with them that could lead us astray.
Web Components and you – dangers to avoid
Libraries and Frameworks
Raymond Camden explains ngrok, a service that allows any sort of local web service to be exposed to the Internet for testing.
Expose Yourself with ngrok
Toby Ho shows how to use Page, a client-side routing micro library useful for building single-page applications.
Single-Page Applications with the Page Micro Library
Your site can access Amazon Web Services without a back-end using the new JavaScript SDK – Saad Mousliki shows how.
Using the AWS JavaScript SDK in the Browser
A solid introduction to the React framework by Jim Cowart focused on building an actual application.
A Thrown-to-the-Wolves-Hands-On Introduction to React
A good look at how to use popular front-end UI libraries without adding unnecessary weight to your app by TJ VanToll.
Using UI Libraries Without the Bloat
Mary Lou created some very cool page loading animations using SVG animations and snap.svg.
Page Loading Effects
Donovan Hutchinson looks into a tool called Wraith for testing responsive designs.
Wraith
Julian Shapiro says that JavaScript is secretly faster for animations using libraries like Velocity.js and GSAP.
CSS vs. JS Animation: Which is Faster?
Alex Young says that as of version 1.11, you can use jQuery UI with AMD compatible loaders like Require.js.
Using jQuery UI with AMD
Johannes Schickling shows how to use Gulp.js to run a local web server with built-in livereload support.
Gulp as a Development Web Server
Mobile
Paul Bakaus documents and discusses six common mobile web development pitfalls and barriers.
Common mobile web development pitfalls
You can now use Kendo UI Mobile with AngularJS using Angular Kendo UI and Burke Holland shows how to get started.
Announcing Support For Kendo UI Mobile With AngularJS
A great guide on implementing remote debugging for hybrid app development on iOS, Android and Windows Phone by TJ VanToll.
A Concise Guide to Remote Debugging on iOS, Android, and Windows Phone
Etc.
I’m proud to announce the Mobile Web Weekly email newsletter, my new collaboration with Holly Schinsky and Cooper Press.
Mobile Web Weekly: A Free, Weekly Email Newsletter
Lukas White shares a overview and review of the open source Brackets code editor.
A Review of the Brackets Editor
According to research, presented here by Tammy Everts, using a CDN may not improve performance.
New findings: Retail sites that use a CDN are slower than sites that do not*
