Web Development

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.

Golang Image Resize and Golang Image Crop: Image Manipulation With Go Programming Language

An introduction to some of the very basic features of iamge cropping with Go.

Frontmatter Data And Hugo Templates: How To Output Data With Hugo Static Site Generator

Hugo makes quick work of small client jobs. It can even handle structured data like coffee shop menus or restaurant pricing.

Creating A Hugo Homepage

hugo new site my-coffee-shop && cd my-coffee-shop

The first thing we are going to do is create a new Hugo website. In the config.toml file, we added a site title.

Golang Read Environment Variables From File: How To Do It [Code Snippets]

A brief overview of parsing your own environment file using Go

How To Create A Template Cache For Your Golang Web Application

This is an example of how to create a template cache for a go web application that uses an in-memory map.

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().

Web Development

VIDEO: Creating A Coffee Shop Menu Using Frontmatter YAML and Hugo

Creating A Hugo Homepage

What Is A React Hook