The popular open-source contract for web designers and developers by Stuff & Nonsense
- Originally published: 23/12/2008
- Revised date: 15/12/2013
- Original post
I have this Grunt issue where browserSync injects a changes stylesheet before Autoprefixer is done with it. Basically: | |
1. `Watch` picks up on a changes `style.scss` and runs the `sass:dist` task | |
2. `sass:dist` outputs `style.scss` -> `style.min.css` | |
3. next: the `autoprefixer` task processes `style.min.css` | |
4. **but** in the mean time `browserSync` picks up on the changes `style.min.css` and injects it | |
5. only now `autoprefixer` finishes with `style.min.css`… | |
This means my injected `style.min.css` remains out-of-date (no prefixes)... |
module.exports = function(grunt) { | |
// Project configuration. | |
grunt.initConfig({ | |
pkg: grunt.file.readJSON('package.json'), | |
// Watch | |
watch: { | |
options: { | |
cwd: 'httpdocs/' |
module.exports = function(grunt) { | |
// Project configuration. | |
grunt.initConfig({ | |
pkg: grunt.file.readJSON('package.json'), | |
// Watch | |
watch: { | |
options: { | |
cwd: 'httpdocs/' |
/* | |
* 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`?? |
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.
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 |