Web Tools #376 - Learn Gatsby, JS Utilities, Mobile, Build Tools

As many of you know, and as is obvious simply by the existence of this newsletter, building websites today is not easy due to the abundance of available tooling.

To help with this, there are powerful tools like Gatsby. Gatsby has been lumped in with Static Site Generators or the Jamstack, but it's really much more than just a site generator. It's a React Framework plus an entire ecosystem that includes features like:

• CDN + AMP support
• Resource Optimization (responsive images, critical CSS, etc.)
• PWA support with prefetching, offline access, etc.
• Developer-friendly features like components, one-way data binding, and asset pipelines.

• 52 HD videos (part of 13 modules)
• Free updates forever for a one-time cost
• A step-by-step walk-through of building the website for a local pizza joint, incorporating all the features you learn in the course

JavaScript Utilities

Duet Date Picker
An accessible date picker you can use with any framework and it offers a number of different customizations and options.

dragmove.js
A tiny JavaScript utility to make DOM elements draggable.

urlcat
A tiny JavaScript library that makes building URLs convenient and prevents common mistakes.

Tweakpane
Compact pane library for fine-tuning parameters and monitoring value changes.

Print.js
A tiny JavaScript library to help printing from the web. For example, to insert a button to print a portion of the page, like a form. Lots more examples on the page.

Embla Carousel
A bare-bones, extensible carousel library with great fluid motion and awesome swipe precision. Library agnostic, dependency free, and open source.
 
let-anything
Monadic syntax for JavaScript (which is a functional programming technique).

ip-address
A library for validating and manipulating IPv4 and IPv6 addresses in JavaScript.

ztext.js
Easy to implement, 3D typography for the web that works with any font.

Underscore.js
The popular utility library is now fully modular. Details here and here.

Functional
Common functional programming algebraic data types for JavaScript, compatible with most modern browsers and Deno.

file-type
Utility to detect the file type of a Buffer/Uint8Array/ArrayBuffer

xRE
This is an older project. It's a library for extending regular expressions in JavaScript using ES2015+ tagged template literals.
 

---

Recommended Reading for Developers:

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

---

Mobile and React Native Tools

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

react-native-starter-kit
A custom starter kit to build TypeScript and JavaScript React Native apps with one click.

Detox
Gray box end-to-end testing and automation framework for mobile apps.

Figma to Code
A Figma plugin to generate responsive pages and apps in Tailwind, Flutter, and SwiftUI.
 
react-native-pdf
A react native PDF view component  with cross-platform support.

Magnus UI
A Utility-first React Native UI framework.

MondayHero
Developer Tool for converting designs into native mobile code, compatible with Sketch and Adobe XD.

QRpu.sh
Web service and API to easily create QR codes that can pass data from mobile to desktop.

Stacks
Build React Native views blazingly fast with components and a debug mode.

React Navigation
At version 5 since earlier this year. Routing and navigation for your React Native apps.

react-native-big-calendar
Cross-platform Google/Outlook-like calendar component for React Native.

React Native for Windows + MacOS
A framework from Microsoft for building native Windows or MacOS apps with React.

Bundlers, Build Tools, Deploy, etc.

esbuild-node-tsc
Build your Typescript-based Node projects using blazing fast esbuild (the fast JS bundler).

Alfred
A modular, zero config and customizable toolchain for JavaScript to build, lint, format, and test your project out of the box.

next.js-authentication-aws
Deploys a Next.js project to AWS with comprehensive authentication enabled.

jspm
A module CDN allowing any package from npm to be directly loaded in the browser and other JS environments as a fully optimized native JavaScript module.

Skypack
A global CDN that speeds up any website instantly with optimized JavaScript hosting for npm modules.
 
Typed Inject
A tiny, 100% type-safe dependency injection framework for TypeScript. You can inject classes, interfaces, or primitives.

electron-builder
A complete solution to package and build a ready for distribution Electron app for macOS, Windows, and Linux with “auto update” support out of the box.

Stencil
Now at version 2+. A toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards-based Web Components that run in every browser.

Pasukon
A JavaScript parser generator library using combinators. You can try it live on the page.

Vuepack
A Vue compiler for Vue 2 that plays nice with ES module imports and Snowpack. It generates templates and component imports from a glob of Vue components.

A Tweet for Thought

From Joe Walnes in 2017: Numbers every frontend developer should aim for. Does this still hold true?

 

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 want to fool your non-techy friends into thinking you had a Zoom meeting with a bunch of your favourite celebrities you'll want to try out MeetingShot. Ok, probably nobody will believe you, but you'll have a good laugh.

Thanks to everyone for subscribing and reading!

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