Improving page performance with asynchronously loaded CSS

#401 — July 24, 2019 Read on the Web Frontend Focus The Simplest Way to Load CSS Asynchronously — “One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering” Scott Jehl Mozilla Launch First Annual Web Developer & Designer Survey — The MDN Developer & Designer Needs Survey is seeking feedback — your participation will influence how browser vendors like Mozilla, Google, Microsoft, and Samsung prioritize feature development. Kadir Topal & Shi Li Li (Mozilla) Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today. Cloudinary sponsor Intrinsically Responsive CSS Grid with minmax() and min() — An interesting look at the min(), max(), and clamp() functions, and how they allow for lots of opportunities for exploration. Evan Minto Meaning Without Markup: Accessibility Object Model (AOM) — Proposals for the AOM include a new way to convey semantics: without markup, directly in JavaScript. This post looks at the proposals and their current status. Hidde de Vries Lawsuits By The Disabled Against Websites Spike — 2018 saw a near 200% increase in the number of lawsuits targeting websites and apps for their alleged failure to comply with the Americans with Disabilities Act. Ashima Dayal, Vivien Byrwa and Maxine Sharavsky A Look At What's New In DevTools for Chrome 77 — Copy element styles, visualize layout shifting, and more. Kayce Basques (Google) 💻 Jobs Frontend Engineer at Scalable Capital (Munich) — Passionate about React and GraphQL? Join our Team of JavaScript Developers and shape the future of FinTech. Scalable Capital GmbH The Fastest Way to Get Hired — Want a new job but don’t want the hassle? We look at your skills to match the right person to the right role. It makes hiring fairer, faster & better for everyone. Our average time to hire is just 17 days. hackajob 📙 Tutorials & Opinion Google Explains the JavaScript SEO Basics — When Googlebot is crawling the Web it runs a version of Chromium behind the scenes and actually runs your JavaScript. This means there are some things to be aware of. Google Developers Twitter’s Redesign Isn’t About You — The recent revamp of Twitter’s website rebuilt the desktop experience from the bottom up as a progressive web app and merged it with the former mobile website in an effort to “make the company a little lighter on its feet”. Will Oremus Fast, Intuitive Project Management Tool for Software Teams — A better way to track your backlog. Seamless integration with GitHub, GitLab, Slack, and more. Try it free. Clubhouse.io sponsor The Mutable Web — Related to the above mentioned Twitter redesign. “Fixing things we don’t like about the websites we visit every day is a great way to start recapturing some of the autonomy, creativity, and active participation of the early web.” Dylan Smooth Scrolling Image Effects — A small set of ideas on animating images and other elements while smooth scrolling a page. Mary Lou When to Use img, img@srcset, and picture and source Jens Oliver Meiert How to Make a CSS Grid Responsive in a Single Line of CSS Per Harald Borgen 💡 Tip of the Week supported by How to truncate multiple lines of text As noted here by Šime Vidas, multi-line text truncation is now widely supported across a wide array of browsers, including Firefox, Chrome & Safari. Global support now stands just shy of 90% — so how do you use it? Here's a quick example via the MDN docs: p {   width: 300px;   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 3;   overflow: hidden; } Using '-webkit-line-clamp' like this allows for limiting the contents of a block container to the specified number of lines. The result: You can read more about this property in the CSS Overflow Module Level 3 specification. Chris Coyier also looks at an alternative approach here. This tip of the week is sponsored by Pantheon, the WebOps platform built for agility. Learn how WebOps can benefit you & why traditional hosting is dead. 🔧 Code, Tools & Resources 🎺 Popup Trombone — A fun little experiment: it’s a trombone you play by resizing a popup window. Matthew Rayfield Automating RTL CSS — CSSJanus is an npm package designed to automate the conversion of LTR CSS to RTL, helpful for supporting languages such as Arabic, Urdu or Hebrew. Charlie Custom Properties Polyfill for IE11 — A comprehensive polyfill to add custom properties support to Internet Explorer 11. Tobias Buschor Super Tiny Icons: Miniscule SVG Versions of Your Favourite Website and App Logos — These are under 1KB each. Terence Eden    🗓 Upcoming Events WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah — Covers everything from basic web accessibility principles to advanced accessibility techniques. Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation. Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'. CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

by via Frontend Focus