Bruno Pulis brunopulis

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?

Module 1

Semantic markup
HTML standards mode and quirks mode
HTML fundamentals
- Classes and IDs
CSS fundamentals
- Selectors
- Resets and normalizers
- The box model

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

Métodos de iteração de Array

Adaptação do fork: (https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff)

Ao tentar explicar como o Javascript usa seu métodos para arrays, acabei reunindo esses conceitos. Espero que Seja util. Ficarei feliz com qualquer sugestão.

Introdução

O Objet Array no Javascript tem muitos métodos construidos no seu prototype. Alguns deles modificam o proprio array passado. Felizmente, a maioria não, eles retonar um novo array inteiramente distinto. Uma vez que arrays são conceitualmente uma lista de itens, ajuda na clareza do código e sua manutenção a ponto de ser capas de operar de uma forma mais "funcional" . (Eu insisto em refrenciar um array como uma "Lista" - embora em algumas linguaguens de programação, Lista é um tipo de dado nativo, mais em JS e nesse POST, estou me referindo ao conceito. Em todos os lugares que eu usar a palavra "lista" você pode assumir que eu estou falando de JS Array) Isso siginifica, para a execução de uma simples operação na Lista como um

	Use: for testing against email regex
	ref: http://codefool.tumblr.com/post/15288874550/list-of-valid-and-invalid-email-addresses


	List of Valid Email Addresses

	[email protected]
	[email protected]
	[email protected]
	[email protected]

	<?php
	// Insert into your functions.php and have fun by creating login error msgs
	function guwp_error_msgs() {
	// insert how many msgs you want as array items. it will be shown randomly (html is allowed)
	$custom_error_msgs = [
	'<strong>YOU</strong> SHALL NOT PASS!',
	'<strong>HEY!</strong> GET OUT OF HERE!',
	];
	// get and returns a random array item to show as the error msg
	return $custom_error_msgs[array_rand($custom_error_msgs)];

	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

	<ol class="carousel-indicators">
	<?php
	$args = array(
	'post_type' => 'slides1',
	'orderby' => 'menu_order title',
	'order' => 'ASC',
	);
	$query = new WP_Query( $args );

	@function random-image ($width: 400, $height: null) {
	$height: if($height, $height, $width);
	$size: $width + "/" + $height;
	$src: "https://unsplash.it/" + $size + "/?random=" + random();
	@return url($src);
	}

	import csv
	import re
	from os import listdir
	from os.path import isfile, join


	def main():
	folder = './logs'
	onlyfiles = [f for f in listdir(folder) if isfile(join(folder, f))]
	log_files = filter(