Jeremy McDuffie jmmcduffie

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Answering the Front-end developer JavaScript interview questions to the best of my ability.

Explain event delegation

Sometimes you need to delegate events to things.

Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

Explain how prototypal inheritance works.

	function sendError(message, url, lineNum) {
	var i;

	// First check the URL and line number of the error
	url = url \|\| window.location.href;
	lineNum = lineNum \|\| 'None';

	// If the error is from these 3rd party script URLs, we ignore
	// We could also just ignore errors from all scripts that aren't our own
	var scriptURLs = [

	As asked by John on Twitter: https://twitter.com/johnallsopp/status/383461909640384512

	"wow. Animate change to left via CSS, ~500 paint/reflow events. Animate translateX - 16!"

	Answering here because it's a long response and I'm too slack to have a
	blog/tumble/plus/facebook/myspace.

	NOTE: This answer is out of date. See comment below.

	The easy answer is that changing left causes relayout, which triggers a repaint, while

	/jslint white: true, nomen: true, maxlen: 120, plusplus: true, node: true, /
	/global module:false, /

	'use strict';

	module.exports = function(grunt) {

	grunt.initConfig({

	connect: {

	// See also: http://www.aaronland.info/weblog/2014/09/22/desire/#upload

	function upload_init(){

	$("#upload-form").submit(function(){

	try {

	var photos = $("#photo");
	var files = photos = photos[0].files;

	;(function(handlers) {
	if (!handlers) {
	throw new Error('Nothing to handle');
	}

	document.documentElement.addEventListener('click', function(event) {
	var handler = event.originalTarget.getAttribute('data-handler');
	if (!handler) {
	// nothing to do
	return;

	config.assets.precompile += [

	# precompile any CSS or JS file that doesn't start with _
	/(^inline[^_\/]\|\/[^_])[^\/]*.(js\|css)$/,
	...