Articles

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.

How AI will shape the coding ecosystem in the future

Published on:

Most people will think that AI contributes greatly to the coding ecosystem. On the contrary, I have a nagging feeling that things might become a disaster if things continue to pan out the way it currently going.

Building fancy list items in Astro

Published on:

You probably saw many websites using cool bullet points instead of plain old-boring ones. How do they do it? Is there an effective and simple way to create fancy bullets while writing really simple code?

The answer is there is — with Astro, it's possible. You can simply write markdown and out comes a nicely formatted bullet you made with SVGs.

The Spirit of CSS Tricks is now gone

Published on:

If you haven't heard the news, Geoff Graham — the chief editor behind CSS Tricks — got fired by Digitial Ocean yesterday, a few months after they acquired it.

This is leaving a bad taste in my mouth because Digital Ocean did promise to keep the spirit of CSS Tricks running...

But they blatantly broke the promise...

How camel-cased classes are way better than kebab-cased classes

Published on:

I found a better way to write classes as I dove into my latest project. This approach is much better than BEM and I'm excited to share it with you today.

Long story short: The better way is to use write classes in a camel-cased syntax.

Rendering MDX in a Svelte component when using Astro

Published on:

I like to use both Svelte and MDX when I work with Astro... but I encounter a problem when using all three of them at once — I can import an MDX file directly into Astro, but can I import MDX into Svelte?

Normally, you can't. But there's a way to use MDX with Svelte. And that's what I'm going to share with you today.

Setting up Visual Studio Code for Web Development — For Beginners and Intermediate Developers

Published on:

The coding environment is one of the most important things for a developer.

If you set up your coding environment with the right Linters and Formatters, coding will be very simple. If you don't, coding will be a nightmare. Why? Because linters and formatters help you catch many errors and speed up the development process (and also, remove a lot of headache you will face from your constant typos)!

Now you know the importance of the environment, the next step is to configure this environment such that it works for you. This is a difficult task because there are so many options available today.

The good news is: You don't have to do any of that difficult work because I've narrowed down the best configuration possible (in my opinion) for you.

I'm going to tell you what the configuration is and how to set it up.

Never let anyone stop you from pursuing your dreams

Published on:

Whatever you yearn to be — be it a developer, a writer, a designer or anything else in the world — never let anyone stop you from pursuing your dreams.

Your dream is something precious to you. It directs the way you want to manifest in this lifetime. And you will continue to want to manifest your dreams even if the whole world is against you.

Understanding the color-scheme property

Published on:

You would have heard of the CSS color-scheme property if you are interested in adding a dark theme to your website. Here's what it looks like:

:root {
  color-scheme: light dark;
}