--- title: "Firefox 51, Safari 10.1, and an end to the 'clearfix' hack?" publication: "Frontend Focus" issue: 274 published_at: "2017-01-25" canonical_url: "https://frontendfoc.us/issues/274" --- Firefox 51, Safari 10.1, and an end to the 'clearfix' hack? [Read this e-mail on the Web](http://frontendfoc.us/issues/274) Frontend FocusIssue 274 — January 25, 2017[flow-root: An (Eventual) End to the Clearfix Hack?](https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/?utm_source=frontendfocus&utm_medium=email)A new value of the ‘display’ property called _flow-root_ has shipped in Chrome Canary and Firefox Nightly — Rachel Andrew looks at what it can do. Rachel Andrew [Chrome 56 To Aggressively Throttle Background Tabs](http://blog.strml.net/2017/01/chrome-56-now-aggressively-throttles.html?utm_source=frontendfocus&utm_medium=email)An optimization to throttle background tabs’ timers will be included, but Samuel Reed has some concerns over things this could break. Samuel Reed [Making Responsive HTML Email Coding Easy With MJML](https://www.smashingmagazine.com/2017/01/making-responsive-html-email-coding-easy-with-mjml/?utm_source=frontendfocus&utm_medium=email)This step-by-step tutorial covers how to create a responsive email using MJML, a framework that abstracts away a lot of the HTML email cruft. Nicolas Garnier [![npm, Inc.\](https://copm.s3.amazonaws.com/ddb096d6.png)](https://medium.com/npm-inc/customer-convos-1-revin-guillen-elliemae-inc-d786f5355ea4#.kuiscy7fv?utm_source=frontendfocus&utm_medium=email)[“Use your nice tools without jumping through unnecessary hoops”: npm on the job](https://medium.com/npm-inc/customer-convos-1-revin-guillen-elliemae-inc-d786f5355ea4#.kuiscy7fv?utm_source=frontendfocus&utm_medium=email)npm’s the obvious choice for managing JavaScript dependencies, but when Ellie Mae built a web app, they needed to keep some code private. How? “Choose tools that work with the grain of how you want to work, and work with the grain of your tools…” npm, Inc.Sponsor [Safari 10.1 Released: CSS Grid, Fetch API, and More](https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html?utm_source=frontendfocus&utm_medium=email)New WebKit features in 10.1 include CSS Grid support, the ability to specify CSS colors in wider color spaces, IndexedDB 2.0, and support for [Fetch](https://fetch.spec.whatwg.org/), a replacement for XMLHttpRequest. Apple [Firefox 51 Released](https://www.mozilla.org/en-US/firefox/51.0/releasenotes/?utm_source=frontendfocus&utm_medium=email)A rundown of the new features in Firefox 51, a relatively substantial release feature-wise with WebGL 2, FLAC support, warning for non-secure logins, and more. Mozilla [Is Semantic CSS a Sensible CSS Best Practice?](http://cssmojo.com/opinions_of_leaders_considered_harmful/?utm_source=frontendfocus&utm_medium=email)A controversial thought-piece on whether ‘non semantic CSS’ is always a bad thing. The author states: _“I think “semantic CSS” is pretty much disconnected from today’s authoring workflows and goals.”_ Thierry Koblentz Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](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) - [Front-end Developer at Mux (YC’16, San Francisco)](https://muxhq.workable.com/jobs/398415?utm_source=frontendfocus&utm_medium=email)Come build video performance monitoring in React with authors of Video.js and the Youtube player. Mux is fast becoming a leader in cloud video technology and analytics. Mux - [Frontend Developer (React) at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=newsletter&utm_medium=email&utm_campaign=frontend-january-17)We're looking for a developer with an extensive knowledge of React and Javascript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow. X-Team 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 [WebGL 2 Lands in Firefox](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/?utm_source=frontendfocus&utm_medium=email) news WebGL 2 is based on OpenGL ES 3.0 and is now available by default. Chrome 56 (beta) also supports it. Mozilla Hacks [Best in Class UI Components for Angular Development – Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui?utm_medium=newsletter&utm_source=frontendweekly&utm_campaign=dt-kendo-ang2--trial-jan17) 100% jQuery-free Angular components built from the ground-up which deliver the business app essential building blocks. ProgressSponsor [HTML5 Page Structure Basics](https://www.sitepoint.com/defining-the-sample-sites-page-structure/?utm_source=frontendfocus&utm_medium=email) tutorial Louis Lazaris [A 5 Minute Intro to Styled Components](https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55?utm_source=frontendfocus&utm_medium=email) tutorial Sacha Greif [Fun Web Animation Effects with KUTE.js, a JS Animation Engine](https://www.sitepoint.com/fun-web-animation-effects-with-kute-js/?utm_source=frontendfocus&utm_medium=email) tutorial Antonietta Perna [Balancing Text and Images with Flexbox](http://thenewcode.com/1169/Balancing-Text-and-Images-with-Flexbox?utm_source=frontendfocus&utm_medium=email) tutorial Dudley Storey [Animate to Different End States Using One Set of CSS Keyframes](https://css-tricks.com/animate-different-end-states-using-one-set-css-keyframes/?utm_source=frontendfocus&utm_medium=email) tutorial Ana Tudor [Communicating Between Web Workers via MessageChannel](http://www.2ality.com/2017/01/messagechannel.html?utm_source=frontendfocus&utm_medium=email) tutorial Dr. Axel Rauschmayer [Building a Simple Pie Chart in SVG](https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936#.bxyv9ze14?utm_source=frontendfocus&utm_medium=email) tutorial David Gilbertson [3 Ways to Create a Table With Borders Only On The Inside](https://css-tricks.com/table-borders-inside/?utm_source=frontendfocus&utm_medium=email) tutorial CSS Tricks [A Simple Use of CSS Grid](https://theboldreport.net/2017/01/a-simple-use-of-css-grid/?utm_source=frontendfocus&utm_medium=email) tutorial A basic two column layout using Grid with a Flexbox fallback. Tim Smith [Code-Splitting Your Way to Better Performance with Webpack](https://www.youtube.com/watch?v=QH94CXVv3UE) video A quick 6 minute conversation. Google Chrome Developers [5 Web Trends for 2017](https://www.oreilly.com/ideas/5-web-trends-for-2017?utm_source=frontendfocus&utm_medium=email) opinion What’s coming with PWAs; functional reactivity; looking beyond REST to GraphQL and Falcor; and more. Allyson MacDonald [Best UX Practices for Long Scrolling Pages](http://babich.biz/best-practices-for-long-scrolling/?utm_source=frontendfocus&utm_medium=email) opinion Nick Babich [Making Magic with WebSockets and CSS3](https://medium.com/outsystems-engineering/making-magic-with-websockets-and-css3-ec22c1dcc8a8?utm_source=frontendfocus&utm_medium=email) story Hélio Dolores [Graaf: A Collection of Pure CSS Grid Overlays for Designing](http://graaf.space/?utm_source=frontendfocus&utm_medium=email) tools [How to find and fix the slowest code in your .NET application](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsperformanceprofiler&utm_term=email-25328) tools Find bottlenecks in your code or database and boost performance with the new ANTS Performance Profiler 9. [Try free](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsperformanceprofiler&utm_term=email-25328). Red GateSponsor [Simple Electron App Samples](http://electron.atom.io/blog/2017/01/19/simple-samples?utm_source=frontendfocus&utm_medium=email) code Electron makes it easy to build cross platform apps with JS, HTML and CSS. Electron [Quark: A Microscopic Atomic CSS Polyfill in 140 Bytes](https://tomhodgins.github.io/quark/?utm_source=frontendfocus&utm_medium=email) code Classes like _color-red fontSize-20_ get translated to CSS automatically. Tommy Hodgins 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/274) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK