davidhund

Contract Killer

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

---

davidhund

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)...

davidhund

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // Watch
    watch: {
      options: {
        cwd: 'httpdocs/'

davidhund

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Watch
        watch: {
            options: {
                cwd: 'httpdocs/'

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

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

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

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

(Living) Styleguide Centered Front-end Development

Based on / Using:

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

Gobal flow

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