jbmoelker

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

jbmoelker

'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';

jbmoelker

jbmoelker

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

jbmoelker

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 $

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

jbmoelker

export default function asyncSubmitForm (form:HTMLFormElement): Promise<Response> {
	return window.fetch(formRequest(form))
		.then(checkStatus)
		.then(response => response.json());
}

export function formRequest(form:HTMLFormElement): Request {
	return new Request(form.action, {
		method: form.method,
		headers: {

jbmoelker

/**
 * HTMLDialogELement
 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
 */
interface HTMLDialogElement extends HTMLElement {
    /**
     * Reflects the open HTML attribute,
     * indicating that the dialog is available for interaction.
     */
    open:boolean;

jbmoelker

var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var notify = require('gulp-notify');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build:css', buildCss);

jbmoelker

// Create shim for requested bootstrap component and require 
// and return jQuery so you do not have to inject it separately 
// every time you use a bootstrap component.
define({
    load: function (name, req, onload, config) {
    // Set this path to wherever the bootstrap components live.
    // Contents should match https://github.com/twbs/bootstrap/tree/master/js
		var component = 'path/to/bootstrap/js/'+name;

		var shim = {};