Skip to content

Instantly share code, notes, and snippets.

View Munawwar's full-sized avatar
🍪
Cookies

Munawwar Munawwar

🍪
Cookies
61 followers · 9 following
View GitHub Profile
@Munawwar
Munawwar / regex-test.js
Last active April 13, 2021 06:25
Testing the speed of regex replace approach
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
@Munawwar
Munawwar / PEM.md
Last active January 17, 2023 06:34
PEM

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:

@Munawwar
Munawwar / dynamo-lock.js
Last active November 22, 2023 19:11
Distributed Lock with Dynamodb & node.js
// 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'
@Munawwar
Munawwar / codepasta-structured-forest-background-removal-2021.py
Last active February 5, 2021 11:00
# 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")
@Munawwar
Munawwar / zustand-usage.js
Last active October 25, 2020 06:22
Zustand state manager usage
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);
@Munawwar
Munawwar / placeholder.html
Last active June 12, 2021 18:23
Create an artistic svg placeholder for an image (node.js)
<!-- the blur filter makes it look more like a placeholder than a final image -->
<img src="./output.svg" style="width: 1200px; filter: blur(5px)" />
@Munawwar
Munawwar / global-state-manager.html
Created July 26, 2020 19:56
global state manager for neverland/uland
<html lang="en">
<head>
<script src="https://unpkg.com/neverland@4.0.0/min.js"></script>
<script>
const { useState, useEffect } = neverland;
const globalStateManager = (() => {
// "The" global store
let store = {};
// internal publisher-subscriber system to
@Munawwar
Munawwar / neverland-test.html
Last active July 26, 2020 13:10
Testing function-based framework neverland
<html lang="en">
<head>
<script src="https://unpkg.com/neverland@4.0.0/min.js"></script>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<script type="module">
const { neverland: $, render, html, useState } = neverland;
@Munawwar
Munawwar / README.md
Last active July 25, 2020 13:43
Functions only UI POC

A framework that lets you write your entire UI

  • as functions
  • with React hooks
  • without React
  • without classes
  • without vDOM/DOM diffing
  • without web components
  • without build step
@Munawwar
Munawwar / ridiculous-chaining.js
Last active July 3, 2020 17:28
Lodash-like chaining using reduce for Absurdum. Why? Cuz we can..
// Law of Absurd Reduces: Everything that can be implemented with reduce() will eventually be implemented with reduce()
/**
* @param {Object} chainableFunctions object where each key is the name of a function and it's value is the function itself
*/
const createChainables = (chainableFunctions) => ({
chain(initialValue) {
const operations = [];
const evaluate = () => operations.reduce(
(value, [func, ...args]) => func(value, ...args),