50 Friday
Front end Development & Web Design Digest

A quick, hassle-free way to stay on top of front end & web design news.

Web development

  1. Nativefier — Turns Any Web Site Into a Native App from Command Line
  2. W3C forks HTML yet again
  3. Why I love working with WEB
  4. Webpack Your Workflow
  5. Chrome (Canary) DevTools will now show User Timing measures in timeline!
  6. Building Offline Sites with ServiceWorkers and UpUp
  7. The Ultimate Guide to Preview Text Support in Email
  8. Leaner Responsive Images With Client Hints
  9. Lazy-Loading Images: How Not to Really Annoy Your Users
  10. The Current State of Web Security


  1. New CSS Grid Specification
  2. Exploring the Stylus Cache Function
  3. CSS Refresher Notes
  4. Webkit Flexbox Patterns
  5. Flexbox playground
  6. Sass: the @media directive
  7. The Benefits of Inheritance via @extend in Sass
  8. Neat trick for CSS object-fit fallback on Edge (and other browsers)
  9. edX Pattern library
  10. Timelined is a customizable CSS-only vertical timeline


  1. What’s New in jQuery 3.0 and How to Use It
  2. 5 jQuery.each() Function Examples
  3. Keeping Promises With JavaScript
  4. What’s the Difference Between Class & Prototypal Inheritance?
  5. JavaScript Web Apps Considered Value
  6. CMS.js — the JavaScirpt Site Generator
  7. 7 Ways ES2015 Can Improve Your JavaScript Programming
  8. Object-Oriented JavaScript — A Deep Dive into ES6 Classes
  9. 10 Best jQuery and HTML5 WYSIWYG Plugins
  10. Umbrella JS Small (<2kb) jQuery-like library


  1. React.js Best Practices for 2016
  2. 5 Steps for Learning React Application Development
  3. Building Your First React.js App
  4. Learning React Basics and Building a Basic Application Prototype
  5. Why React/Redux is an inferior paradigm


  1. Dynamic AngularJS Guided Tutorial for JavaScript Developers
  2. Why Angular 2 Is DOA
  3. From Angular ES5 Directive To Angular ES2015 Component ES6
  4. AngularJS Tutorial for Beginners
  5. Angular 2 ES6 TodoMVC

Web Design

  1. Ask DN: What books to read in 2016?
  2. Motion with Meaning: Semantic Animation in Interface Design
  3. Designing a More Expressive Profile Picture
  4. Product Design — How We Make Complex Tasks Feel Simpe
  5. An Open Letter to Designers of Unsolicited Redesigns and Unbuildable Apps
  6. What does Disney know about interface animation anyway?
  7. Facebook canvas
  8. Geometric Design: The “Heavenly City” Diagram
  9. From furniture to Screens
  10. The Fidelity Curve: How to weigh the costs and benefits of creating UI mockups