JavaScript *

В современной разработке приложений важным аспектом является способность быстро и эффективно создавать прототипы и демонстрационные версии. В этом посте мы расскажем о нашем опыте использования моков (mocks) для эмуляции бэкенда на примере фронтенд-проекта. Мы поделимся ключевыми проблемами, с которыми столкнулись, и решениями, которые помогли нам ускорить разработку, улучшить стабильность и обеспечить гибкость в работе с данными. Вы узнаете, как мы использовали Mock Service Worker (MSW) и Vite-плагин для создания изолированного и удобного окружения, а также какие преимущества это принесло нашей команде.

В статье расскажу, как с помощью AI ускорить исправление упавших Playwright тестов. В HTML-отчёт добавляем кнопку "Fix with AI", которая генерирует промпт под конкретный тест. Копируем промпт, вставляем в ChatGPT и мгновенно получаем рекомендации по исправлению.

Цель статьи — показать разработчикам, как защитить их JavaScript-код от распространённых уязвимостей и атак. Статья будет охватывать методы защиты, лучшие практики и конкретные инструменты для обеспечения безопасности.

localStorage и sessionStorage сильно ограничены в размере - всего 5 МБ, а использование IndexedDB для обхода этого ограничения не всегда является удобным из-за сложного API.

localForage решает сразу обе проблемы!

Недавно, работая с компонентом ввода номера телефона в форме регистрации, я столкнулся с весьма неочевидной особенностью работы различных обработчиков событий. Связано это непосредственно с onChange, onPaste и onInput. Мне пришлось провести достаточно глубокий ресерч, чтобы разобраться в особенностях, которые я встретил. Начнем по порядку.

Манипулирование деревом DOM, это альфа и омега любого фронтенд-разработчика, а это не возможно без селекторов позволяющих находить HTML элементы. Давайте подробно разберёмся как они работают.

Основных методов селекторов в JavaScript всего 2 и оба они являются методами классов Document и Element:

Текущее руководство по стилю было создано ещё в 2016 году, когда только появился переработанный Angular v2.0. Как пишет Джереми Эльбурн (разработчик Angular с 2012 года и технический руководитель проекта), многое изменилось, пора изменить и принятый стиль разработки, поэтому предложен RFC:

Привет, Хабр! Меня зовут Артём Елизаров, я руковожу отделом разработки фронтальных решений в R-Style Softlab. Значительную часть рабочего времени я посвящаю подбору специалистов и в общей сложности занимаюсь этим уже более 5 лет. В этой статье я хотел бы поделиться опытом проведения собеседований, их спецификой и дать рекомендации тем, кто ищет работу фронтенд-разработчиком. 

Привет! Я Света, фронтенд-разработчик в отделе рекламных спецпроектов в KTS.

Не так давно при работе над одной из задач мне потребовалось разобраться, какие существуют библиотеки для работы с AR в вебе. Я провела небольшое исследование, покопалась в документации, отыскала кучу примеров и решила, что этим материалом будет полезно поделиться.

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

Если вы ищете способы внедрить AR в свои проекты, эта статья поможет вам сориентироваться и составить общее представление о возможностях соответствующих библиотек.

В этой статье мы покажем простое решение, которое поможет отслеживать финансовые показатели своего заведения, работающего на R-Keeper. Материал даст представление о том, как может выглядеть серверная интеграция с внешними сервисами, и, надеемся, натолкнёт на новые мысли.

Привет, коллеги! Меня зовут Санжар, я бэкенд-разработчик с опытом в настройке серверной инфраструктуры и контейнеризации для средних проектов. Сегодня хочу поделиться схемой архитектуры, которую я часто использую в своих проектах. Это не руководство к действию и не утверждение, что так нужно делать. Скорее, это возможность для меня получить обратную связь и узнать, как сделать лучше. Так что прошу вас, пишите свои идеи и советы в комментариях — это очень важно для меня. 🙂

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

Давай начнем по порядку. Проект написан на NextJs, TS, TailwindCSS. И есть на сайте анимационная кнопка, которые при скролле красиво появляется и при клике открывает модалку.

Раз в несколько лет возвращаюсь к задаче создания алгоритма для наиболее вероятного прогноза на основании ошибок предыдущих прогнозов. Кажется, поиск истины завершён успешно... Или нет? (демо web приложения в конце)

Предложенный вариант алгоритма определения наиболее предсказуемого "вранья" не претендует на абсолютную истину, но имеет под собой вполне устойчивый фундамент

Все дизайнеры обожают сайт awwwards – площадку с платной публикацией, где собраны самые классные работы в сфере веб-дизайна. А поскольку мы душнилы по части performance, мы собрали почти 5000 сайтов, определили их фреймворк и проверили производительность в Lighthouse. Также собрали статистику по их авторам. И вот что получилось.

Автор: Денис Закусило

Приветствую всех неравнодушных! Это заключительная статья цикла о переходе от модульной архитектуры к сервисам.

[Записки тимлида] Битрикс: от модулей к сервисам

[Записки тимлида] Битрикс: от модулей к сервисам 2

Сегодня мы рассмотрим организацию структуры frontend стороны приложения.

У меня появилась задача в проекте: перевести личный кабинет пользователя на русский и английский языки (в перспективе и на другие языки). При этом, определять язык пользователя при первом заходе в ЛК и запоминать язык при перезагрузке страницы. Разумеется, всё это с типизацией файлов с переводами (чтобы нельзя было забыть добавить любое из полей).

Как я это делал — расскажу в статье.

Игра на сферической (полиэдрической) доске: JavaScript, jQuery, THREE.js.
Краткая информация об истории создания, правилах и интерфейсе.

Привет!

Хочу поделиться инструментом для визуализации данных Мосбиржи, Nasdaq, NYSE и AMEX. Графики можно посмотреть на странице finmap.org. Сейчас я занимаюсь этим проектом один, а планов много, например, добавить данные торгов стран Европы, Азии и Латинской Америки. Исходный код опубликован на GitHub. Очень надеюсь, что хабр-эффект всё ещё работает и здесь найдутся те, кто готов присоединиться к разработке. Пожалуйста, расскажите о проекте друзьям и знакомым.

Данные торгов представлены в виде treemap и histogram. В карточке каждой компании отображается краткое описание и новостная лента. В будущем я планирую добавить ленту микроблогов.

Недавно я познакомился с сервисом Strapi и почти сразу получил задачу "Настроить отправку файлов в S3 из Strapi". Это мой первый опыт в работе со Strapi, но не первое подключение к S3.

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

Всем привет! Думаю, все уже знают, что в телеге уже год как бум мини-аппов, все тапали хомяка. Подавляющее большинство из них связаны с криптой. Многие хотят внутри приложения давать своим пользователям кошелёк (EVM, TON или Solana, etc.), как некий виртуальный счёт, который можно пополнить, выводить средства, и, самое главное, дергать смарт-контракты.

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

Сложное и неудобное решение - кошелёк, который юзер должен записать на бумажке и следить за его безопасностью сам. В этом случае, вам лучше вообще использовать WalletConnect или не делать миниапп вообще. Правда, в этом случае UI миниаппа превращается в ад, где юзер должен подтверждать каждое действие во внешнем приложении.

Мы искали для нашего миниаппа вариант, который бы давал безопасность некастодиального кошелька, но с максимально гладким UX/UI. И нашли.

В этой статье я хочу сделать обзор TMA Wallet (npm-пакет, сайт, github) - opensource некастодиального multi-party кошелька, подходящего для любых чейнов, работающего на базе недавно появившееся API Telegram Cloud Storage.