---
title: "Chrome 65, CSS Quirks, and We've Redesigned"
publication: "Frontend Focus"
issue: 330
published_at: "2018-03-07"
canonical_url: "https://frontendfoc.us/issues/330"
---

This Week's HTML5, CSS, Browser, and Frontend News       

#330 — March 7, 2018 

[Read on the Web](https://frontendfoc.us/issues/330)   

Frontend Focus   

**Yes, Frontend Focus looks totally different today!** 

We got bored with the weird purple we used to rock, so as part of our redesign and new template, we've switched to 'HTML5 orange'. There's still a lot to do, but the newsletter will continue to get better over the coming weeks 🙂. 

As always, thanks for your ongoing support, and if you want to submit anything (links, feedback, etc.) just hit reply and we'll see your email.
 _— Peter Cooper and Chris Brandrick, editors_   

🏆 Featured  

▶[How to Write CSS That Works in Every Browser, Even the Old Ones](https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/) — A great collection of videos from Jen Simmons with techniques and advice for writing resilient CSS. 

Mozilla Hacks   

[Responsive Components: A Solution to the Container Queries Problem](https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/) — [Container queries](https://ethanmarcotte.com/wrote/on-container-queries/) would let us style elements based on the size of a containing element rather than the viewport, but they’re still not available - this post presents a viable alternative. 

Philip Walton   [![\](https://copm.s3.amazonaws.com/f79d251d.png)](https://frontendmasters.com/courses/api-node-rest-graphql/) 

[New Course: REST & GraphQL API Design in Node.js, v2](https://frontendmasters.com/courses/api-node-rest-graphql/) — Create an API from the ground up using Node.js, Express and MongoDB. In this course, you'll build a production-ready REST API, and migrate it over to GraphQL. 

Frontend Masters sponsor   

[What's New in Chrome 65 for Web Developers](https://developers.google.com/web/updates/2018/03/nic65) — There’s a lot to enjoy in Chrome 65, including the CSS Paint API, the Server Timing API, and `display: contents` support. The DevTools also got support for [local overrides.](https://developers.google.com/web/updates/2018/01/devtools#overrides) Or maybe you’d prefer [a 3 minute video roundup](https://www.youtube.com/watch?v=_W4GSpoSOZI)? 

Pete LePage   

[A Curated List of Frontend Case Studies](https://github.com/andrew--r/frontend-case-studies#readme) — Do you appreciate a good explanation of how and why a company took a particular approach to a frontend development project? You’ll find something to enjoy here. 

Andrew Romanov   

[Lesser Known CSS Quirks and Advanced Tips](https://medium.com/@peedutuisk/lesser-known-css-quirks-oddities-and-advanced-tips-css-is-awesome-8ee3d16295bb) — A collection of _“some of the weirdest CSS features, along with tips and tricks for advanced CSS users”_. Stuff like having multiple backgrounds on a single element. 

Peedu Tuisk   

[3 Techniques for Performant Custom Font Usage](https://css-tricks.com/three-techniques-performant-custom-font-usage/) — Make your custom Web fonts faster by making them smaller, loading them earlier, and using the `font-display` property. 

Ollie Williams   

[The 5 Most Popular Frontend Frameworks Compared](https://www.sitepoint.com/most-popular-frontend-frameworks-compared/) — More summarized than _compared_, but still. A quick look at Bootstrap, Foundation, Semantic UI, Pure, and UIkit. 

Ivaylo Gerchev   

[Real-Time Error Monitoring, Alerting, and Analytics for JavaScript 🚀](https://rollbar.com/error-tracking/javascript/?utm_source=jsweekly&utm_campaign=nl_sponsorship&utm_medium=email-nl) — Report JS errors to Rollbar with full stack trace and diagnostic data. 

ROLLBAR sponsor  

💼 Jobs  

[Software Engineer Web Framework (Berlin)](https://jobs.zalando.com/jobs/968623-senior-software-engineer-web-framework/?utm_source=front-end-focus&utm_medium=email-p-paid&utm_campaign=2018-egn&utm_content=03-fef-1&gh_src=4xb2c1lc1) — Join us and tackle the challenge of evolving our Mosaic architecture, working on backend for frontend API orchestration and more. 

Zalando   

[Full Stack Developer & Team Lead](https://workingatbooking.com/vacancies/team-lead-front-end-developer/?gh_src=sicka31) — Booking.com is looking for a Team Lead – Front End Developer to join our development team in the heart of Amsterdam. 

Booking.com   

[Find a Job You're Passionate About](https://www.vettery.com/tech?utm_medium=cooper-frontendfocus&utm_campaign=ad-9310&utm_source=newsletter&utm_content=grouped&utm_term=tech) — Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job. 

Vettery  

📃 Articles and Tutorials  

[Chrome Flash Usage Declines from 80% in 2014 to 8% Today](https://www.bleepingcomputer.com/news/security/google-chrome-flash-usage-declines-from-80-percent-in-2014-to-under-8-percent-today/) — Should be 0% by Chrome 87. No, this is not a joke, Flash should be toast in 2020. 

Catalin Cimpanu   

[CSS Techniques and Effects for Knockout Text](https://css-tricks.com/css-techniques-and-effects-for-knockout-text/) — Goes deep into the visual effect of having text reveal a background. There's more to it than you might think.. 

Preethi   

[What Houdini Means for Animating Transforms](https://css-tricks.com/what-houdini-means-for-animating-transforms/) 

Ana Tudor   

[The Road to Layout Animations on the Web](https://web-layoutanim.vincentriemer.com/) — More interesting now that Chrome (but only Chrome) supports [Resize Observers.](https://developers.google.com/web/updates/2016/10/resizeobserver) 

Vincent Riemer slidedeck   

▶[WebAssembly: What and What Next?](https://www.youtube.com/watch?v=R9wn99Xheq4) — Two Googlers cover WebAssembly right from the basics up. 

Ben Titzer and Andreas Rossberg video   

[We Write CSS Like We Did in the 90s, and Yes, It’s Silly](http://alistapart.com/article/we-write-css-like-we-did-in-the-90s-and-yes-its-silly) — Guilty as charged. But Jens has some suggestions as to the "modern" approach. 

Jens Oliver Meiert  

🔧 Code and Tools  

[Boxy SVG: A Web-Based SVG Editor](https://boxy-svg.com/app) 

Jarosław Foksa  

[![Fontanello shows you font info quickly\](https://res.cloudinary.com/cpress/image/upload/w_800/i8pzvpj5pmmx6u5wlrk7.jpg)](https://fontanello.oktavilla.se/)  

[Fontanello: See Font Info from Web Pages on the Fly](https://fontanello.oktavilla.se/) — A Chrome and Firefox extension that reveals the typographic styles of any selected text by right-clicking it. 

Oktavilla   

[Project Tracking, Teamwork & Client Reporting Like You've Never Seen Before](https://monday.com/mb/nl/status-video-task/?utm_source=newsletter&utm_campaign=frontendfocus_mar18&utm_bdg=exp) 

monday.com sponsor   

[28 CSS Menu Examples From CodePen](https://freebiesupply.com/blog/css-menus/) — Both inspirational and handy to learn from. 

Freebie Supply   

[Delighters.js: Trigger CSS Animations as a Page is Scrolled](https://q42.github.io/delighters/) 

Q42   

[FilePond: A Flexible JS File Uploader with Great UX](https://pqina.nl/filepond/) — It’s GPLv3 licensed, however, so take care. 

Rik Schennink   

[Woah.css: A Collection of 'Eccentric' Animations](http://www.joerezendes.com/projects/Woah.css/) — Perhaps keep these for your internal demos only.. 

Joe Rezendes   

[Save Time with the Best, Fastest Angular Spreadsheets & UI Components](https://www.grapecity.com/en/javascript-solutions?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=Wijmo_03-18) 

GrapeCity JavaScript Solutions sponsor         

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom