akella

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

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

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

7:23

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

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

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

7:42

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

7:47

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10:54

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

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

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

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

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

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

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

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

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

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

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

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

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

14:17

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

17:48

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

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

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

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

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

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

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

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

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

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

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

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

15:27

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

15:29

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

15:36

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

15:46

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

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

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

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

8:03

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

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

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

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

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

9:35

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15:19

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

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

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

17:26
@cssunderhood Sip — прикольный бесплатный колорпикер. CodeKit для вёрстки лэндингов и прочего фриланса.
17: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
7:19

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

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

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

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

.@gearmobile :before{transform: rotate}?

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

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

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

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

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

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

8:09

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

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

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

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

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

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

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

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

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

19:34
@cssunderhood Верстаешь сам? Ты оценил, что на проект понадобится X времени, заказчику называешь X × N. Какой лично для тебя коэффициент N?
19:34
@neonick @cssunderhood вот такой есть плагин, может пригодится psd2html.com/js-custom-form…
21:57

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

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

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

10:11

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

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

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

21:52

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

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

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

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

12:27

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

19:23

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

19:24

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

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

gist.github.com

github.com

other


@bizi