Skip to content

Instantly share code, notes, and snippets.

@seanchas116
seanchas116 / toIconifyIcon.ts
Created February 10, 2023 05:19
Generate IconifyIcon from SVG data
function toIconifyIcon(svg: string): IconifyIcon {
const body = svg.replace(/<svg[^>]*>/, "").replace(/<\/svg>/, "");
const width = svg.match(/width="(\d+)"/)?.[1];
const height = svg.match(/height="(\d+)"/)?.[1];
return {
body: `<g fill="currentColor">${body}</g>`,
width: width ? Number.parseInt(width) : undefined,
height: height ? Number.parseInt(height) : undefined,
};
@seanchas116
seanchas116 / ListDiff.ts
Created January 14, 2021 09:36
Virtual DOM like list diff using keys
export type ListDiff<T> =
| { type: "insert"; value: T; before?: T }
| { type: "remove"; value: T };
/**
* Virtual DOM like diff algorhtim for arrays
*/
export function listDiff<T extends { key: string }>(
before: T[],
after: T[]
@seanchas116
seanchas116 / firebase-mobx.ts
Created September 21, 2017 10:35
Firebase value as custom MobX observable
import { Atom } from 'mobx'
import * as firebase from 'firebase'
// Custom observable for Firebase value
// see https://mobx.js.org/refguide/extending.html
export class FirebaseWatcher<T> {
private atom: Atom
private ref?: firebase.database.Reference
private _value: T
@seanchas116
seanchas116 / index.html
Last active April 12, 2016 11:47
Simple list data-binding utility idea
<div class="todo-list">
<div class="todo">
<input type="checkbox" class="done">
<h3 class="title">Title</h3>
</div>
</div>
@seanchas116
seanchas116 / test.js
Last active November 6, 2015 03:10
こういうテストフレームワークほしい
import assert from "power-assert";
import tapSpec from "tap-spec";
const test = new Test();
const {describe, it} = test;
describe("foo", () => {
describe(".bar", () => {
it("fetches bar", async () => {
const result = await foo.bar();
@seanchas116
seanchas116 / haml2jade.rb
Last active August 29, 2015 14:22
haml -> jade
Dir.glob("./**/*.haml").each do |haml|
jade = haml.gsub(/\.haml$/, ".jade")
`haml #{haml} --style ugly | html2jade --donotencode --noemptypipe --bodyless > #{jade}`
end
@seanchas116
seanchas116 / index.js
Created October 30, 2014 12:45
requirebin sketch
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
function update() {
var newTree = render(counter);
var patches = diff(tree, newTree);
patch(node, patches);
tree = newTree;
@seanchas116
seanchas116 / index.js
Created October 7, 2014 01:57
requirebin sketch
'use strict';
var h, mainLoop, render, viewLoop, viewModel;
mainLoop = require('main-loop');
h = require('virtual-dom/h');
viewModel = {
count: 0,
countUp: function() {
@seanchas116
seanchas116 / index.js
Created October 3, 2014 13:47
requirebin sketch
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
var count = 0;
function countup() {
count += 1;
update();
@seanchas116
seanchas116 / table.rb
Created August 19, 2014 07:01
こんな書き方したい
tbl = table do
:foo | :bar | :baz
1 | 2 | 3
1 | 3 | 5
end # => [{:foo=>1, :bar=>2, :baz=>3}, {:foo=>1, :bar=>3, :baz=>5}]
tbl2 = table :horizontal do
:foo | 1 | 1
:bar | 2 | 3
:baz | 3 | 5