Microsoft brings the DevTools into VS Code

#461 — October 7, 2020 Web Version  🚀  Frontend Focus Full-Bleed Layout Using CSS Grid — Every era of Web design has its equivalent of the ‘holy grail layout’ and Josh looks at a modern readable and responsive way to lay out content while still offering full edge-to-edge for images, break out boxes, etc. This then provoked an equally useful response post about getting the same effect with simpler CSS. Josh W Comeau Bringing the Browser DevTools to VS Code — Microsoft has released a Edge Tools for VS Code extension which takes the usual DevTools directly into the popular editor (including the Network pane). Chris Heilmann (Microsoft) Monitor Frontend Performance With User-Centric Metrics — Page load time isn't enough to guarantee you're providing a solid user experience; your users care about perceived performance. Learn to track interactivity metrics like `firstInteraction` so you can build for impact. Your users will thank you. New Relic sponsor Why Tailwind CSS? — “Why I changed my mind on Tailwind CSS, and why I now consider it the Goldilocks Styling Solution” Shawn 'swyx' Wang A Complete Guide to CSS Media Queries — We’ve all used them – if you want certain CSS rules to apply when certain conditions about the client’s environment are met, you turn to media queries. This is one of those useful roundups you’d turn to when you forget the syntax yet again (or, at least, I do!) Andres Galante ⚡️ Quick bits: Here's what's new in Chrome 87's DevTools. Google seems to be rebranding all sorts lately (such as G Suite is now called Google Workplace) and Custom Search Engine is now Programmable Search Engine, if you want to add Google powered search to your site. Microsoft has rebranded Bing to Microsoft Bing too. Facebook is suing the creators of two Chrome extensions for scraping data. So, yeah, don't do that. Chrome 87 is bringing camera pan, tilt and zoom controls to the Web via a JavaScript API. 💻 Jobs Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here. 📙 Tutorials, Articles & Opinion An Honest Review of Gatsby — Gatsby is a popular React-based framework commonly associated with (but not limited to!) building static sites. Sentry have been using it for their documentation and here’s the tale of how that’s gone.. (spoiler: it’s not exactly all sunshine and roses) David Cramer Handling Range Requests in a Service Worker — Make sure your service worker knows what to do when a partial response is requested. Jeff Posnick How to Build for Modern Browsers (With Legacy Browser Support) Shopify Partners sponsor Bidirectional Scrolling: What’s Not to Like? — Bidirectional scrolling on sites like Netflix and Disney+ organize programs into rows of categories. This pattern seems great on the face of it but still over-complicates matters. Find out why here. Adam Silver The Failed Promise of Web Components — A response to Lea Verou’s article that we shared last week. The author proclaims that Web Components “are basically just failed solutions to the wrong problems”. Carl M. Johnson Does Web Performance Matter? It Depends. — A look at the Lighthouse scores for a variety of ‘big’ successful sites and some thoughts on whether hitting the hallowed 100 score is the be all and end all. Aleksandr Hovhannisyan Flexbox Froggy: A Game for Learning CSS Flexbox — We first linked this five years ago but this is still a neat introduction to flexible box layout which is now, at least, supported by basically every visual browser going. Codepip 🔧 Code, Tools and Resources 13 Beautiful CSS 3D Transform Perspective Examples — The folks behind the Polypane responsive development browser share 13 different single div-based 3D transformation examples, complete with copyable code. Polypane Test Website Security with Snyk’s Newest WebPageTest Integration — Run a website scan to check for vulnerable JavaScript libraries and missing HTTP security headers. Snyk sponsor SVGOMG: An SVGO-Powered Online SVG Optimization Tool — Got SVG images you want to optimize? You could download SVGO or.. you could use this online version for a more interactive experience. Jake Archibald Parsel: A Tiny, Permissive CSS Selector Parser — This is an ES module with a simple API that lets you parse and traverse CSS selectors, calculating specificity. Supports the full Selectors 4 syntax and no dependencies. Lea Verou Integrate Draw.io into VS Code — This unofficial extension integrates a popular online diagramming tool now called ‘Diagrams.net’ into VS Code. Henning Dieterichs Good Web Design: A Catalog of Landing Pages — A curated directory of product and service-oriented landing pages and elements that you can filter in various ways for inspiration. Charlie and Yitong

by via Frontend Focus