Skip to content

Instantly share code, notes, and snippets.


Kimmo Brunfeldt kimmobrunfeldt

View GitHub Profile
tukkajukka / 20190417131115_test-setup.ts
Last active Jun 6, 2021
How to use Knex.js in a TypeScript project
View 20190417131115_test-setup.ts
import { Knex } from 'knex'
export async function up(knex: Knex): Promise<any> {
await knex.schema.createTable('test_setup', (table: Knex.TableBuilder) => {
export async function down(knex: Knex): Promise<any> {
await knex.schema.dropTable('test_setup');
kitten /
Last active Nov 17, 2020
ReactiveConf 2017 Lightning Talk CFP: With styled-components into the future

styled-components Logo

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please star this gist. #ReactiveConf

View TweetPresenter.js
// paste this to chrome console on anybody's twitter page
// and it'll turn into an instant presentation :)
(function TweetPresent() {
const presenter = $(`<div id="tpd" style=" position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; padding: 10vh 10vw; box-sizing: border-box; background-color: white; font-size: 5vw; text-align: center; z-index: 9999; display: flex; align-items: center; justify-content: center;"></div>`);
const tweets = $$(`div.tweet p.js-tweet-text`)
.map(el => el.innerHTML)
.map(t => ({t, s: Math.random()}))
.sort((a, b) => a.s > b.s ? -1 : 1)
.map(c => c.t);
jevakallio /
Last active Jul 7, 2021
#ReactiveConf 2017 Lightning Talk Submission: JavaScript Slam Poetry

TL;DR: If you want to see me perform a spoken word poem about JavaScript in front of 1000 people (and on video), please star this gist. If you're on mobile, you'll need to request desktop site.

JavaScript Slam Poetry

Javascript! Slam! Poetry!

View A tool for Renaming fonts to solve Multiple font-face rules issue with

The Problem

wkhtmltopdf is broken and cannot render multiple fonts because of some issues around names. See


  1. Pick an 8 or less char name for each font and variation e.g. HelvBold, HelvLite, TimeReg
  2. Every variation needs to be a separate font file, with all the details renamed in Font Forge using the short name determined before.
  3. Give the font files the same short name (e.g. HelvBold.ttf)

Important: At the time of writing (2019-11-11) Immutable.js is effectively abandonware, so I can no longer recommend anyone to follow the advice given here. I'll leave the article here for posterity, since it's still getting some traffic.

Understanding Immutable.Record

Functional programming principles and with it immutable data are changing the way we write frontend applications. If the recent de-facto frontend stack of React and Redux feels like it goes perfectly together with immutable data, that's because it's specifically designed for that.

There's several interesting implementations of immutable data for JavaScript, but here I'll be focusing on Facebook's own Immutable.js, and specifically on one of i

jareware /
Last active Jun 7, 2018
Quick PSA on icon fonts and ligatures

Long Live Icon Fonts!

or, a Quick PSA on icon fonts and ligatures.

tl;dr: keep using icon fonts, they are nice, just enable ligatures

These are my talking notes at the on 2015-12-04:

paulirish /
Last active Aug 5, 2021
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
andystanton / Start up local Docker Machine on OSX
Last active May 9, 2021
Start up local Docker Machine on OSX automatically.
View Start up local Docker Machine on OSX


This script is no longer required with Docker for Mac which includes an option to run Docker at startup and doesn't use docker-machine to administer the local Docker engine.


  • Docker Machine + Docker
  • curl
  • A Virtualbox-driven Docker Machine called "default" docker-machine create --driver virtualbox default (this is the default with Docker toolkit).
jquense / 0.
Last active Sep 5, 2020
Alternative ways to define react Components
View 0.

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns ( All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is