#такое дня

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

Но вот один вопрос, который задавал автор треда, прям немного покоробил: "Какие новые технологии в разработке вас вдохновляют?" И большинство просто отвечало: "RSC". И это автора очень расстраивало.

Речь шла, конечно, о фронтенд-собеседованиях.

Что не так с этим вопросом?

Да, вроде, всё так, пресловутая "искра в глазах". Вот только всегда есть нюансы.

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

Давайте посмотрим в качестве примера на такую простую штуку, как contenteditable.

Не так давно Firefox 136, наконец, присоединился к поддержке contenteditable="plaintext-only". Это значит, что при вставке какого-либо rich format куска, ну, грубо говоря, оформленного текста из HTML или Microsoft Word, он вставится обычным текстом, оберегая нас всех от лишних тегов.

Крутая фича, не правда ли? Так удачно легла на везде рекламируемый разными инфлюенсерами baseline!

Но вообще, нам что, textarea не хватает? Вот, кстати, не хватает. Например, сделать авторесайз textarea довольно непросто, и CSS Custom Highlight API тоже не накатить. А div всё сделает сам.

Вот только при редактировании такого текста Firefox вставит
на каждый перевод строки, а Chrome — нет.

Бадум-тсс.

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

Плохо ли это? Да нет, наверное. Особенно, если ты разработчик браузера.

Но восхищаться этим становится как-то... трудозатратно.

#textarea #contenteditable

Как заговорить с сетевиками на одном языке? 👍
 
Эксперты одного из ведущих провайдеров IT-инфраструктуры Selectel подготовили бесплатный курс «Погружение в компьютерные сети».
 
Всего за час вы сможете разобраться в принципах работы сетей, освоить ключевые термины и на конкретных примерах освоить две основные модели.
 
Курс будет интересен как джунам, так и более опытным разработчикам.
 
➡️ Убедитесь в этом, начав обучение в Академии Selectel

Реклама. АО «Селектел», ИНН 7810962785, ERID: 2Vtzqvo5XTG

#такое дня

Если этим утром вы проснулись с диким синдромом самозванца и считаете, что уж вас-то точно переоценили, помните.

Где-то в Google есть фронтенд-разработчик, PM и QA, которые не осилили скелетоны и скроллбары. И получают они сильно больше денег чем вы, котаны.

Синдром самозванца, вроде, стал полегче, но в целом стало гораздо хуже, не правда ли? :)

#статья дня от подписчика

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

Спойлер: вы у меня все любимые, котаны.

Впрочем, слово автору!

🔥 Slow SPAs Kill Conversions — и я знаю, как это исправить.

Привет! Я Олег, занимаюсь фронтендом и люблю разбираться, как сделать веб быстрее, легче и умнее. Когда SPA начинает тормозить, страдает не только UX, но и бизнес - падает конверсия, растёт отток

В своей новой статье «Улучшаем производительность SPA» я разложил по полочкам:
— Где именно тормозит ваше приложение (спойлер: не только в бандле)
— Как грамотно внедрить ленивую загрузку и код-сплитинг
— Зачем вам Web Workers и виртуализация, если хочется отзывчивости даже на слабых устройствах

p.s спасибо всем, кто даёт фидбэк, шарит и просто читает - вы крутые

Читай гайд по оптимизации
https://dev.to/oltrenin/improving-spa-performance-2k2g

👋 Lama — это проект с самыми мощными нейросетями:

⚡️ o3, o4, ChatGPT-4.1, Gemini 2.5 Flash, DeepSeek R1 и парочка других
⚡️ Kling, Dall-E 3 HD, Flux Dev - лучшие генераторы изображений
⚡️ Суммаризатор видео Nova
⚡️ Бесплатно доступны GPT-4.1 mini , Gemini 2.0 Flash, и Flux Schnell
Свой web-site с тем же функционалом, что и в телеграм

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

Подписывайтесь на канал Lama AI и окунитесь в мир ИИ.

#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

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

#pr #process #work #бородач

Последний шанс попасть в Летние школы Яндекса — набор закроется 27 апреля

Летние школы — это бесплатные интенсивы, где начинающие специалисты могут погрузиться в реальные задачи и углубить знания в определенном направлении разработки и не только. В этом году к уже пяти существующим школам добавились ещё две: школа обеспечения качества (для будущих инженеров по тестированию) и школа КИТ (для DevOps- и SRE-инженеров).

Для специалистов из Москвы и Санкт-Петербурга обучение пройдет очно в офисах Яндекса, а для других городов — онлайн в распределенных командах. Участников ждут занятия с опытными экспертами из разных сервисов Яндекса. Более 50% выпускников школ становятся стажерами или сотрудниками компании.

Успейте решить тестовое задание и подать заявку.

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

#css #thefuturepast #бородач

Небольшое уточнение: за границы распространения фона отвечает не background-origin, а background-clip, просто в шортхенде значение брксовой модели устанавливает сразу их оба (абзац после первого Note в https://drafts.csswg.org/css-backgrounds/#background) 😳

Скоро можно будет и с прозрачными фонами — через background-clip: border-area (пока только в Сафари). Зато с недавних пор как минимум в Хроме можно задавать сплошной цвет градиентом без повторения и лишних цифр, просто *-gradient(red) и т.п.

#фишка дня

Итак, сегодня я спросоня долго смотрел на этот пример от Джея и никак не мог понять, какого фига тут происходит.

Не, ну я вижу, что в итоге получается градиентная граница, но... но почему?

И тут до меня дошло: оказывается, при настройке фона можно фактически указывать боксовую модель! Ну то есть называется-то оно background-origin, но по факту работает по тем же принципам, что и box-sizing.

Итак, три значения: border-box, padding-box и content-box.

Выходит, border-box заполнит фон, включая границы, padding-box — до полей, a content-box — по контенту.

Ну и для градиентных границ (к сожалению, только с непрозрачным фоном), получается так:

article {
background: // layer them up with different origin!
linear-gradient(var(--bg), var(--bg)) padding-box,
var(--gradient) border-box;
border: 4px solid transparent;
}

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

Ну и пример, конечно же: https://codepen.io/alinaki/pen/QWYoPpx

#css #background #origin #бородач

"Почему 80% разработчиков НИКОГДА не получат топовые офферы? Шокирующая правда..."

🧑‍💻Забудьте мифы про "гениальный опыт". Даже классные кодеры не могут пройти собес, потому что не знают главного: успех — это умение ПРОДАТЬ свои навыки

❗️Всего 20% получают топовые позиции, потому что понимают, чего хотят компании, как подать себя и вести переговоры.

❓Хотите узнать, как выделиться среди сотен кандидатов и получить оффер мечты? Всё это — в канале «MAD iOS | From Code to Cash». Только работающие фишки.

✅ Не упустите шанс — присоединяйтесь

🆕 Сейчас новый цикл статей о том, как кандидаты совершают ошибки в самом начале реального отбора.

#баг дня

Преамбула

Некий сервис, назовём его Doodle Lampolytics, заставил всех своих клиентов переползти с модели подсчёта просмотров страниц на модель подсчёта событий.

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

И если раньше мы в нагрузку к «просмотру» передавали так называемые индивидуальные размерности и метрики, привязанные к сессии, то теперь — каждое событие может нести индивидуальный их набор.

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

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

Суть

Суд да дело, приходим мы к идее передачи события с неким контекстом:

trackEvent('event_name', context) {}

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

Передаём туда, например, productId и orderId — и получаем трекинг истории конкретного продукта или заказа. Удобно, когда продукт сильно кастомизированный. Можно накинуть туда optionId и следить, какие продукты какими опциями нашпиговывают.

Таким образом, мы отсылаем объекты вида:

productId,
optionId,
orderId,
locale,
}


Потом объект из camelCase конвертируется в snake_case, как того требует документация, и дёргается некий API. Запомните этот момент.

И всё, поехали в продакшен. События уходят, счастье. Заодно, те же самые события, за некоторым исключением, можно пихать в сервисы вроде Sentry.

И всё бы ничего, но интерфейс Doodle Lampolytics настолько проклят, что оказалось намного проще выгружать данные оттуда сразу в Doodle LargeQuery и SQL-ем их запрашивать.

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

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

product_ıd,
option_id,
option_ıd

— Какого хера?! — заорал я, я же был в офисе.

Но параметры с ı вместо i исчислялись десятками, в то время как остальные — десятками тысяч. И я зачем-то успокоился. Подумал, что это косяк ламполитики, с которым можно разобраться попозже.

Но сегодня я зашёл в наш прекрасный чат, зачем-то ткнул в аватарку одного из подписчиков и увидел у него в истории некую песню с названием Bakı.

И тут до меня резко дошло, какой я идиот.

Прежде чем читать дальше, вы можете посмотреть на код функции, которой мы преобразуем camelCase в snake_case: https://github.com/jonschlinkert/snakecase/blob/master/index.js

Особо внимательные, наверное, уже догадались, в чём проблема. А ведь мы даже тесты написали.

Поскольку не все пройдут по ссылке, я приведу кусочек:

const lowercase = (input = '', options) => input.toLocaleLowerCase(options?.locale);

Ничего не смущает? Я подожду.

...

Да, правильно. Если забыть передать локаль (язык клиента, сервера в нашем случае), то будет взята переменная среды.

И для кого-то из наших клиентов в этой переменной оказался турецкий (или узбекский) язык.

В которых нет буквы i, вместо неё — ı.

Вы все правильно поняли, мы не полностью контролируем среду выполнения. Это так называемый Doodle AppsScript. Он исполняется на языке, в котором открыт офисный инструмент посетителя.

Естественно, мы локаль передать забыли. Хороший вопрос, почему мы вообще не проверили это поведение изначально... но тут как есть.

Стыдно? Стыдно. Зря я винил Doodle Lampolytics.

#бородач

Проект для СТО, создайте курс для Яндекс Практикума!

Сервис онлайн-образования Яндекс Практикум в поисках автора для курса Chief Technology Officer.

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

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

От кандидата ожидают опыт работы СТО/зам СТО от 3х лет и знания на высоком уровне в одной из тем:
▪︎управление развитием команды и личное целеполагание,
▪︎эффективные коммуникации с командой и стили лидерства,
▪︎разделение зон ответственности, эффективные коммуникации внутри команды и управление конфликтами,
▪︎аудит процессов взаимодействия со стейкхолдерами.

Узнать подробности и откликнуться

У Фигмы была интересная статья про то, как они это делали и почему они отошли о чистого CRDT

https://www.figma.com/blog/how-figmas-multiplayer-technology-works/

#статья дня

Ох, что тут принесло!

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

Далеко ходить не надо: Google Sheets, Google Docs, Miro, да даже Microsoft в онлайн и не очень офисных пакетах это позволяет. И, кстати, онлайн игры это тоже самое что ни на есть приложение для совместной работы. Особенно это интересно в файтингах, но об этом потом.

Общее название структур данных для организации подобного это CRDT. Conflict-free Replicated Data Type, или, по-русски, бесконфликтная репликация данных.

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

Встречайте: https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

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

#crdt #algorithm #бородач

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует