akella

12 октября 2015, Saint Petersburg, Russia

# Понедельник 45 твитов

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

10:23

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

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

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

10:42

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

10:47

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

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

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

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

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

11:25
@cssunderhood @stewardtz Один раз я верстал полную тему BS, заказчик решил, что верстать будут программисты. Через полгода переписал проект.
12:37
@cssunderhood Бутстрап неплохо решает свою задачу. Просто не надо делать на нём сайт с дизайном, для этого он не подходит.
12:42
@cssunderhood @jsunderhood Подскажу всем тему. Есть позиция заказчика - зачем внедрять новые технологии, если старый код приносит деньги?
13:23

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

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

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

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

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

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

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

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

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

13:32
@cssunderhood Что думаешь об MCSS?
13:51

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

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

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

13:54

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

13:56
@cssunderhood jade\stylus не используете? почему?
14:02

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

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

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

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

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

14:43
@cssunderhood мгновенное создание прототипов чуть ли не в браузере с респонсивность, для миниадминок ииииии все. Дальше батхерт
14:46
@cssunderhood внутренности сайтиков делаю: панели управления
15:57

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

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

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

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

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

17:17

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

20:48

# Вторник 17 твитов

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

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

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

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

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

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

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

16:01
@cssunderhood раскрывай тему тестирования.
17:13

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

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

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

18:27

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

18:29

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

18:36

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

18:46

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

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

# Среда 35 твитов

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

11:03

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

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

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

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

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

12:35

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

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

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

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

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

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

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

16:20
@cssunderhood @meuwka Avocode формат? достаточно .psd evernote.com/l/AFooTJdcyplE…
16:21
@c01nd01r @cssunderhood на некоторых макетах это не срабатывает. Приходиться делать из Фотошопа. А так да - 95% загружаются через дроп.
16:21
@cssunderhood Со скетч без самого скетча под windows сможет?
16:25

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

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

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

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

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

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

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

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

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

18:19

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

18:21
@cssunderhood Бартендер и Колорснаппер тоже использую. Моноснап → Клаудапп. Лайврелоад → Браузерсинк. Гитбокс → Гитхаб Десктоп + git.
18:22
@cssunderhood Моноснап → Дроплер
18:24
@cssunderhood оставляет скриншот выделенного блока поверх всех окон, чтобы сравнивать размеры, тени и т.д. pic.twitter.com/SQkmeYEXc3
18:39
@cssunderhood Adobe Extract - бесплатная альтернатива Avocode. Я Adobe Extract часто пользуюсь и доволен.
19:13
@cssunderhood Кстати, специально для сексистов плохая новость insider.pro/ru/article/484… :)
20:24

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

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

# Четверг 19 твитов

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
10:19

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

12:09
@cssunderhood компания делала набор амбициозных чуваков, которых учила, и потом заставляла работать. За 2 мес научили тому, чему на курсах..
12:14
@cssunderhood учился на htmlacademy + codeacademy, потом курсы loftschool и уроки на loftblog.
12:55
@cssunderhood Вот в этой пресловутой статье я когда-то описывал свой путь: css-live.ru/faq/put-versta…
12:56
@cssunderhood Евгений Попов :(
12:56
@cssunderhood Основы вёрстки показал знакомый + прочитал книгу "HTML, CSS, Скрипты" Ломова + почти сразу начал пытаться фрилансить :)
12:56
@cssunderhood Курсы Евгения Попова. /s
12:56

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

13:03
@cssunderhood Когда-то в школе учили HTML, затем, вроде книга Майера и понеслась...
13:04
@cssunderhood htmlbook + htmlacademy. Потом freePSD верстала. Дальше - месячная стажировка и первый реальный опыт работы. Всегда все сама.
14:48
@cssunderhood как грамотно сверстать такой косой background у секции - imgur.com/apiwgmE ?
14:49

.@gearmobile :before{transform: rotate}?

14:49
@cssunderhood курсы @htmlacademy_ru, codecademy, даже на курсы "специалист" сходил)
17:38
@cssunderhood HTML изучал по статьям в «Подводной лодке». По-настоящему верстать научили в Мэйле ;-)
19:39
@cssunderhood читал кучу западных блогов + alistapart + smashingmagazine
19:40
@cssunderhood в локальной сети поднял сайт на phpfusion и форум на ipb, стандартные темы были не торт :-)
19:40
@cssunderhood я случайно скачал сайт и открыл блокнотом.
19:42
@pepelsbey @tachisis @cssunderhood поддерживаю, ALA и webmascon. За счастье было еще и переводить для него.
21:29

# Пятница 33 твита

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

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

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

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

11:09

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

11:19
@cssunderhood 2 дня думаю и прокрастинирую, затем 2 часа делаю... ПРОФИТ! Не знаю как по-другому настроиться.
11:35
@cssunderhood можно смотреть на это не как на прокрастинацию, а как на подготовку рабочего окружения и планирование архитектуры :)
12:04
@cssunderhood ну бюрошный подход ля меня хорошо работает ksoftware.livejournal.com/202173.html
12:04
@TheSunwave @cssunderhood самая большая лажа в том, что если бы начал делать сразу - делал бы 2 дня!!!
12:04
@cssunderhood разбиваю предполагаемый объем работы на этапы - выполнение каждого дает некое чувство удовлетворения :) и стимул продолжать
12:52
@cssunderhood Включаешь музыку, посылаешь всех на хў что бы не отвлекали и делаешь. Ах да надо твитер приложение закрыть еще.
12:53
@cssunderhood не затягивать. Если начинаешь откладывать, то через некоторое время уже просто попадает интерес и радость верстать проект.
16:35

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

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

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

17:42
@cssunderhood Вот эта штука давным-давно в бутстрапе. getbootstrap.com/components/#re…
17:43
@cssunderhood в некоторых проектах использовал решение nicolasgallagher.com/flexible-css-c… Тоже самое, только под стандартные пропорции.
17:43
@cssunderhood, довести себя этим, приуныть, переосмыслить своё поведение и больше так не делать.
17:46

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

18:02
@cssunderhood pedroduarte.me/wallop/ для мелких каруселей, и flickity.metafizzy.co для сложных
18:25
@cssunderhood в основном огромный опыт велосипелов. Хотя карусели последнее время тоже часто slick.js
18:26
@Bizi @cssunderhood @jsunderhood codekit, hammer for mac, browsersync, localtunnel.me
21:31
@cssunderhood А никаких трюков нет здесь, просто нужно честно описать заказчику ситуацию, и постараться увеличить строки:)
21:32
@cssunderhood фоточки fotorama.io, попапы github.com/dimsemenov/Mag…, рейндж слайдер refreshless.com/nouislider/
21:32
@cssunderhood верстка — единственная известная мне техническая область, где слово «хак» имеет подожительный оттенок
21:32
@cssunderhood а чем делаете кастомные элементы форм? (вопрос к тебе и ко всем)
21:33
@cssunderhood как-то owl carousel никто не упомянул…
21:37
@neonick @cssunderhood для селектов использую chosen.js
21:52

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

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

# Суббота 7 твитов

@neonick @cssunderhood вот такой есть плагин, может пригодится psd2html.com/js-custom-form…
0:57
@neonick @cssunderhood Кстати я собрал демо, где эти формы можно "потрогать" - chemistry-template.github.io/examples.html. Основной их плюс - работают без JS
6:39
@asktwi @cssunderhood Я честно не понимаю зачем разрабы отказываются от jquery...
13:02

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

13:11

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

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

# Воскресенье 9 твитов

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

0:52

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

10:12
@pepelsbey @cssunderhood Семантические теги ничего не дают, кроме проблем со встроенными стилями. Семантическая вёрстка - утопия.
14:21
@freiksenet_ru @cssunderhood, ресеты для встроенных стилей; польза для поисковиков, читалок (a11y), др. роботов и для читабельности кода.
14:21

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

15:27

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

22:23

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

22:24

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

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

gist.github.com

github.com

other


@bizi