What's new in the Chrome 69 beta (lots)

#352 — August 8, 2018 Read on the Web Frontend Focus What Happens When You Create a Flexbox Flex Container? — Rachel Andrew unpacks how flexbox works in detail, starting with a look at what actually happens when you add display: flex to your stylesheet. Smashing Magazine Well-Controlled Scrolling with CSS Scroll Snap — An introduction to CSS ‘Scroll Snap’ features (API shipping in Chrome 69) which allow developers to create well-controlled scroll experiences by declaring scroll snapping positions for things like carousels and paginated articles. Robert Flack and Majid Valipour The Future of JavaScript: 2018 and Beyond — What is the state of the JavaScript ecosystem? This whitepaper offers our future-looking analysis and predictions about the latest in JavaScript. We also look back at all the craziness from 2017 and neatly tie it together with a bow. Download now. Progress Kendo UI sponsor Creating a Sticky, Smooth, Active Navigation Bar — Walks through the creation of an elegant sidebar for single page navigation that automatically updates the current item based on scroll position. Chris Coyier Chrome 69 Now in Beta: What's New? (Tons.) — Chrome 69 introduces a lot of new features of interest to developers, from several new CSS features (including conic gradients, new margin and padding properties, plus display cutouts), as well as OffscreenCanvas, the Keyboard Map API, the Web Locks API, and, yes, even more. Google CSS Grid Level 2 Updated: Subgrid Specification Completed — The CSS Working Group has published an updated Working Draft of CSS Grid Layout Level 2 that contains the much awaited ‘subgrid’ feature. W3C js13kGames: The HTML5 and JS Game Development Competition Is Back — Always a fun contest with some interesting results. You’re limited to 13KB for all code and assets. It runs August 13-September 13. Andrzej Mazur The Cost of JavaScript in 2018 — A detailed write-up of thoughts and findings on how much effect JavaScript has on page sizes and performance and some ways to improve matters. Addy Osmani Blink Intent to Ship: Support for WebSockets Over HTTP/2 — Currently if a WebSocket is requested from an HTTP server, a new HTTP/1.1 connection must be established even if there is an active HTTP/2 connection. Work is being done to change this. blink-dev Your Site's Body Text is Too Small — Why website body text should be bigger, and ways to optimize it. Christian Miller 💻 Jobs Front-end Designer With Strong UI/UX Focus — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote. Helical Levity Find A FrontEnd Job Through Vettery — Create a profile to connect with 4,000+ companies seeking top tech talent. Vettery 📘 Tutorials How to Build a Location-Aware Form with Google Maps and Materialize Eugene Ambass Getting Started with Material Design Components for the Web — MDC Web is the successor to Material Design Lite. Mustafa Kurtuldu (Google) A Primer on Front-End Automation — Walmart does a lot of automated front-end testing and this post introduces us to their tooling and approach. Nidhi Sadanand How to Reduce Page Load Speed and Latency with a CDN — CDNs offload bandwidth, reduce load times, improve performance, and lower infrastructure costs. Learn more. DigitalOcean sponsor Over 100 Curated Resources for Learning CSS — Lots of good links here, many of which we’ve linked before. Kevin Ball Create Interactive Gradient Animations Using Granim.js Monty Shokeen Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18 twilio sponsor The Complete Illustrated Flexbox Tutorial Greg Sidelnikov 🔧 Code and Tools Isometric iPhones — A buttery-smooth animation featuring an endless stream of CSS-created phones. Jon Kantner demo CSS Filter Playground — This playground environment lets you play and learn about 10 CSS filters including sepia() and blur(). Dat Nguyen Web Typography Resources for Designers and Developers — A well curated list of web typography related apps, tools, plugins and other resources. Matej Latin Developer Tools for Every Customer Session – New in FullStory Fullstory sponsor Mavo: A New, Approachable Way to Create Web Applications — Create apps by just writing HTML and CSS without any JavaScript at all. Being built at MIT CSAIL by a team led by Lea Verou. Haystack Group MIT CSAIL A Slide Out 'Irregular Grid' Box Menu — Another neat UI concept from Codrops — this time it’s an expanding grid of items that reveal from the top right corner. Demo here. Mary Lou Teutonic CSS: A Versatile, Modern 12KB CSS Framework Frank Lämmer

by via Frontend Focus