Based on / Using:
- BEM (OOCSS needed because 'components')
- SCSS
- NodeJS(?) ([or generate] static)
// svg-sprite config | |
var spriteConfig = { | |
dest: 'static/svg/min/', | |
log: 'verbose', | |
mode: { | |
symbol: { | |
dest: './', | |
prefix: 'svg-%s', | |
sprite: 'spritemap.svg', | |
shape: { |
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 |
/** | |
* 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(), |
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.
You have to include a boatload of link
elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':
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 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)
/** | |
* 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`?? |
/* | |
* 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"; |
/* | |
* 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'); |