Javascript

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

Vanilla Javascript Carousel Slider: A Beginner Slider

A photo or content slider is one of the oldest, but most popular design assets one can create with javascript. Many developers will reach for popular carousel frameworks such as swiper, slick, or photoswipe. Most of the time, you don’t need so much overhead. Let’s build a slider together and see how we can build a responsive slider without using a ton of a extra javascript.

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?

What Is Blockchain Technolology, Ethereum, Smart Contracts: Explained

Feeling confused about the blockchain, Ethereum, or smart contracts? This article aims to give a general introduction to the components and principles of the blockchain and help newcomers understand some of the terms and definitions behind this newer and exciting technology.

What is the Blockchain?

The blockchain is a decentralized network of computers. Furthermore, it is continously growing in size. This is because the blockchain is designed to store a decentralized public ledger of information. The blocks are then chained together with cryptography. Each block contains it’s own copy of the public ledger and a crytpographic hash of the previous record. The blockchain is excellent for recording monetary transactions.

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.

React State Array: Updating An Array That Is Stored Inside Of State

State is one of the most important concepts in React. It’s what allows us to build components that manage and maintain their own data, and it also enables us to create reusable components that can be shared across projects without duplicating code. But what exactly is State, and how do we use it? A component’s state is simply a JavaScript object with properties and values. The values of these properties can be changed over time (hence the name “state”) by invoking setState().