--- title: "A beautiful primer on SVG paths" publication: "Frontend Focus" issue: 600 published_at: "2023-07-05" canonical_url: "https://frontendfoc.us/issues/600" --- Plus DevTools tips a-plenty, and how one developer's predictions for the Web from 2016 panned out. | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/hard-parts-ui-dev/?utm_source=email&utm_medium=frontendfocus&utm_content=hardpartsuidev) #​600 — July 5, 2023 | [Read on the web](https://frontendfoc.us/issues/600) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1688551421/sjqclyprpvbagmztilso.png)](https://www.nan.fyi/svg-paths) [A Deep Dive Into SVG Paths](https://www.nan.fyi/svg-paths) — This is a _very well presented_ interactive guide to understanding SVG paths and path commands, covering cursors, lines, bézier curves, and more. The inline comments are a neat feature offering extra context, and the creator is looking to release a more complete [Interactive SVG Animations course](https://www.svg-animations.how/) later this year. Nanda Syahrasyad 💡 In our _Code and Tools_ section (below) we also link to [SvgPathEditor](https://yqnn.github.io/svg-path-editor/), a handy minimal in-browser SVG path editor. [![\](https://copm.s3.amazonaws.com/7345ceda.png)](https://frontendmasters.com/courses/hard-parts-ui-dev/?utm_source=email&utm_medium=frontendfocus&utm_content=hardpartsuidev) [New Course: The Hard Parts of UI Development](https://frontendmasters.com/courses/hard-parts-ui-dev/?utm_source=email&utm_medium=frontendfocus&utm_content=hardpartsuidev) — Develop an under-the-hood knowledge of UI development by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch! Frontend Masters sponsor [Useful DevTools Tips and Tricks](https://www.smashingmagazine.com/2023/06/popular-devtools-tips/) — Having worked on the developer tools in both Firefox and Edge, Patrick knows his stuff (he's shared [over 100 tips on his tips site](https://devtoolstips.org/)). In this post, he shares his top 15, including disabling event listeners, copying element styles, visualising a page in 3D, and even changing the language of DevTools itself. Patrick Brosset (Microsoft) [In Defence of DOMContentLoaded](https://csswizardry.com/2023/07/in-defence-of-domcontentloaded/) — A solid explainer on measuring browser events and the use cases for [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) (and its related events) in particular. _"The DOMContentLoaded event fires once all of your deferred JavaScript has finished running."_ Harry Roberts **⚡️ IN BRIEF** - [Version 115 of Firefox is out now](https://www.mozilla.org/en-US/firefox/115.0/releasenotes/) adding hardware video decoding for Intel GPUs on Linux. - Rachel Andrew's is back with her [monthly round-up of what's new](https://web.dev/web-platform-06-2023/) on the web platform (in June 2023, in this case). - [Here are the release notes](https://webkit.org/blog/14378/release-notes-for-safari-technology-preview-173/) for Safari Technology Preview 173, which adds a new feature flags section, JPEG XL support, a new responsive design mode, and more. - In an effort to 'prevent fraud' the French government wants to inject [state-operated domain blocking lists](https://torrentfreak.com/french-govt-wants-to-inject-domain-blocking-lists-directly-into-web-browsers-230630/) directly into browsers. 🤔 - Ethernet is 50 years young. [Here's why it has endured](https://blog.apnic.net/2023/06/29/happy-50th-birthday-ethernet/) as the ubiquitous data framing protocol for half a century. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1688552901/cx7fyvtqthz9ko8ffdh6.png)](https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/) [What Does the `decoding` Attribute on Images Do?](https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/) — An in-depth look at what [the `decoding` attribute](https://html.spec.whatwg.org/multipage/images.html#img-decoding-process) sets out to do, the nuance behind it, how it _may_ have some performance gains in certain circumstances, and whether to consider it as part of your overall image rendering strategy. Barry Pollard [An Introduction to the View Transitions API](https://www.sitepoint.com/view-transitions-api-introduction/) — The [experimental View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) offers an easier way to animate between DOM states and even between page loads. Here’s a look at how to use this progressive enhancement. Craig Buckler [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now. Userfront sponsor ▶[State of the CSS Community](https://www.youtube.com/watch?v=dkBeBxs48os) — A talk from the recent CSS Day event in Amsterdam, highlighting the current excitement around CSS and the slew of new features that we’ve seen come to the web platform over the past few years. Una Kravets [First-Person Scrollers](https://meyerweb.com/eric/thoughts/2023/06/20/first-person-scrollers/) — There’s something of a parallel between videogames and browser engines when it comes to them both having to maintain a solid, smooth frame rate. Eric notes how the evolution of web technologies and fresh new ideas, has to be balanced with meeting performance and rendering considerations. (_I also just like the Halo-inspired UI here_.) Eric Meyer ▶[The Trick to Smoothly Animating Shadows in CSS](https://www.youtube.com/watch?v=J9XlFWlhrNw) — Animating a shadow can often be tricky as it’s heavy on performance, but it can be important for maintaining a realistic sense of depth. Kevin shares a solution in just five minutes. Kevin Powell ["I Made 7 Predictions for the Web for the Next 5 Years"](https://fagnerbrack.com/i-made-7-predictions-for-the-web-for-the-next-5-years-d750d93b1b5a) — A mixed bag of hits and misses here, but always fun to check in on some prior predictions. Fagner Brack [How to Use CSS `background-size` and `background-position`](https://www.sitepoint.com/how-to-use-css-background-size-and-background-position/) Ralph Mason [Creating SVG Animations with Tailwind CSS](https://semaphoreci.com/blog/svg-animations-tailwind-css) Mbaziira Ronald 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rkyr7lnxvy8v4d9kup9u.jpg)](https://yqnn.github.io/svg-path-editor/) [SvgPathEditor: Edit and Save SVG Path Data](https://yqnn.github.io/svg-path-editor/) — Lets you adjust all sorts of configuration and path settings while interactively adjusting the path via nodes in the browser. Could be handy for creating adhoc bits of SVG. Yann Armelin [Hurl 4.0.0: Powerful CLI HTTP Request Scripting](https://hurl.dev/blog/2023/06/30/announcing-hurl-4.0.0.html) — A powerful command line tool that runs HTTP requests written (scripted, really) in a plain text format. It can also be used to test HTTP responses and you can use variables to carry over elements of a response into a fresh request. It just hit version 4.0. Orange [Minimal CLS Font Adjustment: A Tool to Automatically Match the Fallback Font for Improving CLS](https://www.industrialempathy.com/perfect-ish-font-fallback/?font=Montserrat) — By now you’ve likely heard of 'cumulative layout shift' (a.k.a. CLS) and all its drawbacks. This tool aims to help you find matching fallback fonts to minimize the issue. It uses the `[size-adjust](https://caniuse.com/mdn-css_at-rules_font-face_size-adjust)` CSS descriptor for the @font-face at rule. _(Note: Not supported in Safari yet.)_ Malte Ubl [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1688551544/umejmdpsdvjtubymg2qf.png)](https://automize.dev/) [Automize: The Missing Chrome DevTools Element Selector](https://automize.dev/) — Claims to offer a ‘more intuitive’ GUI inside your devtools to make it easier to target deeply-nested elements, and works with test frameworks like Puppeteer, Playwright, Cypress, and Selenium. Automize [Zero-Runtime CSS with Vanilla Extract](https://www.telerik.com/blogs/zero-runtime-css-vanilla-extract) — [Vanilla Extract](https://github.com/vanilla-extract-css/vanilla-extract) is an alternative to CSS-in-JS (if that's your bag) that allows writing zero-runtime CSS in TypeScript. _"Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more."_ Leonardo Maldonado [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1688553783/iiiarqr5edyrfvvvlwwk.png)](https://codepen.io/amit_sheen/pen/bGQgGOx) [Creating a Ferris Wheel with Just CSS](https://codepen.io/amit_sheen/pen/bGQgGOx) — Fancy a trip to the fair without even having to stand up? This is a neat, animated demo made using only CSS. _(Take care: it seems quite resource intensive.)_ Amit Sheen codepen 🧑‍💻 JOBS [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/600/*|UID|*?ipx=t)