davidhund

// svg-sprite config
var spriteConfig = {
	dest: 'static/svg/min/',
	log:  'verbose',
	mode: {
		symbol: {
			dest: './',
			prefix: 'svg-%s',
			sprite: 'spritemap.svg',
			shape: {

davidhund

I use postcss-cli through `npm run` script.
Using an options.json

When trying to add postcss-scss I get the following error:

```
/node_modules/postcss-cli/index.js:73
  plugin = plugin.postcss || plugin();
                             ^
TypeError: object is not a function

davidhund

(Living) Styleguide Centered Front-end Development

Based on / Using:

• BEM (OOCSS needed because 'components')
• SCSS
• NodeJS(?) ([or generate] static)

Gobal flow

davidhund

/**
 * Log comments on a particular gist. Verrrry simple/naive/stupid.
 * @param  {Global} win Window
 */
(function logGistComments(win){
	'use strict';
	var gid = win.prompt('Gist ID [\'200c7ca83f2dfcd92a09\']', '200c7ca83f2dfcd92a09');
	if (gid) {
		var url = 'https://api.github.com/gists/{id}/comments'.replace('{id}',gid),
			req = new XMLHttpRequest(),

davidhund

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

![Touch Icon Links](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

davidhund

A simple codepen HSL() demonstration: http://codepen.io/anon/pen/jExZGa?editors=001.

This helped me see visually what fiddling with the 3 arguments (Hue, Saturation, Lightness) effected.

davidhund

The simplest possible carousel

Note NIH maybe :)

Although I normally avoid carousels I'm sometimes required to include them. There are a couple of excellent options (see below), but most of those opt for features over filesize. This is fine, of course. It's just that I often don't need 50% of the features and would rather have a very simple, modular script. Including a carousel plugin that requires dozens of KB's simply to make something 'slideable' seems wasteful.

Strangely enough I've not found many robust carousels that are simple, modular and lightweight... (Currently http://unslider.com/ (see below) seems to come pretty close)

davidhund

/**
 * NOTE: I am new at this and probably miss something obvious :-)
 *
 * What I'd like to do is the following:
 * - Using the Revealing Module Pattern..
 * - .. combined with Browserified modules..
 * - .. to expose (not export) `myModule` globally in main.js (-> bundle.js)..
 * - .. and to use it in the browser e.g: myModule.init()
 *
 * How do I (best) end up with a global `myModule`??

davidhund

/*
 * Taken straight from: http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/
 */

(function(url){
// Section 1
  var dom,doc,where,iframe = document.createElement('iframe');
  iframe.src = "javascript:false";
  iframe.title = ""; iframe.role="presentation";  // a11y
  (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";

davidhund

/*
 * Trying to feature-detect (very naive)
 * CSS Flexbox support. 
 * - Only most modern syntax
 * 
 * Is this nonsense?
 */

(function NaiveFlexBoxSupport(d){
  var f = "flex", e = d.createElement('b');