Dean Sofer ProLoser

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

Intro

Setup GitHub Pages "gh-pages" branch as a subfolder within the "master" project on your local checkout.

IMPORTANT

If you plan on switching between different branches (e.g. git checkout master-experiment then revert back with git checkout master) you will loose your child folder from this tutorial (because it's in your .gitignore and is not part of your master branch).

Code Complexity Anti-Patterns

This document is designed to illustrate different examples of code complexity I've encountered and potential solutions to combat it. Code complexity can keep changing through the lifecycle of code, but one of my primary goals I try to keep in mind above all else is refactorability. No matter what, code will eventually become dated and need refactoring. Documentation, organization, cleanliness, unit tests are all aspects that help contribute to refactorable code. While quick prototypes and one-time use codebases will typically not be as concerned with code quality and complexity, long-lasting applications and libraries should be mindful of some of these anti patterns and work to reduce them when possible.

All of these are my own opinion and should not be treated as rules, just as suggestions.

In alphabetical order:

Class Abuse
Copy-Pasta
Deep Stack Traces

	<?php
	/**
	* Provides counter cache behavior for HABTM records.
	*
	* Example: Posts habtm Tags and tags table contains post_count field
	*
	* class Post extends AppModel {
	* var $name = 'Post';
	* var $actsAs = array('HabtmCounterCache');
	* var $hasAndBelongsToMany = array('Tag');

	<!DOCTYPE html>

	<!-- Helpful things to keep in your <head/>
	// Brian Blakely, 360i
	// http://twitter.com/brianblakely/
	-->
	<head>

	<!-- Disable automatic DNS prefetching.

	module = angular.module 'ui.directive'

	module.directive 'virtualRepeat', ->
	transclude: true
	compile: (element, attributes, linker) ->
	(scope, element, attributes, controller) ->
	expression = attributes.virtualRepeat
	match = expression.match(/^\s(.+)\s+in\s+(.)\s*$/)
	if not match then throw Error "Expected virtualRepeat in form of '_item_ in _collection_' but got '#{expression}'."
	[throwaway, key, value] = match

	<h1>Alert</h1>
	<p>Bootstrap JS</p>
	<div class="alert fade in">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
	</div>

	<p></p><a ng-click="alert=true">Open Alert (AngularJS)</a></p>
	<div class="alert fade" ng-class="{in:alert}">
	<button type="button" class="close" ng-click="alert=false">×</button>

	/*!
	* gulp
	* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
	*/

	// Load plugins
	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	cssnano = require('gulp-cssnano'),