Интересный сайт, рассказывающий как писать современные веб приложения на чистом JS, CSS и HTML

plainvanillaweb.com

#js #webcomponents

#meme #js

Чтобы немного нейтрализовать психологическую травму, нанесенную TypeScript, вот на ночь четыре капли седатива от JS

#js

Эван напрашивается на мем про гуся...

#evanyou #js

AbortController можно применять не только для отмены сетевого запроса, но и для отмены, практически, любых событий, включая setTimeout, анимацию или нажатие на кнопку

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

Иногда это удобней, чем делать отписку-подписку.

#js #tip

В экспериментальных версиях браузеров уже появляется реализация Temporal - официальной замены Date в JavaScript

const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // e.g.: 2025-01-22T11:46:36.144

// 1851222399924 is our timestamp
const launch = Temporal.Instant.fromEpochMilliseconds(1851222399924);
const now = Temporal.Now.instant();
const duration = now.until(launch, { smallestUnit: "hour" });
console.log(`It will be ${duration.toLocaleString("en-US")} until the launch`);
// "It will be 31,600 hr until the launch" <- @js-temporal/polyfill
// "It will be PT31600H until the launch" <- Firefox Nightly

Уже доступен полифилл - @js-temporal/polyfill

#js #date

Обычно для группировки массива по какому-то ключу используют reduce

Однако уже доступны Object.groupBy и Map.groupBy, которые позволяют упростить эту процедуру

const users = [
  { id: 1, name: "Alex", role: "admin" },
  { id: 2, name: "Anna", role: "user" },
];

const grouped = Object.groupBy(users, ({ role }) => role);

// Результат:
// { admin: [{...}], user: [{...}] }

#js

В JS чтобы выйти из вложенных циклов можно использовать метки

outerLoop: for (let i = 0; i < 5; i++) {
    let j = 0;
    while (true) {
        if (j === 2) {
            break outerLoop; // Выходит из внешнего цикла
        }
        j++;
    }
}

И не забываем, что Array.prototype.sort() приводит к строкам. Нужен компаратор.

[10, 2, 1].sort(); // [1, 10, 2] (как строки!)  
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10] (правильно)  

#js #tip

Фронтенд-фреймворки показывают, как они умеют.
На екмаскрипте.

#js #video #offtop

Раньше я думал, что JavaScript нужно заменять полностью, но сейчас согласен с Мурычем - достаточно статической типизации примитивов.

Причем, он предлагал "вьюшную" модель - если Ref инициализирован строкой, то и дальше в нем только строки. Так же с переменными по примитивным типам в JS

Cтатическая типизация примитивных типов плюс ES классы решат 95%+ всех проблем без извращений TS

#ts #js #murych