Style hover, focus, and active states differently

Published on:

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 {
  &: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

Published on:

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

Published on:

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

Published on:

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

Published on:

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

Published on:

I noticed browsers were inconsistent in how they handle a click on &lt;button&gt;. 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

Published on:

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?

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

Published on:

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

Published on:

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.

Endpoint testing with Jest and Supertest

Published on:

I played around with testing lately. One thing I tried to do was to test the endpoints of my Express application.

Setting up the test was the hard part. People who write about tests don't actually teach you how they set it up. I could not find any useful information about this, and I had to try and figure it out.

So today, I want to share the setup I created for myself. Hopefully, this can help you when you create your own tests.

How to setup a local MongoDB Connection

Published on:

I always use MongoDB as a database when I work on an app. And I like to connect to a database on my computer because it speeds up dev and test-related work.

Today, I want to share how to create and connect to a local MongoDB Database.

Frontend vs Backend

Published on:

I used to think it would be easy to write backend if I knew JavaScript. I thought it would be easy because Node is JavaScript. I didn't have to learn a new language.

But I was wrong.

But backend was hard to learn. I took ages to learn it. (And I'm still trying to master it).

I realized I had problems learning backend because I thought Frontend and Backend were the same—they were just code.

That's a big mistake.

Frontend and Backend are different beasts altogether. I had to respect their differences before I could learn Backend properly.

If I were to explain the difference between Frontend and Backend (in terms of implementation), I would say:

  • Frontend is about perception
  • Backend is about communication

How to add Flexbox fallback to CSS Grid

Published on:

I shared how to build a calendar with CSS Grid in the [previous article][1]. Today, I want to share how to build a Flexbox fallback for the same calendar.

How to build a calendar with CSS Grid

Published on:

Building a calendar with CSS Grid is actually quite easy. I want to show you how to do it.

Here's what you'll create by the end of this article:

<Image src="/assets/2019/calendar-css-grid/calendar-fixed.png" alt="A calendar built with CSS Grid" />

Stages of learning

Published on:

Over time, I realized there are five stages of learning.

  1. Awareness
  2. Panic
  3. Avoidance
  4. Acceptance
  5. Learning

Shutting down Fridays with Zell

Published on:

If you stuck around for a while, you might have noticed I used to post a video (and an audio) every Friday for most of 2018. I call them "Fridays with Zell".

In 2019, I decided to stop making videos. I want to share why I decided to stop making videos.

Everything You Need to Know About Date in JavaScript

Published on:

Date is weird in JavaScript. It gets on our nerves so much that we reach for libraries (like Date-fns and Moment) the moment (ha!) we need to work with date and time.

But we don't always need to use libraries. Date can actually be quite simple if you know what to watch out for. In this article, I'll walk you through everything you need to know about the Date object.

Using Standard with VSCode

Published on:

I use [Visual Studio Code][1] as my text editor. When I write JavaScript, I follow [JavaScript Standard Style][2].

There's an easy way to integrate Standard in VS Code—with the [vscode-standardjs][3] plugin. I made a [video][4] for this some time ago if you're interested in setting it up.

But, if you follow the instructions in the video (or on vscode-standardjs's readme file), you'll come to notice there's one small detail that needs to be ironed out.

Try writing a function the old way, and save it repeatedly. VS code will toggle between having and not having a space before the left-parenthesis of the function.

<Image src="/assets/2019/vscode-standard/functions.gif" alt="VS code toggles between having and not having a space before '('."/>

You get the same problem when you write methods with the ES6 method shorthands:

<Image src="/assets/2019/vscode-standard/methods.gif" alt="Same problem happens when you create methods with ES6 method shorthands."/>

How to go through the job application process—an interview with Chris Lienert

Published on:

"Do you have any advice on finding a job as a developer?"

Many people have asked me that question, but I can’t give a proper answer because I have never been hired as a developer before. What I did was:

  1. Wriggled my way into a Wordpress dev role in an admin-based internship
  2. Freelanced
  3. Run my own company

So I'm horribly inadequate at answering a question about finding a job.

But Chris Lienert is an expert at it. Chris has experience hiring and building teams of excellent developers. (A fun aside: He used to co-run CSS Singapore, which is a monthly CSS Meetup in Singapore).

I managed to grab Chris (before he left Singapore for good) and asked him to talk about the job application process. You'll hear golden advice in this interview from Chris, like:

  1. Chris' opinions about the hiring process.
  2. How to improve your chances of getting an interview
  3. What to do if you don't get a job
  4. How you should write your CV
  5. What to do during the actual interview
  6. What questions to ask during the interview
  7. How to answer any tricky questions you get

Note: We jumped around a lot in this 1.5 chat because Chris has so much to say about this topic. I highly recommend you listen to the audio version if you can.

To make it easier for you to digest, I also summarized what we talked about into three stages:

  1. Preparing your CV/Resume
  2. Before you apply for a job
  3. The interview process

On Advocacy

Published on:

We're fierce and protective when we talk about stuff we care about. And as developers, we care a lot about these topics:

  1. Accessibility
  2. Web Performance
  3. CSS
  4. JavaScript
  5. Frameworks
  6. Inclusivity and Equality

There are no problems with voicing your opinion. We all have our opinions and we want them heard. I understand and respect that.

But we should be mindful of the way we say things. If we voice our opinions as complaints, name-calling, and shaming, our opinions don't get heard. No change would happen. They simply create a vicious cycle of worry, hate, and anxiety.

If we change how we project our voice, we can make real change happen. And our culture will change for the better.