DEV Community: Miguel Ben

Intro to Data Structures + Algo [Part 3]

Miguel Ben — Mon, 17 Aug 2020 03:56:59 +0000

Hello everyone, it's been another week and is time for the next part of our series. Today we are going to be talking about Linked list. We are covering two type of linked list, singly and doubly. So what problems did we had with static arrays?

We were able to allocate a certain amount of data or memory next to each other but then both dynamic and static arrays can increase their memory once they hit a certain limit and double the memory in another location. However, this operation of doubling up memory has a performance implication and it cost O(n). Additionally, arrays have bad performance for operations such as delete and / or insertion that have to shift indexes over. Specially when you do these operations when is not at the end of the array.

Then, as to our rescue came the hash tables which allows for you to store whatever you want in memory. Hash tables will know where to store it for us and take care of it. Unfortunately, hash tables by default aren't ordered but don't sweat it that where Linked list will make our life easier. Does this mean that Link lists are the go to alternative now? No, there is never an absolute answer in data structures. Remember, there will always be some trade offs.

Note: Hashes will be covered in a future post. 🙇

A singly linked list contains a set of nodes. These nodes contains two elements, the value of the data that you want to store and a pointer to the next node in line. The first node is called the 'Head' and the last one is 'Tail' the after the last node it points to 'Null'.

a linked list consists of nodes where each node contains a data field and a reference link to the next node in the list.

Example 1 - Pseudo Code

/* 
head
eggs 
4   --> ham     tail
        6  --> cheese
               12    --> null
*/

For more visual representation of algorithms use this website.

Are linked list good or bad? First, on arrays you are able to start from whatever index of your choosing but on linked list you can only iterate from the head until you hit null.

Let's talk about what do we mean about a pointer? refers to the next place (object or node) in memory. Simplest example for pointers in javascript is the following:

const objectOne = {stock1: 1.33}; const objectTwo = objectOne;

Now let's jump to a more concrete example. This upcoming piece of code will be the base for our first exercise. The challenge is to complete this linked list. Tip: Try completing an append() method that allows you to add the value to the list.SOLUTION

// 23 --> 51 --> 12
class LinkedList {
  constructor(val) {
    this.head = {
      value: val,
      next: null
    };
    this.tail = this.head;
    this.length = 1;
  }
  append(val) {
    // complete it for the linkedList pt 2
  }
}

let myLinkedList = new LinkedList(23);
myLinkedList.append(51);
myLinkedList.append(12);

Now let's try creating a prepend() method for our list under the append method. Check out the Linkedlist2 script for the Solution

Until next time everyone eat your tacos!

Resources

VisualAlgo.net by Dr Steven Halim
GeekforGeeks

Conclusion

Hey y'all, thanks for sticking around in this mini series. We have covered the basics about linked list and Hopefully we have all learned a thing or two from today examples. If you guys have any suggestions or better examples please share them in the comment section below. P.S: I'm going to start updating all blogs now. Apologies for any inconvenience.

Intro to Data Structures + Algo [Part 2]

Miguel Ben — Mon, 10 Aug 2020 03:38:09 +0000

Intro

Hey guys, it's another week for our coding challenges (Data Structures and Algorithms). Today we are going to be talking about Arrays which is one of the fundamentals Data Structures. However, in layman terms what is a data structure? It simply is things that we could built from scratch, for example an array. This is one of the most common topics in interviews, and you will usually see questions such as filter X elements from the array, reverse that other array or even start sorting this array.

The best way for you to solve an array based question is to simply be more knowledgeable about this topic. Moreover, knowing more about fundamentals such as operators, loops and recursion will help. Another key benefit is that it offers fast O(1) search if you know the index, but adding and removing an element from an array is slow because you cannot change the size of the array once it's created.

Hopefully, I do have your attention

Examples

Before I forget, the following array methods have specific time complexities that you should keep in mind. The push() is a constant O(1), lookup() is O(1), insert() is O(n) & delete() O(n).

const ratings = ["M", "A", "X", "F"]
//                0    1    2    3  

ratings.push("N") // O(1)

ratings.unshift("T") // O(n)

ratings.splice(2, 0, "potatoes"); // O(n/2) simplified to O(n)

Great, now let's go over what are static and dynamic arrays. First, static arrays are the ones fixed in size, this means you are to specify ahead of time the number of elements your array will hold (Seen this more on C++ and Java). A Dynamic array allows us to copy and rebuild the array at a new memory location. What you need to remember is that Dynamic arrays expands as you add more elements, so you don't need to determine the size ahead of time.

Note: You should treat string questions as an array question.

Strings are simply an array of characters.

A few array coding questions to practice with:

[EASY] Create a function that reverses a string. Solution

const reverse = str =>{ // leaving this here to get you started

}

reverse("Pikachu loves his trainer")
// reniart sih sevol uhcakiP

[EASY-MED] Given two arrays that are sorted can you merge them into one big array (still sorted). Solution

const mergeSortedArrs = (arr1, arr2) => {

}

mergeSortedArrs([1,12,28,53], [4, 7, 22, 37])
// output => [1,4,7,12,22,28,37,53]

If you guys want to read a more amazing blog about this topic, please check on Sean posts.

Find the First Duplicate in a JavaScript Array

Sean Welsh Brown ・ Aug 5 ・ 4 min read

#javascript #tutorial #algorithms #arrays

Conclusion

We are just beginning to cover early on on Data Structures and so far we seen Big O and Arrays. We mentioned how dynamic arrays have to double up or expand our memory. Also how strings are considered array questions. It's recommended to go and cheat the Big O cheat sheet and read more the section regards array (interpret / understand). This will help you more by the time we get into Algorithms.

See you next time ~~~ Bye.

Intro to Data Structures + Algo [Part 1]

Miguel Ben — Mon, 03 Aug 2020 02:57:36 +0000

Hey folks! I'm starting a series to cover popular code challenges that are often used on technical interviews. My intent is to make this a weekly series and that way we could share our solutions in the comments. As a reference many of these challenges are taken from websites such as Hackerrank, Leetcode, InterviewCake and Codewars. (etc...)

What is Data Structures? Well, it is a particular way of organizing data in a computer/program so that it can be used effectively. Then, What is an algorithm? is a step-by-step procedure that takes an input instance (problem) as input/s and produces output for the problem (instance).

Warning: It's not guaranteed that you will be asked any of the coding or data structure / algorithmic questions, but they will give you an idea of what kind of questions you can expect in a real interview.

If you have no experience whatsoever in Data Structure and Algorithms, then you should visit either interview cake, Udemy Colt Steele or even Freecodecamp to get the basics down.

My intention is to cover the following during this series:

Big O 🔗
Arrays 🔗
Linked list 🔗
Stacks & Queues 🔗
Hashes 🔗
Sorting 🔗
Trees (Binary Search Tree) 🔗
Graphs 🔗
System Design (Extra) 🔗

Note: Challenges will be presented like this => e.g: Big-O (Title) [Difficulty]

Umm... wait a minute, what about the types of Alg?

Ah...yes. Before I forget, All algorithms can be categorized in one of these paradigms:

Brute Force Algorithm - check all possible solutions and select the best one.
Dynamic Programming Alg. - solve the problem based on all the previous solutions.
Greedy - Choosing the best solution at the moment, regardless of the consequences in the future.
Divide & Conquer - divide the problem into a smaller set of issues to resolve and get the overall solution at the end.

Let's begin introducing our first guest Big O.

Big O

Allows us to determine the scalability of our code, this refers to how we measure the efficiency of our code. How can we exactly calculate the performance of our code? is it runtime speed? complexity/simplicity? Regardless the differences of our computer how do we calculate scalability again? We are able to measure it by how large the input size is and how much this slow down our function or algorithm (algorithmic efficiency).

As the number of elements(inputs) increases, how many operations do we have to do?

Linear Time

const yoda = ['Baby Yoda']
const friends = ['Mandolorian', 'Luke', 'Leila', 'Clone A','Baby Yoda','Dark Vader']
const large = new Array(10000).fill('Baby Yoda')

const findBabyYoda = arr=> {
    for(let i=0; i < arr.length; i++){
      if(arr[i] === 'Baby Yoda'){
        console.log('FOUND YODA!')
      }
    }
}

findBabyYoda(friends) // O(n) - Linear time
// The num of outputs increases proportionally with the num of inputs

Constant Time

const pineapples = [0,1,2,3,4,5]

const logFirstsPineapples = pineapples => {
    console.log(pineapples[0])  // O(1) - constant time
    console.log(pineapples[1])  // 0(1) - constant time
}


logFirstsPineapples(pineapples) // O(2)

1- What is the Big O of the below function? Solution

const firstChallenge => input => {
  let a = 10;
  a = 50 + 3;

  for (let i = 0; i < input.length; i++) {
    ramdomFunction();
    let stranger = true;
    a++;
  }
  return a;
}

2- What is the Big O of the below function? Solution

function secondChallenge(input) {
  let a = 5;
  let b = 10;
  let c = 50;
  for (let i = 0; i < input; i++) {
    let x = i + 1;
    let y = i + 2;
    let z = i + 3;

  }
  for (let j = 0; j < input; j++) {
    let p = j * 2;
    let q = j * 2;
  }
  let whoRu= "I don't know";
}

Rules to help you Big(O) a bit better:

Worst Case:

Resource

Big 0 Spreadsheet

are you still with me?

Thanks for making it to the end of our first stop, what we saw today seemed pretty basic but this is only the beginning and it will get more challenging as we progress in this topic. If you have any questions, suggestions or anything to discuss in regards this topic please comment below.

Hope to see you in the comments!

// How to deploy your front end website.

Miguel Ben — Thu, 20 Feb 2020 19:38:39 +0000

Hey folks, today we are going to talk about how to deploy that front-end project that you have been working on. As newbies we often think "How can I make my work accessible to the world?". Don't be discouraged it's simpler than you may think!

So, I've found some options for our dilemma which are the following:

surge.sh 🍄 + 🦵
github-pages 😸 + 🐙
netlify.com ⚡️

Our boy Heroku is not an option here...💨

Deploying with Surge

Surge is a simple, single-command web publishing CLI library. It can publish HTML, CSS, and JS for free, without leaving the command line. Everything becomes so simple that you are actually a few key strokes away from deploying your website or web app with the help of node.js.

Steps:

Ensure that you have the latest version of node.js installed.
Install Surge:
npm install --global surge or npm install -g surge
Go to your project root folder, run surge and fill the project path and domain field (optional).

Note: Surge by default provides a domain for your project.

One more thing, while deploying your site with surge you will be asked for an email and password, type an email / password of your choice (easy to remember). This is the default domain that surge generated for me http://like-clouds.surge.sh/ .

Deploy with a custom domain

WARNING: This may require some extra steps in terms of configuring your DNS but for more details please refer to the official guide from Surge here.

Or click here:

Make something of your ridiculous domains | by Kenneth Ormandy | surge sh | Medium

Kenneth Ormandy ・ Oct 21, 2015 ・ 5 min read
Medium

After the necessary setup, Surge will allow you to deploy your site with a custom domain by using the following command:

$ surge ./ *customdomainname.com*

A quick breakdown of the command + optional args used: $ prompt, ./ root of your project path, and *customdomainname.com* your custom domain name.

Deploying with Github pages

Many may argue with me, but github pages is the way to go for deploying static sites. Why? If you already have a github account, a static site and your git terminal set up, then you are a few steps away from having your site deployed.

Steps:

A. Already have your own Github account and create a new github repo with the name: username.github.io.

B. Jump to your git terminal client (recommended) and clone your new repo to a local directory.

C. Enter the project folder and add an index.html file:

D. Push everything up to Github:

E. …and you're done, fire up your browser and visit your site at https://username.github.io

Deploying with Netlify

For last, we have Netlify a web hosting infrastructure and automation technology. why Netlify instead GithubPages or even Surge.sh? Netlify provides you with basic features such as website deploy preview, site state rollbacks and other management tools for free.

Steps:

Right after, logging in you'll be prompted with the Add A New Project button shown above.

Link your Github account

Make sure your static website or SPA has been pushed to Github, so we'll connect netlify with github. Just click the button with the familiar octo cat icon.

Authorize Netlify

Allow Netlify and GitHub to talk to each other by clicking the Authorize Application button.

Select Your Repo

After connecting Github and Netlify, choose the repo with your static or SPA files.

Configure Your Settings

If necessary you can configure your options on this step. If your site is static and is not using any preprocessors or compiling software then just set the directory to / or just leave the build command blank. Now click the Build your site button to continue.

Build Your Site and Visit your site

Sit and chill, while netlify is taking care of everything.

References:

These are the resources I've used for this post:

Recap:

Surge, is ease the installation and launching process, while hosting your static site locally. It generates a random domain name for your project by default.
Github pages allows us to host our static site on their platform but domain names have the following format projectname.github.io.
Netlify does also allow you to host static sites on their platform and offer a lots of perks in regards managing your project but it whats made for more complex and robust web apps in mind.

Anything else?

Did I miss something? Need to clarify or discuss? Please let me know in the comments!

It feels like I missed something ...

// Let's learn `this` in Javascript

Miguel Ben — Mon, 10 Feb 2020 21:36:13 +0000

Hello World,

Today we will be going over the javascript keyword this (clickable). The value of this refers to the object that is executing at the current function (runtime binding). This topic often confuses a plethora of developers because it's one of the most commons JS keywords, but it's hard to tell what does this means.

I'm assuming that you already know what an object, and a method is. However, if you are feeling rusty let's do a quick recap:

What is an object?

is a set of data stored in name-value pairs (Hashes or key-value pairs).

Example of an obj: 👇

const person = {
    name: "Greg",
    power_level: 10000,
    hobby: "cycling",
    age: "unknown",
    skill_user: true
}

In an obj you are able to store values such as string, integers, booleans, functions and even other objects.

What is a method?

is a function that belongs to an object.


const person = {
    word: 'Alright!~',

    shouting: function(){
        console.log('Hey Luke!! wink wink ~');
    }
}

person.shouting(); // => Hey Luke!! wink wink ~

In the prior example shouting is a method of our person object.

Qué es esto / this? 🧐

Again, in the context of JS 'this' refers to the object that our function belongs to. An example of this could be our person obj inside a function:

Example 1:


const person = {
  name: "Isaac",
  routine: function() {
    console.log(this); // `this` refers to the current instance | object called person
  }
};

person.routine(); // => { name: 'Isaac', routine: [Function: routine] }

Executing the code above will let us see the person object.

  > typeof person
  > 'object'

Example 2:


const person = {
    power_level: 25,

    afterTraining: function(){ // camel case
        this.power_level += 300;
    }
}

console.log('initial power level of ' + person.power_level + ".");
// => initial power level of 25.

person.afterTraining(); // => +300

console.log('Power after training: ' + person.power_level+ ".");
// => Power after training: 325.

As we can see the afterTraining function increases the power_level by 300.

Hey bud! are you still w/ me?

Global context

If we type this in our browser console, it will refer to window - global object. Chrome: Press ⌘ + ⇧ + C to access the browser console.

this // => Window obj

let hello = 'Hello, World!'
this.hello // => Hello, World!

window.heyCarl = 'Hey, Carl.'
this.heyCarl // => Hey, Carl.

const helloFix = 'Hello...repairman'
this.helloFix // => und ... undefined?

Recap: 🔍

By default this gets set to "window" obj, unless declared as something else.
this is the obj that our function belongs to when called.

Thanks for reading 👋. Hey check out one of my friends blog:

Shoutout Round 1

Releasing Your Inner Unicorn

Iqra Masroor ・ Jan 28 '20

#lolcat #rubygem #cli #ruby

An Example of a Git Workflow

Lori "Lei" Boyd ・ Feb 3 '20

#git #beginners #tutorial

I’ve been working on the “Rails” road! How to Rails through your terminal. This is only the beginning… | by Luke Lin | Medium

Luke Lin ・ Feb 10, 2020 ・
Medium

References:

Anything else?

Did I miss something? Please let me know in the comments!

Yay!

By the way this was my first post! 🎉🎉🎉

DEV Community: Miguel Ben

Intro to Data Structures + Algo [Part 3]

Example 1 - Pseudo Code

Resources

Conclusion

Intro to Data Structures + Algo [Part 2]

Intro

Examples

Find the First Duplicate in a JavaScript Array

Sean Welsh Brown ・ Aug 5 ・ 4 min read

Conclusion

Intro to Data Structures + Algo [Part 1]

Big O

Linear Time

Constant Time

Resource

// How to deploy your front end website.

Deploying with Surge

Deploy with a custom domain

Make something of your ridiculous domains | by Kenneth Ormandy | surge sh | Medium

Kenneth Ormandy ・ Oct 21, 2015 ・ 5 min read Medium

Deploying with Github pages

Deploying with Netlify

References:

Recap:

Anything else?

// Let's learn `this` in Javascript

Qué es esto / this? 🧐

Global context

Recap: 🔍

Releasing Your Inner Unicorn

Iqra Masroor ・ Jan 28 '20

An Example of a Git Workflow

Lori "Lei" Boyd ・ Feb 3 '20

I’ve been working on the “Rails” road! How to Rails through your terminal. This is only the beginning… | by Luke Lin | Medium

Luke Lin ・ Feb 10, 2020 ・ Medium

References:

Anything else?

Kenneth Ormandy ・ Oct 21, 2015 ・ 5 min read
Medium

Luke Lin ・ Feb 10, 2020 ・
Medium