JavaScript заметки

Использование Fetch API для загрузки и отображения данных в формате JSON

Fetch API предоставляет простой интерфейс для выполнения HTTP-запросов, и в данном примере, он используется для загрузки данных в формате JSON.

#полезное

Как появились веб-пуши Apple в Тинькофф

Всем привет! Мы — архитектор разработки публичных веб-приложений Борис и разработчик системы-шлюза отправки нотификаций Данила. Расскажем о том, как создавались веб-пуши iOS в Тинькофф, как их настраивали и с какими проблемами столкнулись в процессе разработки.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование Proxy для создания виртуальных объектов

Proxy позволяет перехватывать и изменять поведение операций с объектами.

#полезное

План «Барбаросса» от Vue.js

После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Работа с IndexedDB для хранения данных в браузере

IndexedDB предоставляет возможность хранить большие объемы структурированных данных в браузере.

#полезное

По заветам кота Вжуха: превращаем веб-приложение в сервис на платформе VK Mini Apps

VK Mini Apps — это платформа для создания мини-приложений, работающих внутри ВКонтакте. На ней можно создать продукт любого масштаба — от лендинга до сложного сервиса с множеством функций. А ещё вы можете портировать на площадку ваше веб-приложение, чтобы получить доступ к огромной аудитории VK Mini Apps и новым возможностям монетизации. В этой статье поделюсь пошаговой инструкцией, как превратить в сервис любое веб-приложение — на примере планировщика задач.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование WebGL для создания 3D-графики в веб-приложениях

WebGL предоставляет API для создания интерактивной 3D-графики в веб-приложениях, и библиотека Three.js упрощает этот процесс.

#полезное

Server-side rendering и практики работы с запросами

Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик, ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на web-performance и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Работа с WebRTC для создания видеочата в браузере

WebRTC позволяет веб-приложениям реализовывать видеочаты и аудиоконференции в реальном времени между браузерами.

#полезное

Добавление WebAuthn в веб-приложение

В этой статье мы научимся добавлять WebAuthn в веб‑приложения со стороны frontend‑разработчика. WebAuthn представляет собой новый метод аутентификации, который обеспечивает более высокий уровень безопасности, заменяя устаревшие пароли и SMS‑подтверждения на аутентификацию на основе публичных ключей. Это не только повышает защиту от несанкционированного доступа, но и упрощает вход для пользователей. Например VK и другие компании уже переходят на подобные технологии, отходя от обычных паролей.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Работа с Intersection Observer для отслеживания видимости элементов

Intersection Observer предоставляет эффективный способ отслеживания видимости элементов на веб-странице и реагирования на изменения этой видимости.

#полезное

Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере

В прошлых статьях и на форумах я получил несколько дельных советов связанных с визуализацией результатов. От агрегированных данных теперь перейдем к детальной инфомации для каждого жилого здания. Продолжим анализировать географию столицы.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Работа с объектом FormData для отправки данных формы

Объект FormData упрощает сбор и отправку данных формы на сервер.

#полезное

React + Three.js. Создаём собственный 3D шутер

В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня мы можем создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Одним из инструментов, который делает это возможным, является библиотека React Three Fiber - мощное средство для создания 3D-графики на основе Three.js с использованием технологии React.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование sessionStorage для временного хранения данных на клиенте

sessionStorage предоставляет временное хранение данных на стороне клиента, доступное только в течение текущего сеанса работы с браузером.

#полезное

Кулинарный гид по Vue.js: всё о props

В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. 

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование метода bind() для установки контекста функции

Метод bind() используется для создания новой функции с определенным контекстом выполнения.

#полезное

Удобные формы для Vue 3

Механизм реактивности VueJS и нововведение в направлении provide/inject позволяют разработчикам экспериментировать и реализовывать новые интересные решения. В этой статье я расскажу о жизненном цикле разработки системы для работы с формами, которую я запихнул в отдельную библиотеку.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Использование Event Delegation для обработки событий

Event Delegation позволяет обрабатывать события на родительском элементе, вместо назначения обработчиков на каждый дочерний элемент отдельно.

#полезное

Как сгенерировать безопасный, типизированный Node.js API с использованием Prisma, TypeGraphQL и graphql-query-purifier

Создание эффективного Node.js API, обеспечивающего безопасность данных и типобезопасность, может быть сложной задачей. Это руководство демонстрирует процесс с использованием Prisma, TypeGraphQL и graphql-query-purifier.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью