#388 — April 24, 2019

Read on the Web

? Frontend Focus

Optimizing Frontend Performance with 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.)

Drew M

Creating an Aspect Ratio CSS Utility — As the native aspect-ratio unit 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

Get the Fastest Website Deployments. Get Started Free — 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 — 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’ — “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

? Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world’s leading brands.

X-Team

Have You Tried Vettery? — 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 — 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 — 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 — 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 — 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 — How to analyze animation performance in the browser with Chrome Dev Tools.

Chloe Hwang

Diagonal Containers in CSS — How to create full-width, diagonal sections in CSS using the clip-path property.

Sebastiano Guerriero

Fading Out Siblings On Hover in CSS — A tiny trick for making your hover states stand out.

Trys Mudford

Studio 3T Makes SQL Migration to MongoDB, Powerfully Simple

Studio 3T sponsor

How to Inline An SVG File in HTML, Declaratively & Asynchronously

Scott Jehl

Implementing A Pin-to-Bottom Scrolling Element with Only CSS

Ryan Hunt

? Code and Tools

React95: Windows 95-Style UI Components for React — 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

Stéphanie Walter

Design, Build, Debug and Test Your Web Apps Faster with Ext JS

SENCHA, INC sponsor

A Simple Popover Card View — ..with media content. Created using CSS and JavaScript.

Mert Cukuren

OverlayScrollbars: A JavaScript Scrollbar Plugin That Replaces Native Scrollbars — 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

Mehdi M