Каждый frontend-разработчик сталкивался с ошибкой вида TypeError: Cannot read property 'name' of undefined. Это часть целого класса ошибок в JavaScript, возникающих из-за несоответствия фактического формата данных ожидаемому. В этой статье расскажу, как избавиться от подобных проблем и добиться стабильности, внедрив три ключевых шага: API-слой, Backend-for-Frontend (BFF) и проверку с помощью Zod.
Основано на личном опыте при работе с Cursor AI (и другими платформами)
Используйте по возможности системный промпт. Cursor позволяет иметь .cursorrules файл, в котором можно прописать основные установки по проекту. Пример файла.
Напишите свой и попросите AI улучшить его. Автокомплит его плохо видит, но chat и composer - вполне. По крайней мере, CSS дизайн систему проекта и свои компоненты при генерации кода использует четко.
В этой статье я хочу рассказать о моей библиотеке, которой не должно существовать.
Почему её не должно существовать? Потому что функциональность логирования, по моему глубокому убеждению, должна быть в числе первых включена в любой новый язык.
А разработчики старых языков тоже должны об этом подумать и включить логирование, если это ещё не сделано, в ближайший релиз.
Библиотека Log4ts вдохновлена идеями Log4J и обеспечивает логирование в программах, написанных на TypeScript.
Далее в этой статье я расскажу о том, как её установить, использовать и конфигурировать.
А в конце я опишу коротенько другие мои библиотеки, которые тоже не должны были бы существовать.
Привет, Хаброжители!
Привет! Я Даниил, занимаюсь разработкой на Angular в T-Банке и хочу поделиться с вами опытом использования фикстур в Playwright. Я решил поговорить об этом, потому что вместе с ростом функциональности проектов растут и сложности при тестировании, а фикстуры предоставляют удобный способ избавиться от дублирующегося кода и сложных моков.
Эта статья посвящена основам: зачем нужны фикстуры, чем они отличаются друг от друга и какую пользу приносят при тестировании веб-приложений. Мы подробно разберем устройство фикстур, посмотрим, как их создавать и грамотно внедрять в тесты. А еще рассмотрим практические примеры, которые помогут с легкостью применить полученные знания на реальном проекте. Поехали!
Классический мобильный банкинг для физлиц - это нативные приложения под iOS и Android. В силу санкционного давления и стремления к оптимизации процесса разработки наш клиент переходил на PWA (Progressive Web Application). Логичный шаг - так делают многие компании, попавшие под ограничения магазинов приложений.
Мы уже подходили к идее создать PWA около двух лет назад и уперлись в огромное количество проблем. Если верить презентациям, все нужные технологии доступны и должны работать очень гладко. Но взаимодействуя с API, на каждому углу мы обо что-то спотыкались. Поддержка PWA зависит от платформы (iOS / Android) и версии браузера. В Android Google Chrome поддерживает большинство нативных функций для PWA, а вот в iOS ограничений в самой системе, связанных с безопасностью, больше.
Сейчас видно, что год от года ограничений у того же Apple становится меньше, устройства у пользователей, а значит и версии ОС, обновляются. В итоге PWA все больше похожи на нативные приложения, а мы взялись таки за разработку. В этой статье рассказываем о том, с чем нам пришлось столкнуться.
Фича ECMAScript "Атрибуты импорта" (import attributes) позволяет импортировать артефакты, отличающиеся от модулей JavaScript. В этом разделе мы рассмотрим, как это выглядит и почему может быть полезным.
Атрибуты импорта достигли 4 стадии в октябре 2024 года и, вероятно, станут частью ECMAScript 2025.
Не часто приходится встречать людей, которые понимают зачем он нужен и ещё реже попадаются проекты, в которых его используют. А шаблон-то очень полезный!
В этой статье вы поймёте как он устроен, зачем он нужен и на примерах научитесь его правильно применять.
В данной статье рассматриваются некоторые аспекты выбора архитектурных решений для проектирования монолитных систем или отдельных крупных сервисов в условиях сложной предметной области. В статье исследуются причины возникновения классических подходов и их анализ, для возможного улучшения.
В начале хочется сказать, что предложенная концепция не пытается претендовать на роль какой-то панацеи и уж тем более на роль единственно верной, она так же имеет ряд своих преимуществ и недостатков. Это скорее попытка переосмыслить опыт, который накопился у меня за несколько лет проектировании корпоративных систем. Материал изложен в виде вопросов и попыток на них ответить.
В этой статье я хочу рассказать историю о переходе на новое окружение – большой задаче, которую пришлось решать, будучи в роли Tech lead команды в одном из продуктов МТС. Статья может быть полезна как «новичкам»-руководителям, которые не знают, как подойти к решению больших и многоэтапных задач, так и просто сочувствующим.
Как технооптимист и человек, который последние пару лет с удовольствием варился в стартапах, построенных на LLM, я долгое время считал, что нейросети — наше светлое будущее. Но свежий анонс инструмента от OpenAI под названием Operator заставил меня задуматься, а что, если мы уже перегнули палку? На первый взгляд, это удобный сервис, способный автоматизировать рутинные задачи: от поиска лучшей цены на пиццу до оформления заказа. Однако при более глубоком анализе становится очевидно, что его появление уже стало событием, последствия которого затронут всех участников цифрового пространства.
Operator: Серфлю за тебя, бро
Итак, представьте себе: вы сидите на диване, листаете забаненный тикток, а Operator тем временем уже заказал вашу любимую пиццу с соусом BBQ. Удобно? Конечно! Но стоит копнуть чуть глубже — и тут начинаются фанфары Апокалипсиса.
Если вы думаете, что капчи, API‑лимиты или скрытые пароли — это ваш «щит и меч», то Operator буквально смеется вам в лицо. Ваш сайт теперь становится бесплатным шведским столом для тех, кто хочет скачать всю базу цен или «раздеть» вашу CRM за ночь. Хотите, чтобы LinkedIn или Booking наконец‑то дали доступ к нужным данным? Operator это сделает. А вам даже кодить не придётся — спасибо ChatGPT и внештатным ноукодерам.
Привет, меня зовут Артур, и я люблю плавные интерфейсы, CSS и современные подходы. Сегодня хочу поговорить с вами о задаче, которая настигает, пожалуй, каждого фронтенд разработчика: о создании галереи.
Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.
Может возникнуть вопрос, сколько символов можно записать в URL и как много кода таким образом можно закодировать? У разных браузеров максимальная длина URL-строки отличается. Но 2000 символов поддерживают все современные браузеры. В такую строку можно закодировать довольно много кода, причем степень сжатия увеличивается с объёмом кода.
В условиях непрерывной интеграции и высокой скорости разработки фронтенд неизбежно сталкивается с вызовами, связанными с тестированием изменений до их слияния в основную ветку. Любой, даже минимальный апдейт, способен повлиять на пользовательский опыт, поэтому эффективность процессов тестирования становится критически важной. Для нас спасением стали MR-стенды, которые предоставляют возможность изолированного тестирования новой функциональности, минимизируя риски и сокращая время на выявление и исправление ошибок. Рассказываем, как работают MR-стенды, в каких случаях они особенно полезны и как их внедрение повлияло на качество и скорость нашей разработки.
Приветствую всех! Меня зовут Рома, я разработчик в компании АйТи-Баланс. Хочу поделиться с вами своими знаниями и помочь разобраться в базовых концепциях, которые необходимы каждому новичку в мире JavaScript.
Идея этой статьи возникла из популярного репозитория на GitHub. Я немного адаптировал материал, дополнил его и выделил ключевые аспекты, чтобы сделать информацию максимально доступной и полезной.
Я занимаюсь фронтенд разработкой на React последние 6 лет (в роли full-stack разработчика). Я знал и слышал, что существуют хуки useCallback и useMemo, которые нужны для оптимизации рендеринга. При этом про их использование я слышал только в теории или на собеседованиях.
И вот мы в проекте столкнулись с задачей, когда приложение начинает тормозить и его нужно оптимизировать. В решении нашей проблемы эти два хука дали необходимый эффект, который действительно помог ускорить рендеринг. Об этом расскажу ниже.
Привет, друзья!
В праздники я провел небольшое исследование представленных сегодня на рынке бесплатных инструментов с участием "искусственного интеллекта" для помощи в веб-разработке, результатами которого хочу с вами поделиться, авось кому-нибудь пригодится.
Обратите внимание, что я акцентировал внимание на бесплатных решениях для написания кода клиентской части веб-приложений.
Список протестированных инструментов:
Далее я подробнее расскажу о первых трех (Codeium, Devv, V0) и немного о двух следующих за ними (ChatGPT, GPT4All) решениях из представленных в списке, как наиболее "выдающихся" с моей точки зрения. Остальные сервисы (начиная с cursor и ниже) в той или иной степени похожи на codeium и `devv`, но показывают более плохие результаты генерации кода по запросу, исправления ошибок и документирования кода, а также менее удобны в использовании и иногда требуют дополнительных настроек, например, указания ключа OpenAI, установки лишних инструментов (тулкитов), являются условно бесплатными и т.п.
Здравствуйте! Меня зовут Богдан, я являюсь автором телеграм канала про нейросети в телеграме, посчитал эту статью очень интересной для перевода, приятного прочтения
На переполненном рынке инструментов разработки с поддержкой ИИ выделяются три платформы для прототипирования компонентов и приложений: v0 от Vercel, Bolt от StackBlitz и Lovable. В этой статье рассматриваются их практическое применение для начальной загрузки MVP, ограничения и компромиссы с инженерной точки зрения.
Обзор: v0, Bolt, Lovable
Основная задача, которую пытаются решить эти инструменты, не нова: уменьшить трение между идеей и реализацией. Однако их подходы существенно различаются как по архитектуре, так и по исполнению.
v0.dev преуспел в быстром прототипировании пользовательского интерфейса, и несколько компаний используют его для поддержки библиотек компонентов и дополнения своих дизайн-систем. Он хорошо работает с популярными UI-фреймворками, такими как Tailwind или Material-UI. v0 теперь поддерживает генерацию не только UI-компонентов, но и серверных служб, включая интеграцию с базами данных и API-маршрутами, демонстрируя стремление Vercel к разработке полного стека. Хотя эта поддержка полного стека находится на ранней стадии, в будущем она может стать конкурентоспособной.
Я часто предоставляю v0 макет (загружаю изображение или выбираю входные данные Figma), а затем предлагаю интерактивную версию, которая меня устраивает. Он также хорошо работает с чистым текстом, если вам удобно отложить дизайн. Если вам нужна дополнительная поддержка бэкенда, например, БД для хранения данных, v0 также может работать с такими поставщиками, как Prisma, создавая для вас схему.
Роберт Мартин нехило так повлиял на айти‑индустрию. Он придумал принципы SOLID, о которых спрашивают на собесах, пишут статьи на хабре и спорят в комментариях. Он написал книгу «Чистый код» и сделал это словосочетание айтишным мемом. Если зайти на хэдхантер, вбить в поиске слово «чистый», выбрать специализацию «Программист, разработчик» и нажать «Найти», получим больше семисот вакансий. Про чистоту кода и архитектуры спорят на код‑ревью, в комментариях и статьях по всему интернету. Разговоров о чистоте внутри айти‑тусовки бывает так много, словно мы находимся в сообществе клинеров, а не программистов.
Мартин называет себя «дядюшкой Бобом». В своих работах он выступает в образе опытного мудрого и взрослого родственника, который несёт свет и знания таким зелёным и неопытным племянникам. И у него отлично получилось втереться в доверие! Типичный хороший программист‑анальник бессилен перед таким добрым дядей. И я знаю, о чём пишу. Восемь лет назад я сам запоем читал книги дядюшки, а потом до усрачки защищал чистоту кода на код‑ревью. Я на себе почувствовал, насколько Роберт Мартин отличный агитатор и пропагандист. Работая с другими людьми, читая статьи и обсуждения на Хабре и хакерньюс, анализируя требования к вакансиям, я понимаю, что не я один попался на отличную пропаганду от «дядюшки Боба».
