Skip to content

Instantly share code, notes, and snippets.

@dominictobias
dominictobias / setupProxy.js
Created April 1, 2019 15:49
setupProxy.js for http->https with cookies
const proxy = require('http-proxy-middleware');
// Execute `copy(document.cookie)` in the console on the proxy site
// and paste into this string.
const cookies = '';
module.exports = function(app) {
app.use(proxy('/api', {
changeOrigin: true,
cookiePathRewrite: true,
@dominictobias
dominictobias / storage-wrapper.js
Last active March 21, 2019 11:21
Simple local and session storage wrapper - falls back to memory in the case of Safari Private browser
function isAvailable() {
try {
this.storage.setItem('__testFeature', true);
this.storage.removeItem('__testFeature');
return true;
} catch (ex) {
return false;
}
}
@dominictobias
dominictobias / colorScale.md
Created February 27, 2019 20:32
Javascript percentage colour scale
// green to red
const getColor = v => `hsl(${((1 - v) * 120)},100%,50%)`;

// red to green
const getColor = v => `hsl(${((1 - Math.abs(v - 100)) * 120)},100%,50%)`;

Pass in (perccentage / 100).

@dominictobias
dominictobias / express-oauth-example.js
Created January 6, 2019 23:27
NodeJS OAuth from scratch (using GitHub as an example)
// Packages like PassportJS and useless diagrams online make OAuth seem complicated to implement, but in reality it's simple...
const got = require('got');
const jwt = require('jsonwebtoken');
const querystring = require('querystring');
const mins = min => 1000 * 60 * min;
// 1. Direct users browser to this url.
app.get('auth/github', (req, res) => {
const csrfState = Math.random().toString(36).substring(7);
@dominictobias
dominictobias / adaptiveComponent.js
Last active February 2, 2019 19:43
Loading different components at runtime depending on media queries in React
/* globals matchMedia */
import React, { PureComponent } from 'react';
function adaptiveComponent(mediaQueries) {
const firstMatchingQuery = Object.keys(mediaQueries).find(mediaQuery =>
matchMedia(mediaQuery).matches);
if (!firstMatchingQuery) {
throw new Error(`No media query matches found in ${mediaQueries}`);
}
@dominictobias
dominictobias / AuthBlockade.js
Last active February 2, 2021 12:22
Example of react-navigate and redux HOC for authenticated routes
/*
Example usage:
StackNavigator({
Login: { screen: Login },
Play: { screen: AuthBlockade(Play) },
}, {
initialRouteName: 'Play',
});
*/
@dominictobias
dominictobias / copyToClipboard.js
Last active July 25, 2017 15:49
Copy to clipboard
export const copyToClipboard = (function initClipboardText() {
const id = 'copy-to-clipboard-helper';
const element = document.getElementById(id);
const textarea = element || document.createElement('textarea');
if (!element) {
textarea.id = id;
// Place in top-left corner of screen regardless of scroll position.
textarea.style.position = 'fixed';
textarea.style.top = 0;
@dominictobias
dominictobias / bem-class.js
Last active March 21, 2019 11:23
BEM Class helper
/*
BEM Class helper:
const c = makeClass('myparentclass');
className={c`myclass myclass--active`}
becomes: className="myparentclass__myclass myparentclass__myclass--active"
*/
export const makeClass = (cls) =>
(subCls) => subCls[0].split(' ').reduce((acc, s) =>
`${acc}${cls}__${s} `, '').trimRight();
/*
Authenticate component using a wrapper
*/
import React, {Component} from 'react';
import { connect } from 'react-redux';
export default function(ComposedComponent) {
class Auth extends Component {
static contextTypes = {
@dominictobias
dominictobias / node-sass-functions.js
Last active May 31, 2019 23:38
node-sass external svg to inline
'use strict';
const path = require('path');
const fs = require('fs');
const types = require('node-sass').types;
function svgContentWrapper(svgContent) {
return `url('data:image/svg+xml;charset=UTF-8,${svgContent.replace(/\r?\n|\r/g, '')}')`;
}