PSD to HTML от шеф повара

Как-то давно спрашивали на собеседовании два удавительных чека, а как ты будешь верстать расскажи.

Я созрел!

1. Получаешь макет от дизайнера творителя красоты.

2. Смотришь на него.

Много смотришь. думаешь, потом смотришь, потом думаешь, потом смотришь, смотришь думаешь, думаешь-смотришь. 

Все решил. Надо спросить: а что это за шрифт такой(если не стоковый). Потом какие требования по ширине, устройствам, для чего вообще и какие функции будет выполнять. Учитывать ли мобильные устройства, резинчивость. Браузерностькросс. 

3. Берешь нож и режешь его, режешь, он будет плакать неподдаваться, а ты его режешь, потом куски суешь по пакетам и выкидываешь в мусорку. Чтобы никто. слышите никто не заметил этого позора. 

4. Расчлененку, самую мелкую надо соединить в кашу-спрайт. Варить ее после кипения 5 минут, соль по вкусу.

5. Берешь кости по частям тела. В голову как всегда всякую чушь добавляешь, чтобы получился средний представитель рашки в ватниках.

6. В тело немного гавна интересного, разные секции, блоки бетонные, можно тело разделить на три колонки или на две, чтобы влезло в бак. 

7. Ноги прибей к полу, можно украсить интерьер ближайшего кафе или бара. 

8. Если это был ребенок, то для детей нужно учитывать их ширину и высоту, чтобы дети понимали детей, если у детей хорошее зрение, то увеличить каждый фрагмент в рацио раз. Дети индиго сорта анис или антоновка любят фаргменты увеличенные в два и более раз. 

9. Одежду и их характер можно и желательно постирать всю одежду в один пакет, характер в другой. Существуют крутые преупаковки для этого.

10. Когда каркас готов, можно вспомнить последние слова жертвы, подписать пакеты с частями тела. Добавить красок. Стереть красные пятна.

11. Далее каждый фрагмент желательно сжать прессом или попрыгать на нем чтобы занимало мало места.

12. Вуаля отвезите в лес, поставьте красивую штучку. сайт готов RIP

 

Сайт на всю высоту кроссплатформенно, мобильные, десктопы, лаптопы

Высота именно innerHeight для мобильных и десктопных браузеров.

function calculatedHeight(){   

   height = window.innerHeight;

$('.ваш_блок_контейнер').height(height);     

}  

calculatedHeight();

addListeners();

 

При изменении ширины-высоты окна браузера будем менять размер всему сайту.


$(window).resize(function(){

calculatedHeight();

});

Прятать строку состояния - строку поиска мобильного браузера и при этом делать перерасчет высоты сайта.

if (window.devicePixelRatio !== 1)
	  {		
	    var dpt = window.devicePixelRatio;
	    var widthM = window.screen.width * dpt;
	    var widthH = window.screen.height * dpt;
		document.write('');
	  }

Ширина вьюпорт может быть меньше 700 пикселей, тогда фиксим в зависимости от ширины вашего мобильного браузера, тоже лайфхак скриптом:

 if (window.devicePixelRatio !== 1)
    {
        var dpt = 640 / window.screen.width;

        var widthM = window.screen.width * dpt;
        document.write('');
    }

Получается какой бы ширины не был мобильник(дисплей, рабочая область) всегда вьюпорт будет на всю ширину - ширина браузера * коэффициент. Не знаю почему работает, несмотря на то, что получается просто устанавливается ширина вьюпорта равная 640. Иначе если тупо прописать в хед ширину не работает. Приходится постоянно зумировать-масштабировать, что не есть хорошим тоном(по мнению некоторых). 

Sass открыл

А..еть теперь. Знаю и юзаю сасс писаю кипятком - как же офигенно на нем писать девчата и мальчата. Норм темыч. 

Оно вроде цсс а уже почти как номальный полноценный стилище. 

А оказалось ничего не надо ставить устанавливать только оболочку-прогу руби чтобы конвертировала сасс в ксс и всего делов-то.

Инструкции есть в инете качаешь руби, ставишь на винду. Потом пару строк в консоле, типа проверить установилась ли руби 0 версия. И все пишешь свой файл sass --watch файл.scss:файл.css - лови щастье. Наслаждайтесь миксинами и всеми няшками от саски. 

Валидация input в ng-repeat

Если у вас проблемы с валидацией в Ангуляре, например, цикл в котором несколько полей, не можете решить проблему с одинаковыми именами полей, то супер как подходит директива ng-form, достаточно в ней разместить ваши поля и каждое имя поля, напимер input(type='email', name='email') Простите за синтаксис Jade, становится уникальным, и шикарно проходит валидацию.

Более подробно и четко как у людей изложено тут у скотча:

http://scotch.io/tutorials/javascript/building-dynamic-angular-forms-with-ngrepeat-and-ngform 

Адаптивные img

Чтобы не создавать велосипед для соответствующего отображения изображений на разных устройствах, удобно использовать библиотеку http://scottjehl.github.io/picturefill/

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