Pete & Jed - Leaflet/Require/Backbone/Marionette

Showcasing Refind.in

Rich - Static site generators

The Assemble code I showed is available at:

It’s an attempt to create a simple Dreamweaver-esque template system for updating a small static site (maintained by non-technical friends in an area of the world with bad internet connectivity), with the added benefit of making it easy for them to deploy a production-ready site (optimised images/svgs and minified CSS/JS/HTML etc.).

It only requires node.js (a simple installer) and the Github Mac/Win app (the one with the big “Sync” button); the aim is to have all the advantages of a pretty-powerful development/build tool and version-control, but with as little technical overhead as possible and without costing any money.

Feel free to fork it, pull it apart, use it and push back any changes. Assemble is capable of much more, but I’m just using it for (nested) layouts, partials and pages.

The Gruntfile is here:

A couple of things of note:

  • It uses Stylus and nib to preprocess the CSS to remove any Ruby dependency and to keep the CSS looking as vanilla as possible.
  • It uses grunt-contrib-watch to: generate the HTML, optimise images and processor the CSS whenever a file is changed, but it restricts the task to only the changed file e.g. if an image is changed it will only optimise that image, rather than (as is grunt’s default) all of them.
  • It uses grunt-express to fire-up a development server that comes with it’s own built-in grunt-contrib-watch instance, which I use to livereload any changes in the browser without having to install any browser extensions.
  • It uses grunt-ftpscript to deploy the generated files (as, in this instance, I’m pushing the files to some cheap shared hosting), but it can easily to swapped out—like Matt suggested—for something like s3 hosting.

The package.json is here:

I’ve tried to reduce, as much as possible, the number of moving parts and to find the most stable grunt plugins out there. Please let me know about any alternatives if you know of any better ones.

I’m only half way through building (and styling) the site, so you’ll see more changes in the repo over the next few weeks.

That’s all on assemble and grunt.

Dan, here’s that article I mentioned about just using a CSS preprocessor to take the sharp edges of vanilla CSS:

Basically, I just use a preprocessor for variables, nesting (only for pseudo selectors like :hover and pseudo elements like ::after), and for dealing with vendor prefixes. I like Stylus for this as the syntax is the same as vanilla CSS (i.e. you don’t have to use mixins or any of that @extend gubbins). If you end up using something like SCSS or LESS, it looks like you can avoid using mixins for vendor prefixes by using something like https://github.com/nDmitry/grunt-autoprefixer