Let’s talk about callbacks! What are they and how do we use them…

What are Callbacks?

A Callback is just a function that gets passed to another function as an argument. The function that takes the callback as an argument can call the callback function when it needs to! Now, this is confusing myself, because writing words to explain something is not my strongest skill! Just remember that a Callback Function is simply a function, it just gets passed to another function.

How do we use them?

Thats a good question! I have good questions. Okay, so let’s define a function that takes three arguments, the first two…


We are going to discuss CSS Selectors and how to select an element and style it!

What are CSS Selectors?

They are simply selectors that can grab one or more elements from the HTML file. Every good looking webpage is because of CSS so it’s vital to understand how to select HTML elements! Probably!

Type Selector

The type selector is the most basic selector for styling elements. In our CSS, we can grab all elements of a type or element name. So if we want to style all <h1> elements, our css rule would look like this:

Image for post
Image for post
CSS style for an H1 Element

Class Selector

The class selector…. you guessed it, selects all elements…


We are going to introduce the Canvas API for HTML5 and build a quick project that allows a square to bounce off the walls of the canvas. I am going to assume you already know a some HTML and JavaScript, it’s going to be a simple tutorial so don’t worry too much if your brand new!

Let’s get started!

First, let’s make sure we have a html file and we can add our Canvas element to it! We will also create a main.js file and link it to our HTML as well. Our HTML file should look something like this:

Image for post
Image for post
HTML file with canvas and js script


We will cover how to use classes in JavaScript.

What are classes?

Classes are just blueprints for objects. This may not make sense quite yet, but let me give you an example! You buy an Ikea desk and it comes with instructions on how to assemble the desk. The instructions are like the blueprint, the desk you eventually put together, is an object, or in this case called an instance of the blueprint.

Creating your first Class

Classes are used to make a blueprint for instances also known as objects. We can have a class Person and create new instances (people) from that class. Let’s get setup…


Have you ever tried to compare to arrays in JavaScript only to see it return false? Even though they look the “same”!

Image for post
Image for post
Comparing Arrays and Objects

Um…What?

Theres actually a pretty “simple” explanation of why these comparisons are false! It turns out the variables, like array1, holds a reference/pointer (memory address) for that array. So what is really being stored in the array1 variable is the physical address, in memory, where that array lives. It’s the same with objects! When you declare a variable and give it the value of an array or an object, what you are actually doing is saying, “I would like…


JavaScript gives us some built in methods to use on our arrays. We will cover the most used ones and give an example forEach(hint hint)… The methods all take a callback function as an argument and the method will call that function for every element in the array. Normally we would have to create for loops to iterate over our arrays, but now we can call these methods which keeps the code nice and clean!

forEach

Let’s start with the forEach method shall we! The forEach method allows us to iterate over each item in the array. You can see that…


If you get into Web development, Software Development or anything to do with writing code, you well eventually come across something called Big O Notation. It won’t make much sense in the beginning of your journey but when you start learning algorithms, applying for jobs or preparing for interviews, you’re going to need some knowledge of Big O.

What is Big O Notation?

Simply put, Big O is used to help us estimate the Run-time Complexity of a function and how it scales when the input increases. Meaning that if we give a function an Array with 10 items vs giving that same function an…


In this article we are going to cover sending an Image using Fetch, storing that image in Rails Active Storage and retrieving that image when a user visits your site.

So you have your Rails API running and your React front end running. I will assume you can make new users through a signup form if not we will quickly run through that as well!

After running create-react-app and starting the server you should see the nice React starter page! Lets make a User Signup Component!

Image for post
Image for post
A simple Signup Component For React

Hopefully you are familiar with the above image and whats going on so far…


When you run “rails new new_project”, rails installs a lot of stuff. You don’t need to worry about most of these folders yet but in your config folder you have a routes.rb file! This file is used to set up your routes and direct them to different controllers that will perform actions and either render a view or redirect to a new route.

A route is a url path. When you go to www.newproject.com, you’re going to the root path of that website or ‘/’. When you go to www.newproject.com/about, you're hitting the /about route. …


If you are learning JavaScript, then it won’t be long before you are introduced to the Fetch API. In this article we will discuss what Fetch is, how to use it and how to update the DOM when we get a response! The word API can be used for many things but in the context of using Fetch, we are talking about some data that we can use in our website or the Fetch API itself.

What is Fetch?

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses…

Marshall Slemp

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