pieterbeulque

This is a reply to @ppk's article "The CSS mental model"

I like the idea of explaining CSS to JavaScript developers using JavaScript analogies! I'm not really sure about the example you're giving, to be honest.

Would it make more sense to explain the declarative part as some code that runs on every frame to render the page again? Every part of a CSS selector then becomes either a loop or a conditional inside a loop. See below.

The given example (I dropped the :hover for reasons later explained)

pieterbeulque

const ask = async (question) => Promise.resolve('Answer ' + question);

const questions = [1, 2, 3];

const answers = await questions.reduce(async (accumulator, nextQuestion) => {
  const allAnswers = await accumulator;
  const answer = await ask(nextQuestion);
  return Promise.resolve([...allAnswers, answer]);
}, Promise.resolve([]));

pieterbeulque

Keybase proof

I hereby claim:

• I am pieterbeulque on github.
• I am pieterbeulque (https://keybase.io/pieterbeulque) on keybase.
• I have a public key ASBhNe1utNm-tf4j41If7y2ZryWF6Az2iUyK2UK42Xkxsgo

To claim this, I am signing this object:

pieterbeulque

<?php
/**
 * Little helper class to help you measure server performance
 *
 * Usage:
 * $stopwatch = new Stopwatch();
 * $stopwatch->start('My expensive operation');
 * // Do expensive operation
 * $stopwatch->stop();
 *

pieterbeulque

Reading List

Filosofisch

📝 Understanding Progressive Enhancement — Aaron Gustafson

Korte uitleg van het basisprincipe achter Progressive Enhancement.

📖 Resilient Web Design — Jeremy Keith

pieterbeulque

Publishing JS packages on NPM

Make sure you have an NPM & Travis account.

NPM

• npm init
• update package.json (ref)
• commit & push
• npm publish

pieterbeulque

import { Inject } from 'fd-angular-core';
import { Page, Root } from 'mr-angular-pages';
import { Meta } from 'fd-angular-meta';
import TMPL from './application.html!';

@Page({
	templateUrl: TMPL
})
export class ApplicationPage {
	get longTitle () {

pieterbeulque

// app.translate('foo.bar') renders this.translations.foo.bar
// app.translate('foo.bar', 'baz') renders this.translations.foo.bar, replacing any ${} syntax with 'baz'
// app.translate('foo.bar', { hello: 'world' }) renders this.translations.foo.bar, replacing ${hello} with 'world'
translate (key, replace) {
	if (!this.translations) {
		return '';
	}

	let translation = this.translations;

pieterbeulque

a {
  border: 1px solid green;
  color: red;
}

.hero {
  color: white;
}

.hero a {

pieterbeulque

if (!document.querySelector('[ui-view]')) {
	console.warn('No root [ui-view] found');
}