This media is not supported in your browser
VIEW IN TELEGRAM
animation-timeline и кастомных свойств..search {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
to { width: calc(100% - var(--button-size)); }
}
Переменная
--header-height используется для определения высоты контейнера заголовка. Вы можете использовать это для animation-range, применяемого в различных анимациях прокрутки 🤙В качестве другого примера, вы можете анимировать появление тени (
box-shadow) на заголовке, как только поиск зафиксирован 🍡header {
animation: shadow;
animation-timeline: scroll();
animation-range:
var(--header-height)
calc(var(--header-height) * 1.5);
}
@keyframes shadow {
to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}
Все это работает на основе
scroll() в animation-timeline, который подключается к прокрутке страницы. И затем используя --header-height в различных animation-range ✨Вы можете нажать на выглядывающего медведя, чтобы прокрутить страницу вверх:
<a href="#">Back to top</a>
CSS
:focus-within используется для активации плавной прокрутки только для этого взаимодействия.html:focus-within {
scroll-behavior: smooth;
}
➡️ Поиграть можно здесь
#css #tip by Jhey
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🤩Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.
📌Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.
👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
#холивар
Please open Telegram to view this post
VIEW IN TELEGRAM
🛠 Дизайн-система Gravity UI: как легко построить свой интерфейс
Команда User Experience в Yandex Cloud выпустила дизайн-систему и библиотеку компонентов Gravity UI в опенсорс.
📌 Что внутри:
☑️ Набор базовых React-компонентов
☑️ Библиотека-конструктор для лендингов
☑️ Подробные гайды по использованию компонентов
☑️ Набор готовых иконок, в составе которого почти 600 вариантов
☑️ ChartKit — пакет для визуализации данных
☑️ Yagr — высокопроизводительный рендеринг графиков, основанный на uPlot
☑️ I18n — пакет для локализации интерфейса
☑️ Библиотека в Figma и ещё более 25 полезных библиотек
Под катом — детали использования Gravity UI, ее особенности и преимущества. А ещё — как настроить разные цветовые схемы в своих проектах.
Команда User Experience в Yandex Cloud выпустила дизайн-систему и библиотеку компонентов Gravity UI в опенсорс.
📌 Что внутри:
☑️ Набор базовых React-компонентов
☑️ Библиотека-конструктор для лендингов
☑️ Подробные гайды по использованию компонентов
☑️ Набор готовых иконок, в составе которого почти 600 вариантов
☑️ ChartKit — пакет для визуализации данных
☑️ Yagr — высокопроизводительный рендеринг графиков, основанный на uPlot
☑️ I18n — пакет для локализации интерфейса
☑️ Библиотека в Figma и ещё более 25 полезных библиотек
Под катом — детали использования Gravity UI, ее особенности и преимущества. А ещё — как настроить разные цветовые схемы в своих проектах.
Курсы для тех, кто хочет получить новые скиллы или перейти в другую компанию на грейд выше.
У вас есть возможность начать любой курс с бесплатных вводных занятий, чтобы познакомиться с преподавателями и форматом обучения.
Какой курс выбрать?
🔹 Математика для Data Science
Наш cамый популярный, самый хардкорный курс по вышмату! На этом курсе вы получите все необходимые знания по математике для старта карьеры в DS или аналитике.
🔹 Алгоритмы и структуры данных
Курс, который на практике познакомит со сложными алгоритмами и научит писать более короткий и эффективный код.
🔹 Основы программирования на Python
Если вы только хотите начать свою карьеру в IT, то этот курс точно для вас. Вы сможете получить новую профессию за 13 990 рублей, поймете, насколько вам подходит работа с кодом.
Если вы не знаете, какой курс вам подойдет, оставляйте заявку, и наш менеджер поможет с этим и любым другим вопросом – https://proglib.io/w/4dfcdde4
У вас есть возможность начать любой курс с бесплатных вводных занятий, чтобы познакомиться с преподавателями и форматом обучения.
Какой курс выбрать?
🔹 Математика для Data Science
Наш cамый популярный, самый хардкорный курс по вышмату! На этом курсе вы получите все необходимые знания по математике для старта карьеры в DS или аналитике.
🔹 Алгоритмы и структуры данных
Курс, который на практике познакомит со сложными алгоритмами и научит писать более короткий и эффективный код.
🔹 Основы программирования на Python
Если вы только хотите начать свою карьеру в IT, то этот курс точно для вас. Вы сможете получить новую профессию за 13 990 рублей, поймете, насколько вам подходит работа с кодом.
Если вы не знаете, какой курс вам подойдет, оставляйте заявку, и наш менеджер поможет с этим и любым другим вопросом – https://proglib.io/w/4dfcdde4
🎙️Подкаст Podlodka: TypeScript
У TypeScript — очень интересная история. Это первый крупный опенсорсный проект компании Microsoft, которая до этого воспринималась исключительно как империя зла. Он соревновался сразу с несколькими другими языками, включая Dart, и смог с огромным опережением их обойти.
TypeScript настолько глубоко проник в фронтенд-экосистему, что JavaScript де-факто зависит от него. Андрей Старовойт, тимлид команды WebStorm в JetBrains, который много лет занимался поддержкой TypeScript в IDE, рассказал всё про принципы дизайна языка, устройство системы типов, экосистему и известные проблемы.
⏯️ YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка
#подкасты
У TypeScript — очень интересная история. Это первый крупный опенсорсный проект компании Microsoft, которая до этого воспринималась исключительно как империя зла. Он соревновался сразу с несколькими другими языками, включая Dart, и смог с огромным опережением их обойти.
TypeScript настолько глубоко проник в фронтенд-экосистему, что JavaScript де-факто зависит от него. Андрей Старовойт, тимлид команды WebStorm в JetBrains, который много лет занимался поддержкой TypeScript в IDE, рассказал всё про принципы дизайна языка, устройство системы типов, экосистему и известные проблемы.
⏯️ YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка
#подкасты
P-00X-20F.pdf
1.4 MB
🆚 WebAssembly versus JavaScript: Energy and
Runtime Performance
🔎 Академическое сравнение требований к энергопотреблению и производительности JavaScript и WASM.
🙊 Спойлер: WebAssembly быстрее, чем JavaScript, и даже более энергоэффективен.
Runtime Performance
🔎 Академическое сравнение требований к энергопотреблению и производительности JavaScript и WASM.
Please open Telegram to view this post
VIEW IN TELEGRAM
Вы научитесь рисовать игровое поле с использованием JS, создавать змею со случайно сгенерированной едой, заставлять ее двигаться, увеличивать размер/скорость и многое другое.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
ии linear() для создания подобного подпрыгивающего переключателя на чистом CSS.
:root {
--magic-ease: linear( 0, 0.0039, 0.0157, 0.0352...);
}
label { container-type: size; }
label::after {
translate: calc(var(--active) * (100cqi - 100%)) -50%;
transition: translate 1s var(--magic-ease);
}
:checked ~ label { --active: 1; }
Мы можем использовать локальные кастомные свойства, а затем перемещать псевдоэлемент в зависимости от размера контейнера.
Хорошо здесь то, что если размер контейнера изменяется, перемещение всё равно работает.
👉 Поиграть можно здесь.
#css #tip by Jhey
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Представлен четвертый выпуск веб-фреймворка для создания контентно-ориентированных сайтов Astro с более быстрой сборкой, новым инструментом разработки и многим другим.
📌 Что внутри:
🔧 Панель инструментов Astro Dev
🔧 Internationalization (i18n) routing
🔧 Incremental Content Caching (экспериментальный)
🔧 Новые View Transition API
🔧 Переработанные логирование и документация
📌 Что внутри:
🔧 Панель инструментов Astro Dev
🔧 Internationalization (i18n) routing
🔧 Incremental Content Caching (экспериментальный)
🔧 Новые View Transition API
🔧 Переработанные логирование и документация
npm create astro@latest
399. Safari TP, Chrome 120, CSS 2023, Николь Салливан, Chrome и…
Веб-стандарты
🎙Свежий выпуск подкаста «Веб-стандарты»: Андрей Мелихов и Вадим Макеев про Safari TP, Chrome 120, CSS 2023, Николь Салливан, Chrome и стандарты, V8 JIT, Baseline и StyleX.
00:02:33 Safari TP
00:09:21 Chrome 120
00:16:59 2023 год для CSS
00:24:04 Николь Салливан
00:27:17 Chrome и стандарты
00:34:53 JIT-левитация V8
00:44:45 Обновление Baseline
01:09:02 StyleX и CSS-in-JS
01:38:11 Ответы на вопросы
⏯ YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста
#подкасты
00:02:33 Safari TP
00:09:21 Chrome 120
00:16:59 2023 год для CSS
00:24:04 Николь Салливан
00:27:17 Chrome и стандарты
00:34:53 JIT-левитация V8
00:44:45 Обновление Baseline
01:09:02 StyleX и CSS-in-JS
01:38:11 Ответы на вопросы
⏯ YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста
#подкасты
🧠Чему вы бы хотели научиться?
Расскажите нам о ваших пожеланиях: какие навыки вы хотели бы прокачать в ближайшее время или какую профессию хотели бы приобрести?
За прохождение опроса вы получите промокод на скидку 15% на все наши курсы до конца 2024 года.
👉Опрос по ссылке👈
Расскажите нам о ваших пожеланиях: какие навыки вы хотели бы прокачать в ближайшее время или какую профессию хотели бы приобрести?
За прохождение опроса вы получите промокод на скидку 15% на все наши курсы до конца 2024 года.
👉Опрос по ссылке👈
Подборка опенсорсных библиотек на все случаи жизни — от создания графиков и диаграмм до масштабирования проекта с помощью распределенного выполнения задач и кэширования вычислений. Первые десять представлены ниже, а подробное описание и другие инструменты вы найдете в статье.
🛠 Trigger.dev: управляет долгосрочными задачами в приложении.
🛠 Chart.js: рисует стильные графики и диаграммы.
🛠 React Flow/Svelte Flow: визуализируют любые сложные процессы и структуры.
🛠 Monaco Editor: встраивает редактор кода в ваше приложение.
🛠 Novu: обеспечивает отправку сообщений по любым каналам.
🛠 Nx: масштабирует проект с помощью распределенного выполнения задач и кэширования вычислений.
🛠 ClickVote: добавляет обработку реакций в любые приложения.
🛠 Mantine: предоставляет набор стильных UI-компонентов.
🛠 Styled Components: позволяет использовать CSS прямо в JavaScript.
🛠 Supabase: заменяет Firebase.
🔗 Читать статью
🔗 Зеркало
Please open Telegram to view this post
VIEW IN TELEGRAM
Собираетесь ли вы развиваться и заниматься программированием на новогодних праздниках? Что именно будете делать?
Anonymous Poll
30%
Попробую освоить новые инструменты и подходы к разработке
0%
Приму участие в хакатонах
4%
Посмотрю фильмы и сериалы про IT
33%
Поработаю над собственными проектами — добавлю новую функциональность
32%
Почитаю книги и статьи по программированию — расширю кругозор
48%
Просто отдохну и наберусь сил
2%
Свой вариант (напишу в комментариях)
🤩 Шпаргалка по Puppeteer: на заметку разработчику Node.js
Puppeteer — библиотека Node.js, разработанная Google для управления headless Chrome/Chromium через протокол DevTools.
Она позволяет автоматизировать тестирование UI, парсинг, тестирование скриншотов и многое другое.
📌 Читать
Puppeteer — библиотека Node.js, разработанная Google для управления headless Chrome/Chromium через протокол DevTools.
Она позволяет автоматизировать тестирование UI, парсинг, тестирование скриншотов и многое другое.
📌 Читать
Вы узнаете про конкретные техники атак, которые не ограничиваются простой вставкой тегов, а также про атаки с использованием XS-Leaks. Это вид атак, нацеленных на встроенные побочные каналы веб-платформы, которая позволяет злоумышленнику обходить same-origin policy в веб-браузерах.
Please open Telegram to view this post
VIEW IN TELEGRAM
🧰 Что нового в DevTools Chrome 120: подборка ключевых улучшений для фронтендера
1. Инструмент анализа Privacy Sandbox для понимания использования файлов cookie на сайтах и следования рекомендациям по новым API Chrome, обеспечивающим конфиденциальность.
2. Улучшенный список игнорирования: по умолчанию скрипты из
3. Изменения в source maps: поле
4. Новый переключатель режима ввода при удаленной отладке: теперь можно переключаться между сенсорным вводом и вводом с помощью мыши при удаленной отладке вкладки Chrome.
5. Панель "Elements" теперь показывает URL для узлов
6. Эффективная политика безопасности содержимого в панели "Application": теперь можно просматривать детали политики безопасности содержимого (CSP) для проверяемого фрейма.
7. Улучшенная отладка анимаций: во вкладке "Animations" теперь можно кликать в любом месте заголовка временной шкалы, чтобы установить указатель воспроизведения.
8. Диалоговое окно "Доверяете ли вы этому коду?" в "Sources" и предупреждение о self-XSS в "Console": это помогает предотвратить атаки self-XSS, когда пользователь вставляет вредоносный код в DevTools.
9. Точки останова обработчиков событий в web workers и worklets: Отладчик теперь также останавливает выполнение при соответствующих событиях в web workers и worklets.
10. Новый значок медиа для элементов
11. Переименование "Preloading" в "Speculative loading": это отражает поведение более точно.
1. Инструмент анализа Privacy Sandbox для понимания использования файлов cookie на сайтах и следования рекомендациям по новым API Chrome, обеспечивающим конфиденциальность.
2. Улучшенный список игнорирования: по умолчанию скрипты из
/node_modules/ и /bower_components/ теперь игнорируются в отладчике. Также улучшена обработка исключений, позволяя останавливать выполнение кода при перехвате исключений.3. Изменения в source maps: поле
ignoreList теперь используется вместо x_google_ignoreList.4. Новый переключатель режима ввода при удаленной отладке: теперь можно переключаться между сенсорным вводом и вводом с помощью мыши при удаленной отладке вкладки Chrome.
5. Панель "Elements" теперь показывает URL для узлов
#document: это упрощает отладку фреймов.6. Эффективная политика безопасности содержимого в панели "Application": теперь можно просматривать детали политики безопасности содержимого (CSP) для проверяемого фрейма.
7. Улучшенная отладка анимаций: во вкладке "Animations" теперь можно кликать в любом месте заголовка временной шкалы, чтобы установить указатель воспроизведения.
8. Диалоговое окно "Доверяете ли вы этому коду?" в "Sources" и предупреждение о self-XSS в "Console": это помогает предотвратить атаки self-XSS, когда пользователь вставляет вредоносный код в DevTools.
9. Точки останова обработчиков событий в web workers и worklets: Отладчик теперь также останавливает выполнение при соответствующих событиях в web workers и worklets.
10. Новый значок медиа для элементов
<audio> и <video>: при клике на значок открывается панель "Media" для отладки этих элементов.11. Переименование "Preloading" в "Speculative loading": это отражает поведение более точно.