Lately, I’ve been working on my understanding of algorithms. This post will try to explain and implementation of sorting with the easiest method — bubble sort.

Although the bubble sort algorithm compared to other sorting algorithms isn’t that efficient, and isn’t used anywhere in the real world, interviewers still commonly check for it during interviews. It is good to at least know how it works under the hood.

How does bubble sort (you can also find it under the alternate name sinking sort) work? The algorithm ‘bubbles’ large values (thus the name) to the top on each iteration of the…


The Event Loop is one of the most important topics in Javascript that we should know in detail. In this article, we are going to cover the basics of the Event Loop and how it works with single-threaded and asynchronous functions.

The first thing we should know that Javascript is a single-threaded language. That means it only executes one thing at a time. Almost all browsers have an Event Loop for every tab, which helps to run every process in isolation and avoid a web page with infinite loops or heavy processing.

Call Stack:

The call stack is a stack that holds…


In this post we’ll be exploring a few of the ways we can destructure data in React applications. By using the destructuring syntax, we can unpack values from arrays, or properties from objects, into distinct variables.

When working in React, it is common practice to unpack a couple of values from props or state into their own distinct variables:

const { name } = this.props

Mainly, this was so we can improve our app readability by not always having to write out something like this.props.name and instead simply writing name. …


Introduction

I‘m on a quest to become a JavaScript whiz! I’ve learned a bit about algorithms and frameworks, but I haven’t spent too much time on the under-the-hood aspect of JavaScript. Today, I’ll talk about hoisting and how it relates to our everyday JavaScript use. When you execute a piece of code, the JavaScript engine creates what is called the global execution context. The global execution context has two phases: creation and execution. During the creation phase, the JavaScript engine moves the variable and function declarations to the top of your code.

Variable hoisting

Variable hoisting means the JavaScript engine moves the variable…


Variables in CSS

Before we dive in, let's get a little more info on why variables in CSS are helpful. Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring a global search and replace if that color needs to change. CSS variables allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.

Utilization


After graduating from Flatiron’s Immersive Software Engineering program I felt a little lost. I had spent a grueling four months learning the ins and outs of web development, so when I graduated I felt like the whole world stopped. Luckily personal passion projects have kept my thirst for knowledge quenched. I’ve been looking at ways to spice up my projects even more by giving them that extra personal touch. That’s when I heard about console signatures. Today I’m going to show you how to create a console signature by including it in my most recent project, Archivo del Santo.

Getting Started

First…


In recent years HTML has made great strides towards becoming more semantic. Tags like <aside> and <article> enforce the meaning of the content rather than its layout. Unfortunately, the same isn’t true of CSS. Defining classes like .float-left, .row, and .col is better than re-defining float properties for every HTML tag, but they hardly add to the meaning of the HTML.

There are CSS frameworks around they try to address the problem. (Semantic UI is a popular example; you’ll find it at semantic-ui.com.) Sass provides another way, via the @mixin directive. Mixins are primarily used to provide non-semantic styling, but…


Introduction

Media queries are the backbone of the Responsive Web Design system.
By using media queries we can customize the behavior of DOM elements on the screen for particular devices or screen sizes without changing the actual markup. Media queries use certain breakpoints in the CSS file to change the styling of the HTML elements.

What exactly is a Media Query?

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width…

A brief guide to making a simple RESTful API in Node.js with MongoDB and Express.

Getting started

As I reach the end of my time as a student at Flatiron School, I can’t help but feel excited about all the doors my newfound coding skills can open. One of those doors is learning new languages and runtimes. Unfortunately, I’ve let my anticipation get the best of me by putting together this tutorial. Today, we will create a RESTful book list API (i.e. endpoints that will create a book, get/read a list of all books, get a particular book, delete a book, and…


In a React component, props are variables passed to it by its parent component. State on the other hand is still a collection of variables but directly initialized and managed by the component.

The state can be initialized by props.

For example, let's visualize a parent and child component relationship with Bears! Let’s call the child component with

Photo by Mark Basarab on Unsplash
<BabyBear />

The parent can pass a prop by using this syntax:

<BabyBear color=brown />

Inside the BabyBear constructor we could access the prop:

class BabyBear extends React.Component {
constructor(props) {
super(props)
console.log(props.color)
}
}

and any other method in this class…

Marcus Siegel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store