Skip to content

Instantly share code, notes, and snippets.


Henric Trotzig trotzig

View GitHub Profile
View 3Deffect.patch
commit b11cb468cc7ab88827fd5994244d066da748bb2a
Author: Jan Paul Posma <>
Date: Sat Jun 27 16:51:05 2015 -0700
Add 3d effect to hot loading
I thought it'd be fun to create something to show that the page is
hot loading when making changes, to give us something to look at for
those few seconds that you can't really productively spend otherwise
anyway. This introduces a fun 3d effect to do just that.
View lazy-load-intro.diff
commit 7b5f5c739eefb8c5bca2981b007ab09b8df9b63a
Author: Henric Trotzig + Kevin Kehl <>
Date: Mon Jul 11 21:46:09 2016 +0200
Load partner tools asynchronously
This is the first commit in a serious of commits aiming to split up our
application bundle into smaller pieces. By using the `lazy` support of
the bundle-loader webpack plugin [1], we can make require statements
resolve a function that can be used to asynchronously load a module
trotzig /
Last active Jun 4, 2017
This script will find javascript modules that aren't currently used in your application.
# Make the script fail on the first error encountered.
set -euo pipefail
# Create a temp folder that we can use to store files in.
if [ "$(uname -s)" = "Darwin" ]; then
tmp_dir=$(mktemp -d -t find-dead-modules.XXXXXXXX)
tmp_dir=$(mktemp -d --tmpdir find-dead-modules.XXXXXXXX)
trotzig / import_js_talk_proposal.txt
Last active Dec 14, 2015
A talk proposal for React conf 2016
View import_js_talk_proposal.txt
Import-JS lightning talk proposal
Talk title: Where's that module again?
With JavaScript development becoming more and more modular, keeping track of
your dependencies can be a pain. To import a module you need to know where it is
located in the file system, and with a growing application this will quickly
become a problem. Typing all those "import foo from..." lines can hurt even the
most COLEMAK-savvy people out there. To ease some of that burden, you can
automate the process of importing dependencies through an editor plugin.
trotzig / diffux_ci_talk_proposal.txt
Last active Dec 13, 2015
A talk proposal for React conf 2016
View diffux_ci_talk_proposal.txt
Diffux CI lightning talk proposal
Talk title: Visual diffing for React components
Are you worried that your CSS changes will break the styling of a component?
Are you scared that your code refactoring will result in visual bugs? Do you
find it difficult to understand how a code change affects the appearance of your
components? If you answer yes to any of the questions above, you want a visual
diffing tool. While many exist, Diffux-CI is the best one for React.
trotzig /
Last active Nov 18, 2016
Counting commits
# Run the script like this:
# > bash <name>
# where name is a uniquely identifying string for a contributor, e.g. "Lencioni"
repos=( "causes" "brigade" "devscripts" "cuisine" "scss-lint"
"brigade-cap-tasks" "overcommit" "mock_redis" "sass-enhance"
"eslint-config-brigade" "react-waypoint" "haml-lint" "async_observer" "bender"
"react-simple-pie-chart" "tech-interview" "url-sweatshirt" "db-query-matchers"
View _z_index_mappings.scss
$z-index-menu: 100;
$z-index-navigation-main: 200;
$z-index-floating-action-button: 300;
$z-index-modal-wrapper: 400;
$z-index-toast: 500;
$z-index-n-progress: 600;
View resolve_dom_node.js
* Convenience method to resolve a component or a DOM node to a DOM node. If the
* passed in `node` is a React component, the root DOM node of the component is
* returned. If `node` is already a DOM node, that node is returned in itself.
* @param {Object} node A React component or a DOM node
* @return {?Object} a DOM node
var resolveDOMNode = (node) => {
if (!node) {
trotzig / to_have_text_matcher.js
Created Jan 25, 2015
A custom Jasmine matcher to check a component for a particular string
View to_have_text_matcher.js
var $ = require('jquery');
var resolveDOMNode = require('support/resolve_dom_node');
* This file adds a `toHaveText` matcher to our Jasmine spec. To use it, do
* something like:
* expect(component).toHaveText('Support John');
beforeEach(function() {
trotzig / .importjs
Created Dec 10, 2014
Example .importjs configuration with `lookup_paths`
View .importjs
- 'app/assets/javascripts'
- 'vendor/bower_components'