wklsh

Async / await API example for dummies

Extracted from MDN Web Doc - Making asynchronous programming easier with async and await

index.js

async function myFetch() {
  let response = await fetch('coffee.jpg');
  if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);

wklsh

React event listeners with stale closure workaround

Component.jsx

function Component(props) {
  const [isFocused, setIsFocused] = useState(false);
  const mainComponentRef = useRef();

  useEffect(() => {
 // detect if clicks are occurring outside of cart content area. If it is, hide module

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

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

.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

// ...

:root {
  --vh: 1vh;
}

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

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

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

/**
 * 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(