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

Advertisement

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

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.

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

 

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