featured Archives - Page 5 of 13

How do computers actually understand the code you write?

By Tari Ibaba / Last updated on August 29, 2024

How do computers actually understand the code we write?

It’s interesting how some people code for several years without ever learning these essentials. And often take it for granted.

How can a simple text command somehow control millions of screen pixels in a specific area with such incredible precision?

We take it for granted, but how does this soulless machine “know” that a random “console.log()” text means it should change the specific pixels at that point in the screen to match the string in the brackets?

How can text trigger interactions with systems and servers thousands of miles away in the blink of an eye, using raw electricity?

Let’s dive into a fundamental overview of how it all works.

Why coding matters

You see at their core, computers are nothing but a gigantic network of complex interconnected circuits.

Everything your computer does comes from having electric current flow through the circuit.

The core of computing is using these currents as vessels for real-world data.

In digital computing, there are only two states of current: On (1) or Off (0). Just like in a light switch.

We use these two states to pass messages (instructions) to the complex circuit (processor/CPU).

Because of the brilliant way we design the circuit, passing different instructions to the processor makes it “do” different things (a whole other subject on its own)

In a 1-bit processor, you only have 2 possible instructions — 1 or 0 (binary).

But to make a full-fledged computer we need room for much more than two instructions.

That’s why in practice, we use batches of 1s and 0s to represent as many instructions as we need.

Possible instructions

1-bit processor: 1 and 0
2-bit processor: 11, 10, 01, 00
n-bit processor: 2^n possible instructions

We can represent them with a string of 1s and 0s. Or with hexadecimal numbers. Or with more human-friendly notation.

// They're all the same instruction

// These represent batches of electric signals in the real-world
1011100000000001000000000000000000000000

// Hex form
B8 01 00 00 00

// Human-friendly -- Assembly language
MOV EAX, 1

An instruction is like the smallest indivisible unit of any abstract action your computer can take — an atomic action.

On their own, they do incredibly basic things — adding binary numbers, moving current state from one part of the circuit to another, etc.

But the real power of computing comes when processors execute a massive amount of instructions together (millions and billions).

Luckily this isn’t a problem today as we have household processors of up to 3 GHz today — processing 3 billion instructions in a second (!).

When we code, we combine these instructions in unique ways to make amazing things happen.

Text to 1s and 0s

You could write a program by passing the electric currents directly to the processor as instructions.

You wouldn’t need any operating system or input device.

But unfortunately, you’d need sequences of thousands and millions of instructions to do anything meaningful with your computer.

It will take you several weeks and months to do something as simple as displaying a bunch of characters on the screen (like this).

That’s why we created expressive languages that could do in one line what takes dozens or hundreds of machine instructions.

Then we created programs to convert from those expressive languages to Assembly language and eventually to the machine instructions (a whole other subject on its own)

Programs that we call compilers.

Unlike our normal human languages, these expressive languages are incredibly precise with zero room for ambiguity.

So with compilers, we go from [C++] code like this:

int a = 2;
int b = 3;
int sum = a + b;

To Assembly code like this:

a:
        .long   2
b:
        .long   3
sum:
        .zero   4
__static_initialization_and_destruction_0():
        push    rbp
        mov     rbp, rsp
        mov     edx, DWORD PTR a[rip]
        mov     eax, DWORD PTR b[rip]
        add     eax, edx
        mov     DWORD PTR sum[rip], eax
        nop
        pop     rbp
        ret
_GLOBAL__sub_I_a:
        push    rbp
        mov     rbp, rsp
        call    __static_initialization_and_destruction_0()
        pop     rbp
        ret

And eventually to the set of machine instructions — what we all call programs or apps.

But the CPU doesn’t run this machine code directly.

The generated machine code is different for every operating system — that’s why .exe files can only run on Windows, and .apk can only run on Android.

When the program runs, it’s the OS that sends the actual low-level instructions for the specific processor, according to whatever is in the program.

When you connect this processor to external devices like network adapters, speakers, monitors, and more, these instructions can transmit specialized signals to these peripherals, and incredible things happen.

Final thoughts

The magic lies in the unseen dance of circuits and logic.

Each line we write sparks a journey from human intent to digital action, as electricity interprets our commands through the language of 1s and 0s.

This profound synergy transforms our abstract ideas into a tangible, interactive digital realm, revealing the intricate beauty of computing’s core.

The 5 most transformative JavaScript features from ES12

By Tari Ibaba / Last updated on August 24, 2024

ES12 was truly an amazing upgrade.

Packed with valuable features that completely transformed the way we write JavaScript.

Code became cleaner, shorter, and easier to write.

Let’s check them out and see the ones you missed.

1. Promise.any()

Before ES12, we already had Promise.all() and Promise.allSettled() to wait for an entire group of Promises.

There were several times when we’d have several Promises but only be interested in whichever one resolved first.

So Promise.any() had to come into the picture:

async function getHelpQuickly() {
  const response = await Promise.any([
    cautiousHelper(),
    kindHelper(),
    wickedHelper(),
  ]);
  console.log(response); // Of course!
}

async function cautiousHelper() {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve('Uum, oohkaay?');
    }, 2000);
  });
}

async function kindHelper() {
  return 'Of course!';
}

function wickedHelper() {
  return Promise.reject('Never, ha ha ha!!!');
}

// codingbeautydev.com

One interesting thing to note: even though any() resolves immediately, the app doesn’t end until all the Promises have resolved.

2. `replaceAll()`

Yes we already had replace() for quickly replace a substring within a string.

const str =
  'JavaScript is so terrible, it is unbelievably terrible!!';

const result = str.replace('terrible', 'wonderful');

console.log(result);
// JavaScript is so wonderful, it is unbelievably terrible!!
// Huh?

// codingbeautydev.com

But it only did so for the first occurrence of the substring unless you use a regex.

So ES12 gave us now we have replaceAll() to replace every single instance of that substring.

const str =
  'JavaScript is so terrible, it is unbelievably terrible.';

const result = str.replaceAll('terrible', 'wonderful');

console.log(result);

// JavaScript is wonderful, it is unbelievably wonderful.
// Now you're making sense!

// codingbeautydev.com

3. WeakRefs

As from ES12, a JavaScript variable can either be a strong reference or a weak reference.

What are these?

The Strong Refs are our normal everyday variables. But the Weak Refs need to be explicitly created with WeakRef():

const strongRef = { name: 'Tari Ibaba' }

const weakRef = new WeakRef(strongRef);

// codingbeautydev.com

JS variables are just references to the actual object in memory.

That’s why we can have multiple references to the same object.

const person = { name: 'Tari Ibaba' };

const me = person;

// modifies the actual object that `me` points to
person.site = 'codingbeautydev.com';

console.log(me.site); // codingbeautydev.com

But what’s the difference between a strong ref and a weak ref?

Well in programming we have something garbage collection, which is when unneeded objects are removed from memory to save resources.

In JavaScript, objects are automatically marked for garbage collected when all the strong ref variables pointing to it have become unreachable — out of scope:

The object person and me both point to is put on the destruction queue once func() runs.

func();
// 💡`person` and `me` are unreachable here

function func() {
  // 💡this object will be marked for garbage collection
  // after this function runs
  const person = { name: 'Tari Ibaba' };

  const me = person;

  person.site = 'codingbeautydev.com';

  console.log(me.site); // codingbeautydev.com
}

But look what happens here:

Even person went out of scope after func() finished, we still had me, a global strong reference.

let me;

func();
// 💡one strong reference (`me`) is still reachable

// ✅ Can always access object
console.log(me.site);

function func() {
  // 💡this object will NOT be garbage collected
  // after this function runs
  const person = { name: 'Tari Ibaba' };

  me = person;

  person.site = 'codingbeautydev.com';

  console.log(me.site); // codingbeautydev.com
}

But what if me was a weak reference?

Now after func() executes, person would be the only strong reference to the object.

So the object will be marked for garbage collection:

let me;

func();
// No strong references reachable

// ❌ Bad idea: object may not exist
console.log(me.deref().site);

function func() {
  // 💡this object will be marked for garbage collection
  const person = { name: 'Tari Ibaba' };

  me = new WeakRef(person);

  person.site = 'codingbeautydev.com';

  console.log(me.deref().site); // codingbeautydev.com
}

So why do we need weak references?

The biggest use case for them is caching.

Look what happens here: processData() runs and we have a new object stored in our cache.

Even though data becomes unreachable, the object will never be garbage collected because it has a strong reference in the cache.

let cache = new Map();

processData();

function processData() {
  const url = 'api.tariibaba.com';
  const data = fetchData(url);
  // process data for app...
}

async function fetchData(url) {
  // check cache
  const saved = cache.get(url);
  if (!saved) {
    const data = await (await fetch(url)).json();
    cache.set(url, data);
  }
  return saved;
}

But what if I want the object to be freed up after processData() exits?

I would use a WeakRef as the Map values instead:

let cache = new Map();

processData();

function processData() {
  const url = 'api.tariibaba.com';
  const data = fetchData(url);
  // process data for app...

  // 💡the object will only exist in cache
  // in this function
}

async function fetchData(url) {
  // deref weak ref
  const saved = cache.get(url).deref();
  if (!saved) {
    const data = await (await fetch(url)).json();
    // ✅ Use a WeakRef instead
    cache.set(url, new WeakRef(data));
  }
  return saved;
}

4. Logical assignment operators

Lovely syntactic sugar from ES12.

We use them like this:

left ??= right;
left ||= right;
left &&= right;

// codingbeautydev.com

Exactly the same as:

left = (left ?? right);
left = (left || right);
left = (left && right);

// codingbeautydev.com

??=. Quickly assign a value to a variable *if* it is null or undefined (“nullish”).

user.preferredName ??= generateDumbUserName();

||=. Like ??=, but assigns the value for any falsy value (0, undefined, null, '', NaN, or false).

user.profilePicture ||= "/angry-stranger.png";

And then &&=. Something like the reverse; only assigns when the value is truthy (not falsy).

user.favoriteLanguage = await setFavoriteLanguage(input.value);

user.favoriteLanguage &&= 'Assembly'; // You're lying! It's Assembly!

5. Numeric separators

Tiny but impactful new addition that made big number literals more readable and human-friendly:

const isItPi = 3.1_415_926_535;

const isItAvagadro = 602_214_076_000_000_000_000_000;

const isItPlanck = 6.626_070_15e-34;

const isItG = 6.674_30e-11;

// Works for other number bases too...

// codingbeautydev.com

The compiler completely ignores those pesky underscores — they’re all for you, the human!

Final thoughts

These are the juicy new JavaScript features that arrived in the ES12.

Use them to boost your productivity as a developer and write cleaner code with greater conciseness, expressiveness and clarity.

Promise.all() vs Promise.allSettled() in JS: The little-known difference

By Tari Ibaba / Last updated on August 21, 2024

I can’t believe some developers think they are interchangeable.

They are not.

all() and allSettled() are much more different than you think.

So let’s say I decided to singlehandedly create my own ambitious new music app to finally take down Spotify.

I’ve worked tirelessly to make several music deals and have all the backend data ready.

Now I’m creating the app’s homepage: a shameless carbon copy of Spotify showing off daily mixes, recently played, now playing, and much more.

All this data will come from different API URLs.

Of course I wouldn’t be naive enough to fetch from all the URLs serially and create a terrible user experience (or would I?)

async function loadHomePage() {
  const apiUrl = 'music.tariibaba.com/api';
  const dailyMixesUrl = `${apiUrl}/daily`;
  const nowPlayingUrl = `${apiUrl}/nowPlaying`;

  // ❌ Serial loading
  const dailyMixes = await (
    await fetch(dailyMixesUrl)
  ).json();

  const nowPlaying = await (
    await fetch(nowPlayingUrl)
  ).json();

  return { dailyMixes, nowPlaying };
}

No I wouldn’t.

So instead I use use Promise.all() to fetch from all these URLs at once:

Much better, right?

async function loadHomePage() {
  const apiUrl = 'music.tariibaba.com/api';
  const dailyMixesUrl = `${apiUrl}/daily`;
  const nowPlayingUrl = `${apiUrl}/nowPlaying`;

  // Promise.all() ??
  await Promise.all([
    fetch(dailyMixesUrl),
    fetch(nowPlayingUrl),
  ]);

  return { dailyMixes, nowPlaying };
}

Wrong.

I just made the classic developer error of forgetting to handle the error state.

Let me tell you something: When Promise.all() fails, it fails:

async function loadHomePage() {
  const apiUrl = 'music.tariibaba.com/api';
  const dailyMixesUrl = `${apiUrl}/daily`;
  const nowPlayingUrl = `${apiUrl}/nowPlaying`;

  // Promise.all() ??
  try {
    await Promise.all([
      fetch(dailyMixesUrl),
      fetch(nowPlayingUrl),
    ]);
  } catch (err) {
    // ❌ Which failed & which succeeded? We have no idea
    console.log(`error: ${err}`);
  }

  return { dailyMixes, nowPlaying };
}

What do you when one of those requests fail? Am I just going to leave that UI section blank and not try again?

But look what Promise.allSettled() would have done for us:

async function loadHomePage() {
  const apiUrl = 'music.tariibaba.com/api';
  const dailyMixesUrl = `${apiUrl}/daily`;
  const nowPlayingUrl = `${apiUrl}/nowPlaying`;
  // ...

  // Promise.all() ??
  try {
    const promises = await Promise.allSettled([
      fetch(dailyMixesUrl),
      fetch(nowPlayingUrl),
      // ...
    ]);
    const succeeded = promises.filter(
      (promise) => promise.status === 'fulfilled'
    );
    const failed = promises.filter(
      (promise) => promise.status === 'rejected'
    );
    // ✅ now retry failed API requests until succeeded
  } catch (err) {
    // We don't need this anymore!
    console.log(`error: ${err}`);
  }

  return { dailyMixes, nowPlaying };
}

Now I could easily set up a clever system to tirelessly retry all the failed requests until they all work.

async function loadHomePage() {
  const apiUrl = 'music.tariibaba.com/api';
  const dailyMixesUrl = `${apiUrl}/daily`;
  const nowPlayingUrl = `${apiUrl}/nowPlaying`;

  // Promise.all() ??
  const pending = [
    () => fetch(dailyMixesUrl),
    () => fetch(nowPlayingUrl),
  ];

  while (pending.length > 0) {
    const promises = await Promise.allSettled(
      pending.map((pending) => pending())
    );
    const newPending = [];
    promises.forEach((promise, index) => {
      if (promise.status === 'rejected') {
        newPending.push(pending[index]);
      }
    });
    pending = newPending;
  }

  return { dailyMixes, nowPlaying };
}

When all() is better

This is great, but I need to update a lot of data when a user plays a song.

The song’s stream count, the user’s history, recently played…

But the database I’m using is horrible and doesn’t have support for transactions / batched writes.

I need to find a way to make sure I can update all the data in their separate locations at the exact same time.

Luckily, Promise.all() is useful this time.

It’s all or nothing.

async function runTransaction(updates) {
  // updates are a list of DB actions
  try {
    // store db state, somehow...
    await Promise.all(updates);
  } catch (err) {
    // intelligently revert to previous state, somehow...
  }
}

With all() I’m confident that if a single updates fails, it’s over.

And now I can even bring my smart auto-retry system here, but this time everything is getting retried, after this reversal.

Final thoughts

Promise.all() — If one of us fails, we all fail.

Promise.allSettled() — You are all on your own.

10 essential VS Code tips & tricks for greater productivity

By Tari Ibaba / Last updated on August 16, 2024

73%.

Did you know that 73% of developers worldwide rely on the same code editor?

Yes, the 2023 Stack Overflow Developer Survey results are in, and yet again, Visual Studio Code was by far the most used development environment.

And we all know why: it’s awesome.

But are we fully exploring its potential? In this article, we unfold some compelling VS Code features that enhance productivity with local source control, animated typing, and rapid line deletion, amongst others. Let us start using them to achieve our coding goals faster than ever.

1. Timeline view: local source control

The Timeline view gives us local source control.

Many of us know how useful Git and other source control tools are, helping us easily track file changes and revert back to a previous point when needed.

So the Timeline view in VS Code provides an automatically updated timeline of important events related to a file, such as Git commits, file saves, and test runs.

The Visual Studio Code Timeline view is available by default in the Explorer pane.

Expand this view to see a list of snapshot of events related to the current file. Here it’s file saves, but also Git commits where the file was staged.

The Timeline view shows a list of snapshot of events related to the current file.

Hover over the snapshot item to view the date and time when VS Code made the snapshot.

Select a snapshot item to see a diff view showing the changes between the file at the snapshot time and the file presently.

2. Autosave: no more Ctrl + S

Can you count how many times you’ve used this shortcut? You probably do it unconsciously now.

The Autosave feature automatically saves files as we work on them, removing the need for manual saving. With autosave, we eliminate Ctrl + S fatigue, save time, and gain certainty of always working with the latest changes to the files.

It’s not perfect though, and it’s up to you to weigh the pros and cons – which we comprehensively cover here.

Stop autosaving your code

Visual Studio Code without autosave. — No autosave.

Visual Studio Code with autosave. — Autosave enabled – the unsaved indicator no longer shows.

Use File > Auto Save to enable the feature easily.

File > Autosave enables autosave in VS Code.

3. Do anything with Command Palette

Almost anything you do in VS Code apart from typing is a “Command”.

Commands let us accomplish tasks within the editor, and they include file-related commands, navigation commands, editing commands, and terminal commands, each optimally designed to enhance different aspects of your editing experience.

So with Command Palette we simply search for a command and select to perform the associated action.

To open the Command Palette, use this keyboard shortcut:

Windows/Linux: Ctrl + Shift + P
Mac: Shift + Command+ P

As you guessed correctly, those keyboard shortcuts to the right are a faster way to run the commands with the keyboard.

The key benefit of the Command Palette over shortcuts is when there’s a command without a shortcut, or you’re looking for a command you’re not sure exists.

4. Go to file quickly

The mouse is too slow.

Yes, you can click on the file in the Explorer pane, but for a much faster alternative use Ctrl + P to search for and open a specific file in your project.

Use Ctrl + P to search for an open a specific file in a VS Code project.

Hold Ctrl and press Tab to cycle through the list of files currently open in an editor instance.

You can even use Alt + Left and Alt + Right to quickly navigate between these open files.

All these are much faster ways to get to a file than using the cursor.

5. Go to line quickly

Jump, don’t scroll.

Quickly navigating to a line is invaluable during debugging when you need to encounter errors at specific line numbers. By jumping to those lines, you can examine the code in that particular context, evaluate variables, and troubleshoot the issue.

Use the Ctrl + G keyboard shortcut for this.

Use the Ctrl + G keyboard shortcut to quickly navigate to a particular line in Visual Studio Code.

6. Delete line quickly

You’ve got to the line now, what if you want to delete it?

Will you drag and drag to highlight and then press Delete? Will you tirelessly press Backspace until every character is gone?

Or, will you use the Ctrl + Shift + K shortcut to rapidly delete that and dozens more lines in a matter of seconds?

Use the Ctrl + Shift + K keyboard shortcut to quickly delete a line.

7. Enjoy typing with smooth cursor

VS Code has this smooth cursor feature that animates the cursor as it moves, like in MS Word. This makes typing feel more fluid and polished, as well as giving us a smoother and more natural feel as we navigate through the lines of code and place the cursor at different points.

Smooth typing in VS Code! 💡

Enhance your typing experience with this delightful cursor animation 😊

No extensions needed…

Here's how you enable it 👇🧵 pic.twitter.com/z7v4HQZYXk
— Coding Beauty (@codingbeautydev) June 5, 2023

To turn it on, opens Settings UI in the Command Palette and search for “smoot caret”.

We are looking for Editor: Cursor Smooth Caret Animation setting, which has 3 possible options:

The "Editor: Cursor Smooth Caret Animation" setting enables smooth caret animation in Visual Studio Code.

off: No smooth cursor animation
explicit: Only animates the cursor when we explicitly place it somewhere in the code.
on: Smooth cursor animation is always enabled – including when typing.

Set it to on to get the full visual experience.

8. Format code rapidly

Formatting is all about improving code readability by organizing it in a structured and consistent manner.

And if you’ve been doing this manually, you need to know that there’s a better way.

Yes, you need to start formatting code automatically with the Format Document command, easily accessible in the Command Palette. Depending on the current file’s language, a particular “default” formatter will be used to format the code using various rules of indentation, line length, braces and brackets, etc.

The "Format Document" command in the VS Code Command Palette.

While there’s a pretty decent built-in JS/TS formatter, for a more robust solution, I highly recommend the Prettier extension.

Format On Save in action in Visual Studio Code.

After installing, you’ll set it as your default formatter.

When you use manual over autosave, there’s a feature you should enable to make formatting a bit easier:

Enabling the "Editor: Format On Save" setting in VS Code.

Editor: Format On Save: “Format a file on save. A formatter must be available, the file must not be saved after delay, and the editor must be shutting down”. It is disabled by default.

So with this setting on, VS Code will automatically format your code with the current default formatter when you save the file with Ctrl + S, as you saw in the above demo.

When you do autosave, it can get tedious to continuously open the Command Palette when you’re formatting every now and then. And that’s what keyboard shortcuts are for:

Windows: Shift + Alt + F
Mac: Shift + Option + F
Linux: Ctrl + Shift + I

I’m on Windows and personally, I don’t like this default keyboard shortcut; autosave makes me format every now and then, and Shift + Alt + F got agonizing after a while.

So I changed it to Ctrl + D, Ctrl + D – a keyboard shortcut chord that’s much easier to press and remember, and has no conflicting keybinding. I recommend you do the same.

9. Save time with multi-cursor editing

One of the wow moments in my earliest VS Code days, the multi-cursor editing lets you place multiple cursors at different points, and delete or insert the same text multiple times. This speeds up editing time and boosts productivity greatly, as we get repetitive tasks done efficiently with rapid code creation.

Of course, when editing, there’s always at least one cursor. Use Alt + Click to add more.

Add multiple cursors with Alt + Click in VS Code.

You can also easily add a cursor directly above or below the current line, with Ctrl + Alt + Down or Ctrl + Alt + Up.

Add a cursor below in Visual Studio Code with the Ctrl + Alt + Down keyboard shortcut.

These shortcuts call the Add Cursor Below and Add Cursor Above commands respectively.

10. Create new folder / file quickly

There’s no serious project where we don’t create new folders and files, and if there was a way to accelerate file/folder creation, all the time saved would add up to give us a significant productivity enhancement.

If you’ve been creating new files and folders in VS Code with the new file and new folder button, then yes, there is a way.

Creating a new file/folder in VS Code with the buttons take time. — Yeah, don’t do this.

Instead of constantly moving your mouse to locate those small buttons, did you know you can just double-click on the Explorer panel to create a new file?

Double-clicking to create a new file in Visual Studio Code.

How about a new folder? Well, folders are nothing without files, and when you’re creating a new file, you can easily use the / character to indicate a hierarchy and create new folders and sub-folders to contain that file.

Using the forward-slash (/) to indicate a hierarchy and create new folders and sub-folders to contain that file — The utils folder is created to contain index.js.

It would be even more efficient to use keyboard shortcuts, which is what I did.

As a former Atom fan, I had quickly gotten used to the A and Shift + A shortcuts for creating new files and folder respectively; I knew what I had to do.

Creating a new file/folder in VS Code with keyboard shortcuts.

Create shortcuts to create a new file/folder in VS Code.

Since A and Shift + A are obviously keys used to code, I included the when values here to make sure they only create a new file/folder when the Explorer pane has focus and there’s no active cursor in the current editor.

So to use these shortcuts when typing, you’ll have to focus on the explorer pane first; click on it, or use Ctrl/Command + Shift + E.

Key takeaways

Enable local source control with Timeline view; available in Explorer pane by default.
Autosave files with File > Autosave.
Run commands in Command Palette with Ctrl + Shift + P or Shift + Command + P.
Go to a file with Ctrl + P, navigate between open files with Alt + Left/Right or Ctrl + Tab.
Go to a line with Ctrl + G.
Delete a line with Ctrl + Shift + K
Enable smooth typing with Editor: Cursor Smooth Caret Animation setting.
Format code with Format Document command, use Prettier, change shortcut to Ctrl + D, Ctrl + D
Use multiple cursors at once with Alt + Click, Ctrl + Alt + Up/Down adds one above/below
Move a line up or down with Alt/Option + Up/Down in Windows/Mac
Create a new file by double-clicking the Explorer pane or set a custom keyboard shortcut. Create a new file in a new folder with “folder/file.ext“

Check out the VS Code Key Bindings docs to learn more about keyboard shortcuts and how to customize them. It includes a complete list of all the default VS Code shortcuts in your operating system.

Final thoughts

Visual Studio Code is more than just a text editor—it’s a powerful tool that, when mastered, can significantly boost your productivity and streamline your coding workflow. The ten tips and tricks we’ve explored are just the tip of the iceberg. As you continue to navigate through VS Code, you will discover a myriad of other features and shortcuts that will further enhance your coding experience. So, keep exploring, keep learning, and remember: the key to efficient coding lies not just in the code itself, but also in the tools you use to write it.

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

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.

featured

Why coding matters

Text to 1s and 0s

Final thoughts

1. Promise.any()

2. replaceAll()

3. WeakRefs

4. Logical assignment operators

5. Numeric separators

Final thoughts

When all() is better

Final thoughts

1. Timeline view: local source control

2. Autosave: no more Ctrl + S

3. Do anything with Command Palette

4. Go to file quickly

5. Go to line quickly

6. Delete line quickly

7. Enjoy typing with smooth cursor

8. Format code rapidly

9. Save time with multi-cursor editing

10. Create new folder / file quickly

Key takeaways

Final thoughts

What I did

Actions

Reducers

Receiving real-time messages from the server

vs call()

vs apply()

Recap

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

2. `replaceAll()`

vs `apply()`