Skip to content

Instantly share code, notes, and snippets.

View guidobouman's full-sized avatar

Guido Bouman guidobouman

View GitHub Profile
@guidobouman
guidobouman / checkerboard.css.sass
Created October 22, 2012 19:19
Elastic responsive SASS / CSS checkerboard scaling from 2 to 4 blocks wide depending on the container width. The `:nth-child()` calculations are the interesting part.
// Chekkerboard css
#overview
max-width : 1000px
.item
width : 50%
background : white
@guidobouman
guidobouman / dabblet.css
Created July 11, 2013 13:07
Centered dynamic text.
/**
* Centered dynamic text.
*/
@import url(http://fonts.googleapis.com/css?family=Lato:100);
html {
height: 100%;
}
@guidobouman
guidobouman / directive-fluid-textarea.js
Last active June 14, 2016 15:23
Angular Fluid Textarea Directive
// Use like: <textarea fluid-textarea rows="1"></textarea>
angular.module('q42.fluidTextarea', [])
.directive('fluidTextarea', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.css({
resize: 'none'
@guidobouman
guidobouman / keybase.md
Last active September 23, 2019 16:34
Public proof of the connection of my GitHub account with keybase

Keybase proof

I hereby claim:

  • I am guidobouman on github.
  • I am guidobouman (https://keybase.io/guidobouman) on keybase.
  • I have a public key ASD3yzM2K1zw4DOwLYqkNiffb-YSzTF8ETcycBYiEdJ5lwo

To claim this, I am signing this object:

@guidobouman
guidobouman / .eslintrc.js
Last active July 21, 2021 10:30
Make ESlint import resolver work with Vue & Webpack
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
extends: 'airbnb-base',
// required to lint *.vue files
plugins: [
'html'
@guidobouman
guidobouman / enforceScrollingApp.vue
Last active May 17, 2017 13:04
Vue app that moves it's scrolling into a child div. In case you ever need to create a web app.
<template>
<div id="app" @touchmove.prevent>
<header-bar></header-bar>
<main @touchmove="enforceScroll">
<router-view></router-view>
</main>
<footer-bar></footer-bar>
</div>
</template>
@guidobouman
guidobouman / basic-variable.css
Last active June 8, 2017 11:39
CSS variables
:root {
--brand-color: #ff6600;
}
.header {
color: var(--brand-color);
}
@guidobouman
guidobouman / dynamic-variable.css
Last active June 8, 2017 11:40
CSS variables
:root {
--gutter: 10px;
}
@media (min-width: 600px) {
:root {
--gutter: 20px;
}
}
Quiz
Intro screen
button click -> Question remaining?
Question remaining?
next question is order? -> Question - Order
next question is choose one? -> Question - Choose one
no next question? -> Finish
Question - Order
@guidobouman
guidobouman / resume.json
Last active August 21, 2019 06:15
My resume as JSON
{
"basics": {
"name": "Guido Bouman",
"label": "Interaction engineer & team lead",
"picture": "https://gravatar.com/avatar/fba9d4458f2ea802c5a426e4615da0c7?size=500",
"email": "m@guido.vc",
"phone": "+31642945687",
"website": "https://guido.vc/",
"summary": "Lead interaction engineer crafting simple, elegant & intuitive solutions to complex problems. Specialties: concept realisation & front-end web development. I help out clients with new concepts, interactions, architecture setup & performance optimisation. From there, I help internal teams take the lead and make their product a success. Some of the stacks that I'm familiar with: Vue.js & React on top of .NET Core, NodeJS & Firebase. Preferably with Webpack, Jest & TypeScript where feasible. Previously I’ve scaled back-ends beyond 1 million active monthly users. Nowadays I prefer creating highly effective and happy teams.",
"location": {