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

When accelerator dreams become company nightmares

Thursday, May 2, 2024

Plus: Illinois gives Rivian incentives and AI is not SaaS View this email online in your browser By Christine Hall Thursday, May 2, 2024 Hello, and welcome back to TechCrunch PM. We have a great lineup

📱 Issue 409 - Claude Team plan and iOS app

Thursday, May 2, 2024

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 409 Release Date May 02, 2024 Your weekly report of the most popular iOS news, articles and projects Popular

💻 Issue 415 - Hotel WiFi JavaScript Injection (2012)

Thursday, May 2, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 415 Release Date May 02, 2024 Your weekly report of the most popular JavaScript news, articles

💎 Issue 415 - Choosing the Right Audit Trail Approach in Ruby

Thursday, May 2, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 415 Release Date May 02, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 408 - Speeding up C++ build times

Thursday, May 2, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 408 Release Date May 02, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 415 - Ditch dotenv: Node.js Now Natively Supports .env File Loading

Thursday, May 2, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 415 Release Date May 02, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 333 - React 19 Beta

Thursday, May 2, 2024

This week's Awesome React Weekly Read this email on the Web The Awesome React Weekly Issue » 333 Release Date May 02, 2024 Your weekly report of the most popular React news, articles and projects

📱 Issue 412 - The Composable Architecture: My 3 Year Experience

Thursday, May 2, 2024

This week's Awesome Swift Weekly Read this email on the Web The Awesome Swift Weekly Issue » 412 Release Date May 02, 2024 Your weekly report of the most popular Swift news, articles and projects

💻 Issue 410 - Lessons learned after 3 years of fulltime Rust game development, and why we're leaving Rust behind

Thursday, May 2, 2024

This week's Awesome Rust Weekly Read this email on the Web The Awesome Rust Weekly Issue » 410 Release Date May 02, 2024 Your weekly report of the most popular Rust news, articles and projects

📺 How to Stop Any Smart TV From Spying On You — Single Player Games That Are Fun With Friends

Thursday, May 2, 2024

Also: Alienware's Latest Gaming Laptop is Great For Work, and More! How-To Geek Logo May 2, 2024 Did You Know The voice actors behind Mickey and Minnie Mouse throughout the 1980s, 1990s, and most