Articles

Multi-line gradient links

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I'm going to use gradient links for my next project.

That's what I did for Learn JavaScript's course portal. The links look like this:

<Image src="/assets/2020/multi-line-gradient/link.gif" alt="Blue color link with blue underline. When hovered, the text has an orange to yellow gradient; underline becomes solid orange." /> I want to share what I learned about creating gradient links

Year-end review: 2019

2019 has ended. Once again, I want to conduct my year-end review in public. This time, in a lot more depth and rawness compared to the previous years.

Mongoose 101: Population

MongoDB documents have a size limit of 16MB. This means you can use subdocuments (or embedded documents) if they are small in number.

For example, Street Fighter characters have a limited number of moves. Ryu only has 4 special moves. In this case, it's okay to use embed moves directly into Ryu's character document.

<Image src="/assets/2019/mongoose-population/ryu.png" alt="Ryu's document." /> But if you have data that can contain an unlimited number of subdocuments, you need to design your database differently.

One way is to create two separate models and combine them with populate.

Mongoose 101: Working with subdocuments

You learned how to use Mongoose on a basic level to create, read, update, and delete documents in the [previous tutorial][1]. In this tutorial, we'll go a step further into subdocuments

Mongoose 101

Mongoose is a library that makes MongoDB easier to use. It does two things:

1. It gives structure to MongoDB Collections
2. It gives you helpful methods to use

In this article, you'll learn how to use Mongoose on a basic level.

What to do if you're struggling with a Bootcamp

Bootcamps are fast-paced learning environments.

Most people who enroll in a Bootcamp do quite well when it comes to HTML and CSS. But many people struggle with JavaScript. Some even get depressed about programming because they can't understand JavaScript.

If you're one of these people, I want to let you know that you're not alone. I receive emails from people like yourself occasionally.

Here's one I received from Seth.

<Image src="/assets/2019/bootcamp/seth.png" alt="Email says: I joined this coding bootcamp mid August and I was so much green to programming. I was really motivated and have been having so much interest in programming for quite a while now. I have been learning Javascript since I enrolled and I have grasped a little concept but right now I feel like QUITING, AM GIVING UP on coding. I don't feel the motivation anymore like I no longer get what the facilitator is saying. I really dont feel being in that bootcamp anymore. " />

Understanding Homebrew

Homebrew is a package manager for Mac OS. It lets you download binaries, packages, and applications with a single command.

In this article, I want to explain how to use Homebrew.

Protecting and syncing secret keys

You should never expose API keys or secrets. If you expose them, you might get into trouble. Once, I almost had to pay an excessive amount because my friend leaked my Amazon API key by accident.

What's the amount? I can't remember, but I think somewhere between $20,000 to $60,000. Thankfully, Amazon waived the charges.

It's big trouble if you expose your API keys. So don't expose them.

The best way to protect your API keys is to use environment variables.

Handling Errors in Express

I had a hard time learning how to handle errors in Express when I started. Nobody seemed to have written the answers I needed, so I had to learn it the hard way.

Today, I want to share everything I know about handling errors in an Express app.

What programming languages should you learn?

There are LOTS of languages. Picking one (or two, or three! 😱) can be scary and overwhelming at first. In this article, I want to share three things:

1. What to consider when picking languages
2. What NOT to worry about when you pick languages
3. Recommendations for languages to learn

The difference between HTML, CSS, and JavaScript

In this article, I want to explain the difference between HTML, CSS, and JavaScript with an analogy. I hope it helps you understand what these languages are, and what they do.

Style hover, focus, and active states differently

I've been styling :hover, :focus, and :active states the same way for years. I can't remember when I started styling this way. Here's the code I always use:

// Not the best approach. I'll explain why in this article
.selector {
  &:hover,
  &:focus,
  &:active {
    // Styles here
  }
}

As I paid more attention to keyboard accessibility (and therefore paying more attention to focus), I began to think we should not style hover, focus, and active states the same way.

Hover, focus, and active states should be styled different.

There's a simple reason: They're different states!

Today, I want to show you a magical way to style all three states effortlessly.

Creating a custom focus style

When you create a custom focus style, you want to think about four things:

1. Adding an outline
2. Creating animations that contain movement
3. Changing the background color
4. Changing the text color

I wrote more about this in my article on [designing focus][1]. During my research, I found three kinds of focus style I liked.

1. The one on Smashing Magazine
2. The one on WTF Forms
3. The one on Slack

<Image src="/assets/2019/create-focus/combined.png" alt="Focus styles on Smashing Mag, WTF Forms and Slack" /> Today, I want to show you how to create these focus styles and use them effortlessly across your website.

Designing a focus style

Focus is important. It tells us what element we're currently focusing on. Most developers suggest keeping the default focus style.

I think there are problems with the default style. I tried searching for inspiration to design a better focus style, but I couldn't find anything on this topic. So I did some quick research by visiting sites I use and paying attention to their focus styles.

I want to document my research and findings in this article. I hope it helps you:

1. Understand the problems with the default focus style
2. Give you some inspiration to design your own focus styles

Converting callbacks to promises

It's easier to work with Promises (or Async/await) compared to callbacks. This is especially true when you work in Node-based environments. Unfortunately, most Node APIs are written with callbacks.

Today I want to show you how to convert callbacks to promises.

Three useful Express middleware

As I created applications with Express and Node, I learned about three useful middlewares:

1. Morgan
2. Camelcase
3. Remove empty properties

Of these three, Morgan is an actual middleware. You can download [Morgan][1] from npm directly. The other two are middlewares I created with [camelcase-keys][2] and [omit-empty][3] respectively.

I want to share what these three middlewares do, and how they make life easier for me when I'm creating applications.

Inconsistent behavior among browsers when clicking on buttons

I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don't.

In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies.

Dancing with Fear

Fears and doubt often pop into my head when I work.

When I code, I wonder:

• Am I using best practices?
• Did I structure code in the best possible way?
• Am I doing it correctly?

When I write, I wonder:

• What makes me qualified to teach anything?
• Will people understand what I'm trying to say?
• THIS THING IS TOTALLY OFF-TOPIC. IT'S NOT TECH RELATED! OH MY GOD!

When I run my business, I wonder:

• Should I reply to every single email?
• Should I continue to focus on articles?
• Can I see pre-orders for courses?
• What if I can't complete my courses on time?
• Are my products and sales emails persuasive but not coming off too sales-y?

I hate having these thoughts because they make me hesitate. And I slow down in my work.

But I love these thoughts because they tell me I'm doing the right thing.

Seeding a database

When you write tests for the backend, you need to test for four different kinds of operations:

1. Create (for adding things to the database)
2. Read (for getting things from the database)
3. Update (for changing the database)
4. Delete (for deleting things from the database)

The easiest type to test for is create operations. You put something into the database and test whether it's there.

For the other three types of operations, you need to put something into the database before you write the test.

Connecting Jest and Mongoose

The hard part about testing a backend application is setting up a test database. It can be complicated.

Today, I want to share how I setup Jest and Mongoose.