BPScott

Investigating CSS Classname minification

I saw a twitter conversation today making reference to performance savings based on minifying classnames, like what Google's GWT does.

I reckoned that the number of bytes saved would be negligble and thus this technique is not worth the hassle of implementing.

I should probably put that claim to the test...

BPScott

// ----
// libsass (v3.1.0)
// ----

$some-list: (item1, item2, item3);

@mixin someMixin($first, $second, $third) {
 .mixin-variables-proving-the-mix-ca{
   content: '#{$first}, #{second} #{third}';
 }

BPScott

// ----
// libsass (v3.1.0)
// ----

$some-list: (item1, item2, item3);

@mixin someMixin($first, $second, $third) {
  /* Should have  content: 'item1, item2, item3'; */ 
  .prove-the-mixin-can-access-its-args{
   content: '#{$first}, #{$second} #{$third}';

BPScott

// ----
// libsass (v3.2.5)
// ----

// An example of adding named ranges support to Sass-mq

@import "mq";

// These are the mq defaults but, we'll add them here
// so you can easily see what is going on

BPScott

// ----
// libsass (v3.2.5)
// ----

// An example of adding named aliases support to Sass-mq.

// Sass-mq is great for building out a single media query declaration. Much of 
// the time though you don't use a declaration just once, you use it throughout
// your Sass codebase. Writing out potentially complex declarations multiple
// times may lead to mistakes, and if you need to change the query then you have

BPScott

// ----
// libsass (v3.2.5)
// ----

// Sass is really dumb about creating literal backslashes, such as when
// creating codepoints for icon fonts.
// This works in LibSass 3.2 and Ruby Sass 3.4

@mixin icon-content($codepoint) {
  content: #{"\"\\"}#{$codepoint + "\""};

BPScott

// ----
// libsass (v3.2.5)
// ----

// Sass is really dumb about creating literal backslashes, such as when
// creating codepoints for icon fonts.
// This works in LibSass 3.2 and Ruby Sass 3.4
// Shamelessly pilfered from https://github.com/sass/sass/issues/659#issuecomment-71759457

@mixin icon-content($codepoint) {

BPScott

// ----
// libsass (v3.2.5)
// ----

$items: (
  small: 320,
  medium: 600,
  large: 1008
);

BPScott

So Heroku's Cedar stack supports PHP but they're not exactly proud of it as it's not really mentioned anywhere apart from the Heroku & Facebook apps page

Try it out:

mkdir heroku-php
cd heroku-php
git init
heroku create --stack cedar

echo " index.php

BPScott

#Place in the root of your fuckingawesomesongs.com folder
#I convert the current contents of songs.rb into a one file per song structure
require 'YAML'
require_relative 'lib/songs'

def slugify string
  string.downcase.gsub(/&/, 'and').gsub(/\s+/, '-').gsub(/[^a-z0-9-]/, '')
end

Songs.all.each do |song|