Skip to content

Instantly share code, notes, and snippets.

// Taken from Douglas Crockford's JavaScript: The Good Parts
function walkDOM(node, func) {
func(node);
node = node.firstChild;
while(node) {
walkDOM(node, func);
node = node.nextSibling;
}
}
@morrxy
morrxy / check-empty.md
Created August 16, 2017 11:35
[template check empty value] #golang
{
"workbench.statusBar.visible": false,
"explorer.openEditors.visible": 0,
"workbench.activityBar.visible": false,
"editor.minimap.enabled": false,
"workbench.colorTheme": "Coffee (rainglow)",
"editor.tabCompletion": true,
"editor.fontSize": 14,
"editor.fontFamily": "Monaco, Menlo, 'Courier New', monospace",
"workbench.editor.showTabs": false,
@zaydek-old
zaydek-old / flex-primer.html
Last active May 24, 2018 09:39
A *simple* primer for understanding Flexbox with semantic classes https://zaydek.com/flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
/* twitter colors */
--orange : #FF691F;
@gaearon
gaearon / modern_js.md
Last active July 20, 2025 07:39
Modern JavaScript in React Documentation

If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

  • We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
  • We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav
@zaydek-old
zaydek-old / generate.js
Created July 20, 2018 19:37
Simple tooling to automate authoring functional CSS frameworks using JavaScript Objects
// $gen_var generates a css variable
// e.g. --single-spacing: 1.2;
var $gen_var = (obj, ident) =>
`--${obj.ident_prefix + ident}: ${obj.data[ident]};`
// $gen_class generates a css class
// e.g. .single-spacing { line-height: var(--single-spacing); }
var $gen_class = (obj, ident) =>
`.${obj.ident_prefix + ident} { ${obj.prop}: var(--${ident}); }`

Obscuring CSS util classes with components

Vue is an interesting framework for building on the success of a functional CSS framework. Functional as meaning not concerned with how each components is built, but rather, composed.

A component in Bulma or Fortune is often described in two steps. First, sometimes the presence of a parent or a child element is required. Such as columns and column. There's nothing wrong with this and I'm aware Fortune make some similar decisions for as far orthogonal classes go. The first step in reducing the friction for first-time developers, even experienced developers in terms of speed, is de-cluttering the HTML from the CSS.

Where in Bulma and Fortune this would be required:

<!-- Bulma -->

Of all the interesting applications of CSS variables, I find the idea of what I'm calling a CSS combinator idiom both subtle and interesting. The idea is to think about CSS in terms of a hierarchical programming model instead of something flat, which I believe is the default interpretation of how to use CSS variables.

Here's the idea; in CSS we can build abstractions from fundamental building-blocks.

p       { color: red                 ; }
.red    { color: red                 ; }
.red    { color: var(--red          ); }
.danger { color: var(--danger       ); }
.danger { color: var(--danger, --red); }
@GGAlanSmithee
GGAlanSmithee / dealyed-redirect.ts
Last active July 13, 2020 03:17
react-router DelayedRedirect
import * as React from 'react'
import { Redirect, RedirectProps } from 'react-router'
interface DelayedProps {
delay: number
}
interface DelayedState {
timeToRedirect: boolean
}
;(function () {
var tilt_a = document.querySelector("[tilt][-a]")
var tilt_b = document.querySelector("[tilt][-b]")
var tilt_c = document.querySelector("[tilt][-c]")
addEventListener("mousemove", function (e) {
setTimeout(function () {
var x_pc = e.clientX/innerWidth - 0.5
var y_pc = e.clientY/innerHeight - 0.5
tilt_a.style.setProperty("transform", `perspective( 1rem) rotateY(${x_pc*15}deg) rotateX(${-y_pc*15}deg) translateX(${-x_pc*25}rem) translateY(${-y_pc*25}rem)`)
tilt_b.style.setProperty("transform", `perspective(50rem) rotateY(${x_pc*15}deg) rotateX(${-y_pc*15}deg)`)