🌟 Что нового в DevTools Chrome 121: на заметку фронтенд-разработчику
1. Улучшения в панели Elements:
🔧 Поддержка
🔧 Теперь можно использовать одно кастомное свойство CSS в качестве запасного значения для другого кастомного свойства.
2. Улучшенная поддержка source map: включена по умолчанию опция "Resolve variable names in expressions using source maps" для отладки исходного кода в Sources и Scope.
3. Улучшения в панели Performance:
🔧 Расширенный трек взаимодействий с индикаторами задержек ввода и отображения.
🔧 Новые кнопки для продвинутой фильтрации во вкладках Bottom-Up, Call Tree и Event Log.
4. Маркеры отступов в панели Sources: в редакторе кода теперь отображаются вертикальные линии для блоков с отступами.
5. Полезные подсказки для переопределенных заголовков и содержимого в панели Network.
6. Новые опции в Command Menu для добавления и удаления шаблонов блокировки запросов.
7. Удалён экспериментальный раздел нарушений CSP.
8. Lighthouse обновлён до версии 11.3.0.
9. Улучшения доступности: улучшенная навигация и взаимодействие в различных панелях.
... и многое другое
1. Улучшения в панели Elements:
🔧 Поддержка
@font-palette-values для настройки значений свойства font-palette.🔧 Теперь можно использовать одно кастомное свойство CSS в качестве запасного значения для другого кастомного свойства.
2. Улучшенная поддержка source map: включена по умолчанию опция "Resolve variable names in expressions using source maps" для отладки исходного кода в Sources и Scope.
3. Улучшения в панели Performance:
🔧 Расширенный трек взаимодействий с индикаторами задержек ввода и отображения.
🔧 Новые кнопки для продвинутой фильтрации во вкладках Bottom-Up, Call Tree и Event Log.
4. Маркеры отступов в панели Sources: в редакторе кода теперь отображаются вертикальные линии для блоков с отступами.
5. Полезные подсказки для переопределенных заголовков и содержимого в панели Network.
6. Новые опции в Command Menu для добавления и удаления шаблонов блокировки запросов.
7. Удалён экспериментальный раздел нарушений CSP.
8. Lighthouse обновлён до версии 11.3.0.
9. Улучшения доступности: улучшенная навигация и взаимодействие в различных панелях.
... и многое другое
::marker в действии, или Как легко изменить стиль маркера/номера списка с помощью CSS➡️ Поиграть можно здесь
#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🧰 Использование прозрачных градиентов в CSS для создания эффекта затухания текста
Недавно некто Amit Merchant написал несколько полезных заметок о методе затемнения текста с помощью наложенного элемента, основанного на дизайне Trunk.io.
Эффект выглядит великолепно, но у него есть два недостатка:
☑️ Текст за градиентом больше нельзя выделить.
☑️ Эффект работает только на сплошных цветах фона.
Первую проблему легко решить, добавив к наложенному элементу:
Для решения второй проблемы необходимо заставить текст исчезать, а не выглядеть так, будто он исчезает. Реализовать это можно с помощью
Недавно некто Amit Merchant написал несколько полезных заметок о методе затемнения текста с помощью наложенного элемента, основанного на дизайне Trunk.io.
Эффект выглядит великолепно, но у него есть два недостатка:
☑️ Текст за градиентом больше нельзя выделить.
☑️ Эффект работает только на сплошных цветах фона.
Первую проблему легко решить, добавив к наложенному элементу:
user-select: none;
Для решения второй проблемы необходимо заставить текст исчезать, а не выглядеть так, будто он исчезает. Реализовать это можно с помощью
mask-image или background-clip. Подробнее о реализации и подводных камнях читайте в статье.🧑💻 Статьи для IT: как объяснять и распространять значимые идеи
Напоминаем, что у нас есть бесплатный курс для всех, кто хочет научиться интересно писать — о программировании и в целом.
Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.
Для кого: для авторов, копирайтеров и просто программистов, которые хотят научиться интересно рассказывать о своих проектах.
👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
Напоминаем, что у нас есть бесплатный курс для всех, кто хочет научиться интересно писать — о программировании и в целом.
Что: семь модулей, посвященных написанию, редактированию, иллюстрированию и распространению публикаций.
Для кого: для авторов, копирайтеров и просто программистов, которые хотят научиться интересно рассказывать о своих проектах.
👉Материалы регулярно дополняются, обновляются и корректируются. А еще мы отвечаем на все учебные вопросы в комментариях курса.
💡Быстрый способ доступа к результату последнего выражения в консоли Chrome: на заметку фронтенд-разработчику
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
Внутри каждого из нас живет критик. А как вы справляетесь со своим?
Anonymous Poll
29%
Хвалю себя за маленькие шаги
40%
Трезво оцениваю ситуацию
14%
Заменяю негативные мысли позитивными
9%
Критикую его в ответ
33%
Не справляюсь
3%
Свой вариант (напишу в комментарии)
🔥 Представлена бета-версия TypeScript 5.4
📌 Что нового:
☑️ Preserved Narrowing в Closures Following Last Assignments: улучшенный анализ типов.
☑️ The
☑️
☑️ Поддержка для
☑️ Checked Import Attributes и Assertions: теперь checked import attributes проверяются на соответствие глобальному типу
☑️ В TypeScript 5.4 добавлено быстрое исправление для добавления недостающих параметров в функции.
☑️ Определены устаревшие функции и опции, которые будут удалены в TypeScript 5.5.
☑️ Введены изменения, которые могут повлиять на существующие проекты.
📌 Что нового:
☑️ Preserved Narrowing в Closures Following Last Assignments: улучшенный анализ типов.
☑️ The
NoInfer Utility Type: новый тип NoInfer<T> предотвращает автоматический вывод типов в определенных ситуациях.☑️
Object.groupBy и Map.groupBy: добавлены новые статические методы для группировки элементов в объектах и мапах.☑️ Поддержка для
require() calls в --moduleResolution bundler и --module preserve: расширена поддержка синтаксиса require() в опциях moduleResolution и module, что облегчает интеграцию с различными модульными системами и бандлерами.☑️ Checked Import Attributes и Assertions: теперь checked import attributes проверяются на соответствие глобальному типу
ImportAttributes.☑️ В TypeScript 5.4 добавлено быстрое исправление для добавления недостающих параметров в функции.
☑️ Определены устаревшие функции и опции, которые будут удалены в TypeScript 5.5.
☑️ Введены изменения, которые могут повлиять на существующие проекты.
Please open Telegram to view this post
VIEW IN TELEGRAM
📹 В своей фронтендерской работе вы наверняка сталкивались с добавлением видео с YouTube, демо с CodePen или содержимого PDF на страницы сайта/блога.
☑️ Это может быть полезно, когда нужно дать пользователю быстро что-то сделать с iframe, но зачастую он ничего с этим iframe не делает, а трафик на загрузку содержимого уже улетел (может повлиять на скорость загрузки самого сайта и UX).
🔥 Adrian Roselli делится кейсами встраивания любых iframe экономно для трафика пользователей и демонстрирует готовые примеры HTML для YouTube (с использованием youtube-nocookie.com), CodePen и PDF, а также код веб-компонента youtube-embed, который можно доработать под себя.
☑️ Это может быть полезно, когда нужно дать пользователю быстро что-то сделать с iframe, но зачастую он ничего с этим iframe не делает, а трафик на загрузку содержимого уже улетел (может повлиять на скорость загрузки самого сайта и UX).
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Как вы обычно отдыхаете?
Anonymous Poll
21%
У самурая нет отдыха, только хардкор
11%
Делаю что-то своими руками
42%
Лежу, туплю и расслабляюсь
3%
Хожу на массаж
17%
Занимаюсь йогой/спортом
26%
Гуляю на свежем воздухе
5%
Хожу в походы (активный отдых)
52%
Читаю книги/играю в игры/смотрю кино или сериалы
14%
Пилю пет-проект
2%
Свой вариант (напишу в комментариях)
🤯 Про нашумевший тред парня, который нашел жену из 5239 девушек с помощью ChatGPT, слышно из каждого утюга. Поэтому интересна уже не сама история, а то, как люди на нее реагируют. А люди обычно разбираются, правда это или хайп, а также делают мемы.
🤦 Так вот, здесь айтишник с технической точки зрения оценил этот самый тред. Спойлер: либо парень гений, либо врёт.
Ну а мемы прикрепили к посту 😉
#назлобудня
🤦 Так вот, здесь айтишник с технической точки зрения оценил этот самый тред. Спойлер: либо парень гений, либо врёт.
Ну а мемы прикрепили к посту 😉
#назлобудня