dalgard

/*
  Set position like margin/padding shorthand - rules with null value
  are removed from output (standard)

  Example:
    @include position(0 20px null, fixed);

  Output:
    position: fixed;
    top: 0;

dalgard

// Get the current active tab
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  // Send message to check whether the script has already been injected
  chrome.tabs.sendMessage(tabs[0].id, "ping", function (response) {
    // If no message handler exists (i.e. content-script hasn't been injected before),
    // this callback is called right away with no arguments, so ...
    if (typeof response === "undefined") {
      // ... inject content-script (null means current active tab)
      chrome.tabs.executeScript(null, { file: "content_script.js" });
    }

dalgard

function extend(target) {
  // Run through rest parameters
  Array.prototype.slice.call(arguments, 1).forEach(function (source) {
    if (source) {
      // If source is an array, only copy enumerable properties
      var keys = (Array.isArray(source) ? Object.keys(source) : Object.getOwnPropertyNames(source));

      // Iterate over keys
      keys.forEach(function (key) {
        // Standards-compliant awesomeness

dalgard

// Always return an array of DOM elements
function queryAll(selector) {
  var id_sel = selector.match(/^#([\w-]*)$/),
      class_sel = !id_sel && selector.match(/^\.([\w-]+)$/),
      tag_sel = !class_sel && selector.match(/^[\w-]+$/);

  if (id_sel) {
    var elem = document.getElementById(id_sel[1]);
    return (elem ? [elem] : []);  // Always return an array
  }

dalgard

function matchesSelector(dom_element, selector) {
  var matchesSelector = dom_element.matches || dom_element.matchesSelector || dom_element.webkitMatchesSelector || dom_element.mozMatchesSelector || dom_element.msM atchesSelector || dom_element.oMatchesSelector;
  return matchesSelector.call(dom_element, selector);
}

dalgard

/*
  This trick is a lazy way of two-way sync'ing some form controls with an options object.
  Actually, the "sync'ing" consists in getting the values when needed and updating the fields
  when changing something. It has its limits, but may work quite nicely.
  
  Depends on: jQuery/Zepto
  
  The code below works for checkboxes (boolean), text input (string), number input (number),
  select lists (string) and json in textarea (object)
  

dalgard

/*
  All arguments *may* be space separated lists:
    @include link-states(<properties>, <normal values>[, <state values>]
      [, <:active values>][, <:focus values>]);

  Example:
    a {
      @include link-states(color, red, blue);
    }
  

dalgard

/*
  Module boilerplate (jQuery)

    - Pass in a callback OR a promise
    - Always returns a promise
*/

function getStuff(arg, d) {
  var callback = d,                 // Save possible callback
      is_promise = d && d.resolve;  // Check whether d is a promise

dalgard

function Class(properties) {
  // This base constructor can be left empty, but a nice boilerplate might look like this
  if (properties) {
    // Add properties to the instance
    Object.getOwnPropertyNames(properties).forEach(function (property_name) {
      var descriptor = Object.getOwnPropertyDescriptor(properties, property_name);
      Object.defineProperty(this, property_name, descriptor);
    }, this);
  }
}

dalgard

// Use embedded fonts
@font-face {
  font-family: 'icons';
  font-weight: normal;
  font-style: normal;
  src:
    url(data:application/x-font-ttf;charset=utf-8;base64,...) format('truetype'),
    url(data:application/font-woff;charset=utf-8;base64,...) format('woff');
}