Web Tools #486 - Future CSS, Frameworks, Media, React

Advertisement

Sacha Greif has been a vocal and important member of the front-end development community for a number of years now. He's probably best known for his State of CSS and State of JavaScript surveys that always get tons of interest.

Sacha recently wrote a couple of articles on the current state of CSS and where CSS might be headed that I thought you'd like to check out if you haven't done so already.

First, over at Smashing Magazine, he wrote Futuristic CSS. My first reaction was that this must be a look at what's in store for the CSS spec in the comings months, maybe some new features that will start dropping in browsers. But not quite!

This is actually a look at new CSS features that are a long way off yet, but most of which are being actively discussed. Examples include:

• CSS Toggles
• CSS Switch Function
• Intrinsic Typography
• Sibling Functions
• CSS Patterns
• Native Charts

Some cool potential functionality that I definitely think crosses over into areas of "why do this with CSS?", something that has been debated with other features in the past.

The other piece that Sacha wrote was over at CSS-Tricks, called Is There Too Much CSS Now? This one certainly hits home with me. My CSS history is probably about on par with Sacha's so I get where he's coming from.

Even though we have so much now, it's not easy to put all the new stuff to good use, so it feels very superfluous.

I especially can relate to this paragraph:

"The result of all this is that we are now faced with an embarrassment of CSS riches, and it can be hard to catch up. CSS Grid started being supported in major browsers almost five years ago, yet I still check a reference every time I use it. And as cool as subgrid seems, I’ve yet to even try it out."

For me, this applies to a lot of new CSS stuff, even features that have been around longer than Grid, like Flexbox.

The CSS-Tricks article summarizes a lot of people's feelings on the subject via Twitter, so there's quite a bit to mull over from the different viewpoints.

Trying to use new CSS can be tricky too. I found myself recently removing some modern CSS in a new project because Safari on iOS wasn't behaving! Not an ideal way to take advantage of modern CSS. I mean, I even spent a few brief minutes trying to find an iOS-only hack! Ugh.... let's not go down that path again.

What do you think? Do find yourself writing CSS the same way you wrote it 7 years ago, save for a few flex items? Does cross-browser CSS not mean as much as it used to?

Now on to this week's tools!
 

Front-end Frameworks

Get Early Access to TelemetryHub!
TelemetryHub is an observability tool that collects all your complex telemetry data into a single pane of glass view by leveraging the power of OpenTelemetry. Get optimal transparency into your distributed system without per-seat pricing!     SPONSORED  

tremor
A library of modular components built with React and Tailwind, to build dashboards fast.

vite-ts-react-tailwind-template
A starter kit of minimal and sensible defaults for building projects with Vite, React, TypeScript, Tailwind, and optionally pnpm.

sidebase
A modern, best-practice, batteries-included full-stack app starter based on Nuxt 3 and TypeScript.

Token CSS
A new tool that seamlessly integrates Design Tokens into your development workflow. Inspired by tools like Tailwind, Styled System, and CSS-in-JS libraries but it embraces .css files and style blocks.

uiverse
A gallery of community-built HTML and CSS components that includes buttons, loaders, custom checkboxes, toggles, and inputs.

React UI Boilerplate
A React boilerplate with an opinionated setup to help you quickly create your own React UI library.

LostGrid
A powerful grid system built on PostCSS that works with any preprocessor and even vanilla CSS.

nuxt3-tailwind3-starter
Starter project for Nuxt 3 with full Tailwind implementation and Docker and docker-compose support.

Adapt Framework
A free and easy-to-use framework and authoring tool that creates fully responsive, multi-device, HTML5 e-learning content.

Stripe Stack
All-in-one Stripe integration for Remix. Easily manage Stripe subscriptions, multiple plans, customer portals, and user accounts in the same template.

Voby
A high-performance framework, similar to Solid, with fine-grained observable-based reactivity for building rich applications.
 

Media Tools (SVG, Video, etc.)

Stop Leaving Your // Todos for Dead 💀
Height’s Code to Task feature automatically turns your // todo code comments into actionable tasks, ensuring your todos become dones. Track your tasks in one central place, automatically close tasks as you merge PRs, and work faster than ever with a powerful Command palette.    SPONSORED  

Tylify
Online tool to create seamless patterns in seconds. Customize the background color and add your own images before downloading the SVG, CSS, or PNG.

Palette
An online photo colorizer, for converting grayscale images to color, similar to working with Instagram filters.

AllTheFreeStock
A one-stop directory of places to find free stock images, videos, Music, and icons that are free to use in commercial projects.

matrix
A JavaScript/Canvas implementation of the green code rain made famous by the Matrix movies.

React Modern Audio Player
A simple, accessible, and flexible audio player for React.

ClockFace
A Clock-based icon set that displays the time in 5-minute intervals on a 12-hour face, in 12 different styles.

Crunker
A small TypeScript utility to merge, concatenate, play, export, and download audio files with the Web Audio API.

Showcode
An online tool to create customized and attractive screenshots of code snippets that you can share on social media.

Sargam Icons
A collection of 700+ open-source 24x24 icons in Figma or SVG format, each displayed in three styles.

Pexels
Similar to Unsplash, a resource for free stock photos that don't require attribution.

DgrmJS
A JavaScript library for creating SVG flow diagrams that works on desktop and mobile and has no dependencies. 
 

React Tools

Stop Leaving Your // Todos for Dead 💀
Height’s Code to Task feature automatically turns your // todo code comments into actionable tasks, ensuring your todos become dones. Track your tasks in one central place, automatically close tasks as you merge PRs, and work faster than ever with a powerful Command palette.    SPONSORED  

image-slider
A customizable image slider/carousel component compatible with React and Next.js.

react-i18next
Internationalization for React that uses the i18next i18n ecosystem.

react-screen-wake-lock
A tiny React implementation of the Screen Wake Lock API. It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.

Mantine DataTable
A table component that brings datagrid-like functionality to your Mantine data-rich applications.

react-advanced-cropper
React library that lets you build a custom 'cropper' tool with mobile support, so users can edit photos on-the-fly.

ConnectKit
A powerful React component library for connecting a wallet to your dApp. It supports the most popular connectors and chains out of the box and provides a beautiful, seamless experience.

googlemaps-react-primitives
Google Maps primitives for React that sticks closely to Google's official guide for React.

React Just Parallax
An open-source, production-ready React library for adding scroll and mousemove parallax effects to web pages.

sangte
A state management library for React, inspired by Redux Toolkit and Recoil.

react-tooltip
A React tooltip library with lots of options for customization including events, delay, colors, dynamic content, and more.

React Grid Gallery
A justified image gallery component for React, inspired by Google Photos.
 

Commercial Apps and Classifieds

A Tweet for Thought

The only thing missing from this video is Will Smith screaming something about 'the robots' to his police chief. But in all seriousness, this is amazing technology!
   

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

If you're a hardware person, you'll want to check out Diode, a platform that lets you build, program, and simulate hardware projects in the browser.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly