Serge Gusarov misterserge

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?

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

	//Пример фрагмента .htaccess (из плагина FastestCache) для решения ошибки "Задайте правила эффективного использования кеша для статических объектов" в PageSpeed
	//это просто пример! не копируйте его на свой сайт!
	//в данном примере задано время кеширования 1 Год
	// обычно это даёт + 2-4 балла по PageSpeed
	//© Калинский Евгений aka seojacky (https://t.me/big_jacky)
	//По вопросам оптимизации сайтов по требованиям PageSpeed пишите в Telegram https://t.me/big_jacky

	# BEGIN LBCWpFastestCache
	<FilesMatch "\.(webm\|ogg\|mp4\|ico\|pdf\|flv\|jpg\|jpeg\|png\|gif\|webp\|js\|css\|swf\|x-html\|css\|xml\|js\|woff\|woff2\|otf\|ttf\|svg\|eot)(\.gz)?$">
	<IfModule mod_expires.c>

	<IfModule mod_expires.c>

	ExpiresActive on
	ExpiresDefault "access plus 1 month"

	# CSS
	ExpiresByType text/css "access plus 1 year"

	# Data interchange
	ExpiresByType application/atom+xml "access plus 1 hour"

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Sanitize HTML with jQuery</title>
	</head>
	<body>
	<h1>Sanitize HTML with jQuery</h1>
	<h2>HTML Code</h2>

	##shortcuts
	alias s='git status'

	# Easy Navigation
	alias ..="cd .."
	alias ...="cd ../.."
	alias p="cd ~/practices"
	alias w="cd ~/workspace"

	# Tools

	/*
	* Lets you use your browser's back/forward buttons for in-page navigation by
	* adding custom 'next' and 'previous' events to the window object.
	*
	* Copyright (c) 2011 Tobias Schneider <[email protected]>
	* This script is freely distributable under the terms of the MIT license.
	*
	* Example:
	*
	* window.addEventListener('next', function(){

	#GOKULKRISHH
	Host github.com
	HostName github.com
	User git
	IdentityFile ~/.ssh/id_rsa

	#WORK
	Host github.com
	HostName github.com
	User git

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simple Inheritance in JS</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	//Class A

	{
	"cssconf": {
	"location": {
	"date": "September 12, 2014",
	"country": "Germany",
	"city": "Berlin",
	"venue": "Radialsystem V",
	"lat": 52.51039,
	"long": 13.42864
	},