Tiberiu Butnaru tiberiualex

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

i3 Window Manager Cheat Sheet

$mod refers to the modifier key (alt by default)

General

startx i3 start i3 from command line
$mod+<Enter> open a terminal
$mod+d open dmenu (text based program launcher)
$mod+r resize mode ( or to leave resize mode)
$mod+shift+e exit i3

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

When receiving JSON data from other resources(server API etc), we need Json.Decode to convert the JSON values into Elm values. This gist let you quickly learn how to do that.

I like to follow working example code so this is how the boilerplate will look like:

import Graphics.Element exposing (Element, show)
import Task exposing (Task, andThen)
import Json.Decode exposing (Decoder, int, string, object3, (:=))

import Http

Distilling the Essence of Reducers

Redux has brought the notion of reducer back into the awareness of many developers for whom they are a novel concept. In fact they are quite simple, and used all the time in such things as SUM aggregations in databases, where they compute a single value from many.

It's great that Redux has made reducers known to a broader audience, though they are relatively ancient concepts in programming, in fact. But the particular way Redux illustrates a reducer in its documentaion is, in my opinion, with a coding style that is harder to extend and read than it should be. Let's distill reducers down to their essensce, and build up Redux reducers in a way that lowers complexity, and helps separate Redux idioms from your business logic.

The simplest reducer

A reducer is a pure function that accepts more arguments than it returns. That is to say - one whose "arity" is greater than 1. It 'reduces' the two things you pass it down to a single value. Here are two reducers, in a map

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	-- inspired by: https://groups.google.com/d/msg/elm-discuss/2LxEUVe0UBo/ZgJ_ldUH6ygJ
	-- thanks for the help: http://learnyouahaskell.com/functors-applicative-functors-and-monoids
	module UserDecoder where

	import Date exposing (Date)
	import User exposing (User)

	import Json.Decode as Js exposing ((:=))

	-- Applicative's `pure`:


	<!--
	This demo shows two ways to detect changes to a DOM node `.textContent`, one
	using a `MutationObserver` and the other using an ES2015 `Proxy`.

	From testing, a `Proxy` appears to be 6-8x faster than using a MO in Chrome 50.

	Update: removing the `Proxy` altogether speeds up the MO to be inline with the Proxy.
	This has something to do with how the browser queues/prioritizes Proxies over MO.

	{-# LANGUAGE NoImplicitPrelude, GADTs, DataKinds, PolyKinds, FlexibleInstances #-}

	import Data.Monoid
	import Control.Category

	-- A monoid gives a rise to a single-object category.
	newtype M m (a :: ()) (b :: ()) = M m

	instance Monoid m => Category (M m) where
	id = M mempty