wklsh

function slugify(text)
{
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

wklsh

a:hover {
    font-weight:bold;
}

a::after {
    display: block;
    content: attr(data-text);
    font-weight: bold;
    height: 0;
    overflow: hidden;

wklsh

/**
 * Calculate disance between mouse and center of element
 * @param {obj} element   target element
 * @param {num} mouseX    mouse pos X value
 * @param {num} mouseY    mouse pos Y value
 */
export function calcDistance(element, mouseX, mouseY) {
	const elDimensions = element.getBoundingClientRect();

	return Math.floor(

wklsh

componentDidUpdate(prevProps, prevState) {
	// Get updated props
	for (const index in prevProps) {
		if (prevProps[index] !== this.props[index]) {
			console.log(index, prevProps[index], "-->", this.props[index]);
		}
	}
  
	// Get updated states
	for (const index in prevState) {

wklsh

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or

wklsh

function function_component() {
  const hasMounted = useHasMounted();
  
  // has to be declared in function's body prior to usage
  // has to be on top to nullify unmounted runs
  if (!hasMounted) {
    return null;
  }
  
  // ...code runs here

wklsh

// ...

:root {
  --vh: 1vh;
}

wklsh

.squareWrapper {
  width: 50%;
  display: inline-block;  // Ensure that element is `inline-block`

  &:before {  // Ensure that pseudo-before element does not have any WIDTH property
    content: "";
    display: block;
    padding-bottom: 100%;
    float: left;

wklsh

Wordpress & Docker

This file will setup Wordpress, MySQL & PHPMyAdmin with a single command. Add the code below to a file called "docker-compose.yaml" and run the command

$ docker-compose up -d

# To Tear Down
$ docker-compose down --volumes

wklsh

Redux-like React Context example

Example Setup of a redux-like react context. For reference visit this guide, or this guide.

Store

import React, { createContext, useReducer } from "react";

export const UIContext = createContext();