mattidupre

Nutrien and BEM

Introduction

BEM stands for Block Element Modifier. Or, block__element--modifier. It's a syntax for combining similar blocks of tags together and making it easier to target them in your CSS. Most people hate it at first, but over time you will come to appreciate it. As with any methology, there are different ways of doing things. This document should therefore live on as working document to capture any decisions made on the topic moving forward.

But Why?

BEM is ugly. Very ugly. But the benefits far outweigh the drawbacks. BEM keeps your CSS organized and discourages you from writing declarations that overlap one another. Even more importantly, it lowers specificity for situations when that can be avoided. Lower specificity means less time spent in the document inspector trying to figure out which decorations are ruining your CSS groove.

mattidupre

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

mattidupre

/** package.json Dependencies
"devDependencies": {
    "browserify": "^10.1.3",
    "browserify-shim": "^3.8.6",
    "dotenv": "^1.1.0",
    "fs": "0.0.2",
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.2.0",
    "gulp-bootlint": "^0.5.0",
    "gulp-data": "^1.2.0",

mattidupre

// See http://www.es6fiddle.net/i0n48lf3/

/* BACKGROUND

Sometimes with Javascript it makes more sense to define a
function's arguments before calling / defining that function, 
much like (my very limited understanding of) Ruby.

An example:

mattidupre

Keybase proof

I hereby claim:

• I am mattidupre on github.
• I am beluga (https://keybase.io/beluga) on keybase.
• I have a public key whose fingerprint is 856B 3E3C 7DE9 40DF BEDF C917 9D7B EBBB 1DCD FB6B

To claim this, I am signing this object:

mattidupre

(function (factory) {
  if (typeof exports === 'object') {
    // CommonJS
    factory(require('./jquery'));
  } else {
    // Standard globals
    factory(jQuery);
  }
}(function ($) { // or (jQuery)
  // Plugin code goes here.

mattidupre

function compose() {
    function c(fn, next) {
        return function() {
            var args = Array.prototype.slice.call(arguments, 0);
            fn.apply(fn, [next].concat(args));
        }
    }
    var fn = arguments[arguments.length-1];
    for (var f=arguments.length-2; f>=0; f--) {
        fn = c(arguments[f], fn);

mattidupre

function compose() {
  var functions = arguments;
  return function() {
    for (var n=0; n<functions.length; n++) {
      var result = functions[n].apply(functions[n], arguments);
      if (result === false) {
        return false;
      }
      arguments[0] = result;
    }

mattidupre

define([
  'backbone'
  // add backbone extensions here
  ], function(Backbone) {

  // Declare prototype Backbone.Model functions
  var ModelP = {};

  // Declare prototype Backbone.Collection functions
  var CollectionP = {};

mattidupre

var initMenu = function () {

    // Script compares document url with each menu url such that only those submenus that are children of the current page are toggled visible.
    // Compares both subfolders (Pages/folder/item.aspx) and subsites (site/Pages/folder/item.aspx) with url.

    // Hide all second-level menus.
    $('#DhssZenNav li.static ul').attr('style', 'display: none;');

    // Define regular expression.
    var myRegExp = new RegExp('(?:/|.*?//?.*?/)(?:pub/|home/)*((?:.*?/)*).*?.aspx');