Jeff Escalante jescalan

Reshape Cheatsheet

Includes

// html
<include src='_partial.html'></include>

// sugarml
include(src="_partial.html")

// jade

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

Deploy a subdirectory in your NodeJS Git project to GitHub pages.

Make sure node build outputs some static files to _built.
npm run deploy.

This eventually became this blog post and this module

CSS Preprocessor Micro-Specification

Introduction

This is a conceptual specification for what could/would/should be the preprocessor to end all preprocessors. Unfortunately, it is just that - a specification. I had made quite a few attempts to create a CSS preprocessor, but I am far too inexperienced with advanced programming to succeed at this task. I got as far as the scanner and half of a half-working tokenizer before proceeding to pull my hair out. So I gave up, and decided just to list the proposed features here for reference. Perhaps these will make their way into existing pre-processors, or even inspire the birth of a new one.

First off, the basic features:

Pretty much everything the 3 leading pre-processors offer in terms of:

	/* breakpoints */
	:root { /* px size at 16px base font size */
	@custom-media --xs (width < 20em); /* 320px */
	@custom-media --s (width < 28em); /* 448px */
	@custom-media --m (width < 48em); /* 768px */
	@custom-media --l (width < 64em); /* 1024px */
	@custom-media --xl (width < 80em);

	extends layout
	block content
	main
	section
	- var post = locals.data.headlines[0]
	#hero(style=bg)
	a(href=post.perma)
	h1= post.title
	img(src= post.image)
	.hero-overlay

	{
	"name": "posthtml-pug",
	"version": "1.0.0",
	"description": "PostHTML Pug parser",
	"main": "index.js",
	"dependencies": {
	"constantinople": "^3.1.0",
	"isobject": "^2.1.0",
	"object-assign": "^4.1.0",
	"pug": "^2.0.0-beta5",

	app.all('*', function (req, res, next) {

	res.header("Access-Control-Allow-Origin", req.headers.origin);
	res.header("Access-Control-Allow-Credentials", true);
	res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
	res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Authorization, Content-Length");

	if (req.method == 'OPTIONS') {
	return res.send(200);
	}

	/* private modernizr mixin
	*
	* downside - only works on single-element selectors. nesting still works though.
	*
	* @param features - a list of modernizr test classes e.g.: csstransitions opacity OR csstransitions, opacity
	* @param declaration - the {block} of content passed by the block mixins +yep()/+nope()
	* @param support - boolean, true if testing support, false if testing no support
	*
	* 1. if testing for support, set selector to empty string
	* if testing for no support, set selector to ".no-js" appended by