--- title: "10 years of Chrome, Firefox 62 ships and a look at CSS Shapes" publication: "Frontend Focus" issue: 356 published_at: "2018-09-05" canonical_url: "https://frontendfoc.us/issues/356" --- This Week's HTML5, CSS, Browser, and Frontend News #356 — September 5, 2018 [Read on the Web](https://frontendfoc.us/issues/356) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ibqmso3oshfpvzaguq2m.jpg)](https://developers.google.com/web/updates/2018/09/nic69) [Chrome Turns 10 Years Old as Chrome 69 Released](https://developers.google.com/web/updates/2018/09/nic69) — There’s a [higher level celebration](https://www.blog.google/products/chrome/chromes-turning-10-heres-whats-new/) of the ten anniversary [here](https://www.blog.google/products/chrome/chromes-turning-10-heres-whats-new/), 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'](https://www.smashingmagazine.com/2018/09/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 [![\](https://copm.s3.amazonaws.com/7b68e0ff.jpg)](https://frontendmasters.com/courses/data-structures-interviews/) [New Course: 👩‍💻 Intro to Data Structures for Interviews](https://frontendmasters.com/courses/data-structures-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](https://www.webdesignmuseum.org/) — 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](https://sparanoid.com/lab/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/sji1dszjncejv48gyi3q.jpg)](https://developers.google.com/web/updates/2018/08/devtools) [What's New in Chrome 70's DevTools](https://developers.google.com/web/updates/2018/08/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](https://alistapart.com/article/conversational-semantics) — 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](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/62) Mozilla 💻 Jobs [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend). x-team [React & Redux Frontend Engineer (New York, Paris, Remote)](https://grnh.se/01e63ace1) — We transform complex datasets into beautiful visualizations and implement innovative browser-app UIs. Apply to join us [here](https://grnh.se/01e63ace1). Datadog [Find A FrontEnd Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Create a profile to connect with inspiring companies seeking FrontEnd devs. Vettery 📘 Tutorials & Opinion [How Do You Mark Up An Accordion?](https://www.sarasoueidan.com/blog/accordion-markup/) — Here are your options for possible markup approaches plus some useful resources. Sara Soueidan [A Tour of Defining Colors in CSS](https://pineco.de/defining-colors-in-css/) — Whether though predefined values, `currentColor`, hex values, and more. Adam Laki ▶[CSS Grid in 45 Minutes](https://www.youtube.com/watch?v=DCZdCKjnBCs) — [Associated slidedeck here](https://wesbos.github.io/css-grid-talk/#1). Wes Bos [How to Do Functional Programming with JavaScript?](https://www.telerik.com/campaigns/kendo-ui/wp-functional-programming-with-js-cheat-sheet?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-funcwithjs&utm_content=sponsoredlink) — A handy cheat sheet used by JavaScript developers interested in writing functional style code. [Check it out](https://www.telerik.com/campaigns/kendo-ui/wp-functional-programming-with-js-cheat-sheet?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-funcwithjs&utm_content=sponsoredlink). Progress Kendo UI sponsor [How to Use Media Queries from JavaScript](https://www.sitepoint.com/javascript-media-queries/) — The `matchMedia` method is the key. Craig Buckler [How to Use Gulp.js to Automate Your CSS Tasks](https://www.sitepoint.com/automate-css-tasks-gulp/) — 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](http://smashed.by/frontendfocustickets) SMASHINGCONF NYC sponsor [Making Calls from a Browser with Vue.js & Nexmo In-App Voice](https://www.nexmo.com/blog/2018/08/21/phone-call-web-browser-nexmo-in-app-voice-vue-js-dr/) Phil Leggetter [How Many Sites Are Still Using AppCache?](https://discuss.httparchive.org/t/how-many-sites-are-still-using-appcache/1443) — 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?](https://zellwk.com/blog/good-frontend-developer/) Zell Liew 🔧 Code and Tools [MailMason: A Complete Toolset for Building Email Templates](https://postmarkapp.com/mailmason) — 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](https://javascript.tumblr.com/post/177492037092/making-a-progressive-web-app-with-webpack-just-got) — [webpack-web-app-manifest-plugins](https://github.com/tumblr/webpack-web-app-manifest-plugin) generates a PWA manifest and integrates with the assets JSON. Tumblr [Create a Serverless Powered API in 10 Minutes](https://www.cloudflare.com/lp/workers/serverless-powered-api/?utm_source=Workers&utm_medium=Display&utm_campaign=Cooperpress_Serverless_API_LP) Cloudflare sponsor [Svgurt: An Image to SVG Transformation Tool](https://svgurt.com/#/) — A tracing tool, of sorts, that has a style of its own. [Play with the live demo.](https://svgurt.com/#/demo) Rhys Howell [Is 'Houdini' Ready Yet?](https://ishoudinireadyyet.com/) — A regularly updated rundown of browser support for various Houdini APIs. ([Houdini](https://developers.google.com/web/updates/2016/05/houdini) is a collection of proposed and under-development CSS engine manipulation specs.) Surma [Siema: Simple, Lightweight Carousel with No Dependencies](https://pawelgrzybek.github.io/siema/) Pawel Grzybek A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom