Skip to content

Instantly share code, notes, and snippets.

@danieluhl
danieluhl / settings.json
Created Aug 3, 2020
vscode settings.json snapshot
View settings.json
{
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.cursorStyle": "block",
"editor.snippetSuggestions": "top",
"editor.renderIndentGuides": true,
"editor.cursorBlinking": "smooth",
"editor.insertSpaces": true,
@danieluhl
danieluhl / hoc_vs_render_props.html
Created Oct 11, 2017
Simple HOC vs Render Props (function as children) Example
View hoc_vs_render_props.html
<!doctype html>
<html>
<head>
<title>unpkg-demos :: global-react</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16.0.0-beta.2/umd/react.production.min.js"
integrity="sha384-lJJbYsDe7wDuOttI/MIHfj68o3fVZOhJDxEn0cTPbDq5mkzjF1p+AFEp3r/HpUnt"
@danieluhl
danieluhl / from_scratch_sort.js
Created Sep 11, 2017
Implementing simple array sorting from scratch
View from_scratch_sort.js
const customers = [{
name: 'Billy',
age: 32,
averageOrderValue: '$34.38'
}, {
name: 'Mike',
age: 23,
averageOrderValue: '$300.38'
}, {
name: 'Zac',
View JS30-10.js
const inputs = Array.from(document.querySelectorAll('input'));
inputs.forEach(input => input.addEventListener('click', handleClick));
function clickBetween(first, last) {
const direction = first < last ? 1 : -1;
let index = first;
while (index !== last) {
index += direction;
inputs[index].checked = true;
View JS30-07.js
// ## Array Cardio Day 2
const people = [
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
{ name: 'Lux', year: 2015 }
];
const comments = [
View JS30-06.js
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const list = document.querySelector('.suggestions');
const input = document.querySelector('.search');
const populateList = data => {
const html = data.reduce((acc, item) => {
acc = `${acc}
<li>
<span class="name">${item.city}, ${item.state}</span>
View JS30-01-fun.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
View JS30-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
@danieluhl
danieluhl / es6-passing-params.js
Last active Jan 4, 2017
Ideal way to pass params to a function ES6
View es6-passing-params.js
// functions take parameters in any order and set defaults
const greetPerson = ({first = 'Saw', last = 'Gerrera'}) => `Hello ${first}! Sorry, I meant Dr. ${last}`;
// objects or properties can be built however
const person = {
first: 'Cassian',
last: 'Andor',
birthday: '04/04',
age: '23',
position: 'Pilot'
View JS30-01.js
const keyElements = document.querySelectorAll('.key');
const audioElements = document.querySelectorAll('audio');
const sounds = {};
const keys = {};
// got this from wes bos
function removeTransition (e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}
You can’t perform that action at this time.