На конференции Google I/O был озвучен новый функционал, который стал доступен веб разработчикам в 2023-2024 годах:

HTML and CSS
The inert attribute
Size container queries and container query units
New color spaces and functions
The :user-valid and :user-invalid pseudo-classes
CSS Subgrid
Trigonometric functions in CSS
CSS :has() selector
Complex nth-child selectors in CSS with the 'of S' syntax
New range syntax for media queries
The linear() easing function
CSS Nesting
Relaxed parsing for CSS Nesting
Lazy-load offscreen iframes
Declarative Shadow DOM
CSS offset-position and offsetpath values
The Popover API
align-content on block layout

JavaScript and Web APIs
Import maps
modulepreload
Offscreen canvas
Constructable stylesheets
Compression streams
The Origin Private File system
Array fromAsync() static method
ArrayBuffer transfer() and transferToFixedLength()
groupBy() functions
Promise.withResolvers
intl.Segmenter

Видеообзор

#google #html #css #js

У штатного логгирования в JS есть несколько уровней.

console.debug() отлично подходит для второстепенных логов, поскольку они попадают в раздел Verbose в инструментах разработчика и по умолчанию скрыты.

При необходимости, их можно сделать видимыми.

#tip #js

"JS беспредел"

В главной роли - Деми Мурыч

#js #video #murych #vuefaqpictures

О-очень интересная картинка о динамике развития различных библиотек и фреймворков со State of JS

Интерактивная версия

Хотя релевантность выборки для составления статистики под большим вопросом. Как помнится, по этим опросам неудовлетворенных пользователей Vue у них получилось больше, чем неудовлетворенных пользователей React

#js

0 == "0"
// true

0 == []
// true

"0" == []
// false

Волшебство JavaScript

#js

Красивые симуляции на JavaScript с целью изучения его возможностей по производительности

Статья

#js #performance

const count = ?;

let x = count;
let y = count;

x++;
console.log(x);

y = y + 1;
console.log(y);

Немного JavaScript

В каких случаях результат вывода будет различным?

#js #challenge

JavaScript worker threads / Web workers — это мощный функционал, доступный в современных веб-браузерах, а также в Node.js, Deno и Bun, который позволяет создавать независимые потоки выполнения в одной JavaScript-среде. Эти worker threads работают параллельно с главным потоком, позволяя приложению выполнять ресурсоемкие операции или обрабатывать сетевые запросы без блокировки пользовательского интерфейса.

Преимущества использования worker threads:

Повышенная отзывчивость: Передавая длительные задачи на worker threads, главный поток остается свободным для обработки пользовательских взаимодействий и обновления интерфейса. Это приводит к более плавному и отзывчивому пользовательскому опыту.

Повышенная производительность: Worker threads могут использовать несколько ядер современных процессоров, что позволяет параллельно выполнять ресурсоемкие задачи.

Эффективный обмен данными: В отличие от дочерних процессов, worker threads совместно используют память с главным потоком. Это позволяет эффективно передавать большие структуры данных между потоками, снижая необходимость дорогостоящей сериализации и десериализации.

Модульный код: Worker threads способствуют модульной организации кода. Мы можем изолировать сложные задачи в отдельных worker-скриптах, улучшая поддержку и повторное использование кода.

Варианты использования:

1. Ресурсоемкие вычисления

Представьте, что у нас есть сложная математическая формула для расчета данных по нескольким точкам. Непосредственное выполнение этого на главном потоке заблокирует пользовательский интерфейс и сделает наше веб-приложение неотзывчивым. Такие задачи идеально подходят для worker threads.

2. Обработка изображений/видео

Допустим, мы хотим разрешить пользователям загружать изображения в наше веб-приложение и применять фильтр черно-белого цвета перед отображением. Обработка изображения непосредственно в главном потоке может вызвать задержку во время применения фильтра. Опять же, это ресурсоемкая задача, где worker threads могут спасти ситуацию.

3. Анализ данных

На этот раз у нас есть большой набор данных о клиентах, и мы хотим фильтровать и сортировать его по разным критериям. Выполнение этих операций на главном потоке может значительно замедлить веб-приложение, особенно если набор данных большой.

4. Фоновые задачи

Представьте, что у нас есть веб-приложение, позволяющее пользователям сохранять свою работу в процессе. Постоянное сохранение данных на сервере во время редактирования может быть неэффективным и потенциально замедлить пользовательский интерфейс. Worker thread можно использовать для обработки фоновой функции сохранения.

5. Приложения в реальном времени

Приложения в реальном времени требуют постоянного общения с сервером для обновления пользовательского интерфейса последней информацией. Worker threads могут быть полезны для управления этими соединениями и обработки входящих данных без блокировки главного потока, ответственного за отрисовку пользовательского интерфейса.

#js #workerthreads