The easiest way to get __dirname in Node with ES Modules

Published on:

Getting the directory name (or short for dirname) is extremely simple in Node prior to ES Modules (ESM).

All we had to do was use the __dirname global variable.

console.log(__dirname) // This will show the directory

Unfortunately, __dirname is not supported in ES Modules. So if we want __dirname, we need to use a rather round-about way to retrieve it.

The easiest way to use SVGs in an Astro or Svelte app

Published on:

SVG is one of the most important elements in a website or web application because it provides us with scalable graphics.

They are usually used for two things:

  1. Icons from icon sets
  2. Custom graphics

Today I'm going to show you how the SVG utility from Splendid UI works, and why it's the easiest way to use SVG to load both icons and custom graphics.

Iterating over objects in JavaScript

Published on: , Updated on:

Once in a while, you may need to loop over objects in JavaScript. Before ES6, the best way to do this is with the loop.

Unfortunately, the loop iterates over properties in the Prototype chain as well, so when you use this loop, you need to check if the property belongs to the object with hasOwnProperty.

Easy way to parse JSON with JavaScript

Published on:

When you use JSON.parse to parse JSON, you almost always need to make sure you pass in a JSON value, so you will end up having to use a try/catch block most of the time.

Updates for Understanding Async JS and Rest APIs

Published on:

I spent two weeks reworking the contents of Understanding Asynchronous JavaScript and Rest APIs and I'm happy to announce the changes I have made.

This course is now much easier to understand (and also much more succinct) compared to before. From my experience, it should now be able to resolve most of the confusion you may face around the topic of Asynchronous JavaScript and Rest APIs.

zlFetch now supports FormData!

Published on:

"Now" is grossly inaccurate because zlFetch has supported Form Data since v5.0 (since April) and we’re already at v6.0 🙃.

Limitations of Scoped CSS

Published on:

I was really excited about Scoped CSS a couple of years back when frameworks like React and Vue introduced them.

As I began trying Scoped CSS out for myself, I was disappointed and I felt it didn't live up to its hype.

But after more tries, I'm happy to announce that Scoped CSS is indeed useful. You only have to realize what its limitations are and what to do when you face these limitations.

Quality of life improvements for zlFetch

Published on:

I silently updated zlFetch a couple of months ago with some improvements that make coding much easier — especially if you're using zlFetch in Node.

Finding my roots in my business

Published on:

I’ve pretended to be happy, okay, upbeat, and positive in my communications with you in the last couple of months.

Occasionally, I have also become cunning, manipulative, and sleazy in my communications (and I loathed that).

The discomfort towards my behaviours has been taking a hold of my emotional space. And it’s creating a huge depression.

How to get better at design (for developers)

Published on: , Updated on:

As a web developer, you need to be able to design.

Why? Because of three simple reasons — and all of them help to further your career in different ways.

Here’s how to quickly test components that use container queries

Published on:

Container queries are amazing. They let us build UI that allow a component looks good no matter what size the component is displayed at.

But this feature also makes it difficult to test container queries.

If you do it normally, you have to resize your browser many times, which can be irritating and a huge waste of time.

There are better ways.

When building components in Astro, you might not want to use Astro files

Published on:

"If you're using Astro, you should build components with the astro extension".

That was my initial thought when I started using Astro. But after a couple of months building with Astro, my thinking has changed. I no longer build most of my components with astro files.

I mostly use Svelte files instead. This article explains why.

Best practices for container queries

Published on:

I've been playing around with container queries and so far, there is only one best practice that I would recommend.

Whenever you use container queries, make sure you wrap the element with a container element.

Overcoming styling frustrations caused by Astro islands and slots

Published on:

After using Astro for a while, I came to realize that Astro's biggest features — islands and slots — both delight and frustrate me.

Most people already know what the delights are, so I won't bother writing about them in this article. I'll focus on what frustrates me and how I resolve those frustrations.