С появлением на горизонте новой CSS функции linear()
возможности создания естественных анимаций и переходов в будущем значительно расширяются. В этой статье Джейхи Томпкинс рассматривает текущее состояние CSS easing и демонстрирует, чего можно ожидать от linear()
, включая удобные инструменты для работы с ней уже сегодня.
User
Представляем Firebolt: Продуктивный React фреймворк
Создание веб-приложений должно быть простым...
К сожалению, современная веб-разработка постепенно становится все более сложной и запутанной. Веб всегда был просто вебом, так почему же он не стал проще? Почему мы не становимся более продуктивными?
Сегодня мы рады публично представить Firebolt: новый вид фреймворка react для создания веб приложений. В Firebolt собрано все, чему мы научились за последние несколько лет, и сведено в крошечный, молниеносно быстрый фреймворк, созданный для того, чтобы вы работали продуктивно и приносили пользу.
Когда «as never» — единственное, что работает
as never
, очень редко требуется в TypeScript. Давайте рассмотрим пример, где это необходимо.
Представим, что мы хотим отформатировать некоторый ввод на основе его typeof
. Сначала мы создадим объект formatters
, который сопоставит typeof
с функцией форматирования:
Типы событий в React и TypeScript
При работе с React и TypeScript вы часто сталкиваетесь с подобными ошибками:
const onChange = (e) => {}; // Parameter 'e' implicitly has an 'any' type.
<input onChange={onChange} />;
Не всегда понятно, какой тип следует присвоить пременнойe
внутри функции onChange
.
Это может произойти с onClick
, onSubmit
или любым другим обработчиком событий, которые получают элементы DOM.
К счастью, есть несколько решений:
Функция TypeScript 5.3, о которой вам не рассказали
20 ноября команда TypeScript выпустила TS 5.3.
Как обычно, я просканировал сообщение об анонсе, но быстро заметил кое-что интересное.
Одно из самых важных изменений в TypeScript 5.3 не было упомянуто в примечаниях к релизу.
Встречаем Angular 17
В прошлом месяце исполнилось 13 лет с момента появления "красного щита" Angular. AngularJS стал отправной точкой для новой волны JavaScript-фреймворков, появившихся для поддержки растущей потребности в богатом веб-опыте. Сегодня с новым внешним видом и набором перспективных функций мы ведем всех в будущее с версией 17, устанавливая новые стандарты производительности и удобства для разработчиков.
Что нового в Chrome 119?
Начиная с Chrome 104 для вновь созданных или обновленных файлов cookie с указанием даты истечения срока действия действует ограничение - не более 400 дней. Теперь это ограничение будет применено к уже хранящимся файлам cookie задним числом.
После первого запуска Chrome 119+ и однократного переноса базы данных срок действия этих файлов будет ограничен до 400 дней. Влияние этого изменения пользователи смогут ощутить не ранее чем через 400 дней после выхода Chrome 119, и то только для существующих файлов cookie, которые не были обновлены за это время.
Более подробно о рекомендации по срокам действия можно прочитать здесь, а сейчас - дружеское напоминание о том, что в ближайшем будущем сторонние файлы cookie будут устаревшими, и руководство по подготовке к этому.
Вышел Chrome 118
CSS @scope.
Правило @scope at-rule
позволяет разработчикам распространять правила стилей на заданный корень описания и стилизовать элементы в соответствии с близостью к этому корню.
С помощью @scope
можно отменять стили, основанные на близости, что отличается от обычных стилей CSS, которые применяются только на основе порядка и специфики источника. В следующем примере имеется две темы.
Svelte: Знакомство с рунами
В 2019 году Svelte 3 превратил JavaScript в реактивный язык. Svelte - это фреймворк для создания веб-интерфейса, который использует компилятор для превращения декларативного кода компонентов в такой...
Что нового в Chrome 117?
Что ожидается в статье:
Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения.
Вычисление наборов данных более высокого порядка с помощью группировки массивов.
DevTools упрощает процесс локальных переопределений.
И многое другое.
Типизированные CSS переменные с @property
Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем 🙂 .
Вышел Chrome 116
Традиционный перевод анонса от команды Google Chrome о нововведениях
• Document Picture-in-Picture API
• Улучшена отладка отсутствующих таблиц стилей в DevTools
• Свойство notRestoredReasons
И многое другое!
Встречайте Next.js Commerce 2.0
Сегодня мы с радостью представляем Next.js Commerce 2.0.
App Router Ready: Использование компонентов React Server, Server Actions, встроенных лейаутов, метаданных и всех новых шаблонов из недавно выпущенного App Router.
Динамическая витрина: Динамическая витрина с Edge-рендерингом, работающая со скоростью статической. Настраивайте содержимое без не жертвуя производительностью.
Упрощенная архитектура: Next.js Commerce теперь представляет собой один провайдер на репозиторий, что позволяет сократить объем кода и уменьшить количество абстракций для вашего приложения.
Наш новый шаблон-акселератор интернет-магазина демонстрирует лучшие шаблоны для создания составных коммерческих приложений, включая поддержку BigCommerce, Medusa, Saleor, Shopify и Swell.
TypeScript 5.2: Новое ключевое слово: 'using'
В TypeScript 5.2 появится новое ключевое слово 'using', которое можно будет использовать для утилизации чего-либо с помощью функции Symbol.dispose, когда оно покидает область видимости.
Исследование производительности анимации на основе скрола страницы
Что нового в анимации на основе скрола?
Анимация на основе скрола - это способ добавить интерактивности и визуального интереса вашему сайту или веб-приложению, который запускается в зависимости от положения прокрутки пользователя. Это отличный способ удержать пользователей и сделать сайт более привлекательным.
Раньше единственным способом создания анимации на основе скрола страницы, было реагирование на событие прокрутки в главном потоке. Это приводило к двум основным проблемам:
Прокрутка выполняется в отдельном потоке, поэтому события прокрутки передаются асинхронно.
Анимации основного потока подвержены помехам.
Вышел Chrome 115
В этой статье вы узнаете про:
• Анимации на основе скрола
• Topics API
• Ограждённые Фреймы
• Privacy Sandbox
и многое другое!
Анонсируем Dart 3
Привет из Google I/O 2023. Сегодня, в прямом эфире из Маунтин-Вью, мы объявляем о выпуске Dart 3 - самого крупного релиза Dart на сегодняшний день! Dart 3 содержит три основных усовершенствования. Во-первых, мы завершили путь к 100% надёжная null безопасности. Во-вторых, мы добавили новые возможности языка для записей, шаблонов и модификаторов классов. В-третьих, мы заглядываем в будущее, где мы расширим поддержку наших платформ, добавив нативный код для веб с помощью Wasm-компиляции. Давайте разберемся во всём в деталях.
Встречайте Dev Mode в Figma
Как инструмент проектирования может работать лучше для разработчиков? Этот вопрос мы задаем себе и нашему сообществу. Сегодня мы рады представить Dev Mode - новое рабочее пространство в Figma, созданное для того, чтобы разработчики получали то, что им нужно, когда им это нужно, используя инструменты, которые они используют каждый день.
Знакомимся с @scope в CSS
В январе 2019 года я поднял вопрос в W3C CSS GitHub под названием Please bring back scoped styles. Когда-то существовал атрибут HTML scoped, но он был устаревшим. В CSS он был заменен на @scope
. Поддержка должна появиться в Chrome 117. Safari так же занимает положительную позицию по спецификации.
У @scope
есть два преимущества: стилизация на основе близости и установка нижней границы для селектора.
Представляем popover API
Всплывающие окна встречаются в вебе повсеместно. Вы можете увидеть их в меню, переключателях и диалоговых окнах, которые могут проявляться в виде настроек учетной записи, виджетов раскрытия информации и предварительных просмотров карточек товаров. Несмотря на распространенность этих компонентов, их создание в браузерах все еще остается на удивление громоздким. Вам нужно добавить скрипты для управления фокусом, состояниями открытия и закрытия, доступные хуки для компонентов, привязки к клавиатуре для входа и выхода из опыта, и это все еще до того, как вы начнете создавать полезную, уникальную, основную функциональность вашего всплывающего окна.
Чтобы решить эту проблему, в браузеры приходит новый набор декларативных HTML API для создания всплывающих окон, начиная с popover API в Chromium 114.
Information
- Rating
- 753-rd
- Registered
- Activity