---
title: "Optimizing frontend performance with Resource Hints"
publication: "Frontend Focus"
issue: 388
published_at: "2019-04-24"
canonical_url: "https://frontendfoc.us/issues/388"
---

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

#388 — April 24, 2019 

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

🚀 Frontend Focus 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/hdte00fd7lklwjsm7ryn.jpg)](https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/)   

[Optimizing Frontend Performance with Resource Hints](https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/) — Resource Hints are a simple and effective way for devs to help the browser stay one step ahead of the user and keep pages fast. Here’s a look at how to optimize your site with such techniques. (Harry Roberts recently shared [this related slidedeck](https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints).) 

Drew M   

[Creating an Aspect Ratio CSS Utility](https://andy-bell.design/wrote/creating-an-aspect-ratio-css-utility/) — As [the native `aspect-ratio` unit](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/) isn’t quite ready yet, here’s a ‘handy little CSS algorithm’ to use for figuring out a controlled height based on a container’s width. 

Andy Bell   [![\](https://copm.s3.amazonaws.com/49ef214c.png)](https://buddy.works/?utm_source=sscpff&utm_campaign=sscpff2404&utm_content=p) 

[Get the Fastest Website Deployments. Get Started Free](https://buddy.works/?utm_source=sscpff&utm_campaign=sscpff2404&utm_content=p) — Unlike most Continuous Integration (CI) solutions, Buddy only re-builds the parts of your application that have changed and deploys your updates in seconds to any cloud. Start building better React apps faster with Buddy. 

Buddy sponsor   

[Inclusively Hidden](https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html) — A detailed look at the various ways in which you can hide content, with a particular focus on keeping things accessible. 

Scott O'Hara   

[Hertz Suing for $32M over a Site 'Redesign From Hell'](https://www.theregister.co.uk/2019/04/23/hertz_accenture_lawsuit/) — _“Among the most mind-boggling allegations in Hertz’s filed complaint is that Accenture didn’t incorporate a responsive design..”_ What sort of Web design could _you_ put together for $32M? :-) 

The Register      

**📰 NEWS SNIPPETS** 

- The [first public draft](https://www.w3.org/TR/2019/WD-css-nav-1-20190423/) of the CSS Spatial Navigation Level 1 spec has been published. It defines a model for navigating focus using arrow keys.
- Google's encrypted version of Chrome has [caused concern](https://www.thedrum.com/news/2019/04/21/broadband-companies-and-government-hold-talks-over-new-google-chrome) with internet safety watchdogs and intelligence agencies.
- Iconic typeface Helvetica has gotten [a makeover](https://www.npr.org/2019/04/20/715499199/helvetica-the-iconic-font-both-loved-and-scorned-gets-its-1st-redesign-in-36-yea) after 36 years. It's called _Helvetica Now._
- Here's what changes you can [expect to see](https://developers.google.com/web/updates/2019/04/devtools) to DevTools in Chrome 75.    

💻 Jobs  

[Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers. Work from anywhere with the world's leading brands. 

X-Team   

[Have You Tried 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 tech roles and is completely free for job seekers. Create a profile to get started. 

Vettery  

📘 Tutorials & Opinion  

[Why We Focus On Frontend Performance](https://technology.blog.gov.uk/2019/04/18/why-we-focus-on-frontend-performance/) — Performance is “an integral part of the service” offered by the UK government website. Here’s a look at both the why and how behind their optimisation process. 

Matt Hobbs   

[Controlling Leftover Grid Items with pseudo-selectors](https://css-irl.info/controlling-leftover-grid-items/) — How you may want to deal with leftover grid ‘widow’ items that don’t fill an entire row. 

Michelle Barker   

[A Much Faster Way to Debug Code Than with Breakpoints or console.log](https://wallabyjs.com/?utm_source=frontendfocus&utm_medium=sponsored_newsletter&utm_campaign=frontendfocus&utm_content=frontendfocus) — Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive. 

Wallaby.js sponsor   

[Understanding WebViews](https://www.kirupa.com/apps/webview.htm) — A good overview of what a WebView is (essentially a native component that lets you render Web-based content within another app), what they’re used for and some of their limitations. 

Kirupa Chinnathambi   

[Animation Performance 101: Measuring with Dev Tools](https://www.viget.com/articles/animation-performance-101-measuring-with-dev-tools/) — How to analyze animation performance in the browser with Chrome Dev Tools. 

Chloe Hwang   

[Diagonal Containers in CSS](https://codyhouse.co/blog/post/css-diagonal-containers/) — How to create full-width, diagonal sections in CSS using the clip-path property. 

Sebastiano Guerriero   

[Fading Out Siblings On Hover in CSS](https://www.trysmudford.com/blog/fade-out-siblings-css-trick/) — A tiny trick for making your hover states stand out. 

Trys Mudford   

[Studio 3T Makes SQL Migration to MongoDB, Powerfully Simple](https://studio3t.com/knowledge-base/articles/import-sql-database-to-mongodb/?utm_source=cooper&utm_medium=newsletter&utm_campaign=april19) 

Studio 3T sponsor   

[How to Inline An SVG File in HTML, Declaratively & Asynchronously](https://codepen.io/scottjehl/project/full/XrzdYk) 

Scott Jehl   

[Implementing A Pin-to-Bottom Scrolling Element with Only CSS](https://blog.eqrion.net/pin-to-bottom/) 

Ryan Hunt  

🔧 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/dbabnquio316fxztdtwj.jpg)](https://github.com/arturbien/React95)  

[React95: Windows 95-Style UI Components for React](https://github.com/arturbien/React95) — The Windows 95 era UI continues to be held up as one of Windows’ finest moments, so... why not ;-) 

Artur Bień   

[Color Accessibility: Tools and Resources to Help You Design Inclusive Products](https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/) 

Stéphanie Walter   

[Design, Build, Debug and Test Your Web Apps Faster with Ext JS](https://www.sencha.com/products/extjs/evaluate/?utm_source=cooperpress&utm_medium=advertising&utm_campaign=sncextjs&utm_content=042419-sncextjs-ad-fef) 

SENCHA, INC sponsor   

[A Simple Popover Card View](https://codepen.io/knyttneve/pen/dLemVv) — ..with media content. Created using CSS and JavaScript. 

Mert Cukuren   

[OverlayScrollbars: A JavaScript Scrollbar Plugin That Replaces Native Scrollbars](https://github.com/KingSora/OverlayScrollbars) — Gives you the opportunity to provides custom styleable overlay scrollbars while keeping a native functionality and feel. 

Rene Haas   

[Can I Stop? A Tool to Help You Decide If You Can Drop IE 11 Support In Different Regions](https://canistop.net/) 

Mehdi M   

🗓 Upcoming Events  

[Munich Frontend Conference FrontConf, April 27 – Munich, Germany](https://frontconf.com/) — International conference focused on frontend concepts and technologies.   

[IMAGECON, May 1–2 – San Francisco](https://www.imagecon.com/) — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web.   

[CityJS Conference, May 3 — London, UK](https://cityjsconf.org/) — Meet local and international speakers and share your experiences with modern JavaScript development.   

[Frontend United, May 16-18 — Utrecht, Netherlands](https://www.frontendunited.org/) — A yearly, non-profit, developer-first, community-focused conference.   

[Front Utah 2019, June 6-7 — Salt Lake City](https://www.frontutah.com/conference/) — Two days of learning better ways to work together with your team and be inspired to grow your career in UX or Product Management.   

[DEVit, June 9-10 — Thessaloniki, Greece](https://devitconf.org/)   

[CSS Day, June 13-14 — Amsterdam, Netherlands](https://cssday.nl/2019) — Features eight world-class sessions by eight world-class speakers about curious, 'badly-known', or otherwise interesting CSS features.   

[CSSCamp 2019, July 17 — Barcelona, Spain](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