Skip to content

Instantly share code, notes, and snippets.

Avatar

Kimmo Brunfeldt kimmobrunfeldt

View GitHub Profile
@tukkajukka
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) => {
table.integer('foobar');
});
}
export async function down(knex: Knex): Promise<any> {
await knex.schema.dropTable('test_setup');
@kitten
kitten / reactiveconf-sc-cfp.md
Last active Nov 17, 2020
ReactiveConf 2017 Lightning Talk CFP: With styled-components into the future
View reactiveconf-sc-cfp.md

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
jevakallio / reactiveconf-slam-poetry.md
Last active Jul 7, 2021
#ReactiveConf 2017 Lightning Talk Submission: JavaScript Slam Poetry
View reactiveconf-slam-poetry.md

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 wkhtmltopdf.md

The Problem

wkhtmltopdf is broken and cannot render multiple fonts because of some issues around names. See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2435

Workaround

  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)
View understanding-immutable-record.md

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
jareware / README.md
Last active Jun 7, 2018
Quick PSA on icon fonts and ligatures
View README.md

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 http://wwweeklies.com/ on 2015-12-04:

@paulirish
paulirish / what-forces-layout.md
Last active Aug 5, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
andystanton / Start up local Docker Machine on OSX automatically.md
Last active May 9, 2021
Start up local Docker Machine on OSX automatically.
View Start up local Docker Machine on OSX automatically.md

Notice

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.

Requirements

  • 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
jquense / 0. intro.md
Last active Sep 5, 2020
Alternative ways to define react Components
View 0. intro.md

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 (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). 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