14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#заметка дня
Тут Иван Акулов из Framer поделился, как они доставляют AVIF-изображения, добиваясь ещё большей, чем WEBP, экономии трафика.
Да, я в курсе, что многие генерируют картинки при сборке, кто-то использует сервисы и так далее, но давайте не забывать, что:
1. Есть пользовательский контент
2. Облака могут встать дорого
Итак, в чём же проблема? А в том что AVIF ну очень долго кодируется, что не есть хорошо. Там, где на генерацию WEBP уйдёт 100-300 мс, на AVIF — 1-3 секунды.
В итоге, если генерировать изображения по запросу и сохранять на CDN (тем же nginx, например), будет не очень вежливо заставлять посетителя ждать.
Поэтому было решено применять подход, знакомый нам как stale-while-revalidate.
1. С первым запросом генерируем WEBP-картинку, но устанавливаем кеширующие заголовки как Cache-Control to max-age=0, stale-while-revalidate=31536000.
2. Поскольку max-age выставлен в 0, картинка моментально "протухнет", CDN с этим не согласится и отправит второй запрос, чтобы, собственно, закешировать.
3. И вот тут уже начинаем генерировать AVIF.
4. И отправляем его с max-age=31536000, ну, почти навсегда.
Ну и общая статья на тему: https://www.framer.com/help/articles/how-are-images-optimized-in-framer/
Я тут пока готовил этот обзор, хотел найти свой конфиг nginx для генерации и кропа картинок на лету, но... потерял. Кажется, пришло время потренироваться и написать обновлённый, по мотивам.
А как вы доставляете картинки, котаны?
#image #optimization #бородач
#til дня
Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?
Мне — нет. Но вот сейчас почти да.
Вы знали, что вот уже пару лет как nth-child в CSS стал нормальным?
Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (`div`, p, `section`).
Выходит какой-то бред, как мне посчитать второй элемент с классом .star?
И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!:nth-child(2 of .star) {
background: red;
}
Ведь счастье так возможно. Стефан Юдис мне это показал.
Вот, Baseline 2023: https://caniuse.com/css-nth-child-of
И демо: https://codepen.io/alinaki/pen/LYKXWYo
Я, короче, очень доволен.
#css #nth #фишка #бородач
#инструмент дня
Приложение растёт, достигло невероятных масштабов, а интернационализацию не завезли?
Или так долго пилили фичи под основной язык, что переводчик-техпис успел уволиться, а техлиду не нравится ни один кандидат?
Да, это не оправдание фигачить строки без заворачивания их в уже ставший настолько привычным t(), но что-то же делать надо, согласитесь?
Итак, вашему вниманию несколько вариантов для упрощения переноса подвисших непереведённых строк в ресурсные файлы:
1. Lingui ESlint плагин — https://github.com/lingui/eslint-plugin
Да, не так много людей использует Lingui, но плагин — достаточно универсальный и гибкий. Позволит найти как строки в тегах, так и в атрибутах.
2. Сюда же ESLint плагин для чуть более привычного i18next — https://www.npmjs.com/package/eslint-plugin-i18next
Занимается буквально тем же самым, но вариантов настройки чуть меньше. Лично у меня не было времени досконально проверить вариант 1, потому я остановился на этом. Сердито и быстро. Ну и конечно, установил его в warn.
3. Ну и в качестве забавного артефакта, добавим i18next-emoji-postprocessor. Что он делает?
О, он делает дичь. Заменяет все переведённые строки на рандомные эмодзи. Что не переведено — в эмодзи не превратится. Звучит кринжово, но на самом деле может стать идеально для текучки уставшего техписа.
Конечно, идеальным решением был бы экспорт непереведённых строк в CSV, но это я пока не до конца осилил. Получится — расскажу.
А как вы с этим справляетесь, котаны?
#i18n #l10n #eslint
#видео дня
А это что это? А это Юлия Миоцен вернулась (вот ссылка на первую часть) со второй частью обучающих видео по 3D в CSS!
Вот: https://www.youtube.com/watch?v=2FEgcYfiTEM
Напомню, что в прошлый раз мы с вами рисовали воксельных животных.
На этот раз речь пойдёт об освещении: где размещать источник света, как рассчитывать и строить тень, какого цвета эта самая тень должна быть.
Есть и текстовая версия с примерами: https://miocene.io/post/light-and-shadow-in-css/
Как и в прошлый раз, стоит отметить: возможно, вы никогда в жизни не будете рисовать животных на своих страницах. Но на промо-сайтах чего только не бывает, переворачивающиеся толстые карточки — несите их сюда!
#css #3d #light
#ссылка дня
Во, UI-экспериментаторы уже подтянулись.
SVG-фильтры на связи: https://codesandbox.io/p/sandbox/nn5q2y
GitHub: https://github.com/lucasromerodb/liquid-glass-effect-macos
Очень простая реализация, конечно, но есть забавный момент: поддержка SVG-фильтров на Safari довольно плоха, эффекта завихрения не происходит.
Вообще, SVG фильтры в принципе очень недооценённая и недоделанная в каком-то смысле технология, даже карту нормалей можно применить в них, без перехода в WebGL. Но поддержка жах.
#svg #glass
А вы замечали, что создание онлайн-курса - это как ремонт?
Сначала кажется, что "всего-то видео нарезать", а потом:
сценарий, монтаж, субтитры, обложки, платформа, дедлайн, прокрастинация, траты, новый курс по прокрастинации…
И всё ради того, чтобы потом кто-то досмотрел до второго урока.
Но вот интересный вопрос: а что если AI наконец начал это чинить?
Ребята из русской компании AskHow запилили штуку, которая превращает любое длинное видео - Zoom, эфир, лекцию - в готовый курс за пару минут.
Просто загружаешь файл - и всё остальное делает ИИ:
- транскрибирует
- нарезает на уроки
- формулирует заголовки
- позволяет править текстом (удалил фразу - и она исчезла из видео)
А потом - сразу публикует на платформу, где уже есть мини-LMS, сбор лидов и даже приём оплаты.
Сейчас курсы создаются из готовых длинных видео, но ребята работают над генерацией видео курсов из текстов и подключением цифровых аватаров.
Если хотите сами опробовать ИИ-инструмент - можно это сделать прямо сейчас, там есть промо-код для бесплатного теста.
В общем, если вы хоть раз говорили "надо бы потом собрать курс" - вот вам то самое "потом")
👉 Попробовать бесплатно и поддержать ребят на Product Radar.
#ux #будниразработчика #edtech #ai #coursebuilder
#новость дня
Никогда такого не было, и вот опять!
Уязвимость на базе localhost? Дайте две!
Итак, по порядку. Не так давно мы с вами обсуждали уязвимость под названием 0.0.0.0 Day. Суть её заключалась в том, что браузеры разрешали рандомным сервисам стучаться на разные порты по адресу 0.0.0.0, тем самым, позволяя этим самым сервисам определять, что же у вас на компьютере такого установлено. Это могли быть как средства для разработчиков, так и различные локальные сервисы поиска, защиты или просто мониторинга.
Так вот, на этих ваших прекрасных Android-смартфонах практически каждое приложение Facebook и Яндекса поднимают свой сервер, прослушивающий определённый диапазон портов. А скрипты аналитики и метрик передают куки этим самым серверам, связывая посещение некоего рандомного сайта с вашим аккаунтом в перечисленных компаниях.
А, каково? На iOS так сделать нельзя, потому что долгоживущие фоновые процессы ещё надо обосновать самому Apple.
А вы потом удивляетесь, откуда столько релевантной и не очень рекламы, ведь никому не говорили, никуда не входили. Только говорили.
Статья: https://localmess.github.io/
Перевод: https://habr.com/ru/articles/915732/
Совершенная красота, конечно. Facebook, кстати, перестали это использовать. Яндекс вроде ещё использует.
Почитайте статью или перевод. Очень крутая.
#cvs #security #privacy #vulnerability
#статья дня
Дэн наше всё Абрамов недавно написал статью о новом способе передачи данных с сервера — Progressive JSON. Это не просто использование курсоров для пагинации, как в том же JSON:API, а настоящий поток данных, где структура JSON передаётся частями, по мере её готовности.
Вообще, много пишет последнее время. Это хорошо!
Зачем нужно? Собственно, для работы React Server Components в том числа!
Пример такого потока:
{
"header": "Welcome to my blog",
"post": "$1",
"footer": "Hope you like it"
}
/* $1 */
{
"content": "This is my article",
"comments": "$2"
}
{
"header": "Welcome to my blog",
"post": {
"content": "This is my article",
"comments": new Promise(/* ... not yet resolved ... */),
},
"footer": "Hope you like it"
}
Когда в последний раз вы трогали свои сиксели?
Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.
Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.
📌 Что это такое?
Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.
Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.
Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!
🖼 Как смотреть картинки в терминале?
👉 Самый простой способ — lsix, это ls, но для миниатюр:
brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux
А дальше просто запускаем:lsix
и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.
🔄 Конвертация изображений
Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:brew install libsixel
img2sixel myimage.png
А если у вас установлен ImageMagick, можно делать так:convert myimage.png sixel:- #
Конвертирует и сразу выводит в терминал.
Если уже есть картинка в формате sixel, можно вывести её простым cat.
❓ Поддержка в эмуляторах терминала
Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/
Сразу скажу, что стандартный терминал в macOS — не умеет.
Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.
В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄
#console #images #бородач
#заметка дня
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!
Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.
Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?
А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...
А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.
Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.
Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.
А какой у вас опыт, котаны?
#sso #saml #signin #ux #бородач
Недавно на Кинопоиске вышел цикл интервью «Истории Яндекса». Это архив воспоминаний бывших и текущих сотрудников, которые развивают компанию. Я глянул пару эпизодов и больше всего мне зашло интервью Сергея Крупина, руководителя направления общей инфраструктуры дата-центров.
Сергей проработал в Яндексе 14 лет и застал сразу несколько исторических эпох компании. Столь длительный путь в одном месте, по его словам, связан не только с интересными задачами и проектами, но и с внутренним кругом общения, который разделяет его ценности.
Тот случай, когда работа становится чем-то большим. Ты идешь туда не потому что «надо», а за атмосферой и людьми, с которыми тебе комфортно. И такой подход я разделяю: никакие бонусы, ДМС и прочие плюшки не смогут дать ощущение, что ты на своём месте.
Замечу, что это не классическая документалка, а спокойный формат с честными разговорами о работе и жизни в бигтехе. Отлично подойдет для фонового прослушивания.
#инструмент дня
Вчера на Future Frontend (а вот, кстати, стрим на сегодня) деврелы Google представляли новые и неизвестные возможности Chrome DevTools.
Конечно же, почти вся презентация была посвящена AI, но они мельком напомнили о Workspaces (рабочих пространствах, средах).
Короче говоря, можно редактировать код своего проекта прямо в девтулзах. А учитывая, что девтулзы — штука мощная, да ещё и отладчик под рукой — идея становится весьма привлекательной.
Но настраивать Workspace — задача довольно раздражающая. Вот бы они создавались автоматически при дев-сборке...
Так можно же! Ну или вот, чуть более подробная дока из сорсов.
Короче, суть в чём. Создаём файл .well-known/appspecific/com.chrome.devtools.json:{
"workspace": {
"root": "/home/user/awesome-project",
"uuid": "53b029bb-c989-4dca-969b-835fecec3717"
}
}
Ну, в общем, всё! Девтулзы распознают конфигурацию и позволят редактировать проект прямо в браузере. Что, повторю, сильно удобнее, чем кажется.
Особенно если ты умеешь пользоваться отладчиком.
Кстати, в будущем релизе Bun это будет включено по умолчанию для dev-среды.
А если хочется попробовать прямо сейчас, есть официальный плагин для Vite и пример его использования.
В Chrome 137 все нужные флаги уже включены по-умолчанию, кстати.
#devtools #workspace
Прошел вайб-чек от команды Яндекс Вертикалей, кажется, мне пора в отпуск. Какие у вас результаты?
🆖 перейти в бота
#заметка дня
А где это я сегодня? А я сегодня на конференции Future Frontend 2025!
Было бы странно, если бы я был на 2024…
https://futurefrontend.com/schedule/
Возможно, буду вести некое подобие трансляции по ходу дня. А пока — завтрак, знакомство с будущими коллегами и ожидание старта.
Бейджик отражает уже устаревшую информацию.
Из мерча — банное полотенце! Потому что афтепати будет в сауне. Кстати, в 2021 году тоже давали. Но похуже :)
Как всегда, доверь разработчику настройку стриминга — и ничего не выйдет, все ждут 🫠
#futurefrontend
#заметка дня
Быть в отпуске, который никак заранее не планировал, а в конце которого — полная смена работы (и даже отчасти деятельности: из продукта в дизайн-систему) — штука довольно тяжёлая.
С одной стороны, на работу ходить не надо. С другой — нужно как-то себя развлекать!
Зато, наконец, появилось время добить пульт на Flutter и запустить его на телефоне.
Не без проблем, конечно. И с Android, и с iOS.
Если с Android всё более-менее понятно — старая конфигурация, мелкие баги, — то с iOS…
Симулятор против реальности
iOS на симуляторе и iOS на реальном устройстве — это две совершенно разные iOS.
Нам никто не обещал полноценной эмуляции. Да, симулятор упрощает вход в разработку. Но почему бы не предупреждать разработчиков, что потом всё пойдёт не так?
Хотя, признаюсь, в половине случаев виноват сам.
Например, приложение падало при поиске телевизоров, который у меня реализован через SSDP (Service Discovery Protocol). Это работает через мультикаст (multicast) — а это уже отдельный мир.
Оказывается:
- Мультикаст — это отдельное разрешение, scope.
- Его нужно объявлять в конфигураци приложения.
- Потом — проходить модерацию в App Store.
Более того, нужно заранее уведомить Apple и получить соответствующий сертификат ещё до начала разработки.
И всё это — только если у тебя есть разработческий аккаунт за $99 в год. Без него — даже не пробуй.
А симулятор? Он позволяет всё. Мультикаст работает без проблем. Никаких предупреждений. Всё как по маслу — пока не ставишь приложение на свой собственный iPhone.
Решения
Окей. Я решил:
- Оставлю поиск включённых телевизоров на более дружелюбных ОС.
- Добавлю fallback — диалог ручного ввода IP-адреса телевизора.
Это помогло.
Но тут всплыла новая проблема — Wake-On-LAN не работает.
Хотя он должен работать даже по Wi-Fi: ваши «умные» устройства де-факто никогда не выключаются. Но я забыл, что у телефона две сети — Wi-Fi и сотовая. А вещать нужно в Wi-Fi.
Когда я начал фильтровать интерфейсы по ключевым словам (например, en на iOS/macOS или wlan на Android/Linux), всё наконец заработало.
SSDP без мультикаста?
И тут меня осенило: а можно ли использовать SSDP без мультикаста — через broadcast?
Ответ — да! Достаточно:
- Изменить IP шлюза.
- Отключить присоединение к мультикаст-группе.
Поиск устройств заработал. Никаких разрешений от Apple не нужно. Всё прекрасно!
Даже пока не надо тратить сотку...
Хотя ручное добавление по IP я всё равно оставил — на всякий случай.
Кстати, на эмуляторе Android ни SSDP, ни WebSockets — пока не работают... Вот вам и минус мультиплатформенной разработки — приходится разбираться в нюансах вообще всего.
Зато на iOS, macOS, Linux и Windows теперь всё просто прекрасно.
#flutter #ios
Иногда сложно объяснить, почему какая-то мелочь на работе оказывается важной.
Ну вот, пицца в офисе. Не то чтобы ради неё хотелось бы приходить пораньше. Но всё же — приятно просто поесть с коллегами, отвлечься. И это уже немало.
Недавно в социальных сетях завирусился пост: сотрудникам с очень неплохими зарплатами задали вопрос — какой бенефит для них важен. Оказалось, бесплатные обеды. Казалось бы, при таких доходах. А по факту — удобно, не нужно принимать лишние решения, экономишь время, и, что важнее всего, силы.
Такие штуки часто кажутся чем-то второстепенным. Но когда они складываются в систему — в еду, спорт, терапию, жильё, адекватную поддержку — это перестаёт быть просто «бонусами». Это уже система, которая влияет на то, как ты живёшь и работаешь.
Вообще, тема интересная, и более подробно её раскрыли в подкасте Деплой на кейсе нематериальных мотивашек Яндекса. Есть много примеров, как это работает внутри: объяснили, как такие программы вообще появляются, зачем IT-компании тратят на это ресурсы и как измеряют пользу бенефитов. Тут, кстати, спойлерну: смотрят на востребованность, эффективность и удовлетворенность сотрудников.
Еще было любопытно про то, как в компании работают превентивные чекапы и как поддерживают коммьюнити по разным интересам.
⚡️IT-блоги: всё самое важное — в одном месте
Папка с каналами, которые помогают держать руку на пульсе мира технологий. Без воды и лишней рекламы — только суть, опыт и свежий взгляд на тренды.
Что внутри:
👨💻 Каналы IT-специалистов с кейсами, фейлами и полезными находками
🔒 Апдейты по кибербезу — чтобы не словить бан за уязвимость, о которой давно написали
👀 Чекпоинты по QA — тест-кейсы, автотесты, баг-репорты как искусство
🗓️ IT-ивенты от команд Т-Банка и Russian Hackers — митапы, конфы, движ
🌍 Каналы про глобальные digital-решения и аналитику: от BI до data-инженерии — тренды, продукты и технологии, которые двигают рынок вперёд (и всплывают на собесах)
Тест от Спортмастера утверждает, что я всё ещё не научился совмещать работу и жизнь. Какой результат у вас?
➡️пройти тест можно тут◀️
#фишка дня
Использование position: sticky уже так-то стало обыденностью.
А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
@container scroll-state(stuck: top) {
.pip {
width: 200px;
transform: translate(-50%, 0%)
translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
}
}
translate можно складывать, получая интересную математику в итоге :)
#заметка дня
— Мама, я хочу Liquid Glass!
— Liquid Glass есть у нас дома!
Liquid Glass дома: https://nrzns4.csb.app/
Кто не в курсе: https://developer.apple.com/videos/play/wwdc2025/219/
Ладно, кроме шуток. Да, это просто материал с картой нормалей. Но так и яблочное решение — не более, чем продвинутый шейдер.
Уверен, что UI-экспериментаторы скоро подтянутся :) Не знаю, насколько это будет востребовано, конечно, но...
Flutter жалко. У React Native тут явное преимущество получается. С другой стороны, Liquid Glass — он не только про виджеты, это попытка выстроить новый дизайн-язык. На мой взгляд, довольно странная, но какие-то изменения давно напрашивались, даже тот же Google в Material Design V3 натворил непонятного.
Идея, стоящая за Liquid Glass, — это отсутствие интерфейса. К сожалению, эта же идея привела к тому, что этого самого интерфейса на десктопной ОС стало даже слишком много.
Поглядим. Сквозь стекло.
#apple #liquid #glass
#фишка дня
...от Ахмада Шадида, уже хорошо нам известного.
Как отменить скругление углов на мобиле, но оставить на дестопе?
Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...
А можно просто:
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
border-radius: if(100% < 100vw: 8px; else: 0px);
#фишка дня
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.
Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var
#совет дня
Расскажу о других авторских каналах, на которые советую подписаться — собрал их в одну папку.
В них пишут, как начать кодить, вырасти в грейде и попасть на работу мечты. А еще делятся опытом и советами, которые помогут наработать новые навыки и трудоустроиться.
Будет полезно как джунам, так и сеньорам — /channel/addlist/0FHgy1y1yZgxMDc6
#codepen дня
Просыпайся, страна! Minecraft подвезли...
...на CSS!
Подвезли-то давно, но завирусилось только сейчас: https://benjaminaster.com/css-minecraft/
CodePen: https://codepen.io/Benjamin_Aster/pen/gOKwpOd
GitHub: https://github.com/BenjaminAster/CSS-Minecraft
Я не так давно посмотрел серию видео о разработке Minecraft для 8- и 16-битных консолей и даже для калькуляторов, но даже после этого — версия на HTML+CSS повергла в культурный шок.
Скриптов на странице, кстати, нет. Даже поворот — это сочетание псевдокласса :active и animation-play-state!
Дичь совершенная.
#css #minecraft
#ссылка дня
Кто хотел красивых анимированных иконок без обязательств?
🙋 Я точно хотел!
Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/
Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?
Давайте немного насладимся воем на болотах о том, что ещё одна библиотека анимации в проект нам не нужна.
Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?
К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.
Берём, котаны?
#icons #svg #animation #бородач
#игра дня
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.
🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted
#game #js
#заметка дня
Пожалуй, лучший доклад дня: распознавание жестов комбинацией Gemini и Tensorflow.js
Секция с демо была просто потрясающей. Не просто «я написала промпт и вызвала апи», а еще и с какими проблемами пришлось столкнуться по пути. И почему просто нельзя было обойтись одним только Tensorflow.js
Переходите на стрим и смотрите. Это стоит того!
Впрочем, следующий доклад о генерации многослойного эмбиента тоже весьма крутой. Как минимум, как демонстрация возможностей Cursor :)
#futurefrontend
#стрим дня
Я же совсем забыл докинуть ссылки на стрим! Он, к слову, бесплатный.
Стрим на сегодня: https://www.youtube.com/live/rWqIEWStdkA
На офсайте есть и ссылка на завтра, но мне же завтра тоже надо что-то запостить, верно?
Только что вот закончился доклад Георгиоса Диамантополуса (греческие фамилии очень крутые, согласитесь?) из секции Work-Life Balance о том, как наше тело реагирует на сидячую работу. Очень подробный и убедительный.
Присоединяйтесь!
#futurefrontend
#фишка дня
Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.
Что же делать?
А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!
Чтобы было понятно, что конкретно не загрузилось — стоит ещё и attr(alt) докинуть.
img::after {
content: "Image of " attr(alt) "\A is not found 😞";
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
background: #eee;
border: 2px dashed;
white-space: pre-wrap;
color: #AA0000;
}
br использован: \A + pre-wrap.::before, а ::after? Да потому что Firefox занимает ::before под отображение alt и некоторые средства доступности могут этим пользоваться.
Яндекс проведет второй Young Con — фестиваль для всех, кто интересуется IT, уже работает в сфере или только планирует.
В этом году фест соберет 8 000 гостей, включая опытных и начинающих специалистов, студентов и школьников 9-11 классов. На главной сцене планируется более 20 докладов от экспертов компании, которые поделятся советами по построению карьеры. Одним из приглашенных спикеров станет Ян Топлес — автор и ведущий популярного образовательного блога на YouTube. Вечером можно будет отдохнуть под хип-хоп Feduk и послушать поп-рок от Доры.
Главная тема феста — карьерный буст. На протяжении всего дня можно будет пообщаться с рекрутерами и инженерами, посетить воркшопы и пробные собеседования, а еще узнать больше про технологии и сервисы Яндекса на специальных стендах. Там же пройдет финал «Баттла вузов» — студенческого турнира по программированию с призом в 1 млн рублей.
Young Con пройдет 25 июня на сцене Live Арена в Москве. Подаем заявку на участие уже сейчас и подписываемся на канал фестиваля.
На видео — вайб первого Young Con.