David Hund 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)

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.

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

(Living) Styleguide Centered Front-end Development

Based on / Using:

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

	/*
	* 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');

	/*
	* 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";

	/**
	* 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`??

	/**
	* 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(),

	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

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

David Hund davidhund

The simplest possible carousel

The issue

(Living) Styleguide Centered Front-end Development

Gobal flow