---
title: "This Week's HTML5, CSS and Browser Tech News #272"
publication: "Frontend Focus"
issue: 272
published_at: "2017-01-11"
canonical_url: "https://frontendfoc.us/issues/272"
---
This Week's HTML5, CSS and Browser Tech News #272
[Read this e-mail on the Web](http://frontendfoc.us/issues/272)
Frontend FocusIssue 272 — January 11, 2017[Front-End Tools: Some Top Finds of 2016](https://www.sitepoint.com/front-end-tools-my-favorite-finds-of-2016/?utm_source=frontendfocus&utm_medium=email)A look at Louis Lazaris’ favorite front-end tools of 2016, including Modaal, postcss-grid-kiss, MJML and Intercooler.js. Sitepoint
[An Introduction to Building And Sending HTML Email](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/?utm_source=frontendfocus&utm_medium=email)A broad and straightforward guide to various things you’ll need to think about as a Web developer when sending HTML email. Lee Munroe
[CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components](https://m.alphasights.com/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b?utm_source=frontendfocus&utm_medium=email)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
[](http://wijmo.com/blog/rethinking-periodic-table-wijmo-sunburst/?utm_source=FrontEndFocus&utm_medium=1.11%2Cpimarynewseltter&utm_content=sunburstchart.periodictable.)[Rethinking the Periodic Table with a JavaScript Sunburst Control](http://wijmo.com/blog/rethinking-periodic-table-wijmo-sunburst/?utm_source=FrontEndFocus&utm_medium=1.11%2Cpimarynewseltter&utm_content=sunburstchart.periodictable.)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. WijmoSponsor
[Build a Custom CMS for a Serverless Static Site Generator](https://css-tricks.com/build-custom-cms-serverless-static-site-generator/?utm_source=frontendfocus&utm_medium=email)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
[Resilient Web Design: History, Ideas and Approaches](https://resilientwebdesign.com/?utm_source=frontendfocus&utm_medium=email)A free web-based book highlighting ideas and approaches to web design that have proven to be resilient over the years. Jeremy Keith
[Improving the Look of Links with the CSS Text Decoration Module](http://thenewcode.com/1168/Improve-the-Look-of-Links-with-the-CSS-Text-Decoration-Module?utm_source=frontendfocus&utm_medium=email)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 [](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter)
- [Senior Frontend Engineer](https://jobs.lever.co/creditkarma/c586de19-2a32-4eab-9683-938ab23c0c14/apply?lever-source=13168492532)Credit 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)](http://frontenddeveloperjob.com/job/587607536bd3410004f47d18?utm_source=frontendfocus&utm_medium=email) Jovoto
Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend)
In Brief
[The Most Hearted CodePens of 2016](https://blog.codepen.io/2017/01/11/the-most-hearted-of-2016/?utm_source=frontendfocus&utm_medium=email) news
Tim Holman
[The Lead Developer 1-day conference for Tech Leads. 21 Feb, New York.](http://2017.theleaddeveloper-ny.com/?utm_source=frontend-focus&utm_medium=referral&utm_content=frontend-stars&utm_campaign=frontend-focus) news
Hear from Rebecca Murphey, Lara Hogan and more on leadership, managing people & running effective teams.
White October EventsSponsor
[Sloped Edges with a Consistent Angle in CSS](https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/?utm_source=frontendfocus&utm_medium=email) tutorial
Kilian Valkhof
[Architecting A Web App to 'Just Work' Offline](https://blog.superhuman.com/architecting-a-web-app-to-just-work-offline-part-1-8697f316c0eb?utm_source=frontendfocus&utm_medium=email) tutorial
Islam Sharabash
[What Benefits Are There to Using a 'span' Instead of 'input'?](http://stackoverflow.com/q/41273919/3951?utm_source=frontendfocus&utm_medium=email) tutorial
Stack Overflow
[A Guide to Bootstrap 4.0's Powerful Flexbox Grid System](https://v4-alpha.getbootstrap.com/layout/grid/?utm_source=frontendfocus&utm_medium=email) tutorial
[Dirty CSS Hacks for Responsive Emails](https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails?utm_source=frontendfocus&utm_medium=email) tutorial
Sara Chisholm
[Creating a Custom HTML5 Video Player and The Shadow DOM](https://blog.hellojs.org/creating-a-custom-html5-video-player-and-the-shadow-dom-a98f29261be4?utm_source=frontendfocus&utm_medium=email) tutorial
Maria Campbell
[A Thing To Know about Gradients and 'Transparent Black'](https://css-tricks.com/thing-know-gradients-transparent-black/?utm_source=frontendfocus&utm_medium=email) 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](https://tympanus.net/codrops/2017/01/04/mirror-effect/?utm_source=frontendfocus&utm_medium=email) tutorial
Mary Lou
[Learn to build apps in React with Rangle’s Online Training](http://info.rangle.io/react-online-training?utm_source=frontend-focus-jan&utm_medium=sponsored-link) course
Register to join Rangle’s free ‘Intro to React’ online training course for developers on February 7
Rangle.ioSponsor
[Sky UK's CSS Style Guide](https://github.com/sky-uk/css?utm_source=frontendfocus&utm_medium=email) 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](https://lucax88x.github.io/2017/01/04/2017-01-04-visual-studio-code-extension-tips/?utm_source=frontendfocus&utm_medium=email) tools
Luca Trazzi
[accesslint.js: Keep Accessibility Errors in Check](https://github.com/accesslint/accesslint.js?utm_source=frontendfocus&utm_medium=email) tools
Works with dynamic content by checking for accessibility issues each time the DOM changes.
AccessLint
[xvg: A Chrome Extension for Debugging SVG Paths](https://xvg.now.sh/?utm_source=frontendfocus&utm_medium=email) tools
Varun Vachhar
[ColorMe: Visualize The CSS Color Function](https://colorme.io/?utm_source=frontendfocus&utm_medium=email) tools
A helpful UI for applying adjusters to a base color and seeing a visual of the adjustments. [Accompanying blog](https://tylergaw.com/articles/introducing-colorme).
Tyler Gaw
[awsm.css: Simple CSS Library for Semantic HTML Markup](https://github.com/igoradamenko/awsm.css?utm_source=frontendfocus&utm_medium=email) code
Essentially an alternative ‘default’ styling for regular tags.
Igor Adamenko
[Flexdatalist: jQuery Autocomplete with 'datalist' Element Support](http://projects.sergiodinislopes.pt/flexdatalist/?utm_source=frontendfocus&utm_medium=email) code
Sérgio Dinis Lopes
[EQCSS: A CSS Extension for Element Queries, Scoped CSS, and a Parent selector](https://github.com/eqcss/eqcss?utm_source=frontendfocus&utm_medium=email) code
Runs in the browser with JS, so no local compilation step needed.
[Siema: Lightweight and Simple Carousel with No Dependencies](https://pawelgrzybek.com/siema/?utm_source=frontendfocus&utm_medium=email) code
Pawel Grzybek
[Bttn.css: Simple, Styled CSS Buttons](https://bttn.surge.sh/?utm_source=frontendfocus&utm_medium=email) code
Ganapati V S
Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).
[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/272)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK