14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
RYBE — одежда с твоим языком программирования.
Где два айтишника могут познакомиться?
В офисе и на конференции. Нам этого мало. Мы захотели объединить людей, у которых одни интересы. Дать возможность узнать друг друга. В метро, на прогулке, в офисе, на конференции, в походе, в баре, в самолёте.
В каком-то смысле это мерч для твоего языка программирования.
А что еще?
- отшиваемся в Москве;
- плотный премиум-хлопок;
- фичи типо люверсов для крепления пропуска, кармана для наушников и салфетки для очков
Выбирай свой язык, заказывай, дари, носи сам: http://rybe.store/
Наш tg: @rybe_store
#зомби дня
Sanity написали про текущее состояние styled-components.
Библиотека официально с марта, если помните, в maintenance-режиме: новых фич ждать не стоит, и главная проблема — производительность. В React 18 она не использует useInsertionEffect, из-за чего вставка стилей тормозит рендер. И это ощутимо.
В Sanity сделали форк и оптимизировали вставку стилей, убрали лишние костыли и адаптировали всё под React 19. У Linear, после замены пакета на этот форк, рендер ускорился до 40% без переписывания компонентов.
Для React 18 они предлагают @sanity/styled-components, для React 19 — @sanity/css-in-js.
При этом авторы подчёркивают, что форк — временное решение. В ближайшей перспективе они советуют перестать писать новые компоненты на styled-components и выбрать альтернативу вроде vanilla-extract, Tailwind или Panda CSS, постепенно перенося стили.
Учитывая, что у нас в компании ещё огромное количество зависимостей от Styled Components (ведь все в целом ждали несколько иного развития событий), переход на форк, чтобы сгладить ситуацию во время апгрейда на React 18 и 19, кажется разумным. Тем более, что текущее состояние старых компонентов давно заморожено.
#css #react #sc
Когда-то у меня был коллега, который подсчёт калорий довёл до фанатизма. Он взвешивал на кухонных весах абсолютно всё — даже порционные хлеб и сыр для бутерброда. Каждый приём пищи в итоге превращался в мучение с калькулятором. Спойлер: долго так не протянул, сорвался и махнул рукой.
Правда в том, что контроль питания не должен быть пыткой. Эту проблему как раз и решает моя недавняя находка EasyFit AI — телеграм-бот, которому достаточно просто отправить фото еды или голосовое сообщение. Он мгновенно считает калории и БЖУ. Причём не «примерно», а с деталями: отличит бургер с одной котлетой от бургера с двумя, учтёт соусы, масло для жарки и даже газировку рядом.
✨ Почему это удобнее FatSecret или Yazio:
— Не нужно вручную вбивать каждое блюдо или ингредиент — достаточно сфотографировать тарелку.
— Работает и с домашней едой, и с ресторанной.
— ИИ-нутрициолог ежедневно даёт персональные рекомендации.
— Есть шаблоны блюд, учёт воды, напоминания о приёмах пищи.
— Можно получать советы по тому, что добавить в рацион, чтобы уложиться в норму.
В итоге — никаких весов и таблиц. Достаточно 30 секунд, чтобы понять, как обед вписывается в дневную норму.
🔥 Сейчас действует акция: пробный доступ за 1₽ на 2 дня, а потом — скидка 50% на годовой тариф. Предложение ограничено по времени, так что лучше успеть забрать цену.
Попробовать бот
#статья дня
Мне очень нравится пытаться учить разработку под 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
#новость дня
TikTok Sans — теперь не только фирменный шрифт соцсети, но и полноценный опенсорс.
Его изначально делали в Grilli Type: нужен был вариативный гротеск с хорошей читабельностью и поддержкой 460 языков. Потом в работу подключились Contrast Foundry и Type Network. В итоге получился масштабный проект: шрифт оптимизировали под интерфейсы, а также под особенности рендеринга на разных платформах и языках.
Да, кириллица поддерживается!
В TikTok захотели, чтобы фирменный шрифт стал ресурсом для сообщества. Вместо того чтобы держать его закрытым, они оформили публичную OFL-лицензию и передали в Google Fonts и GitHub.
По сути, это редкий случай, когда корпоративный брендовый шрифт превращается в открытый инструмент для дизайнеров и разработчиков.
Google Fonts
GitHub
Для нас это значит, что можно использовать шрифт прямо в проектах без лицензионных заморочек.
#font #tiktok
#инструмент дня
Да-да, я в курсе, что писать SQL-запросы, возможно, не самая частая компетенция у фронтендеров, но мы же все хотим узнавать новое, не правда ли?
А запросы ведь могут стать достаточно сложными. Конечно, есть EXPLAIN, но его вывод по сложности может сравниться с самим запросом. Если не сложнее.
К счастью, есть визуальные инструменты! И одним из таких является MySQL Visual Explain.
Уникальное название, согласен.
Ссылка: https://mysqlexplain.com/
Рекомендую посмотреть примеры и попробовать самим, если MySQL является частью вашего стека.
Кстати, у них даже API есть, одним из примеров использования является плагин для Laravel: https://github.com/tpetry/laravel-mysql-explain
То есть, вариант использования может быть таким:
1. Прогнали интеграционные тесты
2. Нашли медленные запросы с помощью telescope
3. Отправили их на визуальный анализ
4. ...
5. Пофиксили!
Да и для обучения — бесценно.
#mysql #explain #laravel #бородач
#молния дня
По данным Aikido, в экосистеме npm снова обнаружена очередная атака на цепочку поставок.
Речь идёт о новом черве, который действует автоматически и был создан той же группой, что стояла за инцидентом в августе. Кажется, они прочитали комментарии к предыдущему посту: /channel/htmlshit/3761
Схема атаки выглядела так: в репозиторий загружались вредоносные версии пакетов. При установке они собирали информацию из окружения и CI — переменные process.env, ключи облачных сервисов и другие секреты.
Эти данные выгружались в GitHub в репозитории с названием «Shai-Hulud». Параллельно добавлялись workflow в GitHub Actions, которые отправляли содержимое на внешний сервер (через webhook) и дублировали его в логи.
Если у жертвы находились npm-токены, вредоносный код автоматически модифицировал другие пакеты этого же мейнтейнера: версия повышалась, в package.json добавлялся вызов скрипта, а вместе с пакетом публиковался payload. В результате заражение распространялось дальше без участия человека. Кроме того, в некоторых случаях приватные репозитории переводились в публичный режим, что увеличивало масштаб утечек.
Проверьте свои машины на наличие червя:
find . -type f -name "*.js" -exec sha256sum {} \; | grep "46faab8ab153fae6e80e7cca38eab363075bb524edd79e42269217a083628f09"
@ctrl/tinycolor.
Каждый, кто пытался когда-то войти в опенсорс, знает эту классическую сцену: открываешь 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, где каждый участник добавляет свою строчку к письму, пока зрители нашёптывают новые условия
Всё это — вместе с ребятами из Вертикальных сервисов: Авто.ру, Яндекс Путешествий и Яндекс Аренды.
📍 Санкт-Петербурге, БЦ Феррум
📌 Полная программа и регистрация