---
title: "The dark side of CSS Grid?"
publication: "Frontend Focus"
issue: 380
published_at: "2019-02-27"
canonical_url: "https://frontendfoc.us/issues/380"
---

This week's HTML, CSS, browser, and frontend news       

#380 — February 27, 2019 

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

Frontend Focus 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rsworgwei0vn6wradolu.jpg)](https://developers.google.com/web/updates/2019/02/back-forward-cache)   

[Exploring a Back/Forward Cache for Chrome](https://developers.google.com/web/updates/2019/02/back-forward-cache) — The Chrome team are experimenting with a way to navigate back and forth, which thanks to caching pages in-memory (preserving JS and DOM states) will allow for ‘instant’ navigation to previously visited pages. _Both Firefox and Safari already have similar back-forward cache implementations_. 

Addy Osmani (Google)   

[When is a Button not a Button?](https://www.smashingmagazine.com/2019/02/buttons-interfaces/) — Not everything that’s round and stands out is considered to be a button. Here’s an explainer on how you can create a proper interactive button for your users — one that shouldn’t be confused for anything else. 

Vadim Makeev   [![\](https://copm.s3.amazonaws.com/874ea81c.png)](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary) 

[What Should Developers Consider When Planning a React Application?](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary) — Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy. 

Progress KendoReact sponsor   

[The Dark Side of the Grid](https://www.matuzo.at/blog/the-dark-side-of-the-grid/) — The first in a series on the CSS Grid Layout spec, highlighting the new 'dangers' regarding accessibility and UX that it creates. 

Manuel Matuzovic   

▶[The Lost Art of MIDI: Bringing It Back to the Web](https://www.youtube.com/watch?v=BmfDMylKo5I) — Bringing MIDI and the obsolete `bgsound` back from the dead using WebAssembly, Emscripten, Web Audio, and Web Components. Give your webpages the 90’s treatment in a fun, modern and standards-compliant way. 

Feross Aboukhadijeh     

By summer 2019, Firefox will block, by default, all cross-site third-party trackers: 

[“We want to make it simple for people to create walls around data that’s important to them.”](https://www.fastcompany.com/90299092/mozilla-most-innovative-companies-2019) 

💬 _Denelle Dixon, Mozilla’s COO [speaking to Fast Company](https://www.fastcompany.com/90299092/mozilla-most-innovative-companies-2019)_.   

💻 Jobs  

[Sr Frontend Dev. JS & React (Berlin, DE)](https://www.smartrecruiters.com/Jobpal1/743999684327751-frontend-developer) — Product-focused ML startup looking for a new talent to build and refine the experience of our B2B product. 

jobpal   

[Find A Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in developer roles and is completely free for job seekers. Create a profile to get started. 

Vettery  

📘 Articles, Tutorials & Opinion  [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/nkgjzfcee03mzo4cidwo.jpg)](https://www.hongkiat.com/blog/webp-guide/) 

WebP support in modern browsers   

[A Complete Guide to Using the WebP Image Format](https://www.hongkiat.com/blog/webp-guide/) — Although not universally adopted just yet, Edge, Chrome, Opera and Firefox do now support Google’s WebP image format. This guide has a few tips that may be one worth referencing once support is more widespread. 

Hongkiat Lim   

[Build Great PDFs on the Web Using SVG](http://rockthecode.io/blog/using-svg-build-better-reports/) — How to generate print-ready PDFs directly from standard web frontend code by leveraging SVG. 

Li He   

[How Do Top Developers Deliver Video? - Download the Video Report](https://go.bitmovin.com/download-the-bitmovin-2018-video-developer-report?utm_source=paid-newsletter&utm_medium=cooperpress&utm_campaign=cp-frontend&utm_content=developer-report) — Dive into the insights of video developers from Broadcasters, Integrators, Publishers, Telcos and more. 

Bitmovin sponsor   

▶[Accessibility Is Not A "Nice to Have"](http://5by5.tv/bigwebshow/184) — Jeffrey Zeldman and Derek Featherstone ask why companies de-prioritize accessibility. 

The Big Web Show podcast   

[Making Google Fonts Faster](https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d) — A few additional steps you can take to achieve much faster load times. 

Sia Karamalegos   

[Properly Size Images for the Web](https://victorzhou.com/blog/properly-size-images/) — A reminder in serving images at the size they’re actually rendered at. 

Victor Zhou   

[Advanced JavaScript Logging Using `console.group()`](https://mariusschulz.com/blog/advanced-javascript-logging-using-console-group) — A golden oldie recommended to us by [Kristian Roebuck](https://twitter.com/roebuk), the world’s [29th](https://techbeacon.com/app-dev-testing/42-javascript-experts-follow-twitter) most followable JavaScript developer. 

Marius Schulz   

[Build Enterprise-Grade Apps for Free with Ext JS Community Edition](https://www.sencha.com/products/extjs/communityedition/?utm_source=cooperpress&utm_medium=advertising&utm_campaign=sncextjscommunity&utm_content=022719sncextjscommunityad-fef) 

Sencha, Inc. sponsor   

[Using Artificial Intelligence to Generate Alt Text on Images](https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/) 

Nino Ross Rodriguez   

[21 Ways to Optimise Your CSS and Speed Up Your Site](https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site) 

Tam Hanna  

🔧 Code and Tools  

[capture-website: Capture Screenshots of Websites](https://github.com/sindresorhus/capture-website) — A high-level Puppeteer wrapper to make it easy to capture screenshots of websites from Node or the command-line. 

Sindre Sorhus   

[Boilerform: A Boilerplate to 'Take The Pain Away' From Working with Forms](https://boilerform.design/) — Provides a solid baseline for building forms. Here’s [the pattern library](https://patterns.boilerform.design/). 

Andy Bell   

[✅ Create Feature-Rich JavaScript Data Grids & Tables with ZingGrid](https://www.zinggrid.com/hello/front-end-focus?utm_source=front-end_focus&utm_medium=sponsored_email&utm_campaign=front-end_focus_2019-02-27) 

ZingGrid sponsor   

[Buefy: Lightweight UI Components for Vue.js Based on Bulma](https://buefy.org/) — A set of responsive UI components for Vue.js based on the [Bulma](https://bulma.io/) CSS framework. 

Buefy   

[Howler.js: An Audio Library for the Modern Web](https://howlerjs.com/) — Get a simple API for your audio needs across all platforms. No dependencies, too. 

James Simpson   

[HEX, RGB, HSL Converter](https://codepen.io/pankajparashar/full/oFzIg) — A handy browser-based color converter that quickly translates a HEX value to RGB and HSL. 

Pankaj Parashar   

[ICONSVG: Find, Customize & Generate Common SVG Icons for Your Project](https://iconsvg.xyz/) — A good collection of common icons here. 

Gaddafi Rusli   

🗓 Upcoming Events  

[UpFront Conference, March 22 — Manchester, UK](https://upfrontconf.com/) — A frontend conference 'open to everyone who makes for the web'.   

[FrontCon, April 3–5 — Riga, Latvia](https://frontcon.lv/) — A two-day conference focused on frontend concepts and technologies.   

[SmashingConf, April 16–17 — San Francisco, California](https://smashingconf.com/sf-2019/) — A friendly, inclusive event which is focused on real-world problems and solutions   

[CSSCamp 2019, July 17 — Barcelona, Catalunya](https://csscamp.tech/) — A one-day, one-track conference for web designers and developers.           

A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) and [Peter Cooper](https://twitter.com/peterc). 

[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