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
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? …
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.
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…
Learn about contenteditable
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 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. …
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 Medium community. …
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…
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(). …
A methodology to reduce awkward silences during coding interviews
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:
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 functiontasksInOrderthat 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: []
}…
About
