Web Tools #465 - VS Code, Frameworks, Build Tools, React Native

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #465 • June 16, 2022

Advertisement
Build Internal Tools 10x Faster with Retool
Retool is the fast way for developers to build and share internal tools. Teams at thousands of companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows.

Learn More
Retool

I know many of you that read this newsletter use Visual Studio Code (VS Code) as your primary code editor. Over the last 5 years or so, VS Code has exploded in popularity. I remember years ago TextMate was a popular choice. Then Sublime Text took over as the front-runner for some time. Maybe you used one of those and still do.

I'm sure many of you prefer one of the JetBrains products like WebStorm or IntelliJ IDEA, or the super-popular Vim that's been around since 1991. But like I said, it really seems like VS Code has taken off over the last little while, especially in the front-end development niche.

In this newsletter, I've regularly included a section featuring text editors, IDEs, code playgrounds, and similar tools. I found that most of the tools I was finding lately in that category were VS Code-related extensions.

Since I have plenty of stuff to include here without that category, I decided that VS Code would be the perfect topic to have its own newsletter: VSCode.Email.

VSCode.Email

As many of you have already noticed, I've been promoting it a little bit in the latter part of this newsletter. I thought I'd give it a proper shout-out in the intro here so you can consider if you want to subscribe to that one as well.

Of course, the last thing the world needs is Yet Another Weekly Newsletter. But I promise, this one is different from Web Tools Weekly and is relatively brief. I've already sent out 8 issues so far that include:

  • A quick tip in the intro on using and customizing VS Code
  • A short list of VS Code tools and extensions
  • A brief list of VS Code-related articles or other resources
  • A final brief list of tools and articles for other IDEs and editors

You can check out the archive to see what's been published so far. But generally, each issue is no more than about 10-12 links in total along with the introductory tip.

Of course, if you don't want to flood your inbox with more emails, you can always periodically just check out the archives, follow the Twitter account (which automatically Tweets each week's new issue), or subscribe to the MailChimp RSS feed for the archive.

This means if you still want code editor-related tools and new extensions for VS Code, you won't find those here anymore. All of that will be included exclusively in VSCode.Email. Hope you enjoy it!
 

Now on to this week's tools!

Front-end Frameworks

Build Internal Tools 10x Faster with Retool
Retool is the fast way for developers to build and share internal tools. Teams at thousands of companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows.  SPONSORED 

Formation
20+ open-source and customizable interactive components, written in TypeScript and WCAG 2.0 compatible.

Component Party
A playground of sorts that lets you get a quick overview of the syntax for the various features different libraries like React, Vue, Svelte, Angular, and more.

Nx Serverless
An opinionated monorepo starter for Node.js serverless applications with first-class TypeScript support, CORS, ESLint, Jest, and more.

LiveTerm
A highly customizable, easy-to-use, and minimal website template, powered by Next.js, for building terminal-style websites in minutes.

Preline
An open-source set of 250+ prebuilt UI components based on Tailwind CSS and compatible with React and Vue.

Preline

Plasmo
A framework and toolkit for building browser extensions with first-class React and Typescript support.

Workbench
A design system and component library for Gusto, an HR and payroll platform.

NextJS FullStack Starter
A starter for Next.js full-stack projects with Tailwind, Zustand for state management, Prisma and Postgres for database, and lots more.

Cirrus CSS
An SCSS framework of beautiful pre-built components and utility classes, designed for rapid prototyping.

eth-nextjs-boilerplate
An Ethereum, Next.js, and React boilerplate for building decentralized apps ("dapps") that also uses wagmi, Ethers, and Chakra UI.

Instagram MERN
A full-stack Instagram clone using the MERN stack and Socket.io. Also uses Tailwind, Redux, Material UI, and more.

Build Tools, Bundlers, etc.

The Modern Guide to Financial Tech App Development
Learn how to build financial tech (fintech) applications faster, with lower maintenance costs, using charts and dashboards with this free guide. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps.    SPONSORED 

Ratchet
A Go-based tool for improving the security of CI/CD workflows by automating the process of pinning and unpinning upstream versions. Like npm, pip, or Yarn, but for CI/CD workflows.

wds
A reloading dev server, similar to ts-node-dev, for server-side TypeScript projects. Compiles TypeScript fast and on-demand and restarts the server when things change.

Create Ultra App
A build tool for creating projects using Ultra, the SSR React framework in Deno.

relative-deps
Introduces an additional dependency section in your package.json, called relativeDependencies, that contains paths to local sources of any dependency, that will be built and installed over the publicly available versions, when needed.

Shuttle
Serverless for Rust. A web application platform that uses traits and annotations to configure your back-end deployment – including databases.

Tekton
A powerful and flexible open-source framework for creating CI/CD systems, to build, test, and deploy across cloud providers.

Tekton

Putout
A pluggable and configurable code transformer based on Babel with built-in ESLint that keeps your code clean and readable, with support for JavaScript, JSX, TypeScript, YAML, JSON, and Markdown.

Lightview
Small, simple, powerful web UI and micro front end creation that includes concepts from Svelte, React, and Vue combined into a single small tool.

dependency-review-action
A GitHub Action for detecting vulnerable dependencies in your pull requests.

Wireit
From Google, currently in alpha. CLI tool that upgrades your npm scripts to make them smarter and more efficient.

Changesets
A TypeScript-based tool to manage versioning and changelogs, with a focus on multi-package repositories.

React Native and Mobile

The Modern Guide to Financial Tech App Development
Learn how to build financial tech (fintech) applications faster, with lower maintenance costs, using charts and dashboards with this free guide. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps.    SPONSORED 

react-native-bignumber
A fast Big Number library for React Native, made for crypto apps and wallets.

react-native-bars
React Native components to control your app status and navigation bars.

react-native-location
Native GPS location support for React Native that includes some additional features over native Geolocation.

React Native Reorderable List
A drag-and-drop re-orderable list for React Native applications, powered by Reanimated, the popular React Native animation library.

React Native Figma Squircle
Figma-flavored "squircles" (squares with rounded corners) for React Native.

Screen Sizes
A one-stop resource for looking up and comparing apple devices so you can get info on screen resolution, OS support, features, and more.

Screen Sizes

react-native-select-dropdown
A highly customizable dropdown/select picker/menu component for React Native.

CodeSandbox for iOS
A full-fledged development environment that brings the power of modern JavaScript development to your iOS device. Use your iPhone or iPad to develop and run Node.js apps or collaborate in real-time with others.

toggle-switch-react-native
A toggle-switch component for React Native with lots of API options for different customizations.

react-native-mask-text
A library to mask text and input components in React Native and Expo.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Digger – One-click full-stack AWS deployment for just about any stack.

Windo – A simple Shopify alternative to create beautiful online stores.

Emerging Tech Brew – The future of tech in our 5-minute newsletter.    AD 

Boostack – Boilerplate starter kit to build SaaS apps with the MEVN stack.

TinyStacks – Build, operate, and scale your back end on AWS.

ScraperBox – Web scraping API to scrape pages without getting blocked.
 

A Tweet for Thought

If you're just getting started in development (or even if you're not!) I'm sure you'll enjoy this thread by Pratham where he shares 9 points for junior developers.

A Tweet for Thought
 

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 enjoy discovering new music that's not super-mainstream, from a variety of genres, you might want to check out Here Before A Million. As the name implies, it features a playlist of YouTube songs/videos that are under a million views. Any songs that reach a million get removed from the list.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #464 - Jamstack, JS Utilities, Git/CLI Tools

Thursday, June 9, 2022

Web Tools Weekly WEB VERSION Issue #464 • June 9, 2020 Advertisement Beautiful Link Previews Automagically Mugshot Bot creates stunning link previews automatically. No more fussing with design tools or

Web Tools #463 - JS Overkill, CSS Tools, Testing, Uncats

Thursday, June 2, 2022

Web Tools Weekly WEB VERSION Issue #463 • June 2, 2022 Advertisement Stepsize: Fix Technical Debt and Ship 2x Faster Create and view code issues directly from your VSCode and JetBrains editors. Add

Web Tools #462 - Media, SVG, Git/CLI, React

Thursday, May 26, 2022

Web Tools Weekly WEB VERSION Issue #462 • May 26, 2022 Advertisement Build a Predictable Path To Engineering Leadership The On Deck Engineering Fellowship is a curated community designed to help

Web Tools #461 - Mergify, Frameworks, React Tools, Uncats

Thursday, May 19, 2022

Web Tools Weekly WEB VERSION Issue #461 • May 19, 2022 The following intro is a paid product review for Mergify, a GitHub-based service for automating your pull requests and code merges. If you're

Web Tools #460 - CSS Tools, JS Utilities, JSON, Databases

Thursday, May 12, 2022

Web Tools Weekly WEB VERSION Issue #460 • May 12, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

You Might Also Like

📧 Working with LLMs in .NET using Microsoft.Extensions.AI

Saturday, January 11, 2025

​ Working with LLMs in .NET using Microsoft․Extensions․AI Read on: m​y website / Read time: 6 minutes The .NET Weekly is brought to you by: ​Transform your database performance with RavenDB​:

iOS Dev Weekly – Issue 694

Friday, January 10, 2025

Hopefully you won't see that much difference with receiving this issue, but it's ALL CHANGED behind the scenes! 😱 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Daily Coding Problem: Problem #1664 [Easy]

Friday, January 10, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Twitter. A permutation can be specified by an array P , where P[i] represents the

Spyglass Dispatch: The Case for a For-Profit OpenAI

Friday, January 10, 2025

RIP Venu • A More Political and Real Time Threads • An OpenAI Auction • Apple's Tough 2025 The Spyglass Dispatch is a newsletter sent on weekdays featuring links and commentary on timely topics

⌨️ 10 Mods to Improve Your Mechanical Keyboard — How to Set Up Quick Share on Windows

Friday, January 10, 2025

Also: Why Are Tech Companies Trying to Sell Me Expensive Clocks? How-To Geek Logo January 10, 2025 Did You Know Famed biologist Charles Darwin and US President Abraham Lincoln were born on the same day

Your best friends in design

Friday, January 10, 2025

​ Working With Designers Product manager & UX designer collaboration guide. How members of your product team work together is just as important as the work itself. A fundamental relationship within

Charted | How Canada Would Rank as the 51st State 📊

Friday, January 10, 2025

Donald Trump has floated the idea that Canada should be the 51st state. Here's how it compares statistically. View Online | Subscribe | Download Our App Presented by: Global X ETFs Power AI's

Pinpointing The Actual Problem 🎯

Friday, January 10, 2025

WordPress accidentally diagnoses its own business problem. Here's a version for your browser. Hunting for the end of the long tail • January 10, 2025 Pinpointing The Actual Problem A blog post from

😱Major Azure Outage in EastUS2, 🚀New AI and Azure Developer CLI Courses, azureedge.net DNS retiring

Friday, January 10, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

iOS Cocoa Treats

Friday, January 10, 2025

View in browser Hello, you're reading Infinum iOS Cocoa Treats, bringing you the latest iOS related news straight to your inbox every week. Adopting Swift 6 across the app codebase I've been