In the process of learning how to use Lottie (an animation library by Airbnb), I thought it might be useful to revisit the classic way of animating web elements:

Keyframes work pretty much the same way in CSS as they do here in this video editor (Premiere Pro).


… and connect your dev environment to HTTPS locally.

Recently I had to set up a client’s development environment to be able to communicate with a 3rd party authentication service called Verified.Me.

This service has the user verify their identity by logging in with their banking credentials.

It then retrieves their personal information (name, address, etc), and returns that data to our app in the form of a cookie.

For the user experience, the user would click on a button in the app to create a new account.

This button triggers a redirect, sending the user to the 3rd-party authentication…


Optimize app performance by splitting components, routes, and libraries

Image credit: Author

When you deploy a React application using a tool like webpack, you’re employing a technique called bundling.

Build tools like webpack are, after all, module bundlers.

So when you arrive at a page served by a web application, the page requests a bundle — that is, a file or files that contain all of the code necessary for that page to function.

Often when we build a page, however, we include quite a bit of code that isn’t immediately necessary.

To keep our application lean and fast, we should strive to serve only what’s absolutely necessary for the UI on…


Learn how to create and animate 3D scenes in the browser.

Since beginning my journey into the Front End, I have always been interested in how to create 3-dimensional renderings in the browser.

Today we’re going to dive into an introduction on how to use WebGL with ThreeJS, and together build a fun 3D, not-to-scale rendering of our solar system!

I say not-to-scale because, well, space is vast.

It will take the SpaceX Starship 6 months to travel to Mars in 2024, a distance which takes light a full 3 minutes.

If we made our little browser-rendering to scale, our planets would be infinitesimally tiny in a black void… just like…


The Problem: Given an integer and an array of integers, write a function that will determine if there are two numbers in the array that equal the given integer.

You’ve just landed in Vegas for your first time and have discovered a dice game at the hotel casino that you’ve never heard of before.

Like Black Jack, it’s you against the dealer.

  1. The dealer rolls a pair of dice by placing them in an opaque cup and turns it over.
  2. The dealer’s dice remain hidden until the player chooses to stop rolling.
  3. The player can then roll their pair of…

When quarantine began in March, I decided that this extra time spent at home was a good opportunity to start writing articles and tutorials around things I know and have been learning.

I didn’t have a personal website, so I wanted to quickly put something together to host my articles and tutorials.

I also did not want to pay for it. 😉

I began researching an implementation. The site needed to be simple to deploy and update, have a back-end content management system, and have a flexible front-end that I could easily build and style.

After a little research I…


Problem: Given 3 arrays, write a function that will determine if the 3rd array is comprised of the first 2 arrays on a first-come, first-serve basis.

Oh no!

The pizza place you opened last summer has been running into some problems lately with their orders.

Some customers have been complaining that people who have placed orders after them are getting their food first! 😕

As orders are received for both eat-in and take-away, they should be combined into a single list to be handled first-come first-serve by the cooks.

It’s your job to find out if the orders coming out of the…


I remember the old days of Redux fondly.

Long ago, when hooks were not yet on anyones’ mind.

When Redux required us to wrap every React component in higher-order connect() components, with functions mapping dispatch and state to props.

A barbaric time where our actions lived one place, and our reducers another.

Where both thunks and Redux devtools required additional dependencies, and we had to write a whole bunch of code to do what boils down to very little: updating application state.

But then, whispers began of a creature rising in the distance: React Hooks.

And with it followed a…


The Problem: Given a string, write a function to return the string reversed.

Photo by Matthew Fassnacht

In-place algorithms, sometimes called destructive algorithms, work by modifying the input data structures themselves.

Said another way, when given a string, and in-place algorithm will permanently change that string.

In-Place Algorithms

We can draw an example of in-place behaviour by comparing the internal JavaScript functions slice() and splice().

On one hand, slice creates a shallow copy of a portion of an array without changing the original array.

Conversely, splice permanently changes the original array by removing and/or adding values to it, and therefore operates in-place.

Approach

Given a string…


The Problem: Write a function that checks whether any permutation of a string is a palindrome.

Permutation An ordering of a set of items; in this case the letters of the string.

Palindrome A word that is spelled the same way forwards as it is backwards.

Said another way, are there any combinations of the letters in a given string that could be a palindrome?

Let’s explore a couple of examples to help better define what this problem is asking:

  • racecar = true
  • rcaerca = true
  • racecap = false
  • rcaepca = false

We are looking for permutations of…

Marshal Murphy

Sometimes I write about code. (marshalmurphy.com)

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