DEV Community: Byte Sized

The Inspector 🔎: A better way to test your code

Byte Sized — Sun, 28 Nov 2021 21:42:19 +0000

Use this Github Action to surface test errors sooner and develop faster! This action currently only supports JavaScript projects but we look forward to expanding in the future.

What the action does:

Creates PR comment with failing test, which includes:

Link failing test
Direct link to source code where the error is coming from
Stacktrace

My Workflow

This project is using the Sticky Pull Request Comments github action repo:
https://github.com/marocchino/sticky-pull-request-comment

Submission Category:

DIY Deployments

Yaml File or Link to Code

https://github.com/nspired-tech/hackathon-the-inspector/blob/main/.github/workflows/test.yml

Additional Resources / Info

Introducing: Tunnel Vision....

Byte Sized — Sun, 14 Nov 2021 23:39:16 +0000

While coming up with an idea for Actions Hackathon 2021, We started thinking about all the things on our "wish list" for CI/CD. The biggest wish has been to have an easier way to surface errors within our unit tests.

Most of you are familiar with other CI/CD tools and know that when a failing test occurs you have to scroll through this large wall of text just to find the failing test. And in most cases, you don't know exactly where to look...

Here is the inspiration behind our hackathon idea! We will be enabling the CI/CD pipeline within Github Actions to surface the exact error and links to send you directly to it. We call this tunnel vision! This feature will allow you to move even more quickly while in the development phase.

Stay tuned for the project details and submission🔥

Cheers!

Reduce Vs For-Loop

Byte Sized — Tue, 09 Nov 2021 22:19:28 +0000

Are you interested in more tech content? Check us out on Twitter @nspiredTech!

I was working through some JavaScript Functional Programming examples when I came across the reduce method. By definition reduce is used to iterate through an array and condense it into one value.

This caused me to wonder what was the programmatic difference between reduce and a traditional for-loop?

Here is an example of the reduce method in action:

let singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal + currentVal;
}, 0);

The pattern above stores the return value from the reduce method. The reduce method receives a callback function with the parameters previousVal and currentVal. As the array is being iterated each elements is being added together.

Here is the same input but with a for-loop

for(let i = 0; i < array.length; i++){
  singleVal += array[i];
}

The same result is achieved with a for-loop. For each pass, the element or array[i] in this case, is added and stored in singleVal.

So I decided to test the two algorithms and see which performed better. Here are the results from https://jsbench.me/.

As you can see the for-loop outperformed the reduce method.

The results from the tests showed me the performance benefits of using one over the other, however it did not explain the programmatic difference I was looking for. So I decided to keep looking…

Eventually, I found the answer!

Reduce in JavaScript is the alias for Fold, a higher order function that analyzes a recursive data structure and through use of a given combining operation, recombines the results of recursively processing its constituent parts, building up a return value.

In simpler terms, the elements are combined in a way that reflects the combination with the next element, and so on until all elements are exhausted.

Folds and maps are used to transform each value of a data structure independently, and filters are used to eliminate some elements from the data structure. Using for-loops as a jack of all trades tends to obscure the actual operation the loop performs. So from a programming standpoint, reduce is more eloquent and clear in its purpose.

In summary, we are able to determine the distinctions between the two approaches are contingent upon input and the design pattern of the programmer.

Happy Coding!

What is expected from a Junior developer?

Byte Sized — Tue, 28 Sep 2021 16:40:27 +0000

Are you interviewing for web developer jobs and asking yourself, "What is expected from a junior developer?"

Here's what happened in my first month as a Bootcamp graduate.

No one expected me to code right away. Contrary to what you might think the company is not looking for you to contribute on your first day. Most companies will have an onboarding process so be sure to ask about it in your interview.

My first tickets was not me building a highly visible feature. When I first started I mostly worked on documentation, setting up new projects, and bug tickets. The importance here is to use this time to be a sponge. There is no pressure on you and your team is there to help.

I thought I was moving slowly when comparing myself to senior devs. It's easy to be discouraged when you are working with people who have been doing this for years. You want to show them you belong, I get it, trust me! Keep in mind you are new and in time you will get there.

Here are some developer workflow hacks I used to increase my speed and productivity

VSCode Extensions @code
Customized my terminal with Zsh and aliases @ohmyzsh
Bash scripts

https://dev.to/saviomartin/34-ultimate-vs-code-extensions-to-increase-productivity-4hee
https://freecodecamp.org/news/how-to-configure-your-macos-terminal-with-zsh-like-a-pro-c0ab3f3c1156/
Check out our tweet about Bash scripting 👉 https://twitter.com/nspiredTech/status/1427652779645022213

In short, regardless of the role, no one is expecting you to turn water into wine on your first day. So don't forget while you are interviewing ask clarifying questions about onboarding, mentorship, and what the expectation will be for you as a junior engineer. You got this!

Don't be an asshole.

Byte Sized — Tue, 28 Sep 2021 16:31:09 +0000

You can be a great developer and also be an asshole...

Don't be an asshole. Here are 3 reasons why soft skills are so important.

Your team will consist of designers, product managers, and your hot #React skills will not get you far with people who do not relate to your skills as a developer or understand the value these skills brings.

Show your communication skills, team building, people will notice you and care about your contributions.

Tech skills change and are replaceable. If you want to have a career in tech you need to bring more to the table! Are you supportive? Optimistic? Overall good person to be around and work with? These skills will serve you wherever you go and helps when it comes time for reviews.

You’ll become a problem solver. Software engineers are problem solvers. Don't focus on just hard skills, consider adding more empathy to your work. Start developing with the customer in mind. Soft skills will help you connect with human needs and make you more well rounded.

Empathy will get you far as an employee and as a potential leader.

Did you enjoy this blog post? Check us out on Twitter @nspiredTech for more tech content!

let and const vs var scoping

Byte Sized — Mon, 27 Sep 2021 22:00:36 +0000

Starting from ES6, let and const handle scoping differently from var. With let and const being available since ES6, you have no excuse to use var anymore!

You might have seen people mention that let and const are "lexically scoped", but what does that really mean?

In simple terms, it just means that the structure of your program itself shows where a scope begins and where it ends: opening a curly brace for a function creates a new scope, closing it ends the scope.

Here's an annotated code example that shows the differences between the two

function foobar(x) { // Start of a scope
  if (x == 1) { 
    // Variables declared with `var` are "hoisted"
    // and initialized to `undefined`.
    console.log(foo); // undefined
    // `let` and `const` are hoisted too, but not 
    // initialized to `undefined`.
    console.log(bar); // Uncaught ReferenceError: bar is not defined

    var foo = "foo";
    let bar = "bar";
  }

  // `foo` is scoped to the function , so it's 
  // available anywhere in the function block
  console.log(foo); // "foo"
  // `bar` is scoped to a block, here `if (x == 1) {}`,
  // so when the block ends (after the `}`), `bar`
  // isn't available anymore.
  // Any pair of curly braces `{}` creates a new block.
  console.log(bar); // Uncaught ReferenceError: bar is not defined
}

Did you enjoy this blog post? Check us out on Twitter @nspiredTech for more tech content!

Top 5 command line tools you should try

Byte Sized — Mon, 27 Sep 2021 16:08:07 +0000

`ripgrep`

You've probably used grep before. ripgrep is like grep, just better. Faster, with nicer defaults, and more powerful! https://github.com/BurntSushi/ripgrep

`fzf`

I probably use fzf more than any other tool in this list. If you have a hard time remembering where you put this very important module in your codebase, just type fzf and it'll bring up a list of files that you can easily sift through https://github.com/junegunn/fzf

`jq`

If you're working with JSON, you need to try jq. It allows you to parse, filter and transform any JSON file with an a simple query language. https://github.com/stedolan/jq

`less +F`

You might have used less before. But did you know you could use it like tail --follow? less +F logfile will stream any new lines added to your log file! You can also filter the stream with & or pause it with Ctrl+C

`entr`

If you're tired of having to run your test suite manually any time you update a file, try this: git ls-files | entr -c <command to run your tests>. It will run your command every time you update a file in your project.

https://github.com/eradman/entr

Thanks for reading this far! Do you have any other cool command line tools that you think should have made this list?

For more tech content like this, follow us @nspiredTech

Visit https://nspired.tech

The secret of big O notation

Byte Sized — Mon, 27 Sep 2021 16:06:45 +0000

⚡ TL;DR: Big O notation helps us describe the efficiency of algorithms. It will help you make a more informed decision as to which algorithm is right for your specific use case. In addition, you'll likely be expected to know this in any technical interview.

Which one do you choose? 🤔

Imagine you're getting ready to download Animal Crossing to play with a group of friends. You don't think twice about it, you click "Install" and a few minutes later it's ready to play.
But now, you hear Drake is having a concert on Fortnite on Saturday. You're super excited, he just dropped his new album. You have to see that! Now think about this. Fortnite is about 20GB.
Assuming you have a somewhat decent internet connection, it could still take up to 3 days to download it! Amazon offers next day delivery for the physical copy of Fortnite #AmazonPrime.

We can see how in some cases it might be faster to get a game from Amazon, and in some cases it's just faster to download it. But regardless of the game's size, getting it from Amazon with next-day delivery is always going to take the same amount of time. Downloading a game on the other hand, varies based on its size.

In this case, Amazon takes O(1) time to get a game (it's constant!), and downloading it is O(n), n being the size of the game: the bigger the game, the longer it will take.

`O(1)`, `O(n)`, what does that even mean? 🤷‍♀️

The big O notation is used to classify time and space requirements of your algorithms.

Here are some rules to remember when trying to find the complexity of an algorithm:

Always drop constant terms.

function twoLoops(n) {
    for (let i = 0; i < n; i++) {
        console.log(i); // First loop, O(n)
    }
    for (let j = 0; j < n; j++) {
        console.log(j); // Second loop, also O(n)
    }
}

Here, our twoLoops function iterates n times twice. What do you think the big O notation for this function should be?

Intuitively, we could start by saying that it is O(2n): the first loop is O(n) and the second loop is also O(n), adding them up we get 2 ✕ O(n) or O(2n).

With out first rules, we know that constant terms (here, 2) must disappear. So our big O complexity is actually O(n).

Always drop non-dominant terms.

function nestedLoops(n) {
    for (let i = 0; i < n; i++) {
        console.log(i); // First loop, O(n)
    }

    for (let x = 0; x < n; x++) {
        for (let y = 0; y < n; y++) {
            console.log(j); // Nested loop, O(n²)
        }
    }
}

In this example we still have the first loop but we also have a nested loop. Adding those two big O together, we would get O(n + n²).

This rule tells us that since n² "dominates" (it's the biggest term), we need to remove any other term. We end up with O(n²), exponential growth.

💡 Did you know? Big O has a few siblings, including the little o and big Omega notations, which are other examples of asymptotic notations. However, in the case of technical interviews, big O is the most useful.

Space AND Time complexity

In an interview setting, you'll likely be asked to talk about the big O complexity of the solution you provided to a problem.

Space complexity measures the space growth of your algorithm. It helps you answer the question "How much space will my algorithm require relative to the size of the input?".
Time complexity measures the runtime growth of your algorithm. It helps you answer the question "How much time will my algorithm run relative to the size of the input?".

function badFibonacci(n) {
    const arr = [0, 1];

    for (let i = 2; i <= n; i++) {
        arr.push(arr[i - 2] + arr[i - 1]);
    }

    console.log("arr length:", arr.length);

    return arr[n - 1];
}
> badFibonacci(5)
arr length: 6
3
> badFibonacci(9)
arr length: 10
21

How could we go about calculating the big O complexity here?

For space complexity, we need to look at the variables we're using: arr and i. i doesn't change in size, it's constant. Knowing our rule about constants, we can ignore it.

arr however, is different: its size is going to grow relative to n. The bigger the n, the larger the array: this is linear growth, O(n).

To calculate the time complexity, we look at the number of steps taken to reach the solution. In this case, there is a single loop that grows relative to n, which means our big O complexity is also O(n).

When you see this, you might not necessarily think that anything is wrong with this solution. After all, it does what you want it to do.

But in an interview setting, you always have to ask yourself: can this solution be better?

🚨 Your first solution is often a Brute Force approach. You just want to get the code working. Once you have identified a solution, you'll want to optimize it, improving its runtime and space requirements.
Depending on the problem at hand, you'll know what type of solution you need to provide.

Tradeoffs

In most cases, when optimizing a solution, you are going to make tradeoffs: give up speed, to lessen space requirements, or give up space, to improve speed.

🚨 This is an important talking point during your interview to be able to explain your optimization choices in terms of tradeoffs.

Best or worst case scenario?

function badFindIndex(needle, haystack) {
    for (let i = 0; i < haystack.length; i++) {
        if (needle === haystack[i]) {
            return i;
        }
    }

    return null;
}
> badFindIndex("a", ["a", "b", "c"]);
0
> badFindIndex("z", ["a", "b", "c"]);
null

In this example, the best case scenario is when needle is the first element of haystack: we don't have to traverse the rest of the array in order to find the target.

For the worst case scenario, needle is not in the haystack. However, we have to traverse the entire array just to confirm it's not present.

🚨 The array is really small here, but in an interview setting, you have to think big! Google has databases with billions of records -- try to think of these kind of scenarios when optimizing your solution.

When calculating big O, always think of the worst case scenario!

Conclusion

To wrap things up, the secret to big O notation is knowing how to choose the right algorithm while considering factors such as space and time complexity, tradeoffs and best and worst case scenarios.

Hopefully, you now feel prepared for your next technical interview!

What did you think of the post? Did you learn anything new? We would love to hear from you!

If you are still looking for more practice, be on the lookout for our next post. We will solve a popular interview coding problem from leetcode.

Also there is a free computer science course on EdX taught by Hardvard professors where you will learn fundamental principles. It's a great resume builder and you get a certificate at the end of the course!

As an added bonus, here's a big O cheatsheet we made! 🔥

Linked list coding challenge

Byte Sized — Mon, 27 Sep 2021 16:00:12 +0000

Today, we’ll be solving a freecodecamp algorithm question: https://www.freecodecamp.org/learn/coding-interview-prep/data-structures/remove-elements-from-a-linked-list-by-index, removing an element from a linked list by index. Try to contain your excitement! 😂

We recommend reading Arrays and Lists 📚 before starting the coding exercise. This will ensure you have a firm understanding of the data structures used in the following exercise.

⚡ TL;DR: In linked list, elements are removed by linking the previous element with the next element, thus removing any link to the element to be removed.

Setup

Before we get started, let’s picture yourself waiting in line at the grocery store. The line you’re waiting in will be our linked list.

Each person can only see the person in front of them, but they can’t see who is behind them. Bummer! 😞

Now that we have an idea of what a linked list looks like, let’s set it up. We’ll do this in JavaScript.

The LinkedList has a head, this is the first Node of the list. Think of it as the last person standing in the line, they can see someone in front of them, but no one is standing behind them.

Each Node contains a value and a link to the next Node in the list.

Now, let’s create a list:

Here, our head‘s value is 0. The rest of the elements are called the tail.

Walking the list 🚶‍♀️

In this step we’re going to traverse the list, node by node. As we can see, we’re starting with a list of five elements. For now, we just want to look at every element of the list.

It’s important to remember that the last node in the list will be pointing to null (this is the person at the front of the line). Once we reach this node, node = node.next will set node to null and we will stop the iteration.

This is like asking to the last person waiting in line who’s in front of them, then asking the same thing to that person, until you reach the person at the front of the line.

Finding a node

Now that we know how to traverse the entire list, we want to find the one we’re looking for. For that we’re going to need a counter, to keep track of the number of nodes we’ve seen so far when walking the list.

With the counter going up with every node, we can now compare it to the given index. When our counter is equal to index, we know we’ve reached the node we want to remove:

Removing the node

Having done the heavy lifting in the previous steps, removing the node has become a lot easier!

Let’s go through the steps, one more time:

We initialize a few variables:
- node, that we set to the head (first element) of our linked list,
- counter, which we’ll use to track the index of the node we’re looking at in the while loop,
- prev, which we’ll set to the previous element we looked at in the while loop.
We start our loop, with a condition that says “don’t stop unless node is null”
We compare our counter to the index we want to remove.
- If they’re equal, it’s time to remove the node! We make the previous node prev point to the next node in the list, node.next – now, no node in the list points to the one we want to remove anymore!
- If not, we just keep going, updating prev to be the current node, and node to be the next one. We also increment our counter.

Think of it this way: with our group waiting in line, if someone in the middle of the line leaves, then the person behind them can now see the next person in front of them.

Handling the edge cases

Now you might be wondering, what happens if the index is 0? Less than 0? What if it’s bigger than the length of our list? And you’re right, these are edge cases we will have to handle! Let’s see how we can do that:

As a bonus, here’s this question from leetcode. We’ll solve it, but with a twist. 🤔 Can you spot the error?

Hint: do you have a way of finding where the list starts?

Before you go…

Thanks for reading! If you enjoyed this article, please give it a like 👍 to help others find it. And do not hesitate to share your thoughts in the comments below.

💡 Tip of the week

Are you learning git commands? Here is a resource you can use so you don’t have to remember it all: https://ohshitgit.com/

🔗 What else is going on in tech?

Are you ready for Facebook’s Metaverse?
The first release candidate for Python 3.10 is out!
Looking for a tech podcast recommendation? Check out the Elixir Mix!

Arrays and Lists 📚

Byte Sized — Mon, 27 Sep 2021 15:58:38 +0000

⚡ TL;DR: Arrays are fast and compact. Linked lists are not as compact, but adding or removing elements from them can be more efficient!

You probably already know how to use arrays and are familiar with methods like push, pop, etc. The purpose of this issue is to give you an understanding of arrays as a data structure and how they differ from lists.

**Why would you care?* For those who are preparing for a technical interview or would like to deepen your knowledge of computer science, this is the article for you.*

Arrays and lists are easy to mix up, so let’s try to make sense of what the differences are and how they work! ⚙️

You can think of memory as a bookshelf:

Now imagine you got the first four volumes of Game of Thrones 🐉:

This is your array. Now you wouldn’t want to store these volumes separately: if you find volume 1 you want to be able to find volume 2 easily. So you’ll find a place were you can put the four of them together. Luckily, our top shelf has room for exactly four volumes:

You found a spot for these, great. But, surprise! A friend comes over and gives you volume 5 📕

You run to your bookshelf, only to realize, you don’t have any room left next to volume 4 🙁

Reorganizing the bookshelf to make more room near volume 4 would work, but that seems like a lot of effort…

Instead, we’re going to move the first four volumes to a larger empty space. Now we can add the fifth volume!

Phew, that wasn’t easy! 🥵 These volumes are heavy, and you don’t want to go through the hassle of moving all of them every time you don’t have enough room for a new one.

So what are your options here? Well, we tried to do it the array way: put each volume next to each other, and move the entire series when you don’t have enough room for another volume. What if we tried to do it the list¹ way instead?

We’ll need a little bit of setup before getting into this. We are going to assign a letter to each shelf, and a number to each column of book:

Now, each location on our bookshelf has a set of coordinates. For example, the third book of the top shelf is at position A2.

Instead of storing our volumes next to each other, we are going to put the first volume anywhere in the bookshelf:

And now, we’re going to do the same with the second volume. Once we’ve found a location for it, we’re going to add a note next to the first volume with the coordinates of the second volume:

We can do this until we reach the fourth volume, where the note will be empty since we don’t have our fifth volume yet:

We just made a singly linked list: we have a single note next to each book that tells us where to find the next one.

Now you might be thinking, this is great, but why do I have to waste so much space storing those notes?

And you would be right: linked lists take up more space than arrays²! You give up some space, but you don’t have to worry about moving things around to add a volume to your series. As long as you have space for a book and a note, everything’s fine! Removing a volume in the middle is also a lot simpler: if you want to remove volume 2, just change the note after volume 1 with the coordinates of volume 3.

Key takeaway: trade-offs. When discussing the differences between arrays and lists, it is important to understand when and why to use one or the other — knowing this will make you stand out during any technical interview! ✨

[1]: Usually, people use **list* to mean linked list, and more specifically singly linked lists. There are other types of lists, but singly linked lists are the most common type.*

[2]: Technically this might not always be true, because of the way programming languages handles memory allocation for arrays. You can read more about this here.

💡 Tip of the week

You can use git switch - to switch back to your previous branch:

(main) git switch other-branch
(other-branch) git switch -
(main)

Learn more

🔗 What else is going on in tech?

If you are starting to learn about flexbox in CSS, this might be for you: https://knightsoftheflexboxtable.com/
For all the Rubyist around here, Stripe had some exciting news! https://sorbet.org/blog/2021/07/30/open-sourcing-sorbet-compiler
A beautiful and free library of UI components for Tailwind: https://daisyui.com/
Finally, if GitHub is your daily driver, checkout this new awesome feature! https://twitter.com/DynamicWebPaige/status/1425502379777019909

PS: We would love to know how you felt about this article, did you find it helpful, and are there topics you’d love to see covered? Tag @nspiredTech on Twitter if there’s anything you want to share :-)

DEV Community: Byte Sized

The Inspector 🔎: A better way to test your code

My Workflow

Submission Category:

Yaml File or Link to Code

Additional Resources / Info

Introducing: Tunnel Vision....

Reduce Vs For-Loop

What is expected from a Junior developer?

Don't be an asshole.

let and const vs var scoping

Top 5 command line tools you should try

ripgrep

fzf

jq

less +F

entr

The secret of big O notation

Which one do you choose? 🤔

O(1), O(n), what does that even mean? 🤷‍♀️

Space AND Time complexity

Tradeoffs

Best or worst case scenario?

Conclusion

Linked list coding challenge

Setup

Walking the list 🚶‍♀️

Finding a node

Removing the node

Handling the edge cases

Before you go…

💡 Tip of the week

🔗 What else is going on in tech?

Arrays and Lists 📚

💡 Tip of the week

🔗 What else is going on in tech?

`ripgrep`

`fzf`

`jq`

`less +F`

`entr`

`O(1)`, `O(n)`, what does that even mean? 🤷‍♀️