Skip to content

Instantly share code, notes, and snippets.

Avatar

James Doyle james2doyle

View GitHub Profile
@james2doyle
james2doyle / redux-devtools-helper.ts
Created Jun 4, 2021
A simple interface to work with the redux devtools methods. Useful for observable objects of just tracing object state
View redux-devtools-helper.ts
const noop = () => ({});
const fakeRedux = {
init: noop,
subscribe: noop,
send: noop
};
const reduxPlaceholder = { connect: () => fakeRedux };
@james2doyle
james2doyle / detect-prefers-color-scheme.js
Created Apr 8, 2021
An example of how to detect dark theme preferences (prefers-color-scheme) using window.matchMedia
View detect-prefers-color-scheme.js
(function() {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const setting = localStorage.getItem('color-schema') || 'auto';
if (setting === 'dark' || (prefersDark && setting !== 'light')) {
document.documentElement.classList.toggle('dark', true);
}
})();
@james2doyle
james2doyle / fix-window-call-dynamic-component.vue
Created Apr 3, 2021
Fix issue with external library that calls window in Nuxt/Vue when being server rendered by dynamically swapping it in the client
View fix-window-call-dynamic-component.vue
<template>
<component :is="component" />
</template>
<script>
export default {
name: 'DynamicComponentForBrowser',
data() {
return {
component: 'div',
@james2doyle
james2doyle / Dockerfile
Created Mar 30, 2021
A dockerfile for python 3 projects that use pip and python
View Dockerfile
FROM python:3.8
# Setup environment
RUN cp /usr/local/bin/pip3.8 /usr/local/bin/pip3 # reenable pip3
RUN pip3 install --upgrade pip
WORKDIR /usr/src/app
# Install requirements
COPY requirements.txt ./
RUN pip3 install --no-cache-dir -r requirements.txt
@james2doyle
james2doyle / nuxt.sublime-project
Last active May 13, 2021
A starting configuration file for Sublime Text Nuxt Vue projects
View nuxt.sublime-project
{
"folders": [
{
"file_exclude_patterns": [
".eslintcache",
".gitkeep",
"*.min.*",
"*.ts.snap",
"*.pem",
"*lock*"
@james2doyle
james2doyle / debounce.ts
Created Mar 29, 2021
Debounce creates and returns a new version of the passed function that will run only after the timeout has elapsed
View debounce.ts
/**
* Debounce creates and returns a new version of the passed function
* that will run only after the timeout has elapsed
*/
function debounce(fn: Function, wait: number = 0) {
let timeout: ReturnType<typeof setTimeout> | null = null;
return (...args: any) => {
if (timeout) {
clearTimeout(timeout);
@james2doyle
james2doyle / throttle.ts
Created Mar 29, 2021
Throttle will make sure a function is only called once within the given amount of time
View throttle.ts
/**
* Throttle will make sure a function is only called once within the given amount of time
* must use function to keep `this` context
*/
function throttle(fn: Function, threshold: number = 250) {
// check function
if (typeof fn !== 'function') {
throw new TypeError('You must provide a function as the first argument for throttle.');
}
@james2doyle
james2doyle / all-html-elements.html
Created Mar 18, 2021
HTML - Common patterns. Every html element in one place. Just waiting to be styled.
View all-html-elements.html
<!--
HTML - Common patterns
@see https://ress-css.surge.sh/normalize.html
Add your own modules and components for easy theme styling,
copy the partials for building a prototype. Or just read
the comments to familiarize yourself with HTML.
-->
@james2doyle
james2doyle / lodash-reactive-store.js
Last active Mar 19, 2021
A reactive datastore using lodash as the backend
View lodash-reactive-store.js
import { reactive } from '@vue/reactivity';
import lodash from 'lodash';
const defaultState = {
count: 1
};
/**
* Create a database that is reactive
*/
@james2doyle
james2doyle / lodash.memo.ttl.ts
Last active Mar 5, 2021
Use lodash memoize with a TTL. Allows calls to be cached by time as well as argument values
View lodash.memo.ttl.ts
import { memoize, partialRight } from 'lodash';
/**
* Custom memoize that uses a 1 minute TTL
* @see https://lodash.com/docs/4.17.15#memoize
*/
const memo = partialRight(memoize, function memoResolver(...args) {
// or for one hour: (new Date()).getHours();
const time = (new Date()).getMinutes();