phloe

The following outlines a technique combining floating blocks and inline-blocks allowing for fairly interesting layouts without the need to use nested rows and avoids some problems when using pure floats.

The technique itself only uses three classnames:

• combine-layout - defines the containing element.
• break - starts a new row when in floating block context.
• divide - starts off the inline-block context.

jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

dillonforrest

Chaining

Chaining in javascript can come in many forms. Here, I'll discuss method chaining, lazy chaining, and pipelining. My aim is to help me, and maybe you, understand these chaining options. This gist is inspired by Michael Fogus's O'Reilly book 'Functional JavaScript.' Like Fogus's book, I'll assume use of underscore.js as a supplement. If you're interested in functional programming in javascript, I highly recommend Fogus's book.

A quick example

What do I mean by 'chaining'? Let's look over a quick example just to be on the same page. This example uses underscore.js's _.chain method.

function findFruitCosts(groceries) {

izharg

Installation

For this workshop we'll need to create and setup a closed development environment using Vagrant. Once this environment is up and running, we'll install the following components:

• Git
• RVM
• Ruby 2.1.0
• Node.js 0.10

Vagrant Setup

elliottkember

class LayerBrowser

  constructor: (options) ->
    @objects = []
    @restore = options.restore
    @_setup()
    @add options.import if options.import

  add: (object) ->
    @objects.push object

elliottkember

EventEmitter = (require?("./EventEmitter") || Framer).EventEmitter

class AppStateMachine extends EventEmitter

	constructor: ->
		@states = []

	# Start the state machine with the document's hash, or the given route
	start: (name) ->
		@go if document.location.hash then document.location.hash[1..-1] else name

jemgold

# An example with classes building components.
# This stuff is a little fiddly to get set up,
# but once it's working it's great - you can just
# add new instances of the components, and each
# components holds references to all of its
# children. You can set defaults & states for each
# component separately.
#
# (try clicking on the post author, and then on each
# of the comments on a post)

koenbok

#!/usr/bin/env python

"""

Copyright (c) 2014 Koen Bok / Podium BV / framerjs.com

Small web server script that you can drop in and run from every Framer Studio 
project to serve it to the browser over http. This is great if you want to avoid
same origin policy errors in the browser, but also nice to preview it on another
device connected to the same network.

tracker1

Directory structure for JavaScript/Node Projects

While the following structure is not an absolute requirement or enforced by the tools, it is a recommendation based on what the JavaScript and in particular Node community at large have been following by convention.

Beyond a suggested structure, no tooling recommendations, or sub-module structure is outlined here.

Directories

• lib/ is intended for code that can run as-is
• src/ is intended for code that needs to be manipulated before it can be used

soarez

#!/bin/bash

function deploy {
  # Update the rsync target on the server
  rsync \
    -av \
    --delete \
    --delete-excluded \
    $rsync_ignore_list_param \
    $rsync_source/ $target:$rsync_target