DEV Community: Nashmeyah

Data Structure: Binary Tree

Nashmeyah — Fri, 03 Dec 2021 04:50:36 +0000

Hello All!
(all the photos used are from google btw)

Its been a while, I hope you all are doing well.

In this post, I wanted to share some basic knowledge of trees in programming and data structures.

We are starting with the trees. A tree is a data structure used to simulate a hierarchical tree structure. A node of the tree has a root value and a list of references to other nodes which are referred to as child nodes.
The most typical tree structure used is the Binary tree. As the name suggests, each node of the binary tree has at most two children referred to as left child and right child.

Notice the image above to understand a visual representation of how this looks like.

Traversal Methods used in a Binary Tree

Def. of Traverse ~ travel across or through.

Pre-order Traversal
--Pre-order traversal is to visit the root first. Then traverse the left subtree. Finally, traverse the right subtree.

The red indicates that we return from the visit on the node to move to the next node, but continue to move down on all left nodes.

In-order Traversal
--In-order traversal is to traverse the left subtree first. Then visit the root. Finally, traverse the right subtree

In a binary search tree, all data is retrieved in a sorted order using in-order traversal.

Post-order Traversal
--Traverse the left subtree first. Then traverse the right subtree. Finally, visit the root.

Personally I think this one is a bit hard foe me to wrap my head around. Spend some time running the numbers back in your head and understand the map.

I hope this makes sense and simplified the Binary Tree. Next post I'd like to cover recursions using one of these traverse methods.

When you delete nodes in a tree, deletion process will be in post-order, when you delete a node, you will delete its left child and its right child before you delete the node itself.

Difference between language, framework and library

Nashmeyah — Mon, 24 May 2021 05:48:31 +0000

Hello All!

Today I thought to talk about the difference between library, framework and language as many junior developers think they are one and the same.

Language

First and for most, Language is is a set of commands, directions, and different syntax used to form a software program. It is what’s used to give the computer directions in order to meet our goals.

Examples include: Python, JavaScript, C#, Ruby, Swift, Go..etc

Framework

A framework is a platform for development, providing foundations on which you as the developer can build on. Think of it like a canvas, its ready for you to just paint on.

The difference between library and framework is what’s called inversion of control. Library allows you to control where you want to put and build your code, while a framework is already in set of the flow and has places already set for you to place your code.

Examples Include: Ruby on Rails, Angular, Vue, Express, Bootstrap, Drupal...etc.

Library

Library is an easy one, it is literally a library that holds a collection of objects, functions, methods... anything to make your code easier to build and less clutter. They are written by other developers to make your life easier and saves you time for coding. Easy right!

I hope this helps!

First Python Project

Nashmeyah — Mon, 17 May 2021 05:43:48 +0000

Hello World!!

Let's start making the first Python project on your machine!

Step 1) Open PyCharm Editor. You can see the introductory screen for PyCharm, click on “Create New Project”.

Step 2) You will need to select a location.

You can select the location where you want the project to be created.

Next, click the “Create” Button.

Step 3) Now Go up to the “File” menu and select “New”. Next, select “Python File”.

Step 4) A new pop-up will appear. Now type the name of the file you want (Here we give “HelloWorld!”) and hit “OK”.

Step 5) Now type a simple program - print (‘Hello World!’).

Now Go up to the “Run” menu and select “Run” to run your program.

There you have it!!! Your first program in Python! Simple right? Now imagine the world of things you can do with just this information and the things you can build.

Setting up Python on Windows

Nashmeyah — Mon, 10 May 2021 05:39:52 +0000

Recently I have been learning Python. I learned Java in college but it seems that Python is more used in tech industries. As my first post about Python, I will start by talking about how to set it up on Windows. I learned that there are 3 different ways to install it on your system.

The Microsoft Store
The full installer
Windows Subsystem for Linux

In this article, I will introduce how to set it up using the Microsoft store. First, check if your system already has Python installed.

Press the Win key.
Type PowerShell.
Press Enter.

Then in your command line type

python --version
//Python 3.8.4

if you see a response that is the current version installed on your machine.

Installing Python from Windows store

Step 1: Open the Python App Page in the Microsoft Store
Open the Microsoft Store app and search for Python.

Select Python the highest version number you see available in the app, to open the installation page. Continue with all the setup instructions and you should have Python ready on the machine.

Another tip from reading countless articles is to install Pycharm. PyCharm is a cross-platform IDE that provides consistent experience on the Windows, macOS, and Linux operating systems. Here is the link to the website to set it all up.
https://www.jetbrains.com/help/pycharm/installation-guide.html

I hope you enjoyed it, please let me know if you have any questions or concerns about setting up Python and I will aid as much as I can.

Sass: @use

Nashmeyah — Mon, 26 Apr 2021 05:35:05 +0000

I wrote a blog about using @import with your SASS projects to use variables and information from another file within your projects. There is another way to achieve this and that is with using @use.

"The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules full of useful functions."(Sass, Online Docs. 2021)

I am using this image straight from the Sass website. It clearly shows how to incorporate use into your files.

Think of it this way, When speaking to your computer, you have organized your style sheets and all that wonderful glory, in your main style sheet that you want sass to run, say "hey I want you to USE my code style sheet found in the foundation folder (i.e. "foundation/_folder.sass") and also the lists style found within the same folder ("foundation/_lists.sass"). Just as a review, the underbar right before the file name tells the computer to ignore that file and not run it with the projects unless stated otherwise.

Now you may be wondering what is the difference between using use and import. Well fundamentally they both do the same thing, but the main difference between the two is that import makes every variable globally accessible in the target file.

"Import enables an endless chain of imported files where it's difficult to trace where your variables and mixins are coming from. It also allows for overlap and makes it difficult to trace back why your perfect css breaks. This is a problem especially with complex file structures and projects with multiple contributors and global libraries, which is why @import is no longer recommended by Sass."(liquidlight.co.uk, Minna Ylitalo 2020. online docs. 2021)

Setting up a Ruby on Rails Project

Nashmeyah — Mon, 19 Apr 2021 05:32:40 +0000

Before setting up a Ruby on Rails project, you have to make sure that you have the latest version installed on your machine. If you have Ruby installed, check the version by typing

ruby -v
// then type 
gem --version

If you get an error that means you don't have Ruby, download the installation package from https://rubyinstaller.org/. Follow the link and then run the installer.

Now that's done, its time to set up the Rails installation,

gem install rails

Create a new repo on GitHub. Clone the repo in your command line, within the directory you want to type this line of code,

rails new *name of your app or project*
// ex: rails new myProject

Now after you open your vscode, you can start the rails server to see your work live with the command

rails server // or rails s

Optional

The above steps set you up with blank files and folders so you can start building from scratch. But, there is an option where you can scaffold folders and files for an already setup MVC structure with a database as well.

rails generate scaffold Project name:string

That's it! Youre all set up with the bare bones of a Ruby on Rails application. Let me know if there are any other clarifications you would like me to go over! Enjoy!

JavaScript Tricks - part 2

Nashmeyah — Mon, 12 Apr 2021 05:40:00 +0000

Hi Guys! So I found a couple more JS tricks I wanted to share with you guys!

Length

When you want to resize an array and set it to 0 or erase your whole array maybe needing to start fresh. Here is a simple way you can do it.

let array = [1, 9, 42, 4, 90];  
console.log(array.length); // 5  

array.length = 4;  
console.log(array.length); // 4 -- it removes the last element  
console.log(array); // [1,9,42,4]

array.length = 0;  
console.log(array.length); // 0  -- we are at 0
console.log(array); // []

Query String Params

I loved this one, reminded me of when I went crazy for days trying to get params data.

let urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "? 
post=1234&action=edit&active=1"

Array, Boolean

Want to get rid of all the falsey values in an array, just pass Boolean to a .filter() method.

myArray
.map(item => {
    // ...
})
// Get rid of bad values
.filter(Boolean);

Disclaimer! These are not tricks I figured out myself, social media is a wonderful place! Enjoy!

JavaScript Tricks

Nashmeyah — Mon, 05 Apr 2021 05:38:46 +0000

Hey Guys!

Here are a few JS tricks I learned online, I thought id share a few with you all.

Console.table()

When you have an array and you want to display the data, instead of it looking like this,

It can look cleaner like this,

the difference is the first one was used with console.log() and the second was used with console.table().

Conditionals

Within your code, you're likely going to use and if statement, now of course with this tip you'll want to use it carefully because we always want our code to be readable for other viewers. So in your code if you a simple if statement, you can use what is called a ternary operator.

Example:

if (tired) {
  sleep();
}

can be changed to,

hungry && goToFridge()

or,

if(age > 5){
  kindergarten()
}else{
  firstGrade()
}

transformed to this,

age > 5 ? kindergarten() : firstGrade()

Filtering for unique objects

Now we all know how many times we have had to filter out for unique elements, here is a trick using the Set object. "The Set object lets you store unique values of any type, whether primitive values or object references."(MDN, Online Doc)

const my_array = [1, 7, 2, 2, 3, 1, 4, 6, 5, 7, 8, 9, 1, 2, 4]
const unique_array = [...new Set(my_array)];
console.log(unique_array); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Thank you for enjoying my blog, I will post more tips more in the future if this was helpful. Once again, please let me know if there is anything you would like me to write about.

Undefined vs. Null vs. Undeclared

Nashmeyah — Mon, 29 Mar 2021 05:13:57 +0000

A typical JavaScript interview question asks "What is the difference between a variable that is: null, undefined and undeclared?"

Lets break each one down and understand what each one means and how it relates to programming.

Null:

"The value null represents the intentional absence of any object value. It is one of JavaScript's primitive values and is treated as falsy for boolean operations." (MDN Web Docs, Online). Null means that the value is absent, not 0... the value points to no object.

x = null;

Undefined:

"The undefined property indicates that a variable has not been assigned a value, or not declared at all.", (W3Schools, Online).

let x
console.log(x + "test")
// x is undefined

Undeclared:

Variables that have been declared without using const, var, or let. For Example:

testVar = "This is undeclared"
// as opposed to
let testVar = "This is declared"

Now lets discuss the differences between all three. Null is pointing to nothing in memory. Undefined is a variable that has not been assigned any value. Lastly, undeclared is a variable that has not been properly declared using const, var, or let.

Sass: @import

Nashmeyah — Mon, 22 Mar 2021 04:53:30 +0000

Hi Guys! Lets talk about files and file structures using Sass.

When organizing your web design style files, you don't want to put all the styles into one file. Think when you are building a massive web application, you will have to sift through thousands of lines of code to style or change one thing.

Here is an example on how to best organize your files.

Notice how the master.scss file is the only one that does not have the underscore at the beginning of the filename. This means that everything with an underscore is a partial file and should not be generated into a css file. In the html file, when you link the style sheet, the master style sheet will be the main one used and generated.

The files that are partial files when you want to use them into the master, you simply use @import at the top of the file. For example, if you have a _variables.scss file that stores all the variables you set for styling, you would import it at the top of the master or any other file you want to use using one line of code.

@import "variables";

I hope this helped, let me know if you'd like me to cover anything else regarding scss.

Closures

Nashmeyah — Mon, 15 Mar 2021 05:39:32 +0000

What is a closure?

"A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time." (MDN Web Docs, online)

In other words, a closures control what is and isn't in a scope for a function. A closure gives you access to an outer functions scope from within the function you are currently working in. The inner function will have access to the variables and objects from the outer functions scope.

Some examples of simple closures.

function increment() {

let i = 0;

  return function() {

    return i++;

  }

}

let addUp = increment();
//addUp() 0
//addUp() 1
//addUp() 2

In this example, out inner function is pulling data from outside its scope and accessing a variable from the outer function.

Here is another example.

let num = 5;

const addTo = function(){
  let inner = 2;
  return num + inner;
}
console.log(addTo());

In this example, 1 function is accessing a global variable from within the functions scope.

I hope you enjoyed this blog, have a wonderful day

Setting up SASS

Nashmeyah — Mon, 08 Mar 2021 03:58:58 +0000

Hey Guys and Gals!

Currently I am working on a little somethin' somethin' and for the first time I had to start using Sass! So, of course I thought of writing a blog on setting up.

Set up a package.json file so that you can alter Sass settings.

npm init
Install Sass

npm install node-sass

Inside the package.json file, (on windows) press ctrl+f and search sass, there you will find it as part of the packages installed.

VS Code Extension or npm.

Here you will have to decide whether you want to install the extension on your VS Code then run sass server which you can find it by typing Live Sass Compiler in the extensions and install it. On the lower right hand side, you can click watch sass and that will start the server. Or, you can alter the package.json file and run the sass through the terminal.

locate this in the package.json file,

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

change "test" to "sass" and add the following,

"scripts": {
"sass": "node-sass -w scss/ -o css/ --recursive"
},

now you can run the sass script through your terminal by typing this command

npm run sass