Skip to content

Instantly share code, notes, and snippets.

View maxmckenzie's full-sized avatar

Max McKenzie maxmckenzie

View GitHub Profile
@maxmckenzie
maxmckenzie / date.jsx
Last active September 20, 2021 09:37
Construct and convert date object from datetime-local input
const [myDate, setMyDate] = useState()
const pad2 = (num: number): string => num < 10 ? '0' + num : num.toString();
const utcAsLocalString = (date: Date | undefined): string | undefined => {
if (date == null) return undefined;
return (date.getFullYear() + '-' + pad2(date.getMonth()) + '-' + date.getDate() + 'T' + pad2(date.getHours()) + ':' + pad2(date.getMinutes()) + ':' + pad2(date.getSeconds()))
}
<input
@maxmckenzie
maxmckenzie / Preferences.sublime-settings
Last active September 14, 2021 12:45
Sublime Text user settings
{
"ignored_packages":
[
"Vintage",
],
"theme": "ayu-mirage.sublime-theme",
"margin": 2,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"color_scheme": "Packages/ayu/ayu-mirage.sublime-color-scheme",
@maxmckenzie
maxmckenzie / Table.jsx
Created September 14, 2021 12:42
React; Basic table from array of Objects
const TableWrapper = ({
title,
isHidden,
data
}: { title, isHidden, data }) => {
if (!data || data.length <= 0) return
const headers = Object.keys(data[0]).filter(key => !isHidden.includes(key))
return (
<>
<h3>{title}</h3>
@maxmckenzie
maxmckenzie / Tabs.tsx
Created September 13, 2021 11:36
Simple React + Typescript Tabs component
import React, { useState } from 'react';
interface Props {
activeTab: String,
children: any
}
interface TabProps {
title: String;
label: String;
@maxmckenzie
maxmckenzie / pc.laptop
Last active September 5, 2021 17:02 — forked from jonschoning/pc.laptop
/usr/share/X11/xkb/symbols/pc (swap CTRL+ALT+CAPS; ALT->CTRL) https://github.com/jonschoning/xkb_symbols
default partial alphanumeric_keys modifier_keys
xkb_symbols "pc105" {
key <ESC> { [ Escape ] };
// The extra key on many European keyboards:
key <LSGT> { [ less, greater, bar, brokenbar ] };
// The following keys are common to all layouts.
key <BKSL> { [ backslash, bar ] };
# Theme
ZSH_THEME="robbyrussell"
# PATH exports
PATH=$PATH:/usr/local/bin/; export PATH
export PATH=/usr/local/share/npm/bin:$PATH
export ZSH="/Users/xamkcm/.oh-my-zsh"
# Alias's for git
alias gs='git status'
@maxmckenzie
maxmckenzie / Storybook react stories.js file
Created September 19, 2019 13:05
Storybook react stories
import { storiesOf } from '@storybook/react';
import React from 'react';
storiesOf('example', module)
.add(
'example',
() => (
<div>
<div></div>
</div>
@maxmckenzie
maxmckenzie / storybook webpack
Created August 17, 2019 08:15
storybook webpack
const path = require('path');
// your app's webpack.config.js
const custom = require('../build/webpack.base.js');
module.exports = async ({ config, mode }) => {
return { ...config,
module: {
...config.module,
rules: custom.module.rules,
},
@maxmckenzie
maxmckenzie / Sass type scale mixin
Created August 2, 2019 11:19
Sass type scale & vertical rhythm mixin use `@include typeScale(1, 1)` or `@include typeScale(-1, 1)` for font sizes below 1rem. Just change the values of line height and scaling factor. Make sure that the line height is always larger than the font size and you will keep the vertical rhythm consistent across the document ``` $base-font-size: 1re…
:root {
font-size: 16px;
}
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
@maxmckenzie
maxmckenzie / React table
Last active July 30, 2019 15:05
No thrills React table component
import React from 'react';
import classes from './Table.module.css';
const Row = props => {
return props.keys.map((key) => {
return <td key={props.data[key]}>{props.data[key]}</td>
})
}
const Table = ({