Web Tools #371 - Frontend Frameworks, JS Utilities, Build Tools

JavaScript's Date object is quite a monster when you take a look at all the methods available on it for manipulating and dealing with dates. And for years the Date object has caused problems for developers. You can read about some of the issues with the Date object in this 2017 article by Microsoft's Maggie Pint.

In response to the need for an improvement on Date, there's been launched a new initiative by TC39 called Temporal. In their own words:

"This is a proposal for Temporal, a global Object that acts as a top-level namespace (like Math), that brings a modern date/time API to the ECMAScript language."

They explain that many of the problems outlined in Maggie's post are fixed by:

• Providing easy-to-use APIs for date and time computations
• Dealing only with immutable objects
• Parsing a strictly specified string format
• Supporting non-Gregorian calendars, and time zones other than the user's local time and UTC

So if you've been annoyed by anything to do with the Date object in relation to some of these issues, I'm sure you'll be happy about this initiative.

Currently this is only a proposal and should not be implemented by browsers or used in any production environment. But if you're interested in checking out the details, there's a documentation page for the API that should give you a good idea where this new feature set is headed.

And if you'd like to help out with feedback, the site includes a survey you can fill out or you can open an issue on the GitHub repo.

Do you like JavaScript tips? I've collected together tons of similar tips in my JS/DOM E-Books Bundle.

Now on to this week's tools!

Front-end Frameworks

V-Dashboard
Dashboard starter template built with Vite, Vue 3, Tailwind CSS and TypeScript.

Element Plus
A Vue 2.0 based component library for developers, designers, and product managers.

Volt
A free Bootstrap 5 admin dashboard featuring over 100 components, 11 example pages, and 3 dependency-free plugins.

React-Google-Apps-Script
Boilerplate project for developing React apps inside Google Sheets, Docs, Forms, and Slides projects. Perfect for personal projects or for publishing complex add-ons in the G Suite Marketplace.

Kickstand UI
A UI framework with lots of components, built with accessibility as a focus.
 
Storybook
Now at version 6+. An open source tool for developing UI components in isolation for React, Vue, Angular, and more.

Reactant
A framework for building React applications. Features include modularization, dependency injection, state management, and more.

Bedrock
A battle-tested collection of micro services, components, and patterns that allow you to rapidly build modern software solutions. Ties together Kubernetes, Elasticsearch, MongoDB, Node, and React.

Shoelace
Now at version 2+. A forward-thinking library of web components that works with all frameworks, accessibility built in, dark theme, and lots more.

vue-lib
A Vue 3 library starter written in TypeScript with lint, auto release, changelog, and tests.

Chrome Extension Development Kit
Jump-start your Chrome extension projects with a variety of battle-tested starter templates and grow your audience with proven tips and actionable advice. Includes templates, example extensions, and an e-book.
 

---

Recommended Reading for Developers:

• JavaScript the Definitive Guide (7th Edition)
• Vue.js in Action
• The Pragmatic Programmer (2nd Edition)

---

Build Tools, Deployment, etc.

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

ts-migrate
A tool for helping migrate code to TypeScript. It takes a JavaScript, or a partial TypeScript, project in and gives a compiling TypeScript project out.

vite
An opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

babel-plugin-native-error-extend
Babel plugin for native Error extending. Handles all usual cases such as classic extend and constructor override.

Rome
A linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS, designed to replace Babel, ESLint, webpack, Prettier, Jest, and others.

Renovate
Universal multi-platform and multi-language dependency update tool that fits into your workflows.

Escodegen
An ECMAScript code generator from Mozilla's Parser API AST.

njt
A search engine for npm packages that can help save you time trying to search for a package by name on Google, etc.
 
Next Deploy
Effortless deployment to AWS and GitHub Pages for Next.js apps.

Tauri
A framework for building tiny, secure, and fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS, and CSS.

Trex
Package management for Deno (the new Node alternative).

babel-plugin-hash-strings
Babel plugin to replace all instances of "@@strings like this" with hashes.

esbuild-register
Transpile JSX, TypeScript and ESNext features on the fly with esbuild.
 

JavaScript Utilities

Tooltip Sequence
A simple step by step tooltip helper (i.e. "app tour") for any site.

currency.js
A small, lightweight JavaScript library for working with currency values.

Luckysheet
An excel-like spreadsheet module that's powerful, simple to configure, and mimics a number of different features from traditional spreadsheet apps.

Light Date
Blazing fast and lightweight (157 bytes) date formatting for Node and the browser.

FullCalendar
Now at version 5+. A JavaScript event calendar component with 100+ customizable settings, connectors for React, Vue, and Angular, and lots more.
 
handwritten.js
Convert typed text to realistic handwriting.

remirror
A toolkit for building accessible WYSIWYG editors that run on the web and desktop.

omg-curry
A feature-complete JavaScript currying library.

parallax-effect
Parallax effect in JavaScript using face tracking via webcam.

ms
Tiny millisecond conversion utility, to easily convert various time formats to milliseconds.

Josh.js
A JavaScript library to animate content on page scroll.

form-validation.js
A customizable validation framework with an intuitive API, asynchronous rules support, array manipulation, and lots more.
 

A Tweet for Thought

How to keep your competitors from getting too complacent.
 

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

Speaking of frameworks, you might want to check out Startup Library, made by Y Combinator. It's a consolidated repository of videos, podcasts, and essays as resources for startup founders.

Thanks to everyone for subscribing and reading!

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