Javascript

🖥 Работа с хранилищем веб-браузера: localStorage и sessionStorage в JavaScript

Веб-браузеры предоставляют 2 основных механизма для хранения данных на клиентской стороне — localStorage и sessionStorage. Они позволяют сохранять данные в браузере и использовать их позже.
В этой статье мы рассмотрим разницу между localStorage и sessionStorage, их методы работы и примеры использования.

🟡localStorage
├╼ Сохранение данных в localStorage
├╼ Получение данных из localStorage
├╼ Удаление данных из localStorage
╰╼ Очистка localStorage
🟡sessionStorage
├╼ Сохранение данных в sessionStorage
├╼ Получение данных из sessionStorage
├╼ Удаление данных из sessionStorage
╰╼ Очистка sessionStorage

📎 Статья

@javascriptv

🖥 Мощная шпаргалка по JavaScript

Затрагиваются все самые важные темы JS, а именно:
├╼ Типы данных
├╼ Продвинутая работа с функциями
├╼ Регулярные выражения
├╼ Свойства объекта, их конфигурация
├╼ Прототипы, наследование
├╼ Классы
├╼ Обработка ошибок
├╼ Промисы, async/await
├╼ Генераторы, продвинутая итерация
╰╼ Модули

Мега удобно, что всё на одной странице, Ctrl + F — и сразу нашёл, что нужно

📎 Шпаргалка

@javascriptv

🖥 Как вернуть значение из события или из функции обратного вызова?

▶️При попытке сделать вот так ничего не получается:

var result = "";

someInput.onchange = function() {
  result = someInput.value;
};

$.get("someapi", function (data) {
  result = data.foo;
});

some.api.call(42, function (data) {
  result = data.bar;
});

someDiv.textContent = result;

Почему-то в someDiv ничего не отображается.


▶️Проблема в том, что в коде нет операции ожидания. Ни подписка на событие, ни AJAX-вызов, ни даже вызов API не ждут поступления данных - а сразу же передают управление дальше. Поэтому строка someDiv.textContent = result; выполняется ДО того, как переменная result получит значение.

Способов сделать это присваивание после получения значения несколько:
— переместить присваивание внутрь
— вынесение присваивания в именованную функцию
— обратные вызовы (callbacks)
— обещания (promises)
— наблюдаемые значения (observables) в Knockout
— наблюдаемые значения (observables) в MobX

📎 Подробнее об этом всём

@javascriptv

Всё, что будет на митапе, останется на митапе 💥

24 апреля в 19:00 встречаемся на Alfa Backend Stories #3 в Москве и онлайн.

Обсудим ИИ и другие инструменты, которые помогают в написании кода:

Андрей Свиридов, ведущий разработчик, поделиться советами о том, как повысить качество кода в приложениях

Дмитрий Сошников, технический руководитель лаборатории генеративного ИИ Школы дизайна НИУ ВШЭ и консультант Yandex Cloud, расскажет о современном искусственном интеллекте в облаке и покажет, как YandexGPT может использоваться разработчиками для решения прикладных задач

Антон Гращенков, в режиме реального времени покажет, как локально установить и настроить ИИ, а также как с его помощью писать код

Обещаем не стирать вам память, если вы придёте в костюме, в образе агентов фильма «Люди в чёрном»

Регистрация

Еще больше полезного в комьюнити: @alfabackend

erid: LjN8Kbsmr
Реклама. АО «Альфа-Банк». ИНН 7728168971.

⚡️ Топ-4 инструмента JavaScript для разработки ИИ

🟡1. AI.JSX
AI.JSX, разработанный Fixie, — это динамический фреймворк, предназначенный для создания разговорных приложений на базе ИИ с использованием JavaScript и JSX, который специально адаптирован для проектов на базе React.
Он выделяется среди инструментов для разработки ИИ благодаря надежной поддержке инжиниринга подсказок и легкой интеграции с внешними API.

🟡2. TensorFlow.js
Являясь JavaScript-адаптацией известной библиотеки TensorFlow, созданной Google, TensorFlow.js предназначена специально для веб- и Node.js-сред, чтобы привнести возможности машинного обучения непосредственно в браузеры и приложения на стороне сервера.
Одним из ключевых преимуществ TensorFlow.js является возможность запуска моделей МО непосредственно в браузере.

🟡3. Brain.js
Brain.js предлагает простой и доступный способ реализации нейронных сетей на JavaScript, подходящий как для браузера, так и для среды Node.js. Ключевое потенциальное применение Brain.js — автоматизация таких процессов, как анализ текста, объединение PDF-документов, преобразование документов, анализ изображений и, в целом, решение любых задач, связанных с обработкой большого количества данных.

🟡4. Tabnine
Tabnine — это помощник по завершению кода на базе ИИ, который значительно улучшает опыт написания кода. В частности, он ускоряет процесс разработки, активно поддерживая целостность кода.
ИИ Tabnine изучает кодовую базу и предлагает соответствующие фрагменты кода, завершения функций и даже целые блоки кода на основе комментариев на естественном языке.

@javascriptv

🖥 5 полезных JS-библиотек для анимации

🟡GSAP (GreenSock Animation Platform)
GSAP даёт возможность анимировать буквально всё, к чему можно получить доступ с помощью JavaScript, включая SVG, общие объекты, холсты и многое другое. Библиотека очень производительная — примерно в 20 раз быстрее, чем jquery. Соответственно, особых лагов в приложении не будет.
GSAP позволяет анимировать любое из свойств CSS одним из нескольких способов. При помощи библиотеки можно указать продолжительность анимации и задать ей определённые свойства.

🟡Anime.js
Ещё одна отличная библиотека, которая предназначена для анимации CSS-свойств, SVG, DOM-атрибутов и JavaScript-объектов. В сжатом виде она весит всего 10 килобайт. Но при этом библиотека очень функциональна, у неё отличная документация и масса возможностей.

🟡React Spring
Крайне полезна для создания анимаций, соответственно, в React-приложениях. Для этого у Spring есть масса хороших инструментов, позволяющих создавать плавные, отзывчивые и высокопроизводительные анимации с достаточно реалистичной физикой.

🟡Three.js
Отличная open-source-библиотека для создания и отображения анимированной 3D-графики в браузерах. Она представляет собой набор инструментов для разработки трёхмерных сцен, объектов, камер и материалов. Плюс для управления освещением, тенями и анимацией. Скрипты Three.js могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL.

🟡Popmotion
Также предоставляет инструменты для анимации — на этот раз интерфейса. Написана библиотека на TypeScript и весит всего 4,5 Кб. Удобна тем, что любую функцию можно отдельно импортировать. Кроме того, она может работать вместе с любыми JavaScript-фреймворками, в браузере и Node.

📎 Подробнее

Кстати, а какие JS-библиотеки для анимации вы регулярно используете? Пишите)

@javascriptv

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

➡️ Попробовать здесь

@javascriptv

🖥 Релиз Bun 1.1

Недавно состоялся релиз Bun 1.1 — среды выполнения JavaScript и TypeScript с возможностью отладки кода и поддержкой популярных веб-фрейворков. Это событие произошло спустя шесть месяцев после выхода первой мажорной версии проекта Bun 1.0. За это время команда проекта сделала более 1700 коммитов, разработчики прилагают все усилия, чтобы сделать Bun более стабильным и более совместимым с Node.js. «Мы исправили более тысячи ошибок, добавили массу новых функций и API, и теперь Bun поддерживает Windows!», — уточнили разработчики сообщества Bun.

Доработки и улучшения в Bun 1.1:

⏩теперь вы можете запустить Bun в Windows 10 и более поздних версиях ОС, Bun для Windows проходит 98% собственного набора тестов для Bun в macOS и Linux от команды проекта;

⏩в проект добавлены более десяти новых функций, доработок API и изменений для избежания снижения производительности при повторной передаче одних и тех же файлов, благодаря чему инструменты командной строки, такие как tsc, работают в 2 раза быстрее, чем в Bun 1.0;

⏩доработан Bun Shell, Bun теперь является кроссплатформенной оболочкой — как bash, но также и для Windows;

⏩исправлены баги и улучшена поддержка для API-интерфейсов Node.js, включая HTTP/2 client и сообщений IPC между Bun и Node.js;

⏩оптимизирован код Bun для поддержки стандартных веб-интерфейсов API;

⏩значительно повышена стабильность в работе и улучшена производительность при установке Bun;

⏩упрощены способы написания, запуска и отладки кода JavaScript и TypeScript;

⏩тайм-аут сети по умолчанию увеличен до 5 минут. Это соответствует настройкам по умолчанию в Google Chrome и должно помочь при соединениях с высокой задержкой.

Над выпуском проекта с открытым исходным кодом Bun 1.1 работали 364 контрибьютора.

📎 Читать подробнее

@javascriptv