Web Tools Weekly
Tools for Web Developers

Issue #529  (CSS Survey, JS Utils, AI Tools, JSON/DB)09/07/23


Advertisement

How To Adjust Image Size Without Distortion
Resizing pictures is an easy task, but it gets terrifying when you deal with hundreds, or even thousands of images.

Uploadcare

Luckily, we’ve found a way to save you from all that boring manual work.

Learn More

In case you missed it back in June/July, the folks at Devographics ran the annual State of CSS survey, which is typically run by Sacha Greif. Sacha was part of it again, but this seems to be the first year that it was credited to an organization (Sacha has been running it since it started in 2019).

As always, the survey results are well-designed – though it does take some getting used to if you've never tried to analyze the data in this format. You can check out the results for yourself but I thought I'd post some of my own finds from the numbers here:

  • 19.6% of respondents said they have used CSS subgrid, up from 10.2% last year.
  • 35.5% of developers have used Logical Properties in their CSS.
  • 26.7% have used Container Queries, up from 12.5% last year.
  • 11.9% have used a brand new feature called Anchor Positioning, something that wasn't asked on any previous surveys.
  • 20.7% have used Conic Gradients, up from 9.5% in 2021.
  • 24.3% have used the accent-color property, up from 7.2% in 2021.
  • 37.8% have used the prefers-reduced-motion media feature.
  • A whopping 93% of developers have used CSS Custom Properties (variables), compared to 59.6% in the first year of the survey.
  • The :has selector was the most adopted feature, having the highest year-over-year "have used" progression.
Subgrid results on State of CSS Survey 2023
Those were some of the feature data points that caught my attention. There's quite a bit more that I haven't covered. There's also quite a bit of data on use of CSS frameworks, CSS-in-JS solutions, and general demographics of those who took the survey.

While I do think surveys like this are interesting to help see what's trending, I do believe there's a heavy bias towards people who are already pretty blog-savvy and up with the latest standards. So while it does seem as though certain CSS features are being adopted quickly, I would say the actual numbers around the world on feature adoption are considerably lower.

If nothing else, the survey is a great way to get up to speed on some new things in CSS that you may not have tried. Maybe now you can do some research and start incorporating a few of the lesser-known features in real projects.


Now on to this week's tools!
 

JavaScript Utilities

Valibot
An open-source, developer-friendly schema library with a small bundle size, to validate any TypeScript type, and includes validation helpers and 100% test coverage.

delay
A utility that lets you delay a promise a specified amount of time.

google-spreadsheet
A Google Sheets API wrapper for JavaScript/Typescript, featuring multiple auth options, cell and row-based APIs, worksheet management, and more.

Uploadcare Image CDN
Uploadcare Image CDN comes with an intuitive URL API that provides multiple chainable operations to optimize an image on the fly right before it's delivered to your users.     SPONSORED 

openGraphScraper
A simple node module (with TypeScript declarations) for scraping Open Graph and Twitter/X Card info from a website.

node-emoji
Simple emoji support for Node.js projects, powered by emojilib (and emoji keyword library) and skin-tone (for changing the skin tone of an emoji).

ngraph.path
A fast path finding library for arbitrary graphs. Includes a neat demo that allows you to try it on any of 6 city maps.

ngraph.path

untildify
Convert a tilde path to an absolute path (e.g. ~/dev becomes  its equivalent /Users/username/dev, etc).

Default Composer
A tiny (~500B) JavaScript library that allows you to set default values for nested objects.

@vinejs/vine
A form data validation library for Node.js, which you can use to validate the HTTP request body in your backend apps.

CSV Parse
A powerful CSV parser for Node.js that converts CSV text input into arrays or objects.
 

ChatGPT and AI Tools

AiSites.me
A search engine to find AI tools and websites that's usable via keyword and 30+ categories for filtering.

E2B
A set of tools, APIs that allow you to use AI agents to run various commands and actions in sandboxed cloud environments.

Sense AI
Automatic hub for all your work resources is now free for individual users.   SPONSORED 

GodMode
A dedicated chat browser that helps you quickly access the full web apps of ChatGPT, Claude 2, Perplexity, Bing and more with a single keyboard shortcut.

Firefly
A generative AI-powered content creation tool from Adobe that lets you experiment, imagine, and create an infinite range of images.

Firefly

Gdańsk AI
A full-stack AI voice chatbot (speech-to-text, LLM, text-to-speech) with integrations to Auth0, OpenAI, Google Cloud API, and Stripe.

NaNAI
A searchable database that aggregates an extensive and detailed list of tools powered by AI.

Huehive
Enter a phrase in the text prompt to generate a color palette from the entered text using ChatGPT.

Loz
A command-line interface tool, based on the OpenAI API, that allows Unix pipes to be used with other Unix tools.

gpt-graph
A simple text to entity-relation graph generator, powered by GPT-3.

Recraft
An AI image generator (commercial use allowed) that claims to generate images that "don't have that typical AI weirdness to them".
 

JSON and Database Tools

SQLedge
A Go-based app that uses Postgres logical replication to stream the changes in a source Postgres database to a SQLite database that can run on the edge.

GraphQL Mobius
A utility to parse GraphQL schema to TypeScript to create an end-to-end type-safe GraphQL client in TypeScript.

Doculite
A TypeScript utility that lets you use SQLite like Firebase Firestore, with support for listeners on documents, collections, and basic queries.

Sense AI
Automatic hub for all your work resources is now free for individual users.   SPONSORED 

camaro
A utility to transform XML to JSON, using Node.js bindings to a fast, native XML parser called pugixml.

MariaDB Node.js connector
A non-blocking MariaDB and MySQL client for Node.js, to connect applications developed on Node.js to MariaDB and MySQL databases.

destr
A faster, type-safe, secure, and convenient alternative to JSON.parse().

destr

node-oracledb
A driver for Node.js that can power high-performance Oracle Database apps written in JavaScript or TypeScript.

PLJS
A compact, lightweight, and fast JavaScript language extension, written in C, for "modern" PostgreSQL.

LiQuery
Powerful search, tagging, filtering and sorting via simple text query language, for SQLite databases.

josn
A command-line JSON viewer, written in JavaScript and TypeScript, which the author uses to verify data collected via web scraping.
 

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Photovatar – Create custom, stunning avatars that capture your personality and style.
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs.    AD 
Visual DB – A tool to create, browse and modify databases using a drag-and-drop UI.
STRICH – A JS library for real-time, multi-format barcode scanning directly in the web browser.
Brilliant – Learn math and CS using interactive problem solving that's effective and fun.    AD 
Typeblock – No-code platform to create shareable AI apps using a simple Canva-like editor.
DocuWriter.ai – AI-powered tools to generate docs, tests, and refactors from your source code files.

An X Post for Thought

I agree with this wholeheartedly and I find it hard to believe it happens so often without proper remuneration.
 
A Tweet for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...

As we all know, the internet has everything and that's confirmed once again by the fact that there is a Condiment Packet Gallery.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris