# Solving the Move Zeroes Algorithm

A big part of solving algorithms involves working with Big O Notation and understanding how best to formulate your solution, so that it meets requirements. For the problem below, I had to figure out how to solve the algorithm in O(1) additional space. So, I had to avoid creating new arrays to store data among other things.

Here’s the problem:

Given a list of integers nums, put all the zeroes to the back of the list by modifying the list in place. The relative ordering of other elements should stay the same. Can you do it in O(1) additional space?

# Solving the BossFight Algorithm

Continuing with the theme of solving algorithms that involve manipulating matrices, I decided to tackle the bossFight algorithm. Here’s the assignment I received:

You are given a list of integers fighters and a two dimensional list bosses. The fighters list contains 1s and 0s with a 1 representing a fighter. Similarly, each bosses list contains 1s and 0s with a 1 representing a boss. Given that fighters can beat a bosses row if it contains more fighters than bosses, return a new bosses matrix with defeated boss rows removed.

Example input:

`bossFight([0, 1, 1], [ [0, 0, 0], [0, 0…`

# Solving the Flip and Invert Matrix Algorithm

I’ve worked with matrix algorithms before, so I’m always curious about finding new ways to solve them. Here’s one I did recently:

You are given a two-dimensional integer matrix `matrix` containing `1`s and `0`s. For each row in `matrix`, reverse the row. Then, flip each value in the matrix such that any `1` becomes `0` and any `0` becomes `1`.

An example input:

`matrix = [    [1, 1, 0],    [0, 0, 1],    [0, 0, 0]]`

Expected output:

`[    [1, 0, 0],    [0, 1, 1],    [1, 1, 1]]`

## Step 1)

Before anything, it’s always good to add a condition that checks…

# Understanding the Basics of Routing in React (pt 2)

In my last post, I talked about setting up the React Router library to enable proper routing functionality in your React app. I covered BrowserRouter, Routes, history, component props, render props, and Switch. Now, for part 2, I’ll be discussing how to use Link.

React Router comes with the capability to include links within your app. It’s written as a `<Link />` component and works through the use of hyperlinks to help you navigate around your app. The best part about using it is that it will not reload the page. …

# Understanding the Basics of Routing in React (pt 1)

When you’re building a React application, you’ll reach a point where you’ll need to create the ability to navigate to other parts of your app. This can be done by 1) clicking on a button, link, image, or some other element on the DOM. OR 2) Changing the URL in the browser.

However, both options require the use of a common routing library, React Router. This library comes with its core library along with two tools: react-router-dom (for web apps) and react-router-native (for mobile apps). For the purposes of this blog, I will be discussing react-router-dom.

# Installation

To get started, you…

# How to Revert to a Previous Commit in Git

I recently started learning Angular and building my first practice app. The first thing I learned to build was a component. Everything was going fine until I hit a bug that I wasn’t sure how to fix. I started to do research to understand the error, but then I realized I had two choices: 1) I could take some time to debug, which I was perfectly fine doing. 2) I could use the opportunity to explore Git commands.

# Going Back in Time

I had already pushed my changes to Github, so I wanted to learn how to revert to a previous commit. So, the…

# How to Create a Component in Angular

If you already know how to use React, like me, then you’ll find it easy to understand how to create a component in Angular. For those not familiar with the concept of a “component,” you can think of it as a way to compartmentalize chunks of code for particular use. Each component has its own template (HTML code), styling, and logic. This allows you to reuse the same code for different purposes and makes it simple to update.

# The Root Component

If you take a look below, you’ll find the app component of my Angular project—`app.component.html`. …

# What Are ‘Directives’ in Angular?

When working in Angular, you have the ability to give the DOM instructions. More specifically, you’re able to control certain element(s). It’s a cool feature called a “directive,” and there are actually 3 kinds:

Components - directives with a template

Attribute Directives - change behavior or appearance of elements

Structural Directives - change the DOM layout (adding/removing elements)

# Components

This is the most common type of directive and is written as a TypeScript class with an `@Component` decorator. Components work as their own template of instructions. Within it, you can specify what should be used.

`import { Component } from '@angular/core';@Component({…`

# How to Use localStorage in JavaScript

HTML5 brought along cool features like the Web Storage API, which included `sessionStorage` and `localStorage`. It created a simple way to store data locally in the browser without affecting your application’s performance. Before Web Storage, developers used cookies, which had to be included in every HTTP request. That slowed things down. Web Storage made it easier to store key/value pairs as storage objects, and it came with more storage capacity (up to 5MB).

# localStorage vs. sessionStorage: What’s the Difference?

As mentioned, Web Storage comes with two mechanisms:`localStorage` and `sessionStorage`. I will be covering `localStorage`, but here’s a quick note on what sets them apart:

• localStorage: The…

# Creating a “Lion’s Breath” Animation with CSS

I had a lot of fun exploring CSS animations when creating breathing techniques for a React app. So, I decided to share more of them. In a previous post, I showed how to create the expanding and contracting circle you see above. That was the basic animation for the diaphragmatic breathing technique. The “Lion’s breath” animation, however, went beyond that to include the visualization of a person’s eye’s rolling back as they stick their tongue way out. This is actually a real thing, by the way. See the video below:

# How to Create the Tongue and Eyes

Building out the shapes for the tongue, eyeballs, and…

## Vanessa Martinez

Full Stack Software Engineer open to work. Experience in JavaScript, React.js, and Ruby on Rails.

Get the Medium app