10 years of Chrome, Firefox 62 ships and a look at CSS Shapes

#356 — September 5, 2018 Read on the Web Frontend Focus Chrome Turns 10 Years Old as Chrome 69 Released — There’s a higher level celebration of the ten anniversary here, but what’s new for Web developers? CSS Scroll Snap, display cutouts, and the Web Locks API for starters. Google Take a New Look at 'CSS Shapes' — Firefox 62 (out today) joins Chrome and Safari in supporting CSS Shapes, a way to define shapes within CSS for content to flow around. See how they work here, along with the new tools in Firefox to make editing such shapes easier. Rachel Andrew New Course: 👩‍💻 Intro to Data Structures for Interviews — Bianca teaches you how to pass technical interviews by learning the data structures you need to store and retrieve data more efficiently. Frontend Masters sponsor The Web Design Museum: The First Decade of Web Design — Web Design Museum exhibits over 900 unique designs from the years 1995 to 2005. Discover forgotten trends in web design. Web Design Museum The Complete CSS Demo for OpenType Features — A lengthy single page demo of many font-feature-settings settings upon a variety of fonts. If you’re using the right fonts to support these settings you can get a lot more control over how your text looks. Tunghsiao Liu What's New in Chrome 70's DevTools — The latest dev channel release of Chrome has several DevTools improvements including being able to create ‘live expressions’ (real-time monitoring, essentially) and the highlighting of DOM elements while still typing an expression. Google Developers Conversational Semantics with HTML and ARIA — With voice and other ‘headless’ interfaces becoming more commonplace, semantic markup is more important than ever. Learn how to leverage HTML and ARIA to improve experiences. Aaron Gustafson Firefox 62 Ships Today; Here's What's New for Developers Mozilla 💻 Jobs Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. x-team React & Redux Frontend Engineer (New York, Paris, Remote) — We transform complex datasets into beautiful visualizations and implement innovative browser-app UIs. Apply to join us here. Datadog Find A FrontEnd Job Through Vettery — Create a profile to connect with inspiring companies seeking FrontEnd devs. Vettery 📘 Tutorials & Opinion How Do You Mark Up An Accordion? — Here are your options for possible markup approaches plus some useful resources. Sara Soueidan A Tour of Defining Colors in CSS — Whether though predefined values, currentColor, hex values, and more. Adam Laki ▶  CSS Grid in 45 Minutes — Associated slidedeck here. Wes Bos How to Do Functional Programming with JavaScript? — A handy cheat sheet used by JavaScript developers interested in writing functional style code. Check it out. Progress Kendo UI sponsor How to Use Media Queries from JavaScript — The matchMedia method is the key. Craig Buckler How to Use Gulp.js to Automate Your CSS Tasks — Such as optimizing images, compiling Sass files, and handling and inlining assets. Craig Buckler 13 Speakers on Design, UX and Code. Two Amazing Days. Get 100 USD Off SMASHINGCONF NYC sponsor Making Calls from a Browser with Vue.js & Nexmo In-App Voice Phil Leggetter How Many Sites Are Still Using AppCache? — Too many, given it’s been deprecated, removed from the web standards, and support is rapidly disappearing. HTTP Archive What Makes a Good Front-End Developer? Zell Liew 🔧 Code and Tools MailMason: A Complete Toolset for Building Email Templates — Uses other common frontend tooling to streamline the generation of both HTML and plain text emails. Postmark Making a Progressive Web App with Webpack Just Got Easier — webpack-web-app-manifest-plugins generates a PWA manifest and integrates with the assets JSON. Tumblr Create a Serverless Powered API in 10 Minutes Cloudflare sponsor Svgurt: An Image to SVG Transformation Tool — A tracing tool, of sorts, that has a style of its own. Play with the live demo. Rhys Howell Is 'Houdini' Ready Yet? — A regularly updated rundown of browser support for various Houdini APIs. (Houdini is a collection of proposed and under-development CSS engine manipulation specs.) Surma Siema: Simple, Lightweight Carousel with No Dependencies Pawel Grzybek

by via Frontend Focus