Как стать автором
Поиск
Написать публикацию
Обновить
485.68

Веб-разработка *

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Безопасное взаимодействие с API: от ошибок к стабильности

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2K

Каждый frontend-разработчик сталкивался с ошибкой вида TypeError: Cannot read property 'name' of undefined. Это часть целого класса ошибок в JavaScript, возникающих из-за несоответствия фактического формата данных ожидаемому. В этой статье расскажу, как избавиться от подобных проблем и добиться стабильности, внедрив три ключевых шага: API-слой, Backend-for-Frontend (BFF) и проверку с помощью Zod.

Читать далее

Полезные советы при разработке с AI IDE агентами

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.8K

Основано на личном опыте при работе с Cursor AI (и другими платформами)

Используйте по возможности системный промпт. Cursor позволяет иметь .cursorrules файл, в котором можно прописать основные установки по проекту. Пример файла.
Напишите свой и попросите AI улучшить его. Автокомплит его плохо видит, но chat и composer - вполне. По крайней мере, CSS дизайн систему проекта и свои компоненты при генерации кода использует четко.

Читать далее

Log4ts — библиотека, которой не должно быть

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров8.2K

В этой статье я хочу рассказать о моей библиотеке, которой не должно существовать.
Почему её не должно существовать? Потому что функциональность логирования, по моему глубокому убеждению, должна быть в числе первых включена в любой новый язык. 

А разработчики старых языков тоже должны об этом подумать и включить логирование, если это ещё не сделано, в ближайший релиз. 

Библиотека Log4ts вдохновлена идеями Log4J и обеспечивает логирование в программах, написанных на  TypeScript.
Далее в этой статье я расскажу о том, как её установить, использовать и конфигурировать.

А в конце я опишу коротенько другие мои библиотеки, которые тоже не должны были бы существовать.

Читать далее

Книга: «Эффективный TypeScript: 83 способа улучшить код. 2-е изд.»

Время на прочтение5 мин
Количество просмотров4.2K
imageПривет, Хаброжители!

В 2020 году у издательского дома «Питер» вышел перевод «Эффективный TypeScript: 62 способа улучшить код», и книга сразу стала бестселлером. Прошло почти полных четыре года! Многое изменилось с тех пор, в том числе и вышла новая версия TypeScript. Дэн Вандеркам полностью переработал книгу, и мы представляем вам новый «Эффективный TypeScript: 83 способа улучшить код. 2-е изд.». Подробный! Понятный! С неизменным скворцом на обложке!

Но обо всём по порядку.
Читать дальше →

Введение в фикстуры Playwright

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров6K

Привет! Я Даниил, занимаюсь разработкой на Angular в T-Банке и хочу поделиться с вами опытом использования фикстур в Playwright. Я решил поговорить об этом, потому что вместе с ростом функциональности проектов растут и сложности при тестировании, а фикстуры предоставляют удобный способ избавиться от дублирующегося кода и сложных моков.

Эта статья посвящена основам: зачем нужны фикстуры, чем они отличаются друг от друга и какую пользу приносят при тестировании веб-приложений. Мы подробно разберем устройство фикстур, посмотрим, как их создавать и грамотно внедрять в тесты. А еще рассмотрим практические примеры, которые помогут с легкостью применить полученные знания на реальном проекте. Поехали!

Читать далее

Нюансы разработки PWA для Банка Санкт-Петербург от первого лица

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.2K

Классический мобильный банкинг для физлиц - это нативные приложения под iOS и Android. В силу санкционного давления и стремления к оптимизации процесса разработки наш клиент переходил на PWA (Progressive Web Application). Логичный шаг - так делают многие компании, попавшие под ограничения магазинов приложений.

Мы уже подходили к идее создать PWA около двух лет назад и уперлись в огромное количество проблем. Если верить презентациям, все нужные технологии доступны и должны работать очень гладко. Но взаимодействуя с API, на каждому углу мы обо что-то спотыкались. Поддержка PWA зависит от платформы (iOS / Android) и версии браузера. В Android Google Chrome поддерживает большинство нативных функций для PWA, а вот в iOS ограничений в самой системе, связанных с безопасностью, больше.

Сейчас видно, что год от года ограничений у того же Apple становится меньше, устройства у пользователей, а значит и версии ОС, обновляются. В итоге PWA все больше похожи на нативные приложения, а мы взялись таки за разработку. В этой статье рассказываем о том, с чем нам пришлось столкнуться.

Читать далее

Новые возможности ECMAScript — атрибуты импорта и модификаторы шаблона регулярного выражения

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров5.1K



Атрибуты импорта


Фича ECMAScript "Атрибуты импорта" (import attributes) позволяет импортировать артефакты, отличающиеся от модулей JavaScript. В этом разделе мы рассмотрим, как это выглядит и почему может быть полезным.


Атрибуты импорта достигли 4 стадии в октябре 2024 года и, вероятно, станут частью ECMAScript 2025.

Читать дальше →

Зачем нужен шаблон Render props в React?

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров4.2K

Не часто приходится встречать людей, которые понимают зачем он нужен и ещё реже попадаются проекты, в которых его используют. А шаблон-то очень полезный!

В этой статье вы поймёте как он устроен, зачем он нужен и на примерах научитесь его правильно применять.

Читать далее

Мой путь к быстрой и понятной архитектуре, или зачем я выбросил агрегаты из DDD?

Уровень сложностиСредний
Время на прочтение19 мин
Количество просмотров12K

Данная статья затрагивает некоторые аспекты при выборе подхода к проектированию предметной области для сложных корпоративных систем. В ней исследуются причины возникновения классических подходов и их анализ, для возможного улучшения. Это моя первая статья на данную тему.

В начале хочется сказать, что предложенная концепция не пытается претендовать на роль какой-то панацеи и уж тем более на роль единственно верной, она так же имеет ряд своих преимуществ и недостатков. Это скорее попытка переосмыслить опыт, который накопился у меня за несколько лет проектировании корпоративных систем. Материал изложен в виде вопросов и попыток на них ответить.

Читать далее

Переход на новое окружение

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.1K

В этой статье я хочу рассказать историю о переходе на новое окружение – большой задаче, которую пришлось решать, будучи в роли Tech lead команды в одном из продуктов МТС. Статья может быть полезна как «новичкам»-руководителям, которые не знают, как подойти к решению больших и многоэтапных задач, так и просто сочувствующим.

Читать далее

OpenAI Operator: нейросетевой ящик Пандоры или путь в будущее?

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.9K

Как технооптимист и человек, который последние пару лет с удовольствием варился в стартапах, построенных на LLM, я долгое время считал, что нейросети — наше светлое будущее. Но свежий анонс инструмента от OpenAI под названием Operator заставил меня задуматься, а что, если мы уже перегнули палку? На первый взгляд, это удобный сервис, способный автоматизировать рутинные задачи: от поиска лучшей цены на пиццу до оформления заказа. Однако при более глубоком анализе становится очевидно, что его появление уже стало событием, последствия которого затронут всех участников цифрового пространства.

Operator: Серфлю за тебя, бро

Итак, представьте себе: вы сидите на диване, листаете забаненный тикток, а Operator тем временем уже заказал вашу любимую пиццу с соусом BBQ. Удобно? Конечно! Но стоит копнуть чуть глубже — и тут начинаются фанфары Апокалипсиса.

Если вы думаете, что капчи, API‑лимиты или скрытые пароли — это ваш «щит и меч», то Operator буквально смеется вам в лицо. Ваш сайт теперь становится бесплатным шведским столом для тех, кто хочет скачать всю базу цен или «раздеть» вашу CRM за ночь. Хотите, чтобы LinkedIn или Booking наконец‑то дали доступ к нужным данным? Operator это сделает. А вам даже кодить не придётся — спасибо ChatGPT и внештатным ноукодерам.

Читать далее

Веб-приложения будущего: что нужно знать о WebAssembly

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров29K


Часто при разговоре о веб-разработке на ум приходят JavaScript и различные фреймворки. Но что, если бы веб-приложения могли запускаться с той же производительностью, что и нативные, а разработчики могли бы писать их на Rust, C++ или Go? Вот тут-то на сцену и выходит WebAssembly (Wasm) — инструмент, который позволяет взглянуть на веб-разработку иначе. Он открывает возможности для выполнения сложных вычислений, запуска игр, виртуальных машин и приложений для анализа данных прямо в браузере. Все это — с высокой производительностью и кроссплатформенностью, от настольных компьютеров до мобильных устройств.

В этой статье разберемся, как работает WebAssembly, чем он привлекает разработчиков и какие проблемы решает. Вы узнаете, почему его активно поддерживают такие компании, как Google, Unity и Unreal Engine, и какие перспективы открывает Wasm для будущего веб-разработки. Подробности под катом!
Читать дальше →

Пишем идеальную mobile-first галерею

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.8K

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

Читать далее

Ближайшие события

Минималистичная JavaScript песочница

Время на прочтение1 мин
Количество просмотров2.7K

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

Может возникнуть вопрос, сколько символов можно записать в URL и как много кода таким образом можно закодировать? У разных браузеров максимальная длина URL-строки отличается. Но 2000 символов поддерживают все современные браузеры. В такую строку можно закодировать довольно много кода, причем степень сжатия увеличивается с объёмом кода.

Читать далее

Что такое MR-стенды и с чем их едят

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров2.2K

В условиях непрерывной интеграции и высокой скорости разработки фронтенд неизбежно сталкивается с вызовами, связанными с тестированием изменений до их слияния в основную ветку. Любой, даже минимальный апдейт, способен повлиять на пользовательский опыт, поэтому эффективность процессов тестирования становится критически важной. Для нас спасением стали MR-стенды, которые предоставляют возможность изолированного тестирования новой функциональности, минимизируя риски и сокращая время на выявление и исправление ошибок. Рассказываем, как работают MR-стенды, в каких случаях они особенно полезны и как их внедрение повлияло на качество и скорость нашей разработки.

Читать далее

Академический минимум js-разработчика: базовые концепции

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров14K

Приветствую всех! Меня зовут Рома, я разработчик в компании АйТи-Баланс. Хочу поделиться с вами своими знаниями и помочь разобраться в базовых концепциях, которые необходимы каждому новичку в мире JavaScript.

Идея этой статьи возникла из популярного репозитория на GitHub. Я немного адаптировал материал, дополнил его и выделил ключевые аспекты, чтобы сделать информацию максимально доступной и полезной.

Читать далее

Кейс применения useMemo и useCallback в React для оптимизации рендеринга при изменении глобального состояния

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров9.1K

Я занимаюсь фронтенд разработкой на React последние 6 лет (в роли full-stack разработчика). Я знал и слышал, что существуют хуки useCallback и useMemo, которые нужны для оптимизации рендеринга. При этом про их использование я слышал только в теории или на собеседованиях.

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

Читать далее

ИИ для веб-разработки

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров9K


Привет, друзья!


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


Обратите внимание, что я акцентировал внимание на бесплатных решениях для написания кода клиентской части веб-приложений.


Список протестированных инструментов:



Далее я подробнее расскажу о первых трех (Codeium, Devv, V0) и немного о двух следующих за ними (ChatGPT, GPT4All) решениях из представленных в списке, как наиболее "выдающихся" с моей точки зрения. Остальные сервисы (начиная с cursor и ниже) в той или иной степени похожи на codeium и `devv`, но показывают более плохие результаты генерации кода по запросу, исправления ошибок и документирования кода, а также менее удобны в использовании и иногда требуют дополнительных настроек, например, указания ключа OpenAI, установки лишних инструментов (тулкитов), являются условно бесплатными и т.п.

Читать дальше →

Сравнение AI-инструментов для прототипирования: v0, Bolt и Lovable

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров11K

Здравствуйте! Меня зовут Богдан, я являюсь автором телеграм канала про нейросети в телеграме, посчитал эту статью очень интересной для перевода, приятного прочтения

На переполненном рынке инструментов разработки с поддержкой ИИ выделяются три платформы для прототипирования компонентов и приложений: v0 от Vercel, Bolt от StackBlitz и Lovable. В этой статье рассматриваются их практическое применение для начальной загрузки MVP, ограничения и компромиссы с инженерной точки зрения.

Обзор: v0, Bolt, Lovable

Основная задача, которую пытаются решить эти инструменты, не нова: уменьшить трение между идеей и реализацией. Однако их подходы существенно различаются как по архитектуре, так и по исполнению.

v0.dev преуспел в быстром прототипировании пользовательского интерфейса, и несколько компаний используют его для поддержки библиотек компонентов и дополнения своих дизайн-систем. Он хорошо работает с популярными UI-фреймворками, такими как Tailwind или Material-UI. v0 теперь поддерживает генерацию не только UI-компонентов, но и серверных служб, включая интеграцию с базами данных и API-маршрутами, демонстрируя стремление Vercel к разработке полного стека. Хотя эта поддержка полного стека находится на ранней стадии, в будущем она может стать конкурентоспособной.

Я часто предоставляю v0 макет (загружаю изображение или выбираю входные данные Figma), а затем предлагаю интерактивную версию, которая меня устраивает. Он также хорошо работает с чистым текстом, если вам удобно отложить дизайн. Если вам нужна дополнительная поддержка бэкенда, например, БД для хранения данных, v0 также может работать с такими поставщиками, как Prisma, создавая для вас схему.

Читать далее

Роберт, ты мне не дядюшка

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров30K

Роберт Мартин нехило так повлиял на айти‑индустрию. Он придумал принципы SOLID, о которых спрашивают на собесах, пишут статьи на хабре и спорят в комментариях. Он написал книгу «Чистый код» и сделал это словосочетание айтишным мемом. Если зайти на хэдхантер, вбить в поиске слово «чистый», выбрать специализацию «Программист, разработчик» и нажать «Найти», получим больше семисот вакансий. Про чистоту кода и архитектуры спорят на код‑ревью, в комментариях и статьях по всему интернету. Разговоров о чистоте внутри айти‑тусовки бывает так много, словно мы находимся в сообществе клинеров, а не программистов.

Мартин называет себя «дядюшкой Бобом». В своих работах он выступает в образе опытного мудрого и взрослого родственника, который несёт свет и знания таким зелёным и неопытным племянникам. И у него отлично получилось втереться в доверие! Типичный хороший программист‑анальник бессилен перед таким добрым дядей. И я знаю, о чём пишу. Восемь лет назад я сам запоем читал книги дядюшки, а потом до усрачки защищал чистоту кода на код‑ревью. Я на себе почувствовал, насколько Роберт Мартин отличный агитатор и пропагандист. Работая с другими людьми, читая статьи и обсуждения на Хабре и хакерньюс, анализируя требования к вакансиям, я понимаю, что не я один попался на отличную пропаганду от «дядюшки Боба».

Читать далее

Вклад авторов