Jasper Moelker jbmoelker

Note: These are just my personal notes. Rules which are formalised are moved to voorhoede/riotjs-style-guide

RiotJS Style Guide

Opinionated RiotJS Style Guide for teams by De Voorhoede.

Purpose

This guide provides a uniform way to structure your RiotJS code. Making it

jQuery Style Guide

This guide applies to jQuery 1-3, or Zepto, or Shoestring, or ...

prefer native / avoid jQuery (if it's just as easy Vanilla JS, do that)
prefer lastest jQuery (jQuery 3, smaller, closer to standars)
avoid $.ready (inject script just before </body>)
avoid $(window).load()
use (function($){ }(jQuery)) (avoid conflict, show what $ is)
prefix jQuery object vars with $

Lightweight front-end servers

NodeJS: Express/Koa + Nunjucks
Python: Flask + Jinja2
PHP: Silex/Symfony + Twig
Golang: Revel + Go HTML/Template / ? + Pongo* (not a drop in replaced, panicky)
Java: Spark + Jinjava
Ruby: Sinatra + Liquid* (differs from Jinja2 syntax)
.NET: Nancy + Razor (intro) on .NET Core

Immutable caching of static assets with Express.js and Service Worker

This recipe revisions all asset files in a dist/assets/ directory using gulp-rev. The adds a unique content based hash to each asset file. The pattern of that hash (/.*-[0-9a-f]{10}\..*/) is then used to handle these files in Express.js and the Service Worker. Express.js sets the Cache-Control header to immutable. The Service Worker serves these files directly from cache without ever attempting the server again.

	'use strict';

	/**
	* Script converts an animated SVG (`fileIn`) into an animated GIF (`fileOut`)
	* with the given `duration`, `fps`, `width` and `height.
	* This is just a proof-of-concept. Script needs an API etc etc.
	*/

	// config which should come from cli args
	const fileIn = 'animation.svg';

	const gulp = require('gulp');
	const postcss = require('gulp-postcss');
	const rename = require('gulp-rename');
	const sourcemaps = require('gulp-sourcemaps');

	gulp.src('./src/index.css')
	.pipe(sourcemaps.init())
	.pipe(postcss([
	require('postcss-import'), // combine imports into one file
	require('postcss-css-variables'), // replace variables by their values

	/**
	* Inline this into the <head> of your HTML document. Replace `PROJECT_ID` and optionally change timeout (now 1000ms).
	*
	* Based on https://help.optimizely.com/Set_Up_Optimizely/Synchronous_and_Asynchronous_snippet_loading
	* Simplified for today's browsers (no `s.async` or `s.type` needed, no need to prefix with `window.`).
	* Note: risk of using `document.appendChild`: https://www.paulirish.com/2011/surefire-dom-element-insertion/
	*/
	(function(d) {
	var s = d.createElement('script');
	s.src = 'https://cdn.optimizely.com/js/PROJECT_ID.js';

	import { h } from 'preact';
	import { Details, Summary } from './DetailsSummary';

	const App = () => (
	<Details>
	<Summary>This is a summary supporting <code>HTML</code></Summary>
	<p>... with expandible details.</p>
	<p>Based on <a href="http://html5doctor.com/summary-figcaption-element/">HTML5 details/summary elements</a>.</p>
	<p>And added <a href="http://caniuse.com/#feat=details">support for browsers</a> lacking built-in support.</p>
	</Details>

	export default function fetchJson(url) {
	return new Promise((resolve, reject) => {
	const request = new XMLHttpRequest()
	request.open('GET', url, true)
	request.setRequestHeader('Accept', 'application/json')
	request.onload = function() {
	if (request.status >= 200 && request.status < 400) {
	try {
	const json = JSON.parse(request.responseText)
	resolve(json)