John Otander johno

Simple text editing

dd delete line
daw delete current word
caw delete current word, enter insert mode
V highlight line
u undo
ctrl R redo
y copy
p paste

Improving CSS Performance

With a few considerations when typing CSS we can ensure that our CSS is as performant as possible for the end user. These are some concepts I like to keep in mind when typing and analyzing CSS.

Minify and concatenate

One of the biggest factors in loading a web page is network IO, so it’s important to ensure that your CSS has the smallest footprint possible. This starts by concatenating stylesheets into a single file and sending out a minified version over the wire. Concatenation is important because your CSS should only require one HTTPS request. Minification removes unnecessary bytes that results from whitespace formatting when sending to your user.

Decrease the stylesheet size

Jekyll is a great tool for building static sites, however, I often see many projects that are including a lot of unused CSS. Since Jekyll generates an entire working site in the _site directory, we can use it to run uncss. Below outlines an example project using uncss and a build.js script.

Note: this assumes you have node and npm installed.

Setting up the project

Firstly, let's set up the project.

jekyll new uncss-example && cd uncss-example

Recently there's been some discussion on max-width vs min-width media queries in CSS. I'd like to articulate why I think that only min-width adheres to the "Mobile First" philosophy and is a preferable approach.

So, let's first break down what it means to be "Mobile First". This is a term that comes with a lot of baggage and transcends content strategy, culture, design, and much more. I'd like to avoid a lot of that for brevity's sake. For the purposes of this article, "Mobile First" can be boiled down to:

Everything starts with mobile

More or less.

So, how does this relate to media queries?

brew install postgresql                                               # Ensure you're running 9.4+
ln -sfv /usr/local/opt/postgresql/*plist ~/Library/LaunchAgents       # Autostart pg
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist  # Reload config

rvm install ruby-2.1.6  # Make warning stop complaining
gem install bundler
gem install pg
bundle

	# ...

	# Social icons
	show_social_icons: true
	github_username:
	stackoverflow_id:
	twitter_username:
	google_plus_id:
	linkedin_username:
	bitcoin_url:

	/#([a-f]\|[A-F]\|[0-9]){3}(([a-f]\|[A-F]\|[0-9]){3})?\b/
	/rgb\(\s(\d{1,3})\s,\s(\d{1,3})\s,\s(\d{1,3})\s\)$/
	/^rgba?\((\d+),\s(\d+),\s(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
	/^rgba?\((\d+),\s(\d+),\s(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
	/hsl\((\d+),\s([\d.]+)%,\s([\d.]+)%\)/g
	/hsla?\((\d+),\s([\d.]+)%,\s([\d.]+)%(?:,\s*(\d+(?:\.\d+)?))?\)/g

	.u-i-will-be-opened-twice {
	color: yellow;
	}

	.u-actually-immutable-selector {
	content: 'I am not being reopened';
	}

	.awesome {
	font-variant: small-caps; /* Raises linting error (opened vendor.css selector) */

	module BasscssCardHelper
	def bass_card(tag = :div, opts = {}, &block)
	content = capture(&block)
	opts[:class] = bass_card_classes(opts[:class])
	content_tag(tag, content, opts)
	end

	def bass_card_for(tag, record, options, &block)
	content = capture(&block)
	opts[:class] = bass_card_classes(opts[:class])

	class SomeJob
	attr_accessor :some_model

	def initialize(some_model_id)
	self.some_model = SomeModel.find(some_model_id)
	end

	def perform
	some_model.do_stuff
	end