Comments / Profile of Flying / Habr

Пользователь

Subscribers

«Я три года борюсь с синдромом самозванца» — 10 вопросов программисту, выпуск 7

Flying Oct 3 2018 at 12:49

Ну три года в таком темпе — это не так и много. У меня первый отпуск был более чем через 10 лет после того как я серьёзно окунулся в учёбу и работу, а так формат "с утра до ночи без выходных" — это было обычное дело :) При этом временами я работал и на 3-4 работах, несколько раз в формате "сутки и более не вылезая из-за компа". Хотя, конечно у меня тогда семьи не было, это тоже немаловажный фактор.

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

BEM'a не должно существовать

Flying Sep 14 2018 at 14:34

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

К примеру не раз сталкивался с задачей когда необходимо обеспечить отображение только полностью заполненных рядов элементов (галерея какая-нибудь, заказчик хочет чтобы было красиво). Разумеется с учётом responsive, когда количество элементов в строке может меняться — это решается скрытием части элементов. На CSS реализуется с использованием техники, описанной, например в этой статье, но в итоге там получаются селекторы вида (в SCSS) #{$selector}:first-child:nth-last-child(#{$in-html}) ~ #{$selector}:nth-last-child(#{$n}).

Ещё пример: в текущем проекте есть галерея у которой требуется различное поведение в зависимости от количества элементов в ней — где-то выводить thumbnails, где-то нет, что-то скрывать, да ещё и количество скрытых элементов показывать. Решается на чистом CSS, но в итоге там местами встречаются селекторы вида .gallery-image:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)). Конечно в SCSS всё это намного компактнее и выглядит существенно проще, но результирующий код именно такой.

Также, раз уж есть возможность, хотел бы задать ещё один интересующий меня вопрос относительно БЭМ: на практике очень часто встречаются ситуации когда внешний вид и поведение блоков зависит от некоторого внешнего состояния (обычно описываемого через дополнительные классы в body). Банальный пример — темы. Да, я знаю что предлагается использовать модификаторы вида --theme-name, но если тема меняется динамически — придётся прописывать этот модификатор всем элементам в DOM дереве и не факт что он везде нужен. Или я неправ? Другой пример навскидку приходящий в голову: открытие модального окна или меню когда необходимо "заморозить" body который явно не является блоком. Как БЭМ предлагает работать с этими ситуациями?

BEM'a не должно существовать

Flying Sep 7 2018 at 17:10

Я в текущем проекте насчитал 15 @for и 17 @each не считая библиотечных функций с циклами.

Функционально — всё то же самое для чего используются циклы в обычных языках программирования: либо итерация по чему-либо (например конфигурации или списку элементов) либо генерация последовательности элементов с разными значениями. Элементарный пример с созданием стилей для заголовков разного уровня здесь где-то мельках в комментариях, практических вариантов применения сильно больше. Вот банальный пример, да простит меня заказчик :) Имена категорий поменяны, но в остальном реальный код

$categories: (
    one: #33d28b,
    two: #587fe1,
    three: #5ac8fa,
    four: #966ec8,
    five: #ff914b,
);

@each $category, $color in $categories {
    .category-#{$category} {
        @include content-category-color($color);
    }
}

Вообще работа с maps в scss без циклов выглядела бы довольно сомнительной во многих случаях.

Или вот другая практическая задача из текущего проекта: необходимо было сделать возможность задания произвольных layout'ов для расположения контентных элементов. Всё прекрасно и легко решалось бы через CSS grids если бы не наш "любимый" IE11 в котором, как известно, реализована старая спецификация CSS grids. В ней, помимо всего прочего напрочь отсутствуют gaps между ячейками. Таким образом отступы между элементами нормально было не сделать, шаблоны grid'а там тоже не поддерживаются, синтаксис отличается.

В итоге просто был сделан map с описанием структуры grid'а и в цикле по нему генерируется нормальный CSS grid, а затем (с пересчётом номеров ячеек т.к. отступы для IE11 сделаны через дополнительные ячейки) из него же генерится отдельный синтаксис для IE11. С учётом поддержки в этом пересчёте col/rowspan'ов и ряда дополнительных функций, с учётом того что структура сеток меняется для разного типа устройств — получилось около 250 строк scss кода и немного конфигурации, объём же создаваемого CSS явно больше, да и писать (а тем более поддерживать его) вручную я бы точно не взялся.

BEM'a не должно существовать

Flying Sep 7 2018 at 16:22

Т.е. миксины, шаблоны, функции и прочую "ересь" тоже стоит запретить? :) Тогда мы придём к чистому CSS что в целом и неплохо, но многие вещи придётся делать руками вместо того чтобы автоматизировать.

BEM'a не должно существовать

Flying Sep 7 2018 at 14:55

Просмотрел комментарии, раз здесь столько специалистов по БЭМ — воспользуюсь случаем и задам вопрос :)

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

Собственно вопрос: как БЭМ, как методология относится к использованию всей этой мощи? Несколько моих попыток изучения БЭМ не дали однозначного ответа на этот вопрос, так что помощь более опытных специалистов была бы очень кстати, благо судя по комментариям — многие здесь неплохо разбираются в вопросе.

BEM'a не должно существовать

Flying Sep 7 2018 at 13:33

А чем вас, простите, циклы в стилях не устраивают? :)

Обзор ноутбука Dell Latitude 7390: корпоративный супергерой

Flying Aug 24 2018 at 09:10

Ну почему же, выделение до начала / конца файла. А уж простой переход в начало / конец строки по Home / End при редактировании кода — постоянно. В общем лучше иметь отдельные стандартные клавиши. Я год назад не стал обновлять свой Precision именно из-за того что они Home / End перенесли на курсор, сейчас их вернули, но забрали Insert… Издеваются в общем...

Обзор ноутбука Dell Latitude 7390: корпоративный супергерой

Flying Aug 24 2018 at 09:02

Сочетание Shift+Ctrl+End смотрит на предложение Home / End через Fn с неодобрением :)

Обзор ноутбука Dell Latitude 7390: корпоративный супергерой

Flying Aug 24 2018 at 08:42

Да ладно бы только тут, но ведь даже на новых Precision (даже на 17" модели!) убрали Insert и сделали мелкие кнопки стрелок и Page Up / Page Down…

DellEMCTeam может вы объясните логику? Вам реально не хватает места для одной кнопки? На 15" и 17" ноутбуке? Или в Dell реально нет никого кто пользовался бы, к примеру, Total Commander или продуктами JetBrains где Alt+Ins или даже Shift+Ctrl+Alt+Ins — вполне себе часто нажимаемые комбинации. Я уже молчу про тех кто всё ещё работает с clipboard'ом через Ctrl+Ins / Shift+Ins. А зачем кнопки стрелок делать меньше? Тоже места не хватает? Или какие-то исследования показывают что людям которые используют профессиональную технику удобнее использовать мелкие клавиши?

Сам пишу это сообщение с Precision M4800. В своё время выбрал его вместо ThinkPad именно из-за клавиатуры т.к. у Lenovo тогда был период безумных экспериментов с клавиатурами. Однако стоит признать что следующим моим ноутбуком скорее всего будет ThinkPad T580 именно из-за того что они вернули на место Insert, тогда как у Dell он впал в немилость. Хорошо хоть Home / End вернули на отдельные кнопки...

Пишем CSS лучше и красивее

Flying Aug 3 2018 at 08:32

Для того чтобы сборщик собрал всё необходимое — как раз и нужны импорты, он же по ним строит дерево зависимостей. Иначе как он узнает порядок включения файлов (который имеет значение)?

Пишем CSS лучше и красивее

Flying Aug 3 2018 at 08:25

В защиту CSS всё-таки стоит сказать что во многом то, как он сделан, определяется тем как он используется. Я имею в виду то что сама суть CSS — это описание правил стилизации элементов документа браузерами. Причём не просто стилизации, а realtime стилизации (уверен что вы понимаете разницу). Требование очень высокой производительности (а, я думаю, никто не против того что высокая производительность здесь необходима) подразумевает введение различного рода ограничений которые вне контекста кажутся странными и глупыми.

К примеру, думаю, многие в курсе что в CSS селекторах нет т.н. back references т.е. нельзя сделать селектор вида "элемент перед которым стоит другой элемент". Попытка ввести такой селектор была в CSS Selectors Level 4, но в итоге от неё отказались несмотря на то что фича явно полезная. Причина — это замедлит работу CSS движка т.к. сейчас CSS всегда идёт по DOM дереву слева направо, введение потенциальной необходимости идти и в другом направлении усложнит и замедлит код.

Ещё один пример с которым сам столкнулся недавно: у весьма интересного нового свойства position: sticky нет возможности с помощью CSS узнать в каком же состоянии находится элемент (т.е. нет какого-нибудь псевдо-класса типа :stuck хотя он явно напрашивается). Вот здесь можно почитать обсуждение W3C CSS WG по данному вопросу, рекомендую ознакомиться, очень интересно, особенно этот и этот комментарии.

Пишем CSS лучше и красивее

Flying Aug 3 2018 at 07:32

SCSS — это далеко не только CSS переменные. Вложенные селекторы, типизированные данные, mixins, placeholders и т.п. — всего этого нет и не будет в CSS, просто потому что там всему этому не место. Конечно есть и альтернативы более близкие к CSS, тот же PostCSS, но во многом SCSS — незаменимый инструмент в написании большого количества поддерживаемого CSS кода

Ловушка, в которую загнали себя инженеры Apple с клавиатурой MacBook Pro

Flying Jun 29 2018 at 16:13

Для Dell точно работает, мне по страховке меняли материнку + когда случайно оторвал клавишу на клавиатуре — на следующий день привезли новую курьером (при том что я не в Москве / Питере). С покупкой шла на 3 года "в комплекте", можно было продлить.

Ловушка, в которую загнали себя инженеры Apple с клавиатурой MacBook Pro

Flying Jun 29 2018 at 16:09

Dell Precision вполне подходит под описание, пишу с M4800. Правда новую версию брать не буду из-за того что там Home/End выпилили с клавиатуры и перенесли на курсорные клавиши (идиоты). ThinkPad'ы тоже вполне подходят, T/W серии.

10 главных огорчений программистов

Flying Mar 6 2018 at 11:12

Я в прошлом году потратил три дня на поиска проблемы которая проявлялась в том что сообщения между двумя частями в browser extension переставали приходить после примерно 2-3 сообщений. С учётом того что из-за особенностей платформы (Firefox WebExtensions который на тот момент ещё не зарелизился) единственным доступным мне способом отладки была запись в логи — это было "весело", к третьему дню я реально начал сомневаться — а не сошёл ли я, случаем, с ума?

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

Для передачи сообщений между частями browser extension используется отсылка сообщений через порт. Для передачи / получения сообщений открывается порт и в обработчике события открытия порта на него вешается обработчик для получения сообщений. Всё было настроено и работало, но я не учёл что во внешней библиотеке, которую я использовал, открывался аналогичный порт, но позже чем мой порт (как раз я за время пока второй порт не открылся успевал передать те 2-3 сообщения которые проходили). В момент открытия порта мой обработчик события открытия порта вызывался, сохранял ссылку на новый порт и вешал на него свои обработчики. Но поскольку порт был уже другим — я начинал получать не свои сообщения, а сообщения внешней библиотеки которые мне были не нужны.

В общем всё решилось банальной проверкой корректности имени порта (1 условие), но нервов на эту строчку ушло очень много :) В коде приложения до сих пор стоит подробный комментарий с припиской: "Takes me 3 days of debugging to figure it out, valuable information :) "

Осторожно! Злая собака! Или как укротить форму регистрации

Flying Oct 14 2017 at 17:04

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

Телефона вполне может не быть (например человек за рубежом и использует локальную сим-карту). E-mail использует тот же транспортный канал (интернет), а телефон — это другой канал связи, не факт что оба имеются в наличии в данный момент. Да, такая вероятность не особо высока, но она отлична от нуля. А то что email доступен в случае если доступен интернет — это однозначно.
Телефон, банально, может не хотеться "светить" на сайте. Почту для однократного посещения легко сделать одноразовую, с телефоном такого не получится. Да и отписаться от sms-спама не в пример сложнее чем от email рассылок.

+13

Редизайн Хабрахабра и Гиктаймс. Финишная прямая

Flying Aug 15 2017 at 13:29

Было бы хорошо в комментариях не делать такого акцента на нике автора, зачем это, постоянно отвлекает внимание от текста комментария… .user-info__nickname_comment {font-weight: 600} решает в Firefox/Win