Articles

How do you decide what to build?

Published on:

"Can you tell me what should I build? I don't have any ideas!"

This is one of the biggest problems that stop developers from becoming better at their craft. Upon investigation, I discovered that people have ideas; they're just afraid their ideas are bad, would fail, or nobody would use the thing they made.

These feelings are normal. We're afraid to make things that kinda suck because we're afraid others will shame us for it. We're afraid the very thing we make will convince us that we're the useless fraud that should never have existed in this world.

Then, we freeze in fear.

It's a big problem. I can't solve the problem for you, but I hope the lessons I share in today's article can help you push yourself out of paralysis.

How to use a linter

Published on:

Today we're going to talk about linters.

When you use a linter, you will see red squiggly underlines all over your code. If you're not used to using a linter yet, it's hard not to feel like you're doing something wrong!

You don't have to feel that way.

A linter is there to help you write better code. There are reasons for the red squiggly underlines. Once you know what brings these underlines out, you'll know what to ignore and what not to.

Responsive Vertical Rhythm with CSS Custom Properties and CSS Calc

Published on:

Vertical Rhythm is an important concept in web design. It has the ability to bring a design together and make different elements feel consistent on the same page.

It was impossible to change Vertical Rhythm at different viewports previously, because we didn't have the right tools. But now, with CSS Calc and CSS Custom Properties, we can change Vertical Rhythm at different viewports. This article explains how.

Useful VS Code keyboard shortcuts

Published on:

Today, I want to share vs code shortcuts I use on a daily basis. Here's a list of what we're going to go through:

  1. Opening and closing the sidebar
  2. File explorer
  3. Marketplace
  4. Switching workspaces
  5. Opening the terminal
  6. Go to file
  7. Go to line
  8. Go to symbol
  9. The command palette
  10. Split editor
  11. Toggle editor group layout
  12. Working with tabs
  13. Select word
  14. Folding and unfolding
  15. Move line upwards or downwards.
  16. Split lines
  17. Pageup/pagedown
  18. Jump to word
  19. Expand region

Setting up Visual Studio Code (Part 3)—Extensions

Published on:

Welcome Part 3 of the VS Code setup series.

If you haven't watched the first or second parts yet, I suggest you go watch them first. Everything I'm sharing today builds on what I showed you before. For today, I want to share the extensions I use on a daily basis.

Faux Subgrid

Published on:

I was super excited when CSS Grid landed in major browsers back in March/April 2017. I thought CSS Grid was going to change the way we make layouts; it did. We gotta thank Rachel Andrew and Jen Simmons for teaching all of us us about CSS Grid.

Unfortunately, even though CSS Grid has landed, subgrid (which I consider one of the most important CSS Grid features) didn't.

But thankfully, there's a way to create subgrids with pure CSS (no hacks at all!). This method works with all browsers that support CSS Grid.

Intro to Object Oriented Programming in JavaScript

Published on:

Object-Oriented Programming is a popular style of programming that has taken root in JavaScript since the beginning.

It's so deeply rooted in JavaScript that many of JavaScript's native functions and methods are written in the Object Oriented style; you'll also find many popular libraries written in the Object Oriented style.

In this article, you'll learn what Object Oriented Programming is and how to begin using it in JavaScript.

If you already have prior experience with Object Oriented Programming in another language, please put aside the knowledge you know, and read through the entire module with a beginner's mind.

Setting up Visual Studio Code (Part 2)—HTML, CSS and JavaScript settings

Published on:

Hey, it's Zell. Welcome back to Part 2 of the VS code setup series.

If you haven't watched the 1st part yet, I suggest you go watch it first, because everything we're going to do today follows from there. Everything follows from there.

What we're going to do in this video is to setup VS code to write HTML, CSS and JavaScript properly. Let's work on HTML first.

Year End Review—2017

Published on:

2017 has ended. I didn't do a review earlier in the year because I wanted to wait till enrollment for Learn JavaScript closes. Everything that's going to happen in 2018 depended on the results of the launch.

Now that it's over, it's time for a proper review.

I want to begin the review by talking about the projects I've worked on.

Understanding And Using REST APIs

Published on:

There’s a high chance you came across the term “REST API” if you’ve thought about getting data from another source on the internet, such as Twitter or Github. But what is a REST API? What can it do for you? How do you use it?

In this article, you’ll learn everything you need to know about REST APIs to be able to read API documentations and use them effectively.

Should you use CSS or JavaScript for animations?

Published on:

When should you use CSS for your web animations? Or when should you use JavaScript? Is one better than the other? In this article, I'll show how you to use both to produce smooth animations for your web site.

Why mutation can be scary

Published on:

Unexpected changes in your JavaScript code can be a real headache. When working with objects, it can be even harder to prevent unintended mutation. In this article, I'll show you some tricks (and libraries) to prevent these unintended changes and ensure stability when working with objects.

Can I get a discount?

Published on:

{/* TODO: Move this into a page instead of a blog post */}

You'll have to pay the full fee to enroll in my courses. I don't discount anymore, with the exception of early-bird prices. This article explains why I offer early-bird prices, and why I don't discount anymore.

An introduction to animations with Greensock Animation API (GSAP)

Published on:

{/* TODO: Update this article */}

Greensock Animation API (GSAP) is an animation library that helps you create performant animations. It can be used safely (back to IE6!) to create animations without jank, and it's the only animation library (as far as I know) that handles SVG animations seamlessly.

Many animation experts, like Sarah Drasner and Chris Gannon, use and recommend GSAP.

In this article, you'll learn how to use GSAP to build simple animations.

CSS Animations explained

Published on:

The second way to animate your components is through CSS Animations. CSS Animations are like CSS Transitions, except they're way more powerful.

Dealing with Imposter Syndrome

Published on:

Two days ago, I sent out a tweet that says, "The more I learn about code, the less I realize I know, and the less confident I feel about teaching people how to code. Compound this with the fact that I'm writing a course AND selling it".

That sums up how I'm feeling these two days. If I were to put it in a nice way—I feel like shit. I haven't been sleeping well the entire week. I woke up today at 3am these two days.

When I had dinner with my wife yesterday, she said I look like I might be better off dead. Obviously that's not what she said in my face, but that's what I inferred.

CSS Transitions explained

Published on:

The simplest (and most straightforward) way to animate your components is through CSS Transitions. In this article, you'll learn how CSS Transitions work, and how to make animations with it.

How to make interactive components

Published on:

How do you make a website interactive? That's one question that many beginners get stuck at. In this video, I walk you through you need to know to build an interactive website.

Understanding for loops

Published on:

Let's say you want to run a function, bounceBall, four times. How would you do it? Like this?

function bounceBall() {
  // bounce the ball here
}

bounceBall()
bounceBall()
bounceBall()
bounceBall()

This approach is great if you need to bounceBall only for a few times. What happens if you need to bounceBall for a hundred times?

The better way is through a for loop.