Web Design Weekly #147
July 28, 2014 - Jake BresnehanHeadlines
Responsive Images – Use Cases and Documented Code Snippets
The new
Putting Thought Into Things
A beautiful article by Oliver Reichenstein that leaves you inspired to put a little more effort and thought into what we build. (ia.net)
Articles
The Principles of Adaptive Design
Brad Frost explores five guiding principles of adaptive design that he feels are core principles to crafting multi-device web experiences. They are ubiquity, flexibility, performance, enhancement and future-friendly. Great read. (bradfrostweb.com)
A look at the current responsive design landscape
Brian Krall takes a quick look into some well-known responsive sites from the performance angle. The results aren’t ground breaking, just a reinforcement on why we need to take performance seriously. He also shares some handy tools to help towards the end of the post. (sideproject.io)
UITableView in JavaScript, with re-usable cells using flexbox
Every now and then Ryan Seddon dives deep into some unknowns and pulls out a cracking article. This is no exception. Here Ryan uses the flexbox ‘order’ property to help the performance of a UITableView in JavaScript. Flexbox for the win! I also highly recommend the short screencast, which explores the Chrome tracing tool. (thecssninja.com)
Fixed and inflexible
When fixed positioning is used without care, restraint or precision, it can have disastrous consequences on the user experience. Tyler Sticka explains why. (blog.cloudfour.com)
Tools / Resources
A huge list of SVG Information
Of late Chris Coyier has been devoting lots of energy to SVG and in this post he compiles all his knowledge into one massive brain dump about all things SVG. Bookmark! (css-tricks.com)
Common Pitfalls with the HTML5 Drag ‘n’ Drop API
An article describing a few issues the Gravit team encountered and the workarounds they used. (medium.com)
Stateful Design
Re-use, “stateful” design and screen-flow using Layer Comps and Place Linked Smart Objects. (medium.com)
Critical
A simple gulp task that extracts and inlines critical-path (above-the-fold) CSS from HTML. (github.com)
Load CSS or JS Files Simply & Asynchronously (filamentgroup.com)
Package Management for ES6 Modules (youtube.com)
JavaScript (and Node) Best Practices (noahbuscher.com)
Responsive Design Workflow – book (responsivedesignworkflow.com)
Must-watch videos about JavaScript (github.com)
Paul Irish – Parallax Performance (youtube.com)
Inspiration
GitHub’s CSS
Mark Otto dives into the details of how GitHub does CSS. Quite an insightful article revealing some great tools and techniques but also highlighting some internal flaws. (markdotto.com)
Simple ideas & effects for website notifications (tympanus.net)
Can I Use redesign (caniuse.com)
Responsive Logos (responsivelogos.co.uk)
Jobs
Front-End Developer at Dropbox
Do you want to come help us build world-class UX on products like Dropbox, Carousel and Mailbox? We’re looking for people who share our passion and belief that the best technology is simple, beautiful and usable – and that our users deserve the absolute best experience we can build. (dropbox.com)
Front-End Engineer at Optimizely
We are looking for a front-end engineer to join our fearlessly creative and data-driven team of modern marketers. This position reports directly to the Head of Optimization and will work broadly across the company. Come join us! (optimizely.com)
Advertise in next week’s newsletter →
From The Blog
Sass Source Maps in Chrome
Over the last few years there has been some major advancements in the tooling we use on a day-to-day basis but one feature that really took things to the next level was the introduction to CSS source maps. (web-design-weekly.com)