You’ve probably heard this acronym and most likely know it stands for Application Programming Interface, but if you were really to explain what an API actually is — what would you say?

A good analogy to help visualize the functionality of an API is a restaurant. …

With the introduction of Redux JavaScript library, Reason syntax and toolchain, and the Cycle library functional programming has become increasingly relevant within JavaScript.

Functional programming simply describes programs that are constructed by applying and composing functions.

An important concept with its roots in functional programming is partial application, where values are fixed to some of the function’s arguments without the function being fully evaluated.

Partial application is something that is done to a function; a function is partially applied from the outside when it is being called — this functionality is not built into the function itself. …

Custom properties, also referred to as variables, are used in CSS to decrease repetitive code and increase clarity. These variables contain specific values able to be reused throughout a document. More complex website will most often have a large amount of CSS, and as such likely have a lot of repeated values. Within this complex website, the same color value may be used in numerous places- and if this color needs to be changed a global search and replace would be required. Using a custom property allows for a value to be stored in one place and referenced in many…

A concept that is important to grasp in learning Breadth First Search (BFS) is graph traversal. First, if unfamiliar, a graph is a non-linear data structure consisting of a finite set of vertices (aka nodes) and edges (visually represented as lines) that connect the vertices of the graph.

Graph traversal is the process of visiting every vertex and edge once in a defined order. Both the once-only visiting of the vertices and edges as well as the order in which they are visited is important and depends upon the algorithm implemented to solve your question/problem. …

Algorithms are a set of rules or process used to solve a problem. The ‘problem’ can be needing to encrypt text, needing to search through a collection of data for values matching a certain input, sorting through a collection of data and ordering by a certain parameter, and so on.

One of the faster options for a searching algorithm is the Binary Search. As opposed to a linear search (which compares the value you are searching for to each item in the collection, thus having a run-time complexity of O(n)), Binary Search has a run-time complexity of O(log n) and…

Bubble sort is a simple, comparison-based sorting algorithm. Each pair of adjacent elements is compared — if the elements in the pair are not in ascending order then they are swapped (and the largest value ‘bubbles’ to the end/top). As the worst-case and more common time-complexity for this algorithm is O(n²), it is not suitable for large sets of data. If Big O Notation is unfamiliar to you, check out my introductory post on the topic linked below:

The best way to describe the way in which Bubble Sort works is by example.

Bubble Sort Semantic Example

Warp 1 or O(1)..?

Big O notation is used to categorize the run-time or space efficiency of algorithms as the input increases in size. It is a way to describe the performance and/or complexity of an algorithmic function. The Big-O categorization for an algorithm is based upon the worst-case scenario. It is the ‘language’ (or perhaps terminology) that developers use in comparing the efficiency of different approaches to a problem. Personally, math has never been my strongest suit, as such I will be using some coded examples to illustrate common Big O categories.

Background on Time & Space Complexity

Because the processing speed of individual computers can differ so much…

Prior to React v16.8.0 the two popular ways to transfer stateful logic between components were render props and higher-order components. Then came Hooks, designed to allow for the use of state and lifecycle method-like functionality within function components. For more on this topic, check out my post below:

This post will focus on how to create your own custom Hooks, the value of which lies in the ease of sharing and reusing small pieces of code without having to add more class components to the tree.

Hooks Background

Hooks are a way to share stateful and side-effectful functionality between components. They should…

Get Hooked on Hooks

React Hooks were released in February 2019 with React v16.8.0. The idea behind Hooks was to allow developers to write cleaner, less clunky code. React Hooks allow developers to use state, and other React features without having to define a class; to write code that functions like a Pure Component with state and component lifecycle methods.

Hooks are functions aptly named for their ability to ‘hook into’ React lifecycle and state within functional components (prior to Hooks this functionality was only available to class components). Hooks do not work in class components, instead allowing you to use React without classes.

Let’s Memoize!

Within React’s lifecycle of a component, the component is re-rendered when an update is made. This occurs if differences (aka difs) between React’s virtual DOM and the in-browser DOM are detected, in which case the components that contain difs (and any child components of those components) are re-rendered in-browser. If this concept is unfamiliar or you would like a refresher on the functionality of React’s virtual DOM, check out my post on the subject linked below (plug).

While this functionality is part of what makes React so great, it can easily reduce the performance of your application if you have…

Denali Balser

Full-stack software engineer experienced in Ruby on Rails, React, Redux, and JavaScript based programming.

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