Javascript

Web Components a Beginner Friendly Guide

The basic elements of using the Web Components API broken down into some of the most common things we do with them.

Javascript Count Up to Number

This article explores the classic UI component that is the simple count up timer written in Javascript. Often used to help display statistics in a dynamic way.

Create an Accessible Vanilla Javascript Accordion

The accordion is a user interface component that helps structure and display website information through an expansion/contraction mechanism. This article explores building a vanilla javascript accordion with accessibility in mind.

Call, Apply, And Bind Methods In Javascript

Call, apply, and bind methods can be confusing for newer Javascript developers. In this post, we break down Call, Apply, And Bind methods for newer Javascript developers.

Vanilla Javascript Carousel Slider: A Beginner's Tutorial

Make an accessible Javascript with a minimal amount of html, css, and Javascript. No need to install a slider package.

Javascript For Countdown Timer | [VIDEO]

A recurring problem that I need to solve for clients are counting down to an event, such as a sale or promotion. Countdown timers can help create a sense of urgency for potential leads so they are often used to instill a “fear of missing out” sense in leads.

If you wanted to, you could go a step further and pass in the DOM elements as part of the updateTime function to make it more reusable. In this particular example I did not do that. This particular version requires you to pass the future date into the function as a date time string formatted: “January 1, 2023 00:00:00”.

What Is Blockchain Technology And How Does It Work?

A high level overview of some of the foundations of blockchain. For beginners who just need to understand a little bit.

Hugo Website Tutorial: How To Create A Hugo Website

Hugo Website Tutorial: How To Create Your First Hugo Website

Hugo is a powerful static website generator written in the GO language. It can help you create clean, modern websites that load quickly with little overhead.

[VIDEO] Hugo Tutorials

What is the Hugo static site framework?

Hugo is one of my favorite website build tools. It is very fast. They advertise themselves as being “blazingly fast.” Hugo is a static website generator built with the GO language. It uses GO templating and than renders a 100% static website at build time. The reason you want this: speed. Static websites have less technology debt than other modern workflows that require a server backend to process and build pages on the fly.

CSS Grid Gallery: Easy Fluid Gallery With CSS Grid and Javascript

Learn how to create a fluid image gallery with css grid and a few lines of javascript. In the following article, we will learn how to create a grid gallery that is fluid and easy to navigate with CSS Grid and Javascript. First, we will create a container for our grid gallery. Then we will create a row of items. Finally, we need to set up a grid to contain the items in the row. We will then apply some styling for our gallery so that it looks nice on all browsers by using CSS Grid and Javascript’s responsive design techniques.

Custom React Hook Function: Create Custom Reusable React Hooks

If you have found yourself re-writing the same boilerplate React code over and over, You may be able to refactor that into a reusable custom React hook function that will save you time and help clean up your code a bit.

What Is A React Hook

React Hooks are a new feature in React 16.8, which allow us to use state and lifecycle hooks without constructor functions. They enable us to write less code, improve testability of components , and reduce potential side effects . A few weeks ago I was working on a project that had many nested components with lots of state . It became difficult to manage the state because every component depended on each other. The solution was to create higher-order components (HOC). But this caused the codebase to be bloated and become unmanagable quickly.