Доброе утро понедельника! Эту неделю в эфире Дмитрий Швалёв @dshster, г. Казань.

Я больше 15 лет занимаюсь вебом: от дизайна и проектирования через вёрстку таблицами и флоатами к полноценной фронтенд разработке.

Сейчас в моей работе полный фронтенд на базе AngularJS. Не люблю jQuery и не люблю Bootstrap - но это тема отдельного холивара.

Моя любимая тема - строительство велосипедов (не тех что с колёсами, хотя колёсный велосипед есть), а также сайд-проекты, самореализация.

Больше года работал по Аджайл - это слово для меня не пустой звук, поэтому можем обсудить эту методологию.

Также хочется поговорить про создание личного бренда: кто и как это понимает, нужен ли он и вообще о том как получить кусочек тщеславия.

Как верстальщик я сторонник вёрстки независимыми блоками, не называю это БЭМ - не всегда придерживаюсь оригинальной технологии.

@cssunderhood личный бренд — это ты как есть. Формируется как и любой другой бренд. Вопрос слишком обширный.

Имел ввиду профессиональный личный бренд - чтобы узнавали на улице (в интернете конечно) и брали автографы =) @aka_LeLique

Добрался до офиса, давайте немного копнём историю, потом продолжим: в Казани я чуть меньше 2 лет, до этого жил и работал в Йошкар-Оле

Если есть подписчики из Йошкар-Олы - вам привет! Первый компьютер БК-0010.01, язык Вильнюс-Бейсик, потом Искра (x86) без жесткого диска

Первая работа связанная с программированием - FoxPro 2.5 для DOS, освоил довольно быстро по книжке Попова А. А. (кажется).

Дальше немного Turbo Pascal, Visual Basic и много (года 4, прошу прощения) 1С версии 7.5

Пока работал с 1C увлёкся Macromedia Flash, начиная с версии 4, там еще не было AS. Тогда была мода на CD Shell (оболочка для автозапуска)

Знание Flash пригодилось позже уже на серьёзных проектах, но до ActionScript 3.0 так и не дорос. Сейчас кажется Flash сходит на нет.

@cssunderhood 😆 автографы на чистом css? Все как с обычным брендом, только в роли бренда твоя персона. Профит на лицо 🤑

Первый сайт 1999-2000 год - сайт местного краеведческого музея с фотографиями и описанием экспонатов, на таблицах и внешних CSS.

Был большой опыт табличной вёрстки (с gif-распорками, ага), но вёрстка div-ами хромала, помог Учебник Ивана @isagalaev Сагалаева

До сих пор этот учебник считаю отличным руководством для тех, кто хочет разобраться с флоатами и потоками: softwaremaniacs.org/blog/category/…

Дальше десятки коммерческих сайтов, изучение и внедрение методов, библиотек, фреймворков - рутина фронтенд разработчика. Ну вы знаете =)

@cssunderhood сколько времени уходило у команды еженедельно на организацию agile. И сколько человек в команде.

Команды небольшие: 4-5 человек, ежедневный митинг по 20 минут, раз в спринт (3 нед) планирование, презентация, ретро @MaxMykhailenko

@cssunderhood забыл про кактус и воткнутый в его горшок провод от того самого защитного экрана :)

точно точно, заземление обязательно должно идти в землю! @POS_troi

@cssunderhood расскажи подробнее. Какие шишки набил, как повлияло на работу с заказчиком, дизайнером, другими ребятами?

Самое необычное ставить оценку работы самому. До этого оценку ставил ПМ исходя из бюджета проекта, стоимости часа и кол-ва разраб. @bosha13

В остальном мало чем отличается от обычной работы в небольшой команде. @bosha13

Есть опыт в несколько лет удалённой работы (из дома), есть опыт ИП, можно поговорить и об этом

Дизайнер обычно бывает вне Аджайл, за него выступает проектировщик отвечая и за дизайн и за свой прототип @bosha13

@cssunderhood Тоже флэшем увлекался во времена 4-й версии. Довольно быстро наигрался.

У меня было как мин. 2 очень серьёзных прокта на Flash (интерактивные презентации), тогда я не представлял как их сделать на HTML @sapegin

@cssunderhood как не лохануться при устройстве на удаленку?

Важно иметь опыт работы в офисе в этой компании, понимать все техпроцессы и взаимодействия и потом переходить на удаленку @timurKarshiev

@cssunderhood привет! расскажи пожалуйста о том, что ты ждешь от мира верстки и фронтэнда в 2016 году? Есть ли какие личные прогнозы? :)

Слишком короткий короткий. Жду более внятного Angularjs 2 - документации, примеров, стабильной реализации. @SheVasya

А еще беда: Firefox отказывается от группировки вкладок - киллерфича из-за которой мне нравится им пользоваться. @SheVasya

Срок короткий, конечно! @SheVasya

@cssunderhood @SheVasya от вот этой? pic.twitter.com/7V0xdmuOTX

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

Я не уверен как это сейчас на законодательном уровне, должно быть основание на получение денег и уплата с них налогов @twenty

Открывать ИП это вопрос еще предполагаемого дохода, нужно учитывать фиксированную уплату страховых взносов,обслуживание счета и банк-клиента

@juwain @cssunderhood Я поотвечаю. Я пробовал Мое дело и Эльбу. Эльба мне больше понравилась, там и веду.

Я работал с Эльбой, но мне показалось дорого - нужно заполнить 3 бумажки и заплатить абонентку за квартал @exdeniz @juwain

@cssunderhood ИП нужен был для того, чтобы официально фрилансить? Налоги платить? или в чем смысл?

Чтобы официально получать деньги, платить налоги и работать с юр. лицами через расчетный счет, а так же нанимать сотрудников @sushkazzlo

Когда открывал ИП было много отзывов - работы нет, но соц. платежи надо платить, это отпугивало, но если доход постоянный - проблем нет

@cssunderhood у эльбы три банка интегриваны глубоко. Этого хватает для нескольких операций в месяц.

Давайте про работу. Например про то, что Bootstrap стоит использовать только тогда, когда есть полное понимание как работает вёрстка

Флоаты мне давались с большим трудом и не было соблазна использовать готовые фреймворки (их не было), поэтому приходилось изучать.

Самым моим любимым приёмом был и есть - отрицательные отступы (Negative margins), с помощью его можно сверстать что угодно!

Причем это "что угодно" практически пуленепробиваемое (колонки не падают при изменении размера экрана)

Высший пилотаж отрицательных маргинов - chikuyonok.ru/2010/01/liquid… от @chikuyonok. Я долго курил эту статью и всё же осилил 12 колоночную сетку

Сейчас эта сетка морально устарела: в ней много вложенных элементов и нет респонсива (можно посмотреть у меня на сайте)

Сейчас флоаты постепенно уступают флекс-боксам и надеюсь уступят окончательно. Я был бы только "За".

Какие ваши любимые приёмы в вёрстке: флоаты, инлайн-блоки, псевдоэлементы, dataurl или может таблицы с gif-распорками? =)

Однажды я собеседовался на позицию верстальщика (без js), потом узнал что вся работа это вёрстка дикого количества таблиц @jsunderhood

Много раньше работал в отделе тех. документации, там тоже большое кол-во чистой вёрстки. Очень много работ где не нужен js @jsunderhood

Я, кстати, фанат автоматизации: однажды подсел на Grunt, сейчас плотно сижу на Gulpjs - без него не начинаю ни один проект

Вот читаю @cssunderhood и @jsunderhood всё у них так просто, я как вспомню как верстал себе шаблон для блога, аж дрожь пробирает :)

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

visibility: hidden использую когда нужно скрыть блок сохранив его габариты + абсолютное позиционирование, например разные выпадушки

Любую задачу можно решить множеством способов - есть любимые, есть элегантные, а есть костыли - тоже способ @webholt

Кстати, а вам часто приходилось говорить дизайнеру, что он не прав и что это делать не нужно или нереально, а нужно по-другому?

Продолжая про автоматизацию. Первое что нужно автоматизировать - расстановку вендорных префиксов, второе - любой CSS-препроцессор.

@cssunderhood говорить дизайнеру, что он не прав, так же нормально, как слушать что ты мудак и не понимаешь ничего 😄🤘 так рождается истина!

Когда я вперв столкнулся с дизайнером мне навязали "карты нарезки" - это дизайн на бумаге и подписи всех размеров, расстояний, выравниваний

Причем дизайнер понимал вёрстку совсем не так как должно верстаться - скорее как в газете, было очень много трений чтобы придти к 1 мнению

Я бы не позавидовал сегодняшним новичкам в вёрстке - с одной стороны многие вещи упростились, с другой - технологий стало гораздо больше

Кто сейчас навскидку сверстает тянущийся блок со скругленными углами и тенью без border-radius и box-shadow, раньше легко справлялись

Зато сейчас настроить сборку, подключить препроцессоры, сверстать флекс-боксами раскладку... крыша едет даже у профи :)

@cssunderhood я стараюсь сейчас избавится от всего что лишнее, в том числе Bower, пресловутый и Gulp иже с ним 😛, но это личное.

Допустим, вы избавитесь от gulp и bower, собирать будете руками, и таскать пакеты из архивов скачиванием и обновлять руками? @aka_LeLique

Или это всё тот холивар bower vs npm? @aka_LeLique

Мне больше нравятся инструменты сильно заточенные под определённые задачи, нежели комбайны выполняющие всё и сразу.

Bower позволяет работать только с фронт-пакетами, выносить их в отдельную папку, тянет зависимости и позволяет собирать всё в один js-файл

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

@cssunderhood вы сказали что «фронтовые пакеты туда не вписываются», я про них и ответил. А какие именно, думаю у всех свои.

У меня на текущем проекте 33 bower-пакета которые идут в вендор js, 38 npm-пакета для сборки фронта и проект не на nodejs @aka_LeLique

Если проект на nodejs то туда добавляются еще рантайм пакеты, типа ExpressJS, представляете путаницу в package.json? @aka_LeLique

@cssunderhood @aka_LeLique Фронтовые пакеты отлично лежат в dependencies. Bower неудачное решение. Используйте npm 3 :-)

А где лежат NodeJS пакеты, в dependencies же? @dan_abramov @aka_LeLique

В итоге, если я не использую Webpack каким инструментом я должен собирать вендорный js, если в package.json нет ссылки на файл библиотеки

@sapegin @cssunderhood фронтендеры сами придумали себе проблемы, сами написали утилиты для их решения и для решения этих решений.

@aka_LeLique @dan_abramov @cssunderhood CSS-файлы из пакетов как подключать планируете?

Ребят, мне кажется мы загнались - изначально вопрос был bower vs npm, а не bower vs webpack. Я не буду утвержать, что webpack хуже bower!

Пока обсуждали Bower выложил небольшой пример сборки html-письма:
gist.github.com/dshster/0f77a1…
можно пообсуждать #gulp #posthtml

Как вы относитесь к написанию велосипедов? Допустим есть чужой модуль, но он чем-то не подходит, варианты: написать свой, доработать чужой?

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

Как вариант устроить голосование, благо твиттер позволяет: Как вы оцениваете свой уровень в вёрстке?

Вопрос неспроста: js и css сильно пересекаются, сейчас почти не представить сайт без js в том или ином виде. Можно говорить о css или +js

Самое время поговорить о сайт-проектах? Рабочее время заканчивается, начинается личное. У кого-то опенсорс, у других калым или игры с CSS.

Как вариант: написание статей, изучение технологий или от звонка до звонка выключаем компьютер до утра? pic.twitter.com/gFmwMxypW5

Вечерняя тема для обсуждения: как вы учились вёрстке, с самого начала? Я вот помню у меня была большая книга по html в твердой обложке.

В этой книге были самые азы html без намёка на стили и тем более CSS. Я старательно выписывал в тетрадку все теги и параметры

Потом были распечатки html страниц с уже более подробным описанием тегов и параметров, вся вёрстка была без стилей - не было свойства style

После FrontPage шел Macromedia Dreamweaver как более продвинутый в плане генерации html, работы с фреймами, внешними стилями и даже ftp

Сайт музея делал в Dreamviewer. Это был уже серьезный подход: фреймы, меню с ховер элементами, внешняя таблица стилей и бесплатный хостинг

@cssunderhood а задайте такой вопрос:

С какого момента можно искать работу?

С того момента как заказчик захочет платить за результат или работодатель захочет взять в штат? C nj@pvlpvs

@cssunderhood А какие русскоязычные веб-ресурсы посоветуете?

С русскоязычными всегда всё сложно, Хабр в первую очередь, блоги фронтендеров. @psyw

Доброе утро верстальщики! Судя по голосованию тех, кто еще обучается вёрстке чуть больше профессионалов умеющих верстать всё на свете!

Сегодня поговорим про больную (для многих) тему - кастомизация стандартных элементов управления: кнопки, селекты, скроллбары, дропдауны

Дизайнерам почему-то никогда не нравятся нативные элементы управления браузера и они спят и видят как бы их перерисовать под нечто своё!

Самый важный вопрос кастомизации контролов - это не столько их внешний вид, сколько поведение привычное пользователю, а про это забывают

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

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

Поэтому кнопку часто эмулировали через набор span тегов, стилизуя их по дизайну и скрывая нативный элемент, даже Яндекс грешил этим

Самое главное при таком подходе весь функционал событий вешать именно на нативный контрол, а кастомизированным отображать состояние

К сожалению начинающие верстальщики об этом забывают вешая события на кастомизированный контрол и блокируют нормальную работу форм браузера.

Правильно сделанным контролом считается тот, который можно отключить и это никак не повлияет на работу формы - отобразятся нативные элементы

Есть момент, который игнорируют - привычка пользователя! Многие так переделывают элементы, что непонятно кнопка ли это, ссылка или квадратик

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

Не знал, что можно указывать "font-weight: lighter" или "font-weight: bolder", ставится в зависимости от родителя #css

Совет: если вы делаете свой элемент управления добавляйте свойство
user-select: none, caniuse.com/#feat=user-sel…, запрет выделения текста

Совет: если вы хотите сделать элемент неактивным добавляйте свойство: pointer-events: none, caniuse.com/#feat=pointer-…

Совет: на любой элемент взаимодействующий с пользователем добавляйте: cursor: pointer, т.о. пользователь отличит интерактивный элемент

3. всё что держит использование jquery это миллион готовых библиотек написанных под него @gearmobile, но это временно

Мой любимый элемент для кастомизации - select; допустить ошибок в реализации там можно столько же сколько и самих вариантов реализации

@cssunderhood плохой совет, вразрез со спекой toster.ru/q/19097 и рекомендациями Минздрава США guidelines.usability.gov/guidelines/104 одновременно

Разумно - отличать интерактивные элементы от текстовых ссылок открывающий новый контент. Но вариантов нет: default, pointer, text @SelenIT2

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

@cssunderhood hover-эффекты и изменение курсора важны, но кнопка должна быть понятной и без курсора, которого нет на мобильных устройствах.

Еще не забываем про ajax-ссылки - ссылки, которые не ведут на другие страницы, но частенько их оформляют тегом a[href="#"], что некорректно.

Без js есть вариант с псевдоселектором :target, тогда в зависимости от якоря в url мы можем показывать определенный блок и ссылка тегом <a>

Продолжая про select. У классического select два элемента: кнопка и выпадающий список, кнопку стилизовать не проблема в отличии от списка.

Некоторые (Bootstrap) не заморачиваются и стилизуют только кнопку оставляя выпадающий список нативным (его нельзя стилизовать через CSS)

Для тех кто стилизует список - плохие новости: большое кол-во вариантов взаимодействия пользователя и контрола которые нужно предусмотреть.

Самый очевидный - помещение списка в блок с overflow: hidden. Решается переносом выпадушки в конец html и привязкой координат кнопки

2. Закрытие выпадушки кликом не на кнопку, а на любой другой элемент страницы или свободную область, а так же на кнопку другого select

3. Click-Drag-Select. Пользователь прижимает мышь на кнопке, открывается список, "перетаскивает" курсор к нужному пункту, отпускает кнопку

Попробуйте проделать 3 пункт с любым нативным селектом, а потом с кастомизированным селектом на любимом сайте: 4 из 5 селекта не сработают.

Более сложная интерпретация Click-Drag-Select с прокручиванием списка: пользователь прижав мышь тянет список вниз и отпускает для выбора

@cssunderhood подскажите guide, как тестить страницу на респонсив?

Чуть проще стилизация полосы прокрутки, но дизайнерам нравится делать её достаточно узкой, что негативно сказывается на удобстве

А вы знали, что тянущуюся вёрстку делали задолго до появления мобильных браузеров и это было шиком и профессионализмом для верстальщика?

@toivonens @gearmobile @webholt @cssunderhood а я за WebdriverCSS не шучу. Плюсы Webdriver.io познал поработав с Appium и iOS simulator

@cssunderhood есть такой вопрос: почему нужно отказываться от Icon Fonts, чем хуже/лучше и тд.?

Интересный способ кастомизации textarea через (внимание!) div[contenteditable], если нужно добавить смайлы или оформление вводимого текста

Тащить wisywig библиотеку не всегда разумно, но без неё нас ждёт уйма сюрпризов: вставка форматированного содержимого через буфер обмена

Придётся писать велосипед перехватывающий вставку из буфера и очищающий форматирование, а так же перехват или запрет drag-n-drop в поле

Зато мы избавляемся от скрипта авторесайза поля редактирования - div автоматически обёртывает вводимый контент (textarea нет)

Но остаётся одна проблема которую я не смог решить - как перехватить Document.execCommand введённую в консоли, может кто-то сталкивался?

Как вы догад. я люблю писать велосипеды - подключение готового модуля ничего не даёт в понимании его работы в отличии от реализации с нуля.

Но смайлы исключение - современные браузеры в обычном input позволяют вводить unicode смайлы и даже в адресную строку или в поиск Яндекса ✌

В Chrome Canary очень уютненький режим эмуляции мобильных устройств @gearmobile pic.twitter.com/mGuG2ys5bs

Вот отличный вариант реализации скроллбара:
habrahabr.ru/company/2gis/b… и я бы сказал единственно верный способ использующий нативную прокрутку

Если есть вопросы про кастомизацию элементов управления пишите, обсудим. Всё на благо довольного пользователя =)

Я не фанат использования тегов только ради оформления, но иногда не обойтись: стилизация чекбокса предполагает передачу состояния инпута

Мы оборачиваем чекбокс в лейбл, скрываем инпут и после него добавляем тег для галочки: input:checked:before + span {content: url(checked);}

Недописал и отправил:) блокировать user-select предполагается там, где пользователь кликает, чтобы вместо клика не сработало выделение

@cssunderhood немного не по теме: какой выбор даты и времени самый лучший?

Лучшего нет, есть подходящий под требования. Например github.com/xdan/datetimep… или eonasdan.github.io/bootstrap-date… @Kiryous

Если речь про datetime picker, конечно =) @Kiryous

@lifeasecond @cssunderhood @jsunderhood я использую chosen.js.Замечательный, но с jquery.

Найти что-то независимое от jquery пока очень сложно,или это решение будет зависеть от еще кучи всего @gatilin2222 @lifeasecond @jsunderhood

@smithua @c01nd01r @cssunderhood Много читал о минусах шрифтов, но не вижу другого пути. Ибо спрайты грузятся каждый раз при загрузке

Если тяготит загрузка каждый раз кешируйте в localStorage, шрифты уже там кешируют, была статья на Хабре @gatilin2222 @smithua @c01nd01r

@cssunderhood как в готовом sketch-макете одним движением сделать ВСЕ слои экспортируемыми?

Пользуясь служебным положением дам совет: не пренебрегайте сохранением резервных кодов от sms или двухфакторной авторизации!

В один прекрасный момент вы можете не обнаружить в кармане свой смартфон или планшет с аутентификаторами и сим-картой. Всем хорошего дня!

@cssunderhood расскажите про тестирование сайтов/веб-приложений

@cssunderhood может вы знаете, где почитать про вот такой паралакс journey.lifeofpimovie.com ?

Например: github.com/htdt/parallax или github.com/markdalgleish/… т.е. фреймвор позволяющий ставить контрольные точки и события @Andrij_Lg

Позавчера была ссылка на webdriver.io и ru.bem.info/tools/testing/… - тестирование скриншотами отдельных блоков @PollyGlot

@PollyGlot @cssunderhood Из функционального хорошо заходит CasperJS на pre-commit hook. Из регрессивного вроде BackstopJS перспективен.

Разработчик @jsunderhood сейчас обсуждает тестирование @PollyGlot

@krasivieglaza @jsunderhood например learn.javascript.ru/testing

Рабочий день на исходе, важные дела уже закончены (надеюсь), можно и поговорить по душам, точнее про насущное, точнее про начало проекта!

Вот мы начинаем новый проект, большой или маленький, коммерческий или для своей кошки или любимой собаки, о чем думаем в первую очередь?

Выбор фреймворка, выбор шаблонизатора, подключение сборщиков или написание их, подключение css-фреймворка чужого или своего?

По-старинке (сарказм!) я использую bower. Первым делом настраиваю .bowerrc с директорией для хранения модулей (да, так можно)

Дальше через bower скачиваю normalize.css, кто еще использует этот файл для приведения в порядок стилей?

@cssunderhood разворачиваю gulp-сборщик любимый, и настраиваю его под проэкт

Даже подключаем базовый фреймворк нашего сайта (jQuery, Angular). Я даже для песочницы использую Angular - очень свыкся с ним.

Важный момент: перед написанием кода настроить .editorconfig - чтобы наш код выглядел аккуратно.
(тут холивар: пробелы vs табы)

Дальше по вкусу: less (stylus, scss), html, jade, haml...

Холивар 2: одно время была тема сортировки CSS-свойств, я был активным пользователем csscomb.com, но потом эта тема сошла на нет

К сожалению я не смог найти нормальной поддержки Csscomb в WebStorm поэтому последнее время сортирую свойства по памяти

Продвинутые разработчики пишут свои скрипты для разворачивания нового проекта, тут всё индивидуально - под особенности своей работы

Кто где хранит свои фронт-наработки, чтобы каталогизировать, запускать, быстро искать и удобно редактировать?

Немаловажный вопрос: локальный сервер для разработки - node http-server, denwer, или сервер в WebStorm

@cssunderhood gists/codepen/jsbin..

Gist интересный, но не поддерживает папки и я только недавно узнал, что туда можно коммитить как в обычный git-репозиторий (слоупок)

А еще у @mbostock есть сервис запуска примеров с gist bl.ocks.org, тоже моё недавнее открытие когда я увлёкся D3js

@cssunderhood Экспресс + Вебпак + хот-релоад. Иногда встроенный в Браузерсинк.

@cssunderhood я забыл еще это plnkr.co

Очень актуальная для меня тема - генерация Source maps для CSS и JavaScript файлов, почему-то я не смог завести это в Firefox

@cssunderhood @jsunderhood А кто-то уже разбирался с этим AMP? github.com/ampproject/amp…
geektimes.ru/post/266390/

@cssunderhood всегда считал бессмысленно учить не алфавитный порядок.. Поэтому F5 и некоторые правки.. )))

Многие скажут что алфавитный порядок свойств - зло @ADM_DESIGNHOUSE

Кстати, простите за опечатки - после рабочего дня уже глаза в кучу, а пальцы спотыкаются о клавиши =)

Как проходит вечер верстальщиков, кто верстает, кто программирует, кто тупит на Леп... Хабре?

@cssunderhood захожу на codepen на "минутку", зависаю на пару часов :)

Вечер, если принципы позволяют приближаться к монитору, можно посвятить новым статьям, примерам, там где поменьше думать и больше впитывать!

Вопрос с хранением исходников решили, есть еще вопрос хранения ссылок, как сейчас с этим дела, какие есть закладочные сервисы?

Часто находишь что-то новое и нужно куда-то складывать, пробовал Google Keep, Evernote, Pocket и даже Notepad, но ничего не прижилось плотно

@cssunderhood в который раз советую raindrop.io

Я им как-то начинал пользоваться, но видимо тогда этот сервис был крайне сырой @_sashashakun

@cssunderhood Пью чай и смотрю доклад про Фейсбук: youtu.be/X0VH78ye4yY

@cssunderhood еще активно использую trello.com

Трелло я тоже пытался приспособить: выглядит красиво, но на практике с закладками беда, если их много и в разных категориях @s_martynuk

И спасибо за напоминание, Трелло у меня был на планшете по которому у меня сегодня траур :-( @s_martynuk

Любимая тема - PixelPerfect, когда дизайнер присылает скриншот вашей вёрстки и наложенным поверх дизайном со словами - всё поехало!

В бурное обсуждение пиксельперфекта призываются хейтеры всех мастей :-)

Для себя нашел PerfectPixel плагин by WellDoneCode из Chrome Store. Позволяет накладывать слои, блокировать их открывая доступ к верстке

Или для Firefox addons.mozilla.org/ru/firefox/add… PixelPerfect плагин, хотя он не очень стабильный, как мне показалось

@cssunderhood моё любимое - когда в PSD-макете второй элемент из трех в списке зачем-то на пиксел в сторону. Это вообще регулярно.

@cssunderhood я дважды лишался работы на фрилансе из-за принципиальности в этом вопросе. Задача технолога — стандартизировать элементы.

Неужели дизайнер был непреклонен? @twenty

Заказчика редко волнует, что холст в Фотошопе это слегка другая среда нежели окно браузера @twenty

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

@cssunderhood А можно дизайнер ворвётся?) Единственное нормальное решение с «pixel perfect» – это верстальщик, интересующийся дизайном

А если верстальщик, так скажем, посильнее скиллами, бывает же такое, как объяснить дизайнеру что он слегка не прав? @vladyslavmoroz

@vladyslavmoroz @cssunderhood Ну а если верстальщик вместо отступов в 20 пикселов сделал 10 и еще выебывается, тут тоже надо разбираться.

Я вывел верстальщиков и дизайнеров на поле битвы :) Дизайнеры, почему вы делаете не круглые размеры элементов (473px vs 470px), фишка?

@cssunderhood, многие дизайнеры привязываются к сетке. Делают шаг в 21px, к примеру, основываясь на line-height основного текста.

Если речь о ширине контента, кроме варианта сложения ряда блоков? @MichaelSkripin

Доброе утро! В ответах интересные мнения о дизайне и вёрстке от подписчиков

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

Ребят, можете поделиться своей заготовкой для новых проектов? Чем пользуетесь? Yeoman?

@jsunderhood @cssunderhood

@cssunderhood Пиксельпёфект вполне годен для самопроверки фронтендера на внимательность. Ставить его как тех. стандарт – бессмысленно.

@cssunderhood а как же вариант, когда дизайнер рисует на глаз, игнорируя свои же гайдлайны? :)

Сегодня я весь в SEO, пытаюсь завести незаводимое, изучить Open Graph, Микродату и заставить поисковики увидеть мой AngularJs

Всегда недолюбливал SEO - казалось, что сайты делают для роботов, а не для людей, особенно что касается текстов и ключевых слов

Какая-то прям неделька верстки email-рассылок. @cssunderhood А как вы тестируете верстку для почтовиков?

Мне кажется единственный верный способ тестирования писем это почтовые клиенты, онлайн, оффлайн и мобильные @c01nd01r

Причем есть люди которые пользуются оффлайн-клентами, такими как Outlook @c01nd01r

В Facebook есть инструмент developers.facebook.com/tools/debug/og… который позволяет вывести opg параметры и получить слепок динамической страницы

Давайте пофилософствуем под конец рабочего дня, а именно про опыт прошлый и будущее: реально ли оставаться верстальщиком к старости?

Вот у меня был опыт вёрстки под разные IE, в том числе закругленные уголки и тени картинками, тянущаяся табличная верстка, ифреймы..

Можно ли считать сегодня этот опыт достаточно ценным? Если бы емайл-рассылки не верстались таблицами, то вряд ли

Рано или поздно вымрет Bootstrap, вымрет jQuery (ага!) и даже Angular и React - всё в изучение которого мы вкладываем кучу сил и времени

На днях я читал спецификации на WebRTC, и держа в голове мысль что это тоже веб и тоже фронтенд я с трудом понимал работу этих технологий

Сколько технологий приходится изучать пришедшим сегодня в фронтенд? Сколько технологий останутся актуальны, когда пришедшие наберутся опыта?

Меньше года назад я ничего не знал про Angular, сегодня он уже не такой популярный и возможно что-то новое на нём не посоветовал бы начинать

Когда я только начинал изучать jQuery был вопрос, почему его не встраивают сразу в браузер?

@cssunderhood Фреймворки уйдут, а опыт решения разных задач останется.

А так ли можно отделить опыт решения задач от опыта владения фреймворком? (с stackoverflow: Как сложить 2 числа с помощью jQuery) @sapegin

@cssunderhood меня всегда мотивирует пример @stucssplay

Я всё же вижу себя верстальщиком - точнее фронтенд разработчиком т.к. сейчас сложно отделить вёрстку от программирования

Мне нравится перевод рендеринга на клиент, нравится общение с сервером через REST, нравится унификация браузерных движков, даже мобильных

Мне кажется это ведёт к еще большей разгрузке серверов и переход на пиринговые технологии

Раз напомнили, и мне как раз 36. Пересмотрите: events.yandex.ru/lib/talks/2235/

@cssunderhood На самом деле «изучение Реакта» по большей части изучение того, как создавать приложения вообще. Сам по себе Реакт простой.

@cssunderhood конечно сервер от NodeJS чисто под фронтенд лучший вариант

Лист газеты фиксирован, сайт нет - он может масштабироваться, менять свои габариты, своё содержание, одни и те же вещи могут выглядеть разно

Дизайнеров которые пришли из полиграфии видно за версту по их стилю работы - они думают статичным контентом который никогда не меняется.

Сайт - гибкая и изменяемая среда, нельзя нарисовать картинку и быть уверенным, что везде всё будет точно так как на картинке.

Часто путь дизайнера это обрезание (не то) - длинный заголовок? Обрезать. Длинная аннотация? Обрезать. Даже имя пользователя грозят обрезать

Вот поэтому частенько на сайтах мы видим частокол из ссылок "Подробнее". Знакомо? :-)

Пользовательский контент у дизайнеров вызывает боль - что если заголовок статьи не 50 симв, а 4 строчки или картинка ну никак не квадратная?

@cssunderhood Потому что текст для многих дизайнеров — это просто прямоугольник, который надо как-то впихнуть в макет.

Ну конечно речь не про всех дизайнеров, чем профессиональнее дизайнер - тем он ближе к этой текучей среде как окно браузера.

@cssunderhood @sudilkovsky Модульность != повторяющиеся фиксированные блоки

@cssunderhood одна из горячо мною рекомендуемых книг для веб дизайнера называется “Настольная книга газетного дизайнера” ;)

@cssunderhood думаю в 50 лет для версстальщика управлять группой других верстальщиков или уютной веб-студией ;)

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

@cssunderhood в каких форматах подключать шрифты? Подключать ли svg? Приемлемо ли подключать ссылкой сразу на fonts.gstatic.com?

А чем формат WOFF смущает? caniuse.com/#feat=woff, кажется его все браузеры поддерживают (выше IE 8) @sanokps

@cssunderhood используете ли реквайр и как боритесь со скрипт еррор при сбросах соединений и плохих коннектах?

Один из способов увеличить таймаут. Не использую Requirejs после перехода на Angular @salionov

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

У дизайнера много сервисов чтобы презентабельно организовать портфолио, dribbble позволяет и показать заказчику и обсудить с коллегами

Верстальщику показывать в виде внешнего вида не с руки - и дизайн может быть чужой, голый код тоже не слишком показателей для заказчика

Похвастайтесь, пожалуйста, своим портфолио, если вы его как-то организуете?

Пока техника не наработана для использования в лайаутах. Возможно следующий сайт начну на них, если требования позволят @koderhan

Можно демонстрировать сложные интерфейсные решения, меню, дропдауны, интерактивные галлереи, адаптивный контент

@cssunderhood Раньше были скриншоты фриланса, что внутри. Сейчас просто список собственных проектов. Цели поменялись sapegin.me

@cssunderhood Ну к примеру вот так точно Уг a3s.com.ua :)

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

Уверен в подписчиках много людей занимающихся фрилансом, дизайном или ведущих блог или людей которые хотят зарабатывать на своей личности

Для фрилансера важна не столько хорошо выполненная работа и полученные деньги, но и положительные рекомендации и отзывы заказчика

Эти рекомендации имеют свойство накапливаться и создают положительный имидж разработчику, а значит возможность повышать стоимость работы

Даже переходя с площадки на площадку имя разработчика уже много может рассказать тем, кто вращается в среде технологий и разработки

@cssunderhood на эту тему есть хорошая книга, называется «Номер 1».

Как достигнуть уровня, когда уже не ищешь работу, а приходится выбирать из предложенных вариантов, когда за вашей головой начинается охота.

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

Чем отличается персональный бренд от интересной личности?

@cssunderhood любить свою работу, или хотя бы профессию. Остальное придёт со временем.

Личность разносторонне развита, бренд больше сконцентрирован в профессиональном поле

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

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

Если мы слышим "Дизайнер" - какая личность первым делом приходит в голову? Почему именно эта личность, среди миллионов других дизайнеров.

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

@cssunderhood ходячее пособие по тому что нужно делать и как это @schneidertobias иногда даже непонятно где он время на все это берет

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

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

@cssunderhood все звучит на деле просто, но вопрос знатокам: с чего начать на практике?

На практике привести публичную информацию о себе в порядок, создать персональный сайт, портфолио, резюме, начать вести блог @annasafronov

Второе, сконцентрировать вокруг себя аудиторию, которой интересно то, чем вы занимаетесь - разработка, дизайн, графика, музыка...

Востребовательнее это когда сами можем выбирать то, чем хотим заниматься, а не браться за что угодно, что предложили

Всё же личный бренд, как мне кажется, это финансовый инструмент

@cssunderhood Бренд = маржа, а еще бренд это причина выбора. Когда вас выбирают за то, что это ВЫ — можно называть любую цену.

Можно работать на показ в ущерб доходности, тонкая грань, можно быть крутым известным нищим программистом @betstep @annasafronov

В соцсетях многие строят свой бренд не на профессии, а на своей личности или даже внешности, но это не наш путь, как мне кажется.

Сколько лет открыт вопрос: персональный блог или блог в соцсети? В первом случае наша платформа и технологии, во-втором - готовая аудитория

А еще кажется есть тематический блоги в Linkedin, мне уведомления приходят на почту иногда.

Связка: персональный блог и твиттер для распространения вполне должна работать при грамотном подходе (если не злоупотреблять)

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

Группы в Linkedin это тоже самое, что и тематические группы в Google+. можно публиковать, можно обсуждать и иметь кое-какую аудиторию

@cssunderhood а покажите живые примеры таких сайтов?

Если ты рок-звезда, сын известных родителей или просто красавчик, то можешь попробовать :-) @Bizi

Пришли к тому мнению, что успех личного бренда зависит от размера аудитории и нашего имиджа (репутации)

До сих пор в сети пользуются популярностью статьи для новичков jQuery, казалось бы уж этого добра в сети навалом, ан нет, читают и ищут.

Важно как преподнести то, что мы хотим преподнести - доступно, проверенно, с уверенностью в то, что именно наши знания то что нужно!

@cssunderhood и я как новичок могу сказать спасибо тем кто пишет, но возникает вопрос - как в этом кол-ве инфы не застрять? Статей тонны :)

@cssunderhood назад к портфолио. у кого (из присутствующих здесь) есть сайт-портфолио?

Через 10 минут мы начинаем WSD в Киеве wsd.events/2015/11/28/, трансляция youtu.be/_Sx5jvT0qEU и хештег #wstdays pic.twitter.com/DZuz28LmY8

Планирую собрать, пока думаю в каком виде он будет - скорее всего показ отдельных элементов интерфейса @gearmobile

Каждый уважающий себя верстальщик должен собрать свой Bootstrap из сетки, набора стилей и кастомизированных элементов управления

Доброе утро, для тех кто недавно проснулся. Сегодня мой последний день в роли ведущего Верстальщика

Есть еще день чтобы обсудить всё то, что не обсудили или поговорить за жизнь, ведь не единой вёрсткой мы живём :-)

В окончании бурных выходных хочу поблагодарить всех кто читал, отвечал и ретвитил всю эту неделю. Для меня это был отличный опыт общения!

С вами был Дмитрий Швалёв: верстальщик, фронтенд разработчик. Подписывайтесь на @dshster и продолжим активно обмениваться опытом и идеями!

Желаю весёлого окончания недели и с нетерпением жду в эфире @cssunderhood следующего Верстальщика!

З. Ы. Отмечаю 232-летие буквы Ё!