Tari Ibaba, Author at Coding Beauty

I hacked Firebase with Redux to get free Web socket hosting (bye Pusher)

By Tari Ibaba / Last updated on August 13, 2024

I was planning a powerful real-time app so Web Sockets was essential.

Unfortunately, all the Web Socket hosting options I found were too costly or complex to set up.

So, I hacked Firebase to get Web Sockets for free with an innovative trick from Redux.

Web sockets great cause unlike our classic HTTP request-response style, the web socket server can send several messages to multiple connected clients in real time without any need for a request.

Firebase Firestore is free and has this powerful real-time ability by default, but there was a major problem.

Firestore is data-centric and client-centric

But Web Sockets are action-centric and server-centric.

As a client in Web Sockets, you send event messages through channels and the server uses them to decide what to do with the data.

It has complete control, and there’s no room for malicious manipulation from any user.

// channel to listen for events in server
channel.bind('sendChatMessage', () => {
  // modify remote database
  // client doesn't know what's happening
});

But in Firestore, you dump the data in the DB and you’re done. The client can store whatever they want. Anyone can access anything in your DB once they have the URL.

// client can do anything
const handleSendChatMessage = ({ content, senderId }) => {
  const messagesRef = collection(
    `users/${userId}/messages`
  );
  addDoc(messagesRef, {
    content: 'whatever I want',
    senderId: 'whoever I want',
    timestamp: new Date(),
  });
};

Sure, you can add “security rules” to protect certain data paths:

But it’s woefully inadequate compared to the flexibility and remote control that real Web Socket servers like Pusher provide.

And yes there was Pusher, but it only allowed a measly amount of free concurrent connections, and in this app, all my users needed to be permanently connected to the server, including when they closed the app.

My delusions of grandeur told me I’d be paying quite a lot when thousands and millions of people start using the app.

But what if I could make Firebase Firestore act like a real server and have complete control of the data?

I’d enjoy the generous free limits and have 1 million concurrent connections.

What I did

I needed to transform Firestore from data-centric to action-centric.

But how exactly could I do this? How could I bring channels to Firestore and create some sort of “server” with full power to regulate the data?

The answer: Redux.

But how? How does Redux have anything to do with Firebase?

Well, it was Redux that helped transform vanilla React from data-centric:

const handleSendChatMessage = (content, senderId) => {
  // sets messages directly
  setMessages((prev) => [...prev, { content, senderId }]);
};

To action-centric:

const handleSendChatMessage = (content, senderId) => {
  const action = {
    type: 'sendChatMessage',
    payload: { content, senderId },
  };
  dispatch(action);
};

Now the responsibility for modifying the data is in the hands of the reducers, just like in a Web Socket or HTTP server.

Actions: Sending a real-time message in a channel from client to server
Reducer: Handling the message and modifying the data in the Web Socket server

So I needed to bring actions and reducers to Firestore somehow. And eventually, I saw that it all came down to the schema.

Actions

To replicate actions and action dispatching I created a Firestore collection of channels for different topics.

Every channel is a Firestore document with its own subcollections for each user to receive real-time messages from them.

To send an event through the channel, the client simply adds it to its own subcollection in the channel.

const handleSendChatMessage = async ({ content }) => {
  const channel = 'chat1';
  const actionsRef = collection(
    getFirestore(),
    `channels/${channel}/${userId}`
  );
  await addDoc(actionsRef, {
    channel: 'sendChatMessage',
    payload: {
      content,
    },
  });
};

We can abstract this into a function to make it easier to reuse:

const handleSendChatMessage = async ({ content }) => {
  send('sendChatMessage', { content });
};

async function send(channel, data) {
  const actionsRef = collection(
    getFirestore(),
    `channels/${channel}/${userId}`
  );
  await addDoc(actionsRef, {
    channel: channel,
    payload: data,
  });
}

Reducers

Now I needed to add the action handling to modify the data.

I did this by creating a Firebase Function triggered anytime a client adds a new action to the collection stream:

exports.handleEvent = onDocumentCreated(
  'channels/{channelId}/{userId}/{eventId}',
  (snap, context) => {
    const event = snap.data();
    const {
      payload: { content },
    } = event;
    const { channelId, userId } = context.params;
    switch (event.type) {
      case 'sendChatMessage':
        // 👇 actual data modification
        db.collection(`chats/${channelId}/messages`).add({
          content,
          senderId: userId,
          timestamp: FieldValue.serverTimestamp()
        });
    }
  }
);

So the data would live side-by-side with the action stream collection in the same Firestore DB:

No user will ever be able to access this data directly; Our security rules will only ever them to send messages through their subcollection in the channels collection.

Receiving real-time messages from the server

I create a special subcollection within every channel, exclusively for events from server to clients.

Here I relay the new message to other users in the chat after storing the data.

exports.handleEvent = onDocumentCreated(
  'channels/{channelId}/{userId}/{eventId}',
  async (snap, context) => {
    // ...
    switch (channel) {
      case 'sendChatMessage':
        // ...
        const channelRef = db.doc(`channels/${channelId}`);
        const otherUserIds = (await channelRef.get())
          .data()
          .userIds.filter((id) => id != senderId);
        const serverEventsRef = db.collection(
          `channels/${channelId}/server`
        );
        serverEventsRef.add({
          type: 'sendChatMessage',
          targetIds: otherUserIds,
        });
    }
  }
);

Now just like I added Cloud Function triggers in the server, I add client-side Firestore listeners for the server sub-collection:

One key difference is the filtering by targetIds to only get the messages meant for this client:

useEffect(() => {
  onSnapshot(
    query(
      collection(`channels/${chatId}/server`),
      // ✅ filter by targetId
      where('targetIds', 'array-contains', userId)
    ),
    (snapshot) => {
      snapshot.docs.forEach((doc) => {
        const action = doc.data();
        switch (action.type) {
          case 'sendChatMessage':
          // add message to list
        }
      });
    }
  );
}, []);

And I could also abstract this logic into a function to use it several times:

useEffect(() => {
  listen('sendChatMessage', (data) => {
    console.log(data);
  });
}, []);

function listen(channel, callback) {
  onSnapshot(
    query(
      collection(`channels/${channel}/server`),
      where('targetIds', 'array-contains', userId),
      // ✅ filter by type
      where('type', '==', channel)
    ),
    (snapshot) => {
      snapshot.docs.forEach((doc) => {
        const event = doc.data();
        callback(event);
      });
    }
  );
}

So with this, I’d fully replicated real-time server-centric Web Socket functionality in Firebase without spending a dime.

Would work perfectly in Realtime Database too.

bind() vs call() vs apply() in JavaScript: The little-known difference

By Tari Ibaba / Last updated on August 15, 2024

Every developer should fully understand how they work and be able to discern the subtle differences between them.

So you know, JS functions are first-class citizens.

Which means: they’re all just object values — all instances of the Function class, with methods and properties.

So bind(), apply(), and call() are 3 essential methods every JavaScript function has.

Were you with me in the painful early days of React; when we still did this? 👇

This was just one of the multiple applications of bind() — a seriously underrated JavaScript method.

// damn class components are such a chore to write now
import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  greet() {
    alert(`Hi, I'm ${this.props.name}!`);
  }

  // remember render()?
  render() {
    return (
      <button onClick={this.greet.bind(this)}>Click me</button>
    );
  }
}

export default MyComponent;

sayName() would be a mess without bind() — the alert() would never work.

Because internally React is doing something fishy with this method that completely screws up what this means inside it.

Before sayName would have had absolutely no problems showing the alert — just like in this other class:

class Person {
  props = { name: 'Tari' };

  greet() {
    console.log(`Hi, I'm ${this.props.name}!`);
  }
}

const person = new Person();

person.greet();

But guess what React does to the greet event handler method behind the scenes?

It reassigns it to another variable:

class Person {
  props = { name: 'Tari' };

  greet() {
    console.log(`Hi, I'm ${this.props.name}!`);
  }
}

// reassign to another variable:
const greet = Person.prototype.greet;

// ❌ bad idea
greet();

So guess what happens to this — it’s nowhere to be found:

This is where bind comes to the rescue — it changes this to any instance object you choose:

So we’ve binded the function to the object — the bind target.

(I know it’s “bound” but let’s say binded just like how we say “indexes” for “index” instead of “indices”).

It’s immutable — it returns the binded function without changing anything about the original one.

And this lets us use it as many times as possible:

vs call()

There’s only a tiny difference between call and bind

bind creates the binded function for you to use as many times as you like.

But call? It creates a temporary binded function on the fly and calls it immediately:

class Person {
  constructor(props) {
    this.props = props;
  }

  greet() {
    console.log(`Hi, I'm ${this.props.name}`);
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

greet.bind(person)();

greet.call(person);

So call() is basically bind() + a call.

But what about when the function has arguments? What do we do then?

No problem at all — just pass them as more arguments to call:

class Person {
  constructor(props) {
    this.props = props;
  }

  greet(name, favColor) {
    console.log(
      `Hi ${name}, I'm ${this.props.name} and I love ${favColor}`
    );
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

// bind(): normal argument passing to binded function
greet.bind(person)('Mike', 'blue🔵');

// call(): pass as more arguments
greet.call(person, 'Mike', 'blue🔵');

And you can actually do the same with bind():

// the same thing
greet.bind(person)('Mike', 'blue🔵');

greet.bind(person, 'Mike', 'blue🔵')();

vs `apply()`

At first you may think apply() does the exact same thing as call():

class Person {
  constructor(props) {
    this.props = props;
  }

  greet() {
    console.log(`Hi, I'm ${this.props.name}`);
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

greet.call(person); // Hi, I'm Tari

greet.apply(person); // Hi, I'm Tari

But just like bind() vs call() there’s a subtle difference to be aware of:

Arguments passing:

class Person {
  constructor(props) {
    this.props = props;
  }

  greet(name, favColor) {
    console.log(
      `Hi ${name}, I'm ${this.props.name} and I love ${favColor}`
    );
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

//💡call() -- pass arguments with comma separated
greet.call(person, 'Mike', 'blue🔵'); // Hi, I'm Tari

//💡apply() -- pass arguments with array
greet.apply(person, ['Mike', 'blue🔵']); // Hi, I'm Tari

One mnemonic trick I use to remember the difference:

call() is for commas
apply() is for arrays

Recap

bind() — bind to this and return a new function, reusable
call() — bind + call function, pass arguments with commas
apply() — bind + call function, pass arguments with array

How to easily launch and deploy Laravel on Vultr

By Tari Ibaba / Last updated on August 7, 2024

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:

For Type, choose Optimized Cloud Compute – Dedicated CPU

Choose your preferred location – Vultr has powerful server instances running in all continents
Choose Laravel for the Image – this should already be pre-selected.

Server Settings: You’ll create an SSH key to use with the server instance. This guide will help with the key creation.

Server Hostname & Label: Enter your preferred name – I chose laravel1.
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

By Tari Ibaba / Last updated on August 3, 2024

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:

const url: string = 'codingbeautydev.com';

const capitalized: string = url.toUpperCase();

console.log(`Capitalized: ${capitalized}`);

Turns into this:

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:

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…

By Tari Ibaba / Last updated on August 6, 2024

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

By Tari Ibaba / Last updated on August 6, 2024

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:

body>main>div>ul>li

To this:

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

header + main + aside + footer

To this:

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

main>div>p^ul>li

To:

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

div#hero>p#intro+section#body

To:

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

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

To this:

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

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

To this:

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

body>form>input:t+button:s

8. Grouping

You can create separate groups of element hierarchies like this:

From this:

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

To this:

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

div>ul>li*5

To this:

<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

By Tari Ibaba / Last updated on July 30, 2024

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

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

GitHub Copilot: paid, $10/month
Coding Beauty Assistant: free, $10 per month for more features
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

By Tari Ibaba / Last updated on July 30, 2024

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

Don’t do this:

// ❌ 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:

// ✅ 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:

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:

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

The same thing for equality checks:

// ❌ 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:

const hasAlreadyFetched = false;

if (hasAlreadyFetched) {
  // nothing to do
} else {
  doSomething();
}

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

// ❌ 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:

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:

// ✅ 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:

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.

// ❌ 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:

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:

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

✅ So now:

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:

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

By Tari Ibaba / Last updated on July 20, 2024

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:

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:

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:

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:

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:

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:

process.stdin.pipe(process.stdout);

And when I insert the uppercase transformation into the pipeline:

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.log → process.stdin
console.error → process.stderr

Probably also defined this way in Node:

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

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

By Tari Ibaba / Last updated on July 16, 2024

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:

// ❌ 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:

// ✅ 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:

// ✅ 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:

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:

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:

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:

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:

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:

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:

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:

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

Or✅:

// 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:

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:

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:

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('codingbeautydev.com')); // false

console.log(isValidEmail('hi@')); // false

console.log(isValidEmail('hi@codingbeautydev&12')); // false

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

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('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:

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('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

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.

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.

Tari Ibaba

What I did

Actions

Reducers

Receiving real-time messages from the server

vs call()

vs apply()

Recap

How to deploy Laravel on Vultr

How does it work behind the scenes?

How to start using TypeScript in Node.js

Final thoughts

1. Nest tags with >

2. Create siblings with +

3. Climb up with ^

4. Add id

5. Add class

6. Add attribute

7. Common HTML element shorthands

8. Grouping

9. Multiplication

10. Lorem Ipsum

Final thoughts

1. TODO Tree

2. Prettier

3. ESLint

4. GitLens

5. Live Server

6. AI assistant extensions

7. CSS classname intellisense extensions

8. JavaScript (ES6) Code Snippets

9. Visual Studio Intellicode

10. VSCode Icons

Final thoughts

Control flow negation

Exception: guard clauses

Flags always start out as false

Compound conditions

Key points

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

process.stdin

process.stderr

1. Shuffle array

2. Reverse string

3. Group array by ID

4. Generate random UUID

5. Generate random hex color

6. Array equality

7. Remove duplicates from array

8. Validate email

9. Convert JSON to Maps

10. Convert snake to camel case

Final thoughts

vs `apply()`

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