exdeniz

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

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

Всем привет. Эту неделю проведу я - @exdeniz. Меня зовут Игорь и я верстальщик. Занимаюсь профессионально версткой уже года три.

6:58

Я фрилансер, делаю иногда большие проекты, а иногда верстаю лендинги. Стек jade/stylus/postcss/react, но это не главное. А главное вот что:

7:00

На этой неделе мы будем говорить о взаимодействии. С заказчиками, менеджерами, программистами и нашими любимыми дизайнерами.

7:02

А так же попробуем составить вместе руководство дизайнерам о передаче в верстку макетов, как bit.ly/1jKih2U, но круче.

7:04

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

7:08

Для начала о srcset - хорошая статья от Jon Yablonski bit.ly/1jKjIOI Пользуетесь srcset - расскажите о своем workflow.

7:10

Использование srcset надо согласовывать с дизайнером. Хорошей практикой является crop, но надо дать возможность просмотра оригинала без crop

7:16

В одном из моих проектов мы использовали smartcrop.js bit.ly/1jKluzj тут можно посмотреть как это работает.

7:19

Так же не стоит забывать про замечательный плагин bit.ly/1sIBR0t Он позволяет загружать сначала blur картинки и потом уже оригинал.

7:22

А теперь про взаимодействия на примере того же srcset. И тут вылезает слово “бюджет”. И ты идешь к менеджеру и аргументируешь.

7:31

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

7:35

Результат виден Google при ранжирование мобильного поиска и кучке специалистов из твоей презентации на одной из конференций.

7:38
@cssunderhood не много ли «приседаний» со всех сторон?
7:38

.@mamyashev по другому редко получается. Если ты хочешь сделать крутой продукт, “приседай” и говори “Ку"

7:39

Перерыв на работу, а пока делитесь историями о внедрнении классных решений которые видны только вам.

7:42
А вот статья о практике работы с Responsive Images (спасибо @cssunderhood): jonyablonski.com/2015/responsiv… pic.twitter.com/Ch9ul3LAba
11:30
@cssunderhood Стоит ли отказаться от пнг в пользу svg. Делать все картинки на проекте свг?
11:36

У @jsunderhood идет обсуждение JSS bit.ly/1i9025B. Внимание присутствует автор.

11:45
и такое мнение я уже слышал, лично у меня времени больше уходит на тестирование и продумывание чем на скорость печати @cssunderhood
11:55
поэтому я считаю скорость печати ВООБЩЕ НЕ ВАЖНА, важна четкая логика - легкость понимания и отсутствие багов ... @cssunderhood
11:55
всегда хотел увидеть людей которые строчат css с такой скоростью чтоб без автокомплитов прям процесс разработки замедляется @cssunderhood
11:55
@jsunderhood @cssunderhood пользуясь случаем:) CSS Modules + изоморфный app -> 😭RT плиз, можт кто знает как чинить github.com/webpack/css-lo…
11:56
Встреча Yaroslavl Frontend №10 уже в эту пятницу: ES6, React, Redux — yarfrontend.ru pic.twitter.com/yo1FY5Cb0U
12:00
@cssunderhood @jsunderhoodвот Emmet для CSS не пошел, а в HTML без него не могу, особенно списки для слайдеров и т.п.
12:01

.@kbytin если Sublime, то стоит попробовать hayaku bit.ly/TjXlhH @ki_zu, мне он больше нравится чем emmet.

12:02

Поговорили про картинки, продолжим SVG. SVG это отличная возможность увеличить скорость загрузки.

12:22

Я предпочитаю способ загрузки о котором рассказывается тут bit.ly/1B6iyCd Это асинхронно, быстро и удобно.

12:26

Я собираю все, что относится к SVG в открытой коллекции на Raindrop.io bit.ly/1i96NEg Там есть все, что бы начать использовать svg

12:28
@cssunderhood github.com/Pavliko/postcs… для ленивых и использующий postcss
12:31
@cssunderhood Мне нравится способ со вставкой в JS. video.yandex.ru/users/ya-event… Примерно с 10 минуты(лучше смотреть все). Спасибо @mista_k
13:14

Пока мы тут о SVG на @jsunderhood родился холивар JSS vs CSS + PostCSS + Webpack. А вообще о CSS в JS уже давно спорят. Я не сторонник этого

13:22

Вот хорошая статья "Against CSS in JS” bit.ly/1S0EncX.

13:26

Я знаю 4 значимых проекта CSS in JS: React-style, JSS, Radium, JSXStyle. Толчком для них послужил компонентный подход разработки.

13:28

Если предыдущие проекты были очень жестко привязаны к JS, то CSS Module похоже больше на методологию, но уже с хорошими инструментами.

13:30
@cssunderhood @jsunderhood например, есть Styling с JS-синтаксисом, но на сервере и через PostCSS с CSS Modules github.com/andreypopp/sty…
13:30
@cssunderhood @jsunderhood а есть react-postcss с динамическим CSS на клиенте, но без JS-синтаксиса github.com/mungell/react-…
13:30
@cssunderhood При сборке вебпаком это можно делать совсем-совсем автоматически — github.com/kisenka/svg-sp… :)
13:30

Кто совсем не в курсе вот статья о CSS Modules из которой становится все понятно bit.ly/1E9rw5q

13:42

Особенно мне нравится картинка bit.ly/1PPFNri

13:43

К чему разговор о CSS Modules. А все движется к компонентам. Все наверно началось с @bem_ru, они одни из первых стали применять компоненты.

13:50

Очень важно при компонентном подходе понимание дизайнера -Atomic Design bit.ly/1x4qjTQ стала первой ласточкой.

13:54

Последние разработки по компонентам просто замечательны - стоит просто посмотреть на workflow от bit.ly/1S66c3o @protein_io

13:56

С развитием React Native и т.п. проектов мы будем верстать изоморфные компоненты для всех устройств в одном месте.

13:58
@cssunderhood @c01nd01r Стоит признать, что за 2 года методика немного устарела. Недавно я в блоге отвечал почему — noteskeeper.ru/1168/#comment-…
17:20

# Вторник 43 твита

Всем кто верстает - бодрого утра. Кто встал в 6 и успел сделать кучу всего, тот молодец.

8:00

А рассказывайте про свой рабочий день. У меня вот обычно это раннее утро, 5-6 утра, работа до 12-13, обед, сон, письма и т.п., отдых.

8:01

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

8:02

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

8:03

Доска тут - bit.ly/1N49qnQ Как будем работать: Вы мне присылаете короткие требования, я их добавляю в доску.

8:04

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

8:05
Базовая поддержка Shadow DOM, важной части веб-компонентов, уже в ночных сборках WebKit — webkit.org/blog/4096/intr… pic.twitter.com/LUNmFfmqvw
8:08

Поделюсь тем, что прилетело в ленту моего твитера.

8:12

bit.ly/1N4aqs3 - проверка уникальности классов в вашем css.

8:12

bit.ly/1NxDmHs - Instagram фильтры средствами css.

8:13

Презентация о типографике с помощью SVG - bit.ly/1N4auYW

8:13

codepen.io/anthonydugois/… - SVG Path Builder в браузере.

8:26

codepen.io/collection/nJG… - коллекция SVG типографики на codepen.io

8:27

github.com/shuvalov-anton… - скриншоты редакторов кода от программистов. Вот мой - i.imgur.com/Y34Ucfx.png

8:31
@cssunderhood css-классы CamelCase-ом!? буэ-э-э
8:36

.@stewardtz А вот почему? Мне нравится, разработчикам с которыми я работаю тоже. В чем буэ-э-э?

8:37
@stewardtz @cssunderhood Очень хорошо работает с React, когда можно класс такой же сделать как компонент. БЭМ, все дела.
8:38
@cssunderhood @stewardtz СSS CameCase классы крайне удобны для JS, а там кому как нравиться и принято в команде)
8:38
@cssunderhood ну не знаю - я думал этот холивар давно закончился и победил underscore в css. Просто давно не встречал, даже не помню когда
8:42
@stewardtz Для CSS-модулей это предпочтительный вариант, потому что делает жизнь нерелигиозного человека сильно проще. @cssunderhood
8:44

Про camelCase, я перешел на него из-за BEM. Я чисто эстетически не могу вот эти _ & __ видеть в коде.

8:45

И да, меня контролирует github.com/rossPatton/sty… - не дает мне писать всякую ерунду в stylus. Стоит вот прям внизу атома с топором и рубит.

8:49
@stewardtz @cssunderhood Ну я смотрю в код и знаю, что .message_popap для стилизации, а messagePopap для js
8:54
@gatilin2222 @cssunderhood @stewardtz @cssunderhood есть технические ограничения в использовании camelCase - stackoverflow.com/questions/1141…
8:58
@cssunderhood why majority of html/css developers like to reinvent the wheel? it reminds me story abt zombie code - techbeacon.com/zombie-code-wh…
9:26

Не смущает.

9:31

.@razbakov для 95% моих проектов они не подходят. Использую только сетки от Jeet и Rapture для media-query.

9:33

Я считаю, что любые css фреймворки дают быстрый старт проекта, но они чаще всего совершенно не подерживаемые в дальнейшем.

9:35

Я ненавижу bootstrap, это изобретение дьяволов-разработчиков. В итоге из css одного проекта сделали универсальный.

9:36

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

9:39

Все большие проекты которые я видел на bootstrap были с пролюблеными сроками разработки и надеждами на дальнейший рефаторинг.

9:41

Для быстрого старта, набрасывайте блоки и только потом стилизуйте. У меня есть “серый” UI-Kit который я подключают в класс через extend

9:44

Этого достаточно, что бы начали работать программисты, после этого он уже стилизуется и т.п.

9:45
@cssunderhood Бутстрап прекрасен на 73%, если использовать его по назначению. То есть НЕ ИСПОЛЬЗОВАТЬ для сайтов с дизайном.
9:46

.@sapegin полностью согласен. Сделать рабочий прототип, админку. Это работа для bootstrap и тут действительно не надо изобретать велосипеды.

9:47
@cssunderhood фреймворк для прототипирования интерфейсов начали использовать для чистовых дизайнов,отсюда и начался ад, заказчики подхватили
9:47
@cssunderhood Какие основные меди квери в основном используешь?
9:55
@serhey_shmyg @cssunderhood youtube.com/watch?v=_98SE8… это видео посмотрел и понял, что media query как и breakpoint подход не очень
10:11
д@cssunderhood jeet - да! )) lost grid - обновленный jeet.gs
14:28
Джон Яблонски разрушает три главных мифа о флексбоксе: скорость, поддержка и сложность — jonyablonski.com/2015/flexbox-m… pic.twitter.com/31Sms2EQ1A
14:38
“front end development is easy ” pic.twitter.com/o1GyUdB0CZ
19:28

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

Всем доброй день. За ночь ничего интересного в мой твиттер не прилетело. А у вас? Делитесь что вчера смотрели/читали.

10:51
Видео с октябрьского Яндекс.Субботника по фронтенду в Москве: SVG, WebGL, БЭМ, API, … — events.yandex.ru/events/yasubbo… pic.twitter.com/n6ZHZCaqnB
10:51

Сегодня утром я стилизовал в очередной раз select2. Сделал это довольно быстро, сделана у меня в свое время штука github.com/exdeniz/select…

10:54

Поделитесь workflow стилизации сложных плагинов. С чем сталкивались, как боролись.

10:56

Все больше плагинов начали писать css в BEM style - это не может не радовать. Но еще больше плагинов стали писать под bootstrap.

10:57

Плагины с bootstrap страшно использовать, черт знает что они потянут за собой из основного bootstrap.

10:57

А темой сегодня станет анимация. Для начала поговорим о том как передают анимацию от дизайнера к верстальщику.

10:58

По убыванию: 1) Ссылки на эффекты; 2) Анимированые gif; 3) Видео; Часто дизайнеры говорят - “сделай красиво”.

11:01

За прекрасным я хожу на tympanus.net/codrops/ и дизайнерам советую. Там много хороших эффектов которые вдохновляют.

11:02

Для настройки CSS анимаций полезно дизайнеру скинуть ссылку на easings.net/ru, определитесь сразу в терминологии.

11:03

Кто совсем не знает что-такое анимация, можно пройти курс на @htmlacademy_ru - htmlacademy.ru/courses/80 и htmlacademy.ru/courses/71

11:06
@cssunderhood Кстати,могу предложить по теме очень актуальную серию статей (7 штук) про Web Animations API: css-live.ru/articles/pogov…
11:06
@cssunderhood в фб есть группа о дизайн-прототипах. такие штуки помогают передавать дизайн?

prototypingclub.tumblr.com
facebook.com/groups/prototy…

11:07

Будет отличной практикой, если вы сами будете предлагать анимацию элементов даже когда ее нет в дизайне. Это + в карму и + к скилу.

11:22

Есть два прекрасных доклада с @FrontTalks youtube.com/watch?v=cXlOBO… о процессе создания красивых сайтов и youtube.com/watch?v=zJxPuX… о анимации

11:29

В первом отлично рассказано о взаимодействии с дизайнерами. Во втором много технических подробностей.

11:30

Самое главное в анимации - не насыпать много. Думайте о том где используется анимация.

11:49

Ждать 3 секунды пока открутиться кнопка “патаму что я могу анимацию” никто не будет.

11:49

В интернете есть хорошие сервисы по анимации. Сборник ссылок тут - speckyboy.com/2015/09/09/css…

11:56

Ну и еще несколько сервисов - anicollection.github.io/#/ просто сборник анимаций. Для анимаций слайдеров - …-application-development-js.github.io/AnimateTransit…

12:00

Фундаментально от Google - developers.google.com/web/fundamenta… Если есть возможность прочитать, очень советую это сделать.

12:01

Еще рекомендую @rachelnabors - можно посмотреть ee доклады тут rachelnabors.com/speaking

12:09
UX-дизайнер Софи Пакстон написала отличную статью про чрезмерные анимации: medium.com/startups-ventu….

@cssunderhood

15:20
@cssunderhood И у Ильи Бирмана есть неплохой совет про полезность анимаций: artgorbunov.ru/bb/soviet/2015…
15:20

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

Всем доброе утро. Разгребая вчера ленту сохранил несколько ссылок для вас. Поехали.

6:16

tympanus.net/codrops/2015/1… - эффекты для стека блоков.

6:17

jonyablonski.com/2015/flexbox-m… - Разрушаем мифы о flexbox

6:17

viget.com/inspire/angled… - как верстать скошеные блоки.

6:18

bitsofco.de/2015/how-z-ind… - как работает z-index

6:18

performancebudget.io - считаем сколько, чего класть при загрузке сайта.

6:19

bennettfeely.com/clippy/ - генератор дляя clip-path

6:20

Очередной пост о PostCSS - webdesign.tutsplus.com/tutorials/usin… Я даже не знаю, кто его еще не использует.

6:20

Вчера об ошибках wiki.csswg.org/ideas/mistakes а сегодня уже готовый плагин github.com/jonathantneal/… @PostCSS amazing!

6:22

learn.javascript.ru/webpack-screen… - как начать пользоватся Webpack на русском от Ilya Kantor. Буду смотреть на выходных.

6:25
@cssunderhood ещё немного в топик про анимации: useyourinterface.com, pinterest.com/uyinterface/
6:52
Фикс SVG в Edge: viewBox="0 0 6 6" -> viewBox="-2 -2 10 10" (+1px), либо вырезайте вручную, не полагайтесь на автоматический атрборд
15:00

# Пятница 18 твитов

Всем привет. Сегодня пятница, а значит работа встала еще с утра, ну кроме наверно самых упорных.

12:33

Сегодня отвечаю на провокационные вопросы и жду от вас рецепт любимого коктеля.

12:34
поэтому верстальщики пожалуй пока останутся верстальщиками en.wikipedia.org/wiki/Engineeri… @twenty
12:34
@cssunderhood Белый русский - самый лучший коктейль
12:35
@cssunderhood Тогда зеленый чай с джином.
12:36

.@webholt пропорции?

12:36
@cssunderhood клюква с водкой ака космополитан а-ля рюс
12:36

Я вот люблю классические сочетания. Джин с тоником. Но больше всего я люблю горький-горький эль. Что-то типа double IPA

12:37
@cssunderhood Надо подбирать под себя и под джин. У него градус плавает заметно. Где-то 1:5. И пить не совсем горячим.
12:38

.@webholt - проверим, как раз стоит бутылка джина.

12:38
@cssunderhood обычно к концу недели наоборот всё мобилизуется, чтоб подтянуть хвосты ))
12:40

.@juwain Это не наш метод. Хвост надо купировать сразу.

12:40
@cssunderhood 1/3 ликера Калуа, 1/3 водки, 1/3 сливок 15%. Делать в бокале, полном крупного льда, пить через крупную трубочку или через край
12:40
@cssunderhood А если вообще про бухлишко, то самое лучшее - это португальский портвейн, лет 20-и например
12:43

У @iamspacegray рассказывают как заработать на themeforest.

12:46
@cssunderhood бутылочка вкусного и полезного крафтового пива, что может быть лучше?
13:07

.@bvvell две бутылочки, а лучше три бутылочки.

13:07
@cssunderhood Виски с лимоном. А чем не коктейль? pic.twitter.com/Ej2fSL5hgw
15:15

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

@cssunderhood порция эспрессо + сливочное мороженое + густые сливки + шоколадный/сливочный ликёр.
20:06

Всем привет. Я хорошо отдохнул в выходные. Надеюсь вы тоже. Чем ближе к новому году тем больше дедлайнов.

20:07

На выходных прилетело несколько сервисов и статей в ленту, сейчас прощальным аккордом я их затвичу.

20:08

Во первых кто познает мир ReactJS - habrahabr.ru/post/269831/ начало серии статей про Redux, наверно лучшая реализая Flux для ReactJS

20:10

А так же React Cheat Sheet - reactcheatsheet.com

20:10

Трансляции с Web Standart Days 1 день - youtube.com/watch?v=f1DVxt… 2 день - youtube.com/watch?v=UPtDcA…

20:12

SVG: thenewcode.com/110/Interactiv… - эффекты для фото и анимация по path lmgonzalves.github.io/segment/

20:13

Эффекты аля Apple TV - github.com/drewwilson/atv…

20:16

Огромный сборник навигаций navnav.co - их много, вдохновляйтесь сами и рассказывайте дизайнерам

20:17

Ну и сайт недели для меня: deuxhuithuit.com/en/ - у них в проектах совершенно фантастические сайты.

20:18

Их можно разглядывать, тыкать инспектором, смотреть и наслаждаться.

20:18

А я прощаюсь с вами. Это была интересная неделя, надеюсь я дал вам немного информации для размышлений и движения вперед.

20:19

Если вы думаете, что вы уже сверстали все на свете, поверьте - это не так. Всем пока.

20:20
@cssunderhood @exdeniz Забыл написать кто вёл всю неделю
20:31

.@iamstarkov ну я еще тут полчаса. А так конечно, вел для вас эту неделю @exdeniz, иногда мой твитер кто-то читает.

20:32

bit.ly

github.com

www.youtube.com

other