stowball

@function color($keys) {
    @return get($palette, $keys);
}

@function c($keys) {
    @return color($keys);
}

stowball

$z-indexes: (
    main: (
        above-inherit: (),
        nested: (
            low,
            middle,
            high
        ),
        tooltip: ()
    ),

stowball

BEMantic: DRY Like You Mean It

Tim Baxter’s recent A List Apart article, Meaningful CSS: Style Like You Mean It, has once again re-ignited the debate that front-end developers who prefer to take an object oriented approach to CSS with BEM (or similar) somehow forego any concern with semantic markup and accessibility.

Personally, I think that’s a really insulting opinion to have. I don’t understand why BEM and HTML semantics are seen as mutually exclusive. I like to think I'm a good developer; I take great pride in the HTML I write (both the semantics and ARIA attributes) and in my CSS, which utilises both Sass and BEM.

I've been a front-end developer for a long, long time, and I've settled on my current approach not because I'm "one of the brainwashed masses" or because "I like to overcomplicate things", but because

stowball

In 2014, Jackie Balzer wrote an excellent piece for Smashing Magazine on using Sass to automatically manage the z-indexes of elements using lists.

I've been using this technique since an ex-colleague introduced me to it in early 2015, but the disconnect between maintaining multiple lists was starting to bug me.

So, I've come up with a variation which uses Sass maps and lists instead, and allows me to clearly see the hierarchy of the different elements.

The Sass function

@function z-index($key1, $key2: null) {

stowball

// ==UserScript==
// @name         BBC EU Referendum Cleaner and Reloader
// @namespace    http://mattstow.com/
// @version      0.1.1
// @description  Live reload of BBC's EU Referendum Results
// @author       Matt Stow
// @match        http://www.bbc.com/news/politics/eu_referendum/results
// @grant        none
// ==/UserScript==

stowball

vm.availableFields = rsDataModel.fields.map(function (field) {
    return field.childFields.length ? field.childFields : field;
}).reduce(function (prev, curr) {
    return prev.concat(curr);
}, []);

stowball

{
  "mdmStagingMapping": {
    "properties": {
      "F2_DOC": {
        "type": "long",
        "omit_norms": true
      },
      "F2_SERIE": {
        "type": "string",
        "omit_norms": true

stowball

callback: function (chart) {
    var props = Object.getOwnPropertyNames(chart).sort();

    props.forEach(function (prop) {
        if (chart[prop].dispatch && chart[prop].dispatch.on) {
            console.log('prop', prop, typeof chart[prop].dispatch.on);
            try {
                chart[prop].dispatch.on('elementClick', function (e) {
                    console.log('prop, e', prop, e);
                });

stowball

#!/bin/sh

files=$(git diff --cached --name-only --diff-filter=ACM | grep ".js$")
if [ "$files" = "" ]; then
	exit 0
fi

eslint=$PWD/app/web-apps/node_modules/gulp-eslint/node_modules/eslint/bin/eslint.js

for file in ${files}; do

stowball

#!/bin/bash

# Functions ==============================================

# return 1 if global command line program installed, else 0
# example
# echo "node: $(program_is_installed node)"
function program_is_installed {
  # set to 1 initially
  local return_=1