# Понедельник 121 твит
Всем привет! На этой неделе твиттер захвачен мной, @life_maniac! Я работаю фронтенд-разработчиком в @autoru.
11:22Как таковых четких планов по обсуждению тех или иных тем нет, но я накидал несколько пунктов, которые хочу с вами обсудить)
11:25Сегодня будет разминочный день. У меня это первый рабочий день после праздников, пытаюсь влиться в обстановку и переключиться на дела :)
11:27Как у вас прошли праздники? Что успели изучить нового/сделать полезного?
11:28В качестве небольшого вступления: я не родился фронтендером, а переквалифицировался в него из рядовых верстальщиков.
11:34С версткой познакомился еще в школе в 9ом, кажется, классе. Началось все, естественно с narod.ru, странных хомяков и небольших фрилансов.
11:35Дальше на ucoz’е спалил у одного товарища в подвале сайта «html-верстальщик». Заинтересовался, полез смотреть функционал.
11:36Продолжу. В общем, на достаточно длительное время я «застрял» в обычных верстальщиках: нарезал макет, прицепил плагин, сдал заказчику.
11:43Как раз в реплаях был вопрос про то, что же отличает меня от верстальщика. Помимо умения пользоваться технологиями, поддержки своего кода
11:48@cssunderhood скачал на сайте @marvelapp рамки с сеткой marvelapp.com/static/assets/… и распечатал11:50
Довольно интересный вопрос, в общем. Верстальщик верстает макет. Все. Под моей ответственностью весь фронт проекта. Шрифты,пиксели, скорость
11:51Различные ситуации «а что если», «а как будет на мобильных». В общем, фронтендер - это самостоятельный верстальщик. Человек-команда.
11:52@cssunderhood Шрифты, пиксели, скорость и тд. не касаются верстальщика разве?
В идеале касаются. Но не все заморачиваются. Т.е. для верстальщика цель - отдать конечный макет. twitter.com/akrekotun/stat…
11:55@cssunderhood Шрифты, пиксели, скорость и тд. не касаются верстальщика разве?
Как я уже говорил, фронт - взрослый верстальщик. Который не просто подцепляет библиотеки, пишет css и html. twitter.com/akrekotun/stat…
11:56@cssunderhood и как ты выбрался из этого? И какой сейчас основной стек технологий используете в компании?
Плюс походил по собеседованиям, посмотрел требования вакансий, пообщался с коллегами по области, понял, что нужно twitter.com/Tom910ru/statu…
11:58@cssunderhood а разве фронтэнд разработчик не занимается проработкой логики на js? ajax запросы и обработка ответов сервера например
Я к этому настолько привык, что держу по умолчанию в голове. Да, конечно же. twitter.com/jahmalka/statu…
12:03@cssunderhood peoples, нужен простенький и удобный инструмент такого плана - типа записной книжки: "сегодня освоил то-то", "сделал то-то"
Обычно, если мне нужно что-то вроде ToDo, я пользуюсь Wunderlist. Или Evernote. Тоже любишь вычеркивать?) twitter.com/gearmobile/sta…
12:05@cssunderhood дизайнер отдельно, да?
Да, команда дизайнеров отдельно. twitter.com/unreal_michael…
12:06Внезапно подошли к теме, которую я себе тоже записывал. В прошлом году я начал составлять для себя список вещей, про которые я обязан знать
12:07Естественно, что фронтенд-разработка - область моментально меняющаяся, за всем уследить невозможно, Что бы вы порекомендовали отслеживать?
12:08@cssunderhood ретвить интересные ответы пожалуйста)
Конечно, не вопрос) twitter.com/red_fox_nsk/st…
12:10@cssunderhood обычно рекомендую для начала @PostHTML и @PostCSS12:11
@cssunderhood React и CSS Modules12:12
@cssunderhood и чем больше знаешь, тем больше вещей надо знать :\
Само собой. Зато ты выгодно отличаешься от других специалистов) twitter.com/c01nd01r/statu…
12:14@cssunderhood я бы порекомендовал доклад @listochkin про hipe youtu.be/xPFRUM_oDKA12:14
@cssunderhood Angular2
Про Ангуляр хочется отдельно поговорить. На каникулах читал статью medium.freecodecamp.com/angular-2-vers…, Ангуляр крутой, но.. twitter.com/shurikadze/sta…
12:17@Tom910ru @cssunderhood все так. Как говорил мой препод информатики в школе: «Чем больше область знания, тем больше область незнания».12:17
Я помню, что тут довольно часто поднималась тема bem в целом, хочу тоже сказать несколько слов.
12:19Когда-то в момент перехода на nodejs по задумкам дизайнеров мне пришлось использовать bem-component "какбутстрап". И это было ужасно.
12:23Как делал я: писал json, описывающий блок и вытаскивал из скомпиленного html разметку для блока. Это некрасиво и неудобно.
12:27Бьется верстка, не всегда удобно без костылей достать данные и вообще чувствуешь себя некомфортно.
12:28В стэке я работаю сразу с данными и блоками, мне не нужно цепляться за длинную портянку классов, проваливаясь до самого последнего элемента.
12:29@cssunderhood будущее Ангуляр2 пока не известно, но развитие этого фреймворка, однозначно, стоит отслеживать. Пока всё выглядит интересно
Кайф от Ангуляра я испытал только когда пилил тестовое задание - форму авторизации. ng-директивы и вот это всё.Круто twitter.com/shurikadze/sta…
12:31@cssunderhood будущее Ангуляр2 пока не известно, но развитие этого фреймворка, однозначно, стоит отслеживать. Пока всё выглядит интересно
Немного смущает, что в итоге я очень много пишу в самой разметке, пока добавляю нужную мне логику. twitter.com/shurikadze/sta…
12:31Как-то мало посоветовали. На праздниках сел читать про es2015, пока он не сильно остыл. Что вас привлекло и чем уже пользуетесь?
12:32@cssunderhood Про не сильно остыл хорошая шутка ;-)
Это все из-за того, что я слишком поздно добираюсь до технологий. С одной стороны - область уже достаточно изучена, twitter.com/sapegin/status…
12:35@cssunderhood Про не сильно остыл хорошая шутка ;-)
.. а с другой ты остаешься чуть ли не единственным непосвященным человеком. Сел читать и понял,сколько всего упустил twitter.com/sapegin/status…
12:36@cssunderhood самые популярные штуки у меня - arrow function, classes, assignment destructuring, generators. Ну и конечно же let, const12:40
@cssunderhood У меня тоже так бывает. Полгода читаешь восторженные отзывы и думаешь «херня какая-то», А потом оказывается и правда круто.
Помню, когда появился flexbox, я почти сразу же заинтересовался. Это еще он в старом синтаксисе был. twitter.com/sapegin/status…
12:44@cssunderhood Arrow Functions, Destructuring Assignment (из пуфона люблю, но не юзал в JS на практике), Spread Operator.12:45
@cssunderhood А я по флексбоксу угорел, когда можно было уже полноценно юзать. Пока технология нигде не работает, её смотреть грустненько.
Я тогда в Хроме потестил, поронял слюни и с грустью закрыл. Сейчас все уже от поддержки IE зависит. twitter.com/webholt/status…
12:48@cssunderhood я как обычно схватился за все сразу: React, React Native, Erlang, SICP. React и RN крутые, остальное пока не распробовал:)
Кстати про «все сразу». Как удается не терять фокус? twitter.com/_sashashakun/s…
12:49@cssunderhood завтра MS прекращает поддержку IE до 11 версии, как будешь праздновать?
Наверное, никак. Я ориентируюсь на поддержку IE у нас по проекту. twitter.com/smithua/status…
12:55@cssunderhood завтра MS прекращает поддержку IE до 11 версии, как будешь праздновать?
Т.е. пока мы не оставим IE11 минимальной поддерживаемой версией, радоваться особо нечему. Спасибо, что не <IE8 twitter.com/smithua/status…
12:56@cssunderhood А какая сейчас минимальная?
10ая. В 8-9 просто следим, чтобы проект не разваливался. Ну и предупреждающий попап вроде висел, если не спилили. twitter.com/webholt/status…
13:00@cssunderhood То есть 10 — полноценная работа, 8 — доступность всей функциональности любой ценой?
Да, стараемся. twitter.com/webholt/status…
13:05@cssunderhood занимаешься ли дополнительно какими-то другими проектами, кроме рабочего?
В данный момент нет.В прошлом году параллельно с основной работой фрилансил, но там скучища - много WordPress сайтов twitter.com/Iren_Karrsom/s…
13:23@cssunderhood занимаешься ли дополнительно какими-то другими проектами, кроме рабочего?
Много лет назад вел @web_grower - журнал в помощь веб-мастерам, верстальщикам и т.д. Сейчас он мёртв. twitter.com/Iren_Karrsom/s…
13:24@cssunderhood занимаешься ли дополнительно какими-то другими проектами, кроме рабочего?
И основная причина, наверное - основной работы очень много. Приезжаю домой и падаю спать. twitter.com/Iren_Karrsom/s…
13:28@cssunderhood подписаться на чуваков, которые ведут андерхуды.
Это само собой. Правда то, что подписываешься на чуваков не гарантирует фронтендовую тематику. Не всегда. twitter.com/c01nd01r/statu…
13:29@cssunderhood о да))
Причем удивляет, что в платных темах так много «говнокода». Касается как css, так и js. Особенно js. twitter.com/Iren_Karrsom/s…
13:30Все тут линтерами/хинтерами пользуются? Нашел тут на днях хорошую ссылочку github.com/stylelint/styl…. Линтер для css.
13:37@cssunderhood Думаю, основная аудитория платных тем — не разработчики, это позволяет говнокодерам выживать и преуспевать.
там забавно, что частенько половина функционала прописана в админке,есть в коде, но не работает.Мертвые души в коде. twitter.com/sapegin/status…
13:38@cssunderhood Там и сам WP ужасный и старый внутри. Все жду, когда они его сделают "нормальным" поломая совместимость
Ты про Calypso? github.com/Automattic/wp-… twitter.com/Tom910ru/statu…
13:44@cssunderhood ESLint для js, Stylelint для PostCSS13:45
Кстати, я пока не пользуюсь линтерами для стилевых файлов. Для js - jscs и jshint.
13:48@cssunderhood Использую как плагины к atom + еще eslint и htmlhint13:48
@cssunderhood Это только админка, которая работает с rest wp, скорее просто переписать и привести к атуальному виду. После Symfony2 сложно
Да, это админка к Wordpress.com. Просто помню крики,что Wordpress перепишут на nodejs,думал про standalone twitter.com/Tom910ru/statu…
13:49@cssunderhood Для Яваскрипта давно, но для CSS только подумываю прикрутить scss-lint. А ещё хочу попробовать github.com/wooorm/remark-…13:50
На праздниках, кстати, подпиливал тему для Ghost, форкнутую у одного товарища. Удивлялся, что он использует scss, но не использует его
13:54.. возможности по полной. Т.е. там максимум переменные и инклюды файлов. И все. Вот посмотреть можно: github.com/Defite/attila
13:54Нет, я понимаю,у меня Stylus головного мозга,где я привык к блочности и наследованию классов,но все же зачем использовать ради использования
13:56@cssunderhood было озарением, когда осознал, что если инструмент предоставляет какую-то возможность, то не обязательно ей пользоваться.
Довольно странный подход. Что-то вроде «я модный, у меня проект собирается через grunt/gulp» twitter.com/smmurf/status/…
14:02@cssunderhood Ну при таком использовании да, sass почти бессмысленен
Я периодически пересматриваю .styl в своем проекте и стараюсь их улучшить с точки зрения возможностей Stylus. twitter.com/Tom910ru/statu…
14:03@cssunderhood галп уже не модно
Т.е. я свой yeoman-генератор могу не переписывать? Фууух) twitter.com/vladimore/stat…
14:32@cssunderhood нет, это что-то вроде, что всё нужно использовать по необходимости, а не потому что оно там есть.
Я согласен, но не в случаях, когда оно висит для галочки и не используется вообще. twitter.com/Sigiller/statu…
14:33@cssunderhood плюс иногда лучше взять инструмент с большими возможностями просто про запас
Если ни на что не влияет - почему бы и нет. В нужный момент не придется бегать с горящей.. ну, понятно. twitter.com/Sigiller/statu…
14:33@webholt @cssunderhood флексбокс работает везде кроме <IE10. Кстати, вот подборочка инфы по нему afider.github.io/flexbox/
caniuse.com/#search=flex и как в рекламе «А для остального есть полифил». twitter.com/beskrovnyy/sta…
14:34@webholt @cssunderhood флексбокс работает везде кроме <IE10. Кстати, вот подборочка инфы по нему afider.github.io/flexbox/14:34
@beskrovnyy @cssunderhood А я о чем? Говорю ж, уже угорел, уже можно юзать. Ну и вот еще :: twitter.com/lazy_frontend/…14:35
@beskrovnyy @cssunderhood И стоит отметить необходимость автопрефиксера. Однажды взгрустнулось, когда Safari ответил «нет» без вендорщины
Без автопрефиксера я ни один проект себе не представляю. Были, правда, случаи, когда он не спасал twitter.com/webholt/status…
14:36@cssunderhood какие-то проблемы с @getbootstrap?
Давно не пользуюсь. Перешел на концепцию - на странице только то, что используется. twitter.com/GrawlCore/stat…
14:37@cssunderhood какие-то проблемы с @getbootstrap?
А @getbootstrap вываливает портянку вообще всего, что он имеет мне предложить. Могу поворчать про вес. twitter.com/GrawlCore/stat…
14:37А к вечеру ещё и @rubyunderhood и @cssunderhood подтянутся ;) twitter.com/palpatinen/sta…
Да нет же, мы уже работаем) twitter.com/backendsecret/…
14:40@cssunderhood ну можно так и про @ZURBfoundation сказать. а можно пользоваться Sass-модулями и компилировать только нужные компоненты.
Так в целом про любой фреймворк можно сказать, согласен. twitter.com/GrawlCore/stat…
15:19@cssunderhood @getbootstrap есть кастомные билды
Это да. Я еще по аналогии с jqueryui-билдами боюсь забыть зависимости :D twitter.com/iamstarkov/sta…
15:21@cssunderhood стоит, теперь уже на webpack)
webpack в планах к изучению. Вчера читал статью про css modules, там зацепился за webpack twitter.com/Tom910ru/statu…
15:22@cssunderhood к тому же, @getbootstrap, я уверен, как и любой набор компонентов, можно хитро заворачивать и подгружать по требованию
В тред призываются знатоки. twitter.com/GrawlCore/stat…
15:23@cssunderhood ну вот затем у твоего друга и прикручен @SassCSS.
Про запас, так про запас, я не против. twitter.com/GrawlCore/stat…
15:25@cssunderhood стоит упомянуть ссылку на 10up/flexibility github.com/10up/flexibili…15:25
@cssunderhood читал про js. Все не мог придумать пример для практики
Самое распространенное - ToDo-листы.На самом деле у меня такая же проблема с Express была - не мог придумать пример. twitter.com/koderhan/statu…
15:27@webholt @cssunderhood да, мой дизайнер как раз был на 8-м сафари когда ужаснулся тому что увидел :) Для восьмерки еще нужны префиксы.
Тестировщики в радости, дизайнеры в гневе, и именно таким составом набегают на меня и начинают допрашивать) twitter.com/beskrovnyy/sta…
15:28@cssunderhood @webholt разве сейчас флексбокс нельзя юзать?
Можно и нужно. Помним про префиксы и ie версии ниже 9 (включая). twitter.com/koderhan/statu…
15:29@cssunderhood так вот же: “будущее доставки веб-приложений уже наступило” (на английском) medium.com/@ryanflorence/…15:29
Продолжаем разговор. Долгое время я думал, что портфолио верстальщика/фронтенд-разработчика должно как-то презентовать внешний вид работ.
15:45Т.е. должны быть все эти няшные анимационные эффекты при :hover, куча шрифтов, попапов и так далее. Я не решался это сделать, и, кажется,ок
15:46Суть в том, что внешний вид, конечно, никто не отменял, но качество кода еще важнее. Скриншоты его не передают. Храните портфолио на github.
15:47У меня так сложилось, что кроме форков и тем для WP публично я больше ничем не мог поделиться. Своих проектов не было.
15:48@cssunderhood Передают. Если делать скриншоты кода. Ну и для полноты картины — фотографировать экран на телефон и вставлять в Word можно.
Да, добавляется ачивонька «Продвинутый пользователь Microsoft Office 2000" twitter.com/webholt/status…
15:49@cssunderhood Это не так, если использовать нормальный bootstrap-sass. (Конечно, не надо использовать Бутстрап для проектов с дизайном.)
Для меня вообще странно использовать Бутстрап для дизайна. Я прошел этот ошибочный путь. Бутстрап для прототипов. twitter.com/sapegin/status…
15:51@cssunderhood И, что более ценно на мой взгляд, для админок. React Bootstrap прекрасен.
Тоже хотел написать про админку, не успел. twitter.com/sapegin/status…
15:56@cssunderhood У меня было что-то такое в прошлой версии. Теперь одна простая страница: sapegin.me
Мне нравилась старая версия, но в один момент такой же лэйаут начал появляться абсолютно у всех) twitter.com/sapegin/status…
16:04@koderhan @cssunderhood ну почему, если система сборки умная – мешать не должно
Либо умная система, либо ты заранее знаешь, что будешь использовать. twitter.com/GrawlCore/stat…
17:04@cssunderhood эсть крутые скринкасты по webpack от @iliakan: learn.javascript.ru/webpack-screen…17:43
@cssunderhood используешь bem-components ?
Да, конечно, без них никуда) twitter.com/koderhan/statu…
17:44Кстати, не помню, писал ли про сетки. Кто чем пользуется, и насколько это вообще сейчас актуально?
18:00Мы долгое время пользовались outring.github.io/anygrid/, сейчас она используется в старых частях проекта. Считаю его не очень удобным.
18:02Кажется, просматривается такая же тенденция как и с любым ограничением - в какой-то момент ты начинаешь выходить за его границы.
18:03Начиналось все со сравнивания сетки у дизайнера и настроек моей. Потом пришли к пониманию, что мы по-разному расставляем блоки и сетку.
18:10Т.е. по сути я брал такую же сетку и дорабатывал дизайн. Очень геморройно.
18:10@cssunderhood flexboxgrid FTW!
flexboxgrid.com
Да, как раз и веду разговор к флексбоксам. Это довольно интересная штука, но не без своих ограничений. twitter.com/m_arzubov/stat…
18:12Думаю, не открою Америку, если накидаю таких ссылок: github.com/nordnet/react-… (React), github.com/bem-incubator/… (bem)
18:14Сетка Zurb также уже на flexbox: foundation.zurb.com/apps/docs/#!/g…
18:14@cssunderhood согласен. Поэтому надо ждать пока будет CSS Grid Layout.
caniuse.com/#feat=css-grid
Да, это очень круто, жду повсеместной работы. twitter.com/m_arzubov/stat…
18:16@cssunderhood Ждет Grid Layout :: w3.org/TR/css-grid-1/
Предыдущий твит как раз :) twitter.com/webholt/status…
18:16@cssunderhood Если бы мне понадобились сетки, то смотрел бы на @SassSusy "grids on demand"18:18
Flexbox example by @kpk where Safari is over 1000 times slower than Chrome: jsbin.com/rekosejilo/edi…. Benchmark: jsperf.com/many-flex-cols….
Вот, кстати, вспомнил, почему не стоит злоупотреблять flexbox: twitter.com/necolas/status…
18:25@cssunderhood В очередной раз напомню, что по той же причине стоит быть аккуратнее с колонками. Только тут все портит лиса.18:28
@cssunderhood Это старая реализация, со старыми префиксами. Новую ускорили вроде как developers.google.com/web/updates/20…
TL;DR: Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex).Кажется, с реализацией все хорошо? twitter.com/ruGreLI/status…
18:36@cssunderhood на полном стеке бем ? Проблемы с подключением плагинов не возникает?
Проблемы бывают, но в отдельных ситуациях. И они больше идеологические, нежели технические. twitter.com/koderhan/statu…
18:51@cssunderhood на полном стеке бем ? Проблемы с подключением плагинов не возникает?
Т.е. когда какое-то время работаешь со стеком, стараешься делать новые компоненты (даже для проекта) универсальными twitter.com/koderhan/statu…
18:52Вообще вся эта история с универсализацией кода, блоков, etc. такой же камень преткновения как и придумывание имен блокам :D
18:53Большую часть времени занимает не реализация (спасибо инструментам за это), а именно размышления о том, как будет лучше.
18:54Что, конечно же, здорово экономит время в будущем.
18:54@cssunderhood да. Как например подключать к бему какую нибудь библиотеку jquery ?
bower/npm ready to serve :) twitter.com/koderhan/statu…
18:57@cssunderhood я уж думал ожидание билда занимает много времени
На деве - не очень много, особенно если не требуется пересобрать весь проект целиком. Тестовые и прод - да. twitter.com/iamstarkov/sta…
18:58@cssunderhood я уж думал ожидание билда занимает много времени
Пожалуй, только из-за этого я рад утяжелению технологий xkcd.ru/303/ twitter.com/iamstarkov/sta…
18:59@iamstarkov @cssunderhood Это только на очень больших проектах. И то, есть хаки.
Поделись хаками :) twitter.com/ruGreLI/status…
19:42@cssunderhood мы используем сетку из Angular Material (без самого Angular). На мой взгляд это лучшее что сейчас есть среди сеточных решений.
Ее где-то можно найти angular-free? twitter.com/smashercosmo/s…
19:44# Вторник 53 твита
Сегодня Microsoft прекратила поддержку всех старых (<11) версий IE @cssunderhood
Помним. Ценим. Верим. Еще бы повсеместно пользователи перешли на поддерживаемую версию. twitter.com/AndreyBerezhno…
11:41Всем доброго дня/утра, начинаем второй день, в эфире все так же @life_maniac.
11:41В связи с радостной новостью - какая минимальная версия IE в вашем проекте? А других браузеров? Как осуществляется поддержка старых?
11:46@cssunderhood Хватит хайпить бред. Поддержка прекратилась только на вин 10, support.microsoft.com/en-us/lifecycl…
Читаем внимательно: microsoft.com/en-us/WindowsF…
Остается поддержка последней доступной для системы версии IE. twitter.com/OlkhovoyDmitry…
@cssunderhood ie9+, а для остальных браузеров последние 2 версии, в старых что бы просто работало и не ломалось11:57
@cssunderhood Тестят ли у вас производительность фронтенда? Кто и как тестит?
Конкретно у меня на проекте процесс тестирования конкретно производительности еще не настроен. twitter.com/koderhan/statu…
11:59@cssunderhood Тестят ли у вас производительность фронтенда? Кто и как тестит?
Посматриваю в сторону, например, Бумеранга. Есть что-то еще? twitter.com/koderhan/statu…
11:59@cssunderhood как на могильниках тестите? Opera mini поддерживаешь?
На мобильных тестируем, естественно, у нас же есть отдельная мобильная версия) Держим парк основных устройств twitter.com/koderhan/statu…
12:02@cssunderhood как на могильниках тестите? Opera mini поддерживаешь?
За Opera Mini не скажу. Если не хватает парка устройств, тестирую через web developer. Правда, там не все так гладко twitter.com/koderhan/statu…
12:03@cssunderhood А какие конкретно браузеры тестируются? Именно мобильная версия у вас, никакой адаптивности, как нынче любят многие?
Да, у нас отдельная мобильная версия :) С одной стороны немного олдскульный подход, с другой стороны удобно twitter.com/webholt/status…
12:06@cssunderhood А какие конкретно браузеры тестируются? Именно мобильная версия у вас, никакой адаптивности, как нынче любят многие?
Уточни - десктоп или мобильные? twitter.com/webholt/status…
12:28@cssunderhood Другой вопрос в том, что продуманный интерфейс нормально работает и в десктопной версии на мобильных.
Mobile first подход крутой, но поддерживать на больших проектах не очень удобно. Это реально отдельная история. twitter.com/webholt/status…
12:29@webholt @cssunderhood мобилки - отдельная платформа. Для крупных проектов, наверное, лучше отдельную версию иметь12:30
@kotchuprik @cssunderhood Я о том, что обычные контентные сайты с нормальной версткой и без мобильной версии можно комфортно юзать с мобилы.
Там, где контент задает стиль комнате - да. Там и заморачиваться особо не нужно. twitter.com/webholt/status…
12:30@cssunderhood к тому же конец поддержки даже на 7,8,10 не о чем не говорит толпе людей которые только, что файлы научились копировать
В связи с чем еще вопрос - кто как уведомляет пользователей о переходе на новый браузер? twitter.com/OlkhovoyDmitry…
12:31@webholt @cssunderhood ахаха, кому понравится дебаггер по усб запускать на мобиле :D12:31
@kotchuprik @cssunderhood Я про адаптивность в принципе. То есть даже под разные разрешения. Вечная ебля, вечно где-то сломается.12:32
@cssunderhood Ненене. Я про desktop only, где отсутствуют элементы, до которых на мобильном не дотянуться (очень обидная штука).
На десктопах да. Как-то в бум 8ой винды один заказчик на фрилансе попросил сделать адаптивность для плиточного диза. twitter.com/webholt/status…
12:33@cssunderhood Ну если плитка одного размера вся, то было бы ништяк. А вот с наборами 1х1, 1х2, 2х2: тут бы гриды новые…
В том-то и дело, что плитка была разная. twitter.com/webholt/status…
12:36@cssunderhood Хотя, можно попробовать поиграть с сочетанием колонки+флексбоксы (как раз подобным страдаю)
Сейчас уже можно поиграться с просто флексбоксом. У него, на мой взгляд, достаточный функционал. twitter.com/webholt/status…
12:41@cssunderhood Хотя, можно попробовать поиграть с сочетанием колонки+флексбоксы (как раз подобным страдаю)
А на момент того проекта с поддержкой флексбокса все было крайне грустно. Пришлось выкручиваться mq. twitter.com/webholt/status…
12:42Коли уж разговор ушел в сторону мобильных девайсов. Как у вас в компании принято разрабатывать и тестировать под мобилки?
12:54Какие инструменты используются, практики?
12:54@cssunderhood browserSync
Кажется, слышал про него не так давно. Буду пробовать. twitter.com/antonfrolovsky…
13:28На праздниках читал довольно хипстерскую тему на A List Apart. Instagram больше не нужен. alistapart.com/article/blendi…
13:29Правда, IE, Edge и Opera Mini пока так и не работают caniuse.com/#search=blend-…
13:30@cssunderhood Инстаграм — это про сообщество, а не про говнофильтрики.
Захожу в «Интересное», понимаю, что не могу согласиться) twitter.com/sapegin/status…
15:21@cssunderhood, используем media query. Тестируем с помощью BrowserStack.15:34
@cssunderhood, Opera Mini в текущем виде на Presto, а его больше не разрабатывают. Но есть идеи, как избавиться от Presto в будущем.16:18
Сегодня почти нет времени задавать вопросы - рассказывал стажеру про БЭМ и наш проект в целом.
18:11Лишний раз убеждаюсь, что люди воспринимают БЭМ как систему именований классов, и даже при этом - именуют их неправильно.
18:12@cssunderhood как нужно воспринимать ?
Как методологию :) И не растаскивать ее на отдельные части. twitter.com/koderhan/statu…
18:15@cssunderhood Поэтому я и сказал, что твою версию послушать будет интереснее, чем то, о чем говорят обычно.
Спрашивай, постараюсь ответить) twitter.com/webholt/status…
18:16@cssunderhood Прям вот пишешь json, а на выходе HTML? Какие-нибудь простые примеры? Со стилями подобная штука тоже есть?
{ block: ‘css’, content: ‘css here’ } отдаст <div class=‘css’>css here</div>
twitter.com/webholt/status…
@cssunderhood Прям вот пишешь json, а на выходе HTML? Какие-нибудь простые примеры? Со стилями подобная штука тоже есть?
Для стилей у нас используется обычный Stylus. twitter.com/webholt/status…
18:20@cssunderhood К сожалению, яндексойды долго пытались всех убедить, что растаскивать плохо. Но всё-таки поняли, что ошибались. @koderhan
А есть статьи с выводами, например? Просто я сам начинал с методики именований классов, забыв про все остальное. twitter.com/sapegin/status…
18:21@cssunderhood Чем оно удобнее старой доброй обычной разметки?
Получается быстрее. Ты описываешь блок, все его параметры, а на выходе получаешь готовую разметку. twitter.com/webholt/status…
18:22@cssunderhood Чем оно удобнее старой доброй обычной разметки?
И при этом меняется формат работы с блоками. Правда, в каких-то местах это не очень удобно и неочевидно. twitter.com/webholt/status…
18:23@cssunderhood С выводами о чём?
Аля «мы думали, что БЭМ един, но позже поняли, что жестоко ошибались». twitter.com/sapegin/status…
18:24@cssunderhood Личное наблюдение.
Понятно. Возможно, я не очень долго работаю с БЭМ, потому что пока к такому выводу не пришел. Посмотрим. twitter.com/sapegin/status…
18:25@cssunderhood Чота не впечатлило)
Оно начинает впечатлять на более крупных примерах, которые уже не влезают в 140 символов. Пни меня в личный твиттор. twitter.com/webholt/status…
18:28@cssunderhood с приходом компонентов и css-модулей смысла в БЭМ все меньше, не говоря об инструментах — они были рождены, чтобы умереть в Я.
Согласен, но для этого нужно централизованно переводить команды и проекты на новые рельсы. twitter.com/mistadikay/sta…
18:48@cssunderhood э, альо, а twitlonger.com зачем? =)
Это уже какое-то извращение :) Освобожусь от работы, могу в jsfiddle что-нибудь написать twitter.com/grim_juz/statu…
18:49@cssunderhood @webholt ну так ты тоже говоришь не просто о Бэм, а фуллстеке и в частности bem-json, а так да, это методология.
Не очень понял, к чему это, спишу на вечерний загруз) Я рассказываю отдельно про возможности twitter.com/Tom910ru/statu…
19:00@cssunderhood @webholt тогда да, я подумал, что для тебя бем это только фуллстек)
Сорри, если ввел в заблуждение, не хотел) twitter.com/Tom910ru/statu…
19:04@mrXXXVII @cssunderhood, доля сильно упала, оставшихся добиваем очень настойчиво
Звучит угрожающе для них и хорошо для нас. twitter.com/pepelsbey/stat…
19:05CSS Modules — костыльное убожество, не понимаю, как можно воспринимать всерьёз. @cssunderhood @mistadikay
Оно мне напомнило то, что мы костылили как-то для рекламы :) Не понял тогда прикола. twitter.com/ruGreLI/status…
20:00Внезапно вопрос в ночь: почему нельзя кастомизировать confirm и насколько это было бы плохо, если бы было можно?
21:19@cssunderhood Меня больше волновал вопрос, почему нельзя select менять, понятно, что есть мобилки и так далее, но хотяб на декстопе.
С select я как-то смирился. Да и уже столько альтернатив крутых и не очень написано. twitter.com/Tom910ru/statu…
21:35@cssunderhood И alert заодно. Ну или просто кастомные модалки, имеющие то же важное свойство — остановка всех скриптов.
Хочется уметь кастомайзить, не теряя нативные возможности браузера. Про select тоже верно подметили, кстати. twitter.com/webholt/status…
21:35@cssunderhood, на самом деле логично, что нельзя. Это, все же, часть функционала браузера, а не сайта/интерфейса, отсюда и внешний вид.
Это во многом объясняет ту попоболь, которую разработчики испытывают столько времени. twitter.com/helloilya/stat…
21:53# Среда 15 твитов
@Tom910ru велосипедов на contenteditable и так предостаточно, лично сам такой строил. @vtambourine @cssunderhood
Это были чудесные времена с input и перекладыванием данных в div. Хорошо, что кончились. twitter.com/dshster/status…
11:18День 3, за рулем всё ещё @life_maniac. Сегодня хочется пообщаться на тему стайлгайдов, в каком виде они у вас живут, если есть вообще.
11:19@cssunderhood Стайлгайды — прошлый век. В моде толерантность. Свобода кодонаписания.
Если через пулл-реквест, то норм. Вообще, когда приходишь в команду, хочется понимать, в какую сторону говнокодить. twitter.com/webholt/status…
12:40@cssunderhood сам для себя сделал реп пока для этого github.com/Grawl/guidelin…
В Emply! Писали в wiki Redmine, но не все фронту их читали
Я вчера стажера с проектом знакомил. Мне такой штуки очень не хватает! twitter.com/GrawlCore/stat…
12:41@cssunderhood Есть библиотека реактовых компонентов со стайлгайдом. И ещё пилю генератор стайлгайдов: github.com/sapegin/react-…
Вот это крутая тема, поковыряю. twitter.com/sapegin/status…
12:42Вообще, задавая свой вопрос, я интересовался в первую очередь проектами вроде @SourceJS. В свое время он мне очень понравился.
12:44Fun fact: пару лет назад мы с нашим дизайнером затеяли написать свой стайлгад (какбутстрап), чтобы проще было использовать общие элементы
12:47Написано было (только не смейтесь) на Parser. Пришлось разобраться, что и как, но в итоге инструментом даже немного попользовались внутри.
13:25@cssunderhood это тоже работа, занимайся этим в рабочее время хоть часа по два.
Да, я думаю выделить время и начать пилить такое же. Проще будет в курс дела вводить. twitter.com/GrawlCore/stat…
13:26@cssunderhood не срослось?
Сначала активно пользовались, потом начали переходить на гайдлайны Яндекса и про инструмент забыли. twitter.com/robert_egorov/…
13:26@cssunderhood @life_maniac В дальнейшем хочу настроить автоматическую генерацию.
Да, нужен обычный парсер переменных и комментариев. Осталось приучить себя писать внятные комментарии к коду. twitter.com/Tom910ru/statu…
13:29@cssunderhood использую flask-styleguide.readthedocs.org/en/latest/ для автоматической генерации стайлгайда из KSS14:14
@cssunderhood ну есть же Sass-guidelin.es, SassDoc и по любому языку общие правила.
Я не про язык, а про твой конкретный проект. Нужно составить по нему документацию и сделать это автоматом. twitter.com/GrawlCore/stat…
14:20@cssunderhood лучше, чем твой стажёр, никто не сделает.
Естественно, он же только начинает разбираться и у него глаз не замылен. twitter.com/GrawlCore/stat…
16:31@cssunderhood autodoc есть почти для чего угодно. Ищи альтернативы SassDoc17:56
# Четверг 36 твитов
Всем привет. Четверг, а я уже что-то выдохся во всех планах. Плохо не работать в праздники.
12:11Наверное, поэтому часть дня я хотел бы посвятить ленивому обсуждению того, как вы организуете свое рабочее пространство, чтобы ничто не >
12:13> отвлекало от рабочего процесса.
12:13@cssunderhood Никак. Не стану ж я твиттер закрывать.
А вообще как сидишь? Доп. моники или что-нибудь еще?
twitter.com/webholt/status…
@cssunderhood интересная памятка по этому поводу :) шкуренко.айэм.рф/%D0%BA%D0%B0%D…
Неплохая :) twitter.com/IlyakorMostovo…
12:42Чувствую себя баянистои, но вдруг: советы по оптимизации ваших svg с пояснениями medium.com/@larsenwork/op…
15:18Из gui для svgo есть довольно популярные jakearchibald.github.io/svgomg/ и github.com/svg/svgo-gui. Первый немного глючный, но работает в целом.
15:20Красивые обложки на css. swissincss.com
15:24А посоветуйте плагинов под Atom для React, для ускорения написания кода.
atom.io/packages/atom-… twitter.com/denisfedosov/s…
15:39Я тут лайфхак узнал - если в терминале, в директории проекта набрать `atom .`, то атом запускается с открытым проектом. Круто ж )
Он и сам по себе еще помнит проект последний и все открытые окна. Но это у всех так. twitter.com/denisfedosov/s…
15:51@cssunderhood я страдал от того, что каждый раз приходится или открывать второй проект заново через хоткей
Ну это мб костыль, но я просто первый не сворачиваю. А вообще Atom крутой, да. twitter.com/denisfedosov/s…
15:59@cssunderhood svgo есть и в нормальном виде, без гуи.
Про это все и так знают :) svgo консольным я как раз сейчас сам пользуюсь, начинал с gui twitter.com/sapegin/status…
16:15@denisfedosov @cssunderhood nuclide нужно ставить из репозитория на гитхабе (: (чтобы сберечь нервы и время)17:27
@iamstarkov people still use sublime text? pic.twitter.com/iFcaiGcKri18:21
Большую часть времени в проф.среде слышу про React и Angular. Можно ли считать остальные фреймворки вымершими?
18:34И вообще, по вашему мнению, что нас ждет в наступившем году? К какому тренду устремится разработка?
18:34Например, какое-то время я читал про Ember. Поговорил с коллегами, которые при упоминании его, махнули рукой и сказали забыть.
18:38@cssunderhood почему сказали забить? как раз планируем ember в одном проекте в качестве фронта, потому что ангулар грязноват
Отдают предпочтение React. Аргументы из ряда «возможностей больше», «популярнее» и т.д. Как всегда, в общем. twitter.com/kotchuprik/sta…
18:42@cssunderhood, DevExperience, популяризация функционального программирования, модульность (как в babel/eslint).18:42
@cssunderhood, и ещё больше влияния на развитие стандартов через всякие Бабели и ПостЦССы.
Вот это очень-очень круто. Все гениальное должно быть просто. twitter.com/kinday/status/…
18:42@cssunderhood почему сказали забить? как раз планируем ember в одном проекте в качестве фронта, потому что ангулар грязноват
Для одного тестового задания я разбирался с Ангуляром,еще предыдущей версией. Все очень круто, но он срет в разметку twitter.com/kotchuprik/sta…
18:43@cssunderhood а я надеялся на настоящие аргументы :D но реакт это другая песня.
Хотел бы я их привести, но достаточного опыта использования ни того ни другого у меня пока нет. twitter.com/kotchuprik/sta…
18:44@cssunderhood не так выразился) в плане скорости реакт огонь)
Я в качестве полномасштабного знакомства хочу что-нибудь написать, чтобы как раз на производительность взглянуть. twitter.com/kotchuprik/sta…
18:47@cssunderhood меня такой вопрос терзает, какие вопросы были у вас на последнем собеседование?
Всякое основное вроде event bubbling и capturing, замыкания,потом плюсы-минусы Angular и что-то по БЭМ. twitter.com/Tom910ru/statu…
18:55@cssunderhood меня такой вопрос терзает, какие вопросы были у вас на последнем собеседование?
Вообще, с момента моего последнего собеседования на текущем месте прошло оочень много времени. twitter.com/Tom910ru/statu…
18:58@cssunderhood меня такой вопрос терзает, какие вопросы были у вас на последнем собеседование?
Тогда я пришел в качестве верстальщика, со знанием jQuery, смутными познаниями в js и хорошими знаниями html/css twitter.com/Tom910ru/statu…
18:59Вообще, по поводу собеседований вредный совет: на них нужно ходить, даже, если не ищете работу. Это всегда челлендж, как модно сейчас.
19:00Или как вариант - хакатоны, более профессионально и менее опасно для текущего места работы.
19:00Потому что пока разрабатываешь в реалиях каких-то одних технологий, наша область уходит далеко вперед. Так и со мной вышло.
19:01Т.е. большинство из вас уже на «ты» с React, Webpack и т.д., а я только начинаю приобщаться. Постоянное отставание.
19:02@cssunderhood @Tom910ru и уже в компании тебя обучали или давали задание на самоизучение?
На самоизучение никто ничего не давал. Были базовые курсы по js у @iliakan, все остальное смотрел сам. twitter.com/windmeback/sta…
19:19@cssunderhood @Tom910ru и уже в компании тебя обучали или давали задание на самоизучение?
Потому что без js все равно невозможно. Смотрел код коллег, что-то спрашивал, что-то сам. Ну и стаковерфлоу. twitter.com/windmeback/sta…
19:20@cssunderhood вот мне тоже интересно. почему?
Мы даже не дошли до технических подробностей. Просто посоветовали изучать что-то более популярное и перспективное. twitter.com/vovanbo/status…
19:26Еще один сайт СМИ на полном БЭМ стеке технологий от Мануфактуры + RoR. Описание решенных задач ниже20:04
#b_ @bem_ru
facebook.com/factorymn/post…
@cssunderhood в твиттер тоже годится, но по ссылке я постарался структурировать, а потом подведу итоги.
Ответил) twitter.com/mxtnr/status/6…
20:08# Пятница 20 твитов
@cssunderhood ты не один такой)
Это одновременно радует и не очень :) Издержки профессии, что ж. twitter.com/_sashashakun/s…
0:37@cssunderhood Когда на прошлой работе писали всё сами, у меня так же было.
Мне в целом кажется, что будет постоянно отставание. Сейчас пишешь на трендовых технологиях, а завтра они уже всё. twitter.com/sapegin/status…
0:44@cssunderhood трендовые != хорошие/полезные
Я стараюсь поэтому максимально изучать ту область, с которой работаю, за которую получаю деньги. twitter.com/_sashashakun/s…
1:24@cssunderhood трендовые != хорошие/полезные
Трендовое и не очень можно поизучать просто для своего удовольствия. twitter.com/_sashashakun/s…
1:24Первый раз вижу такую форму оплаты картой. pic.twitter.com/bBJCHVFMrs
Отличная форма, минимализм во всей красе. Главное - не нужно искать, куда каретка перескочит. twitter.com/krlsrg/status/…
1:25Тут многие любят тему «что ждет разработку и нас в будущем». Принес вам классную ссылочку zeldman.com/2016/01/05/139…
3:32Исчерпывающий сборник статей, советов и инструментов для работы с npm Синдре Соруса — github.com/sindresorhus/a… pic.twitter.com/l048AdV1Dv12:09
Всем привет! Сегодня пятница, а это значит… А ничего не значит, продолжаем работать)
12:09Сравнение всех техник CSS в JavaScript для компонентов React Мишеля Бертоли — github.com/MicheleBertoli… pic.twitter.com/3Vax3FuRcM13:02
Но, пожалуйста, не используйте «CSS в JavaScript» только потому, что так делает Facebook, — просит Алекс Шарп — medium.com/p/ffeae26f20f13:37
Как пишут стили для правительства США, руководство по стилю CSS агентства 18F: SCSS, линтеры pages.18f.gov/frontend/css-c… pic.twitter.com/J68hwydNRj15:05
Autoprefixer 6.3 is released with Grid Layout support and custom browsers usage statistics16:26
github.com/postcss/autopr…
Милое пасхальное яйцо при ховере на твиттер‑кнопку17:55
uiparade.com/portfolio/anim… pic.twitter.com/xt3ga6z73X
Что-то никто не пищит по этому поводу, а вчера была 10ая годовщина jQuery. ejohn.org/blog/10th-anni…
19:34Если вы, как и я, еще не целиком погрузились в ES6, вот тут можно посмотреть, с чего начать medium.com/javascript-sce…
19:35@cssunderhood Молча порадовался.
Я вчера видел, что что-то подобное мелькало, но не придал особого значения. Ну годовщина, ну и что. twitter.com/sapegin/status…
19:39@cssunderhood Всё, что нужно, это полистать es6-features.org
Еще можно сюда почитать сходить learn.javascript.ru/es-modern-usage twitter.com/webholt/status…
19:39@cssunderhood Только Babel всех "обрадовал" на свой День рождения
Я не в теме, что там было? twitter.com/_nitive/status…
19:46@cssunderhood выпустили мажорную версию, сломали совместимость. Люди до сих пор не могут обновиться
А. Молодцы, что уж. twitter.com/_nitive/status…
19:51# Суббота 12 твитов
@cssunderhood мы здесь начали перевод "Understanding ES6" на украинский understandinges6.denysdovhan.com14:58
Подписаться на обновления можно здесь @es6ua
Вчера вечером зашел спор - насколько костыльным считать переопределение (extend) стилей от,например, bootstrap.min.css и нужно ли это вообще
15:09Статья-баян про якобы прогнозы на 2016. Разве мы это уже не видели? prgssr.ru/development/10…
15:11@cssunderhood С момента, как я впилил наконец LESS, у нас используется extend, когда надо имеющиеся стили перетянуть на другую верстку.
Да, это понятно, но я все же про переопределение. Когда тебе нужно переписывать нужный тебе стиль. twitter.com/webholt/status…
15:43@cssunderhood я стараюсь держать модули независимыми, если появляется общий код – выношу в отдельный модуль
Общий код - это не совсем отдельный модуль. Общий код - это общий код, от которого по сути зависят остальные блоки. twitter.com/GrawlCore/stat…
15:54@cssunderhood Ну и они попутно переписываются тоже. Правки какие-то вносятся. Но я потом уже про бутстрап увидел, видимо, немного не о том.
В целом да, я имел в виду переопределения вида .mycustom .jumbatron twitter.com/webholt/status…
15:55@cssunderhood А зачем? Чтоб типа «Нет, мы не юзаем бутстрап»?
«нет, мы не можем отделить нужное от ненужного» - будет вернее twitter.com/webholt/status…
15:57@cssunderhood да, примеси/переменные/и так далее. А ты о чём?
я про разработку сайтов с применением bootstrap, но не в админской, а в клиентской части. twitter.com/GrawlCore/stat…
16:20@cssunderhood может, что-то вроде `.jumbatron.jumbatron_mycustom`?
Можно и так. twitter.com/GrawlCore/stat…
16:34@sapegin @cssunderhood но ведь Bootstrap не худший из framework’ов
Не худший, просто на клиентских проектах он не нужен. twitter.com/GrawlCore/stat…
19:44# Воскресенье 2 твита
Моя неделя тут подходит к концу, спасибо, что читали, давали советы и делились интересным. С вами был @life_maniac, stay in touch.
16:59Пока не ушел - zachleat.com/web/critical-w…. Еще немножечко про то, как победить шрифты в вебе.
17:55# Ссылки
github.com
- https://github.com/stylelint/stylelint
- https://github.com/Automattic/wp-calypso
- https://github.com/wooorm/remark-lint
- https://github.com/Defite/attila
- https://github.com/10up/flexibility
- https://github.com/nordnet/react-bem-grid
- https://github.com/bem-incubator/bem-grid
- https://github.com/svg/svgo-gui
- https://github.com/sindresorhus/awesome-npm
- https://github.com/MicheleBertoli/css-in-js
other
- https://marvelapp.com/static/assets/downloads/devices.pdf
- https://youtu.be/xPFRUM_oDKA
- https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.911gxy4lw
- http://wordpress.com/
- http://caniuse.com/#search=flex
- http://caniuse.com/#search=blend-mode
- http://afider.github.io/flexbox/
- https://medium.com/@ryanflorence/welcome-to-future-of-web-application-delivery-9750b7564d9f#.qyu1xski3
- https://medium.com/@larsenwork/optimising-svgs-for-web-use-part-1-67e8f2d4035#.8ssh6cviu
- https://medium.com/p/ffeae26f20f
- https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620#.mw0a0vff1
- https://learn.javascript.ru/webpack-screencast
- https://learn.javascript.ru/es-modern-usage
- http://outring.github.io/anygrid/
- http://foundation.zurb.com/apps/docs/#!/grid
- http://xkcd.ru/303/
- https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support?tduid=%28152800698a41e035097041fc5f7e78c3%29%28190947%29%281929404%29%28skim66960X1514734X6f64dcb219dfa13758ce89ea999485cd%29%28%29
- http://alistapart.com/article/blending-modes-demystified
- http://flask-styleguide.readthedocs.org/en/latest/
- https://jakearchibald.github.io/svgomg/
- http://swissincss.com/
- https://atom.io/packages/atom-react-native-autocomplete
- https://www.facebook.com/factorymn/posts/1174305922596743
- http://www.zeldman.com/2016/01/05/13913/
- http://ejohn.org/blog/10th-anniversary-of-jquery/
- http://prgssr.ru/development/10-prognozov-dlya-veba-na-2016-god.html
- http://www.zachleat.com/web/critical-webfonts/