Live, Work, Create image
Live, Work, Create image
Photo by 🇨🇭 Claudio Schwarz | @purzlbaum on Unsplash

Hi everyone, this is part two in a series of blogs I am doing on Sass. If you haven’t read the first one and need help getting started with Sass please feel free to read my first blog, here. In this blog, I will be covering class naming conventions using the BEM, nesting in Sass, and Sass Variables.

What is the BEM?

The BEM is a methodology aimed at decreasing the footprint left by CSS. That is, CSS code can get really unorganized and hard to read. The BEM is a way that structures your naming conventions to increase readability and functionality. This is super important as it helps other programmers who are reading your code to understand just what is styling what. …

Using React Router to Implement Client-Side Routing

Image for post
Image for post
Photo by Joey Kyber on Unsplash

What is client-side routing

Client-side routing happens when the route is handled by the front end code (Javascript/JSX) that is loaded on the page. When a link is clicked, the route will be changed in the URL but the server request is prevented. The url will be changed by the state. This change in state will result in a different view of the webpage.

Let’s look at a real-world example, let’s say you have an application that allows you to view your blogs, your profile page, and your drafts. Each of those pages is a different view of the same SPA (single page application). With Client-Side routing, you’ll get the data you need to be able to render all of those pages on the first-page load. …

General Overview, Installation & Setup

Dog wearing sassy sunglasses
Dog wearing sassy sunglasses
Photo by alan King on Unsplash

I plan to do a series of blogs each week on setting up Sass in your next project. Sass is an awesome tool that compiles all of your CSS for you. It’s really quite magical and allows you to create variables and other goodies so you can keep your code DRY. Huge plus. It is also a great way to keep things organized so you can easily find code and make changes whenever necessary. Sass is “CSS with superpowers” after all.

What is Sass?

CSS gets very messy, very quickly. Having a single CSS file with thousands of lines of code without any reusable pieces, without any logic, gets completely unmanageable after some time. That’s why we use Sass. Sass provides us with a couple of handy features and tools that CSS just doesn’t have, like variables or mixins (more on these later). Sass doesn’t change the way CSS works however, it just allows us to be more DRY and consistent with our code. So, putting it in very simple terms, Sass is a CSS preprocessor that adds a lot of power and elegance to the basic language.

Using setState() and updating State in React

Photo Credit

Today I wanted to dive into React, a JavaScript Framework I have been learning. It’s got a lot of magic under the hood, which is awesome. We can pass information from Parent components to their children components through props (properties) using something called state and it’s pretty powerful stuff.

What is State?

React’s state is data that is changed inside your components. That is, you set a default value and you can change it depending on which component you send the information to or what you decide to do with it. …

Understanding Fetch() and AJAX in JavaScript

Image for post
Image for post
Photo Credit Josh Calabrese

In this blog we will explore using Fetch requests in JavaScript to get information from the server and display it on the DOM. We will explore using Fetch requests to the API of Fire and Ice to practice writing fetch requests and to help solidify the understanding of how powerful these requests can be.

What is Fetch?

Mean girls gif
Mean girls gif
Obligatory Mean Girls Gif

Fetch is a very important part of using JavaScript to communicate with various API’s (even your own backend). Fetch requests are a modern and easy way for us to use JavaScript to communicate with the server and get new information whenever we need it. That’s pretty awesome stuff. …

Understanding Global and Local Scope & the Scope Chain

Image for post
Image for post
Photo Credit Sandro Katalina

What is Scope in JavaScript?

In JavaScript, Scope refers to where something is available to us. It is defined by where variables are declared and where they are available for us to use. JavaScript is a bit wild sometimes but with a strong understanding of scope we can tame it and control the flow of our code so it is readable and strong.

Javascript has two scopes we can utilize: Global and Local. We will get into the nitty gritty of each later in this blog. …

Image for post
Image for post

Variables in JavaScript are a bit weird. They are awesome things that hold our data and they all kind of do it in a similar but important and different way. These data containers we are talking about are var, let, and const.

In JavaScript, setting variables happens in two phases:

  • Declaring — which is naming the variable let newVariable;
  • Initializing — which is setting/giving the variable a value let newVariable = 'I am an initialized variable now';

Declared variables (variables with values not yet initialized) are defaulted to undefined. …

Image for post
Image for post
photo credit Cookie the Pom

What are validations and how are they useful?

Validations are essential to a Rails application. They allow us to control the information that is being saved into our database. They are given to us through Active Record and allow us to be thoughtful about how we save data. There are many ways that you can control database information. You can use client-side validations and controller-level validations, but the Rails team favors model-level validations for a multitude of reasons. They are database agnostic, meaning that they can be used with various systems and are not customized for a single system. They cannot be bypassed by users. …

Photo Credit David Herron via Upsplash

For my Flatiron Rails Project, I wanted to make an entertainment database that allowed me to pull content from an API. I found plenty of information about making the call to the API and getting results in the terminal but not a lot about what other things needed to happen to really be able to manipulate and use the data. I have put together a list of 8 easy to follow steps to implement the OMDB Api.

Step One

Pick an API.

I picked OMDB — The Open Movie Database. My decision was largely based on the docs for this API. They were clear and easy to maneuver. You can even test your endpoints on site. …


Jordan T Romero

Flatiron Full-Stack Student.

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