I thought I’d put together common JavaScript array methods with a small description and examples as a quick guide and easy reference. — I put together common JavaScript array methods with a small description and examples as a quick guide and easy reference. Before we get to the array methods, let’s declare an array. const items = [ { id: 1, name: 'Cereal'…

Before React 16.8, function components did not have state or lifecycle hooks. With 16.8+, function components can now use hooks to use… — Before React 16.8, function components did not have state or lifecycle hooks. With 16.8+, function components can now use hooks to use state and you can implement side-effects on first render and after every update. To take a closer look at this, lets see how a function and class component…

Load More — Amazing! We’re now at the final step of building our Unsplash-like app. We’re able to fetch data and render an image gallery on page load, we can click a thumbnail to see a higher resolution version, and we can search for photos by key word. The final feature I’d like…

Search Feature — So glad you’ve made it this far. We now have fetched data and rendered the most recent thirty images from Unsplash’s home page editorial feed as an image gallery on page load and we can also view a larger version of each image via a modal on click. …

Launch Modal — Welcome back. Let us continue building our Unsplash-like React App. During our last round, we’ve successfully fetched our data from the Unsplash API, set our state with the returned results, and rendered a gallery of thirty images all on page load. We’ll continue with setting up an onClick function that…

Bare-Bones Implmentation — Unsplash is a great resource for high resolution photographs that can be used for free for commercial and noncommercial purposes. It gives exposure for professional photographers and hobbyists alike. From their license page, “You do not need to ask permission from or provide credit to the photographer or Unsplash, although…

A secret bag of tricks — The idea of a JavaScript Closure can be a bit difficult to wrap your head around. Often closures are used when you have a function that returns another function. …

Press Start to Play — In JavaScript, before any code is executed there is a hoisting phase that occurs which lifts all var variables and function declarations to the top of their functions. This can be quite confusing since JavaScript runs its code line by line. This leads to functions being able to call variables…

Asynchronous Tasks in a Synchronous Language — JavaScript is often described as a synchronous, single-threaded language. Essentially meaning that it can only perform one function at a time and if a function takes some time to finish, such as an HTTP request, it would literally block the user from interacting with the webpage. Click events would be…