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.
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.
When you're subscribing people to Convertkit through the API, you want to use a form over a tag.
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.
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...
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.
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.
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.
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.
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;
}
It's possible to use npm packages on your frontend without any bundlers today.
This is amazing because we don't need to create complicated workflows to reuse code — we can simply retrieve the library from npm. This makes our projects simpler, more straightforward, and more welcoming for newcomers in our industry!
In this article I'm going to show you two ways to include npm packages without any bundlers. They are:
node_modules folderThe easiest way to install Node is head over to NodeJS's website and download the LTS version.
<Image src='/images/blog/node/lts.png' alt='' loading='lazy' />
The LTS Version is good enough for most users. I use LTS myself.
I researched web security recently as I was writing Understanding Asynchronous JavaScript — I wanted to make sure my recommendations were secure and that I'm not doing any of my students a disservice with my recommendations.
Unfortunately, articles in the security space were pretty hard to understand. Many words trigger lots of fear, uncertainty, and doubt in the articles. I get emotionally panicky when I read these articles — and I worry I may end up doing something wrong — even though the intention of these articles was good!
Many articles also don't disclose full details CSRF, how to set up a CSRF Attack, and how to prevent a CSRF Attack, which leaves me doubtful about what I learned. I end up having to figure things out on my own.
I want to make it easier for you to understand CSRF, so I took a stab at writing an article with complete (and step-by-step) information about CSRF Attacks. I hope this article gives you the clarity and confidence you need to build secure web applications.
Finding a tag ID in convertkit is simple. You don't need to use the API. Using the API is a roundabout way if you want to find a specific tag ID.
Here are the steps:
subscribable_ids parameterHere's an example:
https://app.convertkit.com/subscribers?subscribable_ids=3061839&subscribable_type=tag
In this case, the tag ID is 3061839.
One of the problems with localStorage is it takes in only string values. If you want to save an object, you have to convert it into JSON with JSON.stringify.
When you retrieve objects from localStorage, you need to convert the JSON value back into JavaScript with JSON.parse
If you want to support transparency in a CSS rgb or hsl function, there's no need to write rgba or hsla anymore. You can simply write rgb or hsl with a / to indicate the alpha.
No need for commas too!
Many people are trapped in tutorial hell — they hop from one tutorial to another, to another, to another, never building something on their own. And they're ashamed of it.
Don't be ashamed of tutorial hell.
Browsers handle cookie expiry so they don't pass the cookie's expiry value to the server. You have to make some adjustments if you want to get the cookie's expiry value on the server.
There are two methods:
You can rsync with a different port by adding -e "ssh --port" into the rsync command.
If you want to rsync with a custom port in a GitHub action, you need to do three steps: