14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.
Шум там наложить, модельку картой нормалей увешать...
Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.
Да-да, под ретро-игры!
Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/
Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.
Очень круто выглядит.
#webgl #shader #бородач
#фишка дня
Сидишь, переписываешь старый проект на новую дизайн-систему и тут оно.
Модальное окно.
И если предыдущей системе было всё равно на расположение кнопок отмены, сохранения — определил в форме и ладно — новая требует положить кнопки в Modal.Footer.
И всё бы ничего, но у тебя там форма. И не просто форма, а Redux Form-зависимая. И у неё свой внутренний обработчик submit. И снаружи его триггернуть — как-то многовато работы получается. И мешать в кучу компоненты модалки с компонентами формы неохота — всё протестировано давно, зачем трогать.
Что же делать? Очень просто! У button type="submit" имеется атрибут form, в котором — да, правильно — указывается id нужной формы. По аналогии с for у label. И клик по кнопке отправит форму, которая может быть расположена где угодно на странице.
<form id="test" onSubmit={() => null}>
<input type="text" name="name">
</form>
<button type="submit" form="test">Submit</button>
Golang: копирование и анонимизация данных
8 уроков, чтобы создать приложение на Golang, способное копировать и анонимизировать данные для prod-like окружений.
🎁Цена в сентябре всего 3250₽
Внутри курса:
➡️ Основы создания консольных приложений в языке программирования Golang, включая работу с флагами командной строки, обработку ввода-вывода и управление процессами.
➡️ Подключение к базам данных Postgres и MongoDB из своего приложения, выполнение запросов, обновлений и удаления данных, а также работа с транзакциями.
➡️ Разработка методики для анонимизации данных, чтобы защитить конфиденциальность информации при копировании данных между окружениями.
Как итог — у вас:
✔️ 8 видеоуроков — доступ к ним откроется сразу
✔️ Финальный проект – приложение для копирования и анонимизации данных, чтобы пополнить портфолио классным кейсом
✔️ И свидетельство о прохождении курса
➡️Узнать подробнее о курсе и забрать его по выгодной цене
#такое дня
12 сентября Cloudflare устроили себе эпичный автогол: https://blog.cloudflare.com/deep-dive-into-cloudflares-sept-12-dashboard-and-api-outage/
В новой версии дашборда React-хук внезапно превратился в пулемёт: вместо одного вызова useEffect он триггерился десятки раз подряд. Причина до обидного банальна — в зависимостях лежал объект, который пересоздавался на каждом рендере.
В итоге фронтенд начал долбить Tenant Service шквалом запросов, сервис не выдержал нагрузки и лёг. А вместе с ним посыпалась и авторизация всех API-запросов, так что по системе пошёл массовый вал 5xx.
И это ведь не какая-то загадочная бага в ядре Linux, а ошибка из разряда «прочитай первую статью про хуки». Её должны были отловить ещё на ревью.
Но видимо, ревью формальное, нагрузочных тестов не было вовсе, а сценарии перегруза и защиты от них решили «подразумеваются».
Рекомендую прочесть статью хотя бы ради того, чтобы узнать, что такое Thundering Herd :)
Особо смешно, что индустрия уже много лет живёт с готовыми решениями этих проблем. Есть react-query, SWR и куча других библиотек, которые умеют кешировать данные, контролировать повторные запросы, дебаунсить и ретраить без того, чтобы фронтенд превращался в DoS-атаку на свой же бэкенд. Но всё это дружно игнорируется, и в прод выкатываются костыли уровня «ну вроде работает».
В итоге — глобальная недоступность сервиса, вызванная элементарным skill issue. Ошибка, которую любой толковый джун заметил бы на месте, внезапно кладёт критичную часть инфраструктуры одной из крупнейших сетевых компаний в мире.
И нет, это не React виноват, дамы и господа, даже не начинайте.
Ирония в том, что чем больше индустрия пишет о «best practices» и «production-ready», тем чаще мы видим вот такие падения на ровном месте.
#react #useeffect #hook
#статья дня
В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".
И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).
Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы...
И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!
Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина...
И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html
Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html
Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов.
Всем st, котаны!
#opentype #font #features
🔥Финишная прямая: подай заявку на Хакатон Т1 в Нижнем Новгороде и поборись за призовой фонд 600 000 рублей!
📅 Когда: 19 – 22 сентября
🌐 Формат: онлайн + финал на площадке
Участвуй, если ты:
🔹студент тех/ИТ-направлений;
🔹развиваешься в dev, аналитике, дизайне, AI/DS/ML, DevOps;
🔹сможешь быть в Нижнем Новгороде 22-09.
Выбери свой кейс:
🔸PingTower — сервис круглосуточного отслеживания доступности сайтов и мгновенных уведомлений о сбоях, позволяющий бизнесу не терять клиентов.
🔸HR Консультант — ИИ-консультант для карьерных сценариев и поиска талантов по умным фильтрам.
Почему стоит участвовать:
🔻Кейс в портфолио и полезная обратная связь от менторов Т1;
🔻Шанс проявить себя, чтобы начать карьеру в одной из крупнейших ИТ-компаний;
🔻Реальный опыт командной работы.
Регистрация открыта!
➡️ Успей до 17 сентября по ссылке
Ты не из Нижнего Новгорода? Смотри расписание хакатонов в других городах.
#реклама
О рекламодателе
Осторожно! Сейчас вас захлестнёт приступ ностальгии!
Ребята из AvitoTech в честь наступающего Дня разработчика собрали истории о первых гаджетах и начале пути в IT своих сотрудников. Получился ну очень залипательный лонгрид с теми самыми играми, приставками, компьютерами и телефонами из нашего детства.
Кстати, поздравить коллег и поделиться своей историей и фото со своим первым гаджетом можно в канале AvitoTech под последним постом! Соберем большой поздравительный тред вместе!
Привет! Меня зовут Дастан, я фуллстак разработчик с 3.5 годами опыта работы и я делаю проект в соло.
Я делаю проект Hack Frontend - платформа для подготовки к собесам для фронтов.
Как это мне в голову пришло:
Осенью 2024 года, я помогал родной сестренке с поиском работы на позицию фронта. И вот тогда я столкнулся с небольшой проблемой:
При подготовке к собесам, нужно постоянно переходить из одного ресурса в другой, тратя на это кучу времени. По теории ты ищешь инфу а одном месте, по тех части(решение задач) в других. В СНГ пространстве не было единой платформы куда можно зайти и выйти уже оттуда полностью подготовленным к собесу.
Так вот, я понял что нужно как то решать эту проблему и принял решение разработать такую платформу.
На первое МВП по времени ушло примерно 20 дней. Использовал такой стек технологий:
Next, prisma, postgresql.
При разработке делал очень сильный упор на SEO оптимизацию.
После того как я разработал первое МВП, 26 января я задеплоил его и начал делиться им своим друзьям, знакомым, по разным чатикам в тг, в линкедин. Примерно за пару дней я набрал 100+ пользователей, и тут я понял, что нужно его развивать.
На текущий момент статистика такая:
- ежедневное посещение ~500-700 людей в день
- 1200+ зареганных пользователей
- 50-100 кликов в поисковиках
Ни разу не делал платной рекламы, только органический рост.
https://www.hackfrontend.com
#новость дня
Как вам такое: взломать npm, получить доступ к пулу пакетов, которые скачивают по два миллиарда раз в неделю и всё ради чего? Ради призрачного шанса попасть в UI какой-нибудь крипто или NFT-биржи и украсть эфирчик-другой.
Звучит как плохая серия сериала Скорпион? А нет, это вот буквально вчера случилось. Да-да, я опоздал с новостью.
Итак, некто с помощью фишингового письма с требованием обновить 2FA-токены умудрился обмануть ментейнера нескольких пакетов для работы с командной строкой (chalk, например, чтобы эту самую строку красить. Очень полезно.) Джоша Джунона.
В такие моменты я понимаю, что рабочие тренинги по фишингу не настолько уж и тупые.
В выпущенные атакующими обновления пакетов был подставлен вредоносный код, выполняемый на системах пользователей, работающих с сайтами или приложениями, использующими скомпрометированные версии пакетов. Вредоносная вставка для браузеров осуществляла перехват трафика и активности Web API, прикрепляя свои обработчики к функциям fetch и XMLHttpRequest, а также вмешивалась в работу типовых интерфейсов криптокошельков для скрытой подмены реквизитов получателя при переводе. Подмена осуществлялась на уровне модификации значений в запросах и ответах, незаметно для пользователя (в интерфейсе пользователя показывались корректные реквизиты). Поддерживались форматы транзакций Ethereum, Bitcoin, Solana, Tron, Litecoin и Bitcoin Cash.
В общем, технические подробности и список пакетов есть тут: https://www.aikido.dev/blog/npm-debug-and-chalk-packages-compromised
Очень рекомендую проверить установленные версии даже если вы не держите у себя на сайтах кошельки и биржи. А если держите — тем более.
И вообще, котаны, проверяйте, откуда письма и их смысл. Вы прочитайте письмо с иллюстрации — ну курам на смех.
Впрочем, такое письмо может кого угодно застать врасплох, да.
#npm #security
Выгорание, кризис, конец карьеры – оно вам надо?
Из рубрики «невыдуманные истории»: работал 24/7, терпел негатив дома, а потом остался без всего.
По статистике, 90% IT-специалистов сталкиваются с выгоранием. Живут, сжав зубы, пока не становится тошно вообще от всего.
📍 Чтобы не доводить себя до такого состояния или выбраться из него, если уже накрыло, подписывайтесь на канал Психолог взрослого человека.
Рабочие методы по выходу из кризисов, выгорания и вытекающих из этого проблем для тех, кто забывает про себя.
— Для опытных сотрудников, которые взвалили на себя непосильный груз задач
— Для сильных руководителей, которые забыли, что, вообще-то, тоже живые люди
Подписывайтесь на @vadimpetrovpsi и начните с закрепа.
Там вас ждет бесплатный мини-курс «Саморегуляция». Он поможет начать работать с апатией и сделать первый шаг по возвращению к жизни.
#заметка дня
Альфа-Банк проведёт 13 и 14 сентября свой первый турнир по спортивному хакингу.
Призовой фонд — 3,1 млн рублей. Участвовать можно соло или с командой до 4 человек. Студенты, продвинутые айтишники, CTF-профи — каждому свой трек.
Знаете, что меня больше всего цепляет в CTF? Это когда сидишь над таском часами, а потом — щелчок! — и всё встаёт на места. Как тот самый эмодзи другого цвета на картинке, который наконец-то нашёлся.
🤓🤓🤓🤓🤓🤓🤓🤓
🤓🤓🤓🤓🤓🤓🤓🤓
🤓🤓🤓🤓🤓🤓🤓🤓
🤓🤓🤓🤓🤓🤓🤓🤓
🤓🤓🤓🤓🤓🤓🤓🤓
🤓🤓🤓🤓🤓🤓🤓🤓
🤓🤓🤓🤓🤓🤓🤓🤓
Зарегистрироваться можно здесь.
#ctf #cybersecurity
#фишка дня
Вроде как, я постоянно пользуюсь девтулзами хрома. Дебаггер, сеть, редактирование кук и стораджей, просмотр данных производительности... а о такой простой и эффективной штуке не знал.
Итак, выделяете какой-то элемент на вкладке Elements, потом идёте в консоль — и этот элемент становится доступен под алиасом $0!
Более того, в $0-$4 по порядку хранится история этих выделений! А в $_ — последнее вычисленное в консоли выражение.
Есть ещё $(selector) — это шортхенд для querySelector, косящий под jQuery.
А есть $$ — это querySelectorAll...
В общем, вот документация: https://developer.chrome.com/docs/devtools/console/utilities
Из очень удобных штук — шортхенд keys() для получения ключей объекта. И monitorEvents() — чтобы узнать обо всех слушателях переданного события без ковыряния в UI.
Да, документации и фишкам сто лет в обед, но я как-то туда не особо заглядывал. А стоило бы!
И да, для чистоты эксперимента: в Firefox тоже есть подобное, но сильно поменьше: https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html$0 там есть, а $1 уже нет. keys() есть, а monitor() — нет. В общем, сойдёт.
#chrome #devtools
#заметка дня
На связи glebcha, который иногда с большим удовольствием предлагает идеи новых статей автору канала (старому другу) и, с недавнего времени, пишет сам в канал.
Недавно появилась интересная задача - отображать список вкладок редактора вне области скролла как в любом редакторе кода, например в IDEA.
Сразу же составил список технологий себе в помощь и в их списке оказалось событие scrollend для более эффективного формирования списка вкладок вне области прокрутки.
И вроде бы все отлично, но как обычно "есть один нюанс"....и это Safari. Ссылка на активный баг.
Но не стоит расстраиваться, решение нашлось в виде полифилла (не идеального, но отличного).
Проверяйте доступности браузерного api перед использованием и помните - "нет нереализуемых задач, всё лишь вопрос мотивации и времени".
P.S.
Напишите если вам интересны более хардкорные заметки по разработке редактора SQL-запросов в нашей команде CedrusData.
#safari #scroll #scrollend
#заметка дня
Эпопея с пультом на Flutter продолжается! И в этот раз мне захотелось реализовать трансляцию фото (ну и видео) на телевизор.
Да, в 2025 году есть Chromecast, MirrorLink и AirPlay. Но хоть MirrorLink моим телевизором 2018 года выпуска и поддерживается, основной мой телефон — iPhone, а в AirPlay телевизор не умеет.
Да и задачи у этих троих чуть-чуть иные, нежели просто галерею фотографий посмотреть. Трансляция экрана это совсем не то же самое, что показать картинку или видео.
Потому на помощь нам приходит технология двадцатилетней давности, которая до сих пор поддерживается везде — DLNA!
В 2003 году тогдашние гиганты индустрии объединились и создали Digital Living Network Alliance, описав соответствующие стандарты и протоколы. В духе индустрии, использовались основанные на XML протоколы обмена данными и уже расмотренный когда-то мной SSDP.
Как это всё работает?
Когда мы сканируем сеть по SSDP, устройства сообщают в ответ поддерживаемые протоколы, схемы работы порты. И одна из таких схем работы — /MediaRenderer/AVTransport/Control.
Ну и мы отправляем телевизору запрос:
POST /MediaRenderer/AVTransport/Control HTTP/1.1
HOST: 192.168.1.42:1400
CONTENT-TYPE: text/xml; charset="utf-8"
SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#SetAVTransportURI"
<?xml version="1.0"?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
<s:Body>
<u:SetAVTransportURI xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
<InstanceID>0</InstanceID>
<CurrentURI>http://192.168.1.10:8000/picture.jpg</CurrentURI>
<CurrentURIMetaData></CurrentURIMetaData>
</u:SetAVTransportURI>
</s:Body>
</s:Envelope>
POST /MediaRenderer/AVTransport/Control HTTP/1.1
HOST: 192.168.1.42:1400
CONTENT-TYPE: text/xml; charset="utf-8"
SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#Play"
<?xml version="1.0"?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
<s:Body>
<u:Play xmlns:u="urn:schemas-upnp-org:service:AVTransport:1">
<InstanceID>0</InstanceID>
<Speed>1</Speed>
</u:Play>
</s:Body>
</s:Envelope>
С полей сообщают, что добавление .diff к адресу пулл-реквеста делает то же самое, но в формате .diff, который чуть менее многословный, чем .patch!
А чем меньше символов — тем дешевле и быстрее обработка.
Вот бы всё можно было представить в таком виде...
P. S. На BitBucket тоже работает!
Каждый, кто пытался когда-то войти в опенсорс, знает эту классическую сцену: открываешь GitHub, находишь проект мечты — и тут на тебя обрушивается стена из сотен issues, половина из которых требует понимания всей кодовой базы, а другая половина закрыта три года назад. Первая задача должна быть маленькой и понятной, но поиск такой задачи часто превращается в отдельное приключение.
Чтобы этот этап перестал быть лотереей, Yandex Open Source запустил страницу Good First Issue. Там в реальном времени собираются «входные» задачи из разных GitHub-проектов Яндекса. Не нужно тратить часы на ручной поиск — свежие issues подтягиваются автоматически, а дальше дело за вами. В планах — фильтры по проектам, языкам и технологиям.
Такой формат упрощает старт и позволяет быстрее перейти от чтения документации к реальной практике. Для фронтенд-разработчиков хорошим примером может быть дизайн-система Gravity — понятная точка входа, где можно сразу попробовать свои силы. Но список не ограничивается UI: в последние годы компания выкладывает в открытый доступ и крупные датасеты (например, Yambda), и инструменты вроде профилировщика Perforator.
Все проекты лежат на GitHub, а значит, остаются привычные пулреквесты, обсуждения и, конечно же, те самые GitHub-страйки, которые никуда не денутся. А новая страница просто экономит время и делает первый шаг заметно проще.
#инструмент дня
А вот бы запустить ffmpeg в браузере, да так, чтобы прямо на клиенте...
Если кто не знает, ffmpeg — это буквально столп современного стриминга и конвертации видео. На нём работает буквально всё, от Twitch до ваших любимых ботов «скачать видео с тиктока». И почти все плееры тоже. Даже VLC (с чем связан недавний скандал).
Ну, кстати, это вполне реально: есть порт ffmpeg для Webassembly. Со своими нюансами и весьма сложным API, но есть же.
Но на свете существует не один лишь только ffmpeg! Вот, например, Mediabunny: совсем свежий открытый проект, который реализует работу с видео и звуком прямо в браузере. Обладает весьма простыми API, поддерживает прозрачную работу с разными источниками данных, как сеть, так и локальные файлы. Посмотрите только на примеры: https://mediabunny.dev/examples
Извлечь метаданные, сгенерировать раскадровку, пережать видеофайл, запустить стрим — всё возможно. А главное, написано всё на TypeScript, легко тришейкается и читается. Конечно, она частично стоит на плечах гигантов — WebCodecs API — но, как и всегда, объём проведённой работы над стандартным API огромен. Хороший DX из ниоткуда не возьмётся.
Если вы хотели войти в мир кодирования видео — вот он ваш шанс, делайте свои редакторы! Посмотрим, кто бросит вызов капкату :)
#video #codec #ffmpeg #encode #decode
#статья дня
Клоунов к предыдущему посту больше, чем людей, кто реально зашёл обсудить проблему. Плохо, дамы и господа, очень плохо. Где жир?
Я тут вам неожиданно вкусного принёс! Последнее время Хабр представляет из себы нытьё великовозрастных программистов, рандомные переводы и сомнительного качества бизнес-кейсы в корпоративных блогах. Но тут, наконец, всё, как я люблю!
И реальный кейс, и геометрия, и чёткое проблемополагание, и погружение в документацию. А всё для чего — для отрисовки красивых стрелочек по кривым Безье! И их удобном последующем редактировании.
Вот оно: https://habr.com/ru/companies/ispring/articles/946176/
Кто не знает, что такое кривые Безье — в статье объясняется, а ещё я давно приносил тренажёр и — опять же — статью: /channel/htmlshit/3196
Статья стоит даже сохранения в виде PDF, чтобы перечитать спокойно при случае и попробовать реализовать самому. И, как обычно, оскорбительно мало комментариев :(
В общем, очень рекомендую. Без скидок, офигенно.
#svg #bezier
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
#день дня
Ааа, чуть не забыл! С Днём программиста, котаны!
256 день в году сегодня такой, да.
Удачных вам 'undefined' is not an object!
#инструмент дня
Милота, за которой стоит самый настоящий матан! Интереснейшие мозаики (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw
Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!
https://css-doodle.com/
Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.
На его основе создан https://tabbied.com/
Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅
Вообще, весьма круто. Пару вечеров убить точно стоит.
#css #pattern #бородач
#статья дня
— Мне не нужна физика, я буду фронтендером!
— First time?
Каждый, каждый раз когда какая-нибудь крупная корпорация выпускает своё очередное видение мира, мы все вокруг резко вспоминаем: «А ведь у нас это всё уже было! Просто очень плохо поддерживалось и никто не понимал, как с этим работать...»
Так и сейчас. Apple уже три месяца дорабатывает свой Liquid Glass дизайн (теперь он не настолько уж liquid и даже не настолько уж и glass, но кого это волнует, правда?). React Native-разработчики смеются над Flutter разработчиками и хоронят платформу, те в свою очередь выпускают пакеты поддержки нативных виджетов.
А веб-разработчики резко вспомнили, что помимо WebGL у нас в браузерах ещё со времён IE6 имеются фильтры, позволяющие достичь как минимум похожих эффектов. Но вот беда, это всё столько раз объявлялось deprecated, что людей, который понимают принципы их работы — довольно мало.
К счастью, некоторые из этих людей не ленятся писать интерактивные обучающие статьи! Как, например, вот эту: https://kube.io/blog/liquid-glass-css-svg/
Объяснение принципов работы displacement map фильтров в SVG, реализация некоторых виджетов из Liquid Glass — всё на месте. Ну и без физики не обошлось, конечно же.
Лютая рекомендация.
#css #svg #filter
Проект от подписчика!
Напоминаю, что я без проблем выкачу любую статью и любой проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Создали свой канал и хотите поделиться интересной статьёй — добро пожаловать!
#игра дня
Ну что, JavaScript никто из вас не знает, мы это выяснили не так давно. А что насчёт валидации адресов электропочты?
Вашему вниманию очередной квиз: https://e-mail.wtf/
Вооружайтесь RFC 3522 и вперёд!
Inb4: проверка на собачку и валидация письмом — единственный рабочий способ.
У меня — 13 / 21 🫠
#email #quiz
#codepen дня
Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?
Сегодня ваш шанс вспомнить то самое чувство!
Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)
Тут: https://codepen.io/donotfold/pen/ZYYYJRV
Работает в Chrome и Safari TP.
Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.
#css #scroll #animation #бородач
#инструмент дня
Чем вы тестируете проекты и продукты? Наверняка, большинство из вас пишут или собираются писать веб-приложения и E2E-тестирование построено на Playwright.
Если вы в компании постарее, там может быть Cypress, Selenium, WebDriverIO... Да их десятки.
Если вы как и я в Финляндии, возможно, ещё и Robot Framework.
Я, честно скажу, умею работать только с Playwright и немного с Robot Framework (ну вот были у нас воршкопы, что делать). Что как бы очевидно для веб-разработчика, JS он и в Африке JS.
Но понадобилось мне тут прикинуть, а что делать, когда вы пишете проект на React Native или Flutter под 2-3 платформы, включая веб, или вообще — пишете нативно под мобилы? Чем тестировать-то?
Даже мой пульт уже чуток больше, чем пара кнопок.
И тут я открыл для себя Maestro. Сравнительно новый (с 2022) года тулкит. Поддерживает все основные платформы: Android, iOS, Web Views и браузеры, React Native, Flutter.
Как видно на видео, все действия описываются в YAML! Очень лаконично и понятно, ты не тонешь в бесконечных await, не зарываешься в fixtures. Тестовая среда понимает, что всё, что происходит на экране, подвержено флейку, что способы взаимодействия пользователя с приложением различаются от устройства к устройству, что у платформ есть свои нюансы работы.
И всё это в опенсорс и прекрасно запускается локально!
А в дополнение к этому они ещё и свою IDE для тестировщиков пишут. Инфраструктура разрастается и это прекрасно.
Кажется, для кроссплатформенного E2E тестирования на данный момент ничего более интересного нет.
#testing #maestro #ios #android
Синдром самозванца, разрастающийся state и эволюция фронтенда в продукте
20 сентября Яндекс Вертикали собирают фронтендеров на ежегодном митапе Vertis JS, чтобы обсудить главные страхи и современные инструменты разработчиков.
Помимо докладов, в программе активности-ритуалы:
▫️Beer manifestation — для тех, кто готов поделиться своей историей
▫️Whispercoding, где каждый участник добавляет свою строчку к письму, пока зрители нашёптывают новые условия
Всё это — вместе с ребятами из Вертикальных сервисов: Авто.ру, Яндекс Путешествий и Яндекс Аренды.
📍 Санкт-Петербурге, БЦ Феррум
📌 Полная программа и регистрация
#такое дня
Когда вам в очередной раз станет стыдно, что вы сделали какой-то костыль, вспомните, что бегущую строку в CSS ещё совсем недавно нельзя было сделать без дублирования элементов: /channel/htmlshit/3721
А если и это не помогает, вспомните, что где-то там есть компания Apple, которая не осилила сделать «бесконечный» (или хотя бы автовозвратный) список часов и минут в будильнике, поэтому продублировала 0-23 на часах (0-12 в AM/PM) и 0-59 на минутах много-много раз. Очень. Много. Раз.
Кого-то, впрочем, это только больше расстроит. Ведь и платят им больше.
#apple #ios #бред
12 сентября в Москве пройдёт big tech night. Это как ночь музеев, только в мире IT. Формат придумали в Яндексе, а Сбер, X5, Т-Банк и Lamoda присоединились к проекту.
На одну ночь офисы компаний превратятся в фестивальные площадки, где будут доклады про технологии, иммерсивные экскурсии, квесты и IT-стендапы. Пять офисов — пять площадок с разными программами.
В программе три трека — хард-трек про всё, что связано с технологиями; софт-трек про управление командой и развитие гибких навыков. И фест-трек, где можно открыть что-то новое — сходить на алгоритмическую вечеринку, сразиться на киберспортивном турнире, поучаствовать в экскурсиях и не только.
Доклады, которые зашли мне больше всего:
«GPT-функции в Алисе: backstage»
Павел Капля, руководитель продуктовой разработки Алисы, расскажет, как в AI-ассистента внедряют агентную модель на базе function calling. Будет много инженерных нюансов про адаптацию технологии в реальных условиях и обеспечение предсказуемости поведения и надежности системы.
«Теория систем и инженерная практика»
Филипп Дельгядо, архитектор департамента из lekton.io, объяснит базовые понятия теории систем и покажет, как они помогают при проектировании современных решений. Еще будет разбор некоторых паттернов проектирования через призму системного подхода.
Я буду подключаться к онлайн-студии. Для неё планируется особая программа: интервью с Николаем Савушкиным о рекомендательных системах, разговор с Маратом Мавлютовым про автономных роботов-доставщиков, дискуссии и интерактивные форматы в духе Late Night Show.
👉 Регистрация уже открыта.
#статья дня
А нет такого, что новые технологии фронтенда нет смысла изучать, пока их не разжуют Шадид, Комо или Вес Бос? :)
Не, ну серьёзно. Вот читаешь ты блоги разработчиков Хрома или, простите, Вебкита. Что получаешь?
Получаешь нечто слишком рано, слишком мало, слишком сухо и сложно. Ну, буквально, посмотрите на статью про якорное позиционирование в блоге WebKit aka Safari: https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning/
A gentle introduction... куда уж более gentle: ни одного интерактивного примера, код минимален.
И тут давайте Шадида возьмём, буквально утром сегодня выпустил: https://ishadeed.com/article/anchor-positioning/
Уже начиная с шапки становится понятно о чём речь!
Каждый пример как всегда снабжён интерактивом, а если браузер не поддерживает пока якоря — всегда есть переключатель на видео.
Как всегда, глубокое почтение Шадиду за работу и рекомендация к прочтению! Якоря — уже не за горами, как минимум, можно заполифиллить.
#css #anchor