Image for post
Image for post
Photo by Vivienne Nieuwenhuizen on Unsplash

I did a deep dive into Ruby this week, with a huge chunk of my work being on Ruby Koans’ test-driven road to Ruby enlightenment. These are basically notes and things I learned along the way…

Everything in Ruby is an object, and has a unique object_id. There are some exceptions, including symbols, like :potato for example. Two instances of that would have the same object_id.

Even objects that seem identical have different object_ids. Take these strings, for example:

//> one = "a string"
//> two = "a string"
//> one == two
=> true
//> one.object_id == two.object_id …


Image for post
Image for post
Photo by Hello I'm Nik 🎞 on Unsplash

While learning React, I used arrow functions quite a bit, but I never deeply understood how they work or when to use them. It’s time to dive deeper.

Differences between an arrow function expression and a traditional function expression:

  • Can’t use this or super, and should not be used as methods
  • Doesn’t have arguments
  • Not ideal for methods that require scope, such as call, apply, and bind
  • Can’t be used as a constructor
  • Can’t use yield

Comparing the same function written traditionally and then as an arrow function:

Single Argument:

  • Traditional:
function (sum) {
return sum + 666
}
  • Arrow:
sum => sum +…


Image for post
Image for post
Photo by Amarnath Tade on Unsplash

Three.js is a Javascript framework for displaying 3D content on the web. You can create some really cool 3D projects and animations simply using Javascript. No high-end PC and software required! I discovered this library and have been playing around with it quite a bit, in addition to drei and react-three-fiber. Having an extensive 3D and motion graphics background, I was naturally very interested in learning how I could incorporate this into my software engineering projects and skillset.

In this post, we’ll walk through installing, importing, and setting up a simple scene using Three.js. I’ll be pulling heavily (and linking to) Three.js’ …


Image for post
Image for post
Photo by Ivan Torres on Unsplash

Let’s explore a basic counter app. We’ll have a button to increment a counter, a button to decrement it, a form input to enter any integer, and a button to add that value to the counter. We’ll focus and highlight the structure of the app as we work through this project, to get a handle on an efficient way to connect all of the pieces.

Let’s start by using create-react-app and we will use the Redux template, which will set up our simple counter project for us.

npx create-react-app learning-react-the-basics --template redux

Take some time to look through the folder structure of the app. Some important files are app/store.js, features/counter/counterSlice.js, and features/counter/Counter.js. …


Image for post
Image for post
Photo by Florencia Viadana on Unsplash

Welcome to my first in a series of posts I’ll be making on learning Redux.

To start, what is Redux?

Redux is a state management tool that allows us to access and modify state across our app without having to pass it along to components as props. As our apps grow, our component trees can become very deep, and passing a piece of state down as props through several components can become very hard to maintain and debug. Redux creates a global state (called the ‘store’) that can easily be accessed throughout the project. This grants us the ability to use a single source of truth.


Image for post
Image for post
Photo by Julianna Corbett on Unsplash

React’s useEffect hook will perform an action on every render or re-render. This is great for changing elements on the DOM or fetching data from an API. For this walkthrough, we’ll use useEffect to simply change our document.title

Let’s build an app to track the submissions we got tonight in class! We’ll use useState to track the number of each submission we got, and we’ll use useEffect to update both the total number of submissions and the document title each time we increment a submission, which triggers a re-render and thus our useEffect.

First, we’ll set up the project:

#=> npx create-react-app learning-hooks-useeffect
#=> cd learning-hooks-useeffect
#=> code . …


Image for post
Image for post
Photo by Wojciech Portnicki on Unsplash

Higher-Order Components are a technique used in React that allows us to reuse component logic. An example of this would be a component that renders conditionally based on whether the user is logged in.

More specifically, a Higher-Order Component is a function that takes a component as an argument and returns a component.

For this walkthrough, let’s build a simple React app that will use a Higher-Order Component to protect a page, requiring someone to be logged in to view it. We will control the logged in/out status with a button, so we can focus on the HOC. Then, we’ll create another HOC to protect a page based on whether our API or database content is loaded, and we’ll nest the HOCs! …


Image for post
Image for post
Photo by Tatiana Rodriguez on Unsplash

Are you tired of having to use class components and pass props along for all your state management in React? Looking to optimize your workflows by using more functional components and less class components? Hooks are a tool that could be very helpful for you!

In the past, we relied on class components to do things like manage state and use lifecycle methods. Now, using hooks, we can do this from inside of functional components, simplifying and speeding up our apps. The two major applications of hooks come through useState and useEffect.

Let’s walk through setting up a simple application of hooks. We’ll compare it to the equivalent in class components. For this post, we’ll stick with the first major application of hooks for state management, useState.


This past week, I learned how to use fetch to manipulate the DOM with JavaScript. As I progressed, I got really stuck trying to post new data or update existing data both on the page and in the database, without requiring a page refresh.

Image for post
Image for post
Photo by Alex Guillaume on Unsplash

Before I talk through my solution, I’d like to touch on the basics of using fetch, as I experienced through learning.

The first step was to learn a simple GET request to receive information from a database or endpoint in JSON format. I used the fetch comment, and the desired endpoint URL as an argument. This returns a Promise “object”, which we need to convert to JSON and then process as needed. In this example, we will console.log …


Image for post
Image for post
Photo by Jen Theodore on Unsplash

Choosing a color theme is a critically important step in design. When you are creating anything that is consumer-facing, you want to use colors that work well together and create engagement. To aid in this, Adobe has a great online tool that can be leveraged to create some really beautiful palettes: Adobe Color.

About

Justin Langlinais

Software Engineer and Brazilian Jiu-Jitsu brown belt

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