Articles

My experience at CSS Conf China

Published on:

I had an exciting experience three weeks ago—I gave my first Chinese talk at the 4th CSS Conference in China, in Xiamen, on March 31st.

I learned a lot from this experience—both about myself and about the chinese development scene—and I want share my learnings with you.

Let me begin by introducing the organizer duo.

Why I restructured Learn JavaScript

Published on:

Hey, it's Zell. Today I want to tell you about an update to Learn JavaScript and a big decision I made.

I made a decision to restructure Learn JavaScript. That means I took whatever I wrote—about 9 chapters (and 60+ lessons)—and rewrote them in a different format.

This was a difficult decision because I wanted to complete and release Learn JavaScript by July 2018. If I did the restructure I won't be able to complete the course.

Second, I'm afraid I'll portray the image that I don't complete projects by the deadlines I set, which in my mind, means people who invested in the preorders don't get the products in time. I'm afraid that you'll think badly of me if I do the restructure.

But I still went ahead with it. The question is why.

Traversing the DOM with JavaScript

Published on:

A good JavaScript developer needs to know how to traverse the DOM—it's the act of selecting an element from another element.

But why do we need to learn to traverse the DOM? Isn't document.querySelector enough for most of our needs?

In this article, I'm going to show you why traversing is better that document.querySelector, and how to traverse like a pro. So sit back, relax, and enjoy the article!

How to handle the "bad experience" question

Published on:

Hey, it's Zell. Today, we have a question from a student from prefers to remain anonymous. I'm going to call this student May.

Here's her question:

May freaks out whenever a recruiter asks her to talk about a bad experience in an interview. She had a complicated situation; she didn't want to blame the company she was at, and she didn't want to say she lacked experience (and therefore sucked).

She tried to answer the question, didn't get positive results from her answers, and she's now considering lying about the bad experience to find a job.

How to build a calculator—part 3

Published on:

You learned how to build a robust calculator in the previous two lessons. Unfortunately, the code we created together confusing. If you tried to read the code again, you'll definitely get lost.

That's why we need to refactor. In this lesson, you'll learn how to refactor the calculator with some JavaScript best practices.

Job search protip—don't look for a junior position

Published on:

Today, I want to share a disturbing truth about finding a job. This may just change the way you think about how you find a job, especially if you are starting out.

You ready? Here it goes.

How to build a calculator—part 2

Published on:

This is the second part of a three-part lesson about building a calculator. By the end of these three lessons, you should get a calculator that functions exactly like an iPhone calculator (without the +/- and percentage functionalities).

Note: please make sure you finish the first part before starting this article.

You're going to learn to code for edge cases to make your calculator resilient to weird input patterns in this lesson.

To do so, you have to imagine a troublemaker who tries to break your calculator by hitting keys in the wrong order. Let's call this troublemaker Tim.

Are you too old to learn to code?

Published on:

Hey, it's Zell. Today, we a question from two students, Mark and Todd. They're in their forties and are getting started in web development, and they are worried that they're too old. Too old to learn or too old to get a job.

It's funny I get this question because I felt too old to learn to code when I was 19 years old. It took me six years to before I started to code. When I started, I was 25.

Thinking logically, if I'm too old to learn when I was 19, I should be even more afraid when I was 25. But I wasn't. I wasn't afraid because I burned my bridges. I decided I don't want to work in a bank and decided to learn to design and code. It was a do or die. I couldn't worry because I had to learn enough to find a job within a year.

How to build a calculator—part 1

Published on:

This is the start of a three-part lesson about building a calculator. By the end of these three lessons, you should get a calculator that functions exactly like an iPhone calculator (without the +/- and percentage functionalities).

Here's what you'll get:

<Image src="/assets/2018/calculator-1/calculator.gif" caption="GIF of a calculator you'll build" />

Experiment publicly

Published on:

I'm going to be honest with you. This video is probably going to suck. Why? Because I'm experimenting with something new.

I'm going to tell you what I'm experimenting with, why I'm experimenting and why you should conduct your own public experiment.

Case study—a project from hell

Published on:

Project T is a project that I don't want to remember. It was a big project for a big company—a project that I thought I would be proud to include in my portfolio; and boy, I was wrong.

Project T was bad. It lasted nine months when it was supposed to last three months. At the end, I gave a huge discount to the agency because they lost money on the project; as a result, I lost big time too.

Of the original team—a project manager, a visual designer, a UX designer and a frontend developer (me), I was the only member that survived the project till the end. Largely because of two reasons:

  1. I was stupid and naive
  2. My sense of responsibility didn't allow me to abandon the project halfway.

By the end of the 9-month long project, I was burned out, and I quit freelancing for a year.

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.