При разработке веб-приложений не все задумываются о том, сколько памяти потребляет их код. О производительности наших сайтов мы вспоминаем гораздо чаще. К тому же не каждому разработчику интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? «Много» — это вообще сколько? 100 мегабайтов — это много?Меня зовут Антон Непша. Я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и веду Telegram-канал Антон Непша.js. Недавно я выступил на HolyJS с докладом о …
Цель статьи — показать разработчикам, как защитить их JavaScript-код от распространённых уязвимостей и атак. Статья будет охватывать методы защиты, лучшие практики и конкретные инструменты для обеспечения безопасности. ВведениеJavaScript является одним из самых популярных языков программирования для разработки как фронтенда, так и серверной части. Однако его популярность также делает его мишенью для множества атак. Веб-приложения, использующие JavaScript, могут быть уязвимы для различных видов…
End-to-end тесты обеспечивают надёжность приложения, но сами они часто превращаются в боль при поддержке. Даже небольшие изменения в UI могут их ломать, и в результате команда тратит много времени на отладку.Ниже поделюсь способом, как можно оптимизировать процесс исправления Playwright тестов с помощью AI, добавив прямо в HTML-отчёт вот такую кнопку:Fix with AIПоехали!ПланПодход состоит из трёх шагов:Определить упавший тестСгенерировать промпт для исправления с релевантным контекстом: сообщени…
Привет! Меня зовут Руслан. У меня за плечами 9 лет опыта в IT, из которых 5 я работаю на позиции Team Lead. Начинал как сервисный инженер, а сейчас руковожу командой разработки. За это время успешно запустил AR-приложение.В NtechLab я занимаюсь развитием пользовательских интерфейсов для видеоаналитики и руковожу процессами разработки мобильного приложения на Flutter, которое помогает в поиске злоумышленников.Основные задачи, которые можно решить с помощью этого подхода:Разработка в условиях отс…
Привет, друзья! В праздники я провел небольшое исследование представленных сегодня на рынке бесплатных инструментов с участием "искусственного интеллекта" для помощи в веб-разработке, результатами которого хочу с вами поделиться, авось кому-нибудь пригодится. Обратите внимание, что я акцентировал внимание на бесплатных решениях для написания кода клиентской части веб-приложений. Список протестированных инструментов: Сodeium Devv_ V0 ChatGPT GPT4All Cursor OpenHands Aider Cody Tabnine…
В комментах к статье "Синглтон - корень всех зол", который вообще-то про паттерн проектирования, я высказал мысль, что в функциональном программировании "все функции - синглтоны" (это уже в смысле lifestyle - больше одной функции на приложение не нужно). Тут же мне более опытные коллеги насовали в панамку, что "функции не синглтоны, потому что существуют замыкания". Я, конечно, "сварщик не настоящий" - в ФП серьёзно никогда не игрался, но основные идеи вроде как …
Не так давно стала задача создать персональный чат-бот ассистент для компании занимающейся разработкой ПО. Система должна была иметь как Backend, отвечающий за работу с локальной нейросетью, так и простой FrontEnd, виджет на JavaScript, который можно подключить на любой из страниц компании. Ресурсов описывающих работу RAG-систем полно, однако руководств, которые расскажут и поэтапно проведут разработчика через все необходимые шаги я не нашел. Тем самым, постараюсь восполнить пробел в данной ст…
Манипулирование деревом DOM, это альфа и омега любого фронтенд-разработчика, а это не возможно без селекторов позволяющих находить HTML элементы. Давайте подробно разберёмся как они работают.Основных методов селекторов в JavaScript всего 2 и оба они являются методами классов Document и Element:querySelector() - принимает строку с селектором в качестве аргумента и возвращает первое совпадение с ним или null, если ничего не найдено.querySelectorAll() - точно также принимает аргументом, строку с с…
Недавно, работая с компонентом ввода номера телефона в форме регистрации, я столкнулся с весьма неочевидной особенностью работы различных обработчиков событий. Связано это непосредственно с onChange, onPaste и onInput. Мне пришлось провести достаточно глубокий ресерч, чтобы разобраться в особенностях, которые я встретил. Начнем по порядку.Кейсы пользовательского взаимодействияДля начала разберемся, что же это был за инпут (потому что для обычного использования инпута в базовых ситуациях и видах…