exdeniz

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

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

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

9:58

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

10:00

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

10:02

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

10:04

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

10:08

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

10:10

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

10:16

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

10:19

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

10:22

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

10:31

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

10:35

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

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

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

10:39

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

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

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

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

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

15:02

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

15:22

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

15:26

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

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

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

16:22

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

16:26

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

16:28

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

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

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

16:42

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

16:43

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

16:50

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

16:54

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

16:56

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

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

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

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

11:00

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

11:01

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

11:02

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

11:03

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

11:04

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

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

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

11:12

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

11:12

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

11:13

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

11:13

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

11:26

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

11:27

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

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

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

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

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

11:45

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

11:49
@stewardtz @cssunderhood Ну я смотрю в код и знаю, что .message_popap для стилизации, а messagePopap для js
11:54
@gatilin2222 @cssunderhood @stewardtz @cssunderhood есть технические ограничения в использовании camelCase - stackoverflow.com/questions/1141…
11: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…
12:26

Не смущает.

12:31

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

12:33

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

12:35

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

12:36

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

12:39

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

12:41

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

12:44

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

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

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

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

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

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

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

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

13:54

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

13:56

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

13:57

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

13:57

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

13:58

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

14:01

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

14:02

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

14:03

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

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

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

14:07

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

14:22

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

14:29

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

14:30

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

14:49

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

14:49

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

14:56

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

15:00

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

15:01

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

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

@cssunderhood

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

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

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

9:16

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

9:17

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

9:17

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

9:18

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

9:18

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

9:19

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

9:20

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

9:20

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

9:22

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

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

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

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

15:33

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23:07

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

23:08

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

23:10

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

23:10

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

23:12

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

23:13

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

23:16

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

23:17

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

23:18

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

23:18

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

23:19

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

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

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

23:32

bit.ly

github.com

www.youtube.com

other