Frontend Focus
Issue 272 — January 11, 2017
A look at Louis Lazaris’ favorite front-end tools of 2016, including Modaal, postcss-grid-kiss, MJML and Intercooler.js.

A broad and straightforward guide to various things you’ll need to think about as a Web developer when sending HTML email.
Lee Munroe

Whatever technology you use “there is no substitute for a well defined styling architecture that makes it intuitive for other developers to contribute to your code base”.
Perez Priego

Ideal for visualizing hierarchical data, sunburst charts display categorical data “tiers.” Walk through four-steps, from preparing the data model to building the chart view, to display the periodic table of elements as a sunburst chart on the web using Wijmo.
Wijmo   Sponsor

How to build the bare bones of a static site generator with content authored by an admin user via a standard web form, with no database necessary.
John Polacek

A free web-based book highlighting ideas and approaches to web design that have proven to be resilient over the years.
Jeremy Keith

Links have had some of the strictest styling limits — limitations that can affect their legibility. 2 new CSS properties will soon help, however.
Dudley Storey

Jobs Supported by

  • Senior Frontend EngineerCredit Karma is seeking a Front-End Engineer to join our SF team to help build the next generation of our web platform with React and Node.js. Drive client-side technical direction, build scalable web apps and deliver ground-breaking user experiences. Credit Karma
  • Front-End Developer at Jovoto (Berlin) Jovoto

Can't find the right job? Want companies to apply to you? Try

In Brief

The Most Hearted CodePens of 2016 news
Tim Holman

The Lead Developer 1-day conference for Tech Leads. 21 Feb, New York. news
Hear from Rebecca Murphey, Lara Hogan and more on leadership, managing people & running effective teams.
White October Events  Sponsor

Sloped Edges with a Consistent Angle in CSS tutorial
Kilian Valkhof

Architecting A Web App to 'Just Work' Offline tutorial
Islam Sharabash

What Benefits Are There to Using a 'span' Instead of 'input'? tutorial
Stack Overflow

A Guide to Bootstrap 4.0's Powerful Flexbox Grid System tutorial

Dirty CSS Hacks for Responsive Emails tutorial
Sara Chisholm

Creating a Custom HTML5 Video Player and The Shadow DOM tutorial
Maria Campbell

A Thing To Know about Gradients and 'Transparent Black' tutorial
A quirk with how Safari renders gradients that you may want to be aware of.
Chris Coyier

Creating a Symmetrical, Animated 'Mirror' Effect with CSS tutorial
Mary Lou

Learn to build apps in React with Rangle’s Online Training course
Register to join Rangle’s free ‘Intro to React’ online training course for developers on February 7  Sponsor

Sky UK's CSS Style Guide tools
Used by the team at UK broadcaster Sky, with details on architecture, formatting and naming conventions.
Sky UK

Everyday Front-End Visual Studio Code Extensions, Tips and Tricks tools
Luca Trazzi

accesslint.js: Keep Accessibility Errors in Check tools
Works with dynamic content by checking for accessibility issues each time the DOM changes.

xvg: A Chrome Extension for Debugging SVG Paths tools
Varun Vachhar

ColorMe: Visualize The CSS Color Function tools
A helpful UI for applying adjusters to a base color and seeing a visual of the adjustments. Accompanying blog.
Tyler Gaw

awsm.css: Simple CSS Library for Semantic HTML Markup code
Essentially an alternative ‘default’ styling for regular tags.
Igor Adamenko

Flexdatalist: jQuery Autocomplete with 'datalist' Element Support code
Sérgio Dinis Lopes

EQCSS: A CSS Extension for Element Queries, Scoped CSS, and a Parent selector code
Runs in the browser with JS, so no local compilation step needed.

Siema: Lightweight and Simple Carousel with No Dependencies code
Pawel Grzybek

Bttn.css: Simple, Styled CSS Buttons code
Ganapati V S