Skip to content

Instantly share code, notes, and snippets.

View index.html
<!doctype html>
<title>ChargingGate </title>
<input type=checkbox id="hasGetBattery"><input type=checkbox id="batteryStatus">
<div id=ua></div>
<hr>
<h1>
#ChargingGate?
</h1>
<p>
Another day, another dystopian browser API...
View keybase.md

Keybase proof

I hereby claim:

  • I am pygy on github.
  • I am pygy (https://keybase.io/pygy) on keybase.
  • I have a public key ASAuqI8Te5JdZeup5yQBEEPyoy-24Wl6UwYGMBg8PQ9WvAo

To claim this, I am signing this object:

View vella.md

[vella][1]

Hopefully quick and light view library (benchmarks TBD :-).

S.js tutorial

vella is currently built on top of S.js by Adam Haile. It is more or less Surplus, but with Hyperscript (and composability cranked to eleven). We may end up forking or replacing S, but the core idea will probably persist. Understanding S is required to get what comes next.

Lexicon: in the S docs, streams are called "signals", and dependent streams are called "computations". I'll use the same terminology for now here to make it easier for you if you're also scouring the S docs. They are mostly push streams AFAIU, but the author descrbes them as hybrid push/pull somewhere in the issues, not sure what he meant.

@pygy
pygy / force-layout.js
Created Apr 7, 2018
For those times you want to add entrance animations in Mithril, and the adding a class/animation in `oncreate` doesn't cut it.
View force-layout.js
fuction forceLayout(dom) {
dom.getBoundingClientRect().height
}
let prm
let nodes = []
function debouncedLayout(dom) {
if (nodes.length === 0) {
prm = Promise.resolve(null).then(() => {
nodes.forEach(forceLayout)
@pygy
pygy / combinators.js
Created Feb 20, 2018 — forked from Avaq/combinators.js
Common combinators in JavaScript
View combinators.js
const I = x => x;
const K = x => y => x;
const A = f => x => f(x);
const T = x => f => f(x);
const W = f => x => f(x)(x);
const C = f => y => x => f(x)(y);
const B = f => g => x => f(g(x));
const S = f => g => x => f(x)(g(x));
const P = f => g => x => y => f(g(x))(g(y));
const Y = f => (g => g(g))(g => f(x => g(g)(x)));
@pygy
pygy / mithril-hyperscript.md
Created Jul 27, 2017 — forked from CarlMungazi/mithril-hyperscript.md
Understanding mithril's hyperscript function
View mithril-hyperscript.md

Earlier this year at work we re-wrote an internal framework we used to create SPA e-learning courses. After briefly trying out React, Angular 2, Ember and Vue, we settled on mithril (https://mithril.js.org). If I were to compare it to the frameworks we tried out, I would say it's more like React but with a simpler, smaller codebase. By the way, if you like geeking out on code articles, the articles from mithril's old site have some real nuggets of gold (http://lhorie.github.io/mithril-blog/).

A few months after the re-write was done, I dug into mithril's codebase to gain a deeper understanding and this is what I found...

The main entry point into mithril's source code is the m() function, which is a hyperscript function that, according to the docs (https://mithril.js.org/hyperscript.html), represents an element in a mithril view. It's demonstrated below as:

m("div", {id: "box"}, "hello")
// equivalent HTML:
// <div id="box">hello</div>
View index.html
<!DOCTYPE html>
<title>onhashchange iframe</title>
<meta charset="utf-8">
<iframe src="https://cdn.rawgit.com/pygy/bfe0555ab0ef9a6bfc2a7dc471d0b9d0/raw/e0fad9b45a3a6d5235b8acbc2a7b74137082f1ee/index.html"></iframe>
@pygy
pygy / _grid-ie-calc.scss
Created Jun 4, 2017 — forked from robinloeffel/_grid-ie-calc.scss
Dynamic CSS Grid Items in Internet Explorer and Edge
View _grid-ie-calc.scss
/*
This mixin allows us use CSS grid without having to think about
what -ms-grid-row/-ms-grid-column we have to assign to a grid element
for it to properly work on Internet Explorer and Edge.
It takes three arguments, the last one of which is optional. Specify the
maximum amount of items you want to have in your grid, when they should
break to the next line and, if you like, a grid-gap of some sort.
You can’t perform that action at this time.