zspecza

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:

zspecza

/*=====================================*\
  build tasks
\*=====================================*/

/**
 * This gulpfile is optimised for developing
 * React.js apps in ES6 through Babel, and is
 * designed to live-inject CSS, HTML and even JavaScript
 * changes so maintaining state in an application when
 * editing code is super easy.

zspecza

Stylus Best Practices

Introduction

This is a curated set of conventions and best practices for Stylus, an expressive, dynamic, robust and advanced CSS preprocessor. Frustrated with there not being a set of conventions set in place (that could be easily found), I set forth to find out on my own.

zspecza

// Vertical Rhythm ported from SASS/Compass
// Works exactly as before, with four exceptions:
// 1. rhythm() is a mixin, $rhythm() is a function. Stylus doesn't differentiate between same-name mixins and functions
// 2. All of the variables you're used to lack the dollar sign ($) prepend.
// 3. debug-vertical-alignment uses a temporary online image solution via http://basehold.it
// 4. There is no h-borders alias. Use horizonatal-borders instead.

// The base font size.
base-font-size ?= 16px

zspecza

import fetch, {
       Response } from 'node-fetch';
import qs         from 'querystring';
import WebSocket  from 'ws';

class SimpleSlack {
  
  baseURL        = 'https://slack.com/api/';
  eventListeners = {};
  connection     = null;

zspecza

findSomething((error, something) => {
  if (error) {
    throw new Error(error) 
  }
  transformSomething(something, (error, transformed) => {
    if (error) {
      throw new Error(error) 
    }
    validateTransformed(transformed, (error, validated) => {
      if (error) {

zspecza

// this file is just so I can reference the idea behind placeholders - if you want a maintained version, check out:
//   - https://github.com/thisables/curry
//   - http://ramdajs.com

const __ = Symbol

const ARITIES = {}

const setArity = (arity, fn) => {
  if (!ARITIES[arity]) {

zspecza

function setArity (arity, fn) {
  if (typeof setArity.cache === 'undefined') {
    setArity.cache = {}
  }
  if (typeof setArity.cache[arity] === 'undefined') {
    setArity.cache[arity] = (fn) => {
      switch (arity) {
        case 0: return function () { return fn.apply(this, arguments) }
        case 1: return function (a) { return fn.apply(this, arguments) }
        case 2: return function (a, b) { return fn.apply(this, arguments) }

zspecza

function sequentialCallback (...fns) {
  return (...args) => {
    const done = args.pop()
    const next = (error, ...args) => {
      if (error) return done(error)
      if (fns.length) {
        const fn = fns.shift()
        return fn(...args, next)
      }
      return done(null, ...args)

zspecza

const users = {
  1: { name: 'bob' },
  2: { name: 'sally' }
}

const posts = [
  { author: 'sally', title: 'Hello World' },
  { author: 'bob', title: 'How to do stuff' }
]