10 essential web dev tools you need to know

Highlights: Remarkable one-liners, amazing web dev tools, and rapid VS Code file creation.

Sponsored by

Take control of your AWS spend and cut backup bills by 50%

As cloud adoption increases to run modernized applications, costs can quickly rise out of control. How do best-in-class companies manage their storage spend while continuing to grow the business? Clumio, a cloud-native backup solution, depends on cloud storage to run their entire business. They took a FinOps approach to optimizing their costs, and reduced their AWS dev costs by over 50%.

Puzzle of the day

Can you solve this coding puzzle?

Cool one-liner solutions to interesting JavaScript problems.

1. Baffling shuffling magic: Arrays

Everyone always talks about shuffling arrays with sort() and Math.random() - 0.5...

Isn't it cool how the data just flows freely from input to output? No stops for intermediary values along the wayđź‘Ť

2. A need for belonging: Group array by ID

3. An ID for everyone: Generate random UUID

Perfection.

Just look at the language concepts working together here; there's basic arithmetic, powers, random values, methods, bitshifting, regexes, callback functions, recursion, exponentiation... it's perfection.

4. Flip the string script: Reverse a string

Not this✖️:

But thisâś…:

10 fantastic web dev tools to level up your productivity and achieve your coding goals faster than ever.

From colorful styling effects to faster typing, these tools will boost your workflow and make a lot of things easier.

Create a playful glow that dances with the user's mouse, adding a touch of magic to your interface:

2. Vite

Ditch Create React App and make development a breeze with Vite.

Say hello to lightning-fast hot module replacement and built-in TypeScript support.

And absolutely no need to worry about outdated dependencies or vulnerable packages - unlike with Create React App.

TODO highlight lets you quick add TODO comments anywhere in your codebase and keep track of all them effortlessly.

Quickly add a TODO with comment prefixed with TODO: , then view in the Output window after running the TODO-Highlight: List highlighted annotations command

Powerful JS library for creating and animating colorful annotations on a web page with a hand-drawn look and feel.

Underline, box, circle, highlight, strike-through... many many annotation styles to choose from with duration and color customization options.

VS Code extension fully loaded with heaps of time-saving JavaScript code snippets for ES6.

Snippets like imp and imd:

From slow to lightning-fast, these the 5 ways to create a file in VS Code.

Learn the differences to know the one to use at various times and optimize your workflow.

5. File > New File…

I'm pretty sure very few people use this apart from those who are new to text editors.

You move your mouse all the way up to File then click New File...

Then you've still got to enter the filename:

THEN, a file picker dialog for you to choose the folder - never mind VS Code having its own built-in file manager.

Before finally:

4. Double-click tab bar

Not many know about this method... double-clicking the file tab bar:

Thank you for taking the time to read today’s issue.

Don’t let the bugs byte,
Tari Ibaba