Marcelo Ribeiro marcelo-ribeiro

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {

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?

	const list = [
	{ name: "Marcelo Ribeiro", short_name: "tchelo" },
	{ name: "Leonardo Costa", short_name: "leo" },
	{ name: "Victor Tanure", short_name: "vitrola" },
	{ name: "Matheus Oliveira", short_name: "rary" }
	];
	let filteredList = [...list];
	const searchProps = ["name", "short_name"];
	let timeout = null;
	const removeAccents = (text) => { return text; };

	const products = [
	{id: 1, title: "Trim Dress", category: "women", collection: ["new", "featured"]},
	{id: 2, title: "Belted Dress", category: "women", collection: ["featured"]},
	{id: 3, title: "Fitted Dress", category: "men", collection: ["new"]}
	];

	const categories = new Set(
	products.map(product => product.category)
	);

	<ion-header>
	<ion-toolbar color="secondary" [class.show-background]="showToolbar">
	<ion-buttons slot="start">
	<ion-menu-button></ion-menu-button>
	</ion-buttons>

	<ion-buttons slot="end">
	<ion-button>
	<ion-icon slot="icon-only" name="logo-facebook"></ion-icon>
	</ion-button>

-// Example: https://codepen.io/marcelo-ribeiro/pen/OJmVOyW
-const accentsMap = new Map([
-  ["A", "Á|À|Ã|Â|Ä"],
-  ["a", "á|à|ã|â|ä"],
-  ["E", "É|È|Ê|Ë"],
-  ["e", "é|è|ê|ë"],
-  ["I", "Í|Ì|Î|Ï"],
-  ["i", "í|ì|î|ï"],
-  ["O", "Ó|Ò|Ô|Õ|Ö"],

	function filter_ptags_on_images($content) {
	$content = preg_replace('/<p>\s(<a .>)?\s(<img . \/>)\s(<\/a>)?\s<\/p>/iU', '\1\2\3', $content);
	return preg_replace('/<p>\s(<iframe .>.<\/iframe>)\s<\/p>/iU', '\1', $content);
	}
	add_filter('the_content', 'filter_ptags_on_images');

	var getPosition = function (options) {
	return new Promise(function (resolve, reject) {
	navigator.geolocation.getCurrentPosition(resolve, reject, options);
	});
	}

	getPosition()
	.then((position) => {
	console.log(position);
	})

	# Run this in an elevated PowerShell prompt
	<# This script worked on a fresh Windows Server 2012 VM in Azure and the following were the latest versions of each package at the time:
	* Chocolatey 0.9.8.27
	* java.jdk 7.0.60.1
	* apache.ant 1.8.4
	* android-sdk 22.6.2
	* cordova 3.5.0-0.2.6
	* nodejs.install 0.10.29
	#>
	# Note: there is one bit that requires user input (accepting the Android SDK license terms)