Skip to content

Instantly share code, notes, and snippets.

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

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 Mar 18, 2021
Simple browser Storage abstraction to protect you from unavailable LocalStorage
View storage.ts
// 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 Nov 29, 2020
React hook: useAuth
View useAuth.js
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 Nov 29, 2020
React hook: useStorage
View useStorage.js
// 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 Nov 29, 2020
React hook: useDebounce
View useDebounce.js
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 Nov 29, 2020
React hook: useAsyncAction
View useAsyncAction.js
// 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 Nov 29, 2020
React hook: useAsync
View useAsync.js
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
Vanilla JS throttle, vanilla JS debounce
View debounce.js
// 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
idb-keyval temporary improvements
View idb-keyval.ts
// 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'
View gist:752e3d8bf7f42adde5c3ef960d129a0a

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