Skip to content

Instantly share code, notes, and snippets.

Zaydek zaydek

Block or report user

Report or block zaydek

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@zaydek
zaydek / inter.js
Last active Nov 7, 2019
Inter dynametrics (use em)
View inter.js
function InterDynamicTracking(fontSize) {
var a = -0.0223, b = 0.185, c = -0.1745;
// tracking = a + b * e ^ (c * fontSize)
return a + b * Math.pow(Math.E, c * fontSize)
}
// See rsms.me/inter/dynmetrics for reference.
const A = -0.0223 // Don’t change.
const B = 0.185 // Don’t change.
const C = -0.1745 // Don’t change.
@mikowl
mikowl / oneliners.js
Last active Mar 17, 2020
👑 Awesome one-liners you might find useful while coding.
View oneliners.js
// By @coderitual
// https://twitter.com/coderitual/status/1112297299307384833
// Remove any duplicates from an array of primitives.
const unique = [...new Set(arr)]
// Sleep in async functions. Use: await sleep(2000).
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
// or
const sleep = util.promisify(setTimeout);
@astoilkov
astoilkov / readme.md
Last active Mar 28, 2020
Async Operations with useReducer Hook
View readme.md

Async Operations with useReducer Hook

9 March, 2019

We were discussing with @erusev what we can do with async operation when using useReducer() in our application. Our app is simple and we don't want to use a state management library. All our requirements are satisfied with using one root useReducer(). The problem we are facing and don't know how to solve is async operations.

In a discussion with Dan Abramov he recommends Solution 3 but points out that things are fresh with hooks and there could be better ways of handling the problem.

Problem

View main.go
package main
import (
"encoding/json"
"fmt"
"log"
"github.com/graphql-go/graphql"
)
View tilt.js
;(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)`)
@GGAlanSmithee
GGAlanSmithee / dealyed-redirect.ts
Last active Aug 5, 2019
react-router DelayedRedirect
View dealyed-redirect.ts
import * as React from 'react'
import { Redirect, RedirectProps } from 'react-router'
interface DelayedProps {
delay: number
}
interface DelayedState {
timeToRedirect: boolean
}
View combinator.css.md

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); }
View deliverables-1.md

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 -->
<div class="columns">
@zaydek
zaydek / generate.js
Created Jul 20, 2018
Simple tooling to automate authoring functional CSS frameworks using JavaScript Objects
View generate.js
// $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}); }`
@gaearon
gaearon / modern_js.md
Last active Mar 31, 2020
Modern JavaScript in React Documentation
View modern_js.md

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
You can’t perform that action at this time.