Frontend  Focus

#482 — March 17, 2021 | Read on the web

Ghost 4.0 — 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 — 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

The Definitive Guide to Feature Management — 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 — 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 — 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

? Tutorials, Articles & Opinion

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 — How to use CSS logical properties to build multi-directional web layouts.

Ahmad Shadeed

Build an Interactive Messaging App with Stream, MML, Node, & React — Learn how to embed dynamic components like button lists, date pickers, and custom forms directly into your messaging UI.

Stream sponsor

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 — 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 — 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

Maria Antonietta Perna

Create Dynamic Spinners Using Only CSS

Tapajyoti Bose

‘Why I Don’t Like Tailwind CSS’

Aleksandr Hovhannisyan opinion

? Jobs

Remote Full-Stack Software Developer Opportunity — 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) — 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 — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.

Hired

? Code, Tools and Resources

Charts.css: A CSS Framework That Uses Utility Classes to Style HTML Elements As Charts — 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 — 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

Clubhouse.io sponsor

Tailwind Shades: A Tool to Generate Color Shades for Tailwind CSS — 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

Dither Me This: An Image Dithering Tool — 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 — A toolkit, still in early development, for building browser extensions with built-in support for module imports/exports, auto-reload, and more.

Cezar Augusto