--- title: "Ghost 4.0 arrives" publication: "Frontend Focus" issue: 482 published_at: "2021-03-17" canonical_url: "https://frontendfoc.us/issues/482" --- ...plus Microsoft is testing Edge for Xbox. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #482 — March 17, 2021 | [Read on the web](https://frontendfoc.us/issues/482) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1615991835/fvpvnwnkccs8agdnz4bd.png)](https://ghost.org/changelog/4/) [Ghost 4.0](https://ghost.org/changelog/4/) — This popular open-source publishing tool / CMS just hit a major new point release, adding a new dashboard, membership features, integration tweaks, and neat frontend changes such as responsive, lazy-loading images everywhere, and notable performance gains. Ghost [Just-In-Time: The Next Generation of Tailwind CSS](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) — As good as Tailwind CSS is, one downfall can be the complexity of the resulting CSS for build tools and browsers. No fear.. Tailwind is getting a _just in time compiler_ to compile your CSS on demand as you author things. The result? Faster build times and better browser performance in development. Adam Wathan [![\](https://copm.s3.amazonaws.com/195bc6eb.jpg)](https://launchdarkly.com/the-definitive-guide-to-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress) [The Definitive Guide to Feature Management](https://launchdarkly.com/the-definitive-guide-to-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress) — Feature management is a new class of software development tools & techniques powered by feature flags. A feature management platform like LaunchDarkly fills the gaps of conventional feature toggles. Ship fast. Rest Easy. LaunchDarkly. LaunchDarkly sponsor [The Power of Composition with CSS Variables](https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables) — How leveraging CSS variable composition and HSLA colors helped this engineer build a more efficient way to theme apps and rely less on CSS-in-JS. Maxime Heckel [CSS Generators: Useful Tools and Techniques](https://www.smashingmagazine.com/2021/03/css-generators/) — Here’s a few handy tools for your frontend toolbelt which will help you generate things like gradients, drop-shadows, bezier curves, type scales and more. Iris Lješnjanin **⚡️ Quick bits:** - Microsoft is [testing its Edge Chromium browser on Xbox consoles](https://www.theverge.com/2021/3/7/22318050/microsoft-edge-xbox-chromium-browser-testing). - [This neat roadmap](https://frontendmasters.com/guides/learning-roadmap/) outlines the fundamentals of a frontend dev learning journey, and links to more info / resources along the way. - Here's [what's new](https://blog.chromium.org/2021/03/chrome-90-beta-av1-encoder-for-webrtc.html) in the Chrome 90 beta. - An [interview with 'father of the web'](https://www.theguardian.com/lifeandstyle/2021/mar/15/tim-berners-lee-we-need-social-networks-where-bad-things-happen-less) Tim Berners-Lee is always going to be worth a read. - Involved in HTML5 game development? [This survey](https://gamedevjs.com/survey/) (closing tomorrow) wants to hear from you. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1615987318/ovnlhw54jbc9p7vdqalp.png)](https://css-tricks.com/creating-patterns-with-svg-filters/) [Creating Patterns with SVG Filters](https://css-tricks.com/creating-patterns-with-svg-filters/) — A look at the how you can create neat effects by layering SVG filters with `` and random patterns, with advice on how to use the end results in production. Bence Szabó [Digging Into CSS Logical Properties](https://ishadeed.com/article/css-logical-properties/) — How to use CSS logical properties to build multi-directional web layouts. Ahmad Shadeed [Build an Interactive Messaging App with Stream, MML, Node, & React](https://getstream.io/blog/build-an-interactive-messaging-app-with-stream-mml-node-and-react/?utm_medium=promoted&utm_source=frontend_focus) — Learn how to embed dynamic components like button lists, date pickers, and custom forms directly into your messaging UI. Stream sponsor [CSS Auditing Tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/) — A quick look at some tools to help you dive into your CSS, spot duplications, and generally clean things up. Iris Lješnjanin [Too Many SVGs Clogging Up Your Markup? Try `use`](https://css-tricks.com/too-many-svgs-clogging-up-your-markup-try-use/) — Using SVG graphs with lots of ``, ``, and `` elements resulted in a bloated DOM, here’s how Georgi Nikoloff slimmed things down with the `` element. CSS-Tricks [Creating a 'Table of Contents' Sidebar with IntersectionObserver](https://css-tricks.com/table-of-contents-with-intersectionobserver/) — I love when long pages (particularly docs) use this sort of mechanism for navigation. Ben Frain and Chris Coyier [Canvas vs SVG: Choosing the Right Tool for the Job](https://www.sitepoint.com/canvas-vs-svg/?omhide=true) Maria Antonietta Perna [Create Dynamic Spinners Using Only CSS](https://dev.to/ruppysuppy/create-dynamic-spinners-only-using-css-34dh) Tapajyoti Bose ['Why I Don't Like Tailwind CSS'](https://www.aleksandrhovhannisyan.com/blog/why-i-dont-like-tailwind-css/) Aleksandr Hovhannisyan opinion 💻 **Jobs** [Remote Full-Stack Software Developer Opportunity](https://fl.vu/FrontEndFocus) — Write Code that Matters. Faithlife is looking for Full-stack Software Developers who can help us build awesome web software. Join us as we make revolutionary technology for administration and discipleship for churches all over the world. Faithlife [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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=5-minutes) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1615985925/o9rdadi5eajisarrebjc.png)](https://chartscss.org/) [Charts.css: A CSS Framework That Uses Utility Classes to Style HTML Elements As Charts](https://chartscss.org/) — This is pretty impressive, and claims to be accessible too. You can build pretty much any type of chart or graph and it includes some 3D effects and animations. Charts.css [transition.css: Drop-in CSS Transitions](https://transition.style/) — This is yet another option for a drop-in CSS library that only requires HTML attributes. The site itself is interactive and lets you test and customize each of the transitions. Adam Argyle [Fast, Cheerful, Collaborative Project Management](https://clubhouse.io/?utm_source=cooperFRONTEND&utm_medium=spon_nl) Clubhouse.io sponsor [Tailwind Shades: A Tool to Generate Color Shades for Tailwind CSS](https://www.tailwindshades.com/) — Enter a base color, then tweak the values it generates, which you can then drop into a project as part of a custom theme or similar. Leonidas Stratigakis [![\](https://res.cloudinary.com/cpress/image/upload/v1615986007/gwymxvthucpc6yb49yto.png)](https://doodad.dev/dither-me-this/) [Dither Me This: An Image Dithering Tool](https://doodad.dev/dither-me-this/) — Includes a before/after simultaneous diff preview. You can select from various presets or use custom dithering settings to give any image an old-school feel. doodad [extension-create: Create Modern Browser Extensions with No Build Configuration](https://github.com/cezaraugusto/extension-create) — A toolkit, still in early development, for building browser extensions with built-in support for module imports/exports, auto-reload, and more. Cezar Augusto 📬 **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://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)