DEV Community: Annie Liao

3 Solid Video Tutorials to Get You Started on D3 Data Visualization

Annie Liao — Thu, 04 Mar 2021 17:29:58 +0000

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 the ability to pick and choose between sections. There is no need to follow in order. If you expand on the description field, you can see how the course is constructed and simply scrub to the part that works for you:

I took the original 2020 version and truly enjoyed the hands-on experience. It is impressive how Curran makes it quick and easy to build simple D3 data visualizations, especially when you use the 2x playback speed 😉

2. D3 Coding Train ft. Shirley Wu

This is a recorded live interview/demo session between the Coding Train host Daniel Shiffman and D3.js master artist Shirley Wu.

Amidst the fun and lively conversation, Shirley explained the concept of data binding in D3.js, and walked us through her process of building her signature art project.

The 2-part series also inspired me to create my very first D3 project. Nuff said.

3. Fullstack D3 Masterclass by Amelia Wattenberger

To be honest, I was on the fence about this course, as it comes with a hefty price tag and, depending on your learning style, might not be the best bang for your buck.

That being said, Amelia is one of the most admired D3.js developers, so it is definitely worth the effort coding along as she unwraps the intricacy of data visualization -- both technically and aesthetically.

I am barely halfway through the courses listed above, and there are still many core concepts that require further investigation on my end. Hope this post still gives you a solid reference point if you ever felt like entering the complex yet magical world of D3.js.

What I Learned from a 2-Hour Crash Course on GraphQL and TypeScript

Annie Liao — Fri, 23 Oct 2020 15:15:03 +0000

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

Even though the course is 2.5 hours long, it actually took me at least double the amount of time to complete. And it was time well spent.

In addition to getting the gist of TypeScript and GraphQL, you would also be greeted with a beginner-friendly walkthrough of code environment setup and some Node package configurations.

Here are 4 key takeaways from my journey with the course:

TypeScript is a Typechecker for JavaScript

Simply put, TypeScript is a typed extension of JavaScript.

Because JavaScript is weakly (or dynamically) typed, e.g. one variable can be reassigned to different data types, it helps to have a strongly-typed superset to reduce production issues where data types were misplaced.

TypeScript is that superset. Introduced by Microsoft in 2012, it serves as a development tool to help JavaScript developers avoid painful bugs and make code easier to follow.

TypeScript will eventually be transformed into valid JavaScript during the compilation process, as clients and servers do NOT recognize TypeScript.

GraphQL Playground is Powerful

As the course creator eloquently puts it:

GraphQL is a query language for making requests to APIs. With GraphQL, the client tells the server exactly what it needs and the server responds with the data that has been requested.

Not only that, I was blown away by the smooth, intuitive, modernly-designed interface of the GraphQL Playground. Here are some screenshots, but I encourage you to try it out and witness its power:

Monokai Pro is Beautiful

During the initial environment setup of the code editor, I was introduced to a lovely VS Code extension called Monokai Pro. As a visual learner, it also helps to code along with the course using the same editor/color scheme.

Node Problem? No Problem!

OK, I admit this catchy tagline might be a bit confusing. What I meant to say was I personally have very limited knowledge of NodeJS. Sure, I use npm to install various JavaScript libraries, but coming from a Rails background, I had not yet built a Node server before taking the course.

If you share a similar background, fear no more. This tutorial actually starts by introducing Node. You even get to build a simple Node:Express server!

Overall, I benefitted greatly from this tutorial and highly recommend it to anyone who is pressed for time but just wants to see the power of TypeScript and GraphQL.

What You Can Achieve with 30 Days of JavaScript30 Challenge

Annie Liao — Sat, 10 Oct 2020 17:27:46 +0000

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? Also, most videos are less than 20 minutes long -- you can even build a cool-looking feature within 5 minutes of code-along!

2. Laugh Along with Wes Bos

Laughter is contagious. Couple that with Wes Bos' enthusiastic tone throughout the tutorials, you are bound to have an enjoyable coding journey.

As a side note, it was through this tutorial that I found out about the "BADASS" CSS colors.

3. Build on Top of Beautiful Design

Speaking of CSS, every course comes with unique pre-built CSS styling, which makes each feature already visually appealing before you start coding.

This is an irresistible bonus for visual learners out there.

4. Create Console Magic

Remember my previous post on multiple ways to format console outputs beyond console.log? Well, I wouldn't have known about all that were it not for JavaScript30 tutorials.

Here's a quick demo of console.table():

┌─────────┬─────────────┬───────────────┬──────┬────────┐
│ (index) │    first    │     last      │ year │ passed │
├─────────┼─────────────┼───────────────┼──────┼────────┤
│    0    │  'Albert'   │  'Einstein'   │ 1879 │  1955  │
│    1    │   'Isaac'   │   'Newton'    │ 1643 │  1727  │
│    2    │  'Galileo'  │   'Galilei'   │ 1564 │  1642  │
│    3    │   'Marie'   │    'Curie'    │ 1867 │  1934  │
│    4    │ 'Johannes'  │   'Kepler'    │ 1571 │  1630  │
│    5    │ 'Nicolaus'  │ 'Copernicus'  │ 1473 │  1543  │
│    6    │    'Max'    │   'Planck'    │ 1858 │  1947  │
│    7    │ 'Katherine' │  'Blodgett'   │ 1898 │  1979  │
│    8    │    'Ada'    │  'Lovelace'   │ 1815 │  1852  │
│    9    │ 'Sarah E.'  │    'Goode'    │ 1855 │  1905  │
│   10    │   'Lise'    │   'Meitner'   │ 1878 │  1968  │
│   11    │   'Hanna'   │ 'Hammarström' │ 1829 │  1909  │
└─────────┴─────────────┴───────────────┴──────┴────────┘

5. Move beyond Keyboard and Mouse Clicks

Did you know that you can create a selfie maker, a webcam camera booth, or a voice changer using plain-old vanilla JavaScript?

6. Witness the Power of Window Object

Sure, you can browse through the documentation on this powerful Web API. But nothing beats putting those objects and properties in practical use and watching them shine.

7. Explore Journeys of Coders around the World

Born and raised in Taiwan, I was delighted to see some Taiwanese flags🇹🇼 among the list of contributors/fellow learners. It was also interesting to see how others used different approaches to the same challenge.

As someone who sped through JavaScript fundamentals and hopped on the fancy world of JavaScript frameworks, the 30-day challenge has truly made me appreciate the power of vanilla JavaScript.

Most importantly, it gave me a pleasant change of scenery after weeks of grokking algorithms and data structures.

A big shout-out to Wes Bos and those who share their journeys as featured in the JavaScript30 GitHub repo!

Understanding the Sliding Window Technique in Algorithms

Annie Liao — Tue, 29 Sep 2020 21:19:37 +0000

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.

(⬆️ image via The Simple Engineer video)

When can we use it?

Generally speaking, the sliding window technique is useful when you need to keep track of a contiguous sequence of elements, such as summing up the values in a subarray.

Here's a classic example (courtesy of Colt Steele's Udemy course):

Given an array of positive integers and a positive integer,
write a function that returns the minimal length of a contiguous subarray,
where the sum is greater than or equal to the integer being passed in.
If there isn't one, return 0.

And here are some test cases:

minSubArrayLen([2, 3, 1, 2, 4, 3], 7) // 2 -> [4, 3] is the smallest subarray
minSubArrayLen([3, 1, 7, 8, 62, 18, 9], 52) // 1 -> [62] is the smallest subarray
minSubArrayLen([1, 4, 16, 22, 5], 95) // 0

To implement the sliding window technique for this challenge, we need to first figure out the range of the window. In this case, we "open up" the window from the left.

Then, we need to store the sum of the values in the enclosed subarray/window, and compare it against the target integer.

If the sum meets the condition (greater than or equal to the integer), we record the length of the current window range and keep shrinking the window, as we need to find the minimal length.

If the sum does not meet the condition, then we keep expanding the right panel of the window (because we are iterating from the left).

If the sum never meets the target, we break out of the loop and return 0 instead.

Putting it together:

function minSubArrayLen(arr, target) {
  let minLength = Infinity
  let sum = 0
  let left = 0
  let right = 0

  while (left < arr.length) {

    if (sum >= target) {
      // store the current minimal length
      minLength = Math.min(minLength, (right - left))
      // shrink the window: 
      // (1) subtract the value at left idx
      // (2) move the left panel one index further to the right
      sum -= arr[left]
      left++
    } else if (sum < target && right < arr.length) {
      // expand the window:
      // (1) sum up the current value
      // (2) move the right panel one index further to the right
      sum += arr[right]
      right++
    } else {
      break
    }

  }

  return minLength === Infinity ? 0 : minLength
}

By using the sliding window technique, we are able to solve the problem above with O(n) time complexity, eliminating the need for duplicate iterations. Hats off to the person/team who came up with this powerful tool!

Using Two-Pointer Technique to Optimize Algorithm Solutions

Annie Liao — Sat, 26 Sep 2020 00:06:49 +0000

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()) the squared version of each integer, like so:

function square(arr) {
  arr = arr.map(num => num * num)
  return arr.sort((a, b) => a - b)
}

While my solution above achieves the desired result, its somewhat brute-force approach leads to a not-so-performant O(n log(n)) time complexity.

So how can we improve the runtime complexity?

This is where a popular and effective strategy, Two-Pointer Technique, comes into play.

When iterating over an array or string, we can set two pointers to search and/or compare two elements. There are three common ways to set the pointers:

Start both pointers at the beginning of the iteration
Start both pointers at the end of the iteration
Start one pointer at the beginning, the other at the end, both moving toward each other and meeting in the middle.

Here's how it works in our square() example:

Step 0:

Initiate an empty array that will store our results.

Step 1:

Create two pointers, i and j, where i keeps track of the negative integers, while j keeps track of the positives.

Step 2:

Iterate over the array. Keep moving j forward until the element of the array (arr[j]) is a positive integer.

Step 3:

Inside the iteration, compare the squared elements between index i and index j, push/append the smaller element to the resulting array.

Step 4:

After the iteration in Step 3, our resulting array will have a sorted set of integers. What remains is the element(s) at index i and index j.

We can subsequently push/append the remaining elements(s) to the resulting array.

Step 5:

Return the resulting array.

Here's the two-pointer technique approach (courtesy of Women Who Code San Diego):

function squareTwoPointer(arr) {
  let result = []
  // create 2 pointers: i keeps track of negatives, j keeps track of positives
  let j = 0
  let i;

  while (j < arr.length && arr[j] < 0) {
    j++
    i = j - 1
  }

  while (j < arr.length && i >= 0) {
    if ((arr[i] * arr[i]) < (arr[j] * arr[j])) {
      result.push((arr[i] * arr[i]))
      i--
    } else {
      result.push((arr[j] * arr[j]))
      j++
    }

  }

  while (i >= 0) {
    result.push((arr[i] * arr[i]))
    i--
  }

  while (j < arr.length) {
    result.push((arr[j] * arr[j]))
    j++
  }

  return result
}

The time complexity of this optimized solution is O(n) because we only perform one iteration at a time and sort the elements in place.

As with almost all algorithm challenges, there are multiple ways to approach this problem. The two-pointer strategy appears to be a good starting point for optimization.

If you haven't applied two-pointer techniques in your problem-solving process, I hope this example boosts your confidence in coming up with more performant algorithm solutions.

Onward and upward!

A Small, Simple Trick to Make Your Text Editable via HTML

Annie Liao — Tue, 15 Sep 2020 20:57:52 +0000

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 shouted internally, "Woah, why didn't I learn about this earlier?!"

I had that moment again when approaching the challenge of creating moveable 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 documentation, contenteditable is an enumerated attribute (meaning it has a list of possible values, as opposed to a boolean value), where true or an empty string indicates that the text is editable, and false otherwise.

If the attribute is not given any value, the value is treated as an empty string, which makes the text editable, like so:

<div>
  <h1 contenteditable>🔥WOAH!</h1>
</div>

And just like that, you can type any text you want on your browser.

No CSS, no JavaScript, and no need for an input field. Just a plain little HTML attribute. (For security-related information, feel free to check out this Stack Overflow discussion.)

Have you used contenteditable at work or for your projects? Is there any other front-end magic that you wish you found out sooner? Please share your experience in the comments, I'd love to see some practical use cases! 🙌

Fullstack Trivia: Can You Answer These Interview Questions in 5 Minutes?

Annie Liao — Fri, 11 Sep 2020 22:46:22 +0000

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 in order to share with you all, my beloved DEV community.

So grab a timer, fasten your seat belt, see if you can answer these 10 questions in 5 minutes.

Ready,

Set,

Go!

⏳

Questions List

What's the difference between git fetch and git pull?
What does git rebase do?
In HTML, what's the difference between div tag and span tag?
What are CSS vendor prefixes?
Is JavaScript single-threaded or multi-threaded?
In JavaScript, what is an arrow function?
In SQL, what are primary keys and foreign keys?
What is caching in terms of different layers/stages?
What are generators?
In unit testing, what are some quantitative metrics for testing a codebase?

If those questions seem easy to you, well, congratulations, you are definitely more than a junior developer!

If you had trouble answering many of the questions above, worry not, here are some resources I've collected from the world wide web:

1. What's the difference between Git fetch and Git pull?

git fetch is the command that tells your local git to retrieve the latest meta-data info from the original.

git pull does what git fetch does AND brings (copy) those changes from the remote repository.

Source: freeCodeCamp

2. What does Git rebase do?

We use git rebase when we want to take all commits from our feature branch, and move them into the main branch.

Rebasing is often used as an alternative to merging. Rebasing a branch updates one branch with another by applying the commits of one branch on top of the commits of another branch.

Source: Rebase — One of the Most Powerful Git Commands

3. In HTML, what's the difference between `div` tag and `span` tag?

<div>: block-level, primarily used to organize the layout of the page.

<span>: inline-level, mainly used to style a part of a text.

4. What are CSS vendor prefixes?

Vendor prefixes are one way browsers use to give CSS developers access to newer features not yet considered stable.

Source: CSS Vendor Prefixes

5. Is JavaScript single-threaded or multi-threaded?

Single-threaded. Here's a cool explainer on how JavaScript can be asynchronous AND single-thread at the same time.

6. In JavaScript, what is an arrow function?

An arrow function is a part of ES6 syntax. It does NOT have its own 'this' keyword. Instead, an arrow function will use the 'this' keyword of whatever 'this' was outside the function when it was created.

You can take "this" quiz (pun intended) I created to become more familiar with the this keyword.

7. In SQL, what are primary keys and foreign keys?

Primary key: unique ID/address of each row of the table.
Foreign key: a set of columns in a table that refers to the primary key of another table.

8. What is caching in terms of different layers/stages?

I found a caching overview on the AWS site, which has a nice diagram and table explaining the use case for each layer: client-side, DNS, Web, App, and Database.

Feel free to also check out an intro to caching in Django documentation.

9. What are generators?

In some programming languages, e.g. Python, a generator is "an iterator in the style of iterating by need."

We won’t calculate and store the values at once but generate them on the fly when we’re iterating.

Source: What Are Generators, Yields, and Streams in Python?

10. In unit testing, what are some quantitative metrics for testing a codebase?

According to my interviewer, code coverage is one way of verifying the extent to which the code has been executed.

If you're interested in learning more about testing metrics, I found a post that introduces 25 metrics you can use in a continuous testing process.

As always, if you have other helpful resources or tutorials on any of the questions, please let me know in the comments.

Happy learning!

Beyond Formatting Your Console: Styling Your console.log()

Annie Liao — Fri, 04 Sep 2020 20:42:56 +0000

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:

Add this set of characters, %c, at the start of the string.
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 to play around on your browser console:

console.log('%c Style me pretty 💋', 'font-family: "Impact", sans-serif; font-size: 100px; color: black; background: #ffc600;')

Now to the practical use.

Say you want to test how a variable, lastChecked, gets reassigned inside a function. Aside from writing out the current output of the variable in your console.log(), you can insert the styling as an argument, like so:

console.log('%c lastChecked before shiftKey: ', 'color: black; background: #BADA55;',lastChecked)

console.log('%c lastChecked inside shiftKey: ', 'color: black; background: #FFC600;', lastChecked)

console.log('%c lastChecked after shiftKey: ', 'color: black; background: #3EA055;', lastChecked)

Just like that, you are presented with a colorful console log with clear distinctions between different stages. It is a cool alternative to organizing your console outputs, similar to the console.group() method as mentioned in my previous post.

Finally, you might be wondering how I found out about those little tricks.

In addition to the wonderful search engine, I have been coding along with the popular, FREE JavaScript30 tutorial by Wes Bos, who kept introducing fascinating dev tools along the journey and creating a fun, delightful JavaScript learning experience.

I highly recommend checking it out if you haven't already.

Beyond console.log(): 3 Ways to Format Console Outputs in JavaScript

Annie Liao — Fri, 28 Aug 2020 20:04:43 +0000

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 of a cluster of text from console.log().

Let's say we have an array of objects, each object containing multiple key-value pairs:

const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
]

Here's what they look like with console.table(inventors):

┌─────────┬─────────────┬───────────────┬──────┬────────┐
│ (index) │    first    │     last      │ year │ passed │
├─────────┼─────────────┼───────────────┼──────┼────────┤
│    0    │  'Albert'   │  'Einstein'   │ 1879 │  1955  │
│    1    │   'Isaac'   │   'Newton'    │ 1643 │  1727  │
│    2    │  'Galileo'  │   'Galilei'   │ 1564 │  1642  │
│    3    │   'Marie'   │    'Curie'    │ 1867 │  1934  │
│    4    │ 'Johannes'  │   'Kepler'    │ 1571 │  1630  │
│    5    │ 'Nicolaus'  │ 'Copernicus'  │ 1473 │  1543  │
│    6    │    'Max'    │   'Planck'    │ 1858 │  1947  │
│    7    │ 'Katherine' │  'Blodgett'   │ 1898 │  1979  │
│    8    │    'Ada'    │  'Lovelace'   │ 1815 │  1852  │
│    9    │ 'Sarah E.'  │    'Goode'    │ 1855 │  1905  │
│   10    │   'Lise'    │   'Meitner'   │ 1878 │  1968  │
│   11    │   'Hanna'   │ 'Hammarström' │ 1829 │  1909  │
└─────────┴─────────────┴───────────────┴──────┴────────┘

2. `console.group()` and `console.groupEnd()`

This pair of console methods allow you to create a hierarchical structure of your output. If you have a group of related data, you can wrap them inside console.group() and console.groupEnd(), like so:

console.group('Meat')
console.log('Chicken')
console.log('Pork')
console.log('Beef')
console.groupEnd('Meat')

console.group('Veggies')
console.log('Corn')
console.log('Spinach')
console.log('Carrots')
console.groupEnd('Veggies')

console.group('Fruits')
console.log('Apple')
console.log('Banana')
console.log('Tomato')
console.groupEnd('Fruits')

...and you will see a beautifully grouped set of output (feel free to try on a Chrome or Firefox console, it looks even prettier in my opinion):

Meat
  Chicken
  Pork
  Beef
Veggies
  Corn
  Spinach
  Carrots
Fruits
  Apple
  Banana
  Tomato

3. `console.dir()`

This one may or may not be as useful, depending on the browser you're on. Essentially, console.dir() prints out a hierarchical list of properties inside the specified JavaScript project.

For example, open your browser console and try console.dir() by passing in the following object:

const food = {
  'Meat': {
    'Chicken': ['grilled', 'fried'],
    'Pork': ['BBQ', 'steamed'],
    'Beef': ['medium', 'rare']
  },
  'Veggies': {
    'Corn': ['white', 'yellow'],
    'Spinach': ['regular', 'baby-size'],
    'Carrots': ['regular', 'bite-size']
  },
  'Fruits': {
    'Apple': ['green', 'red'],
    'Banana': ['raw', 'ripe'],
    'Tomato': ['big', 'small']
  },
}

In the Chrome console, you can see that console.dir(food) makes it easier to spot the data type than does console.log(food). Whereas in Firefox, both outputs appear the same.

Nonetheless, if you click on the triangle at the start of the output, both console.dir() and console.log() display nicely formatted JavaScript objects, neatly organized by property types and their values.

If you are already familiar with those three methods, I recommend checking out the following resources, experiment on each method mentioned in the articles, and let me know which ones you plan on using regularly.

Happy debugging!

Resources:

5-Step Strategy You Can Use for Your Next Coding Interview

Annie Liao — Fri, 21 Aug 2020 14:56:37 +0000

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:

After following each step in the template during several practices, I have developed a methodology to reduce awkward silence in my coding interviews.

Here's my consolidated 5-step strategy:

Step 1: Clarify the Problem

A lot of coding interviews involve writing out a function to solve the problem. Sometimes the interviewer might interpret the task differently.

To ensure you are both on the same page, you can start by confirming the goal of the problem, followed by the input you are given, and the output the interviewer expects to see.

Step 2: Brainstorm Examples

To further demonstrate that you understand the problem, you can also create some examples and confirm with the interviewer.

If you are still not sure about the problem or instruction, now is a good time to ask for a few test cases.

Step 3: Ask about Constraints

To cover all the bases, you can also brainstorm some invalid inputs, and ask the interviewers if those inputs should be taken into considerations.

Another follow-up question you can ask is time/space complexity, even if your initial approach will likely be brute-force.

Don't be afraid to ask questions. There were instances where, after my clarifying questions, the interviewer realized some key portions s/he neglected to mention and modified accordingly.

Step 4: Pseudocode Your Idea

Now that you've confirmed everything you can think of, it's time to start coding!

As part of my coding habits, I often start by pseudocoding or writing out my approach as comments (e.g. I will store these values as variables, this is where I will iterate over the array, and I will return the value here).

Step 5: Code, Talk, Optimize

Once you start pseudocoding, you will formulate a more concrete idea on your approach, which gives you the confidence to code out your solution.

This is where you can talk as you code, reading out loud the code you are typing. After finishing a code block, you can pause and ask the interviewer for feedback.

More often than not, after you have arrived at the right solution, the interviewer will ask if you can optimize your approach.

In case you can't think of any further optimization on the spot, it might be helpful to just start with a brute-force approach instead of rushing to the optimized solution in the beginning.

The strategy and the template above recently led to the best coding interview I have performed. I hope they will also help you construct your own way of acing your next coding interview.

Do you have any additional tips? What were the best and worst coding interviews you have experienced? Let me know in the comments!

How Would You Approach Systems Design Interview Questions?

Annie Liao — Fri, 14 Aug 2020 22:33:13 +0000

As someone relatively new to software engineering and with a non-traditional background (i.e. no CS degree), I am often taken aback by the depth of knowledge required in some entry-level technical interviews.

My most recent/upcoming encounter is systems design.

Not to be confused with Design Systems (which, weirdly enough, fill up DEV's search results 😂), Systems Design involves the process of defining the architecture and data model for a platform, such as Twitter.

After a few video tutorials and written guides, I have jotted down some general strategies, which look somewhat similar to how one approaches algorithm problems:

Clarify the problem

Identify 2~3 core features

Start implementing/drawing the architecture for the features

Acknowledge limitation of my design

Optimize my solution

Currently, I am most curious about Step#1, as this appears to be a key indicator of our problem-solving skills:

What are some "good" clarifying questions we can ask the interviewer?

An engineer friend suggested starting with scope, e.g. how many users, the volume of the data, etc.

What's your approach?

And more generally: What advice or tips would you give to freshly-baked developers as we tackle the dreadful systems-design questions?

Thanks in advance, DEV community! ❤️

When Recursion Comes to Rescue

Annie Liao — Sat, 08 Aug 2020 18:48:47 +0000

When practicing solving algorithm problems, we often see questions that make us wonder if we would ever encounter similar situations in the real world (e.g. spiral traversal of a matrix).

This time, however, I came across an interesting algorithm challenge that makes practical sense to me.

Here's the task:

You are given a list of tasks, some of which depend on others.
Write a function tasksInOrder that takes a subset of those tasks and returns an ordered list of all the tasks to run.

To illustrate:

const tasks = [
  {
  task: "make a sandwich",
  depends: [ "buy groceries" ]
  },
  {
  task: "buy groceries",
  depends: [ "go to the store" ]
  }, 
  {
  task: "go to the store",
  depends: []
  }
]

// tasksInOrder(tasks, ["make a sandwich"])
// -> [ 'go to the store', 'buy groceries', 'make a sandwich' ]

// tasksInOrder(tasks, ["buy groceries", "make a sandwich"])
// -> [ 'go to the store', 'buy groceries', 'make a sandwich' ]

We all make to-do lists in our daily lives, so I was glad to finally see a function that we can actually put to good, practical use.

Brute Force Approach

As I read the challenge, the first thing that came to mind was a linked-list data structure, as each task has a dependency, or node, that points to another task.

With that, I was able to quickly write out a straightforward (but flawed) solution that traverses both the task list and the given subset.

function tasksInOrder(tasks, subset) {
  let result = []
  for (let task of tasks) {
    if (task.depends.length !== 0) {
      result.unshift(task.depends[0])
    }
  }
  for (let sub of subset) {
    result.push(sub)
  }

  return [...new Set(result)]
}

The solution above does output the desired results in the two sample cases:

// tasksInOrder(tasks, ["make a sandwich"])
// -> [ 'go to the store', 'buy groceries', 'make a sandwich' ]

// tasksInOrder(tasks, ["buy groceries", "make a sandwich"])
// -> [ 'go to the store', 'buy groceries', 'make a sandwich' ]

However, this solution would fail if out task list is not in order:

const tasksNotInOrder = [ 
  {
  task: "buy groceries",
  depends: [ "go to the store" ]
  }, 
  {
  task: "make a sandwich",
  depends: [ "buy groceries" ]
  },
  {
  task: "go to the store",
  depends: []
  }
]

// tasksInOrder(tasksNotInOrder, ["buy groceries"])
// expected -> [ 'go to the store', 'buy groceries' ]
// got -> [ 'buy groceries', 'go to the store' ]

So, how might we follow the dependencies of the given subset that keep recurring in the tasks list in the right order?

Recursive Approach

In order to grab all the dependencies of all the subtasks in the subset, we can:

Grab all the dependencies of one subtask
Add the dependencies to an array by prepending them, so we can put them in order
Repeat step#2 until the subtask has no dependency

Since the recursive solution occurs in the subtasks, we can separate concerns by creating a helper function that focuses on recursion:

function tasksInOrder(tasks, subset) {
  let tasksList = []
  for (let subTask of subset) {
    let foundTask = tasks.find(taskObj => taskObj.task === subTask)
    // invoke helper function
    getDependedTasks(foundTask, tasksList, tasks)
  }
}

// helper function
function getDependedTasks(currentTask, tasksList, tasks) {
  // prepend the current task
  tasksList.unshift(currentTask)
  // base case: when we hit the task with no dependency
  if (currentTask.depends.lenth === 0) {
    return
  }
  // recursive case: 
    // (1) find the task which the current task depends on
    // (2) run the function recursively with the found task
  let nextTask = tasks.find(taskObj => taskObj.task === currentTask.depends[0])
  return getDependedTasks(nextTask, tasksList, tasks)
}

And voilà! With this approach, we see an output of an orderly tasks list, no matter how disorganized the original list is.

Do you see any potential flaws in the recursive approach? Can you think of any other way to tackle this challenge? As always, please let me know in the comments!