Skip to content

Instantly share code, notes, and snippets.

@everdimension
everdimension / form-input-parsing.js
Last active April 14, 2020 04:40
Custom input parsing on form submit.
import React from 'react';
const inputParsers = {
date(input) {
const [month, day, year] = input.split('/');
return `${year}-${month}-${day}`;
},
uppercase(input) {
return input.toUpperCase();
},
@everdimension
everdimension / react_component.sh
Created February 9, 2017 09:40
A shell command for creating a folder with with files for a self-contained component.
#!/bin/bash
# Creates the following structure
# | - ComponentName
# | - ComponentName.js
# | - ComponentName.css
# | - index.js
createComponent() {
mkdir $1
@everdimension
everdimension / collect_form_data.js
Created March 17, 2017 11:22
A way to collect form data without `FormData` api.
handleSubmit(event) {
const form = event.target;
const data = {}
for (let element of form.elements) {
if (element.tagName === 'BUTTON') { continue; }
data[element.name] = element.value;
}
}
@everdimension
everdimension / native-font-stack.css
Last active February 16, 2019 18:12
Css rule for setting the "Native Font stack" or "system font".
body {
font-family:
/* Safari for OS X and iOS (San Francisco) */
-apple-system,
/* Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android */
system-ui,
/* Chrome < 56 for OS X (San Francisco) */
BlinkMacSystemFont,
/* Windows */
"Segoe UI",

Keybase proof

I hereby claim:

  • I am everdimension on github.
  • I am everdimension (https://keybase.io/everdimension) on keybase.
  • I have a public key ASDZ-VkHtJ_900M-VqWOsuxU_ZJPPpICcOXL6n6qnecOhQo

To claim this, I am signing this object:

@everdimension
everdimension / isNumericValue.js
Created September 8, 2017 17:44
Robust way to check if a value (number or string, usually from user input) can be considered a number.
function isNumericValue(n) {
return !isNaN(Number(n) - parseFloat(n));
}
const ActuallyUsedComponent = () => (
<div>
/* some layout and markup that doesn't depend on global state */
<Connect mapStateToProps={mapStateToProps} mapPropsToActions={actions}>
/* some markup where the props from connect are actually needed */
</Connect>
<Route
path="..."
component={() => (
<div>
@everdimension
everdimension / graphql-example.js
Created October 10, 2017 15:56
simplified graphql explanation
// Say we need to display list of posts showing *only* their titles
// and name of the post author
// without graphql
const data = {
posts: null,
usersById: {},
};
get('/api/posts')
@everdimension
everdimension / sumOfCombinations.js
Created January 18, 2018 22:50
A function that finds all combinations of numbers in an array the sum of which equals a certain number
function arraySum(arr) {
return arr.reduce((sum, next) => sum + next, 0);
}
function padLeft(string, size) {
let res = string;
while (res.length < size) {
res = `0${res}`;
}
return res;
import * as React from 'react';
interface Props {
value: string | number;
name?: string;
onChange(name: string, value: number): void;
}
interface State {
value: string;