14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Я просто зае**лся, честно скажу. Само написание кода — самое простое, что мы делаем. Всё остальное — это, бл**ь, полный трэш. Эти бесконечные билды, созвоны, тикеты. Постоянно собирать и разбирать этот еб**ый фронт каждую, бл**ь, неделю. Я просто уже, бл**ь, не могу. Я зае**лся. Мой организм уже меня шлёт нах**: у меня третий раз за полтора месяца деплой падает, бл**ь, и состояние непонятно какое. В плане тестов хуже фронтенда работы в мире нет. Просто, бл**ь, полная х**ня.
#codepen дня
Мы когда-то давно смотрели на интересный пример использования clip-path и маскинга в CSS для создания кружочка статуса пользователя в сети: /channel/htmlshit/2741
И вот Саймон Гелнер довёл этот пример до идеала! Размер, положение — всё настраивается через CSS-переменные и выглядит шикарно. Вот, можно поиграться: https://codepen.io/simeydotme/pen/ogNWvMN
Кстати, что даже более интересно, там используется прикольный API аватарок! https://www.dicebear.com/
Максимально неожиданная штука, конечно, с весьма интересными решениями по настройке внешнего вида аватарки и даже с предопределёнными генераторами (seed) на тысячи и миллионы вариантов.
Потрясающая находка, я считаю.
#css #svg #api #avatar
Что насчёт поучиться у лучших? 😉😉
Мы решили, что это отличная идея, поэтому запускаем розыгрыш. Приз — встреча с лидерами IT&Digital экспертиз Альфа-Банка!
Что вам нужно будет сделать:
🔢 Нажать на кнопку под постом
🔢 Выбрать свою экспертизу
🔢 Написать короткое мотивационное сообщение, почему именно вам нужна менторская сессия
Будет 7 победителей — по одному на каждую из доступных экспертиз:
— Кибербезопасность
— AI-продакты
— Фронтенд-разработка
— QA
— Системный анализ
— Prompt-инжиниринг
— HR tech
#статья дня
Я уже откровенно боюсь иной раз выкладывать статьи с какой-то теорией или генераторами, потому что обязательно в комментариях будет «есть же ИИ». Таким темпом проще рассказывать о продакт-инициативах (я вот про Story Map недавно узнал, надо?). Но вдруг продактов тоже заменит ИИ? Я бы с удовольствием.
Ладно, к чему это я. Конечно же к очередной статье про Big O aka сложность алгоритмов!
Да, сеньоров вряд ли спросят, разве что бровью поведут, а вот собесы на джунов и мидлов всё ещё очень часто в себе содержат требования или оценить сложность алгоритма, или написать «без квадратов».
Итак, что же тут у нас? А тут у нас и сама статья:
https://samwho.dev/big-o/
И её перевод: https://habr.com/ru/companies/timeweb/articles/942956/
Но честное слово, лучше идите смотреть статью. Там наш с вами любимый интерактив!
#bigo #algorithm #cs
#ссылка дня
Вы ждали этого. Вы хотели этого. Вы жаждали этого!
Вы рисовали мемы, вы унижали бакендеров, вы унижались сами. Но теперь все проблемы решены!
Итак, 100 способов отцентировать div: https://css-generators.com/center/
Красненькое не надо использовать.
#css #div #center
Must-watch с недавней big tech night: доклад Дмитрия Иванова (руководитель SourceCraft в Yandex B2B Tech) о трансформации профессии разработчика под влиянием ИИ. Посмотреть доклад можно здесь.
Эти изменения хорошо прослеживаются во времени. Сначала AI появился в виде чат-ботов, которые помогали писать код и находить ошибки. Затем — встраивание ассистентов прямо в IDE, что уже стало стандартом. Следующий шаг — агенты, способные самостоятельно кодировать, запускать тесты и автоматизировать часть рабочих процессов. А дальше речь идёт о мультиагентных системах и «бесшовном AI», который будет встроен во все стадии цикла разработки и станет незаметным, но постоянным участником процесса.
Отдельный акцент был сделан на том, куда уходит время разработчиков. По данным исследования, почти половина рабочего дня уходит на работу с кодом. Около 20% занимают встречи и рутинные процессы, ещё столько же — поиск информации. Ревью кода и поддержка распределяются между остальным временем. Эта картина показывает, что прирост продуктивности возможен не за счёт абстрактных «ускорений», а через конкретные улучшения: ускорить работу с кодом хотя бы на треть и сократить время на поиск информации минимум вдвое — и эффект будет ощутим. Именно эти направления в Яндексе сейчас называют приоритетными.
Часть решений уже работает. Около трети разработчиков внутри компании пользуются генерацией кода, примерно четверть ревью проводится при поддержке моделей. В тестировании применяются генераторы чеклистов и автотестов, а в области поддержки и эксплуатации AI помогает анализировать логи, инциденты и даже core dump’ы.
Ключевая мысль доклада прозвучала так: искусственный интеллект в разработке стоит рассматривать не как замену специалиста, а как напарника. Важнее не сопоставление «человек против машины», а результат связки «человек плюс AI».
Именно через такую призму становится видно, что будущее профессии формируется постепенно, не за счёт резких революций, а благодаря снятию рутины и возвращению разработчикам времени на то, что действительно требует их внимания.
#статья дня
Белиберда на экране — вовсе не белиберда. Именно таким образом Slack тестирует свою систему интернационализации. Переводов.
i18n, если ещё короче.
Если говорить строго, правильная локализация — это жопа.
1. Какие-то языки по своей природе длиннее, какие-то короче. Какие-то вообще иероглифы.
2. Нужно не только перевести слова, но и учесть формат дат.
3. Убедиться, что какой-то кастомный символ не крашит приложение (да, такое бывает).
4. И всё это надо как-то поддерживать и обновлять.
Так что статья из блога инженеров Slack — самое то: https://slack.engineering/localizing-slack/
TL;DR они используют синтаксис ICU MessageFormat для хранения кроссплатформенных переводов, а белиберда на экране нужна для тестирования, чтобы быстро находить непереведённые строки. Они будут выглядеть нормально.
#slack #i18n #бородач
#инструмент дня
Писать тесты утомительно. Писать тесты компонентов — утомительно вдвойне. Писать тесты по доступности — втройне.
А проверять тесты и дописывать их — вчетверо.
Почему не вчетверне, кто знает?
На самом деле я, конечно, утрирую. Писать тесты, основываясь на доступных ролях элементов и их значениях — это весьма полезная практика для всех. Вот, обсуждали: /channel/htmlshit/3717
Но что делать, если надо посмотреть, а что происходит-то? Иногда изолированно запустить компонент довольно сложно, добираться до компонента внутри приложения — тоже.
Один из правильных ответов на самом деле — использовать Storybook, но об этом я в следующий раз. И одно другого всё равно не отменяет.
А сегодня у нас прекрасная тулза: Jest Preview.
Нетрудно догадаться, что она делает: визуализирует ваши тесты! Смотрим видео на иллюстрации.
Теперь не нужно постоянно сверяться с кодом и прокручивать дерево DOM в голове. Пара строчек — и вот вы уже в браузере наблюдаете, что происходит на самом деле.
Прекрасно? Не то слово!
#test #jest #preview #storybook
#ии дня
Когда тебе говорят «ИИ встроен во весь цикл разработки», обычно хочется дважды переспросить. Но тут реально интересно.
В SourceCraft Code Assistant появился ИИ-агент — его фишка в том, что он работает с полным контекстом твоего проекта прямо в веб-интерфейсе. Теперь агент может:
— поднять репозиторий,
— сгенерить автотесты,
— проверить, не оставил ли ты ключ API в коде (а ты оставил),
— и даже запустить деплой в Yandex Cloud, потому что платформа с ним теперь намертво интегрирована.
Причём всё это — по одному запросу. Пишешь: «хочу сервис для заметок» — и агент протаскивает идею от кода до выката.
У SourceCraft Code Assistant есть и базовый режим: теперь он умеет не только подсказывать, что писать, но и отслеживает связи в коде. Поменял функцию в одном месте — он автоматически покажет повторяющиеся места и предложит правки.
Плюс, появился крутой паблик API для автоматизации задач и CI/CD.
В общем, достойно.
#sourcecraft #ai #devtools
#заметка дня
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно, псевдокод jQuery
let r = null;
$button.on("mousedown", function(e) {
e.preventDefault();
e.stopPropagation();
r = window.setTimeout(function() {
$button.html('Clicked');
}, 3000);
});
$button.on("mouseup", function() {
$button.html('Hold me');
window.clearTimeout(r);
});
function forward() {
tween.stop().to({
value: 2000
}, 3000).startFromCurrentValues();
}
function reverse() {
tween.stop().to({
value: 1000
}, 3000).startFromCurrentValues();
}
#статья дня
Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему.
Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (/channel/htmlshit/806), только теперь в анимации.
Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация!
Есть два способа это обойти:
1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую.
2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.
В итоге получается ровная и предсказуемая смена цвета без серых провалов.
Статья: https://www.joshwcomeau.com/animation/color-shifting/
#css #color #animation
#инструмент дня
Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.
Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.
И сегодня мне принесло очередной! 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
#инструмент дня
Как узнать, верный ли JSON тебе передали, или нет?
Ну, общепринято как-то так:
function tryParseJSONObject (jsonString){
try {
const o = JSON.parse(jsonString);
if (o && typeof o === "object") {
return o;
}
}
catch (e) { }
return false;
};
1234 и false к ошибке не приведут. Да и передача null просто вернёт null, который ещё и объект... ну вы поняли.
#заметка дня
Извините, на это утро у меня для вас только два наблюдения.
1. У FFmpeg есть логотип (что? да!)
2. И этот логотип не что иное как визуализация обхода изображения в алгоритме дикретного косинусного преобразования (DCT) формата JPEG.
Я ещё вернусь.
#статья дня
Motion почти 5 лет держали монорепозиторий на TypeScript (~2.5 млн строк). Но со временем разработка стала всё медленнее.
CI прогонял проверки больше 20 минут. Компилятор часто падал.
Это все решилось бы ts-go, но они устали ждать.
Приходилось поддерживать Zod, иначе проверка данных разваливалась. Prisma и Drizzle создавали трудности при рефакторинге. Совместный код между вебом и мобилой ломался при малейших изменениях.
В итоге команда решила перейти на .NET и C#.
Ссылка на статью: https://engineering.usemotion.com/moving-off-of-typescript-e7bb1f3ad091?gi=1f6548fc7f1a
Аргументы:
— Entity Framework упрощает работу с данными.
— Синтаксис и структура знакомы после TypeScript.
— Экосистема стабильная, инструменты зрелые.
Теперь их бэкенд пишется на C#, фронт остался на React. По их словам, так быстрее и предсказуемее, чем поддерживать TypeScript на большом масштабе.
Еще интересный момент: для своей системы ИИ-агентов языком исполнения они решили оставить JavaScript, но выполнять чужой Джаваскрипт на джаваскриптовом же бакенде выглядело небезопасно. Возможно, это стало решающим аргументом?
Мнения, котаны?
#typescript #zod #dotnet
#фишка дня от Jhey
Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
#дайджест недели
1️⃣ Понедельник
Flexbox можно выровнять «по-безопасному» с помощью align-items: safe center;. В узком контейнере элементы не обрезаются и доступны при скролле. Поддержка: Chrome 115+, Firefox 63+, Safari 17.6.
/channel/htmlshit/3789
2️⃣ Вторник
Аттлассиан и Parcel используют хак: бросают исключение и вытаскивают URL из error.stack.
/channel/htmlshit/3790
FlexBox Labs — конструктор раскладок под флекс (есть и экспериментальный грид). Работает онлайн и локально.
/channel/htmlshit/3792
3️⃣ Среда
В Chrome DevTools появился MCP — протокол для подключения внешних инструментов и данных к ИИ-моделям.
/channel/htmlshit/3793
При анимации цвета в CSS всё сводится к RGB, из-за чего появляются серые провалы. Решения: filter: hue-rotate() или анимация угла оттенка в переменной.
/channel/htmlshit/3794
5️⃣ Четверг
Реализация долгого нажатия с анимацией через Tween.js.
/channel/htmlshit/3796
Удаление фона прямо в браузере: Transformers.js + WebGPU. Бесплатное демо от HuggingFace.
/channel/htmlshit/3797
5️⃣ Пятница
В addEventListener можно передавать AbortSignal и удобно управлять отпиской от событий.
/channel/htmlshit/3799
Jest Preview визуализирует тесты в браузере.
/channel/htmlshit/3800
6️⃣ Суббота
Slack тестирует локализацию с помощью «белиберды», чтобы легко находить непереведённые строки. Переводы хранят в ICU MessageFormat.
/channel/htmlshit/3802
GRID TYPE — редактор модульных шрифтов, вдохновлённый Баухаузом. Можно собирать буквы и орнаменты, экспортировать в шрифтовые файлы. Поддерживается кириллица.
/channel/htmlshit/3803
#css #js #tools #animation #i18n #fonts
#инструмент дня
Модульные шрифты всегда строились на простой идее: буква рождается из сетки. Ещё в 1920-е годы баухаузовцы экспериментировали с кругами, квадратами и треугольниками, чтобы создать универсальный алфавит, который можно воспроизвести где угодно — от печатного станка до архитектуры. Позднее Вим Кроуэл и другие дизайнеры показали, что строгая сетка может быть источником бесконечного разнообразия форм.
Сегодня к этим традициям обращается новый онлайн-редактор GRID TYPE. В нём можно выбирать разные сетки, настраивать их параметры, собирать буквы как из конструктора, экспериментировать с модульностью, сегментацией или пиксельностью.
Получившийся результат легко превратить в шрифтовой файл и использовать в реальных проектах.
Советую заглянуть в примеры — шрифтами дело не ограничивается! Орнаменты тоже тут. Можно использовать как часть CTF-игры…
Для тех, кто работает с кириллицей, доступна отдельная бета-версия: beta.grid-type.com А основной сервис здесь: grid-type.com
#fonts #tool
Ошибка доступа: необходимо обновить знания по базам данных 👁️🗨️
Академия Selectel выпустила квиз по базам данных. Проверьте свои навыки работы с СУБД и повторите основные термины — а после теста получите промокод на 1000 бонусов в панели управления Selectel.
Жмите на ссылку, чтобы начать квиз 👉
#фишка дня
Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?
А вот можно! Как в этом примере от Мэтта Покока.
И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.
#js #event #abortsignal #бородач
#инструмент дня
Одной из самых популярных задач по работе с изображениями было и остаётся удаление фона с картинок. Вокруг этого развелось какое-то невероятное число сервисов.
И все хотят денег.
Но мы же с вами понимаем, что даже достаточно сложную нейронку можно запустить прямо в браузере, правда? Мощностей вашего компьютера в совокупности с возможностями WebGPU более чем хватит, чтобы работать с моделями разной направленности.
Итак, вашему вниманию — Transformers.js, как средство работы с моделями, и одно из самых наглядных его применений — удаление фона с фото прямо в вашем браузере: https://github.com/huggingface/transformers.js-examples/pull/4/files
Демо: https://huggingface.co/spaces/webml-community/remove-background-webgpu
Бесплатно, без SMS.
Конечно, Transformers.js могут и не такое, была бы натренированная модель: анализ эмоциональной окраски текста, распознавание речи, получение выжимки из текста... Впрочем, ребята и их предоставляют, в огромном количестве.
Огонь? Огонь! 🔥
#js #ml #бородач
🚀 Стажировка для начинающих аналитиков в Яндексе
Яндекс открыл новый набор стажёров-аналитиков в Москву и Санкт-Петербург. Компания обновила тестовые задания: если вы уже пробовали свои силы раньше, можно пройти ещё раз.
Стажировка — это возможность работать над реальными продуктами с миллионной аудиторией: запускать A/B-тесты, анализировать поведение пользователей, строить дашборды и предлагать решения, которые напрямую влияют на развитие сервисов. Для стажёров предусмотрены гибкий график, зарплата, поддержка наставника, Айтиобщага для участников из других городов.
И даже отложенный оффер — если вы ещё учитесь и хотите вернуться в Яндекс позже.
📍 Что важно знать про отбор
Первый шаг — тестовое задание. Оно включает задачи по алгоритмам, SQL и математике. Важно уметь писать эффективные запросы (в том числе с оконными функциями), уверенно работать с числами и логикой, применять статистические методы. После теста участников ждут технические секции и знакомство с командами.
👉 Подать заявку можно на сайте. Там же есть полезные материалы, которые помогут подготовиться к отбору.
#инструмент дня
Разработчики Google Chrome вот буквально вчера представили MCP для Chrome DevTools! Вот тут: https://developer.chrome.com/blog/chrome-devtools-mcp
MCP расшифровывается как Model Context Protocol — это протокол, который задаёт единый способ подключения внешних инструментов и источников данных к ИИ-моделям.
Зачем оно надо? Ну, собственно, это то самое недостающее звено в разработке: даёт возможность агенту реально пойти и посмотреть данные реального приложения, а не вашего о нём представления.
Живые метрики скорости и стабильности, реальный исполняемый код — все это доступно девтулзам, а теперь, значит, и агенту.
Берёшь такой и спрашиваешь: «У меня там валидация не срабатывает когда я ввожу неверный емейл, разберись». И ведь разберётся!
Поддерживаются все необходимые события, вплоть до загрузки файлов и получения состояния сети.
Не, кроме шуток, это очень круто. Теперь можно подсоединиться к Jira, Figma, натравить это всё на браузер и отдохнуть наблюдать :)
#chrome #mcp
Приглашаем на конференцию по защите и монетизации софта 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 #бородач