Tools and Tips for Frontend Web Development

This is a collection of tools and tips I used for web development.

Minimum time to POC ⏱

You know that time when you want to quickly try out a new React component or test a CSS concept? You probably don't want to waste time pulling out a boiler template or set up the environment and wait for npm install to complete either. These puppies will help you to build a POC without all the environment hassle or long compile time.

💝 CodeSandbox

https://codesandbox.io/dashboard/recent
When you want to spin up an environment quickly without having to wait for npm packages to download, try this. With one click, you can edit and "deploy" templates provided by CodeSandbox ranging from React, React Typescript, Vue, Angular, NodeServer, Svelte. You don't even have to fuss with waiting around for your tooling to run. Just hit save and watch your React application update in an instant.

Its editor is basically VSCode (minus the extension and debuggers), so all of your familiar commands from the command palette are transferable (I use the command palette more than keyboard shortcuts in VSCode). OH WAIT, VSCode themes exist here too 🤯!

Did I mention that this is also a PWA?

There exist other alternatives, but I like CodeSandbox for its ease of use. It might be limiting in many ways, but it has a good balance between minimal configuration and complexity.

CodePen

https://codepen.io/
I featured this tool many times in other posts. It is good enough when I want to embed a small snippet of CSS or JavaScript, but support for React is kinda finicky in my experience. I use this mainly for vanilla JavaScript, simple TypeScript or CSS. The lack of a folder structure makes it hard to play with anything slightly intermediate like React Components. It shines when you try to write Sass code since it supports CSS pre-processors and common CSS libraries like sanitize.css.

StackBlitz

https://stackblitz.com/
Similar to CodeSandbox, it allows you to install npm packages easily and the editor is effectively VSCode. Unlike CodeSandbox, it lacks the command palette and themes of its competitor. It also feels less snappy. Maybe because it has very thin fonts or it has fewer animations.

CodeSpaces GitHub

https://github.com/features/codespaces/
This offering is still in early access, but it has promising features like a close replica of VSCode and tight integration with GitHub.

CLI Tools

CLI tools are great. They run fast, you can run them at any directory and they hide out of sight when you don't need them. I am a Windows user, so no apt packages or homebrew for me.

http-server from npm

https://www.npmjs.com/package/http-server
This is my go-to whenever I want to run a simple local dev server. I can specify the port, directory and it will behave exactly as what people expect from a simple dev server. Sometimes, I stream movies from my computer to my tablet with this tool.

Git Bash

https://git-scm.com/downloads
This program came long with my Git CLI installation. It is a shell that allows us to run bash stuff.

Chocolatey

https://chocolatey.org/
So far, I've only used chocolatey to install python and data science related packages. Apparently, it has JRE, Git, NodeJS too.

Starting Chrome from the CLI

https://gist.github.com/limxingzhi/8fbabe117a1a0f811b9d7f665393c4dc
Starting chrome from the CLI is so convenient. With a double click, I could launch some of my most used sites. I can even launch them in "app mode" where it will only display the DOM, without the tabs bar and all that clutter.

Helpers for npm 📊

I don't think anyone uses these tools daily, but once in awhile, it might be interesting to pop in and take a look at stats and trends of npm packages.

BundlePhobia

https://bundlephobia.com/
Are you afraid your bundle size will get out of hand? BundlePhobia will help you compare between different packages:

• visualize and compare minimum and gzipped sizes across recent versions
• visualize the number of dependencies it is using

npm trend

https://www.npmtrends.com/react-vs-@angular/core-vs-vue
This tool visualizes the download count of npm packages over time. I often used this for debates with friends about which libraries are more popular.

Glob Tester

https://globster.xyz/
If you are using a build tool, you will probably run into  globs and minimatch. Having a tester helps greatly in debugging your configuration.

Random

Stream Deck Mobile

https://www.elgato.com/en/gaming/stream-deck-mobile
The normal 15 button stream deck costs a few hundred dollars, but you can only use one stream deck on one device. With a month USD 4 subscription, you can use your mobile phone/tablet as stream deck. The app behaves exactly as a physical stream deck will. As a bonus, you can use as many mobile devices you want with as many host computers you want for a single

With my tablet facing me and mounted on an arm, I could control my music, start VSCode tasks, open commonly used web and native apps, reposition windows across screens, move windows across virtual desktops, all with a single tap and configured with a straightforward GUI. When I out of my keyboard's reach, I could use my mobile phone as a remote to control my movie or Netflix stream.

Chrome User Profiles

https://support.google.com/chrome/answer/2364824
This chrome feature allows me to easily switch between my Staizen's profile and my personal profile.

Telegram Channel as Reading List

Apart from my devstuff telegram channel, I own a private telegram channel where I use it as a reading list. I tried using other apps like pocket, but they never caught on. With telegram, I can pin the channel to the top of my chats.

Photo by Karolina Grabowska from Pexels