zspecza

Stylus Best Practices

Introduction

This is a curated set of conventions and best practices for Stylus, an expressive, dynamic, robust and advanced CSS preprocessor. Frustrated with there not being a set of conventions set in place (that could be easily found), I set forth to find out on my own.

miguelmota

function endAll(transition, callback) {
  var n = 0
  transition.each(() => ++n)
    .each('end', () => (!--n && callback.apply(this, arguments)))
}

// Usage
// d3.selectAll('g').transition().call(endAll, allDone)

ghinda

// takes a {} object and returns a FormData object
var objectToFormData = function(obj, form, namespace) {
    
  var fd = form || new FormData();
  var formKey;
  
  for(var property in obj) {
    if(obj.hasOwnProperty(property)) {
      
      if(namespace) {

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

peterpham

(function(){
	var text = "Happy Birthday, Steve!",
		length = text.length,
		chr = 1,
		ar = text.split(),
		today = new Date();
	try {
		if (window.console) {
			if (console.clear && console.log) {		
				if (today.getDate() === 17 && today.getMonth() === 2) {