Optimizing frontend performance with Resource Hints

#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 📰 NEWS SNIPPETS The first public draft 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 with internet safety watchdogs and intelligence agencies. Iconic typeface Helvetica has gotten a makeover after 36 years. It's called Helvetica Now. Here's what changes you can expect to see to DevTools in Chrome 75. 💻 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    🗓 Upcoming Events Munich Frontend Conference FrontConf, April 27 – Munich, Germany — International conference focused on frontend concepts and technologies. IMAGECON, May 1–2 – San Francisco — 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 — Meet local and international speakers and share your experiences with modern JavaScript development. Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference. Front Utah 2019, June 6-7 — Salt Lake City — 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 CSS Day, June 13-14 — Amsterdam, Netherlands — 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 — A one-day, one-track conference for web designers and developers.

by via Frontend Focus