DEV Community: NaseerHines

Intro To C++

NaseerHines — Mon, 27 Jul 2020 06:22:05 +0000

So as I wrapped up completing my resume and other job hunt related tasks I wonder to myself what would be next on my plate to learn. I always thought it would be cool to work with code and build stuff that would be fun for myself and others. As a kid when I think back I really just meant building games, now that I have an understanding of programming and how to build robust applications. I find myself leaning back into that "building games would be cool" state of thinking. So after a little research on what most big gaming companies use their choice of language when building these massive games, C++ looked like the go-to. Learning something new can be hard, weirdly though I didn't immediately think about how difficult it would be to learn a new language. Instead, I just jumped right into planning out time to pick off the language as a new skill while I search for a job.

Today in this blog I'll go over how C++ works(or how I see it currently). Then some of the fundamentals I picked up about C++.
Yeah so C++ is an object-oriented programming language. The language is known for being used for a lot of different things like a sort of general-purpose language. Let's cover some general standards for C++.

Variables - These are some of the variables in C++ these names represent the type and must be assigned specific values

Types
int - stores integers (whole numbers), without decimals, such as 123 or -123
double - stores floating-point numbers, with decimals, such as 19.99 or -19.99
char - stores single characters, such as 'a' or 'B'. Char values are surrounded by single quotes
string - stores text, such as "Hello World". String values are surrounded by double quotes
bool - stores values with two states: true or false
In Use
int myNum = 5;               // Integer (whole number without decimals)
double myFloatNum = 5.99;    // Floating-point number (with decimals)
char myLetter = 'D';         // Character
string myText = "Hello";     // String (text)
bool myBoolean = true;       // Boolean (true or false)

Syntax - exactly what it sounds like the way the code is written

#include <iostream>
using namespace std;

int main() {
  cout << "Hello World!";
  return 0;
}

#include <iostream>

Its a Header file library that allows us to use input and output objects like cout(see out)

using namespace std

means that we can use names for objects and variables from the standard library.

their both kinda like how we import libraries in javascript
cout is a c++ object that is used with << to display variables We can allow user input by using cin(see out)

int x; 
cout << "Type a number: "; // Type a number and press enter
cin >> x; // Get user input from the keyboard
cout << "Your number is: " << x; // Display the input value

You can extend a display with more << like so

int myAge = 19;
cout << "I am " << myAge << " years old.";

These are pretty basic things to know since most languages include the majority of these standard operations. I still thought it would be cool to start here vs setting up C++ or using some specific comparison to another language. Honestly doing it this way simplifies learning it especially after another language in my opinion. As I continue to learn more about the language I hope to gain and share more knowledge from and back to the community.

Fastify vs Express

NaseerHines — Mon, 20 Jul 2020 06:18:22 +0000

Okay so as a developer I love trying out new stuff when I was diving into other types of middleware I came across this framework called fastify. I mostly use express so this is me comparing the two in my own opinion. So when developing your server thinking about what middleware you are going to use is rather important. They are lots of factors that can come into play when deciding and choosing a middleware that can specialize in the kind of support your server needs is always first in my opinion. If you are interested in trying out a new middleware fastify can get the job done. Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. It has three core focuses when it comes to showcasing it to its users. It is highly performant, extendible, and very developer-friendly. It also goes Hand in Hand with NodeJS
When I say highly performant I'm primarily talking speeds as it is said to have 20% faster request than the norm express most people developers use.

To add fastify to your project you need to npm install it with the following line.

npm install fastify

Implementation demo
In your server/index.js or whatever you name it

// Require the framework and instantiate it
const fastify = require('fastify')({ logger: true })

// Declare a route
fastify.get('/', async (request, reply) => {
  return { hello: 'world' }
})

// Run the server!
const start = async () => {
  try {
    await fastify.listen(3000)
    fastify.log.info(`server listening on ${fastify.server.address().port}`)
  } catch (err) {
    fastify.log.error(err)
    process.exit(1)
  }
}
start()

Here is how I would do it if I were using express

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Another great quality of fastify I wish I had looked into is that it works really well typescript. I say this because the project I'm currently working on is using typescript and we decided to use typescript on both the back-end and the front-end so bringing in a middleware that was more friendly to the language would have been great. Especially since sequelize was already proving to be a headache with the language. If we wanted to start an HTTP server using typescript it would look something like this

import * as fastify from 'fastify'
import { Server, IncomingMessage, ServerResponse } from 'http'

const server: fastify.FastifyInstance = fastify({})

const opts: fastify.RouteShorthandOptions = {
  schema: {
    response: {
      200: {
        type: 'object',
        properties: {
          pong: {
            type: 'string'
          }
        }
      }
    }
  }
}

server.get('/ping', opts, async (request, reply) => {
  return { pong: 'it worked!' }
})

server.listen(3000, (err) => {
  if (err) {
    server.log.error(err)
    process.exit(1)
  }
  server.log.info(`server listening on ${server.server.address().port}`)
})

Then you can just simply run your server with node or however you want to do the process.

In the end, there are obviously lots of different kinds of middleware out there and they can handle different cases. Express being sort of the norm in my opinion it will always have a stacked community behind it. Fastifyu has the community and in some ways is better than express. Choosing the right one depends on what your app does hand how your team chooses to meet those standards.

FuseJS

NaseerHines — Mon, 13 Jul 2020 06:54:27 +0000

Fuse.js is a powerful fuzzy-search library that comes with many tools fresh out the box. Even though it is stated as being "powerful" it is lightweight and holds zero dependencies. Some cool use cases it can have are instead of setting up a backend server dedicated to just searching you can use this library to handle that. It can handle client-side fuzzy searching of small to moderately large data sets. Now I will say that using Fuse for something like building Googles searching would be a bit much but the library but I love using it for my apps since its a very quick setup time and hardly every makes the code your writing complex.

Let's Take a look at some of their example code.

// 1. List of items to search in
const books = [
  {
    title: "Old Man's War",
    author: {
      firstName: 'John',
      lastName: 'Scalzi'
    }
  },
  {
    title: 'The Lock Artist',
    author: {
      firstName: 'Steve',
      lastName: 'Hamilton'
    }
  }
]

// 2. Set up the Fuse instance
const fuse = new Fuse(books, {
  keys: ['title', 'author.firstName']
})

// 3. Now search!
fuse.search('jon')

// Output:
// [
//   {
//     item: {
//       title: "Old Man's War",
//       author: {
//         firstName: 'John',
//         lastName: 'Scalzi'
//       }
//     },
//     refIndex: 0
//   }
// ]

What I love most about Fuse is that it uses very simple javascript to make the searching possible then their library handles a lot of stuff under the hood. Fuse is also fairly quick and simple to set up I'll take you through those steps next.

You can install Fuse as a dependency with npm or yarn using the following commands respectively.

$ npm install --save fuse.js

$ yarn add fuse.js

Then you can simply just add them to your file with an import if you are using es6 like such

import Fuse from 'fuse.js'

or in regular javascript with a require

const Fuse = require('fuse.js')

Once you've done that you can start using Fuse in your application.

So the reason I was using the library was to get a more social media feel when looking up users in my application since it was about inviting people to a virtual house party. Here is me using it.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Fuse from 'fuse.js';

const Search = ({ partyId, setPartyUpdate, update }: any) => {
  const [input, setInput] = useState('');
  const [users, setUsers] = useState([]);
  const [matches, setMatches]: any = useState([]);

  const fuse = new Fuse(users, {
    keys: ['username', 'nameFirst', 'nameLast'],
  });

  const getAllUsers = () => {
    return axios
      .get('/user/all')
      .then((res) => setUsers(res.data))
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    getAllUsers();
  }, []);

  const handleMatches = () => {
    const results: any = fuse.search(input);
    setMatches(results);
  };

In my component, I grab a list of all the users in my database and set them in my state with useState. After setting up the states variables we set up our fuse instance passing in the array of user objects to search through and then the keys for fuse to check fuzzy searches for. From there I use handle matches to call fuse.search on the users' array and check for the input variable that was set in the state whenever a user attempts to search for a username. Then we call setMatches and set it to whatever results gives back.

Fuse also comes with the option to explore more detailed and refined fuzzy searches according to your liking. There's actually a lot of other methods that Fuse has included with their library.

setCollection

const fruits = ['apple', 'orange']
const fuse = new Fuse(fruits)

fuse.setCollection(['banana', 'pear'])

add

const fruits = ['apple', 'orange']
const fuse = new Fuse(fruits)

fuse.add('banana')

console.log(fruits.length)
// => 3

remove

const fruits = ['apple', 'orange', 'banana', 'pear']
const fuse = new Fuse(fruits)

const results = fuse.remove((doc) => {
  return doc === 'banana' || doc === 'pear'
})

console.log(fruits.length)
// => 1

console.log(results)
// => ['banana', 'pear']

removeAt

const fruits = ['apple', 'orange', 'banana', 'pear']
const fuse = new Fuse(fruits)

fuse.removeAt(1)

console.log(fruits)
// => ['apple', 'banana', 'pear']

getIndex

const fruits = ['apple', 'orange', 'banana', 'pear']
const fuse = new Fuse(fruits)

console.log(fuse.getIndex().size())
// => 4

These are all built into Fuse and can be accessed anytime. I will be exploring their functionality a bit more soon and will update this to have the presentation of that link in this blog. Thanks for the read!

Passing Props VueJs Vs React

NaseerHines — Mon, 06 Jul 2020 08:57:07 +0000

Today I will be comparing Vuejs and React and how each of them handles props. I'll speak on some similarities and differences since both are javascript front end tools that I enjoy using. So VueJs describes themselves as approachable due to the fact that if you already know HTML, CSS, and JavaScript its fairly simple. Versatile because of its ability to design small apps and still have the utility to develop larger ones too. React on the other hand is a little different for instance, their core targeting being describes as declarative and component-based. They state Declarative views make your code more predictable and easier to debug. with components, they strive to build encapsulated components that manage their own state, then compose them to make complex UIs. Mostly they want it to be something you learn once and can begin to use it everywhere.

The HTML part of the vue component

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

Our component we want to pass the prop too
Here were pass the props as an array item

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

Vue also lets u pass the on an object like so

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

When accessing the props in the HTML you can use two ways interpolation like shown above or you can use v-bind similar to how angular does. It looks something like this

<!-- Dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- Dynamically assign the value of a complex expression -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

I also added an example of the component looping through multiple props and render them.

Here is how we would do it in react
This is the react component where the data is stored
So as you can see below we pass the data to our currently rendered component the data with this line

<Avatar user={props.author} />

We can assign the prop a name and give it what ever data we have access to in our current component

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

The component we are passing the props to

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Now that I have shown a brief example of both Vue and React's way of handling props I want to talk a bit about some of their differences.
So a cool thing about vue is you can actually pass props both ways. Meaning you can be in the parent or child and give each other data. I personally think this is amazingly useful. On the other hand, using react hooks to better manage your state in a component makes looking at the code cleaner and helps with needing to give parent/child components access to each other's specific data.

In conclusion, I prefer to handle the passing of props the way vue does mostly for readability. Another is for the fact that I can pass props up or down. In terms of React though, I also think that even without using hooks it isn't terrible to pass props through the state when using the library. Another big part that you can take into view is that reacts community, in my opinion, is fairly larger than Vue's. Vue also tries to be very straight forward when it comes to using their framework.

MySql Encryption

NaseerHines — Mon, 29 Jun 2020 08:53:51 +0000

So recently I was working on an app that allowed people to create and share movements between the app's users. Primarily it was for political movements but it can be used for all sorts of things. Eventually, I would continue to add the feature to let users send private messages between each other. One of the main focuses was to allow the messages to not be seen by others unless you were one of the two people. I looked into what exactly I could do to handle an issue like that so surfed the web and the first thing I found was on encryption. From there I dove deeper into how I could use it on my backend. My app's backend was using MySQL as its database so I went to their docks and check around for documentation on encryption. It turns out MySQL has built-in functions for encrypting and decrypting. The two primary functions for handle this sort of thing for MySQL were.

MySQL AES_ENCRYPT() function encrypts a string using AES algorithm.

MySQL AES_DECRYPT() function decrypts an encrypted string using AES algorithm to return the original string. It returns NULL if it detects invalid data.

AES stands for Advanced Encryption Standard. This function encodes the data with 128 bits key length but it can be extended up to 256 bits key length. It encrypts a string and returns a binary string. The return result will be NULL when an argument is NULL.

The encryption function looks like this

AES_ENCRYPT(str, key_str);
``

The decryption function looks like this

AES_DECRYPT(crypt_str, key_str);


In both cases, key_str stands just refer to the key u pass that will serve later as a sort of password to retrieve the encrypted data. For that reason, your key_str should be kept safe and hidden from people who aren't on your dev team. This can be bad for obvious reasons, but you could still just pass in the key directly and it would still work during decryption. Another important thing to think about is storing that encrypted data. When the function AES_ENCRYPT runs it will convert the passed in data into an unreadable code which case it will also be increased in size since things like padding get added. So as a developer you need to figure out how much space you should be saving. This was a big part for me since I was encrypting user messages which could get really long. On a larger scale, I would have considered using a whole different type of database. With my time and other things in play, I came to the conclusion that it would be better to save using a simple doctype DB instead of a relational one for some other time. But still, these are things you have to think about during the planning process of your application. Which leads me to this cool function that can help you determine how much space you should allocate.

16 × (trunc(string_length / 16) + 1)

Using that function helped me gauge how much space a single message should allocate after encryption.
Another good workaround to managing exactly how much data will be getting sent to the back-end is to limit it on the client-side. That way you know how much to leave for the message. 
Now when it came to decrypting the data it was pretty much the same u pass in what you want from the DB and you give the function the correct key_string from before. Here is an example of an insert query with the functions in action.

INSERT INTO testtable VALUE(AES_ENCRYPT('mytext','passw'));

SELECT description, AES_DECRYPT(description,'passw')
FROM testtable;



That pretty much sums up how using the built-in encryption and decryption functions work on a basic level.

Binary Heap

NaseerHines — Mon, 06 Apr 2020 08:00:46 +0000

Welcome coders, gamers, and other awesome people who are taking the time out to read this. So recently I dove into yet another intriguing toy problem, her name Binary Heap, and man was it a hell of a challenge. First I will do a bit of explaining on what exactly binary heap is.

A heap is a special kind of tree in which a parent node is ordered only in respect to its immediate children. Unlike the binary search tree you may have implemented, where the entire tree is ordered, in a heap, the only order guaranteed is between a node and its parent.

In a binary heap, each node should have only zero, one, or two children. Each node must have 2 children before the next oldest node can have any children. Therefore the 0th node will be the parent of the 1st and 2nd nodes, the 1st node will be the parent of the 3rd and 4th nodes, and the 2nd node will be the parent of the 5th and 6th nodes. In a specific kind of binary heap, the binary min-heap, every node is less than its immediate children.

So now that we have a clear description of what exactly binary heap is let us take a look at my implementation of how I think the problem can be solved.

function BinaryHeap() {
  this._heap = [];
  this._compare = function(i, j) { return i < j; };
  this._minChild = function(i, j) { 
    return this._heap[i] < this._heap[j] ? i : j;
  };
  this._swap = function(i, j) { 
    var temp = this._heap[j];
    this._heap[j] = this._heap[i];
    this._heap[i] = temp;
  };
}
BinaryHeap.prototype.getRoot = function() {
  return this._heap[0];
};

So next I Had to add some more functionality to the code to make it actually be able to classify as a binary heap.

Implement the insert and remove root methods, each operating in logarithmic time relative to the size of the heap and each restoring the heap's property of parent to child sorting. Use the equations above to navigate parent/child relationships in the storage array, and write any helper functions needed to assist you.

Insert methods

BinaryHeap.prototype.insert = function(value) {
  let j = this._heap.length, i;
  this._heap.push(value);
  while (j !== 0) {
    i = j;
    j = Math.floor( (i - 1) / 2 );
    if (this._compare(this._heap[i], this._heap[j])) {
      this._swap(i, j);
    }
  }
};

Remove Root method

BinaryHeap.prototype.removeRoot = function() {
  this._swap(0, this._heap.length - 1);
  const removed = this._heap.pop();
  let i = 0, j;
  while (i < this._heap.length) {
    j = i;
    i = this._minChild(j * 2 + 1, j * 2 + 2);
    if (this._compare(this._heap[i], this._heap[j])) {
      this._swap(i, j);
    }
  }
  return removed;
};

Honestly thinking back on this problem it actually was not that bad of a toy problem. A lot of the work I do for these problems has just become a mini-brain warm-up I do in the morning, which can be really helpful. So yeah that's the end pretty crazy right, but I'm super interested to dive into more toy problems in the future. Stay safe during this rough time in the world and remember to keep washing your hands and to keep practicing social distancing. I'm out thanks for reading see you cool beans in the next one.

Pony Farm

NaseerHines — Mon, 30 Mar 2020 08:04:28 +0000

Attention coders, readers, and other enthusiasts I've returned for yet another blog on my latest code challenge. So I thought I would make today's entry a little interesting by talking about, you guessed it ponies. Yep, that's right we together shall embark on a journey of ponies and what their allergies are. Well, I'm no veterinarian so I don't know if these are legit but as for this post, they are so yeah.

A certain pony farm raises and keeps track of cowboys' and cowgirls' ponies. Write a function, getPonyAllergies, that takes in an array of pony objects and an owner's email address and returns an alphabetically ordered array of all the foods without duplicates that the owner should avoid feeding their ponies.

So before we can jump into my solution as always we have more information to think about when we are writing our code.
Giving ourselves some challenges we can take into account when writing this code:
-You must order your returned allergies alphabetically.
-You must use Array.prototype.map or Array.prototype.flatMap.
-You must use Array.prototype.filter.
-You must not return any duplicate allergies.

My solution

const getPonyAllergies = (ponies, ownerEmail) => {
  const isEmail = obj => obj.email === ownerEmail;

  const allergies = obj => obj.allergies;

  const concat = (i, curr) => i + ',' + curr;

  const uniq = (item, pos, ary) => !pos || item !== ary[pos - 1];

  const str = ponies.filter(isEmail).map(allergies).reduce(concat);

  if (Array.isArray(str)) {
    return str.sort().filter(uniq);
  } else {
    return str.split(",").sort().filter(uniq);
  }
};

So first we make a callback function to check if the current object's email is the same as the passed in one.
Then we make a function to give us only the objects allergies array.
The concat function is just making sure we correctly add them to a new return array. uniq function is making sure we don't have any duplicates.

now we can make our array of allergies with

const str = ponies.filter(isEmail).map(allergies).reduce(concat);

Now we can just check if the string is an array if it is we sort then filter according to our uniq function. If it's not then we make it an array and then follow the back half of the first condition.

Let's make an array of test data(ponies in our pony farm)
we need them to have a few things

an id.
a name.
known allergies.
owners email.

const ponies = [
  {
    id: 427,
    name: 'Rarity',
    allergies: ['gluten', 'peanut'],
    email: 'cindy@ponymail.com',
  },
  {
    id: 23,
    name: 'Pinkie Pie',
    allergies: ['soy', 'peanut'],
    email: 'sandy@hotmail.com',
  },
  {
    id: 458,
    name: 'Twilight Sparkle',
    allergies: ['corn', 'gluten'],
    email: 'cindy@ponymail.com',
  },
  {
    id: 142,
    name: 'Rainbow Dash',
    allergies: ['gluten', 'chicken'],
    email: 'sandy@hotmail.com',
  },
  {
    id: 184,
    name: 'Applejack',
    allergies: ['soy', 'peanut', 'gluten'],
    email: 'jimmy@ponymail.com',
  },
];

If we test the code out with the following

const ownerEmail = 'sandy@hotmail.com';
getPonyAllergies(ponies, ownerEmail);

getPonyAllergies should return

['chicken', 'gluten', 'peanut', 'soy']

Ya so that was my last toy problem wasn't so bad, to be honest. I like these sort of problems because it just seems more fun overall. It doesn't just leave you to dry code which I don't think most people like. Welp, see you homies in the next one happy coding.

Coding Under Quarantine

NaseerHines — Mon, 23 Mar 2020 08:31:13 +0000

Attention my fellow developers, family, and friends, though we are stipend into our homes for a while we shall continue to grow by any means necessary. For most developers, working from home is nothing but a remote job. For me, though it is more like being squished into a tight box. I may feel most comfortable here but not being able to see my team members for my project or have the second home of a school at my disposal is very stressful for me. I say this because most of the time being at school is like getting away from all the things that trouble you when you're home. To add on to the stack I have to look out for my family through this threatening virus. Normally I wouldn't be so worried about these kinds of things but with it seeming as though my father may have the virus, the thoughts of him dying constantly flow my mind. So much as though it makes me want to not work or eat. Its scary, mostly because all of my life he never really got sick and was always strong enough to take care of the people who were sick in our house. Now I look at him on the couch and he needs someone to keep him full of energy and optimism. I feel like I'm being that someone but its been days and we have no way of knowing if he'll even get better soon. To be honest it mostly seems like it's just the same thing all day every day. I don't know if that is good or bad but it's very concerning. My mom's trying, but she also has to make sure neither I nor my siblings get sick. Which is hard since we are all currently in the same house. On top of that, I technical still working on my same schedule as if I was in school so I got to all the meetings, presentations and group call with my team. This is to ensure we stay on track to getting our app done. My work has been getting done but whenever you are grinding towards something you always have to give something up in the progress. Taking a look into that one night I thought to myself how can I make all of this happen without going insane. I need to do everything on my calendar, help out my dad, eat, sleep, stay clean, and relax. I don't have time to do all of them in my opinion and I know one could argue yes you do, but I'm a very different person than most. So I started giving less time to some of those places. I cut my sleep in half to 5 hours and relax when I felt like too much was happening. This allowed me to spend more time working and helping my dad. I was okay with it but as days went by the schedule felt haarder to keep inline with and I started being late. The craziest part was that I didn't feel tired or exhausted I just began to burn out. Maybe I'm ignoring it and just saying fuck it I'm fine(definitely was), but clearly something was slowing me down I couldn't think or work. I began to try and as people say soul search for what I needed to do ort tell myself to be motivated to do it all. Nothing worked until I sat with my dad. He said I've come too far to quit now and I told him I don't plan on quitting I just feel like I just need to step away from everything. We talked about a lot of different things that I won't share but it made me feel better and I was able to see how close I was to finishing and how great it would feel to do it. So I put the hands to the keyboard and ground out everything I could. I even start writing a blog about it all. This virus may have us tied under but ill always come out on top.

P.S, This isn't for extra length, but I actually began to start sleeping longer hours again prayers to all those fighting the battle you have my support and you will win.
<3

Roman Numeral Translator

NaseerHines — Mon, 16 Mar 2020 06:10:38 +0000

Welcome coders of the old and new, today we shall talk about numbers specifically how the Romans did it. First off what the hell even is a Roman Numeral, let's see what google says. Roman Numerals are a numeral system that originated in ancient Rome and remained the usual way of writing numbers throughout Europe well into the Late Middle Ages. Numbers in this system are represented by combinations of letters from the Latin alphabet. Welp, Google knows all so yeah I guess its a way of telling time. So I'm not a big fan of the roman system and can't quite get it so, I decided to write a translator for it. But before I did that I went and scoured the internet for a code challenge that was close to what I was trying to accomplish. You know just to make it a bit harder and clearer of what I needed to do exactly, something about being autonomous.
Came across one that seemed promising.

Given a roman numeral as input, 
write a function that converts the roman numeral to a number and outputs it.
You've been provided a helper DIGIT_VALUES to use.
Input: Strings of Roman Numerals
Output: Number representation of Roman Numeral
Cases:
If you receive an empty string, return 0.
If you receive anything other than a string, return null.

Examples =>
VI = 6 (5 + 1 = 6)
LXX = 70 (50 + 10 + 10 = 70)
MCC = 1200 (1000 + 100 + 100 = 1200)
IV = 4 (5 – 1 = 4)
XC = 90 (100 – 10 = 90)
CM = 900 (1000 – 100 = 900)

Here's The Helper

const DIGIT_VALUES = {
  I: 1,
  V: 5,
  X: 10,
  L: 50,
  C: 100,
  D: 500,
  M: 1000,
};

Let's look at an example of how my roman numerals translator looks in code, since I need to make everything code related to understanding it.

const translateRomanNumeral = (romanNumeral) => {
  if (typeof (romanNumeral) !== 'string') {
    return null;
  }
  if (romanNumeral === '') {
    return 0;
    }
  let number = 0;
  for (let i = romanNumeral.length - 1; i > -1; i--) {
    if (DIGIT_VALUES[romanNumeral[i]] < DIGIT_VALUES[romanNumeral[i + 1]]) {
      number -= DIGIT_VALUES[romanNumeral[i]];
    } else {
      number += DIGIT_VALUES[romanNumeral[i]];
    }
  }
  return number; 
};

// test
translateRomanNumeral('IV'); // => 4
translateRomanNumeral('V'); // => 5
translateRomanNumeral('X'); // => 10
translateRomanNumeral('XV'); // => 15

So let's do a bit of explaining, we know that we need to check a letter in the given string against the ones in our DIGIT_VALUES object. Also depending on the next number, we need to also follow this cadence of adding and subtracting. We can handle the cases we are given by doing a couple of conditionals. Checking if the string is even an actual string we want to return null. If the string is empty like '', then we want to send back 0. Other then that we do some looping and test if a given letter in the passed string is going to be added or subtracted, then doing the following. When a smaller numeral appears before a larger one, it becomes a subtractive operation. You can assume only one smaller numeral may appear in front of the larger one. With that, we can use a quick conditional chain that will determine which way we operate on our numerals.
Finally, no function is complete without our return statement here we just return the number variable we created earlier. I found doing this code challenge interesting because using a system like this for numbers seems like it could get really confusing. Even though many people used it for a long time so must have been good enough for them.

Take A Look At The Vue!!

NaseerHines — Mon, 09 Mar 2020 05:19:59 +0000

I can't wait to see how everyone "Reacts" when I show them how to enjoy the Vue.
Hopefully, readers get that joke or I'm going sound pretty dumb let's begin. So VueJS, in essence, is just like any other front-end framework for building user interfaces.
To incorporate vueJS in your code, you can do a few very convenient things. Before we get to that Vue also has it's on Vue DevTools. This like when using React is super helpful to check out whats going on in the code while on the browser. So one quick way to add Vue to your project is by adding a CDN in a script tag and placing that right in your HTML.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

The script above is recommended if you're just trying to dive into Vue and learn a bit about it. You can also NPM install this way is best if you plan on using Vue on a larger scale application.

$ npm install vue

The last way to do it is to create an entire file for it and place Vue's direct script downloaded file inside your workspace. I won't show this as the file is over ten-thousand lines and also I don't think this way is as easy as the other ones.

So let us take a look at a small 'getting started' version of the code.

HTML

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

We would get something like

1.Learn JavaScript
2.Learn Vue
3.Build something awesome

A super cool thing about Vue is that it does a lot of auto-updates so if I were to type this

app4.todos.push({ text: 'New item' })

we would instantly see a new list item inserted in the page called 'New item'. Speaking of array methods like push, when I see

<li v-for="todo in todos">

it makes me think of javascript for loop. In Vue, the v-for is a directive used to render a list of items based on an array. When I did some research on this directive I found that it actually has a specific syntax it likes to use that being, 'todo in todos'. The plural version 'todos' points at the array your in use. The singular version 'todo' is to reference the current element from a said array.
If you have ever worked with AnularJS then you can think of Vue's directives kind of like the ones in Angular. A directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of a directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format:

<element
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

In my opinion writing directives like this is way easier and honestly seems a lot easier to grasp what they're being used for when reading back a line of code with them included.
Vue has a bunch more directives and cool ways of writing components. I can't wait to update you all on the neat tricks I figure out as I explore more and expand my personal perspective of Vue.

Range Class

NaseerHines — Mon, 10 Feb 2020 06:43:42 +0000

Welcome coders, gamers, and all the other unique groups of people out there in the world. I'm here to discuss another code challenge called Range Class. Build a Range class that exposes functionality for dealing with ranges of numbers.

Build a Range class that exposes functionality for dealing with ranges of numbers.

The constructor should have the following characteristics:
a beginning index,
an optional end index,
If there is no end index, the range should include only the passed-in start value.

an optional step,
The step is the interval at which elements are included. For instance, a step of 1 includes every element in the range, while a step of 2 includes every other element.

It should also include the following functions:

Size method that returns the number of items represented by the range

Each method takes a callback which takes an index. Iterate over the range, passing each value to a callback function.

Includes method which rakes an index and returns whether or not the range includes the passed value.

You should also be aware of the following caveats:

You should allow a negative value for 'step' to count backwards.
If no step is provided, it should default to 1.
If the start value is greater than the end value, assume we're counting backwards.

Should return null if we are given no 'start' value.
Range should use constant space, even during the each method. i.e. you should not use an Array as backing storage.
Any given range could potentially be thousands of numbers long,
so find a way to represent the range without actually storing each element.

Okay so now that we have an understanding of what it should do let's look at the code.

const Range = function(start, end, step) {
  this.start = start;
  this.end = end === undefined ? start : end;
  this.step = !step ? (end > start ? 1 : -1) : step;
};

Range.prototype.each = function(callback) {
  for (let i = 0; i < this.size(); i++) {
    callback(this.start + this.step * i);
  }
};

Range.prototype.size = function() {   
  return Math.floor((this.end - this.start) / this.step) + 1;
};

Range.prototype.includes = function(target) {
  let included = false;
  this.each(num => {
    if(num === target){
      included = true;
    }
  });
  return included;
};

As I talk through the code I'll try and explain the variations of how both versions work. with that aside either version we have to start by doing the same thing. So we start off by setting our start, end, step on the constructor. The little difference for the short version is that we do a couple of helpful checks. So if our end is undefined we copy the value of our start so that it only runs once. If not then we set it to what end was passed in as. Next, when we get to our step we do a bit extra so if the user does not pass in a step we want to then use another conditional see if we need to go backwards or forward hence setting step either to one(1) or a negative one(-1). If a step was given by the user then we want to just use that one instead.

Next, we have to implement our Each method, we can start by looping through the current size of our range. From there we take our callback and just call it on every single index. Man, that was pretty straight forward it's nice to be able to just call a function inside of a for loop and a pretty interesting thing on its own.

For the size, we have a nice use of the Math.floor method that's just gonna take our end and start and perform the equation and return the largest integer less than or equal to our given number. then we add 1 to that.

Man, it's super unluckly I need to hit 3 minutes and must finish off discussing all parts of this thing. Sorry readers just need to stretch a little more out.

Anyways now that we have done that, let's talk about the last method includes.
So in the code snippet above, we create a flag variable to be changed depending on our findings. So we call our Each function to test each element and check if it finds our target if it does we just change our flag variable to true else we do nothing we just return our flag variable.

Now usually I like to give a good outro so I'm tired therefore I won't finish.

Shuffle Deck

NaseerHines — Mon, 03 Feb 2020 05:18:03 +0000

Welcome coders, gamers, and all the other unique groups of people out there in the world. I'm here to discuss another code challenge called Shuffle Deck. Now the name kind of implies what this problem is about but here is a brief explanation. Given an array containing a deck of cards and returns a shuffled version. So that's it seems straight forward right? But what describes a shuffle? Let us take a step into a real-world aspect version of the problem. Whenever you think of cards what do you think of first? My first thought is you have a dealer, and guess what he's doing the shuffling. Usually, the dealer knows these crazy techniques and can shuffle the cards around really fast. Now think about that from a computer standpoint. We already have the speed, but our computer isn't smart enough to know what a shuffle is. A way we can cover our bases with that is through coding in my case JavaScript is that source of brains. So let's take a look at some code.

const shuffleDeck = (deck) => {
  // duplicate the given deck
  const copyDeck = deck.slice();
  // create a new array to hold shuffled cards
  const shuffled = [];
  // find a way to loop through the copyDeck
  for (let i = copyDeck.length - 1; i >= 0; i--) {
    // this lets us create a new random index for later use in positioning
    const r = Math.floor(Math.random() * (i + 1));
    // destructor parts of the deck with the new random index
    [copyDeck[i], copyDeck[r]] = [copyDeck[r], copyDeck[i]];
    // push into shuffled the first card taken off the first index of copyDeck
    shuffled.push(copyDeck.pop());
  }
  // return shuffled deck after adding all the cards
  return shuffled;
};

So looking at the code above you can see we use javascript to dictate; or tell the computer to run certain actions for us. When we invoke the function above with a deck the first thing we do is make a copy of the passed-in array. I will explain more about why we do this later. So we know that we need to iterate through our array somehow. A way we can do this is by using our good old for loop. I think looping backward is more interesting so I did that above. So now that we are giving our selves access to the inside of the deck of cards we can now change the indexes of the cards around i.e. shuffle. Above I use this super interesting style called destructuring. Essentially it lets us pass in our wanted values into where our target values are currently. Then we take our shuffled array and add those values to the new values that we pop off the copy array. Then we can give the user back that original deck of cards now shuffled The style of shuffle where we copy the array is called a pure shuffle since we don't change the original array. But there is another way we can do this problem where we don't actually copy a duplicate array. Instead, we just make changes to the current passed in array of cards. This style of shuffleDeck is considered impure or a dirty shuffle since we alter the original array. The code for a dirty shuffle would look something like this.

const shuffleDeck = (deck) => {
  // impure shuffle
  // no need to make a new array just loop though given array
  for (let i = deck.length - 1; i >= 0; i--) {
    // use the same Math method to get a new random index
     let r = Math.floor(Math.random() * (i + 1));
    // set the cards in the random index swapping them out with whats their already
    [deck[i], deck[r]] = [deck[r], deck[i]];
  }
  // return passed in deck with shuffled cards
  return deck;
};

While the code above is a bit shorter than the pure shuffle like all things it has its own drawbacks. The main one is that we change the passed in array which is usually something you want to stray away from since you could be using the array for other things possibly. But like I said this shortens our code when we don't copy the array, or push and pop into and from different arrays. All in all, I rate this code challenge 52 out of 52.