This past week featured a lot of tutorials, with at least a couple focused on best practices in writing CSS which seems to be a hot topic. Significant project updates include Ember 1.0 and ChocolateChip-UI 3.0. Some important new projects include Theseus and parallax.js.
Tutorials
Alan Greenblatt enhances his responsive content with CSS regions demo with a polyfill to make it cross-browser.
Cross-Browser Responsive Content with CSS Regions
Eric Bidelman explains how the custom elements that falls under Web Components helps you avoid HTML that is div soup.
Custom Elements: Defining new elements in HTML
Mary Lou shares some ideas around a variety of transitions for revealing off-canvas navigations.
Transitions for Off-Canvas Navigations
Pankaj Parashar shows how to use and style the HTML5 progress element cross-browser with fallbacks.
The HTML5 progress Element
Nick Pettit shows how to use CSS for realistic shading for 3D shading on objects with few faces with box-shadows.
3D Shading with Box-Shadows
Philip Tellis examines DNS, IPv6 and the new W3C specification for the NavigationTiming API.
Analyzing Network Characteristics Using JavaScript And The DOM, Part 2
Zoltan Horvath shares some examples of how you can combine CSS Shapes and CSS Regions.
HTML Alchemy – Combining CSS Shapes with CSS Regions
Krasimir Tsonev explains a solution for animating pseudo elements using the inherit value.
The power of inherit or how to animate pseudo elements
Joshua Clanton offers a good Introduction to IIFEs for JavaScript learners.
An Introduction to IIFEs – Immediately Invoked Function Expressions
Dr. Axel Rauschmayer explains JavaScript’s type system, whether it is static or dynamic and coercion.
JavaScript’s type system
Kirupa Chinnathambi shows how to create lists that can be filtered by category using HTML, CSS and JavaScript.
Filtering Items In A List
Ryan Morr shares tips for writing CSS using abstract, themed and character classes.
Leveraging the Most Out of CSS Classes
Dudley Storey shows how to use hover effects to create an element of surprise in your pages and increase user engagement.
Designing For Emotion With Hover Effects
David Walsh explains how writing CSS has changed over the years and some of the best principles and workflows he’s learned during his journey.
Starting to Write CSS
Robert Sedovšek shows how to use some of the lesser known pseudo selectors in CSS.
With a Little Help from Pseudo-Selectors
Libraries and Frameworks
Nicolas Bevacqua says your web application can benefit by doing things the “Angular Way” and shares tips on how to take advantage of AngularJS.
The Angular Way
Azat Mardanov compares Node.js and PHP in terms of a number of criteria including syntax, ecosystem, frameworks and more.
Node.js vs. PHP
Jonathan Fielding reviews several front end code generators that give you a head start on HTML, CSS and JavaScript projects.
Getting a Head Start with Front End Generators
Holly Schinsky runs down the updates and new components in the latest release of the Topcoat UI framework.
Totally Rad Topcoat!
Johnny Simpson shares his new flip book jQuery plugin that uses CSS 3D transforms to create the slide transitions.
CSS Flip Book jQuery Plugin
The latest screencast from Codeship shows how to do continuous deployment for Node.js applications.
Continuous Deployment for node.js applications
Addy Osmani shows how to use grunt-responsive-images to generate images at different resolutions to use with srcset.
Generate multi-resolution images for srcset with Grunt
Raymond Camden shares a Node experiment that introspects the subdomain and uses the Bing Search API to find pictures of kittens.
Another Node Experiment: AndKittens
New and Updated Libraries and Frameworks
Ember.js 1.0 is officially released and this post goes over all the developments.
Ember 1.0 Released
Version 3.0 of ChocolateChip-UI was rewritten from the ground up to be lighter and faster and supports the new iOS7 look.
Announcing ChocolateChip 3.0
parallax.js reacts to the orientation of your device, offsetting layers depending on their depth within a scene.
parallax.js
Minified.js is a client-side JavaScript library with features comparable to jQuery and MooTools but less than 4kb.
Minified.js – A Truly Lightweight JavaScript Library
Intention.js is a tool for responsive design developed at Dow Jones that manipulates the DOM via HTML attributes.
intention.js
Theseus is a JavaScript debugger for Brackets that can debug JavaScript running in Chrome and NodeJS.
Theseus JavaScript Debugger for Chrome and NodeJS
Hopscotch is a framework to make it easy for developers to add product tours to their pages.
Hopscotch
Wu.js is a library for lazy, functional programming in Javascript that works in the browser and with CommonJS.
wu.js
Etc.
Vincent Hardy explains some of the reasons why developers choose to contribute to open source projects.
Why Do Developers Contribute to Open Source Projects?
Raymond Camden walks through some tips for using the new Theseus JavaScript debugger with Brackets.
Some tips for using Brackets and Theseus
An update to Dreamweaver CC has a brand new rendering engine with the same performance and HTML5 support as Chrome.
Dreamweaver gets Live Highlights, a new rendering engine, & more
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.