Tari Ibaba

Tari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.

How to easily launch and deploy Laravel on Vultr

In this article, we’d see how easy it is to launch and deploy a Laravel server on Vultr.

Vultr is an independent cloud computing platform that provides a range of services to help businesses and developers build and deploy applications.

What does Vultr offer?

  • Cloud computing instances (servers): These are virtual machines that you can use to run your applications.
  • Managed databases: Vultr offers managed database services for popular databases like MySQL, PostgreSQL, and MongoDB.  
  • Object storage: You can store large amounts of data in Vultr’s object storage.
  • Bare metal servers: If you need more power and control, Vultr offers bare metal servers.  

How to deploy Laravel on Vultr

Head over to the Laravel page to get started:

Select Deploy.

You’ll need to create a brand new Vultr account if you haven’t already.

You’ll also need to add a payment method to deploy your servers.

Once you’re done with account setup, it’s time to get down with business:

  1. For Type, choose Optimized Cloud Compute – Dedicated CPU
  1. Choose your preferred location – Vultr has powerful server instances running in all continents
  2. Choose Laravel for the Image – this should already be pre-selected.
  1. Server Settings: You’ll create an SSH key to use with the server instance. This guide will help with the key creation.
  1. Server Hostname & Label: Enter your preferred name – I chose laravel1.
  2. That’s it for setup, it’s time to Deploy Now

Once everything is done, you’ll have a fully functional Laravel server up and running in Vultr!

NEW: Built-in TypeScript support in Node.js – Finally

Exciting news today as native TypeScript support finally comes to Node.js!

Yes you can now use types natively in Node.js.

So throw typescript and ts-node in the garbage.

❌Before now:

Node.js only ever cared for JavaScript files.

This would never have run:

Try it and you’d get this unpleasant error:

Our best bet was to install TypeScript and compile with tsc.

And millions of developers agreed it was a pretty good option:

But this was painful — having to install the same old package and type out the same command over and over again.

Extra compilation step to JS and having to deal with TypeScript configurations and stuff.

Pretty frustrating — especially when we’re just doing a bit of testing.

That was why ts-node arrived to try to save the day — but it still wasn’t enough.

We could now run the TypeScript files directly:

We could even start an interactive session on the fly like we’d do with the standalone node command:

And everyone loved it:

But it was still an extra dependency, and we still had to install typescript.

We still had more subtle intricacies to be aware of, like how to use ts-node for ES modules with the --esm flag:

✅Now:

All this changes now with all the brand-new upgrades now in Node:

  • Native built-in TypeScript support.
  • Zero dependencies
  • Zero intermediate files and module configurations

Now all our favorite JS tools like Prettier, Next.js, and Webpack can have safer and intellisense-friendly config files.

Okay almost no one has Webpack in their favorite tools list but still…

Look we already have pull requests like this to support prettier.config.ts in Prettier — and they’re going to be taking big steps forward thanks to this new development.

How does it work behind the scenes?

Support for TypeScript will be gradual, so right now it only supports types — you can’t use more TypeScript-y features like enums (although who uses enums these days).

It uses the @swc/wasm-typescript tool to internally strip the TypeScript file of all its types.

So this:

JavaScript
const url: string = 'codingbeautydev.com'; const capitalized: string = url.toUpperCase(); console.log(`Capitalized: ${capitalized}`);

Turns into this:

JavaScript
const url = 'codingbeautydev.com'; const capitalized = url.toUpperCase(); console.log(`Capitalized: ${capitalized}`);

How to start using TypeScript in Node.js

Early beginnings like I said, so it’s still experimental and for now you’ll need the --experimental-strip-types flag:

JavaScript
node --experimental-strip-types my-file

This will be in an upcoming release.

Final thoughts

Built-in TypeScript is a serious power move to make Node.js a much more enjoyable platform for JS devs. I’ll definitely be using this.

Even though the support is not yet as seamless as in Bun or Deno, it makes a far-reaching impact on the entire JavaScript ecosystem as Node is still the most popular JS backend framework by light years.

When it doesn’t work on your machine or your brain or anywhere…

Developers spend 75% of their time debugging and this is a major reason why.

Avoiding this mistake will massively cut down the bug occurrence rate in your code.

Never take new code for granted.

A simple but powerful principle with several implications.

Never assume your code works just because it looks alright

Always test your code in the real world.

And not just your machine.

You cannot trust your mind on this — That’s why bugs exist in the first place.

Bugs are always something you never expect.

It’s a big reason why debugging takes much time, especially for complex algorithms.

Your mental model of the code’s logic is hopelessly divorced from reality.

It’s often only when you carefully step through the code line-by-line & var-by-var before you finally realize the disconnect.

It’s the same reason why it can be so hard to proofread your own writing.

Your brain already knows what you meant to write. It has already created a mental model of the meaning you’re trying to convey that’s different from what’s actually there.

So what happens when you try re-reading your work for errors?

You’re far more focused on the overall intended meaning than the low-level grammatical and spelling errors.

That’s why code reviews are important — get your work scrutinized by multiple eyes that are new to the code.

That’s why testing regularly is important.

Test regularly and incrementally and you’ll catch bugs much faster and quicker.

As soon as you make a meaningful change, test it.

And this is where techniques of automated testing and continuous integration shine.

With manual testing you’ll be far more likely to procrastinate on testing until you’ve made huge changes — that are probably overflowing with bugs.

With continuous integration there’s no room for procrastination whatsoever.

As long as you commit regularly, you’ll drastically cut down on the bug turnaround time and the chances of something going horribly, mind-bogglingly wrong.

Emmet is amazing

If you’re not using Emmet you’re missing out and wasting a lot of valuable time.

It is a powerful shorthand syntax for writing large swaths of HTML and JSX code with as little effort as possible:

Use these 10 solid tips to maximize Emmet to its fullest potential and spend much less time writing repetitive HTML.

The syntax is quite similar to CSS and easy to understand.

1. Nest tags with >

Emmet makes creating a hierarchy of tags easier than ever with the > symbol:

From this:

Plain text
body>main>div>ul>li

To this:

HTML
<body> <main> <div> <ul> <li></li> </ul> </div> </main> </body>

2. Create siblings with +

Just like the + CSS selector, this lets you create elements that are siblings in the DOM hierarchy.

From this:

Plain text
header + main + aside + footer

To this:

HTML
<header></header> <main></main> <aside></aside> <footer></footer>

3. Climb up with ^

> is for drilling down and ^ is for climbing back up.

Here we create a child p in div and jump out to create a sibling ul:

So from:

Plain text
main>div>p^ul>li

To:

HTML
<main> <div> <p></p> </div> <ul> <li></li> </ul> </main>

4. Add id

Use # to create an element with an id:

Another CSS similarity.

So from:

Plain text
div#hero>p#intro+section#body

To:

HTML
<div id="hero"> <p id="intro"></p> <section id="body"></section> </div>

5. Add class

Use . to add one or more classes to the element expansion.

It uses div by default if you don’t specify an element.

Great for using all those Tailwind CSS classes:

From this:

Plain text
.container>.flex.justify-center>h1.title

To this:

HTML
<div class="container"> <div class="flex justify-center"> <h1 class="title"></h1> </div> </div>

6. Add attribute

Add one or more attributes to the element expansion with [name=value]:

From this:

Plain text
body>form>input[type="text"]+button[type="submit"]

To this:

HTML
<body> <form action=""> <input type="text" /><button type="submit"></button> </form> </body>

7. Common HTML element shorthands

Emmet is packed with helpful shorthands for common combinations of elements and their attributes:

For example:

  • input:t input[type="text"]
  • button:s button[type="submit"]
  • link:css <link rel="stylesheet" href="style.css">

So we could have written the last syntax like this:

Plain text
body>form>input:t+button:s

8. Grouping

You can create separate groups of element hierarchies like this:

From this:

Plain text
.container>(header>nav.fixed+h1)+(aside>.sidebar)+a

To this:

HTML
<div class="container"> <header> <nav class="fixed"></nav> <h1></h1> </header> <aside> <div class="sidebar"></div> </aside> <a href=""></a> </div>

9. Multiplication

This is one of the coolest Emmet features.

el*n to create n <el>‘s in the expansion:

From this:

Plain text
div>ul>li*5

To this:

HTML
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>

VS Code’s multi-cursor editing feature makes this even more powerful — with Ctrl + Alt + Down I easily select all the new elements to add text to all of them at the same time:

10. Lorem Ipsum

Lorem Ipsum is the standard placeholder text for designing UIs, and Emmet makes it effortless to add it for visual testing.

Just type lorem in VS Code and you’ll instantly a full paragraph of the stuff:

Type lorem again to expand the text — it intelligently continues from where it stopped:

Final thoughts

Use these 10 powerful Emmet syntax tips to write HTML and JSX faster than ever.

10 must-have VS Code extensions for web development

Visual Studio Code has thousands of extensions you can install to ramp up your developer productivity and save you from mundane tasks.

They are all available in the Visual Studio marketplace and the vast majority of them are completely free.

Let’s have a detailed look at 10 powerful extensions that significantly improve the web development experience.

1. TODO Tree

Powerful extension for creating location-specific reminders of JavaScript code tasks you’ll need to get back to later:

Just use // TODO:

2. Prettier

Prettier is a pretty😏 useful tool that automatically formats your code using opinionated and customizable rules.

It ensures that all your code has a consistent format and can help enforce a specific styling convention in a collaborative project involving multiple developers.

The Prettier extension for Visual Studio Code.

The Prettier extension for Visual Studio Code brings about a seamless integration between the code editor and Prettier, allowing you to easily format code using a keyboard shortcut, or immediately after saving the file.

Watch Prettier in action:

Pretter instantly formats the code after the file is saved.
Pretter instantly formats the code after the file is saved.

3. ESLint

ESLint is a tool that finds and fixes problems in your JavaScript code.

It deals with both code quality and coding style issues, helping to identify programming patterns that are likely to produce tricky bugs.

The ESLint extension for Visual Studio Code.

The ESLint extension for Visual Studio Code enables integration between ESLint and the code editor. This integration allows ESLint to notify you of problems right in the editor.

For instance, it can use a red wavy line to notify of errors:

ESLint uses a red wavy line to notify of errors.

We can view details on the error by hovering over the red line:

Viewing error details by hovering over the red wavy line.

We can also use the Problems tab to view all errors in every file in the current VS Code workspace.

Using the "Problems" tab to view all errors in every file in the VS Code workspace.

4. GitLens

GitLens is another powerful extension that helps you take full advantage of Git source control in Visual Studio Code.

GitLens displays views containing essential repository data and information on the current file, such as file history, commits, branches and remotes.

The GitLens extension displaying essential repository data.

Place the cursor on any line in the editor and GitLens will display info on the latest commit where the line was changed:

5. Live Server

The Live Server extension for VS Code starts a local server that serves pages using the contents of files in the workspace. The server will automatically reload when an associated file is changed.

The Live Server extension for Visual Studio Code.

In the demo below, a new server is launched quickly to display the contents of the index.html file. Modifying index.html and saving the file reloads the server instantly. This saves you from having to manually reload the page in the browser every time you make a change.

A demo of how to use the Live Server Extension for Visual Studio Code

As you saw in the demo, you can easily launch a new server using the Open with Live Server item in the right-click context menu for a file in the VS Code Explorer.

Launcing a new server with the "Open with Live Server" item in the right-click context menu for a file in the VS Code Explorer.

6. AI assistant extensions

GenAI has booming recently and now we have extensions that give you intelligent AI code completions as you type.

And IDE-integration chatbots, some of which use context from your codebase.

Great ones you can try:

  1. GitHub Copilot: paid, $10/month
  2. Coding Beauty Assistant: free, $10 per month for more features
  3. Tabnine: has free version, $12 per month

7. CSS classname intellisense extensions

Powerful bunch of extensions for working with CSS classes.

CSS Peek lets you quickly view the CSS style definitions for various class names and IDs assigned in HTML.

The CSS Peek extension for Visual Studio Code.

Just hold down Ctrl and hover over a class name or ID to quickly peek at its definition:

A demo of the three ways to use CSS Peek.

Intellisense for CSS Class Names in HTML works hand-in-hand with CSS Peek.

To provide code completion for the HTML class attribute from existing CSS definitions found in the current workspace.

You’ll appreciate the benefits of this extension when using third-party CSS libraries containing hundreds of classes.

And when you install Tailwind CSS IntelliSense, you get the power of CSS classname peek and auto-completion in Tailwind:

8. JavaScript (ES6) Code Snippets

As the name suggests, this is an extension that comes fully loaded with heaps of time-saving code snippets for JavaScript, in ES6 syntax.

JavaScript (ES6) Code Snippets Extension for Visual Studio Code.

Here’s a demo where the imp and imd snippets from this extension are used to quickly import two modules with ES6 syntax.

A demo of how to use the JavaScript (ES6) Code Snippets extension.

9. Visual Studio Intellicode

IntelliCode is another powerful AI tool that produces smart code completion recommendations that make sense in the current code context.

It does this using an AI model that has been trained on thousands of popular open-source projects on GitHub.

The Visual Studio Intellicode extension for Visual Studio Code.

When you type the . character to access an object method or fields, IntelliCode will suggest a list of members that are likely to be used in the present scenario. The items in the list are denoted using a star symbol, as shown in the following demo.

IntelliCode is available for JavaScript, TypeScript, Python, and several other languages.

10. VSCode Icons

Icon packs are available to customize the look of files of different types in Visual Studio Code. They enhance the look of the application and make it easier to identify and distinguish files of various sorts.

VSCode Icons is one the most popular icon pack extensions, boasting a highly comprehensive set of icons and over 11 million downloads.

vscode-icons extension for Visual Studio Code.

It goes beyond file extension differentiation, to provide distinct icons for files and folders with specific names, including package.json, node_modules and .prettierrc.

A select list of the icons provided by vscode-icons.

Final thoughts

These are 10 essential extensions that aid web development in Visual Studio Code. Install them now to boost your developer productivity and raise your quality of life as a web developer.

Stop using double negatives or nobody will understand your code

This is a big mistake many developers make that makes code cryptic and unreadable.

Don’t do this:

JavaScript
// ❌ Bad: negative name const isNotVisible = doStuff(); const isDisabled = doStuff(); const isNotActive = doStuff(); const hasNoAccess = doStuff(); // ❌ Double negation console.log(!isNotVisible); console.log(!isDisabled); console.log(!isNotActive); console.log(!hasNoAccess);

Double negatives like this makes it much harder to think about the logic and conditionals in your code.

It’s much better to name them positively:

JavaScript
// ✅ Good: positive name const isVisible = doStuff(); const isEnabled = doStuff(); const isActive = doStuff(); const hasAccess = doStuff(); // ✅ Clear and readable console.log(isVisible); console.log(isEnabled); console.log(isActive); console.log(hasAccess);

There is no indirection and your brain takes zero time to parse this.

Just imagine the pain of trying to understand this:

I didn’t not forget about not being unable to use the account.

Lol I couldn’t even understand it myself even though I made it up.

Compare to the far more natural way you’d expect from a sensible human:

I remembered that I could use the account.

Control flow negation

This is a more delicate form of double negation you need to know about:

JavaScript
const isAllowed = checkSomething(); // ❌ Bad if (!isAllowed) { handleError(); } else { // ❌ double negation! handleSuccess(); }

It’s double negation because we’re checking for the negative first.

So the else clause becomes a not of this negative.

Better:

JavaScript
const isAllowed = checkSomething(); // ✅ Fix: invert the if if (isAllowed) { handleSuccess() } else { handleError(); }

The same thing for equality checks:

JavaScript
// ❌ Double negation if (value !== 0) { doError(); } else { doSuccess(); } // ✅ Better if (value === 0) { doSuccess(); } else { doError(); }

Even when there’s no positive condition you can leave it blank — to keep the negative part in the else:

JavaScript
const hasAlreadyFetched = false; if (hasAlreadyFetched) { // nothing to do } else { doSomething(); }

This is great for expressions that are awkward to negate, like instanceof:

JavaScript
// ❌ Bad if (!(obj instanceof Person)) { doSomething(); } // ✅ if (obj instanceof Person) { } else { doSomething(); }

Exception: guard clauses

In guard clauses we deliberately deal with all the negatives first before the positive.

So we return early and avoid deeply nested ifs:

❌ Instead of this:

JavaScript
function sendMoney(account, amount) { if (account.balance > amount) { if (amount > 0) { if (account.sender === 'user-token') { account.balance -= amount; console.log('Transfer completed'); } else { console.log('Forbidden user'); } } else { console.log('Invalid transfer amount'); } } else { console.log('Insufficient funds'); } }

✅ We do this:

JavaScript
// ✅ Much cleaner function sendMoney(account, amount) { if (account.balance < amount) { console.log('Insufficient funds'); return; } if (amount <= 0) { console.log('Invalid transfer amount'); return; } if (account.sender !== 'user-token') { console.log('Forbidden user'); return; } account.balance -= amount; console.log('Transfer completed'); }

See, there’s no hard and fast rule. The end goal is readability: to make code as easy to understand in as little time as possible.

Flags always start out as false

Flags are boolean variables that control program flow.

A classic use case is running an action as long as the flag has a particular value:

JavaScript
let val = false; while (true); // do something that changes val if (val) { break; } }

In cases like this, always initialize the flag to false and wait for true.

Flags should always start out as false.

JavaScript
// ❌ waiting for true -> false let isRunning = true; while (true) { // processing... if (!isRunning) { break; } } // ✅ waiting for false -> true let hasStopped = false; while (true) { // processing... if (hasStopped) { break; } }

This makes so much sense when you understand flags to be a signal — that something is there.

Compound conditions

Negation also makes complex boolean expressions much harder to understand.

❌ Before:

JavaScript
if (!sleepy && !hungry) { console.log('time for gym👟'); } else { console.log('what to do now...'); // ❌ hard to understand when this runs }

This is where De Morgan’s Laws come in:

A powerful rule set for smoothly simplifying complex booleans and removing excessive negation:

JavaScript
let a: boolean; let b: boolean; !(a && b) === !a || !b; !(a || b) === !a && !b;

✅ So now:

JavaScript
if (!(sleepy || hungry)) { console.log('time for gym👟'); } else { console.log('what to do now...'); }

Now we can easily invert the logic as we did before:

JavaScript
if (sleepy || hungry) { console.log('what to do now...'); } else { console.log('time for gym👟'); }

It’s also structurally similar to the English in this way:

The first version was like:

(!a && !b)

It’s time for gym cause I’m not sleepy and I’m not hungry

After the refactor:

!(a || b):

It’s time for gym cause I’m not sleepy or hungry.

That’s how we’d typically say it.

Key points

  • Boolean variable names should be in the positive form. Exception: flags
  • Always check the positive case first in if-else statements. Exception: Guard clauses
  • Use De Morgan’s Laws to simplify negation in compound conditions.

How to console.log WITHOUT newlines in JavaScript

This is a little-known way to console log without newline that many developers have never used.

Let’s say we need to log in a loop like this:

JavaScript
for (let i = 1; i <= 5; i++) { // print number without newline } // Output: 1 2 3 4 5

❌ Unfortunately the normal way fails us:

So what do we do?

What we do: is process.stdout.write:

JavaScript
for (let i = 1; i <= 5; i++) { process.stdout.write(`${i} `); } // Output: 1 2 3 4 5

How is process.stdout.write different from console.log?

Well first of all, console.log IS process.stdout.write!

stdout is the fundamental way every CLI program logs output to the console.

That’s what it uses at its core:

JavaScript
Console.prototype.log = function() { this._stdout.write(util.format.apply(this, arguments) + '\n'); };

But this extra processing makes it so much better for formatting:

  • I can easily inspect objects with console.log without JSON.stringify:

But process.stdout.write fails miserably — it only accepts strings and Buffers:

But there’s something incredible only process.stdout.write can do:

Data streaming:

process.stdout is actually, a stream.

Streams represent data flow in Node.

  • Read streams — data coming from
  • Write streams — data going into
  • Duplex streams — both

Data’s flowing from the file read stream into the stdout stream.

It’s the same as this:

JavaScript
import fs from 'fs'; fs.createReadStream('codingbeautydev.txt').on( 'data', (chunk) => { process.stdout.write(chunk); } );

But pipe is much more natural for stream-to-stream data flow:

Letting you create powerful transformation pipelines like this:

JavaScript
import fs from 'fs'; import { Transform } from 'stream'; // ✅ duplex stream const uppercase = new Transform({ transform(chunk, encoding, callback) { callback(null, chunk.toString().toUpperCase()); }, }); fs.createReadStream('codingbeautydev.txt') .pipe(uppercase) .pipe(process.stdout);

process.stdin

process.stdin is the process.stdout‘s input counterpart — a readable stream for user input.

So see how with a single line I create a pipeline to reflect all my input to me:

JavaScript
process.stdin.pipe(process.stdout);

And when I insert the uppercase transformation into the pipeline:

JavaScript
import fs from 'fs'; import { Transform } from 'stream'; // ✅ duplex stream const uppercase = new Transform({ transform(chunk, encoding, callback) { callback(null, chunk.toString().toUpperCase()); }, }); process.stdin.pipe(uppercase).pipe(process.stdout);

process.stderr

Here to complete the standard stream trio.

  • console.logprocess.stdin
  • console.errorprocess.stderr

Probably also defined this way in Node:

JavaScript
Console.prototype.error = function() { this._stderr.write(util.format.apply(this, arguments) + '\n'); };
JavaScript
console.log('A normal log message'); console.error('An error message');

You can see the difference in the browser:

Although not much difference on Node:

These are 3 powerful streams that let you input, process, and output data creatively and intuitively.

10 one-liners that change how you think about JavaScript

Here’s something most JavaScript developers don’t know:

You can shorten any piece of code into a single line.

With one-liners I went from 17 imperative lines:

JavaScript
// ❌ 17 lines function extractRedirects(str) { let lines = str.split('\n'); let sourceDestinationList = []; for (let line of lines) { let sourceDestination = line.split(' '); let source = sourceDestination[2]; let destination = sourceDestination[3]; let redirectObj = { source: source, destination: destination, permanent: true, }; sourceDestinationList.push(redirectObj); } return sourceDestinationList; }

To a single functional statement:

JavaScript
// ✅ 1 line -- formatted const extractRedirects = (str) => str .split('\n') .map((line) => line.split(' ')) .map(([, , source, destination]) => ({ source, destination, permanent: true, }));

The second is so much cleaner and elegant — you can clearly see how the data beautifully flows from input to output with no breaks.

Let’s look at 10 unconventional JS one-liners that push you to the limits of what’s possible with JavaScript.

1. Shuffle array

What do you make of this:

JavaScript
// ✅ Standard Fisher-Yates shuffle, functional version const shuffleArray = (arr) => [...Array(arr.length)] .map((_, i) => Math.floor(Math.random() * (i + 1))) .reduce( (shuffled, r, i) => shuffled.map((num, j) => j === i ? shuffled[r] : j === r ? shuffled[i] : num ), arr ); // [ 2, 4, 1, 3, 5 ] (varies) console.log(shuffleArray([1, 2, 3, 4, 5]));

The most complex thing for me was figuring out the immutable no-variable version of the swap — and reduce() has a way of making your head spin.

Then there’s this too:

JavaScript
const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5); const arr = [1, 2, 3, 4, 5]; console.log(shuffleArray(arr));

I see it everywhere but it’s terrible for getting a truly uniform distribution.

2. Reverse string

❌ 8 lines:

JavaScript
const reverseString = (str) => { let reversed = ''; for (let i = str.length - 1; i >= 0; i--) { const ch = str[i]; reversed += ch; } return reversed; }; const reverse = reverseString('Indestructible!'); console.log(reverse); // !elbitcurtsednI

✅ 1 line:

JavaScript
const reverseString = (str) => str.split('').reverse().join(''); const reverse = reverseString('Indestructible!'); console.log(reverse); // !elbitcurtsednI

3. Group array by ID

Grouping arrays by a specific object property:

JavaScript
const groupBy = (arr, groupFn) => arr.reduce( (grouped, obj) => ({ ...grouped, [groupFn(obj)]: [ ...(grouped[groupFn(obj)] || []), obj, ], }), {} ); const fruits = [ { name: 'pineapple🍍', color: '🟡' }, { name: 'apple🍎', color: '🔴' }, { name: 'banana🍌', color: '🟡' }, { name: 'strawberry🍓', color: '🔴' }, ]; const groupedByNameLength = groupBy( fruits, (fruit) => fruit.color ); console.log(groupedByNameLength);

4. Generate random UUID

So many language concepts working together here:

JavaScript
const generateRandomUUID = (a) => a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace( /[018]/g, generateRandomUUID ); console.log(generateRandomUUID()); // f138f635-acbd-4f78-9be5-ca3198c4cf34 console.log(generateRandomUUID()); // 8935bb0d-6503-441f-bb25-7bc685b5b5bc

There’s basic arithmetic, powers, random values, methods, bit-shifting, regexes, callback functions, recursion, exponentiation… it’s perfection.

5. Generate random hex color

1 line to generate a random hex color:

JavaScript
const randomHexColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`; console.log(randomHexColor()); // #7a10ba (varies) console.log(randomHexColor()); // #65abdc (varies)

6. Array equality

Check array equality with a one-liner…

❌ 11 lines:

JavaScript
const areEqual = (arr1, arr2) => { if (arr1.length === arr2.length) { for (const num of arr1) { if (!arr2.includes(num)) { return false; } } return true; } return false; };

✅ 1 line:

JavaScript
const areEqual = (arr1, arr2) => arr1.sort().join(',') === arr2.sort().join(',');

Or✅:

JavaScript
// For more complex objects // and sort() will probably have a defined callback const areEqual = (arr1, arr2) => JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());

7. Remove duplicates from array

Shortest way to remove duplicates from an array?

❌ 9 lines:

JavaScript
const removeDuplicates = (arr) => { const result = []; for (const num of arr) { if (!result.includes(num)) { result.push(num); } } return result; }; const arr = [1, 2, 3, 4, 5, 3, 1, 2, 5]; const distinct = removeDuplicates(arr); console.log(distinct); // [1, 2, 3, 4, 5]

✅ 1 line:

JavaScript
const arr = [1, 2, 3, 4, 5, 3, 1, 2, 5]; const distinct = [...new Set(arr)]; console.log(distinct); // [1, 2, 3, 4, 5]

This used to be like the only reason anyone ever cared for Sets — until we got these 7 amazing new methods.

8. Validate email

Email validation one-liners are all about that regex:

JavaScript
const isValidEmail = (email) => /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test( email ); console.log(isValidEmail('[email protected]')); // true console.log(isValidEmail('[email protected]')); // false console.log(isValidEmail('wp.codingbeautydev.com')); // false console.log(isValidEmail('hi@')); // false console.log(isValidEmail('hi@codingbeautydev&12')); // false

But I’ve seen monstrosities like this (more comprehensive):

JavaScript
const isValidEmail = (email) => /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( email ); console.log(isValidEmail('[email protected]')); // true console.log(isValidEmail('[email protected]')); // false console.log(isValidEmail('wp.codingbeautydev.com')); // false console.log(isValidEmail('hi@')); // false console.log(isValidEmail('hi@codingbeautydev&12')); // false

And even these (most comprehensive) — can you even see it:

JavaScript
const isValidEmail = (email) => /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test( email ); console.log(isValidEmail('[email protected]')); // true console.log(isValidEmail('[email protected]')); // false console.log(isValidEmail('wp.codingbeautydev.com')); // false console.log(isValidEmail('hi@')); // false console.log(isValidEmail('hi@codingbeautydev&12')); // false

It’s probably about being as thorough as possible – let’s say the 1st one catches like 95% of wrong emails, then the 2nd like 99%.

The last one here is actually the official RFC 2822 standard for validating emails – so we’re looking at 100% coverage.

9. Convert JSON to Maps

JavaScript
const jsonToMap = (json) => new Map(Object.entries(JSON.parse(json))); const json = '{"user1":"John","user2":"Kate","user3":"Peter"}'; const map = jsonToMap(json); // Kate console.log(map.get('user2')); // Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' } console.log(map);

10. Convert snake to camel case

Easily convert from snake casing to camel casing with zero temporary variables.

JavaScript
const snakeToCamelCase = (s) => s .toLowerCase() .replace(/(_\w)/g, (w) => w.toUpperCase().substr(1)); const str1 = 'passion_growth'; const str2 = 'coding_beauty'; console.log(snakeToCamelCase(str1)); // passionGrowth console.log(snakeToCamelCase(str2)); // codingBeauty

Final thoughts

Countless operations jam-packed into a single statement; A race from input start to output finish with no breaks, a free flow of high-level processing. A testament of coding ability and mastery.

This is the power and beauty of JavaScript one-liners.

New native nested CSS feature in 2024: An absolute game changer

The new native nested CSS feature changes everything for frontend development and makes SASS & LESS useless.

❌ Before:

How would you style the nested elements in this HTML?

HTML
<section> Hi! <div> <p><span>codingbeautydev.com</span> -- coding as a passion</p> Coding helps you achieve a sense of purpose and growth </div> </section>

You’d normally stress yourself and waste a lot of time repeating the outer element names.

No wonder SASS and LESS became so popular.

CSS
section { font-family: Arial; } section div { font-size: 1.5em; } section div p { color: blue; } section div p span { font-weight: bold; }

✅ But now: with native CSS:

CSS
section { font-family: Arial; div { font-size: 1.2em; p { color: blue; span { font-weight: bold; } } } }

So much cleaner and easier. All the styles are now encapsulated together instead of being scattered all over the place.

As intuitive as encapsulation in object-oriented programming:

JavaScript
// ❌ redundancy const personName = 'Tari Ibaba'; const personSite = 'codingbeautydev.com'; const personColor = '🔵blue'; // ✅ encapsulate field class Person { name = 'Tari Ibaba'; site = 'codingbeautydev.com'; color = '🔵blue'; }

In some browsers, you’ll need to use &:

CSS
section { font-family: Arial; & div { font-size: 1.2em; & p { color: blue; & span { font-weight: bold; } } } }

What about classes and IDs?

What if you wanted to style nested elements by their class or id attribute?

HTML
<section class="class1"> Hi! <div id="id1"> <p class="class2"> <span id="url">codingbeautydev.com</span> -- coding as a passion </p> Coding is cognitively challenging and mentally stimulating </div> </section>

The nested CSS will be quite similar:

CSS
.class { font-family: Arial; #id1 { font-size: 1.2em; class2 { color: purple; #url { font-weight: bold; } } } }

It also works with sibling selectors:

CSS
div { section { + p { color: blue; ~ p { color: red; } } } }

Pseudo-classes and elements

Yes:

CSS
button { background-color: blue; :hover { background-color: yellow; } }

Media queries

Another huge selling point of nested CSS:

❌ Before:

Creating media queries was messy and the query styles and main styles for an element were separated:

CSS
.hamburger { display: none; } .header { font-size: 40px; } @media (orientation: landscape) { .header { font-size: 32px; } @media (max-width: 480px) { .hamburger { display: block; } .header { font-size: 24px; } }

✅ Now:

It makes more intuitive sense for the element styles to contain query styles — than for the query styles to contain small segments of the element styles.

Nested CSS lets you do this easily:

CSS
.hamburger { display: none; @media (max-width: 480px) { display: block; } } .header { font-size: 40px; @media(orientation: landscape) { font-size: 32px; } @media(max-width: 480px) { font-size: 24px; } }

With native nested CSS you can create styles in a more intuitive manner.

SASS is practically useless now — especially now that we also have native variables in CSS:

CSS
$base-font-size: 16px; $gutter-width: 10px; .container { padding: calc($gutter-width * 2); // Use calc with Sass variable font-size: $base-font-size; } .heading { font-size: calc($base-font-size * 1.5); // Modify base font size with calc }

“React” developers don’t exist

There is no such thing as a React developer — don’t ever call yourself that.

This is a huge mistake many software developers make that wastes so much of their time.

Focusing on tools instead of concepts. Losing sight of the big picture.

The fact is:

React is just a JavaScript tool. JavaScript is just a computing tool. Computing is just a problem-solving tool.

When I first started coding I was obsessed with languages and their specific syntaxes and APIs.

In fact once I hit a tiny learning roadblock I would switch to a new language expecting things to be different. And then again and again.

Not realizing that every language is fundamentally the same and built on the same core concepts!

  • Input processing output storage.
  • Selection sequence iteration.
  • Data and actions: Create Read Update Delete (“everything is CRUD”).
  • Divide & conquer: modules functions OOP…

There is no programming language anywhere that isn’t based on these core concepts. These are what you should focus on.

These are the abstract foundations of computing — of problem-solving in general.

That is why once I learned one language it was so much easier to learn any new one on the fly.

And the same thing for our natural languages — tools for communicating with other humans.

I’m learning French now and I’m seeing clear core components found in English and every other language:

  • Parts of speech: nouns, verbs & tenses, etc.
  • Grammar rules & idiosyncracies
  • Pronunciation & accent
  • Cultural idioms & slangs: that you’ll never know if you learned the language in a formal setting.

And the same thing for frameworks.

Some devs get so hung up on the specifics of React-Vue-Angular instead of focusing on the foundations:

  • Components & lifecycle: divide & conquer
  • State & updates: data flow & actions
  • SPA routing: navigation, etc.
  • Rendering: interpolation, conditional, etc.

Another mistake I made — reading and re-reading C++ books so I wouldn’t “forget” all those important string functions.

Why worry about the API specifics when you can easily look them up on Google?

And if it’s so crucial to be at your fingertips — like useEffect — that’s going to eventually happen when you search and use it enough times.

Because forgetting is a feature, not a bug.

It’s just like how many of us were taught all sorts of useless/esoteric things in school.

Instead of essential knowledge and skills to succeed in the real world:

  • How to learn, think, and solve problems
  • Social skills: negotiation, empathy, listening, etc.
  • Financial skills: Career decision, managing cashflow, investing, etc.
  • How to find fulfillment in life by setting goals and defining personal values

So programming is thinking not typing.

The tool you use to bring your thoughts into reality is less important than developing those thoughts in your brain.