Web Tools #433 - VS Code Tips, Frameworks, JS Utils, React Native

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #433 • November 4, 2021

Advertisement
Sell. Win. Celebrate. AppSumo.
AppSumo is the #1 digital marketplace for entrepreneurs, get your name in front of 1M+ entrepreneurs, founders, and small businesses. You can sell your software, ebook, PDF, template library, online course, WP plugin, extension, or even event tickets.

Start Selling Your Product Now
AppSumo

In the last 5 years or so I've felt somewhat like an outsider when it comes to my choice of text editor for my daily coding and development. Years ago I moved to Sublime Text and I'm still using it today as my primary editor. Because of that, I feel a little bit old school as it seems most developers nowadays have moved on to VS Code.

Of all the Microsoft-built products over the years, VS Code seems to be the one that has resonated the most with developers and programmers. I don't think I've ever heard anyone say a negative thing about VS Code – which is quite an accomplishment for a Microsoft product! It's more or less become in the IDE industry what Google became to the search engine industry in the early 2000s.

If you're like me and you're still hanging on to your old editor or IDE, a YouTube video by Fireship might be just what you need to consider a switch to VS Code.

25 VS Code Productivity Tips and Speed Hacks

AAAAAA

I'm predicting the above video will be the most clicked link in my newsletter this year – that's just how popular VS Code is!

Even if you're a seasoned veteran with VS Code, I'm sure you'll find a few things in there worth using. But especially if you're new to the tool, the video starts out with a lot of the basic features you'll use regularly. Usefully, the video description includes a time-stamped table of contents, so you can jump to any of the tips that grab your eye.

And if you're looking for even more tips, Fireship encouraged commenters to drop their favourite VS Code tips in the discussion, adding to what is already a treasure-trove of productivity tips and hacks.

I share a lot of VS Code extensions in this newsletter but I wish I could say I'm an expert in using it. I'll definitely be spending some time with the above video and who knows, maybe I'll start to move over to VS Code soon.

Now on to this week's tools!
 

 

Front-end Frameworks

Sell. Win. Celebrate. AppSumo.
AppSumo is the #1 digital marketplace for entrepreneurs, get your name in front of 1M+ entrepreneurs, founders, and small businesses. You can sell your software, ebook, PDF, template library, online course, WP plugin, extension, or even event tickets. sponsored 

Refine
A React-based framework for building data-intensive applications that ships with the Ant Design System, an enterprise-level UI toolkit.

NextUI
A beautiful, responsive, open-source, fast, and modern React UI library that's themeable and has light and dark UI modes.

Tonic
A tiny (~400 lines unminified) component framework that uses native web components with no build process –  ideal for Jamstack sites.

Flowrift
A set of  beautifully-designed Tailwind CSS UI blocks grouped by category and compatible with Tailwind's default config.

ultimate-saas-ts
An opinionated template to quick-start a SAAS project using Typescript, Next.js, NextAuth.js, Prisma, Stripe, Tailwind, and PostgreSQL.

Inovatik
A set of 20+ free HTML templates that include images for use in any project and no attribution required.

Inovatik

MDB React
The React version of MDB, a UI kit based on Bootstrap 5 and Material Design 2.0.

Kraken
High-performance web rendering engine, built on Flutter and compatible with Vue, React, and an older framework called Rax.

XState Next Boilerplate
A performant, robust starting point for any React application using XState and Next.js.

react-portfolio-template
A clean, beautiful, minimal and responsive portfolio template for developers to showcase their work.

Next js Blog Boilerplate
A starter project to build a blog built with Next.js,TypeScript, ESLint, Prettier, PostCSS, and Tailwind.

Mobile Tools and React Native

Wynter
Participate in 10-15 min research surveys and get paid for your feedback. Earn up to $90-$200/hr.  sponsored 

Abstract
A mobile-first React prototyping tool built for mobile developers, with React-Bootstrap component integration.

react-native-star-rating-widget
A customizable, animated star rating component for React Native, compatible with iOS and Android and written in TypeScript.

React Native Header Views
Add a fully customizable "Header View" to your React Native app with multiple design options.

Colorwaver
An iOS or Android app to detect color palettes in the real world using your phone camera, powered by Vision Camera for React Native.

image360viewer
A library that lets you add a 360 degrees product view to your React Native and Expo apps.
 
image360viewer

react-native-iap
A React Native module to add in-app purchases to your mobile app, compatible with Android, iOS, and Amazon.

react-native-svg-app-icon
CLI tool for generating all the necessary iOS and Android application launcher icons for React Native projects from a single SVG source file.

react-native-swipe-list-view
A React Native ListView component with rows that swipe open and closed.

react-native-modal-datetime-picker
A React Native date/time picker for Android and iOS.

React Native Camera
A popular camera component for React Native that also supports barcode scanning.

react-native-bootsplash
React Native component to add a loading/splash screen to your app when it boots up.

react-native-modal-popover
A React Native pure JavaScript popover component, as a replacement for an older library that's now out of date.
 

JavaScript Utilities

Morning Brew
A free daily newsletter that keeps you informed and entertained. Find out why over 3 million people read Morning Brew.   sponsored 

Puppeteer Data Extractor
A JavaScript utility to extract data from a web page using Puppeteer.

Analytics
A tiny open-source analytics abstraction library for the browser and Node.js.

Ninja Keys
Adds a keyboard shortcuts interface to a website, and can be integrated in plain JavaScript, React, Vue, or Svelte.

Partytown
Experimental library that allows you to relocate resource-intensive third-party scripts off the main thread and into a web worker.

Atropos
A lightweight JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Blobity
Free to use for open-source projects. A cool library that adds unique functionality to the cursor (animations, hover effects, tool tips, etc) on any page.
 
Blobity

Cead Consent Manager
A simple and lightweight cookie/tracking consent manager to implement a simple 'accept' or 'deny' dialog that to enable or disable cookies/tracking.

micromark
A small CommonMark or GitHub-flavoured Markdown-compliant markdown parser with positional info and concrete tokens.

Fette­Palette
A lightweight, dependency-free and fast JavaScript function written in TypeScript that generates color ramps based on a curve within the HSV color model.

country-code-emoji
A utility to convert country codes (ISO 3166-1 alpha-2) to corresponding emoji flags (unicode regional indicator symbols).

WidgetBot
A pixel-perfect open-source Discord chat widget to add to a website that requires Node.js 10+ and Yarn.
 

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Gravity - Build a Node.js & React app at warp speed with a SaaS boilerplate.

Tech Productivity  - Newsletter for tech pros who want to get stuff done. ad 

Backlight.dev - An all-in-one design system platform for front-end teams.

KatLinks - An affordable SEO tool for SaaS startups.

Iterate - Create targeted, user-friendly, and on-brand surveys in minutes. ad 

ValueTools - An essential toolset to boost developer productivity.
 

A Tweet for Thought

This is cool! I had no idea GitHub gives out these types of awards.

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

The oddest thing you'll see today is Dead Startup Toys. It's a showcase of toy versions of iconic failed startups. All the ones listed are sold out and there doesn't seem to be any indication that there's more coming.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books / Buy Me a Coffee

Older messages

Web Tools #432 - CSS Tools, Testing/Debugging, Media/SVG

Thursday, October 28, 2021

Web Tools Weekly WEB VERSION Issue #432 • October 28, 2021 Advertisement Retool is the Fast Way to Build Internal Tools Visually design apps that interface with any database or API. Switch to code to

Web Tools #431 - App Notifications, VS Code, DB, Git/CLI Tools

Thursday, October 21, 2021

Web Tools Weekly WEB VERSION Issue #431 • October 21, 2021 The following intro is a paid product review for Courier, a platform and API to easily add multi-channel notifications to your web app. Many

Web Tools #430 - JS Libraries, React Tools, Uncats

Thursday, October 14, 2021

Web Tools Weekly WEB VERSION Issue #430 • October 14, 2021 Advertisement Retool - Build Internal Tools 10x Faster Retool gives you a powerful set of building blocks: tables, lists, charts and more.

Web Tools #429 - Frameworks, SVG, React Tools

Thursday, October 7, 2021

Web Tools Weekly WEB VERSION Issue #429 • October 7, 2021 Advertisement Retool - Build Internal Tools 10x Faster Retool gives you a powerful set of building blocks: tables, lists, charts and more.

Web Tools #428 - React Auth, CSS Tools, Bundlers, Angular

Thursday, September 30, 2021

Web Tools Weekly WEB VERSION Issue #428 • September 30, 2021 The following intro is a paid product review for Userfront, a developer-friendly service to add user authentication to your React apps. If

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your