Привет верстальщикам! Эту неделю с вами @akella. Верстаю что попало уже 10 лет и никак не могу остановиться. Блог cssing.org.ua

Сейчас я верстаю в команде крутых перцев riverco.de, в Киеве, а на этой неделе расскажу все что знаю и что спросите о верстке и моделях.

@cssunderhood @akella крутяк, лет 7 тому назад много клевых фишек в твоем блоге подглядел.

.@janitor42 спасибо что напомнил какой я старпер! Пойду наверну вискаря :) Но рад что пригодилось ;)

Когда-то я верстал kremlin.ru, по образованию я математик, вся моя семья теперь "россияне", я люблю подраться в Injustice

Начну с Bootstrap, и вот отличная статья про него gist.github.com/iAdramelk/d328… TL;DR: в 90% случаев бутстрап говно.

@cssunderhood странный вы, где-то сказано - бутстрап универсален для 100% сайтов? Это как сказать - говно ваша лопата, у меня есть микроскоп

.@stewardtz не сказано, но де факто начинающие его используют для всего, и заказчики просят везде. Потому такие радикальные слова :)

@cssunderhood Какой грид сеткой пользуешься и юзаешь ли Флексбокс сетки?

.@smithua Обычно никакую, редкий дизайн сделан по какой-то сетке, проще написать кастомную для сайта. Флексбоксы - крайне редко, где можно

@cssunderhood @stewardtz Один раз я верстал полную тему BS, заказчик решил, что верстать будут программисты. Через полгода переписал проект.

@cssunderhood Бутстрап неплохо решает свою задачу. Просто не надо делать на нём сайт с дизайном, для этого он не подходит.

@cssunderhood @jsunderhood Подскажу всем тему. Есть позиция заказчика - зачем внедрять новые технологии, если старый код приносит деньги?

.@dshster @jsunderhood мой ответ - если технология не принесет денег (поддержка, ценность) - внедрять нет смысла. Разве что для себя.

@cssunderhood откуда сейчас приходят клиенты в Coderiver (если не секрет)? Какой процент постоянных заказчиков?

.@neonick большая часть это те с кем я работал когда еще был фрилансером, 90% постоянные заказики

@cssunderhood пробовал Gulp/Webpack/PostCSS? Используешь в бою?

.@neonick Сейчас используем в команде два бойлерплейта: github.com/coderiver/sass для простых и github.com/coderiver/gulp для посложнее

@cssunderhood на PostCSS планируете переходить?

.@artem_lp Я в том лагере который считает что Autoprefixer + Sass лучше чем PostCSS =) потому выбираю эту связку. Формально PostCSS юзаю, да

@cssunderhood как убеждаешь заказчика отказаться от бутстрапа?

.@artem_lp Обычно спрашиваю "Что именно вам нужно из бутстрапа". Как правилно никто не знает что ответить ;-) #lifehack

@cssunderhood Что думаешь об MCSS?

.@borodean идея хорошая, но слишком специфичная как по мне, тут уж дело вкуса :)

@cssunderhood @jsunderhood тогда зачем ангуляры, вебпаки, постксс и прочее, если старинный jquery и php5 будут еще лет 10 приносить деньги?

.@dshster @jsunderhood Они экономят время(=деньги) в поддержке и разработке. Что и есть прямая финансовая выгода.

.@neonick например из-за Sass синтаксиса, без точек с запятой. PostCSS все еще недоSass.

@cssunderhood jade\stylus не используете? почему?

.@gearmobile в stylus не вижу особо смысла по сравнению с Sass, а Jade в некоторых проектах используем, тут уже дело вкуса :)

@cssunderhood что думаете по поводу этого шаблона - github.com/CSSSR/csssr-pr… ?

.@gearmobile думаю что любой шаблон отличный если он для вас работает :) Фич там много не уверен что лично мне бы такой подошел. Люблю тупые

@cssunderhood если Бутстрап зло, то что можете посоветовать взамен?

.@dcromster он не то чтобы зло, он просто для узкого круга задач с которым мало кто сталкивается. Вам для чего бутстрап?

@cssunderhood мгновенное создание прототипов чуть ли не в браузере с респонсивность, для миниадминок ииииии все. Дальше батхерт

@cssunderhood внутренности сайтиков делаю: панели управления

.@dcromster тогда бутстрап как раз для вас, просто у большинства другие задачи в фронтенде =)

@kipruss а для "обычных сайтов" что порекомендуете? @cssunderhood

.@dcromster @kipruss мне кажется ничего, они настолько разные что разве что бойлерплейт порекомендую сделать под свои задачи.

@cssunderhood многие говорят float зло, а как считаешь ты? Тесты проводил или может быть видел, по поводу понижения производительности?

.@n0r8 мечтаю получить проект где это хоть станет иметь значение :) Потому пока не заморачивался. Интуитивно кажется не зло

В этот осенний вечер предлагаю поделиться вашими любимыми бойлерплейтами, вот например мой простой вариант,без gulp github.com/coderiver/sass

@cssunderhood Gulp/Jade/PostCSS github.com/neonick/gagarin

@cssunderhood gulp/jade/sass/postcss/iconfont github.com/gatilin222/sup…

@cssunderhood github.com/StarterSquad/n…

@cssunderhood github.com/nikbelikov/and…

Не могу не посоветовать Genymotion genymotion.com для тестирования всяких неприятных версий андроидов. А что вы используете?

@cssunderhood saucelabs, browserstack

@cssunderhood
видел вы пишите много модульного скрипта, используете coffeescript,snap.sng и т.д. Зачем это все, нельзя проще или интерес?

.@Aleksandr46 во-первых интерес, во-вторых в некоторых проектах без этого можно застрелиться

Меня больше всего удивляет в коллективных аккаунтах (@jsunderhood @cssunderhood и тд) – откуда у людей время целую неделю сидеть в твиттере?

.@Omgovich @jsunderhood я уже 8 лет в твиттере, посидеть еще всего одну неделю not a big deal! =)

@cssunderhood расскажи, пожалуйста, какие у тебя стадии разработки? Там: HTML, CSS, js, валидация, тест(в чем/как)?

.@baxazar_ сначала я обычно пишу html, потом нарезаю картинки, потом пишу CSS, потом JS. Ну а тестирование в конце

@cssunderhood раскрывай тему тестирования.

.@makingoff_name так как обычно я делаю UI то в 90% это просто сравнение с макетом, Pixel Perfect для Chrome отличный например

@cssunderhood
а в чем была сделана триангуляция для html css ... (значения для clip-path: polygon в riverco.de)

.@Aleksandr46 это было сделано в иллюстраторе, а затем экспортировано в sass: take.ms/6o0Vh анимация: take.ms/5v2ya

Вообще обожаю всякие нестандартные CSS приемы, как тут например species-in-pieces.com разбираться в таких решениях - кайф!

или вот еще необычный прием, codepen.io/flacu/full/BoL… попробуйте догадаться как такой переход можно было сделать без JS =) #chrome

.@POS_troi я сам в коде копался, кратко суть: -webkit-clip-path вырезает треугольник, transition анимирует его в новые координаты

а еще люблю этот проект css1k.net там порой бывают совершенно очаровательные приемы

@cssunderhood Кстати, есть статья, где автор рассказывает, как он создавал это чудо: css-live.ru/articles/sozda…

Сегодня буду делиться утилитами для оптимизации труда, номер один для меня Alfred, вот например лайхаки на него github.com/zenorocha/alfr… #mac

Вот лишь половина из тех что использую я для себя, это и FTP, и работа с Github, и часовой пояс, и todo #lifehacks pic.twitter.com/0tfSHk0Uyv

@cssunderhood В копилку github.com/zhaocai/alfred…

@cssunderhood кстати, разочаровался в конец багнутым spotlight в новом el capitan и думаю тоже на альфреда переходить

.@_nikbelikov я ни разу не пожалел что купил powerpack ;-) вот пара линков для начала packal.org alfredforum.com/forum/3-share-…

@cssunderhood как пользуешься продуктами adobe ? creative cloud?

.@gatilin2222 да, 10$ в месяц, и у меня легальный фотошоп, и нет головной боли.

Еще одна отличная вещь в верстке CSS Hat csshat.com, он достает стили для слоя в psd: тени, градиенты, радиусы, шрифт

@cssunderhood ми випускаємо кожного тижня Front-end digest - codeguida.com/post/376/ Будемо вдячні за ретвіт! pic.twitter.com/0JH1VqkWnf

Следующий инструмент Avocode avocode.com, половина команды подсела. Позволяет работать с .psd .sketch на Mac/Windows/Linux

@cssunderhood осталось сделать так, чтобы диз изображал нужные элементы отдельными слоями, а не подложенным скриншотом, например.

.@rimmer333 Это правда, но для этого и изобрели биты, кастеты, молотки, утюги и плоскогубцы

@cssunderhood он прям любые макеты корректно отображает? что насчет артбордов и других новейших фич Ph CC?

.@_nikbelikov артборды скетча отображает корректно, а с фотошопом могу проверить если дадите файл, пока не приходилось :)

@cssunderhood @meuwka Avocode формат? достаточно .psd evernote.com/l/AFooTJdcyplE…

@c01nd01r @cssunderhood на некоторых макетах это не срабатывает. Приходиться делать из Фотошопа. А так да - 95% загружаются через дроп.

@cssunderhood Со скетч без самого скетча под windows сможет?

.@SilentImp Пока нет, надо экспортировать из Sketch, но вот .psd без Фотошопа Avocode уже умеет.

@cssunderhood а какие есть способы работать со sketch из windows?

.@SilentImp 1) просишь кого-то на маке экспортнуть в Avocode 2) сохранить как pdf и верстать из него 3) ждем конкурента Avocode, Zeplin?

@meuwka @kqxsr @cssunderhood В каждом треде Avocode нужно упомянуть про Adobe Extract

.@c01nd01r @SilentImp @meuwka @kqxsr схожий, но пользоваться для верстки неудобно

@cssunderhood Вебшторм или Атом? :-)

.@borodean отвечу своей любимой цитатой Миямото Мусаси на эту тему ;) pic.twitter.com/wSXmpk46Ar

@cssunderhood @SilentImp зеплин элементарные вещи ещё не умеет. Интерлиньяж, цвет в буфер скопировать, ассеты не распознаёт многие.

Еще мои must-have утилиты: monosnap.com colorsnapper.com gitboxapp.com macbartender.com Hazel, Livereload

А чем клевым пользуетесь вы, что упрощает вам жизнь? :) Делитесь ради уменьшения всемирной верстальщицкой энтропии

@cssunderhood Бартендер и Колорснаппер тоже использую. Моноснап → Клаудапп. Лайврелоад → Браузерсинк. Гитбокс → Гитхаб Десктоп + git.

@cssunderhood Моноснап → Дроплер

@cssunderhood, snappy-app.com, theolabrothers.com

@cssunderhood оставляет скриншот выделенного блока поверх всех окон, чтобы сравнивать размеры, тени и т.д. pic.twitter.com/SQkmeYEXc3

@cssunderhood Adobe Extract - бесплатная альтернатива Avocode. Я Adobe Extract часто пользуюсь и доволен.

@cssunderhood Кстати, специально для сексистов плохая новость insider.pro/ru/article/484… :)

.@psyw не страшно! какие уж тут плейбои после моих верстальщиц-учениц instagram.com/p/iAEkWgC62L/?… ;-) они дома, теплые и в 3d!

@cssunderhood Sip — прикольный бесплатный колорпикер. CodeKit для вёрстки лэндингов и прочего фриланса.

PostCSS 5.0.10 is out with small fix for developing postcss-js to integrate PostCSS and React CSS-in-JS pic.twitter.com/VRK0qh6JYI

Как вы научились верстать? Меня вот из общаги выселили, и я читал "HTML для чайников" и распечатал весь alistapart.

@cssunderhood компания делала набор амбициозных чуваков, которых учила, и потом заставляла работать. За 2 мес научили тому, чему на курсах..

@cssunderhood учился на htmlacademy + codeacademy, потом курсы loftschool и уроки на loftblog.

@cssunderhood Вот в этой пресловутой статье я когда-то описывал свой путь: css-live.ru/faq/put-versta…

@cssunderhood Евгений Попов :(

@cssunderhood Основы вёрстки показал знакомый + прочитал книгу "HTML, CSS, Скрипты" Ломова + почти сразу начал пытаться фрилансить :)

@cssunderhood Курсы Евгения Попова. /s

А какие курсы для верстальщиков среднего уровня? :) Мне вот очень нравится подача от Виталий @smashingmag Фридман, потрясающий докладчик :)

@cssunderhood Когда-то в школе учили HTML, затем, вроде книга Майера и понеслась...

@cssunderhood htmlbook + htmlacademy. Потом freePSD верстала. Дальше - месячная стажировка и первый реальный опыт работы. Всегда все сама.

@cssunderhood как грамотно сверстать такой косой background у секции - imgur.com/apiwgmE ?

.@gearmobile :before{transform: rotate}?

@cssunderhood курсы @htmlacademy_ru, codecademy, даже на курсы "специалист" сходил)

@cssunderhood HTML изучал по статьям в «Подводной лодке». По-настоящему верстать научили в Мэйле ;-)

@cssunderhood читал кучу западных блогов + alistapart + smashingmagazine

@cssunderhood в локальной сети поднял сайт на phpfusion и форум на ipb, стандартные темы были не торт :-)

@cssunderhood я случайно скачал сайт и открыл блокнотом.

@pepelsbey @tachisis @cssunderhood поддерживаю, ALA и webmascon. За счастье было еще и переводить для него.

@cssunderhood а чем делать макеты анимации, перед кодингом? Я вот вчера в ae фигарил, но может есть что-то более распространеное?

.@Bidin мне вот в Pixate присылали последнее время, например

@cssunderhood самый большой прорыв в обучении был в 2006 году когда на полгода застрял на больничном со сломанной ногой. Накупил книг. :-)

Какие психологические трюки использовать чтобы не делать верстку в последний момент? :) Кто-то победил это вообще?

Я вот смирился и использую режим турбоскорости, заранее в голове верстаю, и просто быстро записываю код в редактор в последний день.

@cssunderhood 2 дня думаю и прокрастинирую, затем 2 часа делаю... ПРОФИТ! Не знаю как по-другому настроиться.

@cssunderhood можно смотреть на это не как на прокрастинацию, а как на подготовку рабочего окружения и планирование архитектуры :)

@cssunderhood ну бюрошный подход ля меня хорошо работает ksoftware.livejournal.com/202173.html

@TheSunwave @cssunderhood самая большая лажа в том, что если бы начал делать сразу - делал бы 2 дня!!!

@cssunderhood разбиваю предполагаемый объем работы на этапы - выполнение каждого дает некое чувство удовлетворения :) и стимул продолжать

@cssunderhood Включаешь музыку, посылаешь всех на хў что бы не отвлекали и делаешь. Ах да надо твитер приложение закрыть еще.

Для @cssunderhood и @jsunderhood в копилку: github.com/sindresorhus/a…

@cssunderhood не затягивать. Если начинаешь откладывать, то через некоторое время уже просто попадает интерес и радость верстать проект.

почему-то не всем еще известный хак для сохранения пропорций блока alistapart.com/d/creating-int… однажды спасет вам жизнь ;-)

@cssunderhood а что обычно делает верстальщик ДО последнего момента?

.@ardshock не знаю как вы, а я как-то так провожу время instagram.com/p/re66VFC6wV/?… instagram.com/p/oGUcRWi60s/?…

@cssunderhood Вот эта штука давным-давно в бутстрапе. getbootstrap.com/components/#re…

@cssunderhood в некоторых проектах использовал решение nicolasgallagher.com/flexible-css-c… Тоже самое, только под стандартные пропорции.

@cssunderhood, довести себя этим, приуныть, переосмыслить своё поведение и больше так не делать.

slick.js, swiper.js для каруселей, scrollmagic для параллаксов, greensock для сложных анимаций и сцен. А как у вас? :) Что в обиходе?

@cssunderhood pedroduarte.me/wallop/ для мелких каруселей, и flickity.metafizzy.co для сложных

@cssunderhood в основном огромный опыт велосипелов. Хотя карусели последнее время тоже часто slick.js

@Bizi @cssunderhood @jsunderhood codekit, hammer for mac, browsersync, localtunnel.me

@cssunderhood А никаких трюков нет здесь, просто нужно честно описать заказчику ситуацию, и постараться увеличить строки:)

@cssunderhood фоточки fotorama.io, попапы github.com/dimsemenov/Mag…, рейндж слайдер refreshless.com/nouislider/

@cssunderhood верстка — единственная известная мне техническая область, где слово «хак» имеет подожительный оттенок

@cssunderhood а чем делаете кастомные элементы форм? (вопрос к тебе и ко всем)

@cssunderhood animate.css

@cssunderhood как-то owl carousel никто не упомянул…

@neonick @cssunderhood для селектов использую chosen.js

.@neonick для меня 1.3, а для вас?)

@cssunderhood Верстаешь сам? Ты оценил, что на проект понадобится X времени, заказчику называешь X × N. Какой лично для тебя коэффициент N?

@neonick @cssunderhood Своё - github.com/chemistry-temp…, github.com/chemistry-temp…, github.com/chemistry-temp…. Еще для селектов - Selectordie

@neonick @cssunderhood вот такой есть плагин, может пригодится psd2html.com/js-custom-form…

@neonick @cssunderhood Кстати я собрал демо, где эти формы можно "потрогать" - chemistry-template.github.io/examples.html. Основной их плюс - работают без JS

@asktwi @cssunderhood Я честно не понимаю зачем разрабы отказываются от jquery...

Объявляю день полезных миксинов, начну с одного старого gist.github.com/akella/b7d6e48… насильно делает перенос в слишком длинных словах

@cssunderhood sass mixin for arrows gist.github.com/gatilin222/bf2…

Еще два простых миксинчика: justify для inline-block и вертикальное центрирование для них же: gist.github.com/akella/f2902ab… Делитесь и своими :)

@cssunderhood миксины решают RTL просто ужасно, тут надо RTLCSS использовать github.com/MohammadYounes…

а это просто забавные css трансформации на которые можно залипнуть codepen.io/DennisCalvert/…

ужасно простой, но ужасно полезный сниппет для саблайма i.imgur.com/4S7KaiK.png gist.github.com/akella/9757676

@pepelsbey @cssunderhood Семантические теги ничего не дают, кроме проблем со встроенными стилями. Семантическая вёрстка - утопия.

@freiksenet_ru @cssunderhood, ресеты для встроенных стилей; польза для поисковиков, читалок (a11y), др. роботов и для читабельности кода.

прекрасный универсальный лоадер, на заметку codepen.io/raurir/pen/xwX…

Эту неделю с вами был @akella, постил не очень много, но надеюсь вам понравилось ;-) Хорошего воскресного вечера, коллеги!

Если кто захочет со мной связаться это очень просто, facebook.com/akella, или @akella, или cssing.org.ua

Ну или просто введите в гугле "самый красивый верстальщик" ~(>_-)~

@cssunderhood @akella бля я все пропустил.ЧОРТ! Ну ты хоть запостил сто тыщ фоток с голыми телками как обычно?