Jaime Guamán jaimeguaman

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?

Note: Up to date version now at https://github.com/lukehoban/es6features

ECMAScript 6

Introduction

ECMAScript 6 is the upcoming version of the ECMAScript standard. This standard is targetting ratifcation in December 2014. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

See the draft ES6 standard for full specification of the ECMAScript 6 language.

ES6 includes the following new features:

HTML5 paste image to page

Using a simpel javascript code found on gist.github.com I have made simpel demo showing how you can paste images on the computer clipboard into HTML elements and save their info as dataURL

A Pen by Sten Hougaard on CodePen.

License.

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

	<!-- iPhone 6 Plus -->
	<link href="startup-image-1242x2148.png"
	media="(device-width: 414px) and (device-height: 736px)
	and (-webkit-device-pixel-ratio: 3)"
	rel="apple-touch-startup-image">

	/**
	* Traditional solution: For-loop usage
	*/
	function buildEpisodes(markers)
	{
	var result = [],i, newEpisode;

	if (markers && markers.length > 0) {
	for (i = 0; i < markers.length; i++) {
	newEpisode = makeEpisode(markers[i]);

	// Usage:
	// get_id_by_slug('any-page-slug');

	function get_id_by_slug($page_slug) {
	$page = get_page_by_path($page_slug);
	if ($page) {
	return $page->ID;
	} else {
	return null;
	}

	/**
	* Implement a tryCatch() method that logs exceptions for method invocations AND
	* promise rejection activity.
	*
	* @param notifyFn Function callback with logging/exception information (typically $log.error )
	* @param scope Object Receiver for the notifyFn invocation ( optional )
	*
	* @return Function used to guard and invoke the targeted actionFn
	*/
	function makeTryCatch( notifyFn, scope )

	<?php
	$file = '/path/to/file.png';
	$filename = basename($file);

	$upload_file = wp_upload_bits($filename, null, file_get_contents($file));
	if (!$upload_file['error']) {
	$wp_filetype = wp_check_filetype($filename, null );
	$attachment = array(
	'post_mime_type' => $wp_filetype['type'],
	'post_parent' => $parent_post_id,

	// there is a solution for jQuery < 1.9.0, where you can use `$.browser`:
	// https://gist.github.com/nathansmith/950767

	// but jQuery removed `$.browser` in version 1.9.0, so you have to get another way:

	function last_child() {
	if (/msie [1-8]{1}[^0-9]/.test(navigator.userAgent.toLowerCase())) {
	$('*:last-child').addClass('last-child');
	}
	}