October 10, 2018 #361 — October 10, 2018Read on the WebFrontend Focus Start Performance Budgeting — A review of performance budgeting, the metrics to track, trade-offs to consider, plus budget examples. “For success, embrace performance budgets and learn to live within them..”Addy OsmaniCustom Elements Now ‘In Development’ on Microsoft Edge — Not a lot to see here, but Edge is the last major browser to get on board with custom elements. Shadow DOM is being worked on, too.Microsoft ?? New Course: Complete Intro to React, v4 — Learn to build real-world applications in React. Much more than an intro, you’ll start from the ground up all the way to using the latest features in React 16+ like Context and Portals. We also launched a follow up course, Intermediate React.Frontend Masters sponsorUse Cases for Flexbox — A look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at, especially now that we have CSS Grid too?Rachel AndrewHow I Remember CSS Grid Properties — A method to remember the most common CSS Grid properties. “This will help you use CSS Grid without googling like a maniac.”Zell LiewFirefox to Support Google’s WebP Image Format — Now Apple’s Safari is the only major holdout, since Edge now supports it too. (Caution: CNet has annoying autoplaying ads.)CNetUnderstanding the Difference Between grid-template and grid-auto — It pays to understand the difference between implicit and explicit grids. grid-template properties adjust placement on an explicit grid, whereas grid-auto properties define an implicit grid’s properties.Ire Aderinokun? JobsSr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.Sticker MuleWork on Uber’s Open Source Design Language — We’re developing Base UI, a new React component library for web applications at Uber and beyond. Join our team.UberJoin Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.Hired? Articles & TutorialsHow to Use the Animation Inspector in Chrome Developer Tools — A rundown of which animation dev tools are available in Chrome, how to access them, and what they can do for you.Kezz BraceyHow One Invalid Pseudo Selector Can Equal an Entire Ignored Selector — Did you know that “if any part of a selector is invalid, it invalidates the whole selector”? Thankfully things are beginning to change.Chris CoyierCreate a Serverless Powered API in 10 MinutesCloudflare Workers sponsorMoving Backgrounds Around According to Mouse PositionChris CoyierAdaptive Serving using JavaScript and the Network Information API — Serve content based on the user’s effective network connection type.Addy OsmaniWriting a JavaScript Tweening Engine with Between.js — This developer decided to try their hand at writing their own tweening engine.Alexander BuzinThe Ultimate Guide to Proper Use of Animation in UXTaras SkytskyiLet a MongoDB Master Explain Users and RolesStudio 3T sponsorGetting Started with WordPress’s New Gutenberg Editor By Creating Your Own ‘Block’ — Gutenberg is a new content editor coming to WordPress 5.0.Muhammad Muhsin? Chrome 70: What’s New in DevToolsKayce Basques (Google)CSS Floated Labels with :placeholder-shown Pseudo ClassNick SalloumBad Practices on Birthdate Form FieldsAnthony Tseng? Code and ToolsCSS Stats: A Web Tool to Visualize and Show Stats on the CSS Sites UseMorse, Jackson and OtanderAutomated Visual UI Testing — Replace time-consuming manual QA and catch visual UI bugs before your users do. Get started with our free 14-day trial.Percy sponsorHover.css: A Collection of CSS3 Powered Hover Effects — For use on all sorts of page elements like links, logos, buttons, and more. Demos here.Ian Lunna11y-dialog: A Very Lightweight and Flexible Accessible Modal DialogEdenspiekermannBaffle: A Library for Obfuscating then Revealing TextCam WiegertWorkerDOM: The DOM API, But For Inside Web Workers — Still a work-in-progress.AMP Project Source link