14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#codepen дня
Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?
Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.
Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX
Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/
А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/
А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html
А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ
#css #mixblendmode #бородач
#новость дня
Яндекс подвел итоги программы грантов в опенсорсе
https://habr.com/ru/companies/yandex/articles/909186/
У компании действует грантовая программа уже второй год, куда могут податься независимые разрабы и получить финансирование для развития своих проектов.
Из интересных проектов:
1. IronOS — открытая прошивка, добавляющая паяльникам профессиональные фичи вроде термопрофилей. Раньше такие функции были только в дорогом проф оборудовании, а теперь можно апгрейднуть и бюджетное устройство. Что делает паяльное дело доступнее.
2. sqruff — линтер на Rust для проверки крупных объемов SQL-кода с высокой производительностью. Знаю, что SQL-линтеры вроде SQLFluff сильно тормозят на больших базах. И если у чуваков наконец-то получилось решить эту проблему — можно только поаплодировать.
3. js-dos — эмулятор для DOS-программ, позволяющий запускать их онлайн. Включая ретро-игры. В планах команды также улучшить 3D-графику и добавить мультиплеер через WebRTC. Может, благодаря ему, молодое поколение освоит классику, на которой мы выросли.
На самом деле, компания уже давно вкладывается в опенсорс — взять те же CatBoost и YTsaurus.
Как мне кажется, инициатива достойная. Опенсорсу поддержка никогда лишней не бывает. Это позволяет создавать общими усилиями прорывные решения.
#инструмент дня
Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.
Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!
И называется он git-sim, вот так вот буквально.
Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.
Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim
И на GitHub проекта: https://github.com/initialcommit-com/git-sim
Очень уютная штука.
#git #sim #tool #бородач
#статья дня
Фича-флаги: фронтенд против бэкенда — где провести линию раздела?
Сегодняшняя статья от ConfigCat — отличный разбор того, как по-разному работают feature flags в клиенте и на сервере.
Если ты не в курсе:
фича-флаг — это переключатель, который позволяет включать или отключать части функциональности без выката новой версии. Прекрасный способ тестировать, экспериментировать и чинить баги на лету.
Фронтенд-флаги
Плюсы:
— моментальные изменения, удобны для UX-экспериментов
— не требуют изменений на сервере
Минусы:
— логика доступна в клиенте (а значит и пользователю)
— сложно скрыть саму фичу, даже если она выключена
— возможны баги при сбоях SDK
Да ладно, кому нужны исходники вашего SPA...
Бэкенд-флаги
Плюсы:
— безопасно: логика и флаги не видны снаружи
— удобно управлять доступом, ролями, регионами и т.п.
Минусы:
— отклик медленнее
— нужна координация между фронтом и бэком
— UI не всегда знает, что делать с отключённой фичей
Автор также говорит о гибридном подходе, который позволяет совместить лучшее из двух миров: контроль на бэке, адаптация интерфейса на фронте.
В статье всё по делу, с примерами и выводами:
https://configcat.com/blog/2025/05/08/frontend-vs-backend-feature-flags/
#feature #dev
#статья дня
Я знаю, знаю — вас всех уже достали различные реализации Doom.
Тут дум, там дум, а на байкале не дум.
И точно так же я прекрасно знаю, как вам надоели все эти #codepen'ы дня в стиле «вы только посмотрите, Мона Лиза на одном div'е», которые являются эксплуатацией линейных и радиальных градиентов и часто вообще делаются через формулы в Excel: группы пикселей конвертируются в колор-стопы градиентов.
Формулы в экселе... погодите. Если что-то можно описать формулой, значит, это что-то можно и автоматизировать?
Сюрприз-сюрприз! Можно. И вот тут начинается абсолютная дичь. Подбираемся к статье дня!
Итак, есть такой проект: WASM DOOM. Это просто движок, на его выходе — canvas. И что делает безумный автор статьи дня?
Правильно, рендерит холст в CSS-градиенты! Вот, собственно, и статья: https://dev.to/grahamthedev/doomrendered-using-a-single-div-and-css-1fal?
А вот прямая ссылка «на поиграть»: https://grahamthe.dev/demos/doom/
Кажется, на этом разговоры о Моне Лизе в одном DIV'е можно заканчивать.
#css #doom
#инструмент дня
Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция clip-path shape() из SVG, а это уже реальность!
напоминаю, в чём суть беседы: /channel/htmlshit/3603
Из этого:
M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z
clip-path: shape(from 97.54% 10.91%,curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,close);
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: /channel/+dxOw8jPgF8Y2NWUy
#фишка дня
С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...
И я о функции CSS shape(). Для clip-path.
Например, треугольник будет выглядеть так:
.shape1 {
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}
#инструмент дня
Так вышло, что в своей карьере я умудрился поработать в компании, которая хотела сделать стримы на веб-сайте своей основной фишкой. С тех пор HLS, RTP и nginx-rtmp-plugin были моими друзьями.
Но возможности по микшированию видео, звука и изображений прямо на веб-странице тогда были весьма ограничены или просто сложны. Работали через OBS, хотя даже он был в весьма зачаточном состоянии.
Но сегодня я наткнулся на нечто прекрасное: https://compositor.live/
Это набор React-компонентов и медиасервер, который позволяет стримить видео и микшировать несколько потоков, управляя ими как обычными компонентами и элементами страницы!
Можно построить нечто аналогичное Google Meet за считанные дни.
Вырезать зелёный экран, добавить текст, поменять видео местами, наложить блупер — всё на месте. Напоминает react-three-fiber по своей сути.
#react #video #mixer #media #stream #бородач
#статья дня
Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: /channel/htmlshit/1580
Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.
А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)
Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?
Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d
Ну, точнее, линейная алгебра.
Есть перевод на русский: https://habr.com/ru/articles/870462/
Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.
#svg #math #matrix #transform #бородач
Стань частью масштабного ИТ-события от МТС
True Tech Day 2025 — третья технологическая конференция МТС для профессионалов ИТ‑индустрии. Одна из главных тем в этом году — тренды и практики искусственного интеллекта.
В программе:
— Доклады от ученых и зарубежных спикеров с индексом Хирша более 50.
— Кейсы применения современных ИИ‑решений — от AI‑агентов, тестов LLM и бенчмарков до вопросов регулирования.
— AI-интерактивы и технологические квесты.
— Пространство для нетворкинга,
…а еще after-party со звездным лайн-апом.
Когда: 6 июня
Где: Москва, МТС Live Холл и онлайн
Участие бесплатно. Регистрируйся по ссылке.
Дэн «наше всё» Абрамов разродился статьёй!
React for Two Computers
— Почему мой компонент работает в браузере, но не на сервере?
— Потому что у тебя теперь два компьютера. Привыкай.
💥 Что вообще происходит?
Раньше React жил в браузере и радовался жизни: всё происходило на клиенте, стейт в useState, кликнули — перерендерили.
А теперь у нас появился второй «компьютер» — сервер. С серверными компонентами, приватными API, тяжёлыми вычислениями и всем остальным. И теперь React — это не просто `f(state)`, а f(data, state), где:
- data — с сервера, рендерится один раз
- state — в браузере, реагирует на действия пользователя
🧠 React теперь работает в двух мирах:
- Сервер — отвечает за данные, безопасность и тяжёлую работу
- Клиент — за мгновенные отклики, интерактив и состояние
Они живут в разных средах, но должны строить один интерфейс. И вот тут начинается веселье.
🧩 Но в чём подвох?
Абрамов говорит прямо: разделение компонентов на клиентские и серверные — это боль.
- Хочешь использовать хук? Прости, сервер не умеет
- Хочешь загрузить данные? Сервер умеет, но клиент не должен знать как
- Хочешь просто написать код? Удачи с этими use client, use server, границами, пропами и тайпингом
🧠 Примеры из статьи
- <Counter /> — типичный клиентский компонент. Быстрый отклик, стейт, интерактив
- <PostPreview /> — серверный. Может грузить пост из базы и вообще не попадать в бандл клиента
И вдруг возникает челлендж: а как показать список <PostPreview />, а рядом <Counter /> для лайков? Как они будут жить вместе?
Ответ: через пропсы, границы, и много боли.
📦 React как Lego из серверных и клиентских кусочков
Абрамов не просто жалуется — он исследует. Он пытается найти модель мышления, при которой:
- Ты не дублируешь код
- UI остаётся отзывчивым
- Компоненты переиспользуемы
- И при этом ты не хочешь сжечь проект через неделю
Он говорит: возможно, будущее React — это когда мы думаем не в терминах "компоненты", а в терминах "где этот кусок должен жить?"
🎥 Есть и видео!
Если лень читать или хочется живого контекста — Дэн рассказал всё это на конференции React Conf 2024.
Там много примеров и визуальных пояснений.
🧨 Финалим
«React теперь не просто библиотека для UI. Это **координация между двумя средами исполнения**. Между клиентом и сервером. И это сложно. Но в этом сила.»
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
Как заговорить с сетевиками на одном языке? 👍
Эксперты одного из ведущих провайдеров IT-инфраструктуры Selectel подготовили бесплатный курс «Погружение в компьютерные сети».
Всего за час вы сможете разобраться в принципах работы сетей, освоить ключевые термины и на конкретных примерах освоить две основные модели.
Курс будет интересен как джунам, так и более опытным разработчикам.
➡️ Убедитесь в этом, начав обучение в Академии Selectel
Реклама. АО «Селектел», ИНН 7810962785, ERID: 2Vtzqvo5XTG
#молния дня
IT-Incubator, почти единственное 5-звёздочное образование фронтов и бэкендеров на JS, которое реально трудоустраивает программеров на миддлов, впервые в этом году проводит розыгрыш своих образовательных программ:
1. курс "Основы Frontend с нуля" или скидка 300 EUR на основные программы до трудоустройства
2. сертификат на 160 евро для оплаты основных программ до трудоустройства
3. сертификат на 50 евро на полный пакет интенсивов, чтобы создать 4 приложения для своего портфолио: сайт, 1 приложение, 1 игру и интернет-магазин или оплату основных курсов до трудоустройства
4. фирменный рюкзак от IT-Incubator
Весьма интересное предложение от школы, которая готовит сильных разработчиков.
Кликайте сюда, чтобы участвовать в розыгрыше
Реклама
ТОО "ТачиТэк" БИН 230540018463
erid 2VtzqxFotYk
#заметка дня
Когда-то в среде разработчиков на Drupal CMS была популярна идея «зелёной разработки».
До массового гринвошинга было ещё лет 15, так что речь не совсем про экологию.
Это подход, при котором вместо установки десятков сторонних модулей (хотя в этом Drupal был ну очень хорош) и написания собственного кода, проект строился на базе уже имеющихся в ядре инструментов и проверенных, широко используемых решений.
Такой подход считался правильным не только с точки зрения производительности и безопасности, но и как способ сделать сайт легче, понятнее и проще в поддержке. Обновления ядра не стоили буквально ничего.
Он требовал вдумчивости, внимания к API и знания возможностей платформы, зато давал в ответ устойчивость и долговечность.
Сегодня, несмотря на смену технологий, этот принцип остаётся актуальным. Он проявляется, например, в отказе от зависимости на множество сторонних пакетов в пользу более простых, понятных решений. Особенно хорошо это видно в разработке на современных фреймворках и экосистемах.
Идея та же: если проблему можно решить на базе уже существующего API, без лишних зависимостей — это, как правило, и быстрее, и надёжнее.
С появлением нейросетей и их интеграции в рабочие процессы, этот подход получил новое обоснование. Модели вроде ChatGPT гораздо лучше справляются с генерацией и объяснением кода, если он опирается на известные, хорошо документированные API и стандартные структуры.
Стоит лишь использовать малоизвестную библиотеку с нестабильной документацией — и ИИ начинает фантазировать, выдавая неточные или устаревшие решения. Чем ближе код к «ядру» платформы, тем проще его понять, модифицировать и дополнить — как человеку, так и машине.
Вот опять я всуну свой пульт на Flutter: нужно было определить широковещательный IP-адрес в локальной сети. Чтобы это сделать, нужно было рассчитать маску подсети для Wake-on-Lan, проще говоря, включения телевизора по сети.
Казалось бы, можно просто найти библиотеку, но они все избыточны. В итоге я написал нужные функции с нуля. Это заняло 10 минут и дало результат, который точно соответствует задаче. Более того — нейросеть отлично помогла, потому что код простой, прямолинейный и не зависит от внешних факторов.
Аналогичным образом в мусорку полетели зависимости для кастомных модалок и шторок.
Нейросети в очередной раз подчёркивают важную мысль: библиотеки хороши тогда, когда они полностью закрывают задачу. Если же приходится обходить, дописывать или разбираться, почему не работает, — это сигнал, что стоит подумать, действительно ли нужна эта зависимость.
В таких случаях библиотека должна быть почти идеальной: хорошая архитектура, понятный интерфейс, живое сообщество, ясная документация и внятная поддержка. Иначе — лучше без неё.
В итоге идея зелёной разработки — это не про отказ от всего стороннего, а про осознанный выбор и уважение к инструменту, с которым работаешь. И если раньше это помогало делать сайты стабильнее, то сегодня это ещё и делает твою работу совместимой с ИИ-помощниками, проще для ревью, и готовой к масштабированию.
Мнения, котаны?
#gpt #chatgpt #green
#заметка дня
Сейчас многое в воздухе напоминает времена, когда можно было запустить сайт или мобильное приложение с минимальными усилиями — и оно начинало жить. Просто потому, что закрывало понятную задачу. Без идеального кода, без идеального интерфейса. Главное — идея.
У меня был опыт запуска конструктора надгробий. Да, звучит так себе, но на старте всё работало — живой завод, заказы, настроенный фронт. Потом было продолжение — конструкторы футболок, зеркал, чего угодно. Но дальше MVP дело не пошло: выгорел, закопался в полировке, перегорел на этапе реализации. И в какой-то момент понял: если нет простого пути от идеи до пользы — всё, конец.
При этом я видел, как совсем неотполированные, страшные внешне продукты отлично зарабатывали. Их делали не разработчики, и явно не для разработчиков. Но они решали задачу — и этого хватало, чтобы пользователи и деньги нашлись.
Сейчас похоже происходит с ИИ. Alex Four (Гик-культура и Русское IT за границей) хорошо сформулировал, что мы снова в моменте, когда технологии стали достаточно доступными, чтобы быстро воплощать идеи. Причём без необходимости сразу собирать команду. Идея по-прежнему главное — а ИИ скорее ускоряет путь от задумки до работающего прототипа. Не заменяет, но помогает докрутить, попробовать, запустить.
Это не продлится вечно, но пока — время делать.
#заметка дня
Перед вами две иллюстрации. Видео мы обсудим сейчас, а графики — в заключении, идёт?
Итак, на видео представлен пример очередного формата передачи идей моушен-дизайна в приложениях и браузерах! И имя ему — Lava.
И, неожиданно, он снова от AirBnb!
Почему снова? Если вы помните, Lottie — тоже их инициатива. А это почти промышленный стандарт, даже ваши анимированные стикеры в телеге — это Lottie.
А вот Duolingo использует Rive.
Так зачем же AirBnb понадобился очередной формат?
Ну, ответ, на самом деле, довольно простой: сложные, неотличимые от растровых, векторные изображения занимают очень много вычислительных ресурсов. Каждый, кто делал видеостикеры в телеге это знает. Ещё и весят несколько тонн.
Плюс, стыковка кадров для отображения разных состояний — в векторе намного сложнее, поэтому анимации или возвращаются сначала в исходное положение, или аниматоры прибегают к разным трюкам.
Почему же нельзя было выбрать какой-то из существующих видеоформатов? Ответ очевиден: поддержка альфа-канала в видео браузерами всё ещё на зачаточном уровне, обходные манёвры очень дороги. Ну и видео всё же немного иную задачу решают, кадры на лету в них тоже подменить довольно непросто.
Подробнее об этом можно почитать в твите от одного из авторов формата.
Кстати, что же такое этот формат?
На самом деле, это довольно сложный AVIF-спрайт, работа с которым описана в JSON. Откуда мы это знаем, ведь формат не открыт?
Ну, всё, что попадает в веб, становится в той или иной мере открытым! Вот и инициатива по реверс-инжинирингу LAVA подъехала: https://github.com/AlexStrNik/OpenLava/tree/main
Кому интересно, посмотрите. Там есть даже попытка конвертации из lava в webm :)
Теперь к графику цен стоков, вторая иллюстрация.
Жёлтый — это Booking.com. Синий — AirBnb. Nuff said.
При этом, миру разработки, а особенно фронтенду, AirBnb дал столько, что никакому Букингу и не снилось. Но... бизнес и благотворительность — вещи разные.
Хочется пожелать удачи AirBnb, чтобы они выбрались из круга общественного давления и репутации и продолжили радовать нас крутыми инструментами.
#transparent #video #lava
Здесь разрабы не просто двигают кнопки и лутают деньги, а создают шедевры!
Я Никита — frontend-разработчик, любящий свою работу. Я приглашаю тебя в свой канал о фронтенде с душой Frontend For The Soul с вдохновляющим комьюнити, фичами, которых нет в других источниках, регулярными трендовыми идеями и книгами.
Здесь каждый пиксель имеет душу. Присоединяйся — @frontendforthesoul
#codepen дня
Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?
Сегодня ваш шанс вспомнить то самое чувство!
Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)
Тут: https://codepen.io/donotfold/pen/ZYYYJRV
Работает в Chrome и Safari TP.
Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.
#css #scroll #animation
#статья дня
...ну и #инструмент дня к ней заодно.
Где-то с месяц назад в блоге Chrome появилась интересная запись, посвящённая... каруселям изображений в CSS
Которые почему-то в русскоязычном пространстве все с чьей-то подачи называют слайдерами...
И на самом деле, это не самодеятельность Chrome! Это целый новый черновик спецификации: CSS Overflow Module 5.
Из интересного:
- кнопки пред-след aka ::scroll-button
- маркеры слайдов и страниц aka ::scroll-marker
- автоматическая разбивка на страницы
- выделение активного слайда и затенение остальных
Естественно, поддерживается пока только в Chrome со 135 версии и прочих Blink-браузерах.
Но выглядит интересно! Собственно, обещанный конструктор: https://chrome.dev/carousel-configurator/
Учитывая, что карусели изображений подходят только для, хм, изображений и ни один нормальный дизайнер в здравом уме не станет запихивать в карусели важную информацию (её не увидят, это факт), внедрение этой функциональности в браузеры чтобы перестать подгружать сотни килобайт скриптов выглядит разумно.
Ну и фоллбек до обычной прилепленной прокрутки aka scroll snap никто не отменял.
Ваши мысли, котаны? Имеет смысл ждать это в Safari и Firefox?
#css #scroll #gallery #carousel
⚡ Новые каналы с вакансиями и стажировками для джунов
В этих каналах публикуются все свежие вакансии и стажировки
🔺 ВАКАНСИИ
Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.
👉 ПОДПИСАТЬСЯ
🔺СТАЖИРОВКИ
Стажировки для начинающих специалистов в IT независимо от возраста!
👉 ПОДПИСАТЬСЯ
🔺IT interns
Свежие стажировки для junior специалистов в топовых компании России и мира
👉 ПОДПИСАТЬСЯ
🔺Junojobs
Вакансии и стажировки для junior-разработчиков на удалёнке.
👉 ПОДПИСАТЬСЯ
🔺БИГТЕХ
Junior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.
👉 ПОДПИСАТЬСЯ
🔺Ква инженер - QA junior
Отборные джун вакансии и стажировки для QA, тестировщиков.
👉 ПОДПИСАТЬСЯ
Что обсудят на infra.conf и причём тут прод
Если вы работаете с продакшеном и знаете, как это — не спать, потому что «опять что-то пошло не так», то infra.conf — конференция, которую стоит отметить в календаре. Здесь обсуждают реальную инженерную работу. С ошибками, обходными решениями, архитектурными компромиссами и выводами, которые рождаются не в теории, а в бою.
Обсудят CI/CD, продакшен-подходы, безопасность, доставку моделей и устойчивость систем под нагрузкой. И всё это в формате, где докладчик не боится сказать: «да, вот здесь мы ошиблись, и вот как это починили».
infra.conf пройдёт 5 июня в Москве, в пространстве Loft Hall 8. Поучаствовать можно и онлайн. А регистрация доступна тут.
#странное дня
Странное чувство. После 5.5 лет работы в компании Supermetrics, я принял решение уйти.
И сегодня — первый день моего месячного отпуска, после которого я уже не вернусь в столь знакомый офис 😭
Причины ухода разные, но давайте сведём их к более высокой зарплате и остановимся на этом.
Куда я ухожу — расскажу через месяц.
А поговорить я хочу вот о чём. Чисто технически, описание канала будет теперь неверным, поскольку ухожу я на позицию ниже. С техлида на обычного сеньора.
И добровольное понижение позиции начинает встречаться в сети всё чаще.
Почему это происходит?
— Желание вернуться к инженерной работе.
Управленческая роль — это митинги, процессы и координация. Разработка при этом часто уходит на второй план.
— Смена технологии или направления.
Если переходишь в другую сферу — разумно указать должность, которая соответствует реальному уровню в новом контексте.
— Меньше ответственности — меньше стресса.
Иногда хочется просто делать свою работу хорошо, без постоянного напряжения и необходимости принимать управленческие решения.
— Интерес к самому продукту или команде.
Ради сильной команды или интересного проекта можно пожертвовать тайтлом. Это не редкость.
— Релокация или выход на международный рынок.
Не все должности адекватно транслируются между странами. То, что называлось «тимлидом» здесь, может восприниматься совсем иначе там.
— Ожидания и реальность.
В своей веб-студии ты можешь быть C-level. Но на собеседовании в продуктовую компанию такой титул скорее вызовет недоумение и завышенные ожидания — как у HR, так и у будущих коллег. Иногда честнее и полезнее прийти в новую команду без лишнего шума.
Такие решения не стоит воспринимать как «шаг назад». Это адаптация.
Но очень важно — изучать компанию, куда идёшь. Понимать её культуру, ожидания и структуру. Не везде звания означают одно и то же.
Волкам, конечно, не понять, да и цель у них другая. Но мы здесь не за трофеями. Мы — за работой, в которой есть смысл.
#life #work #balance
#молния дня
Ничего никому не говорите, срочно вбивайте "чиксулуб" без кавычек в поиск Google.
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
#статья дня
Как по-настоящему довести коллег в Slack?
Очень просто: заливайте туда эмодзи в формате HDR.
Slack теперь поддерживает эмодзи с таким качеством, что они выглядят лучше, чем презентация вашего начальника. Плавные тени, сочные цвета, блеск как у начищенных ботинок — в общем, картинка маслом.
Эффект гарантирован:
– Весь чат будет похож на унылый подъезд с одной лампой на 40 ватт — и на этом фоне ВАШЕ эмодзи засияет, как люстра в Большом театре.
– Коллеги будут щуриться и переспрашивать: "А почему у тебя эмодзи такие... странные?"
– А вы будете невинно отвечать: "Не знаю, наверное, Slack сам что-то подкрутил".
А чтобы быстро сделать своё HDR-эмодзи, просто выполните команду:
```
brew install imagemagick
# Adjust the Multiply value up or down to preserve color as opposed to brightness
magick input.png \
-define quantum:formatfloating-point \Понадобится
-colorspace RGB \
-auto-gamma \
-evaluate Multiply 1.5 \
-evaluate Pow 0.9 \
-colorspace sRGB \
-depth 16 \
-profile 2020_profile.icc \
output.png
```ImageMagick и кастомный цветовой профиль, подробности — в статье.
Источник вдохновения: https://sharpletters.net/2025/04/16/hdr-emoji/
Главное — никакого буллинга. Только инновации и немного вкуса к жизни.
🎯 Кстати!
Проект «Карьера шаг за шагом» от Pulpy и SuperJob всё ещё ждёт вас!
Не упустите свой шанс получить:
• Стажировка в топовых компаниях
• Консультация от карьерных экспертов
⏰ Важно: до 4 мая ещё можно успеть отправить резюме! Время тикает, но у вас в запасе ещё есть пара недель – самое время действовать!
#slack #emoji #hdr
#такое дня
Вчера в Твиттере произошёл разговор. Обычный очередной разговор о собеседованиях и о том, что все кругом пытаются прыгнуть на уровень выше, хотя даже близко не там. Ну, обычное дело.
Но вот один вопрос, который задавал автор треда, прям немного покоробил: "Какие новые технологии в разработке вас вдохновляют?" И большинство просто отвечало: "RSC". И это автора очень расстраивало.
Речь шла, конечно, о фронтенд-собеседованиях.
Что не так с этим вопросом?
Да, вроде, всё так, пресловутая "искра в глазах". Вот только всегда есть нюансы.
Нюансы имплементации в браузерах. Там не просто собака порылась, там собака всё разнесла. Каждую из новых широкодоступных технологий.
Давайте посмотрим в качестве примера на такую простую штуку, как contenteditable.
Не так давно Firefox 136, наконец, присоединился к поддержке contenteditable="plaintext-only". Это значит, что при вставке какого-либо rich format куска, ну, грубо говоря, оформленного текста из HTML или Microsoft Word, он вставится обычным текстом, оберегая нас всех от лишних тегов.
Крутая фича, не правда ли? Так удачно легла на везде рекламируемый разными инфлюенсерами baseline!
Но вообще, нам что, textarea не хватает? Вот, кстати, не хватает. Например, сделать авторесайз textarea довольно непросто, и CSS Custom Highlight API тоже не накатить. А div всё сделает сам.
Вот только при редактировании такого текста Firefox вставит <br> на каждый перевод строки, а Chrome — нет.
Бадум-тсс.
И так почти с каждой новой спецификацией. Везде, где остаётся хоть какое-то пространство для манёвра вне спецификации — разработчики обязательно куда-то не туда вывернут и потом годами будут это защищать.
Плохо ли это? Да нет, наверное. Особенно, если ты разработчик браузера.
Но восхищаться этим становится как-то... трудозатратно.
#textarea #contenteditable
#такое дня
Если этим утром вы проснулись с диким синдромом самозванца и считаете, что уж вас-то точно переоценили, помните.
Где-то в Google есть фронтенд-разработчик, PM и QA, которые не осилили скелетоны и скроллбары. И получают они сильно больше денег чем вы, котаны.
Синдром самозванца, вроде, стал полегче, но в целом стало гораздо хуже, не правда ли? :)
