14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.
Буквально — используя параметры строки запроса (query string parameters).
Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.
А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.
А очень просто!<a href="">Reload</a>
Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108
В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.
Не пишите лишнего, котаны!
#http #html #trick #бородач
#фишка дня
В iOS Safari есть такая фишка: при удерживании пальца на, например, ссылке появляется всплывающее окошко с её предпросмотром. Но иногда это вообще не к месту, потому надо бы найти способ отключить.
Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.
#safari #callout #бородач
#фишка дня
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота": .box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick #бородач
#инструмент дня
Надоело каждый раз выходить из уютной консоли и открывать caniuse.com, чтобы посмотреть, с каких браузеров поддерживаются сабгриды?
Ой, только не говорите, что я один тут верстаю вслепую.
Вашему вниманию Bramus Van Damme и его caniuse-cli: bramus/caniuse-cli" rel="nofollow">https://www.npmjs.com/package/@bramus/caniuse-cli
$ caniuse "viewport units"
$ caniuse @property
#фишка дня
Как убедиться, что ваш switch покрывает все кейсы, а default остаётся только на случай косяков в рантайме?
Очень просто! Два варианта:
1. Используем never, от Кори Хауса:
interface Dog {
kind: "dog";
favoriteToy: string;
}
interface Parrot {
kind: "parrot";
knowsWords: number;
}
type Pet = Dog | Parrot;
function logPetTalent(pet: Pet) {
switch (pet. kind) {
case "dog":
return console. log (Dog loves ${pet. favoriteToy}. ');
case "parrot":
return console. log (Parrot knows ${pet.knowsWords} words. *);
default:
const exhaustiveCheck: never = pet;
}
}
switch-exhaustiveness-check. И уже дальше решаем, разрешать default, или нет. Конфигураия это позволяет.
💲Каналы с Junior IT вакансиями и стажировками
Подписывайся и забирай свой оффер⚡
1. IT вакансии по СНГ
2. IT стажировки по СНГ
3. IT стажировки в топовых компаниях мира
4. Удалённые IT вакансии и стажировки
5. Python вакансии и стажировки
6. БИГТЕХ вакансии и стажировки
7. Design вакансии и стажировки
8. QA вакансии и стажировки
9. Junior вакансии и стажировки
10. Frontend вакансии и вопросы собесов
11. Вакансии и стажировки для аналитиков
12. Вакансии в русских стартапах за границей
13. Вакансии и стажировки для DevOps
14. Вакансии, которых нет на ХХ.РУ
#баг дня
Кажется, когда-то я уже использовал свой немногочисленный медийный ресурс, чтобы продвигать библиотечные баги, которые напрямую меня касаются.
Пришло время повторить! С небольшим историческим экскурсом :)
Итак, некая библиотека компонентов Radix. И написана она в технике bring your own styles. То есть буквально стыкуются с чем угодно, не навязывая своё оформление (темы есть, но они — отдельно).
В чём же тогда смысл таких UI-китов? Ну, собственно, создание своих компонентов и дизайн-систем не ограничивается наложением стилей на стандартные input да button, это большая работа по объединению их в доступные группы, в задание нужного поведения и так далее.
А уже потом как, например, в нашем случае — можно хоть Tailwind накинуть. Ирония какая.
Так вот, среди UI-китов есть некое подобие конкуренции и моды. Как и везде. И одна из модных тенденций — пытаться сделать работу интерфейса быстрее. Неважно как, визуально или фактически.
И один из достаточно неожиданных способов этого добиться — это поменять обработчик onClick на onMouseDown.
И вуаля, на мобильных устройствах как будто бы стало на 300 мс быстрее!
Но, конечно, это достаточно спорное решение. Как минимум, нельзя отменить клик, убрав курсор с элемента.
А тут я обнаружил ещё одну проблему: https://github.com/radix-ui/primitives/issues/3600
Там есть и видео, и демо.
Суть: на вкладках тоже применена техника onMouseDown. В итоге, когда мы анмаунтим вкладку с полем ввода, на котором висит onBlur, это событие — не срабатывает. В нашем случае это приводит к проблемам с форматированием полей, которое как раз на onBlur и повешено.
Почему так происходит? Потому что во всех браузерах обработка событий происходит в таком порядке:
0. mousedown
1. change
2. blur
3. focus
4. mouseup
5. click
...остальное посмотрите по ссылке.
Логично, что при замене mousedown на click всё прекрасно работает. Но кому-то в Radix очень захотелось, чтобы на мобилах их UI-кит казался быстрее других.
Выстрелили себе в ногу получается.
В общем, как обычно, прошу ваших комментариев и реакций на issue в GitHub!
#ui #kit #radix #onmousedown
#заметка дня
Тут Иван Акулов из Framer поделился, как они доставляют AVIF-изображения, добиваясь ещё большей, чем WEBP, экономии трафика.
Да, я в курсе, что многие генерируют картинки при сборке, кто-то использует сервисы и так далее, но давайте не забывать, что:
1. Есть пользовательский контент
2. Облака могут встать дорого
Итак, в чём же проблема? А в том что AVIF ну очень долго кодируется, что не есть хорошо. Там, где на генерацию WEBP уйдёт 100-300 мс, на AVIF — 1-3 секунды.
В итоге, если генерировать изображения по запросу и сохранять на CDN (тем же nginx, например), будет не очень вежливо заставлять посетителя ждать.
Поэтому было решено применять подход, знакомый нам как stale-while-revalidate.
1. С первым запросом генерируем WEBP-картинку, но устанавливаем кеширующие заголовки как Cache-Control to max-age=0, stale-while-revalidate=31536000.
2. Поскольку max-age выставлен в 0, картинка моментально "протухнет", CDN с этим не согласится и отправит второй запрос, чтобы, собственно, закешировать.
3. И вот тут уже начинаем генерировать AVIF.
4. И отправляем его с max-age=31536000, ну, почти навсегда.
Ну и общая статья на тему: https://www.framer.com/help/articles/how-are-images-optimized-in-framer/
Я тут пока готовил этот обзор, хотел найти свой конфиг nginx для генерации и кропа картинок на лету, но... потерял. Кажется, пришло время потренироваться и написать обновлённый, по мотивам.
А как вы доставляете картинки, котаны?
#image #optimization #бородач
#til дня
Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?
Мне — нет. Но вот сейчас почти да.
Вы знали, что вот уже пару лет как nth-child в CSS стал нормальным?
Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (`div`, p, `section`).
Выходит какой-то бред, как мне посчитать второй элемент с классом .star?
И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!:nth-child(2 of .star) {
background: red;
}
Ведь счастье так возможно. Стефан Юдис мне это показал.
Вот, Baseline 2023: https://caniuse.com/css-nth-child-of
И демо: https://codepen.io/alinaki/pen/LYKXWYo
Я, короче, очень доволен.
#css #nth #фишка #бородач
#инструмент дня
Приложение растёт, достигло невероятных масштабов, а интернационализацию не завезли?
Или так долго пилили фичи под основной язык, что переводчик-техпис успел уволиться, а техлиду не нравится ни один кандидат?
Да, это не оправдание фигачить строки без заворачивания их в уже ставший настолько привычным t(), но что-то же делать надо, согласитесь?
Итак, вашему вниманию несколько вариантов для упрощения переноса подвисших непереведённых строк в ресурсные файлы:
1. Lingui ESlint плагин — https://github.com/lingui/eslint-plugin
Да, не так много людей использует Lingui, но плагин — достаточно универсальный и гибкий. Позволит найти как строки в тегах, так и в атрибутах.
2. Сюда же ESLint плагин для чуть более привычного i18next — https://www.npmjs.com/package/eslint-plugin-i18next
Занимается буквально тем же самым, но вариантов настройки чуть меньше. Лично у меня не было времени досконально проверить вариант 1, потому я остановился на этом. Сердито и быстро. Ну и конечно, установил его в warn.
3. Ну и в качестве забавного артефакта, добавим i18next-emoji-postprocessor. Что он делает?
О, он делает дичь. Заменяет все переведённые строки на рандомные эмодзи. Что не переведено — в эмодзи не превратится. Звучит кринжово, но на самом деле может стать идеально для текучки уставшего техписа.
Конечно, идеальным решением был бы экспорт непереведённых строк в CSV, но это я пока не до конца осилил. Получится — расскажу.
А как вы с этим справляетесь, котаны?
#i18n #l10n #eslint
#видео дня
А это что это? А это Юлия Миоцен вернулась (вот ссылка на первую часть) со второй частью обучающих видео по 3D в CSS!
Вот: https://www.youtube.com/watch?v=2FEgcYfiTEM
Напомню, что в прошлый раз мы с вами рисовали воксельных животных.
На этот раз речь пойдёт об освещении: где размещать источник света, как рассчитывать и строить тень, какого цвета эта самая тень должна быть.
Есть и текстовая версия с примерами: https://miocene.io/post/light-and-shadow-in-css/
Как и в прошлый раз, стоит отметить: возможно, вы никогда в жизни не будете рисовать животных на своих страницах. Но на промо-сайтах чего только не бывает, переворачивающиеся толстые карточки — несите их сюда!
#css #3d #light
#ссылка дня
Во, UI-экспериментаторы уже подтянулись.
SVG-фильтры на связи: https://codesandbox.io/p/sandbox/nn5q2y
GitHub: https://github.com/lucasromerodb/liquid-glass-effect-macos
Очень простая реализация, конечно, но есть забавный момент: поддержка SVG-фильтров на Safari довольно плоха, эффекта завихрения не происходит.
Вообще, SVG фильтры в принципе очень недооценённая и недоделанная в каком-то смысле технология, даже карту нормалей можно применить в них, без перехода в WebGL. Но поддержка жах.
#svg #glass
А вы замечали, что создание онлайн-курса - это как ремонт?
Сначала кажется, что "всего-то видео нарезать", а потом:
сценарий, монтаж, субтитры, обложки, платформа, дедлайн, прокрастинация, траты, новый курс по прокрастинации…
И всё ради того, чтобы потом кто-то досмотрел до второго урока.
Но вот интересный вопрос: а что если AI наконец начал это чинить?
Ребята из русской компании AskHow запилили штуку, которая превращает любое длинное видео - Zoom, эфир, лекцию - в готовый курс за пару минут.
Просто загружаешь файл - и всё остальное делает ИИ:
- транскрибирует
- нарезает на уроки
- формулирует заголовки
- позволяет править текстом (удалил фразу - и она исчезла из видео)
А потом - сразу публикует на платформу, где уже есть мини-LMS, сбор лидов и даже приём оплаты.
Сейчас курсы создаются из готовых длинных видео, но ребята работают над генерацией видео курсов из текстов и подключением цифровых аватаров.
Если хотите сами опробовать ИИ-инструмент - можно это сделать прямо сейчас, там есть промо-код для бесплатного теста.
В общем, если вы хоть раз говорили "надо бы потом собрать курс" - вот вам то самое "потом")
👉 Попробовать бесплатно и поддержать ребят на Product Radar.
#ux #будниразработчика #edtech #ai #coursebuilder
#новость дня
Никогда такого не было, и вот опять!
Уязвимость на базе localhost? Дайте две!
Итак, по порядку. Не так давно мы с вами обсуждали уязвимость под названием 0.0.0.0 Day. Суть её заключалась в том, что браузеры разрешали рандомным сервисам стучаться на разные порты по адресу 0.0.0.0, тем самым, позволяя этим самым сервисам определять, что же у вас на компьютере такого установлено. Это могли быть как средства для разработчиков, так и различные локальные сервисы поиска, защиты или просто мониторинга.
Так вот, на этих ваших прекрасных Android-смартфонах практически каждое приложение Facebook и Яндекса поднимают свой сервер, прослушивающий определённый диапазон портов. А скрипты аналитики и метрик передают куки этим самым серверам, связывая посещение некоего рандомного сайта с вашим аккаунтом в перечисленных компаниях.
А, каково? На iOS так сделать нельзя, потому что долгоживущие фоновые процессы ещё надо обосновать самому Apple.
А вы потом удивляетесь, откуда столько релевантной и не очень рекламы, ведь никому не говорили, никуда не входили. Только говорили.
Статья: https://localmess.github.io/
Перевод: https://habr.com/ru/articles/915732/
Совершенная красота, конечно. Facebook, кстати, перестали это использовать. Яндекс вроде ещё использует.
Почитайте статью или перевод. Очень крутая.
#cvs #security #privacy #vulnerability
#статья дня
Дэн наше всё Абрамов недавно написал статью о новом способе передачи данных с сервера — Progressive JSON. Это не просто использование курсоров для пагинации, как в том же JSON:API, а настоящий поток данных, где структура JSON передаётся частями, по мере её готовности.
Вообще, много пишет последнее время. Это хорошо!
Зачем нужно? Собственно, для работы React Server Components в том числа!
Пример такого потока:
{
"header": "Welcome to my blog",
"post": "$1",
"footer": "Hope you like it"
}
/* $1 */
{
"content": "This is my article",
"comments": "$2"
}
{
"header": "Welcome to my blog",
"post": {
"content": "This is my article",
"comments": new Promise(/* ... not yet resolved ... */),
},
"footer": "Hope you like it"
}
25 июня прошел второй Young Con — масштабный фест Яндекса для специалистов, студентов и школьников, которые хотят начать карьеру в IT.
8 000 участников пришли, чтобы познакомиться с инженерами и нанимающими менеджерами компании, попробовать силы в пробных собеседованиях и послушать десятки лекций о карьере, ИИ и технологиях, которые меняют нашу жизнь. А еще посетить интерактивные зоны с технологиями Яндекса, где можно было узнать, как работают лидары в автономном транспорте и увидеть робота, собирающего кубик Рубика за долю секунды — личный проект одного из сотрудников компании.
Помимо экспертов Яндекса, на фесте выступили и приглашенные спикеры. Научпоп-блогер Ян Топлес рассказал про разнообразие карьерных возможностей, а блогер и артист Денис Кукояка обсудил с Глебом Соломиным, как стать креативным продюсером собственной жизни и поговорил о том, почему важно не бояться отсутствия опыта.
Вечером на фестивале прошел финал «Баттла вузов», хедлайнером которого стала популярная музыкальная группа Tritia. Кубок и 1 млн рублей забрал студент из Факультета компьютерных наук НИУ ВШЭ. А после — гости слэмились на лайф-выступлениях от Доры и Feduk.
Подобные фестивали — не только возможность для общения, но шанс узнать про востребованные направления, понять, чем занимаются команды разных сервисов и погрузиться в технологии, которые вы сами сможете развивать в будущем.
Запись выступлений можно посмотреть на VK или YouTube.
#фишка дня
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам -electron-corner-smoothing!
Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: system-ui; /* Match the system UI design. */
}
react rerender too many times — тебе сюда.
Хард-скиллы — это то, за что нас нанимают. Софт-скиллы — то, за что нас потом терпят, повышают или, наоборот, обходят стороной.
Вечный спор: что важнее? Ответ зависит от контекста. Но чем выше в карьере, тем заметнее, что технических знаний уже недостаточно.
На управленческих позициях особенно важна способность не только делать, но и объяснять, договариваться, делегировать, выстраивать доверие. Всё это — про софт-скиллы.
В бесплатном курсе от Нетологии можно спокойно оценить свои гибкие навыки, понять, что работает, а что мешает.
Обсуждаются темы эмоционального интеллекта, коммуникации, управления временем и критического мышления.
Если хотите прокачать не только хард, но и то, что с годами оказывается важнее — вот ссылка на курс → https://netolo.gy/eepI
Реклама. ООО "Нетология", ИНН: 7726464125, erid: 2W5zFK5okZ6
Как оптимизировать PostgreSQL и не лишиться сна: разбор для разработчиков
Когда вы разворачиваете веб-приложение, чаще всего веб-сервер, бэкенд, база данных и авторизация оказываются на одном сервере.
Тестировщики и менеджер счастливы — все летает. Но потом приложение выходит в продакшн и начинается боль. Запросы тормозят и отвечают по пять секунд, CPU не загружен даже на треть, а веб-сервер выдает 504 Gateway Timeout.
И вот вы сидите ночью и чините прод, потому что PostgreSQL не просто «табличка с данными», а сложный инструмент с кэшем, индексами, буферами и планировщиком запросов.
Как избежать такой ситуации и грамотно подойти к проектированию схем — рассказали в статье Академии Selectel.
Переходите по ссылке и учитесь настраивать СУБД правильно.
Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2Vtzqwmd9RY
#статья дня
От перемены мест слагаемых сумма не меняется, не правда ли?
А если речь о композиции? Например, композиции трансформаций в CSS?
Ну, вот, например раз:
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: translate(-33.1%, 20.2%) scale(3);
}
.demo {
transition: transform 1s ease;
transform: rotate(0);
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
#инструмент дня
Если доступность для вас не пустой звук (а мы уже как-то обсуждали, что рано или поздно с проблемами управления интерфейсом столкнутся все), то поддерживать горячие клавиши точно придётся.
А для этого о них надо как-то договориться, продемонстрировать, выявить возможные проблемы и нестыковки. К примеру, стрелки не работают там, где должны.
Ну или, как вариант, показать кому-то как эффективно можно управлять текстовым или графическим редактором, девтулзами. Стать настоящим хоткей-ниндзей!
Что ж, по крайней мере для маководов у меня есть решение! Keycastr — https://github.com/keycastr/keycastr
Задача этой маленькой утилиты буквально вывести на экран нажатые клавиши. Конечно, есть выбор — показывать все, или только модификаторы.
Очень круто было наблюдать, как наш техлид джирой манипулирует :)
Ну и я уже вовсю создаю баги поддержки хоткеев с видео. Гораздо удобнее, чем описывать проблему словами.
Upd.
Альтернатива для Windows: http://carnackeys.com/
Для Linux:
https://github.com/bm-mit/key-caster
https://www.thregr.org/wavexx/software/screenkey/
https://github.com/critiqjo/key-mon
#hotkey #a11y #record
😁😀😂😱🤔
Как управлять проектами и планировать работу команды?
Не Джирой единой, как говорится 😎 Навести порядок в рабочих процессах и повысить продуктивность команды помогут инструменты Сферы.
Сфера.Знания — корпоративная база знаний, которая позволяет систематизировать информацию по проектам и дает возможность совместно работать с требованиями, инструкциями, описаниями процессов и другой документацией.
Сфера.Задачи — умный конструктор, который поддерживает различные методологии управления проектами и подходит для команд любого размера, работающих со Scrum / Agile / SAFE / Kanban.
Совместное использование инструментов Сфера.Задачи и Сфера.Знания позволяет:
✅ Быстро искать информацию. Задачи привязаны к статьям в Сфера.Знания.
✅ Фиксировать лучшие практики и решения из задач в базе знаний, чтобы использовать их в дальнейшем.
✅ Работать с актуальной информацией, так как при изменении статуса проекта задача по обновлению создается автоматически.
✅ Оперативно находить необходимую документацию по продукту благодаря связи задач со статьями в базе знаний.
📤 Узнать подробнее о том, как работают инструменты Сферы, можно тут.
Информация о рекламодателе.
Иногда сложно объяснить, почему какая-то мелочь на работе оказывается важной.
Ну вот, пицца в офисе. Не то чтобы ради неё хотелось бы приходить пораньше. Но всё же — приятно просто поесть с коллегами, отвлечься. И это уже немало.
Недавно в социальных сетях завирусился пост: сотрудникам с очень неплохими зарплатами задали вопрос — какой бенефит для них важен. Оказалось, бесплатные обеды. Казалось бы, при таких доходах. А по факту — удобно, не нужно принимать лишние решения, экономишь время, и, что важнее всего, силы.
Такие штуки часто кажутся чем-то второстепенным. Но когда они складываются в систему — в еду, спорт, терапию, жильё, адекватную поддержку — это перестаёт быть просто «бонусами». Это уже система, которая влияет на то, как ты живёшь и работаешь.
Вообще, тема интересная, и более подробно её раскрыли в подкасте Деплой на кейсе нематериальных мотивашек Яндекса. Есть много примеров, как это работает внутри: объяснили, как такие программы вообще появляются, зачем IT-компании тратят на это ресурсы и как измеряют пользу бенефитов. Тут, кстати, спойлерну: смотрят на востребованность, эффективность и удовлетворенность сотрудников.
Еще было любопытно про то, как в компании работают превентивные чекапы и как поддерживают коммьюнити по разным интересам.
⚡️IT-блоги: всё самое важное — в одном месте
Папка с каналами, которые помогают держать руку на пульсе мира технологий. Без воды и лишней рекламы — только суть, опыт и свежий взгляд на тренды.
Что внутри:
👨💻 Каналы IT-специалистов с кейсами, фейлами и полезными находками
🔒 Апдейты по кибербезу — чтобы не словить бан за уязвимость, о которой давно написали
👀 Чекпоинты по QA — тест-кейсы, автотесты, баг-репорты как искусство
🗓️ IT-ивенты от команд Т-Банка и Russian Hackers — митапы, конфы, движ
🌍 Каналы про глобальные digital-решения и аналитику: от BI до data-инженерии — тренды, продукты и технологии, которые двигают рынок вперёд (и всплывают на собесах)
Тест от Спортмастера утверждает, что я всё ещё не научился совмещать работу и жизнь. Какой результат у вас?
➡️пройти тест можно тут◀️
#фишка дня
Использование position: sticky уже так-то стало обыденностью.
А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
@container scroll-state(stuck: top) {
.pip {
width: 200px;
transform: translate(-50%, 0%)
translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
}
}
translate можно складывать, получая интересную математику в итоге :)
#заметка дня
— Мама, я хочу Liquid Glass!
— Liquid Glass есть у нас дома!
Liquid Glass дома: https://nrzns4.csb.app/
Кто не в курсе: https://developer.apple.com/videos/play/wwdc2025/219/
Ладно, кроме шуток. Да, это просто материал с картой нормалей. Но так и яблочное решение — не более, чем продвинутый шейдер.
Уверен, что UI-экспериментаторы скоро подтянутся :) Не знаю, насколько это будет востребовано, конечно, но...
Flutter жалко. У React Native тут явное преимущество получается. С другой стороны, Liquid Glass — он не только про виджеты, это попытка выстроить новый дизайн-язык. На мой взгляд, довольно странная, но какие-то изменения давно напрашивались, даже тот же Google в Material Design V3 натворил непонятного.
Идея, стоящая за Liquid Glass, — это отсутствие интерфейса. К сожалению, эта же идея привела к тому, что этого самого интерфейса на десктопной ОС стало даже слишком много.
Поглядим. Сквозь стекло.
#apple #liquid #glass
#фишка дня
...от Ахмада Шадида, уже хорошо нам известного.
Как отменить скругление углов на мобиле, но оставить на дестопе?
Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...
А можно просто:
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
border-radius: if(100% < 100vw: 8px; else: 0px);
#фишка дня
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.
Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var
#совет дня
Расскажу о других авторских каналах, на которые советую подписаться — собрал их в одну папку.
В них пишут, как начать кодить, вырасти в грейде и попасть на работу мечты. А еще делятся опытом и советами, которые помогут наработать новые навыки и трудоустроиться.
Будет полезно как джунам, так и сеньорам — /channel/addlist/0FHgy1y1yZgxMDc6