🖥 Явное управление ресурсами в TypeScript — using

Недавно в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally.

Но мы можем использовать using не только, когда открываем файл или подключение к базе данных — это как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:
- создали объект, удалили
- показали спиннер и скрыли, когда получили данные
Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.

Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде:

useEffect(() => {
  (async () => {
    using manager = new LoadingManager(setIsLoading);
    await Promise.resolve().then(() => console.log("promise.resolve"));
  })();
 }, []);

/**
 * Класс, который управляет состоянием спиннера
 */
class LoadingManager {
  constructor(private setIsLoading: (value: boolean) => any) {
    this.setIsLoading(true);
    console.log("constructor");
  }

  [Symbol.dispose]() {
    this.setIsLoading(false);
    console.log("disposer")
  }
}

// В консоли будет выведено в следующем порядке
// constructor

К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try/finally.

@javascriptv

💡Лайфхак для работы с JS в IntelliJ IDEA 🖥

Если вы используете бесплатную IntelliJ IDEA Community Edition, то из поддержки JS и CSS там только весьма скудная syntax highlighting only подсветка синтаксиса, но есть простой способ её улучшить.

В этом нам поможет плагин TextMate Bundles https://plugins.jetbrains.com/plugin/7221-textmate-bundles, который уже встроен в современных версиях IDEA. В этом плагине уже встроены бандлы для JavaScript и CSS, причём, с достаточно неплохой подсветкой синтаксиса. Загвоздка в том, что эта подсветка не работает из коробки, т.к. её перекрывает та самая syntax highlighting only подсветка.

Чтобы всё заработало, идём в Settings > Editor > File Types и удаляем File name patterns для CSS (syntax highlighting only) и JavaScript (syntax highlighting only). Тоже самое можно проделать и для SQL (syntax highlighting only).

Пример было/стало для JavaScript на картинке

@javascriptv

🖥 При виде этого не сталкивающийся с JS программист переживает шок — как это?!

⏩А ты сможешь с ходу объяснить, почему так?

Начнём с того, что для сравнения JavaScript приводит обе стороны равенства к одному типу.
Также вспомним, что если число начинается с 0, JS предполагает, что оно написано в восьмеричном формате, и выполняет необходимые преобразования.

И в этом всё дело, 018 — недопустимое восьмеричное число (в 8-ричной системе цифры от 0 до 7). А раз в числе 018 есть восьмёрка, то JavaScript теперь рассматривает его как обычное десятичное, то есть равное 18. Получается, что '018' == 18 — выражение является истинным.

При этом 017 — допустимое восьмеричное число, поэтому JS представляет его как 8-ричное число 15, потому что 1×8¹ + 7×8⁰ = 15. А строку '017' он рассматривает как десятичное число, в результате чего получается 17. Но 15 не равно 17, поэтому второе выражение неверно.

Такие вот дела, ох уж это автоприведение типов 🙃

@javascriptv

🖥 Интересный codepen-проект

Интересная идея; можно сделать что-то похожее — и будет, что показать на собесе.
Solar system — анимация описания планет солнечной системы. Проект реализован с помощью CSS и JavaScript.

🔜 Код на Codepen

@javascriptv

🖥 Пианино на JavaScript для Chrome

Проект состоит из 3 файлов: HTML-страницы, CSS-стилей и JS-скрипта.

*️⃣HTML-страница отвечает за «мясо» проекта: надписи, заголовки, подключение звуков и сборку всего проекта в одной точке. Но страница сама по себе ничего не сумеет: мы просто разместим на ней нужные блоки, а вся анимация и поведение задаются в двух других файлах.

*️⃣CSS-стили решают две задачи: оформляют страницу и рисуют интерфейс. Плавная анимация нажатия и появления подсказок прописываются именно здесь.

*️⃣JS-скрипт занимается всей работой пианино: отслеживает нажатия на клавиши, чтобы включить звук и показать нужный эффект на экране.

По-моему, неплохой способ прокачать свой скиллы веб-разработки
⏩ Подробное пошаговое описание, что делать

@javascriptv

🖥 Brainwave

Проект, с которым вы научитесь создавать современные веб-сайты с эффектом параллакса и макетами в виде коробочек-бенто.

Этот курс охватывает все: от стильного дизайна пользовательского интерфейса до принципов mobile-first, укрепляя ваши навыки работы с React.js и Tailwind CSS.

▪Github
▪Обучающее видео

@javascriptv

🖥 Обработка нажатия Caps Lock в JavaScript

Мне одному кажется, что Caps Lock — самая бесполезная клавиша? Вдобавок можно нажать её в самый неподходящий момент, скажем, при вводе пароля и не заметить. В идеале при написании JS добавить блок предупреждения пользователя о нажатии Caps Lock.

Чтобы отслеживать, включен ли Caps Lock, мы используем метод getModifierState:

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // предупредить о нажатии Caps Lock?
    }
});

Для подробного ознакомления с getModifierState давайте заглянем в доки W3C :

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

Как видим, getModifierState позволяет получить множество сведений о клавиатуре пользователя во время событий, ориентированных на нажатие клавиш.
Полезная штука, используйте)

@javascriptv

🖥 Релиз TypeScript 5.4

Приятные новости 🌟
Состоялся релиз TypeScript 5.4. В новой версии языка программирования, построенного на основе JavaScript и позволяющего объявлять и описывать типы, в Microsoft поработали над производительностью языка, добавили новые возможности автодополнения кода для редакторов и упростили способы переподключения библиотек. Типы также используются в инструментах редактора TypeScript, таких как автодополнение, навигация по коду и рефакторинг, которые доступны в Visual Studio и VS Code. Проект доступен через NuGet или npm (npm install -D typescript).

В TypeScript 5.4 появился новый тип утилиты NoInfer, добавлена поддержка вызовов require() в пакете --moduleResolution и --module save, быстрое исправление при добавлении отсутствующих параметров, поддержка автоматического импорта для подпутей, исправлены ранее обнаруженные ошибки.

С выходом TypeScript 5.4 Microsoft продолжает работу над TypeScript 5.5. Согласно дорожной карте, бета-версия этого проекта должна выйти 16 апреля, релиз-кандидат — 4 июня, а финальный релиз — 18 июня.
Что ж, ждём)

Также стало возможно запускать тестовые ночные сборки TypeScript 5.4 Nightlies через npm, которые выпускаются каждый день в полночь (npm install -D typescript@next) для VS Code, Visual Studio, Sublime Text и IntelliJ.

@javascriptv

🖥 Boa — экспериментальный лексер, парсер и компилятор Javascript

Тут на днях года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.

🔥 Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.

Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа.

«Поскольку Boa используется все большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.

Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.

🖥Исходный код проекта выложен на GitHub под лицензией MIT
4.6К⭐️

@react_tg

🖥 Подборка из интересных 20 мини-проектов на чистом Javascript

Никаких фреймворков или библиотек, только JS, HTML5 и CSS

Среди проектов:
*️⃣форма для заполнения
*️⃣бронирование мест в кинотеатре
*️⃣видеоплеер
*️⃣карточки мемори
*️⃣конвертер между валютами
*️⃣счётчик до НГ

Самое то, чтобы прокачать понимание JS, отточить работу с событиями, потренировать разные техники
Just JS it 🔥

https://javascript-mini-projects.netlify.app/

@javascriptv

🖥 Truthy и Falsy в JavaScript

В JavaScript, truthy – это всё, что в логическом контексте считается истиной. Если что-то не является явно ложным (например, 0 или пустая строка ""), то это truthy.

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

▶️Допустим, вы пишете веб-приложение на JavaScript, и хотите проверить, заполнил ли пользователь поле с именем, прежде чем отправить форму. Вот где в игру вступают понятия truthy и falsy.

В JavaScript, если строка не пустая, она считается truthy, а пустая строка — это falsy. Это значит, что вы можете использовать простую проверку, чтобы узнать, заполнено ли поле:

let userName = form.userName.value; // значение, введённое пользователем

if (userName) {
  // Если userName truthy 
  console.log("Спасибо за заполнение имени, " + userName + "!");
} else {
  // Если userName falsy 
  console.log("Пожалуйста, заполните поле с именем.");
}

Этот пример показывает, как использование понятий truthy и falsy может сделать ваш код более кратким и читаемым. Вместо того чтобы писать сложные условия для проверки, не является ли строка пустой, не равна ли она null или undefined, вы можете просто проверить, truthy ли значение переменной.

Примеры falsy значений включают:
🟡0 и -0
🟡"" (пустая строка)
🟡null
🟡undefined
🟡NaN

Всё остальное в JavaScript считается truthy, включая:
🟡"0" (строка, содержащая символ нуля)
🟡"false" (строка, содержащая текст false)
🟡Пустые объекты {} и массивы []

@javascriptv

🖥 JavaScript однопоточный или многопоточный? Ставим точку

Полезная статья для лучшего понимания JavaScript.
В ней описывается:
— внутреннее устройство host-среды
— расширяемость и встраиваемость
— асинхронность
— инструменты организации многопоточности
— и ещё много всего

📎 Статья
📎 Вот ещё годное видео в тему, доказательство мультипоточности JS

@javascriptv