Web Design Weekly #154
September 15, 2014 - Jake BresnehanHeadlines
Smashing Magazine’s Performance
Maintaining a website is hard enough, let alone making it wicked fast. This case study by Vitaly Friedman takes a look behind the scenes in how the team worked super hard to optimise the site. (smashingmagazine.com)
How Instagram.com Works
Instagram’s site renders almost all of its UI in JavaScript and in this talk Pete Hunt talks about how their packaging and push systems work in great detail. Anyone building a large site using lots of JavaScript shoud find this pretty interesting! (youtube.com)
Sponsor Web Design Weekly and reach over 20,000 developers!
Articles
Attribute Modules for CSS
Attribute Modules is a technique for using HTML attributes and their values rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS. (github.com)
Parallax Performance
A site that can’t scroll smoothly is a silent but deadly killer of user engagement. In this talk Paul Irish diagnoses several popular sites and visualises their problems, fixes their implementations and unveils a brand new technique for parallax that makes sure that you can enhance the user experience. (youtube.com)
JavaScript hacks explained
There are several JavaScript tricks that are used widely by experienced programmers. Many of them may not be instantly obvious, especially for beginners. In this post, Janis has put together a small compilation of a few of the more well known ones. (mdnbar.com)
Enhancing Data Visualization with SVG Filters
SVG filters are a powerful and under-utilised tool. Filters are a post processing step that allow you to create interesting effects by adding pixel-based effects. They can be chained together, manipulated on the fly and applied to different elements to create powerful visual experiences. (vasir.net)
Why you need to use CSS variables (creativebloq.com)
Tools / Resources
PSD Cleaner – Layers Organize Themselves with PSD Cleaner
The easiest way to organize and rename layers in your PSDs with just a few clicks. (madebysource.com)
Angular-Data
Inspired by Ember Data, angular-data is the model layer Angular is missing. It consists of a convenient in-memory cache for managing your data and several adapters for communicating with various persistence layers. (pseudobry.com)
Polyfills as a service
The polyfill service selectively bundles browser polyfills based on the User-Agent header supplied in a request, with the intention of allowing JavaScript and CSS developers to use modern standards in legacy user agents that do not natively support the standard. (labs.ft.com)
Introducing an Accessible HTML5 Video Player (paypal-engineering.com)
A good selection of performance tools (perf-tooling.today)
Database of React components (react-components.com)
SVG Mac cursors (sawyerhollenshead.com)
React Style (andreypopp.com)
Inspiration
Jeffrey Zeldman Documentary
A documentary that highlights Jeffrey’s two decades of designing, organising and, most of all, sharing on the web. (vimeo.com)
ShopTalk show #132 with Ian Feather (shoptalkshow.com)
From Front-end to Full Stack (envato.com)
Jobs
Front End Engineer at Yelp!
Join Yelp’s Front-end team and help build a modern, styleguide-driven UX for our 138 million users! We’re looking for people who love good code and working closely with design, product and other engineers to make great features. (yelp.com)
Advertise in next week’s newsletter →
From the Blog
Compass Sourcemaps
Since the release of Compass v1.0.0 we’ve seen sourcemaps supported across the board. This means tools like Gulp and Grunt (including their compass compiler helpers), CodeKit2 and the CLI will now produce a Compass sourcemap file. This article by Dennis Gaebel dives into the config landscape across various tooling systems. (web-design-weekly.com)