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
👍36❤5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🤩Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.
📌Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.
👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
#холивар
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
🛠 Дизайн-система 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, ее особенности и преимущества. А ещё — как настроить разные цветовые схемы в своих проектах.
🔥13👍6
Курсы для тех, кто хочет получить новые скиллы или перейти в другую компанию на грейд выше.
У вас есть возможность начать любой курс с бесплатных вводных занятий, чтобы познакомиться с преподавателями и форматом обучения.
Какой курс выбрать?
🔹 Математика для 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 Подкасты | Яндекс Музыка
#подкасты
👍12
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
👍9❤4
Вы научитесь рисовать игровое поле с использованием JS, создавать змею со случайно сгенерированной едой, заставлять ее двигаться, увеличивать размер/скорость и многое другое.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
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
❤13👍1🤩1🥱1
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
👍5
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 Подкасты | Яндекс Музыка | Сайт подкаста
#подкасты
❤7
🧠Чему вы бы хотели научиться?
Расскажите нам о ваших пожеланиях: какие навыки вы хотели бы прокачать в ближайшее время или какую профессию хотели бы приобрести?
За прохождение опроса вы получите промокод на скидку 15% на все наши курсы до конца 2024 года.
👉Опрос по ссылке👈
Расскажите нам о ваших пожеланиях: какие навыки вы хотели бы прокачать в ближайшее время или какую профессию хотели бы приобрести?
За прохождение опроса вы получите промокод на скидку 15% на все наши курсы до конца 2024 года.
👉Опрос по ссылке👈
❤2🤔1
Подборка опенсорсных библиотек на все случаи жизни — от создания графиков и диаграмм до масштабирования проекта с помощью распределенного выполнения задач и кэширования вычислений. Первые десять представлены ниже, а подробное описание и другие инструменты вы найдете в статье.
🛠 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
👍12❤6🥱2
Собираетесь ли вы развиваться и заниматься программированием на новогодних праздниках? Что именно будете делать?
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, парсинг, тестирование скриншотов и многое другое.
📌 Читать
👍6🥱4
Вы узнаете про конкретные техники атак, которые не ограничиваются простой вставкой тегов, а также про атаки с использованием XS-Leaks. Это вид атак, нацеленных на встроенные побочные каналы веб-платформы, которая позволяет злоумышленнику обходить same-origin policy в веб-браузерах.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍6
🧰 Что нового в 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": это отражает поведение более точно.
👍12❤5