D3.js is a beast. As the JavaScript library for data visualization, its mesmerizingly powerful toolset can seem intimidating even for senior developers.

While not a seasoned developer yet, I have long been interested in D3.js since its initial release in 2011 (wait, it’s been 10 years already?!)

Below are three video tutorials that I found to be very helpful in understanding, utilizing, and appreciating this dataviz giant called D3.

1. D3 Data Visualization by Curran Kelleher

Part of freeCodeCamp’s free resource, this recently-updated (February 2021), 17-hour YouTube tutorial is a course for everyone, ranging from code newbies to JavaScript veterans.

My favorite feature of this course is…

Photo by Joshua Sortino on Unsplash

As someone with a solid understanding of JavaScript and Ruby but not much of other programming languages, I’ve always wanted to learn more about a toolset many JavaScript developers are praising: TypeScript.

Another relatively new tool I have noticed being thrown around in the dev world is GraphQL.

With very little bandwidth to dive deep into both tools, I was delighted to find a comprehensive FREE video tutorial that covers both topics:
Building Your First GraphQL Server with Node and TypeScript

Free JavaScript tutorial by Wes Bos

There is more to vanilla JavaScript than meets the eye.

At least that’s what I discovered after completing Wes Bos’ JavaScript30 Challenge in 30 days.

If you have not heard of JavaScript30 Challenge, it is a FREE video tutorial consisting of 30 coding exercises/challenges, each of which focuses on a specific JavaScript feature.

So, what can you achieve by completing these challenges? Here are 7 key takeaways from my own rewarding experience:

1. Save Time and Money

Did I mention this tutorial is 100% free? …

Photo by R Mo on Unsplash

Aside from the two-pointer technique demonstrated in my previous post, I have been grokking another popular algorithmic mental model: the sliding window.

If you have never heard of the sliding-window technique, I strongly recommend watching this video tutorial before diving into the example below. Even if you don’t have 36 minutes to spare, be sure to watch the first 8 minutes, which contain multiple well-executed animations.

What is the sliding window technique?

As its name suggests, this technique involves taking a subset of data from a given array or string, expanding or shrinking that subset to satisfy certain conditions, hence the sliding effect.

Photo by Max Duzij on Unsplash

When dealing with strings and arrays in the context of algorithm challenges, our first instinct usually revolves around built-in methods.

Let’s take a look at this seemingly easy problem:

/* Description:
Given a sorted (ascending) array of integers,
write a function that returns a sorted (ascending) array
which contains the square of each number.
// Examples:
square([0, 1, 2, 3, 4, 5])
// => [0, 1, 4, 9, 16, 25])
square([-7, -3, 2, 3, 11])
// => [4, 9, 9, 49, 121]

Like many others, my immediate reaction was to make use of sort() method after mapping out (map())…

Learn about contenteditable

Photo by Christopher Gower on Unsplash.

If you’ve been following my recent tweets, you might have noticed that I am currently coding along with Wes Bos’ JavaScript30 challenge.

While a lot of the challenges served as a refresher for my JavaScript knowledge, there were times when I had to pause the tutorial and shout internally, “Woah, why didn’t I learn about this earlier?”

I had that moment again when approaching the challenge of creating movable text shadows.

As it turns out, there is an HTML global attribute called contenteditable that allows the user to edit targeted text on the browser.

According to the MDN’s documentation, contenteditable

Photo by Brad Neathery on Unsplash

Technical interviews come in all shapes and sizes. Some companies go for the traditional algorithm challenges, others tend to be more creative, such as this Fullstack Engineer interview I had the other day.

Toward the end of a fun, relaxing conversation, the interviewer gave me a quick challenge: Answer a series of trivia-like tech questions that involve varying levels of knowledge in software development.

I got roughly a third of them right, which wasn’t too bad considering the time constraints and my “freshness” in the field.

During the 5-minute exercise, I also jotted down as many questions as I could…

Style me pretty, console!

Last week I shared three handy dev tools that let us format our console outputs beyond the plain-old console.log(). Today I learned one more neat trick to "prettify" our console.

This trick is so simple, all you need to do is add a special indicator inside your console.log().

Let’s see how it works with pure strings:

  1. Add this set of characters, %c, at the start of the string.
  2. Pass in an additional argument, which contains the style of the string. As you can see below, the syntax is basically the style attributes of an HTML element.

That’s it! Feel free…

Photo by Artem Sapegin on Unsplash

As JavaScript developers, we intuitively use console.log() to debug, print out variables, and log results of our current operations to make sure we are on the right programming path.

Indeed, console.log() seems powerful enough, but did you know there are other cool methods in the Console API that can also make your life easier?

Recently I came across console.table() in a tutorial, which prompted me to investigate alternative approaches to the plain-old console.log(). Here are 3 formatting tools that I have added to my debugging toolkit:

1. console.table()

As the name suggests, console.table() prints your output in a nicely formatted table, instead…

A methodology to reduce awkward silences during coding interviews

Photo by Headway on Unsplash

Unlike coding tests, where you solve algorithm problems with a keyboard silently, coding interviews go beyond keyboard communications.

It can be a daunting task, as the interviewer can see every move you make on a shared screen.

And if that wasn’t nerve-racking enough, you also need to speak out, expressing your thought process to not only elicit some hints from the interviewer but also keep the conversation flowing.

That’s why I was thrilled to see this algorithm design template when attending a coding practice hosted by Women Who Code San Diego:

Annie Liao

Fullstack Developer: React with Rails. Currently exploring data structures, D3 visualization, and other front-end magic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store