Great DevTools improvements in Chrome 75 and 76

#394 — June 5, 2019 Read on the Web Frontend Focus What's New in Chrome 75 for Developers — Pete Le Page highlights changes in the next stable version of Chrome, with the most exciting things being a way to create lower latency canvases and sharing files with the Web Share API. Here’s a related video on changes to DevTools in version 75. If you're on the Dev channel, you might also want to check out what's new in Chrome 76's DevTools (which includes a feature that guesses what CSS properties you want based on a value, e.g. bold would suggest font-weight). Google Developers A Drop-In CMS That Works Anywhere — Find 100s of frontend modules for common needs like CMS, forms, and more. Free and open-source. Built by the community so you don't have to reinvent the wheel. Sign up for free. AnyMod sponsor A Quick Look at the First Public Working Draft for Color Adjust Module 1 — The spec introduces three new CSS properties that help inform how much control the user agent should have when determining the visual appearance of a rendered page based on user preferences. Geoff Graham Will Only Enterprise Chrome Installs Have Full Ad-Blocking? An Update on Manifest v3 — A rather deep and technical thread but essentially Chrome is deprecating the blocking capabilities of the webRequest API in its new standards Chrome extensions will have to adhere to. This will likely have impacts on how things like ad blockers work. The Register has a more accessible writeup. Simeon Vincent How Frontend Developers Can Help To Bridge The Gap Between Designers And Developers — Stefan Kaltenegger shares his personal experience and advice on what frontend developers can do on their end to better bridge the gap between designers and developers. Smashing Magazine ▶  Web Typography: A Non-English Perspective — English speakers make up less than 5% of the world’s population — this talk covers the intricacies of ensuring web fonts display and are laid out correctly, regardless of language. Hui Jing Chen 💻 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 Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers. Vettery 📰 News Release Notes for Safari Technology Preview 83 — Several changes to the web inspector, plus multiple rendering fixes, and CSS implementations. Jon Davis (WebKit) Firefox Dev Tools Can Now Show Why a CSS Property is Having No Effect — This handy new feature provides a brief explainer as to why a CSS property isn’t functioning. Nicolas Chevobbe on Twitter Mozilla's Firefox Starts Blocking Third-Party Cookies by Default Emil Protalinski Firefox Reality VR Browser Is Coming to Oculus Quest Headset Janko Roettgers 📘 Tutorials & Opinion Building The Most Inaccessible Site Possible with A Perfect Lighthouse Score — Yikes. This experiment attempts to prove that automatic accessibility testing is only really a first step and that manual testing is vital. Manuel Matuzovic Movin' Modals Along a Path — Rather than just having your modal dialogs or alerts appear out of nowhere, how about having them fly in from outside the viewport? Here’s how. Chris Coyier Self-Host Your Static Assets — Outlines the disadvantages of hosting your static assets ‘off-site’, and the “overwhelming benefits” of hosting them on your own origin. Harry Roberts Free Guide: The Evolution of JavaScript Tooling — Learn the pros and cons of some of the most popular JavaScript frameworks and libraries, including Angular, React and Vue. SENCHA sponsor Cake or Death: AMP and The Worrying Power Dynamics of The Web — A cautionary viewpoint on Google’s AMP and how such ‘syndication’ results in “valuing content that is fast over content that is right”. Andrew Betts Patterns for Promoting PWA Installation on Mobile — How to promote the installation of Progressive Web Apps and best practices to follow. Google Developers Extract Critical CSS — How to extract and inline critical CSS to improve the perceived rendering performance of your pages. Milica Mihajlija ▶  The Future of Web Animation — “in terms of animation on the web, we’re just getting started” Sarah Drasner Prevent Page Scrolling When a Modal is Open Brad Wu 💡 Quick Tutorial of the Week supported by How React Hooks Can Help Make Your Code More Reusable Exclusively for Frontend Focus readers, Eric Bishard has put together a brief tutorial on the basics of React hooks and how creating your own custom hooks can help when it comes to code reusability and working with other developers. This week's tutorial is sponsored by KendoReact. Learn how to quickly build a sleek-looking dashboard following Eric Bishard’s step-by-step instructions in “Let's Build a Sales Dashboard with React” (+ source code). 🔧 Code, Tools & Resources Puppeteer Recorder: A Chrome Extension That Creates Puppeteer Scripts — Hit record, do things in your browser, and this extension generates JavaScript code you can then run that uses Puppeteer to reproduce the actions headlessly. Checkly Studio 3T Makes SQL Migration to MongoDB, Powerfully Simple Studio 3T sponsor Scene.js: A JavaScript & CSS Timeline-Based Animation Library — Plenty of fluid examples on the site. Daybrush IP Geolocation API with Country Information — A free real-time IP to Geolocation JSON API with detailed countries data integration. Madis Väin Apple's 'SF Symbols' — A Collection of User Interface Glyphs — Includes a variable fonts component for handling weight adjustments. Apple    🗓 Upcoming Events 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. An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience. Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

by via Frontend Focus