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": это отражает поведение более точно.
Angular v17 содержит новый встроенный поток управления для
Благодаря отзывам сообщества в процессе RFC команда Angular остановились на синтаксисе
Поток управления улучшает эргономику, поэтому вам не нужно импортировать директивы в автономные компоненты.
Ставьте 👍, если нравятся такие краткие заметки.
#angular
if, switch и for.Благодаря отзывам сообщества в процессе RFC команда Angular остановились на синтаксисе
@.Поток управления улучшает эргономику, поэтому вам не нужно импортировать директивы в автономные компоненты.
Ставьте 👍, если нравятся такие краткие заметки.
#angular
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend Roadmap.pdf
1.9 MB
🗺 Roadmap по современному фронтенду от KTS
Федор Биличенко, фронтенд-тимлид в KTS, делится своим взглядом на развитие фронтенд-разработчика.
Статья подойдет как для начинающих специалистов, так и для более опытных, которые хотели бы получить какой-то ориентир для дальнейшего развития.
Федор Биличенко, фронтенд-тимлид в KTS, делится своим взглядом на развитие фронтенд-разработчика.
Статья подойдет как для начинающих специалистов, так и для более опытных, которые хотели бы получить какой-то ориентир для дальнейшего развития.
1. Визуализация снэпшотов кучи JavaScript: новая версия включает возможность визуализации снэпшотов кучи V8, сохраняемых в формате
.heapsnapshot. Это позволяет лучше анализировать производительность и утечки памяти, предоставляя как традиционное табличное представление, так и графическое представление связей между объектами в памяти.2. Переход к определению из подсказок TypeScript: позволяет быстро переходить к определению элементов кода прямо из всплывающих подсказок в TypeScript, что ускоряет навигацию и повышает эффективность работы с кодом.
3. Поддержка TypeScript 5.3
#новости #devtool
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM