Changing CSS Variables with Tailwind
Published on:Today I discovered that you can change CSS Variables with Tailwind on the fly.
Today I discovered that you can change CSS Variables with Tailwind on the fly.
I've put in months of work into Splendid UI by now, and I realised how difficult it is to create an Astro-first component library.
The hardest part is designing the usage API.
I think we have reached an interesting predicament in the world today.
More and more people have begun to write for the sake of business, opportunities, and fame. Blogs and content have largely become soulless and money-oriented machines.
It has reached a point where the world has become a giant group-think. Everywhere you go on Google, you see the same content, repeated across the top 10 or even the top 20 pages — everyone echoes off others, rarely contributing original thought into the ecosystem.
CSS Variables have become super popular for many reasons. One of them these reasons is — you can now manipulate CSS easily with JavaScript.
In this article, we'll go through how to get and set CSS variables using the methods Vanilla JavaScript provides us with, then we'll go through how to make the process easier with simple helper functions.
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.
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:
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.
One thing I really loved about Svelte is their reactive statements — you can simply just change a value and the UI gets updated accordingly.
Once in a while, you may need to loop over objects in JavaScript. Before ES6, the best way to do this is with the for...in
loop.
Unfortunately, the for...in
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
.
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.
I managed to release 2-3 chapters of my courses in Magical Dev School for free.
When I was building the Magical Dev School website, I accidentally stumbled on a way to make Neon buttons look good.
When using Tailwind with Astro, you’ll notice that Tailwind’s space utilities stop working when you use it with Astro Components or Slots .
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.
Today I want to introduce you a utility that will make caching in the local file system extremely easy.
This utility is called fileCache
and it’s built into Splendid UI.
"Now" is grossly inaccurate because zlFetch
has supported Form Data since v5.0 (since April) and we’re already at v6.0 🙃.
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.
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.
I’ve been working on this for a long time and I’m happy to share with you that the Magical Dev School student portal is live!
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.
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.