marcusandre

Kirby + Patterns = <3

When I heard about Brad Frost's Patternlab for the first time at beyond tellerrand I was intrigued. The idea of splitting your design work for a website into simple modules or patterns isn't new and starts to become more and more of a standard. But organizing this into a very visual styleguide/patternlab seemed to make so much sense. Brad also introduced a very interesting approach with his separation of modules into categories, such as atoms, molecules and organisms.

I started porting Brad's patternlab app to Kirby, but it never really made it to something polished and it turned out for me after using it for Kirby's panel UI, that it's actually a pain in the ass to maintain such a pattern collection.

The problem of patternlab

The problem with such a styleguide or patternlab is that it exists next to the real thing. When you change something in your code base you also have to update the particular code for the pattern in patternlab. To be honest I went very quickly from being

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

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Pull Request Process

Ensure any install or build dependencies are removed before the end of the layer when doing a

Just jotting some notes on delivering webfonts performantly…

still an incomplete draft.

Any critical fonts must be requested asap.

Critical fonts are neccessary for the above-the-fold content to be useful. Identify which of the fonts you NEED for the first render, as they get very different treatment vs the others.

You want the network reqs for your critical fonts to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines

	Date: Wed Jan 11 2017 20:23:08 GMT+0100 (CET)

	1. Console Hacking 2016 (24941)
	2. SpiegelMining – Reverse Engineering von Spiegel-Online (22407)
	3. Fnord-Jahresrückblick (18797)
	4. Shut Up and Take My Money! (16545)
	5. Where in the World Is Carmen Sandiego? (12774)
	6. Security Nightmares 0x11 (10648)
	7. How Do I Crack Satellite and Cable Pay TV? (9553)
	8. Die Sprache der Populisten (9157)


	import React from 'react'

	const bgStyles = {
	strokeWidth: 3,
	strokeLinejoin: 'round',
	strokeLinecap: 'round',
	fill: 'none',
	stroke: '#c3fdff'
	}

	# In order for gpg to find gpg-agent, gpg-agent must be running, and there must be an env
	# variable pointing GPG to the gpg-agent socket. This little script, which must be sourced
	# in your shell's init script (ie, .bash_profile, .zshrc, whatever), will either start
	# gpg-agent or set up the GPG_AGENT_INFO variable if it's already running.

	# Add the following to your shell init to set up gpg-agent automatically for every shell
	if [ -f ~/.gnupg/.gpg-agent-info ] && [ -n "$(pgrep gpg-agent)" ]; then
	source ~/.gnupg/.gpg-agent-info
	export GPG_AGENT_INFO
	else

	---
	- hosts: all
	gather_facts: false
	remote_user: ubuntu
	sudo: yes
	vars:
	http_port: 80
	api_root: /var/www/ansibletest.com/
	tasks:
	- name: update apt

	const sequence = require('run-sequence')

	// create a middleware stack
	// (obj, obj, [fn(obj, obj, fn)], fn) -> null
	function mw (req, res, arr, done) {
	const fns = arr.map(fn => (next) => fn(req, res, next))
	sequence(fns, done)
	}