Articles

Understanding CSRF Attacks

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.

How to find a tag id in Convertkit

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:

1. Click the tag in Convertkit
2. Look at the URL.
3. Find the subscribable_ids parameter

Here's an example:

https://app.convertkit.com/subscribers?subscribable_ids=3061839&subscribable_type=tag

In this case, the tag ID is 3061839.

A library to make localStorage easier to use

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

New CSS Color syntax — rgb instead of rgba

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!

Don't be ashamed of tutorial hell

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.

Getting a cookie's expiry value on a server

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 create a cookie with a JSON value
• You can use another cookie to signify the expiry

Rsync with a custom port

You can rsync with a different port by adding -e "ssh --port" into the rsync command.

Rsync with Github actions when using a a custom port

If you want to rsync with a custom port in a GitHub action, you need to do three steps:

1. Add the port to as a secret
2. Add the port to known_hosts file
3. Perform the rsync action

Why I stopped using Operator Mono

I bought Operator Mono two years ago. If you don’t know, Operator Mono is this fancy code font that was in the rage back then.

It’s nice. It has a unique serif feel to it. And it has real italics on a code font. Real italics

It’s pricey too — it costs $200. It took me a long time to contemplate and I finally bought it.

<Image src="/assets/2022/operator-mono/operator_ide2.png" alt="Operator mono used for some code." loading="lazy" />

Fast forward two years, I decided to stop using Operator Mono and switch back to a free font.

Using async/await in Express

Have you noticed you write a lot of asynchronous code in Express request handlers? This is normal because you need to communicate with the database, the file system, and other APIs.

When you have so much asynchronous code, it helps to use async/await. It makes your code easier to understand.

Today, I want to share how to use async/await in an Express request handler.

Serving HTTPS locally with Node

You won't need to serve up HTTPS when developing locally because localhost is treated like a secure context.

But you need to use a HTTPS scheme even on localhost in some cases — like when you're trying to work with Facebook's API.

We're going to talk about how to serve up a HTTPS website on localhost. It's quite simple. Really.

Get good at the hiring game

You may be frustrated with how the industry uses "wrong" practices to filter out candidates — most companies focus on data structure, algorithm and the Big O notation as interview questions when hiring.

It's wrong! Why? Because it's not like developers deal with data structures and algorithm everyday, right? Shouldn't they focus on letting someone show their project and explain their logic?! Why do they use leet code or give you a data structure for you to solve and explain when you don't care about them?

Year end review — 2021

Hello! It's a tradition for me to write a review for the year. I'm going to do it again this year even though I haven't been blogging for a couple of months.

Many things happened last year so it's easier for me to split this review up into 4 sections:

• Work
• Non Work
• What I learned
• What's for 2022

Dealing with anxiety during job interviews

It's normal to feel anxious when applying for a job. After all, you're trying to present your best self in hopes of getting the job. Today's article will help you learn to control or work with this anxiousness.

I propose four ways to work through your anxiousness

• Be pessimistic about the interview
• Don't care about the results
• Face the anxiousness head-on and work through it
• Bring your real self instead of your best self

Why I'm super excited about Astro (a new static site generator)

I found out about Astro while reading CSS Trick's newsletter. I knew I had to check it out since both Chris and Robin were excited about it. And boy, I'm excited too, even though I only read the Github Readme!.

I want to share why I'm excited about Astro today.

How and when to use Async and Defer attributes

Both async and defer attributes look like they do the same thing at first glance, but there are nuances to async and defer. Most of the time, you'd want to use defer instead of async, even though async sounds sexier.

But why?

I'd like to walk you through the differences and why you should use them (and also why you don't have to use them).

Trying Your Best is really bad advice (and strategy)

For a while I've been telling myself that it's okay as long as I tried my best. It's been a decent strategy for a long time, but it's not working for me anymore.

I want to explain why it doesn't work and what pitfalls you might want to watch out for if you use the same strategy in your life.

Rapid Mac Setup for Frontend Development

My Macbook broke down after using it for a year — the logic board got fried. I got this Mac repaired and it broke down a month later. The logic board got fried again 🤦‍♂️.

Long story short, Apple agreed to repair the Mac again for free. They also agreed to send me a new Macbook as a replacement since my current one gave me so many problems.

In the meantime, I've gotten pretty good at setting up my Mac and I'd like to share how I do this with you.

Using Gulp with Dart Sass

I'm playing around with Sass again recently and I noticed newer features (like @use and @forward) are only available on Dart Sass. Upon further inspection, I noticed that LibSass is now deprecated.

This article aims to help you get started with Dart Sass if you're using Gulp.

Disabling languages for Prettier (in VScode)

It used to be straightforward to disable languages for Prettier in VSCode. You just added a prettier.disableLanguages setting and you were done.

// In settings.json
[
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "json",
    "markdown"
  ],
]

Unfortunately, prettier.disableLanguages is deprecated so we can’t do this anymore. Here’s what we can do instead.