Skip to content

Instantly share code, notes, and snippets.

Pierre-Yves Gérardy pygy

Block or report user

Report or block pygy

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
@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 rbnlffl/_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.
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>eqeqeq vs regexp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>indexof vs regexp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View index.html
<!doctype html>
<title>XRegExp fast-fake-y benchmarks</title>
<table><tr><td>
<div id="log-after">Testing XRegExp 3.1.1-fast-fake-y.<br>Sit back and relax. This might take a while.<br><br>Constructor with short pattern:<br>XRegExp with pattern cache flush x 88,916 ops/sec ±2.24% (82 runs sampled)<br>XRegExp x 834,869 ops/sec ±1.08% (81 runs sampled)<br>XRegExp.cache x 38,821,522 ops/sec ±1.93% (82 runs sampled)<br>RegExp x 5,654,331 ops/sec ±1.68% (81 runs sampled)<br>Fastest is XRegExp.cache<br><br>Constructor with medium pattern:<br>XRegExp with pattern cache flush x 32,278 ops/sec ±1.20% (83 runs sampled)<br>XRegExp x 856,503 ops/sec ±1.48% (79 runs sampled)<br>XRegExp.cache x 38,742,523 ops/sec ±0.66% (82 runs sampled)<br>RegExp x 5,679,163 ops/sec ±2.44% (80 runs sampled)<br>Fastest is XRegExp.cache<br><br>Constructor with long pattern:<br>XRegExp with pattern cache flush x 1,211 ops/sec ±1.01% (80 runs sampled)<br>XRegExp x 484,537 ops/sec ±0.98% (81 runs sampled)<br>XRegExp.cache x 38,776,122 ops/sec ±
View peg-and-pseudojs-parser.js
var c = require("compose-regexp")
function normalize(matcher) {
if (typeof matcher === 'function') return matcher
if (({}).toString.call(matcher) === '[object Object]') return grammar(matchers)
var flags = 'g'
if (matcher instanceof RegExp) flags += matcher.flags.replace('g', '')
matcher = c.flags(flags,
c.either(
matcher,
/()/
You can’t perform that action at this time.