Issue #401 (App History API, React, Build Tools, Uncats)03/25/21
If you like looking into or keeping up with new W3C specifications, here's one you might find interesting: App History API. Traditionally, maintaining and navigating history in any web app has been a complex process. This has led to a number of solutions including libraries and plugins to handle history or state. And, of course, libraries like React have their own way of dealing with state and/or history.
As the spec points out, this is currently an "unofficial draft", so there's no guarantee it will become a standard nor is there any guarantee it will be standardized with the current features. You can keep up with changes on the GitHub repo.
Currently the three primary sections of the spec are:
- The AppHistory interface
- The navigate event and its associated methods properties
- Patches to fire the navigate event
The AppHistory interface exposes three events: navigate, navigatesuccess, and navigateerror.
The navigate interface seems to contain core features that will be most useful, including:
- A userInitiated Boolean that indicates if navigation was caused by a user action
- A hashChange Boolean to indicate if the navigation was via a URL hash
- A formData object that's exposed if navigation occurs from a POST form submission
That's a sampling of what's there. I'm sure more will be added if it continues to be developed and as long as there's interest from browsers in implementing it.
Now on to this week's tools!
|
React Tools
Set Up, Manage & Secure Apple Devices in Minutes
Jamf Now is a device management solution for your team's Apple devices at work. We make management tasks simple and affordable, so you can support your users; no IT required. Web Tools Weekly readers can manage 3 devices free now! sponsored
react-big-calendar
An events calendar component built for React and made for modern browsers (IE10+) and uses flexbox over the classic nested tables approach.
React Skeleton
SVG-Powered component to easily create skeleton loadings. That is, a placeholder "skeleton" of the page while the real content is loading. Also available for React Native, Vue, and in vanilla JS.
rc-drawer
A slide-out drawer menu component that's triggered from a hamburger icon, commonly used in mobile-first layouts.
react-editor-js
An unofficial port of Editor.js, a popular block-style WYSIWYG editor for embedding in pages and apps.
Hookstate
Simple but incredibly fast and flexible state management based on React state hooks.
Rerousel
A lightweight infinite carousel for React that's easy to implement and compatible with various contexts so it should work in most projects.
React Awesome Loaders
High quality, super responsive and completely customizable loading animations.
 |
React Static Tweets
Extremely fast static renderer for tweets that purports to be 10x to 100x faster than Twitter's native solution.
Glide Data Grid
A high-performance React grid component with rich rendering and first-class TypeScript support.
Countdown Circle Timer
Lightweight React and React Native countdown timer component with SVG-based color and progress animation.
React Hooks Lib
A library of about two dozen or so reusable React hooks.
|
Build Tools, Bundlers, etc.
Advanced React & GraphQL
ICYMI, Wes Bos has re-launched his Advanced React course that offers 70+ HD videos in the master package. (Alternatively, there's React for Beginners and Beginner JavaScript). promoted
esbuild-plugin-vue
A utility that adds basic Vue support for esbuild, written in TypeScript.
Estrella
A lightweight and versatile build tool based on esbuild. Features custom scripts, auto-rebuilding when source files change, parallel builds, TypeScript diagnostics, and lots more.
Nollup
Rollup-compatible development bundler for fast rebuilds and hot module replacement.
Yalc
A better workflow for working with npm or Yarn for package authors.
Auto
Automated releases powered by pull request labels. Designed to be run in a continuous integration (CI) environment, but all the commands work locally as well.
Serverless UI
A command-line utility for deploying serverless applications to AWS, complete with custom domains, deploy previews, TypeScript support, and more.
Fontsource
A monorepo full of self-hostable open source fonts bundled into individual npm packages. Inspired by the aging Typefaces project and primarily built using Google Font Metadata.
FJB
A fast JavaScript bundler that aims to be a monolithic does-it-all type of bundler with zero configuration needed.
Rapid React
A light weight interactive CLI automation tool for rapid scaffolding of React apps, with Create React App under the hood.
preset-vite
An all-in-one preset for writing Preact apps with the Vite bundler featuring Hot Module Replacement via prefresh and Preact Devtools bridge enabled during development.
eslint-config-auto
Automatically configure ESLint based on project dependencies.
glci
Test your Gitlab CI pipeline changes locally using Docker.
|
  |
The Uncategorizables
Link Whisper
Not free, but this is a WordPress plugin to speed up the process of internal linking and help you rank better in search results.
SpeedTyper
Typing competitions for programmers. Battle against other developers by typing challenges from real open source projects as fast as possible.
Rive
Web and Native app to create and ship beautiful animations to any platform.
Super
Turn your Notion pages into fast, functional websites with custom domains, fonts, analytics, and more.
Unleash
An open source feature flag and toggle system that gives you a great overview over all feature toggles across all your apps and services. Has client implementations for Java, Node, Go, Ruby, Python, and .NET Core.
wpUniverse
A custom search engine built on Google Search for WordPress and web developers. Results are sourced from well known resources like the WordPress docs, popular blogs, etc.
BlockSurvey
Not free but has a 7-day trial. A private and secure forms and survey service. Collect data with guaranteed end-to-end encryption and privacy and you own your data.
Letter
An easy to use newsletter design tool for content creators, designers, and developers. Has a modest free plan.
ApiFlash
A full-featured screenshot API based on Google Chrome and AWS Lambda. 100 screenshots for the free plan.
Gleek
A diagram maker for developers with a decent free plan. Generate informal, class, sequence, or entity-relationship diagrams using only your keyboard.
Chrome Extensions Samples
Official samples of Chrome extensions that you might want to use a starting point for writing your own.
|
A Tweet for Thought
Nothing better than some CSS humor.
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...
You might often come across open source "clones" of popular websites and apps like Instagram, Trello, etc. Clone Wars is a repository of clones of such apps that you might want to bookmark.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
