Skip to content

Instantly share code, notes, and snippets.

View sunnymui's full-sized avatar

Sunny Mui sunnymui

View GitHub Profile
@sunnymui
sunnymui / alphabeticCounter.js
Created March 17, 2022 06:33
Alphabetic Counter Generator
function* generateAlphabet() {
// generate an increasing counter using letters ie a, b, c, ... z, za, zb, zc, etc
// start at 'A'
let charCode = 65;
let pointer = 0;
let lettersToYield = [];
while (true) {
const letter = String.fromCharCode(charCode);
// assign this letter to the pointer array index
@sunnymui
sunnymui / mockUpload.js
Created March 4, 2022 06:20
Mock a File Upload Server Response
const mockUpload = (files = []) =>
// return a promise so we can use async features like then/async/await
new Promise((resolve, reject) => {
// throw error if no files
if (!files || !files.length) {
return setTimeout(
() => reject(new Error('Not found')),
1250
);
}
@sunnymui
sunnymui / getDayOfWeek.js
Created March 3, 2022 18:13
Get the Day of the Week for a Time Zone
const getDayOfWeek = () => {
// uses the date object and the browser time to get the day of week name
// ie "Monday", etc, uses timezone iana formats from http://www.iana.org/time-zones
const options = { weekday: 'long', timeZone: 'Pacific/Honolulu' };
return new Date().toLocaleDateString('en-us', options)
}
@sunnymui
sunnymui / excel-js-utilities.js
Created March 10, 2021 04:42
Excel JS Utility Functions
export const getColor = (color = "") => {
let colorCode = null;
switch (color) {
case "manila":
colorCode = "f7eed7";
break;
case "mustard":
colorCode = "dfdfc0";
break;
@sunnymui
sunnymui / resize_observer.js
Created May 16, 2020 09:09
Resize Observer as JS Media Query Alternative Example
// when you need to listen to the windowish's size to replicate media query behavior, but want
// to use the latest web api's for performance. maye you don't have access to csss for some reason?
// instantiate resize observer with callback to run through elements found
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
// if width larger than 667px (iphone 7 width) that means we're on desktop
if (entry.contentRect.width >= 667) {
console.log('desktop size')
}
@sunnymui
sunnymui / git-commands
Last active July 28, 2021 07:09
Git: Rebasing a Repo
//
// Basic Rebase
//
// gets the upstream changes from the remote origin
// if getting from an upstream origin i.e. you forked a repo and then you cloned your own
// fork to local then fetch from the upstream origin instead of origin
git fetch origin
// rebases those changes from the remote origin master branch onto the local develop master branch
git rebase origin/master
@sunnymui
sunnymui / child_enqueue_js.php
Created September 27, 2019 21:13
[Wordpress] Enqueue a child theme's custom.js file to replace the parent's custom js file for better theme modularity
function child_enqueue_scripts() {
// enqueue's js files in the child theme directory so it can replace parent js files
// dequeue the parent's custom js file
// put the name of the parent theme's script used to enqueue it that you want to dequeue
wp_dequeue_script('givingpress-lite-custom');
// enqueue the child theme directory's custom js file
// enqueue the custom.js file in the child theme directory
wp_enqueue_script( 'givingpress-lite-custom', get_stylesheet_directory_uri() . '/js/jquery.custom.js', array( 'jquery', 'superfish', 'fitvids', 'masonry' ), '20190822', true );
}
@sunnymui
sunnymui / CssGridNav.css
Created September 27, 2019 21:07
CSS Grid Nav Bar With Content Width Columns, Middle Column Contains Menu
.grid {
// adjust to hit around 60px for usable click target sizes
max-height: 4em;
display: grid;
// snap column width to element sizes
grid-template-columns: repeat(3, auto);
// vertical center items
align-items: center;
// distribute outer elements to edges and inner within
justify-content: space-between;
// Add Shortcode
function show_current_corresponding_shortcode_block() {
/*
Used for the woocommerce product page under the Flatsome theme. Adds a shortcode that when used, looks at the current product's categories, specifically looking at a designated parent category, then going through the subcategories to see which one is marked. It assumes that marked subcategory contains the id info you'll use in a shortcode to display a certain block of content that corresponds to it. It takes the first marked subcategory, inserts the desired id info (I'm using the slug here) into the shortcode template for a block, then returns a shortcode execution function to run that shortcode with the info it found. Note, this assumes you have a bunch of blocks already created with a standardized block naming pattern that'll fit the template and match category slugs to the block shortcodes.
Args: na
Return: function invocation that executes a shortcode for a specific block (obj)
*/
// grab the current product's id
$current_p
@sunnymui
sunnymui / MemeMaker.html
Created February 15, 2017 00:40 — forked from jwill/MemeMaker.html
Starter code for Meme Maker
<!DOCTYPE html>
<html>
<head>
<title>MemeMaker-Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>