Будни разработчика
14.6K subscribers
1.18K photos
336 videos
7 files
2.01K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.iss.one/it_adv

Чат: https://t.iss.one/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня

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

Что это значит на практике?

Это значит, что если вы сделали space-between или space-around чтобы выровнять элементы по двум сторонам, вам не нужно точное их количество чтобы забить всю сетку для последней строки.

Ну то есть, последняя строка из двух элементов не должна «расползаться», элементам просто нужно встать в начало.

Достаточно поставить «распорку» в виде псевдоэлемента: https://codepen.io/alinaki/pen/KKRzMdz

Не делайте, как фейсбук, пожалуйста: https://t.iss.one/htmlshit/387

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

#css #flex
🔥173👍1
#библиотека дня

Если есть понятие семантики, где элементы HTML представляют собой то, чем являются, то может, классы в CSS не так уж и нужны?

И таки да!

Парни из https://simplecss.org/ и https://native-elements.dev/ так и считают. Можно построить вполне себе полноценный сайт, не написав ни единого класса.

Как тебе такое, тейлвинд?)

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

Впрочем, к теме. Это, конечно, не единственные варианты. Вот целый список: https://github.com/dbohdan/classless-css

Мыслите шире, котаны!

#css #framework
🌚5👍4
#инструмент дня

Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.

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

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это как jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a


Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli
👍13🔥4
#ловушка дня

Короче, народ. Если вы, как и я, начали испытывать проблемы сборки node-sass на разных платформах и перешли на sass (aka dart-sass), у меня новость:

Нас поимели.

Суть проблемы: dart-sass заменяет номера мнемоник HTML в контенте псевдоэлементов (entity, сущности, ascii-представление Unicode-символов) на, собственно, Unicode-символы. Но есть нюанс.

Нюанс в том, что он это делает насильно и возможности отключить нет: https://github.com/sass/dart-sass/issues/1219

Начиная с версии 1.54 они вынесли добавление @charset “UTF-8” или BOM-символа в собранные файлы в отдельный пункт конфигурации (charset, включено по умолчанию), но…

Опять нюанс.

И здесь уже нам поднасрал Webpack и его css-loader. Они убирают и charset и BOM-символ при очередной сборке файлов, чтобы правильно склеить результирующий CSS.

А обратно не ставят 🤬

Решений проблемы несколько: или использовать css-unicode-loader чтобы конвертировать Unicode снова в ASCII, или webpack-utf8-bom чтобы насильно добавить BOM-символ в начало, или PostCSS чтобы вернуть charset, или менять сборщик.

Почему это проблема?

1. Иконочные шрифты теперь отданы на откуп автодетектору UTF-8 в браузере. И поверьте, оно не всегда верно работает.
2. Всякие zero-width пробелы и прочие непечатные и неразрывные символы теперь неотличимы друг от друга в коде (ну сравните \200B и “”).

Котаны, я негодую. Люто негодую. Ментейнеры кивают друг на друга, а проблему-то решать самому.

#css #scss #sass
👍11🤔3🤬2😱1
#заметка дня

Тоже считаете, что поведение dart-sass и их мэнтейнеров не является логичным?

Можно пойти и поставить «большие пальцы» в этот issue на GitHub: https://github.com/sass/dart-sass/issues/568, в котором люди просят добавить флаг для вывода результирующего CSS в ASCII, без конвертации в Unicode.

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

Тем временем, отвлечёмся. То тут то там спрашивают о конфиге Webpack. Мол, поделиться.

Ребят, я когда-то давно до последнего игнорировал вебпак и тоже думал, что вот где-то там есть идеальный конфиг. Так вот, его нет. Каждый пишет свой.

Для начала надо понять, что вебпак собирает всё, что ты ему скормишь, в один большой JS-файл. Это была изначальная идея. Даже точка входа не index.html, а index.js.

Отсюда пошла концепция «загрузчиков»: css-loader, font-loader, svg-loader… чтобы можно было просто импортировать разные виды файлов прямо в JS.

Когда файлы импортированы и внедрены в JS — настаёт время их оттуда извлекать. И тут начинается время т. н. экстракторов: css-extract-plugin, text-extract-plugin, assets-extract-plugin…

Вот вокруг этой логики и крутятся все конфиги. Это и дикая мощь, и не менее дикие проблемы.

Да, в Webpack 5 концепция чуток поменялась, но лишь чуток.

Мы живём в 2022 году, есть шикарные инструменты сборки вроде Vite, Parcel. Gulp тоже никуда не исчезал. Генераторы статичных сайтов типа 11ty и Enhance тоже прекрасно справляются с работой.

Например, точкой входа в Vite является index.html, сразу становится логичным, в случае мультистраничного сайта, просто добавить несколько файлов HTML в конфиг, а Vite сделает остальное. А уж генераторы сайтов и подавно под это заточены.

Так что не надо нервничать, что не получается единственно верный конфиг вебпака.

Ни у кого не получается. И у всех получается.

#webpack
👍13
#обмен дня

А кто какие клавиатуры использует? Делитесь фотками.

У меня вот ноут с финской раскладкой, но я дополнительно выгравировал интернациональные спецсимволы. Плюс Magic Keyboard какого-то недавнего поколения.

На обеих раздражает блок стрелок. А Esc на макбуке я замапил на символ параграфа. Весьма нативно получилось.

Не фанат механических, высокие они все :)

А вы?
👍12👎1
#фото дня

И будет ещё много, котаны. Я на конференции React Finland.

Первый доклад дня — «What do engineers, kintsugi and stained glass, and lotuses and clocks have in common?» — максимально медитативный. О том, как не потерять себя в постоянно меняющемся мире.

Если коротко: заиметь хобби за пределами компа и высыпаться.

Ну что я могу сказать… Let the merch hunt begin!

#react #conference
🔥121👍1
#фото дня

Тем временем, Nicola Corti рассказывает о новой архитектуре React Native.

Быстрее, выше, сильнее, Hermes, автогенерация кода на TypeScript и Kotlin. Но пока не на Swift.

Надо попробовать. Три года туда не лез. Если честно, проект на React Native был причиной переезда в Финляндию: я просто задолбался работать на российские рекламные агентства; уровень некомпетентности менеджеров там зашкаливал и наверняка зашкаливает до сих пор.

Но приложение вышло забавное, конечно. С ним было интересно.

#react #native
10
#фото дня

Я думаю, описание докладов вы и без меня глянете на сайте конференции. Могу лишь сказать, что SolidJS это просто какая-то пушка 💥

Учитывая, что архитектура моего приложения позволяет пихать туда что угодно (на языке профессионалов это называется «микрофронтенды»), я точно попробую виджеты на SolidJS в работе.

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

Они ещё и к таймингу привязаны и анимируются по ходу презентации!

Просто потрясающе :)

#react #conference
🔥12👍3
#фото дня

Перед началом второго дня, пришло время показать официальный мерч конференции.

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

Вот заглушки веб-камер вообще штука за гранью логики. Они мешают полностью закрыть ноутбук, оставляя щель. Стоит тебе чуть больше надавить на крышку — в рюкзаке, например — и экран трескается. Случаи были, но люди упорно продолжают их ставить. Не личные ноуты же :)

Впрочем, вернёмся к мерчу. Официальные подарки конференции простые, но подчёркнуто финские.

Это шоппер из переработанных материалов useBag(), пакет сушеной голубики useBlueberries() и полотенце из льна и хлопка. Не самое дешевое, к слову. Очень приятное.

На вышивку useTowel() сил уже не хватило 🤭

Пиво, кстати, тоже забрендировали: useHelles(). Посмотрим, будут ли на афтепати коктейли useMartini()…

#react #conference
👍22🔥6👎2😁2
#фото дня

Уж простите мне эту слабость, но без фото кусочка афтепати никак нельзя. Опять же, все весьма по-фински, арендовали целый клуб, но бар — снаружи, на террасе внутреннего двора. Так сказать, почувствовать всю финскую осень сразу.

Завтра выкачу максимально полезный контент с конференции. Для тех, кто хочет строить свою дизайн-систему и ничего не упустить в процессе. Не переключайтесь :)

…а я пойду согреюсь джином с тоником 🥃
👍29🍾4👎1🖕1
#ссылка дня

Что-то затянулась вечеринка, я еще вчера это обещал.

Что делает дизайн-систему — завершённой? Я бы даже сказал, цельной?

Сколько последних штрихов нужно, чтобы откинуться на спинку кресла и сказать: «Вот теперь точно всё»?

Так вот, Варя Степанова прошлась по всем известным дизайн-системам и собрала все эти самые последние штрихи на одной Miro-доске: https://miro.com/app/board/uXjVPXCoofw=/

Удивительного объема работа. После представления на конференции я полез сам на доску и прошёлся по ссылкам и примерам. Чего и вам настоятельно рекомендую.

Очень жаль, что организаторы не успели выкатить иллюстрацию к ней :)

#designsystem #mindmap
🔥6👍1
#статья дня

Что самое опасное может сказать фронтенд-разработчик, верстающий макет или готовящий ui-kit?

Опустим сейчас (несуществующее) разделение на настоящий и ненастоящий фронтенд.

Вот это:

— Я умею нормально называть классы, они у меня всегда уникальные!

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

Ребят, штуки вроде пространств имён, БЭМ, OOCSS, CSS-in-JS, CSS modules появились не потому что их разработчики глупы или ленивы. Они появились потому что все мы люди и толпа может быть как умнее одного человека, так и бесконечно глупее. Ок, если не глупее, то, как минимум невнимательнее.

Ведь подобная ситуация она везде, не только в вёрстке.

Ну вот давайте возьмём для примера Next.js. За базу там взяты CSS-модули, поэтому уже один только этот факт делает вопрос: «А css-модули уже устарели, да?», — некорректным.

Да, «гладить» фреймворк против шерсти не стоит. Да, создать глобальный класс для компонента способом, не предусмотренным документацией (созданием отдельного глобального скоупа) будет проблемой (То же самое касается и css-in-js).

Но зато насколько легче решаются остальные 99% задач!

Короче, чтобы вам сегодня сделать своё понимание кода и его сборки чуть лучше и заодно понять сопутствующие проблемы CSS-модулей горячо рекомендую эту статью: https://habr.com/ru/post/688844/

Как включить их в сборку, как типизировать. Зачем вообще типизировать и как экспорты по умолчанию всё портят.

Прекрасно и максимально понятно написано. Заодно скилл вебпака подтянете :)

#css #cssmodules #webpack
👍13👎2😁1
#codepen дня

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

Думали, отладка CSS сложна? Это вы ещё не пробовали задать эти самые слои :)

Вот, прекрасный пример как легко и просто сломать все ваши представления о специфичности селекторов: https://codepen.io/dutchcelt/pen/wvmjKMK

Ух какой простор чтобы искать неиспользуемые классы…

Но! зато я теперь знаю, как заставить мой любимый атрибут hidden действительно хорошо работать. Без этих ваших !important.

Вроде уже стоит того :)
🔥3👎1
South Hub — IT-кэмп в Сочи для СТО и тех, кто хочет ими стать
Когда?
6 – 8 октября
Где?
Красная Поляна, Сочи
Зачем?
Подняться на уровень выше. Профессионально и физически.

В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.

Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров.

Все подробности о кэмпе можно найти на сайте:
https://i.southhub.ru/Pubxk
👍4👎1
#опрос дня

Как выбрать li с атрибутом 1?
👍16👎1😈1