Speeding up Web experiences with prioritization and preloading

#379 — February 20, 2019 Read on the Web 🚀 Frontend Focus Resource Prioritization – Getting the Browser to Help You — Use <link rel=preload> to load your key scripts at a higher priority. It’s improved Twitter Lite’s time to interactive by 36% says Addy Osmani. Sérgio Gomes (Google) ▶  How A Screen Reader User Accesses The Web — Léonie Watson (a blind screen reader user and web accessibility expert) explores the web, explaining some unexpected properties of HTML elements that have a huge impact on accessibility and performance. Bruce Lawson Design for Developers ✨ New Course by Sarah Drasner — Become more self-sufficient for the entire process for execution, from concept to design to implementation. Understand the rules for designing and learn to create complex and beautiful front-end experiences. Frontend Masters sponsor Preloading Fonts and the Puzzle of Priorities — Another on preloading. This one's a thorough and detailed look at how <link rel=preload> behaves specifically in regards to fonts, concluding that there’s a case to be made for preloading one or maybe two critical fonts. Andy Davies 'Trusted Types' To Help Prevent Cross-Site Scripting? — A look at an experimental, Chrome-only API that aims to prevent DOM-based cross-site scripting by only letting special typed objects to make certain types of changes to the page. If this approach were to catch on in a standardized, cross-browser way it could be a big deal. Krzysztof Kotowicz (Google) Google Wants to Make It Harder for Sites to Detect That You’re Using Chrome’s Incognito Mode — The FileSystem API is being used to determine whether or not a user is in Incognito mode. Google is looking to stop this and eventually deprecate and remove the API. Kyle Bradshaw Trust is Good, Observation is Better: Intersection Observer v2 — Intersection Observer v2 adds the capability to not only observe intersections themselves, but to also detect if the intersecting element was visible at the time of intersection. Thomas Steiner (Google Developers) 💻 Jobs Full-Stack Developer, Permanent (London, UK) — We’re looking for a new member of the team to work closely alongside our Senior Developer & Designers. Birch Creative Limited Sr Front End Software Engineer (Americas) — Are you a top-notch Frontend engineer with a focus on building powerful, responsive, and maintainable web applications? Host Compliance Find A Job Through Vettery — Vettery specializes in developer roles and is completely free for job seekers. Vettery 📘 Tutorials & Opinion ▶  Will Saving Images in 72 Dpi Save Your Website Bandwidth? — Discusses the misunderstood notion that images must be saved in 72 DP in order to optimize images for the web. The Web Demystified Managing Image Breakpoints with Angular — Angular has a built-in feature called BreakPoint Observer that evaluates media queries and reacts to the changing environment. Tamas Piros Struggling with MongoDB? Release the Full Power with Studio 3T — Get started with the IDE that saves you time and makes it easy. MongoDB for all, from startup to enterprise. Studio 3T sponsor How @supports Works — The @supports query tests if a browser can support a particular property before applying a block of style. Chris Coyier Using CSS Grid The Right Way — Three tips to help you understand and leverage the Grid spec. Violet Peña IE10-Compatible Grid Auto-Placement with Flexbox — If you need to support older browsers here’s one approach to achieving grid-like layouts. Brian Holt Shop Like a Developer – Discover and Experiment with Hot New Cloud Services 🔥🔭 Manifold sponsor How to Theme with CSS Variables Rob Wood CSS Scroll Snap: How It Really Works Itzik Pop A Discussion on Rebuilding Some of MDN with React — MDN is a hugely popular and useful resource for Web developers, and they’re considering reimplementing parts of it with React.. which provoked more discussion that you might expect(!) MDN Web Docs 🔧 Code and Tools Textblock: Set Continuously Responsive Typography — A JavaScript tool for adjusting size, leading, and grades to cast 'continuously responsive typography.' It works over your current CSS as a progressive enhancement. Glyphic Split.js: Create Resizable Split Views / Panes / Frames — There’s a React component variant too. Nathan Cahill Lightning-Fast GraphQL Service for Ecommerce✌️PIM & Subscription Commerce 🎉 Crystallize sponsor mailtolink.me: Mailto Link Generator — A simple markup generator for mailto links (direct links to email clients from the Web) that takes care of the formatting for you. Note that the address is not obfuscated, however. Michael Mckeever html5-boilerplate v7 Released — Drops support for IE 9 and 10. Rob Larsen    🗓 Upcoming Events An Event Apart, March 4-6 — Seattle, Washington — A 3-day conference with 17 sessions and a focus on digital design, UX, content, code, and more. UpFront Conference, March 22 — Manchester, UK — A frontend conference 'open to everyone who makes for the web'. SmashingConf, April 16–17 — San Francisco, California — A friendly, inclusive event which is focused on real-world problems and solutions CSSCamp 2019, July 17 — Barcelona, Catalunya — A one-day, one-track conference for web designers and developers.

by via Frontend Focus