14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.
Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.
И сегодня мне принесло очередной! FlexBox Labs: https://flexboxlabs.netlify.app/
Из названия понятно, что речь о флексбоксе, не о гридах. Но — повторю — одно другого не отменяет ни разу. Флекс и грид решают разные задачи, потому — стоит внимания.
Особенно учитывая, что на рынке не так много конструкторов под флекс, гриды казались более крутой технологией и натурально получили больше конструкторов.
Да и короткое объяснение, что и когда применять, на канале уже было: /channel/htmlshit/607
А что ещё круто, проект — открытый, можно держать у себя локально: https://github.com/prazzon/flexbox-labs
Генерирует как CSS, так и классы Tailwind.
Впрочем, гриды конструктор тоже может, в экспериментальном режиме: https://flexboxlabs.netlify.app/grid
#css #flex #layout #бородач
#фишка дня
Вот как вы думаете, что может преследовать разработчика веб-браузера во сне? Может, это разбор дерева DOM? А может, реализация всех новых атрибутов элементов?
Нет! Это поддержка легаси! Например, как вам такое сообщение в PR браузера Ladybird:
Atlassian login gets the base URL for its module scripts by throwing an error and pulling out the current script's URL from error.stack with regex.
function getBundleURL() {
// Attempt to find the URL of the current script and use that as the base URL
try {
throw new Error();
} catch (err) {
var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
if (matches) {
return getBaseURL(matches[0]);
}
}
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 и начните с закрепа.
Там вас ждет бесплатный мини-курс «Саморегуляция». Он поможет начать работать с апатией и сделать первый шаг по возвращению к жизни.
Приглашаем на конференцию по защите и монетизации софта GuardConf 2025
📆 2 октября, Москва, LOFT #2
Встречаемся с ведущими экспертами отрасли, чтобы обсудить практики, которые реально помогают создавать и развивать российское ПО.
Что в программе:
🔵Разбор аналитики рынка ИТ и мер государственной поддержки отрасли
🔵Обсуждение технологий, которые реально помогают в разработке продукта, а также ландшафта ИТ-экосистем на российском рынке
🔵Кейсы по защите софта и борьбе с пиратством
🔵Лучшие практики по разработке безопасного ПО без уязвимостей
🔵Рекомендации по выбору бизнес-модели для грамотного лицензирования
🔵Стратегии вывода продукта на новый уровень
💡 Вас ждут демонстрации решений в интерактивной зоне и живой нетворкинг с теми, кто создаёт и развивает российское ПО.
На конференции соберутся CTO, директора по продукту, разработчики, тимлиды, специалисты по ИБ и AppSec, а также эксперты из разных ИТ- и B2B-компаний.
⏩ Программа и регистрация на сайте
Заявки проходят модерацию
Сообщество конференции GuardConf
#фишка дня
Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.
Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.
А вот фиг!
Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.
Что же делать?
Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}
Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.
Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
По поводу поддержки браузерами: Chrome со 115 и Firefox с 63. И — ура — Safari с 17.6. В прошлый раз когда я эту статью упоминал — поддержка в Safari была только в TP.
А еще там Safari 26 вышла с поддержкой анимаций по скроллу, будем скоро вспоминать. Слава богу, macOS 26 для этого ставить не нужно.
#flex #css #scroll #бородач
#новость дня
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 #бородач