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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А вот статья о практике работы с Responsive Images (спасибо @cssunderhood): jonyablonski.com/2015/responsiv… pic.twitter.com/Ch9ul3LAba

@cssunderhood Стоит ли отказаться от пнг в пользу svg. Делать все картинки на проекте свг?

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

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

поэтому я считаю скорость печати ВООБЩЕ НЕ ВАЖНА, важна четкая логика - легкость понимания и отсутствие багов ... @cssunderhood

всегда хотел увидеть людей которые строчат css с такой скоростью чтоб без автокомплитов прям процесс разработки замедляется @cssunderhood

@jsunderhood @cssunderhood пользуясь случаем:) CSS Modules + изоморфный app -> 😭RT плиз, можт кто знает как чинить github.com/webpack/css-lo…

Встреча Yaroslavl Frontend №10 уже в эту пятницу: ES6, React, Redux — yarfrontend.ru pic.twitter.com/yo1FY5Cb0U

@cssunderhood @jsunderhoodвот Emmet для CSS не пошел, а в HTML без него не могу, особенно списки для слайдеров и т.п.

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

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

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

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

@cssunderhood github.com/Pavliko/postcs… для ленивых и использующий postcss

@cssunderhood Мне нравится способ со вставкой в JS. video.yandex.ru/users/ya-event… Примерно с 10 минуты(лучше смотреть все). Спасибо @mista_k

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

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

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

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

@cssunderhood @jsunderhood например, есть Styling с JS-синтаксисом, но на сервере и через PostCSS с CSS Modules github.com/andreypopp/sty…

@cssunderhood @jsunderhood а есть react-postcss с динамическим CSS на клиенте, но без JS-синтаксиса github.com/mungell/react-…

@cssunderhood При сборке вебпаком это можно делать совсем-совсем автоматически — github.com/kisenka/svg-sp… :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@stewardtz @cssunderhood Очень хорошо работает с React, когда можно класс такой же сделать как компонент. БЭМ, все дела.

@cssunderhood @stewardtz СSS CameCase классы крайне удобны для JS, а там кому как нравиться и принято в команде)

@cssunderhood ну не знаю - я думал этот холивар давно закончился и победил underscore в css. Просто давно не встречал, даже не помню когда

@stewardtz Для CSS-модулей это предпочтительный вариант, потому что делает жизнь нерелигиозного человека сильно проще. @cssunderhood

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

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

@stewardtz @cssunderhood Ну я смотрю в код и знаю, что .message_popap для стилизации, а messagePopap для js

@gatilin2222 @cssunderhood @stewardtz @cssunderhood есть технические ограничения в использовании camelCase - stackoverflow.com/questions/1141…

@webholt может? github.com/nicothin/web-d… @cssunderhood

@cssunderhood why majority of html/css developers like to reinvent the wheel? it reminds me story abt zombie code - techbeacon.com/zombie-code-wh…

Не смущает.

@cssunderhood например usablica.github.io/front-end-fram…

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

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

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

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

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

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

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

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

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

@cssunderhood фреймворк для прототипирования интерфейсов начали использовать для чистовых дизайнов,отсюда и начался ад, заказчики подхватили

@cssunderhood Какие основные меди квери в основном используешь?

@serhey_shmyg @cssunderhood youtube.com/watch?v=_98SE8… это видео посмотрел и понял, что media query как и breakpoint подход не очень

д@cssunderhood jeet - да! )) lost grid - обновленный jeet.gs

Джон Яблонски разрушает три главных мифа о флексбоксе: скорость, поддержка и сложность — jonyablonski.com/2015/flexbox-m… pic.twitter.com/31Sms2EQ1A

“front end development is easy ” pic.twitter.com/o1GyUdB0CZ

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood в фб есть группа о дизайн-прототипах. такие штуки помогают передавать дизайн?

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

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

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

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

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

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

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

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

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

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

@cssunderhood а ещё есть codyhouse.co

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

@cssunderhood

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood ещё немного в топик про анимации: useyourinterface.com, pinterest.com/uyinterface/

Фикс SVG в Edge: viewBox="0 0 6 6" -> viewBox="-2 -2 10 10" (+1px), либо вырезайте вручную, не полагайтесь на автоматический атрборд

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

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

поэтому верстальщики пожалуй пока останутся верстальщиками en.wikipedia.org/wiki/Engineeri… @twenty

@cssunderhood Белый русский - самый лучший коктейль

@cssunderhood Тогда зеленый чай с джином.

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

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

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

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

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

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

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

@cssunderhood 1/3 ликера Калуа, 1/3 водки, 1/3 сливок 15%. Делать в бокале, полном крупного льда, пить через крупную трубочку или через край

@cssunderhood А если вообще про бухлишко, то самое лучшее - это португальский портвейн, лет 20-и например

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood нравится Питон geektimes.ru/post/258116/