bitwise

Fundamental Resources for Junior Frontend Engineers

Published: 11.28.2018

Preface

As an experienced Web/Frontend Engineer I’ve had the pleasure of mentoring a few of my colleagues, both junior and not-so-junior. During that time I’ve accumulated a few bookmarks that are always worth sharing with my peers.

This list is for those who want a deeper understanding of the fundamentals behind the tools and frameworks we all use. Whether you’re a seasoned Web/Frontend Engineer, or just getting your feet wet with the latest JS framework; there’s something here for you.

Resources

Philip Roberts: What the heck is the event loop anyway?

This is honestly one of the best technical talks I’ve seen. It’s an overview of JavaScript's Event Loop and Message Queue. Learning these concepts will give you a detailed understanding of how asynchronous code works in JavaScript. Knowing these concepts also help in diagnosing issues like a page becoming unresponsive while processing data (ever had a page just freeze on you?). I’ve watched this talk multiple times and I recommend doing so until the concepts really click. When you understand the Event Loop you can easily reason about the below code logging out a, c, b rather than b, c, a.

function a() {
  return 'a'
}

function b(cb) {
  setTimeout(() => cb('b'), 0)
}

function c() {
  return new Promise(resolve => resolve('c'))
}

b(console.log)
c().then(console.log)
console.log(a())

Chrome DevTools

Debugging is honestly the most useful skill you can have as a developer. Being proficient at debugging will save you hours of frustrating work, and also make you more productive building things.

Most people are familiar with "console debugging", that is logging out values at certain points during a process. E.g.

function filterUsersByPermission(permission, users) {
  let filteredUsers = users.filter(user => {
    // ok, which user am I dealing with?
    console.log(user)

    // does this user have a matching permission?
    let temp = user.permissions.includes(permission)
    console.log(temp)

    return user.permissions.includes(permission)
  })

  return filteredUsers
}

// why isn't this returning user "420memelord69"?
filterUsersByPermission('1337_as_heck', [
  {
    username: '420memelord69',
    permissions: ['definitely_not_1337_as_heck'],
  }
])

Using DevTools I can drop a debugger in the places I want to inspect values:

function filterUsersByPermission(permission, users) {
  let filteredUsers = users.filter(user => {
    debugger
    return user.permissions.includes(permission)
  })

  return filteredUsers
}

If I run the code above with DevTools open, I can manually iterate over the filter predicate (the "callback" being supplied to users.filter). This is a lot more flexible than just printing out values. Imagine if you passed in an array of thousands of users.

Besides the Chrome DevTools, it’s also worthwhile to know some command line basics. For example, say you're debugging a problem where some users are being marked as admins, and that logic exists in a function deep in your codebase. You can make use of grep or ag to find every occurence of that function. Given:

// src/utils/user.js
export function userIsAdmin(user) {
  return !!Math.floor(Math.random() * 2)) && user.isAdmin
}

We can run grep:

$ grep -r userIsAdmin ~/my-project/src
~/my-project/src/utils/user.js:export function userIsAdmin(user) {
~/my-project/src/admin/index.js:    userIsAdmin({})
~/my-project/src/index.js:  if (userIsAdmin({ isAdmin: false })) {

We now know that userIsAdmin is being called from src/index.js, and src/admin/index.js. From here I can easily debug if the issue exists in those files or the function userIsAdmin itself.

Additional resources:

Testing JavaScript

This is the resource for learning to test JavaScript applications. Kent explains how to avoid testing implementation details, and advocates for testing best practices. This is the only paid resource in this list and I wouldn’t advocate for it unless I truly believed that it’s worth every penny.

Introduction to the DOM

A lot of DOM interactions are abstracted by frameworks and libraries. It’s still really important to know what’s going on under the hood. The best way to really encapsulate this knowledge is to write your own versions of the methods that exist on DOM nodes. For example, our own version of Node.nextElementSibling would look something like this:

let nextElementSibling = node => {
  if (node.nextSibling === null) {
    return null
  }

  if (node.nextSibling.nodeType === Node.ELEMENT_NODE) {
    return node.nextSibling
  }

  return nextElementSibling(node.nextSibling)
}

And given a document like:

<!doctype html>
<section id="photos">
  <img src="https://i.giphy.com/media/3o7abAHdYvZdBNnGZq/giphy.webp">
</section>
About
<section id="about">
  <p></p>
</section>

We can retrieve the next element of section#photos like so:

let about = nextElementSibling(document.getElementById('photos'))
console.log(about.innerHTML)

This is a great introduction to practical data structures and algorithms as well.

Wizard Zines

Wizard Zines by Julia Evans is a fun collection of programming zines. While not Frontend specific, they cover a wide range of skills that are applicaple to most engineers. My personal favorite is Help! I have a manager!, it's something I wish I had when first getting into the industry.

Reginald Braithwaite

JavaScript Allongé is free to read online and is probably the most digestible and informative text on functions and composition in JavaScript. I can not recommend this book enough.

This is more of a bonus than anything. Reginald Braithwaite’s articles have incredible insight into functional programming with JavaScript. As a beginner these will most likely be challenging to follow. However, they are packed with useful information and techniques. Here’s a few to get started:

Basics of CSS Grid: The Big Picture

It's super important to understand how to build layouts with CSS effectively. Layout Land and all of Jen Simmons' works are incredible resources for building your skills with CSS Grid. Comfortably working with CSS Grid will be an essential skill for any Frontend Engineer.

Pony Foo Weekly

And finally, this is one of the best weekly newsletters on JavaScript/the Web in general. Packed with tons of great articles on a wide range of topics.

Keep Learning!

Lists like these are a bit overwhelming. I don’t suggestion tackling everything at once. But, I do want to encourage you to contribute to the culture of sharing knowledge that is so prevalent in the Web world. Share whatever you find interesting with your peers. Don’t be afraid to ask for help when you don’t understand something. And most importantly, keep learning!

#junior-dev-for-life