Pavel Tchaikovsky chayn1k

Вводная часть

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.
Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые применяются на теги без классов будут работать на все вообще.

Соответственно наз

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Working with CentOS

Working with PHP CLI: https://gist.github.com/hofmannsven/9976152

Setup

User setup (for .bash_profile, .gitconfig,...): cd ~

Command Line Crash Course

Related tutorial: http://cli.learncodethehardway.org/book/

CodeCademy: https://www.codecademy.com/courses/learn-the-command-line

Official cheatsheet: http://cd64.de/linux

Note: Hold option (alt) and click a position in the current line to move your cursor to that position.

tmux shortcuts & cheatsheet

start new:

tmux

start new with session name:

tmux new -s myname

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

#Four Ways To Do Pub/Sub With jQuery and jQuery UI (in the future)

Between jQuery 1.7 and some of work going into future versions of jQuery UI, there are a ton of hot new ways for you to get your publish/subscribe on. Here are just four of them, three of which are new.

(PS: If you're unfamiliar with pub/sub, read the guide to it that Julian Aubourg and I wrote here http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx)

##Option 1: Using jQuery 1.7's $.Callbacks() feature:

$.Callbacks are a multi-purpose callbacks list object which can be used as a base layer to build new functionality including simple publish/subscribe systems. We haven't yet released the API documentation for this feature just yet, but for more information on it (including lots of examples), see my post on $.Callbacks() here:

Sublime Text 2 – Useful Shortcuts (PC)

Loosely ordered with the commands I use most towards the top. Sublime also offer full documentation.

Editing

Ctrl+C	copy current line (if no selection)
Ctrl+X	cut current line (if no selection)
Ctrl+⇧+K	delete line
Ctrl+↩	insert line after

	[-] generic bindings
	View switching
	'm' view-main Show main view
	'd' view-diff Show diff view
	'l' view-log Show log view
	't' view-tree Show tree view
	'f' view-blob Show blob view
	'B' view-blame Show blame view
	'H' view-branch Show branch view
	'h' view-help Show help page

	/**
	* Track JS error details in Universal Analytics
	*/

	function trackJavaScriptError(e) {
	var errMsg = e.message;
	var errSrc = e.filename + ': ' + e.lineno;
	ga('send', 'event', 'JavaScript Error', errMsg, errSrc, { 'nonInteraction': 1 });
	}