lavezzi1

Это не синтаксис руби
Это синтаксис HAML
Что б в нем разобраться, нужно понимать HTML
Если у вас постоянно нечетное число пробелов, значит вы их или вручную ставите (не табом) или копируете из разных источников.
Вообще, это дело привычки. Если неудобно, используйте обычный ERB. С помощью, например, - https://github.com/haml/html2haml - можно перевести все HAML в ERB

Это потому, что у старых постов нет пользователя, который их создал. Либо через консоль добавь им user.id, либо просто очисти БД от всех записей.

Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
Заменяем длинный текст placeholder многоточием:

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}

Скрываем placeholder при фокусе:

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Курсор для label + отмена раздражающего выделения при клике:

label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Только вертикальный ресайз для textarea (horizontal часто ломает диз):

textarea {
	resize: vertical;
}

Убираем дефолтный курсив у address:

address {
	font-style: normal;
}

Убираем подсветку полей:

input:focus,
textarea:focus {
		outline: none;
}

Адаптивные img:

img {
	height: auto;
	max-width: 100%;
	width: auto\9;
}

Адаптивные видео:

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Перенос слов:

.break-word {
        word-wrap: break-word;
}

Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

Нумерованный список с подпунктами:

ol {
	counter-reset: list1;

	li:before {
		counter-increment: list1;
		content: counter(list1) '. ';
	}

	ol {
		counter-reset: list2;

		li:before {
			counter-increment: list2;
			content: counter(list1) '.' counter(list2) '. ';
		}

		ol {
			counter-reset: list3;

			li:before {
				counter-increment: list3;
				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
			}
		}
	}
}

update дополнительно стили для печати

P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.

Выделить конкретную задачу и тратить на нее какое-то четко определенное количество времени в день. Таких задач в течение дня может быть несколько.
Например:
Я учу испанский 1 час в день, но каждый день. Чтобы закрепить привычку нужно это действие повторять в течение 21 дня, дальше без этой привычки уже даже как-то некомфортно начинаешь себя чувствовать.

>как успевать читать, практиковаться программировать и учить язык

Нет смысла делать это по отдельности. Приведу пример, как делаю сам.
1) Ищем туториал (пошаговое создание чего-нибудь), проходим, попутно улавливая основы.
2) Делаем что-то свое, глядя в доки, гугля и т.п.
Потом уже можно и книжки более глубокие почитать для большего понимания.

Вы наверное слышали, что каждый уважающий себя программист обязан написать несколько велосипедов? И JavaScript-программисты тоже так делают и еще как! Так вот в этом нет ничего плохого, это отличное самообучение.

Для начала заходите на любой каталог плагинов для JavaScript или jQuery. Находите интересный, не очень сложный на вид плагинчик (например карусель, лайтбокс, слайдер и т.п.) и пытаетесь сделать похожий, только лучше. Поначалу будет выходить черти что, но, это будет уже реальная задача, где вы начнете сталкиваться с реальными особенностями языка. Вот тут то знания и начнут обретать какую-то структуру у вас в голове.

Не пытайтесь брать сразу сложные вещи, начинайте с малого. Как заметили выше, не смотрите пока что на очень сложные книжки, их читать сейчас почти бесполезно.