Skip to content

Instantly share code, notes, and snippets.

@codinronan
codinronan / nginxproxy.md
Created May 17, 2021 07:57 — forked from soheilhy/nginxproxy.md
How to proxy web apps using nginx?

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers

@codinronan
codinronan / storage.ts
Created March 18, 2021 17:54
Simple browser Storage abstraction to protect you from unavailable LocalStorage
// From https://michalzalecki.com/why-using-localStorage-directly-is-a-bad-idea/
// I always end up re-implementing this again every time I need it, so better to just put it here.
function isSupported(getStorage) {
try {
const key = "__some_random_key_you_are_not_going_to_use__";
getStorage().setItem(key, key);
getStorage().removeItem(key);
return true;
} catch (e) {
@codinronan
codinronan / useAuth.js
Created November 29, 2020 03:26
React hook: useAuth
import React, { useCallback, useState, useEffect, useContext, createContext } from 'react'
const authContext = createContext()
// Hook for child components to get the auth object and re-render when it changes.
export default () => {
return useContext(authContext)
}
// Provider component that wraps components and makes useAuth() available
@codinronan
codinronan / useStorage.js
Created November 29, 2020 03:17
React hook: useStorage
// A react hook to generalize the use of any class that implements the Storage interface.
// LocalStorage and SessionStorage are provided here but it is easy to extend to something like
// AsyncStorage for react native.
const useStorage = (key, initialValue, storage) => {
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
const item = storage.getItem(key)
return item ? JSON.parse(item) : initialValue
@codinronan
codinronan / useDebounce.js
Created November 29, 2020 03:15
React hook: useDebounce
import { useState, useEffect } from 'react'
const useDebounce = (value, delay) => {
// State and setters for debounced value
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(
() => {
// Update debounced value after delay
const handler = setTimeout(() => {
@codinronan
codinronan / useAsyncAction.js
Created November 29, 2020 03:14
React hook: useAsyncAction
// The goal here is to demonstrate using a React context as a redux-like reducer-based store.
import { useContext } from 'react'
import { Store } from '../store'
const ACTION_ASYNC_REQUEST_SUFFIX = '@REQUEST'
const ACTION_ASYNC_SUCCESS_SUFFIX = '@SUCCESS'
const ACTION_ASYNC_FAILURE_SUFFIX = '@FAIL'
@codinronan
codinronan / useAsync.js
Created November 29, 2020 03:13
React hook: useAsync
import { useEffect, useState, useCallback, useRef } from 'react'
export default (asyncFunction, immediate = true) => {
const [loading, setLoading] = useState(false)
const [result, setResult] = useState(null)
const [error, setError] = useState(null)
// Track a reference to whether the useAsync is actually on a mounted component.
// useEffect below returns a cleanup that sets this to false. Before setting
// any state, we check if the cleanup has run. If it has, don't update the state.
@codinronan
codinronan / debounce.js
Created May 14, 2020 06:11
Vanilla JS throttle, vanilla JS debounce
// https://vanillajstoolkit.com/helpers/debounce/
var debounce = function (fn) {
// Setup a timer
var timeout;
// Return a function to run debounced
return function () {
// Setup the arguments
@codinronan
codinronan / idb-keyval.ts
Created May 5, 2020 20:48
idb-keyval temporary improvements
// This is a private copy of idb-keyval vNext, which has a simpler API with many bug fixes.
// https://raw.githubusercontent.com/jakearchibald/idb-keyval/next/src/index.ts
// https://github.com/jakearchibald/idb-keyval/issues/80 (description of API)
// The old implementation with bug fixes from several PRs in idb-keyval is at
// https://github.com/DestinyItemManager/DIM/blob/master/src/app/storage/idb-keyval.ts
// https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Version_changes_while_a_web_app_is_open_in_another_tab
const DB_NAME = 'rg-app-data'; // 'keyval-store'
const DB_STORE = 'rg-data'; // 'keyval'

Hi Zach :D

Modals are funny beasts, usually they are a design cop-out, but that's okay, designers have to make trade-offs too, give 'em a break.

First things first, I'm not sure there is such thing as a "simple" modal that is production ready. Certainly there have been times in my career I tossed out other people's "overly complex solutions" because I simply didn't understand the scope of the problem, and I have always loved it when people who have a branch of experience that I don't take the time