Munawwar Firoz Munawwar

PEM is a CSS naming convention. Inspired by BEM CSS and Suit CSS naming convention.

P = Prefix
E = Element
M = Modifier

Acceptable CSS class name formats:

	import { useEffect, useState } from 'react';

	/**
	* @template T
	* @param {(previousState: T) => Promise<T>} getAsyncState async function to fetch state
	* @param {T} initialState
	* @param {any[]} [dependencies=[]] similar to useEffect dependencies. change in dependencies will
	* automatically call getAsyncState again
	* @returns {[T, (newState: T) => void, () => Promise<void>]} [state, setState, refetch]
	*/

	# A minimal Docker file for node.js and Puppeteer

	# debian 10 (buster slim) amd64 + node v14
	# https://hub.docker.com/layers/node/library/node/14.17.1-buster-slim/images/sha256-10c6bf7204614c18b0734a218f576082ea2d15e9af7b7817a07eddcd7d05a255?context=explore
	FROM node:14.17.1-buster-slim@sha256:10c6bf7204614c18b0734a218f576082ea2d15e9af7b7817a07eddcd7d05a255

	RUN apt-get update \
	# Install dependencies of Chromium that Puppeteer installs
	# Dependency list for puppeteer v10.0.0 taken from https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix
	# Puppeteer v10.0.0 installs Chromium 92.0.4512.0 / r884014

	const whitespace = '[\\x20\\t\\r\\n\\f]';
	const unescapeRegExp = new RegExp('\\\\([\\da-f]{1,6}' + whitespace + '?\|(' + whitespace + ')\|.)', 'ig');

	function unescOrig(str) {
	return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
	const high = '0x' + escaped - 0x10000;

	// NaN means non-codepoint
	// Workaround erroneous numeric interpretation of +"0x"
	// eslint-disable-next-line no-self-compare

	// MIT License 2021 - https://opensource.org/licenses/MIT
	const delay = require('delay');

	/**
	* @param {AWS.DynamoDB.DocumentClient} dynamodbDocumentClient
	* @param {string} tableName
	* @param {string} ownerId a lock's gotta have an owner!
	* @param {Object} [options]
	* @param {string} [options.hashKeyProperty='key'] default value is 'key'
	* @param {string} [options.hashKeyValue='lock'] default value is 'lock'

	# pip3 install opencv-contrib==4.5.1.48 opencv-contrib-python==4.5.1.48
	import numpy as np
	import cv2

	src = cv2.imread('sample.jpg', 1)
	blurred = cv2.GaussianBlur(src, (5, 5), 0)

	blurred_float = blurred.astype(np.float32) / 255.0
	# download model from https://github.com/opencv/opencv_extra/blob/5e3a56880fb115e757855f8e01e744c154791144/testdata/cv/ximgproc/model.yml.gz
	edgeDetector = cv2.ximgproc.createStructuredEdgeDetection("model.yml")

	import create, { State, StateSelector } from 'zustand';

	// initialization
	const initialStates = { count: 0 }; // no need to add your actions here like how zustand README shows.
	const useStore = create(() => initialStates);
	const { getState, setState } = useStore;

	// usage within function component (reactive)
	const Component = () => {
	const count = useStore(state => state.count);

	<!-- the blur filter makes it look more like a placeholder than a final image -->
	<img src="./output.svg" style="width: 1200px; filter: blur(5px)" />

	<html lang="en">
	<head>
	<script src="https://unpkg.com/[email protected]/min.js"></script>
	<script>
	const { useState, useEffect } = neverland;
	const globalStateManager = (() => {
	// "The" global store
	let store = {};

	// internal publisher-subscriber system to

	<html lang="en">
	<head>
	<script src="https://unpkg.com/[email protected]/min.js"></script>
	</head>
	<body>
	<div id="app1"></div>
	<div id="app2"></div>

	<script type="module">
	const { neverland: $, render, html, useState } = neverland;