dshster

23 ноября 2015, Казань, Татарстан республика

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

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

5:57

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

5:58

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

5:58

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

6:00

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

6:01

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

6:01
@cssunderhood как изменился процесс разработки после перехода, что было самое сложное?

Самое сложное это оценка задач, именно по ней строится беклог спринта - чем точнее оценка тем проще идёт спринт twitter.com/therlog/status…

6:10
@cssunderhood @dshster Привет!
Сорри за оффтоп … Но почему на твоём сайте вот так … Какой-то сакральный смысл? :) pic.twitter.com/MChqVcJYwS

Я вчера закомментировал ссылку - как оказалось нет ничего интересного в публичном доступе, чтобы не разочаровывать:) twitter.com/r3nya/status/6…

6:13

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

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

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

7:22

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

7:25

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

7:27

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

7:29

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

7:30

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

7:31

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

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

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

7:34

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

7:35

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

7:37

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

7:38
@cssunderhood Гоу на завод, тут есть один которому по зарез чего-то фокспрошное нужно допилить :))

Сдуть пыль с Pentium, протереть пузатый 14" монитор, поправить защитный зеленый экран, облачиться в свитер и пилить) twitter.com/POS_troi/statu…

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

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

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

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

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

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

7:54

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

7:54

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

7:56

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

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

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

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

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

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

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

8:27

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

8:28

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

8:29
@jsunderhood нужен ли бовер

Холивар продолжается. Кажется на него не будет ответа никогда, пока не придумают что-то третье twitter.com/iamstarkov/sta…

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

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

8:49
@cssunderhood ок, если кого-то заинтересует тема с процедурой получения валютных переводов на ИП — пишите в ответ.

Открыть счёт в валюте, оформить договор, счёт на оплату и акт приёма-сдачи работ. В чём еще тонкости с валютой? twitter.com/twenty/status/…

8:55

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

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

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

9:06
@cssunderhood как ведёшь/вёл бухгалтерию ИП? Какие-то сервисы, бухгалтер?

Я был на упрощёнке,там не нужна бухгалтерия, только работа со счетами, актами через Эльбу и раз в год уплата налога twitter.com/juwain/status/…

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

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

9:12
@cssunderhood @juwain Мое дело 333р/м, Эльба 500р/кв. Мне кажется ты где-то неправильно складываешь.

Может быть да, но когда тебе буквально нужно 3 бумажки оформить. Хотя весь смысл в синхронизации с банк-клиентом. twitter.com/exdeniz/status…

9:17
@cssunderhood усложнило и насколько процесс работы с такими клиентами? или упростило? увеличило ли прибыль?есть смысл на такое нацеливаться?

Зависит от прибыли, покроет ли она все расходы. Мало кто из физ. лиц работает с электронными деньгами. twitter.com/sushkazzlo/sta…

9:23

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

9:25
@cssunderhood у эльбы три банка интегриваны глубоко. Этого хватает для нескольких операций в месяц.
9:31
@cssunderhood Привет! А как в 2015 модно заливать изменения на прод (не html файлики по ftp)?

ftp однозначно нет. Есть Continuous Integration системы, например Teamcity, если проект достаточно большой. twitter.com/zyus/status/66…

9:33

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

9:36

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

9:39

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

9:40

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

9:42

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

9:45

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

9:48

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

9:50
@cssunderhood Привет. А еще вопрос вам и всем, кто видит - что делать, если на проде нет компаса и прочих сборщиков?

Ниже @sapegin предлагал своё решение github.com/sapegin/shipit, так же есть решения на rsync - синхронизировать файлы twitter.com/odd_wheel/stat…

9:53

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

10:00

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

10:07

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

10:08
@cssunderhood inline styles

Очевидно это вёрстка html-рассылок, хотя это хорошо автоматизируется - буквально на прошлой неделе занимался этим twitter.com/somerandstring…

10:10

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

10:11
Вот читаю @cssunderhood и @jsunderhood всё у них так просто, я как вспомню как верстал себе шаблон для блога, аж дрожь пробирает :)
10:12
@cssunderhood Очень правильно! Многие разработчики до сих пор верят, что делать всё руками лучше и вообще у них нет времени на автоматизацию

У меня нет времени собирать руками - на днях верстал письмо: Jade + PostHTML + CSS Inliner + nodemailer, Gulp сборка twitter.com/sapegin/status…

10:16

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

10:21
@cssunderhood visibility: hidden для лэйаута + visibility: visible для контента

Интересно, как это выглядит на практике и зачем делать visibility: hidden для лэйаута? twitter.com/dmitryshimkin/…

10:24

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

10:26

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

10:27
@cssunderhood Любимые работают только в твоем любимом браузере, элегантные — в браузере коллеги, и только костыли работают везде.

Отлично! twitter.com/webholt/status…

10:30
@cssunderhood А можно найти причину, почему задачу решать не нужно. Высшая степень оптимизации. @webholt

Это на тему общения верстальщика и дизайнера- убедить дизайнера, что так делать не нужно (верстальщик тоже дизайнер) twitter.com/sapegin/status…

10:31

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

10:34

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

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

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

11:28

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

11:30

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

11:35

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

11:37

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

11:38
@cssunderhood 😾 просто нужно избавиться от ненужных зависимостей, которые так красиво пиарят в блогах. Технологии ради технологий — зло!

Можно пример таких технологий ради технологий? twitter.com/aka_LeLique/st…

11:39
@li_rian @cssunderhood в идеале от всех, в реале от тех которые мешают именно вам. Вопрос на статью тянет 😆, уголовную 😄

Вы кажется не от тех технологий собрались избавляться, хотя от таких технологий избавиться точно нужно! =) twitter.com/aka_LeLique/st…

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

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

11:48

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

11:51

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

11:54

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

11:55

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

11:57
@cssunderhood подскажите, для чего используете PostHTML?

В основном подстановка аттрибутов в теги, например cellpadding/cellspacing в тег table или аттрибут width из стилей. twitter.com/arturi/status/…

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

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

12:07

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

12:08
@cssunderhood С нормально настроенной сборкой (Вебпак, например) это и не нужно.

Webpack это совсем другая тема twitter.com/sapegin/status…

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

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

12:18
@cssunderhood используйте для этого бандлеры — вебпак или браузерифай

Может так и говорить - отказывайтесь от Bower в пользу Webpack? Иначе странно твердить: bower - зло без альтернатив. twitter.com/iamstarkov/sta…

12:22
@dan_abramov @cssunderhood @aka_LeLique в package.json уже начали добавлять dist CSS-файлы?

Тоже вопрос, как же сборка вендорного js из npm? Опять упирается в "используйте Webpack" twitter.com/twenty/status/…

12:23
@freiksenet_ru @cssunderhood @dan_abramov я вот тоже не понимаю какая разница, куда удобно, туда и кладем. Если иное не оговорено тимой.

Не всё так просто, я запустил npm i angular, заглянул в package.json ищя ссылку на angular.min.js, а там её нет! twitter.com/aka_LeLique/st…

12:28

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

12:30
@sapegin @cssunderhood фронтендеры сами придумали себе проблемы, сами написали утилиты для их решения и для решения этих решений.
12:30
@aka_LeLique @dan_abramov @cssunderhood CSS-файлы из пакетов как подключать планируете?
12:32
@cssunderhood Если ты не используешь Вебпак (или броузерифай), ты не собираешь вендорный жс, а соеденяешь случайные js файлы.

Неправда, есть main-bower-files,который берет файлы из main секции bower.json, которые можно отсортировать и собрать twitter.com/freiksenet_ru/…

12:35
@cssunderhood Это все равно случайные файлы, твой код может один из них использовать или ни одного вообще.

Что значит случайные? Я сам составляю список нужных библиотек к bower.json проекта, а main-bower-files собирает в 1. twitter.com/freiksenet_ru/…

12:38
@cssunderhood Вот ты сейчас описал соединение случайных файлов, да. @freiksenet_ru

Объясните мне, что значит "случайных"?) twitter.com/sapegin/status…

12:39
@cssunderhood Ну вот ты вручную это пишешь, вместо того чтобы вебпак прошел по твоему коду, нашел зависимости и их забандлил.

Вручную я пишу только изначальный список устанавливаемых пакетов, а как Webpack может понять какой пакет мне нужен? twitter.com/freiksenet_ru/…

12:40
@sapegin @cssunderhood @freiksenet_ru как ты контроллируешь их порядок?

Хороший вопрос: gulp-order ставлю angularjs первым пакетом, остальное уже не важно, а если важно - добавляю в order. twitter.com/iamstarkov/sta…

12:41
@cssunderhood откуда ты знаешь на 100:, что «остальному» не важен порядок?

Я же подбираю сам библиотеки какие использую и вижу как они работают, если библиотеке важен порядок - я учитываю это twitter.com/iamstarkov/sta…

12:45

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

12:46
@cssunderhood подбираешь = читаешь исходник? чтобы понять, например, нужно полифилы или нет

Просматриваю исходник, читаю документацию, смотрю на совместимость, зависимость, требования twitter.com/iamstarkov/sta…

12:49
@cssunderhood Менеджеры пакетов не имеют смысла в вакууме. При использование Вебпака многие проблемы просто исчезают.

Я не буду утверждать обратное - Webpack появился намного позже того же Bower, а значит должен был решить недостатки twitter.com/sapegin/status…

12:52

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

13:44

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

14:32
@cssunderhood От ситуации зависит. Если написание своего имеет больше плюсов, чем переделывание готового под себя, почему бы нет?

Речь о небольших модулях, время на разработку которых с 0 равноценно дорабатыванию или в разумных пределах twitter.com/webholt/status…

14:35
@cssunderhood лучше всего попробовать доработать чужой, так как тогда не придётся мейнтенить свой велосипед

Есть риск начать мейнтенить чужой модуль, когда автор забьёт на него - и не понятно что лучше twitter.com/iamstarkov/sta…

14:37

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

14:45

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

14:52
@cssunderhood Это слишком необъективно.

Что может быть объективнее самооценки? Да и голосование анонимное - работодатель не будет смотреть его результаты twitter.com/webholt/status…

14:56

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

15:02
@cssunderhood Видел этот плагин? github.com/maltsev/postht…
буквально вчера появился. Мог бы пригодиться в верстке писем

Да, видел, еще не смотрел его. Как попробую отпишусь о впечатлениях twitter.com/voischev/statu…

15:27

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

15:58

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

16:01
@cssunderhood а где вариант, как в анекдоте, «сверстать-то могу всё, но иногда такая фигня получается...»? :)

3 вариант без "иногда" =) twitter.com/SelenIT2/statu…

16:17

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

17:50

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

17:51

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

17:54
@cssunderhood темные времена)

Это сейчас так кажется, а на тот момент самая прогрессивная технология, совместно с Internet Explorer 4 twitter.com/_sashashakun/s…

17:58
@cssunderhood Сначала собирал в wysiwyg, потом всё больше стал переключаться на исходник. Никаких книг, только статьи в инете по конкр.теме.

Вот, это уже следующий шаг: берем FrontPage, делаем в нём свой контент и разбираем получившийся исходник twitter.com/ThyBzi/status/…

18:01

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

18:03

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

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

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

18:07

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

18:08
@cssunderhood начинал по видео урокам Sorax'a

Это хорошие уроки! Я не фанат видео, но в данном случае исключение. Рекомендую: sorax.org @ArtSorax twitter.com/luxcodelab/sta…

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

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

18:56
@cssunderhood @psyw твиттеры и блоги фронтендеров можно посмотреть здесь github.com/talgautb/front… ;)
Ещё и добавить можно :)

Отлично! Вас посчитали =) twitter.com/talgautb/statu…

19:02
@cssunderhood соглашусь с @psyw
Однако посматривать туда однозначно стоит. Иногда попадаются любопытные авторские статьи.

Иногда попадаются интересные люди, у которых есть полезные блоги и публикации вне Хабра. Хабр как концентратор IT twitter.com/SilentImp/stat…

19:08
@cssunderhood @aka_LeLique а пробовал ли ты разделять по репозиториям зависимости?

Библиотеки сторонние как и инструменты для сборки, я не скачиваю их в свой репозиторий или может я не понял вопрос? twitter.com/myjsalterego/s…

19:26

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

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

7:51

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

7:53

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

7:55

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

7:58
@cssunderhood спорный вопрос, в развитии верстальщика есть стадия: «я знаю все», которая сменяется на: «я знаю ничего»

Это вам нужно к Сократу обратиться, он был мастер философии! twitter.com/gunlinux/statu…

7:59

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

8:00

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

8:03

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

8:04

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

8:06

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

8:08

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

8:13
@cssunderhood это потому что они на винде работают, а там с UI элементами все стабильно плохо

Можно подробнее про "всё стабильно плохо"? twitter.com/smithua/status…

8:21

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

8:23

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

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

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

8:38

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

8:41

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

8:43
@cssunderhood возвращаясь назад. почему не любишь jquery? решаешь ли все задачи с помощью angular вместо jquery?

1. применение jquery это не angular-way;

8:45

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

8:47

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

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

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

8:53

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

8:55
@cssunderhood на данный момент самые тяжелые в кастомизации UI элементы: select, input=“file”

Это простой для кастомизации: оборачиваем в label, скрываем input, кастомизируем label + js для отображения файла twitter.com/smithua/status…

8:58
@cssunderhood у обычных кнопок по умолчанию курсор default, что уже отличает их от «просто текста» с text и ссылок для перехода с pointer

Как отличить что это кнопка по наведению, какой курсор показывать на неактивной кнопке, если ссылка в виде кнопки? twitter.com/SelenIT2/statu…

9:00
@cssunderhood у активной кнопки должен быть :hover. Неактивной кнопке можно показать not-allowed

not-allowed кажется вообще никто не применяет, как быть с ссылкой, которая мимикрирует под кнопку (частый случай)? twitter.com/SelenIT2/statu…

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

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

9:09
@cssunderhood речь про якоря? как их тогда правильно использовать?

Так как такие ссылки работают через js то уместнее использовать тег span. twitter.com/sushkazzlo/sta…

9:14
@cssunderhood всё корректно, не правильно будет если пользователь не сможет увидеть данные по этой ссылке в случае эксцесса.

Согласен, скрытый контент нужно скрывать после загрузки js, чтобы в случае ошибки пользователь его увидел twitter.com/c1n1k/status/6…

9:15
@c1n1k @cssunderhood имхо, правильный подход всё-таки pepelsbey.net/pres/push-it/?…

Согласен, но часто бывают details ссылки, которые отображают небольшой блок контента - его не вынесешь на url twitter.com/SelenIT2/statu…

9:22

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

9:24

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

9:47

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

9:49

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

9:50

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

9:52

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

9:54

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

9:56

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

9:58

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

10:02
@cssunderhood @jsunderhood можете посоветовать плагины для стилизации селектов? желательно без зависимостей типа jquery

Например, БЭМ компоненты от Яндекса
en.bem.info/libs/bem-compo… twitter.com/lifeasecond/st…

10:03
@cssunderhood И правильно делают, обычно нет смысла переоформлять список. Ничего, кроме боли разработчику и пользователям это не принесёт.

Это дискуссионный вопрос, например, в том же Яндексе так не считают и сделали собственные стилизованные компоненты twitter.com/sapegin/status…

10:07
@cssunderhood все эти селекты на мобильных ведут себя херово

На мобильных устройствах заменяют стилизованный компонент нативным, в частности select, а у мобильного он свой twitter.com/pomidore/statu…

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

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

10:12

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

10:48
@toivonens @gearmobile @webholt @cssunderhood а я за WebdriverCSS не шучу. Плюсы Webdriver.io познал поработав с Appium и iOS simulator
11:01
@cssunderhood есть такой вопрос: почему нужно отказываться от Icon Fonts, чем хуже/лучше и тд.?
13:04

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

13:34

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

13:36

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

13:37

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

13:39

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

13:42

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

13:44

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

13:50

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

13:55
@cssunderhood пользуешься в работе Canary?

Использую для тестирования, если он не вылетает, что частенько с ним случается, да и интересно смотреть обновления twitter.com/meuwka/status/…

14:02

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

14:04
@cssunderhood у нас в колледже целый курс по селф-брэндингу был, было бы интересно почитать на эту тему

Мне было бы интересно пообщаться на эту тему, узнать что-то интересное twitter.com/annasafronov/s…

14:14

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

15:16

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

15:19

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

15:21
@cssunderhood только если это кнопка или что-то похожее. Бесит когда из попапа не скопировать сообщение об ошибке

Всё правильно twitter.com/boriscoder/sta…

15:22

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

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

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

15:35

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

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

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

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

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

16:01
@cssunderhood @smithua @c01nd01r SVG-спрайты можно как-то закешировать? Шрифт использую, потому что он кешируется

Вот вариант кеширования SVG в localStorage: osvaldas.info/caching-svg-sp… twitter.com/gatilin2222/st…

16:11
@cssunderhood а чем сейчас лучше добавлять динамики без jQuery? Немного интерактивности в формах, таблицах, попапы, тултипы (не SPA)

Проблема не в самом jQuery, а в необходимости тащить его на проекте под Angular, например, а это уже плохо. twitter.com/dmzkrsk/status…

16:13
@cssunderhood От Реакта, например. Но это не проблема :-) @gatilin2222 @lifeasecond @jsunderhood

Не проблема использовать модули реакта с реактом, а модули jquery c jquery. Проблема связать несвязуемое :-) twitter.com/sapegin/status…

16:25
@cssunderhood как в готовом sketch-макете одним движением сделать ВСЕ слои экспортируемыми?
19:21
@cssunderhood angular с jquery плохо? Angular же зависит от jquery.

Angular не зависит от jquery, но в нём есть встроенный jquery lite для работы с DOM через директивы twitter.com/maxmaximov/sta…

19:22

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

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

8:58

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

8:59
@cssunderhood Ну и придёться тогда ввести свой 100500 символьный пароль :)

Речь не про PIN-коды, при 2FA бесполезен 100500 символьный пароль без аутентификатора или резервного кода. twitter.com/POS_troi/statu…

9:05
@cssunderhood расскажите про тестирование сайтов/веб-приложений
9:45
@cssunderhood может вы знаете, где почитать про вот такой паралакс journey.lifeofpimovie.com ?
12:29

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

12:31

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

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

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

13:01

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

14:33

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

14:34

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

14:36
@cssunderhood поддерживаем IE или нет

Отлично, но уже не обязательно и показать ради примера Microsoft. twitter.com/kelyar/status/…

14:37

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

14:39

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

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

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

14:43

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

14:45

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

14:49

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

14:51

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

14:53

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

14:55

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

15:00
@cssunderhood А чем Git не устраивает? (вообще ниразу не фронт я) :)

Я имел ввиду что-то как jsfiddle, github для хранения, но там не очень удобно хранить мелкие скрипты. twitter.com/POS_troi/statu…

15:06

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

15:08
@cssunderhood gists/codepen/jsbin..
15:08

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

15:10

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

15:12
@cssunderhood Экспресс + Вебпак + хот-релоад. Иногда встроенный в Браузерсинк.
15:18
@cssunderhood Гист удобен, чтобы показать кому-то кусок кода, да и создаётся одной командой в терминале. Но найти там что-то сложно потом.

Найти в гитхабе вообще что-то очень сложно, у меня сотни репозиториев в закладках - не зная название искать долго twitter.com/sapegin/status…

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

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

15:24
@cssunderhood @jsunderhood А кто-то уже разбирался с этим AMP? github.com/ampproject/amp…
geektimes.ru/post/266390/
15:31
@cssunderhood всегда считал бессмысленно учить не алфавитный порядок.. Поэтому F5 и некоторые правки.. )))
15:34

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

15:37
@cssunderhood да знаю.. Но так само легко проверить на наличие дублированных свойств.

Проверять дублирование свойств дожна умная IDE - это её работа следить за косяками программиста twitter.com/ADM_DESIGNHOUS…

15:44

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

15:58

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

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

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

17:50

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

17:51

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

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

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

17:56
@cssunderhood Пью чай и смотрю доклад про Фейсбук: youtu.be/X0VH78ye4yY
17:58
@cssunderhood еще активно использую trello.com
18:09

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

18:09

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

18:11

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

18:30

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

18:31

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

18:34

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

18:35
@cssunderhood моё любимое - когда в PSD-макете второй элемент из трех в списке зачем-то на пиксел в сторону. Это вообще регулярно.
18:36
@cssunderhood я дважды лишался работы на фрилансе из-за принципиальности в этом вопросе. Задача технолога — стандартизировать элементы.
18:37

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

18:37
@cssunderhood там скорее заказчик считал, что технолог — такая коробочка, конвертирующая PSD в HTML+CSS+JS.

Ну в принципе так оно и есть - заказчик видит дизайн и хочет получить точь-в-точь, но "живое", кликабельное. twitter.com/twenty/status/…

18:42

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

18:44

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

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

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

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

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

19:46
@cssunderhood Очевидно чтобы можно было элементом ровно разделить четную ширину.

Вот совсем не факт, тогда нужно использовать сетку или делать элементы тянущимися в процентах twitter.com/freiksenet_ru/…

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

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

20:10

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

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

8:05
@cssunderhood дизайнер должен делать дизайн не думая о технологиях, после обсудить с технологом, поправить и показать заказчику.
8:05
@cssunderhood делаю круглыми. Если где промахнусь случайно (скажем элемент получился в 472пкс), то технолог понимает,что я хотел сделать 470

Интересно, @MichaelSkripin ниже был другого мнения и говорил, что все значения неспроста twitter.com/ontozhka/statu…

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

@jsunderhood @cssunderhood

8:46
@cssunderhood Пиксельпёфект вполне годен для самопроверки фронтендера на внимательность. Ставить его как тех. стандарт – бессмысленно.
12:37
@cssunderhood а как же вариант, когда дизайнер рисует на глаз, игнорируя свои же гайдлайны? :)
13:23

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

13:43

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

13:44
@cssunderhood на собеседовании один парень сказал, что у гугла с этим проблем нет. Но самому мне проверять не доводилось.

У Гугла нет, если пропускать страницы через сервис prerender.io, но если десятки тысяч страниц, то случаются затыки twitter.com/vladimore/stat…

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

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

13:57

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

13:58
@cssunderhood @c01nd01r thunderbird :)

Вот Outlook не поддерживает очень много современных свойств, там даже кнопку с закругленными углами не сделать сразу twitter.com/POS_troi/statu…

14:04
@cssunderhood И таких много, потому что веб-интерфейсы сосут по сравнению с приложением. @c01nd01r

Зато не каждое приложение может встроить продвинутый WebView и отображать современное оформление. twitter.com/sapegin/status…

14:14
@vladimore @cssunderhood Google начиная с мая 2014 года хорошо справляется со SPA приложениями. К сожалению, yandex пока не умеет так.

Яндекс Музыка динамический сайт, но не использует hashbang, при обращении поисковика выдаёт слепок страницы twitter.com/donbobka/statu…

15:13

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

15:25

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

15:55

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

15:56

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

15:57
@cssunderhood доклад Макишвили 36.

Спасибо, пересмотрю, но у каждого своё мнение на этот счет twitter.com/twenty/status/…

15:59

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

16:00

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

16:03

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

16:04

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

16:06

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

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

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

16:11
@cssunderhood так по итогу практически встроили же, в виде querySelector-а :)

А с другой стороны - раньше был один jQuery, а сейчас десятки фреймворков и еще столько же на подходе twitter.com/SelenIT2/statu…

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

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

16:15

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

16:18

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

16:20
@cssunderhood *до* jQuery тоже были и Prototype.js со scriptaculous, и Dojo, и еще много чего, и у новичков тоже глаза разбегались:)

Были, но там была проблема с порогом вхождения, jQuery же сделался доступным для совсем начинающих twitter.com/SelenIT2/statu…

16:22

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

16:30
@cssunderhood На самом деле «изучение Реакта» по большей части изучение того, как создавать приложения вообще. Сам по себе Реакт простой.
16:30
@cssunderhood Верстка станет не актуальной?? Может найдется какой-нибудь "Dreamweaver Flexbox" ??

Вёрстка всегда будет актуальной, вопрос актуально ли верстать в 50 лет :-) twitter.com/vadic_m/status…

19:50
@cssunderhood конечно сервер от NodeJS чисто под фронтенд лучший вариант
19:50
@cssunderhood я раньше верстал газету, сейчас сайты)) стандарты и результат остались теже поменялись только инструменти.

Вот в корне не согласен - страница сайта это совсем другая среда, нежели лист газеты. twitter.com/trolizmaslom/s…

20:24

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

20:26

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

20:28

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

20:32

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

20:33

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

20:34

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

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

Лорем ипсум обрезать проще всего- смысла во фразе нет,значит можно резать по любому пробелу.А вот осмысленный текст? twitter.com/sapegin/status…

20:39

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

20:40
@cssunderhood верстка газеты очень схожа с веб дизайном. Принципы модульности одинаковые.

Если сайт в виде газеты, то да. Но так ли удобны и востребованы сайты повторяющие фиксированные газетные блоки? twitter.com/sudilkovsky/st…

20:46
@cssunderhood @sudilkovsky Модульность != повторяющиеся фиксированные блоки
21:21
@cssunderhood одна из горячо мною рекомендуемых книг для веб дизайнера называется “Настольная книга газетного дизайнера” ;)
21:21

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

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

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

8:37
@cssunderhood Говорят, от собственно программирования очень отвлекает. @beskrovnyy

Говорят, собственно программирование там сходит на нет и через какое-то время ты уже мечтаешь как бы пописать код twitter.com/sapegin/status…

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

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

9:23
@cssunderhood Тем, что нужен ещё WOFF2 ;-) @sanokps

Кому он нужен? :-) twitter.com/sapegin/status…

9:24
@cssunderhood как нужно подключать щрифты если нужна поддержка ie9+ ?

IE9+ поддерживают спецификацию w3.org/TR/css3-webfon… twitter.com/koderhan/statu…

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

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

12:25

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

12:54

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

12:55

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

12:56

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

12:57
@cssunderhood Вы используете на рабочем проекте flexbox ?

Использую для организации внутренних элементов, но не для лайаута twitter.com/koderhan/statu…

12:58
@cssunderhood у верстальщика есть свой сайт, где он может всё своё хранить и показывать

А в каком виде ему демонстрировать свою работу? Живой пример, пример + код? twitter.com/straykov/statu…

12:59

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

13:02
@cssunderhood А что считать живым примером?
Набор статических HTML страниц у себя на сервере или живой сайт заказчика?
Второе не вариант :)

На сервере заказчика не так надёжно, и нужно ли показывать целый сайт? Можно отдельные компоненты. twitter.com/POS_troi/statu…

13:05

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

13:07
@cssunderhood Раньше были скриншоты фриланса, что внутри. Сейчас просто список собственных проектов. Цели поменялись sapegin.me
13:07
@cssunderhood Я упустил момент контекста вопроса, толи про демонстрацию заказчику толи про портфолио :)

Портфолио, как демонстрация своего уровня потенциальному заказчику twitter.com/POS_troi/statu…

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

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

14:22

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

14:23

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

14:24

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

14:25

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

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

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

14:27

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

14:30

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

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

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

14:34
@dimaip @cssunderhood это необходимое, но недостаточное условие

Любовь к работе это, так скажем, основа на которой можно строить свой профессионализм, без этого не получится ничего twitter.com/iamstarkov/sta…

14:35

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

14:37

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

14:40

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

14:46

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

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

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

14:50

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

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

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

14:53

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

14:55
@cssunderhood и где та грань, между рациональным развитием брэнда и работой на показ?

Всё же бренд это не благотворительность, цель бренд - стать дороже, профессиональнее и востребовательнее twitter.com/annasafronov/s…

14:57

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

14:58

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

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

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

15:02
@cssunderhood @annasafronov экономика жестокая наука. Вы говорите лишь о неумении монетизации

Умение монетизировать свою известность это тоже умение и не такое простое как на первый взгляд - продать себя дороже twitter.com/betstep/status…

15:07

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

15:10

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

15:35
@sapegin @cssunderhood теперь вроде все фейсбук читают, как раньше френдленту жж

В Facebook есть аудитория, но я не понимаю как там можно вести блог - неудобно ни писать, ни читать. twitter.com/straykov/statu…

15:41

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

15:42

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

15:45

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

15:45

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

15:48
@betstep @cssunderhood то есть продвигаться не на своих подвигах, а на умении заинтересовать аудиторию

Это сейчас популярно: Instagram, Periscope, Pinterest... twitter.com/annasafronov/s…

16:23
@cssunderhood а покажите живые примеры таких сайтов?
16:23
@cssunderhood так? peterfinlan.com

Я вижу там только отсылки на dribbble twitter.com/gearmobile/sta…

17:31

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

17:32

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

17:37
@cssunderhood @annasafronov возможно глупо, но о чем блог писать? О своем опыте и успехе/неудачах? Так мне кажется полным полно таких в сети

Именно то, что таких полным полно в сети может сыграть на руку - мы можем облегчить путь тем кто его идёт за нами twitter.com/nesfilinova/st…

17:39

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

17:40

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

17:41
@nesfilinova @cssunderhood тоже хороший вопрос. скиллы у нас одни и те же, но опыт разный, наверное, об этом и писать

Любую задачу можно решить разными путями, может чей-то путь окажется более оптимальным и интересным twitter.com/annasafronov/s…

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

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

@cssunderhood назад к портфолио. у кого (из присутствующих здесь) есть сайт-портфолио?
8:14
Через 10 минут мы начинаем WSD в Киеве wsd.events/2015/11/28/, трансляция youtu.be/_Sx5jvT0qEU и хештег #wstdays pic.twitter.com/DZuz28LmY8
8:15

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

8:19

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

8:23

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

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

7:31

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

7:32

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

14:39

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

14:39

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

14:40

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

14:43

github.com

other