Web Tools #366 - Fetch API, CSS Tools, React, CMS's

Advertisement

More than a decade ago I picked up a great book that I still have in my physical tech library today: Bulletproof Ajax by Jeremy Keith. It was first published in 2007 and was never updated. Truth is, it didn't need to be. I bought the book probably about a year and a half after it was published and it was still super-relevant.

Even though the web app boom had barely started, Ajax was a hot topic in the mid-to-late 2000s. I started my web development blog in May of 2008 and in June of 2009 I started writing a multi-part blog post series on how to code Ajax from scratch without a library – which is exactly what Jeremy's book taught. It's amazing that it took three separate blog posts to go through each part of the code needed to do a single cross-browser Ajax call.

Take a look at all three of those posts (part 1, part 2, part 3) and scan through the code snippets. It's exhausting considering using all of that for such a simple end goal, let alone coming to grips with it back in 2009 when jQuery was just a copy/paste away!

While in some cases for legacy reasons it may still be necessary and helpful to know the old Ajax code, doing asynchronous calls for external data is now simple and super-powerful thanks to the Fetch API.

I just finished writing an article covering a pretty gentle introduction to the Fetch API over at CodeinWP:

• A Fetch API Tutorial for Beginners

So if you've yet to replace your Ajax calls with Fetch, maybe this is a good place for you to start. For most projects, you should be safe to use Fetch for all your asynchronous resource requests and if you need a fallback or polyfill, the article covers a bit of that too.

Now on to this week's tools!
 

CSS and HTML Tools

Breakpoints and `console.log` is the Past, Time Travel is the Future
Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, showing results in your editor right next to your code. Key features include time-travel debugger, test story viewer and code coverage explorer. sponsored 

style9
CSS-in-JS compiler inspired by Facebook's Stylex.

3D Book Image CSS Generator
Online tool to generate CSS for a 3D animated book cover that you can customize via cover image, perspective, and so forth.

css-media-vars
A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.

mailgo
A script that makes mailto: and tel: links more usable by adding an options overlay (e.g. open in Gmail, Outlook, etc.) when the user clicks.

Formbutton
Adds one of those bottom-corner popup forms to a page, to allow users to provide feedback.

shareon
Lightweight share buttons that don't do any kind of tracking.

zerodivs
An experimental UI editor for creating CSS-only illustrations based on applying styles on a single HTML element (e.g. using pseudo-elements).

styled-jsx
Full CSS support for JSX without compromises.

Keyframes
Now at version 2. Dead simple visual tools to help you generate CSS for your projects.

EmailComb
An online tool to remove unused CSS from HTML email templates. I assume this doesn't have to be HTML email, just any HTML that uses a style block.

Color Copy Paste
A Figma, Sketch, or Chrome plugin that allows you to use your phone as a color picker, so you can pick any color that you can see via your phone camera.

CSS Pie Chart
Create pie charts using CSS by adjusting sliders for size, rotation, donut hole, etc., and plug in your own data. Enable the conic gradients flag to get this to work in Firefox.

React Tools

useImagesLoaded
Custom React hook that returns true once all the images inside a container are loaded.

react-ridge-state
Simple, fast, and small (400b) global state management for React that can be used outside a React component.

React Bootstrap Typeahead
A React-based autocomplete library that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. Supports single and multi-selection and is compliant with WAI-ARIA authoring practices.

renature
A physics-based animation library for React inspired by the natural world.  See the gallery page for cool examples.
 
React Hook Form
Now at version 6. Performant, flexible and extensible forms for React with easy-to-use validation.

React Spectrum
A React implementation of Spectrum, Adobe’s design system, which provides adaptive, accessible, and cohesive experiences for all Adobe applications.

ReacType
A visual prototyping tool that allows developers to draw prototypes and export React / Typescript code.

useWebAnimations
A React hook for highly-performant and manipulate-able animations using Web Animations API.

usePlacesAutocomplete
A React hook for Google Maps Places Autocomplete to help you build a UI component with the same features as Google's autocomplete.

clack-react
Provides two React components that enable keyboard shortcuts in React

React-Slideshow
A simple slideshow component built with React that supports slide, fade, and zoom effects.

React Datepicker
Now at version 3. A simple and reusable datepicker component for React.

ahooks
An fairly extensive hooks library with solid documentation and examples for each hook.
 

Static Sites, CMS's, Site Builders, etc.

Tech Productivity Newsletter
Looking for tools on productivity? I've been publishing those in my other newsletter every Monday.   promoted

Spread Simple
Uses the data in your Google spreadsheet to create styled websites with a variety of customizable features.

Editor X
A new website building platform from Wix with responsive design features and a drag and drop UI, along with the option to add custom code to build complex data driven sites and apps.

PRSS
Native Windows, Mac, or Linux app to build blogs, documentation sites, and more, then publish to GitHub Pages or a self-hosted option.

primo
An all-in-one IDE, CMS, component library, and static site generator.

Papyr CMS
A JavaScript CMS using Node and React with the NextJS framework that's easily extendable and requires minimal configuration.

SheetUI
Turn your Google Sheets into a beautiful, responsive web page in three simple steps.

Amazon Honeycode
A no-code app building platform for teams where you populate app data in tables, build with a drag and drop UI, then add automation and other features.

Netlify Menubar
Netlify menubar app to receive build information or trigger new builds.

Reflex
A collection of themes and plugins to help you build Gatsby sites faster.

gatsby-theme-code-notes
A Gatsby theme for publishing code-related notes to your website.

grid.studio
Grid-based website editor with collaboration features, versioning, and offline support.

A Tweet for Thought

Here's some great advice from Ali Spittel for those who teach code for a living.
 

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 fan of the TV show The Office (US version), then you're going to have to check out The Office (Slack), which schedules regular showings of every episode of The Office recreated in Slack. That's ambitious! Hopefully it doesn't get a takedown order though.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly