11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
#фишка дня
А приходилось ли вам, котаны, плавно менять текст?
Тогда вы не могли не заметить раздражающее мерцание, особенно заметное на одинаковых частях текста.
Причина, по которой это происходит, не уложится в один пост: это много-много математики цвета и режимов смешивания. Для такого у меня подготовлена вам целая статья: https://jakearchibald.com/2021/dom-cross-fade/
А фишкой же дня будет простое решение проблемы:
mix-blend-mode: plus-lighter;
#codepen дня
Маскинг зашёл слишком далеко! Вы только посмотрите, что можно сделать при помощи небольшого количества геометрии и градиентов!
И всё это на единственном теге img, без обёрток! Сразу будет сказано: в Safari пока сам цветной кружочек не работает, даже в Technology Preview :( но это не значит, что нам нечего почерпнуть! Исправлено!
Ссылка: https://codepen.io/alinaki/pen/xxeoXjN (это форк пена от t_afif, но с более универсальным сдвигом аутлайна)
Небольшой разбор:
1. clip-path требуется только для ограничения области ховера, можно и без него
2. чтобы чётко расположить кружочек на окружности, требуется немного геометрии с извлечением квадратного корня из радиуса.
3. Оказывается, аутлайн можно двигать. К сожалению, в Safari пока не прокатило. Суть перемещения outline — как раз в том, чтобы разместить квадратик, обозначающий статус пользователя, на окружности.
Буду пробовать починить это дело в Safari, посмотрим, что к чему :)
Upd. я нашёл способ починить в Safari, сейчас подбираю значения. Потому основная ссылка сломана, смотрите оригинальную :)
Upd. 2 Я починил в Safari! Осталось понять аналитическое решение :)
#css #hack #mask
👨💻Программистам всех уровней посвящается:
— Вносить правки в ваш код сложно и проще переписать всё с нуля?
— Пишете тесты, а баги всё не заканчиваются?
— Скорость работы вашего приложения заставляет желать лучшего?
— Вы много раз слышали про паттерны, слои приложения, ответственности объектов, но не понимаете, что от вас хотели?
🔥Тогда вы по адресу!
На моём канале я пишу статьи, отталкиваясь от своего многолетнего опыта коммерческой разработки.
🧠На канале вы узнаете:
— Что такое архитектура ПО и для чего она нужна
— Использование и польза паттернов проектирования на примерах
— Какие механизмы работают быстрее, но когда стОит отдать предпочтение иному подходу
— Как писать тесты правильно
— 🎁И многое другое...
🏆Переходи на канал, поднимай свой уровень,
💵а за ним и востребованность на рынке специалистов!
#codepen дня
Если doomscrolling — то только такой!
https://codepen.io/cobra_winfrey/pen/oNOMRav
Работает только в браузерах, поддерживающих Scroll Timeline API. Это пока только Chrome, Canary и за флагом. Ну и полифиллы.
#css #scroll #animation
#новость дня
Я не то чтобы люблю постить новость о выходе очередной версии какого-нибудь там React, но тут столько сразу всего, что давайте попробуем.
Итак, какой-то никакой-то React 19 Beta!
Вокруг этого релиза было слишком много разговоров. И причина проста: React Compiler.
TL;DR: React Compiler это особый инструмент сборки кода на React, автоматически мемоизирующий нужные данные в нужный момент. Никаких больше раздражающих useCallback, useMemo и memo не требовалось бы.
Собственно, блог разработчиков: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
И нет, этого в релизе React 19 не будет. Почему-то все кругом решили наоборот.
А что будет? Да много всего: https://react.dev/blog/2024/04/25/react-19
Наборы хуков и API для Suspense это нечто потрясающее. Я крайне рекомендую посмотреть хотя бы на use и useOptimistic. С такими нововведениями, можно даже думать об отказе от React Query.
И давайте пройдёмся по руководству к обновлению:
0. react-test-renderer объявлен устаревшим! Теперь официально: используйте React Testing Library.
1. ref как проперти. Дождались!
2. Возможность обрабатывать ошибки разных категорий: пойманные ErrorBoundary и пропущенные им же.
3. Наконец-то удалены propTypes и defaultProps. Висели с 2017 года как Deprecated.
4. Удалён ReactDOM.render. Вот тут мне стало больно, но я выживу: я абьюзил эту штуку чтобы рендерить реакт-виджеты в легаси-части кода.
5. Удалён ReactDOM.findDOMNode (кому-то тоже будет больно, да)
6. Сборок UMD больше нет. Если вам очень нужно работать без сборки прямо в браузере — используйте сервисы вроде esm.sh. На канале был пост об этом сервисе.
В общем, изменений достаточно. Но сначала надо обновиться до 18.3.0 хотя бы 🙂
#react #javascript
Оплачиваемая стажировка и трудоустройство без опыта — ну ничего себе 😳
Все возможно с Добровольным квалификационным экзаменом! Это бесплатный проект Правительства Москвы, где ты можешь показать свои знания по специальности, запомниться потенциальным работодателям и получить оффер в престижные компании Москвы.
Тебя ждет всего три шага:
1️⃣ Пройди тест
После регистрации на сайте ДКЭ тебе будет доступно 70 профессий по 7 направлениям. Выбирай тест по своей специальности и проверь уровень своих знаний!
2️⃣ Реши кейс
Если ты успешно сдал тест, тебя пригласят на следующий этап, где ты с другими участниками в команде будешь решать реальный кейс одного из работодателей.
3️⃣ Стань победителем
Окажись в числе лучших по общему количеству баллов за оба этапа и получи шанс попасть на оплачиваемую стажировку с дальнейшим трудоустройством.
Готов проявить себя? Регистрируйся и начинай проходить тест — https://dke.moscow
Реклама. АНО "РАЗВИТИЕ ЧЕЛОВЕЧЕСКОГО КАПИТАЛА", АНО "РЧК". ИНН 7710364647. erid: LjN8KLCTT
#фишка дня
Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.
А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.
В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)
#vscode #minimap
#фишка дня
Щас открою секрет. Чтобы не страдать от разработки, надо научиться отлаживать программы? Филологи — молчать!
Поднимите руку те, кто дебажит через console.log(var) 🙋
А надо не так.
Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуаля. Никаких тебе ожиданий сборки.
#debug #devtools
#фишка дня
Как сделать вывод консоли красивеньким?
Очень просто, использовать спецификаторы преобразования!
Прямо как sprintf в Си, ну как вы можете этого не знать?
Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.
А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX
Для тех, кто по ссылкам не ходит, сокращённая версия:
console.info(
"%c %cAdobe %cPhotoshop Web%c %c2023.20.0.0%c %c1bba617e276",
"padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)
#инструмент дня
Давайте в продолжение топика про современные методы реализации фигур, посмотрим на очередной их генератор.
Напомню, мы уже знаем как правильно рисовать треугольники и звёзды. Пришло время всего остального.
Встречайте: https://css-shape.com/
Их там какое-то невероятное количество, некоторые, с вырезами, даже конфигурируются!
Меня особенно Stamp и Grid Lines восхитили. Просто и элегантно.
#css #shape #clip
🚀Успей подписаться на Code Review – неиссякаемый источник айтишных приколов и мемов! 🔥😂
🤖 Наши мемы как комментарии в коде: иногда не все их поймут, но те, кто в теме, улыбнутся до ушей! 😎💬
🔥 Что вы получите в Code Review:
1️⃣ Ежедневные дозы смеха, которые зарядят весь день позитивом.
2️⃣ Мемы, подобранные специально для тех, кто живет в мире алгоритмов и скобок.
3️⃣ Уникальные шутки, которые даже ваш компилятор не сможет проигнорировать!
⚠️ Внимание: вход на канал разрешён только с чувством юмора и долей здравого цинизма!
Подписывайся, чтобы получить дозу свежих мемов, без зависаний и багов! 🎉🤓
#статья дня
Когда разработчикам браузеров заняться нечем, они... занимаются подсветкой текста.
Ладно, кроме шуток. Для некоторых задач подсветка текста поважнее будет, чем View Transitions API. Например, как вам текстовый редактор, который подсвечивает слова не путём создания тысяч элементов span, а с накладывая CSS прямо на текст?
А это ближе, чем кажется! И вот Брамус Ван Дамм написал большую статью, описывающую современное состояние Custom Highlight API. И, если коротко, фича уже вполне готова, чтобы создавать редакторы кода буквально на одном contenteditable элементе!
Собственно, что нам нужно?
1. Токенайзер — выделение значащих "токенов" в текста: зарезервированные слова, переменные, комментарии... В примере используется токенайзер из Prism.js
2. Генератор CSS для Custom Highlight API.
3. ...
4. Готово!
Вот статья: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/
Да, пока не без косяков, включая рандомные проблемы с производительностью, но работа идёт!
И пример для самых нетерпеливых: https://codepen.io/bramus/pen/MWxLjEo
#css #highlight
Увлекаетесь компьютерными науками и ищете, где можно интенсивно прокачаться в одном из актуальных IT-направлений? Тогда идеальный вариант — короткие образовательные программы, которые ведут эксперты-практики. Плюсы таких форматов — дают только полезную информацию, включают в реальные проекты, а ещё предлагают активный нетворкинг и обмен идеями.
Такие интенсивы проводит Яндекс Образование: в июне у них стартует новый студенческий кемп по промышленной разработке ПО на базе питерского ИТМО. За две недели вы сможете погрузиться в тему разработки высоконагруженных систем и углубить знания в области DevOps или информационной безопасности.
На программе ждут студентов профильных направлений. Чтобы подать заявку, заполните анкету участника до 1 мая. Всем, кто успешно пройдёт отбор, Яндекс Образование оплатит дорогу и проживание. Участие также будет бесплатным. Поторопитесь, количество мест ограничено.
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
#фишка дня
Итак, разрабатываете вы интернациональный проект. А что самое главное в интернационализации?
Конечно же кавычки! И как их ставить в оформлении цитат? Руками чтоль?
Ну нет, конечно. У свойства content имеются зарезервированные значения open-quote и close-quote, которые и дадут нужный результат, среагируя на атрибут lang элемента. Ваши висячие кавычки никогда не будут прежними :)
Пруф: https://codepen.io/alinaki/pen/VwNqNpa
Элемент q, кстати, так из коробки умеет.
#css #til #quotes #i18n
🧠 Улучши ИИ на хакатоне X5 Tech AI Hack! У тебя будет 10 дней, чтобы избавить нейросеть от галлюцинаций или научить ее работать с конфиденциальными данными. Призовой фонд от X5 Tech – 2 000 000 рублей.
Старт ML-соревнования – 17 мая. Не жди дедлайна, регистрируйся прямо сейчас: https://cnrlink.com/x5techaihackdev
Приглашаем на хакатон экспертов по Data Science, ML-специалистов, разработчиков на Python и всех остальных, кто хочет прокачать свои знания о создании ИИ. На выбор – один из двух треков:
🥷 Трек 1. Маскирование. При использовании сторонней языковой модели нельзя передавать ей чувствительные данные организации – имена клиентов, доменные адреса и прочие. Поэтому участникам необходимо подготовить алгоритм, который заменит эти сведения в тексте без потери смысла.
🔎 Трек 2. Детекция галлюцинаций. Никто не любит, когда ИИ-ассистент в ответ на вопрос дает неправильную информацию. Задача конкурсантов – разработать систему, которая сможет эффективно выявлять аномалии в текстах, сгенерированных нейросетью.
Хакатон продлится 10 дней. У тебя будет шанс получить консультацию от крутых ML-экспертов и специалистов по Data Science, обсудить решения с единомышленниками, узнать больше о проектах X5 Tech.
28-29 мая по результатам тестирования моделей участников 5 лучших команд в каждом треке получат приглашение на финал в Москве. Церемония награждения пройдет на мероприятии X5 Future Night.
Участвуй в X5 Tech AI Hack и внеси свой вклад в развитие ML-технологий: https://cnrlink.com/x5techaihackdev
Реклама. ООО «ИТ ИКС 5 Технологии». ИНН 1615014289. erid: LjN8KbCRy
#инструмент дня
Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?
И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js
Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.
А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8
#css #js #performance #бородач
#инструмент дня
Ладно, мы все можем согласиться, что у TypeScript замечательный офсайт, прекрасная документация и удобная песочница, но в мире есть сотни тысяч JS-библиотек и десятки тысяч из них либо написаны на TS, либо имеют выделенные типы.
А единой документации по этим типам нет!
Точнее, не было, но теперь вышел https://tsdocs.dev/
Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.
К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?
Я вот — к имплементации, прыгать к типам меня раздражает.
#typescript #dts #types #doc #бородач
Привет! Меня зовут Александр Шлейко, и вы видите, как я с хинкальным котом (который помогает мне вести занятия) и с кошкой Шираз (которая мешает мне вести занятия) готовлю очередной урок для учеников.
Я преподаю фронтенд, и готов провести вас с нуля до первого предложения о работе. Буквально через месяц начинается новый поток моей школы, и за 70 т.р. вы можете присоединиться.
Почему я лучше условного Brainboxа?
🤗 Домашняя атмосфера и постоянный менторинг
👩🎓 Высокий уровень выпускников и реальные трудоустройства
А ещё примеры моих занятий можно посмотреть в открытом доступе, например, в Youtube.
Фронтенд хорош тем, что там поменьше математики и перекладывания чиселок, и побольше творчества, так что он отлично подходит таким гуманитариям, как я :)
Прямо сейчас можно
Посмотреть программу курса
Написать мне в личку @dustyo_o и позадавать вопросы о курсе
⭐ Первым 10 написавшим сделаю скидку ;)
#такое дня
Есть тут те, кто настолько погружён в интернациональные проекты, что приходится работать с вертикальным написанием?
Чтож, с Safari версии 17.4 вертикальным может быть не только текст (writing-mode), но и элементы управления!
Я понимаю, что абсолютному большинству это и в жизни не пригодится, но какая красота!
Статья от разработчиков WebKit: https://webkit.org/blog/15190/implementing-vertical-form-controls/
Кстати, так-то поддержка набирает обороты. В WebKit просто решили добить все элементы разом: https://caniuse.com/mdn-css_properties_writing-mode_vertical_oriented_form_controls
#css #cjk
#til дня
Нечасто использую этот тег, TIL aka Today I Learned (сегодня я узнал).
Не потому что я всё знаю, а потому что такие штуки обычно или в заметки уходят, или в фишке. Редко что прямо шокирует сходу.
Итак, тема дня: CSS paint-order, порядок отрисовки.
И предназначено это самое правило для управления порядком применения заливки, обводки (контура) и маркеров в SVG и HTML.
Под маркерами подразумеваются всякие там стрелочки, вдоль SVG контура.
По-умолчанию, обводка контура рисуется после заливки, но можно установить наоборот и получить эффект, как на иллюстрации: https://codepen.io/argyleink/pen/MWoeoKV.paint-order {
paint-order: stroke fill;
}
Итого, контуры останутся только снаружи, а внутри всё будет залито.
Казалось бы, такая простая штука, а как забавно.
Поддержка очень хорошая: https://caniuse.com/mdn-css_properties_paint-order
Правда, как всегда, есть нюанс с Safari. Его алгоритмы теней чуть-чуть отличаются, но добиться нужного эффекта всё ещё можно, чуть-чуть поиграв с тенью.
#css #paint #order
☄️ Горячая акция для IT-специалистов на дизайн и ремонт квартиры!
RE Design Buro создаем дизайн-проекты и реализуем их в жизнь более 15 лет ⭐️
За это время сделали уже 450+ проектов и ремонтов в Москве и области 🏆
Коротко о компании:
⭐️ работают не бригады, а узкие специалисты: плиточники, электрики, сантехники т.д.
⭐️ 6 месяцев средний срок ремонта.
⭐️ рейтинг выполненных ремонтов - 4.9.
⭐️ все цены и сроки фиксируем в договоре.
⭐️ оплата разбивается частями по факту сдачи работ.
💥 Только для специалистов IT-индустрии - скидка 10% на дизайн и ремонт от компании RE Design Buro
‼️ Важное условие — вы работаете в IT-компании, которая получила аккредитацию Минцифры РФ
👉 Наши работы
👉 Мы в Телеграм
👉 Связаться с нами
👉 Консультация дизайнера БЕСПЛАТНО
👉 Получить сметный расчёт стоимости ремонта
#video дня
В продукте, с которым я работаю, в качестве решения для стора используется Effector: https://effector.dev/
И, честно говоря, под него надо немного ломать мозг. То есть, базовые атомарные сторы с событиями на нем делаются так же просто, как и в этих ваших модных Reatom, Jotai, Zustand и так далее. Но когда ты открываешь для себя мир гардов, сэмплов и, какая неожиданность, эффектов — вот тут начинается всё самое интересное. Хотя и не без проблем, о них в соответствующем посте.
Так вот, автор Эффектора — Дмитрий Болдырев — очень много времени уделяет попыткам визуализировать архитектуру приложения и логики всех связей внутри него. Конечная цель — получить самые крутые девтулзы для отладки сторов на свете.
А пока результатом этого стала презентация на HolyJS в этом году. Посвященная, собственно, визуализации архитектуры приложения вообще. Кто, как, когда пытался. Инструменты и результаты:
https://www.youtube.com/watch?v=fWwC45TYxkA
#effector #conference #architecture
В Китае снова вводят рабство.
Иначе как объяснить тот факт, что ИИ следит за сотрудниками пекинских офисов и вычитает из зарплаты каждое движение вне рабочего места.
Быть в курсе всех технологичных инноваций и трендов помогает канал Завезли фичей. Там с угарными комментариями пишут нереальное, ставшее нашей реальностью.
— История о том, как с помощью ИИ мошенники подделали лицо на видео-звонке, а когда их запалили по некорректному движению губ, то не растерялись и предложили клиенту разводить людей вместе
— Человекоподобный робот, глядя на которого, становится страшно
— Первый в мире летающий автомобиль
— Как в Китае воскрешают мертвых?
Если вам регулярно завозят фичей, значит будущее уже наступило. Подписаться надо, чтобы опережать время!
Реклама. ИП Буханов И.О. ИНН: 111603733834 Erid: LjN8JyiTj
#новость дня
Краудфандинг давно и прочно закрепился в мире как средство набрать денег на то, что сложно оценить обычным бизнес-планом. Гики всех мастей получают то, что иначе получить сложно. Стартуют новые бизнесы, успешные и не очень.
8 лет назад мимо меня почему-то прошла тема, что ребята из Font Awesome собрали миллион долларов на разработку пятой версии своих иконочных шрифтов. Миллион, вместо планируемых 30 000. Этот рекорд, кстати, до сих пор держится.
Не в смысле рекорд кикстартера вообще, а в смысле рекорд среди поддержки софтовых проектов.
В чём отличие подобного сбора средств от простого инвестирования или бизнес-планов? Это свобода не только произвести некий платный продукт, но и вернуть что-то сообществу. И уж Font Awesome сложно упрекнуть в том, что они жадные.
Ну ладно, разве что чуток.
Так вот, к чему это я. Они вернулись!
Пару лет назад ребята взяли под своё крыло открытый проект UI-кита, основанного на веб-компонентах — Shoelace. И потихоньку его пилили. Почему потихоньку? Потому что путь веб-компонентов ко всеобщей поддержке и стандартизации весьма тернист. Одни только битвы YouTube с Firefox чего стоят.
И вот они решили повторить свой успех и резко собрать денег на выпуск третьей версии набора, превратив его в полновесную и конкурентоспособную дизайн-систему! Под таким скучным названием Web Awesome.
Естественно, обещан достаточно жирный бесплатный пакет, а в платном — плюшки вроде конструктора раскладок, тем, шаблонов... Причём, на каждые собранные 50к увеличивается число бесплатных плюшек.
Я это пишу в тот момент, когда сбор кончается. Как и 8 лет назад, прошло мимо моих радаров. Рекорда не случилось, но 700 000 собранных — это потрясающий результат.
Ну что, веб-компоненты захватят мир, или как обычно? :)
#ui #design #awesome
#заметка дня
Я часто вижу в профильных чатах вопросы типа: «Помогите, тут истерика, текст не занимает всю ширину контейнера и мой флексбокс не работает!»
Короче, происходит ситуация, как на картинке: кажется, что место справа никак не используется.
Ладно бы только начинающие такое спрашивали, но нет же. У всех дыры и паника, паника и дыры.
А суть в том, что рендер текста — это сложно. Рендер длинных слов — это очень сложно.
Потому браузер всегда выделяет для текста максимально возможную ширину. Неважно, ограничили ли вы её условиями флексбокса или установили max-width. Возьмёт всё и начнёт упихивать буквы и слова. Как сможет.
Пример расчётов можно посмотреть в серии статей Инлайновый контекст форматирования, раздел «Горизонтальное выравнивание».
Подсказка: он не сможет. И выделенное место не вернет.
А люди ожидают, что текст спокойно сдвинется вправо и у чекбокса будет больше воздуха. К сожалению, так не получится вообще никак.
Единственно, кажущееся разумным, решение — это заполнить всю предоставленную ширину, используя переносы (словарь или ­). Ну или word-break: break-all;Есть ещё не очень разумные решения с использованием JavaScript для подсчета реально занимаемой ширины.
Вот три примера: https://codepen.io/alinaki/pen/ExrGRwL?editors=1100
Кстати, если кому реально интересно как работают алгоритмы Flexbox (вы же не думали, что это изобретение только для CSS? Во Flutter тоже они) есть прекрасная статья по поводу: https://tchayen.com/how-to-write-a-flexbox-layout-engine
Не паникуйте, ну.
#css #flex #render #бородач
#фишка дня
Нужно отменить операцию по таймауту? Ни слова больше!
try {
const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
const result = await res.blob();
// …
} catch (err) {
if (err.name === "TimeoutError") {
console.error("Timeout: It took more than 5 seconds to get the result!");
} else {
console.error(`Error: type: ${err.name}, message: ${err.message}`);
}
}
#codepen дня
А кому тут неожиданно уместных применений CSS 3D-преобразований?
Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!
Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO
Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).
Маги тут?
#css #3d #transform #бородач
Ты + work-life balance = смешная шутка?
Если вечно работаешь до ночи, утром не можешь проснуться, выгораешь, прокрастинируешь, коришь себя за то, что не можешь это изменить...
То попробуй решить эту проблему с ЭЭГ-наушниками Neiry Mind Tracker
Наш софт обрабатывает электрическую активность твоего мозга и дает персональные рекомендации: когда мозг готов к работе, а когда пора отдохнуть: чтобы ты снова не впал в прокрастинацию
Это функцию мы называем «Нейропомодоро», потому что это похоже на тот самый таймер: ты работаешь 20-30 минут и потом софт говорит, что пора сделать паузу...
❗️ Только в нашем случае — это персональный таймер, основанный на твоей РЕАЛЬНОЙ усталости
Под капотом — настоящая наука и длительные исследования нейрофизиологов
Узнай подробнее о майнд-трекере Neiry: https://neiry.ru/mt-cpa-all?utm_source=tg_in_ALL&utm_medium=234bud&utm_term=adP4
Реклама. ООО "НЕЙРИ". ИНН 9701140612. erid: LjN8KRTPX
#фишка дня
Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: /channel/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
table:has(td:nth-child(5):hover) {
td:nth-child(5) {
background: var(--hover);
}
}