How new features get added to Chrome and Blink

#418 — November 20, 2019 Read on the Web Frontend Focus What Newspapers Can Teach Us About Web Design — From the Gutenberg Principle to grid systems to above the fold, newspapers teach us much about the foundations of web design. Frederick O’Brien digs into what can be learned from the printed press. Smashing Magazine Intent to Explain: Demystifying the Blink Shipping Process — How do features get added to Chrome? What process goes on behind the scenes to bring the latest Web features to Chromium, Blink, et al.? Here’s an overview of the process, and if you prefer a talk/video version, there’s one of those too. Google Node.js Learning Path: Build Web APIs and Apps — Join both Scott Moss and Jem Young on this learning path to discover how to deploy Node-powered apps and design and build APIs in Node from the ground up. Frontend Masters sponsor GSAP 'GreenSock' 3 Available Now — This popular ‘swiss army knife’ of a JavaScript animation library just saw its version 3.0 release. It’s a significant upgrade with over fifty new features and changes, including a simplified API, a new motion paths plugin, ES6 module support, and more. You can see the the full release notes here, or if you’d rather here’s a video of the highlights. GreenSock ▶  Interactive Web Animation with SVG — A whistle-stop tour of delightful SVG animations and how this graphics format “provides a link from the world of design to the world of development”. Cassie Evans Firefox’s Fight for The Future of The Web — “Ultimately, Firefox’s future is as much down to the decisions of a few regulators as it is about anything Mozilla can do”. Alex Hern (The Guardian) Chrome, Edge, Safari Hacked At Chinese Hacking Contest — White-hat hackers gathered in Chengdu to test zero-days against today’s top browsers. Catalin Cimpanu 💻 Jobs Senior Software Engineer at Getty (Los Angeles, CA) — Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js. J. Paul Getty Trust Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers. Vettery 📙 News, Tutorials & Opinion Cropping Images to a Specific Aspect Ratio with JavaScript — How to use the HTML canvas API and some basic math to build a tiny crop helper function, making it easy to quickly crop images in various aspect ratios. Rik Schennink ▶  Become An HTML Email Geek With These Videos From Rémi Parmentier — Genuinely useful guides to designing HTML emails and working with the quirks of targeting email clients (truly a minefield compared to normal browsers). Rachel Andrew Tried & True Tips from 25 React Experts to Make You More Productive — Check out the top productivity tips of 25 React experts, from smart ways to get started with React to advanced hacks. Progress KendoReact sponsor ▶  HTTP Headers for the Responsible Developer — Explores how HTTP headers have a direct impact on user experience. Related slides here. Stefan Judis How Do You Remove Unused CSS From a Site — Chris Coyier shares some skepticism at those unused CSS tools that promise to take care of everything, highlighting their issues and suggesting an alternative practice. CSS Tricks ▶  You Are Doing :focus Wrong (And I Was Too) — A good primer on focus states and how using them can make lives easier for those navigating your pages via the keyboard. P.S: Never turn :focus off. Kevin Powell A List of All the Tools Used to Create a Hit HTML5 Game on Steam — They sold over 200k units so they clearly got something right. Maschinen-Mensch ▶  Learn More About Accessibility in Web Standards. Listen Now Heroku sponsorpodcast Real Web Development on iPad — Outlines how to get setup for full-stack development on the iPad, including a look at how iOS automation can help. Lachlan Campbell Pac-Man...in CSS — A fun little tutorial recreating a “happy, eating Pac-Man” using the clip-path property. Waka waka! Maks Akymenko Comparing the Different Types of Native JavaScript Popups Elliot Goldman 🔧 Code, Tools & Resources siriwave: The Apple Siri Wave-Form Replicated in A JS Library — This isn’t a particularly new project, but was recently updated and as such landed on our radar. It’s a neat recreation of the Siri ‘look’ made with JavaScript. There’s a detailed blog post outlining how the effect was achieved, and a demo where you can see it in action. Flavio Maria De Stefano ScrollTrigger: Let Your Page React to Scroll Changes — Triggers classes based on the current scroll position. So, for example, when an element enters the viewport you can fade it in. Erik Terwan bootlint: HTML Linter for Bootstrap Projects — Despite only just reaching version 1.0, this is a popular and mature linting tool that checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly “vanilla” way. Bootstrap Flynt: A Component Based WordPress Starter Theme for Developers — It’s open source but with a commercial variant. Bleech    🗓 Upcoming Events Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ experts with over 500 experienced frontend pros from all over the world. dotCSS, December 4 — Paris, France — The largest CSS conference in Europe. Flashback Conference, February 10-11 — Orlando, Florida — Looks at cutting-edge web dev, browser APIs and tooling, but adds the understanding of how they’ve evolved from the past to the web of today. Frontend Developer Love, February 19-21 — Amsterdam, Netherlands — Three full days of talks from 35+ global JavaScript leaders from around the world.

by via Frontend Focus