Обновить
353.73

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

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

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

Мультирегиональное SEO: как сделать сайт видимым по всей стране (и не только)

Время на прочтение8 мин
Охват и читатели9.9K

....................................................................................................................

Привет, Хабр! Я — Марина, специалист по продвижению сайтов в Selectel. Под катом рассказываю, как работает региональное продвижение, а также на что обратить внимание, чтобы поисковики показывали ваш сайт в разных регионах или странах.

Разобраться

Steroids UI Kit — разделение бизнес-логики и отображения React-компонентов

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

Это вторая статья из цикла про наш фреймворк Steroids, в которой мы расскажем об архитектурном подходе к построению UI-компонентов. Если вы ещё не читали первую статью — начните с неё. В ней мы объясняем, что такое Steroids и какие задачи он решает.

Читать далее

Синдром бессмысленного спринта

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

Когда задачи есть, а движения — нет

Команда работает.
Задачи в трекере стоят.
Стендапы идут, код пишется, обсуждения кипят.

А результата всё нет.
Нет чувства прогресса, нет ощущения, что продукт становится ближе к релизу.
Итерации проходят одна за другой — а продукт будто топчется на месте.

Читать далее

Книга: «Грокаем безопасность веб-приложений»

Время на прочтение2 мин
Охват и читатели11K

Привет, Хаброжители! Безопасность приложений — приоритетная задача для веб-разработчиков. Вы работаете над интерфейсом фронтенд-фреймворка? Разрабатываете серверную часть? В любом случае вам придется разбираться с угрозами и уязвимостями и понимать, как закрыть, дырки через которые хотят пролезть черные хакеры.

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

Читать далее

Что нового на Kapi.bar за год: фичи, правки и немного философии

Время на прочтение7 мин
Охват и читатели5.3K

Очень часто проекты, в разработку которых на самом старте были вложены большие суммы, оказываются никому не нужными и исчезают в бесчисленных закоулках и в бездонных глубинах интернета. Но порой, проекты, которые изначально делаешь «на коленке», неожиданно вырастают в нечто большее — в уютное, живое сообщество, где важнее не продажи, метрики, трафик и не лайки, а возможность делиться, обсуждать и просто быть собой. Именно таким проектом за последний год стала наша Капибара.

Kapi.bar появился как независимая платформа. Без бюджета, без офисов, без KPI. Мы просто хотели сделать альтернативу известному ресурсу, которой будет не просто приятно пользоваться, а где ты можешь напрямую влиять на то, какой контент становится популярным, а какой нет. Вы наверное помните, что последней каплей, переполнившей чашу нашего терпения стало полное уничтожение честной рейтинговой системы на том ресурсе, где мы все ранее зависали и за этот год оказалось, что нас таких — не один и не два, нас целое сообщество. И это невероятно вдохновляет!

За этот год в Kapi.bar многое поменялось. Мы добавили десятки фич, вычистили не один баг (правда ранее сами‑же их и допустили, но кто не ошибается), наконец начали разбираться с SEO, провели тихую, но упорную работу над повышением стабильности системы. И, что немаловажно — начали глубоко размышлять над философией Капибары и формулировать, кто мы вообще такие, для чего всё это и почему эта история — не только про код.

Эта статья — не рекламный релиз и не набор bullet‑поинтов из changelog. Мы просто хотим рассказать, что произошло за год. Что стало лучше, что сломалось и было починено. И да, немного про поисковики тоже будет — с ними, как оказалось, тоже можно подружиться.

Читать далее

Как я улучшил свой промпт для генерации кода в OpenAI 4.1 — простой трюк, который РАБОТАЕТ

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели16K

Несмотря на обилие моделей (а я время от времени использую четыре топовые), всё-таки на стыке моих технологий GPT-4.1 даёт лучший результат по сравнению с другими.

 ... я каждый раз сохраняю эти компоненты в файл Google Документы. И каждый раз при генерации новой функции или целого компонента я "вскармливаю" текст из этого документа именно в формате текста. В общем, эта штука работает хорошо.

Пожалуйста, объясни как ты понял мою проблему, почему я считаю что это важно, как ты собираешься это решать и что будет правильным решением.

Читать далее

Команда боится принимать решения

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

Или как культура страха убивает продукт

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

Читать далее

Как @empty в Angular упрощает работу с пустыми коллекциями

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели2.1K

Пустые состояния (Empty States) — это незаметные, но критически важные элементы интерфейса. Что видит пользователь, когда список задач пуст, поиск не дал результатов или дашборд ещё не содержит данных? Пустой экран? Бесполезный спиннер? Или продуманное сообщение, которое помогает сориентироваться?

С появлением декларативного управления потоками (declarative control flow) в Angular обработка пустых состояний стала проще и элегантнее. Одна из ключевых возможностей — директива @empty, которая делает код чище, а интерфейс — дружелюбнее.

Давайте разберёмся, как это работает.

Читать далее

Машина Слонимского для умножения (1844 г.): новые результаты и веб-модель

Уровень сложностиПростой
Время на прочтение1 мин
Охват и читатели1.5K

На Хабре была статья https://habr.com/ru/articles/232255/, в которой говорилось о приборе для умножения – «машине Слонимского».

Читать далее

OWASP Top 10 API: Полный разбор всех угроз и как от них защититься

Уровень сложностиСредний
Время на прочтение17 мин
Охват и читатели7.7K

API — это «кровеносная система» современного веба, но без должной защиты они становятся лёгкой добычей для хакеров. OWASP выделил Топ-10 уязвимостей API, которые чаще всего эксплуатируют злоумышленники. Разберём ключевые риски и методы защиты.

Читать далее

Сердце Фреймворка: Философия и Практика Dependency Injection в Angular

Уровень сложностиСложный
Время на прочтение18 мин
Охват и читатели3.8K

Dependency Injection (DI) один из столпов, на которых держится фреймворк Angular. Каждый разработчик, так или иначе, сталкивается с ним с первого дня: запрашивает сервисы в конструкторе, добавляет providedIn: 'root' и видит, как «магия» работает. Но именно в этом и кроется ловушка.

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

Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.

Мы пройдем путь от фундаментальных принципов инверсии контроля (IoC) до тонкостей иерархического инжектора. Мы разберем на атомы все стратегии предоставления зависимостей, научимся управлять их жизненным циклом и областью видимости. Мы изучим продвинутые паттерны с использованием InjectionToken и multi-провайдеров и поймем, как современная функция inject() меняет подход к композиции логики.

Перейти к полному анализу

Разработка 3D-аудиовизуализатора с помощью Three.js, GSAP и Web Audio API

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели2.3K

Визуализатор звука, в котором светящийся 3D-шар пульсирует и меняет цвет в такт музыке, а перетаскиваемые панели GSAP плавно перемещаются вокруг него по инерции.

Демо

Код

Звук — это волны, зрение — это волны, которые мы видим. Я всегда стремлюсь поймать момент, когда эти волны накладываются друг на друга. Для недавнего задания от сообщества Webflow и GSAP, посвященного плагинам GSAP Draggable и Inertia, я решил развить идею, создав футуристический визуализатор, реагирующий на звук. Идея заключалась в создании научно-фантастического интерфейса "детектора аномалий", который реагирует на музыку в реальном времени, совмещая атмосферные визуальные эффекты со звуком.

Поехали!

Как устроены цифровые сертификаты

Уровень сложностиСредний
Время на прочтение33 мин
Охват и читатели6.2K

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

Читать далее

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

AI-генератор сайтов на ChatGPT и Next.js 15: Создаем SEO-оптимизированные страницы с нуля (аналог v0)

Уровень сложностиСредний
Время на прочтение62 мин
Охват и читатели7.7K

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

На практике это сводится к простому циклу: вы отправляете промпт в ChatGPT, получаете в ответ конфигурационный файл, загружаете его в приложение и одной командой сборки создаёте готовые, стилизованные страницы. Всё это уже настроено в стартовом шаблоне, включая авторизацию и многоязычный AI-чат.

Или используйте полную автоматизацию так же как в v0, но с прицелом под крупные корпоративные интеграции.

Читать далее

Тестируем веб приложение на Go

Время на прочтение6 мин
Охват и читатели2.6K

Тестирование — важнейший аспект разработки программного обеспечения, особенно для веб‑приложений. В Go тестирование встроено в язык и предоставляет мощные инструменты для написания и выполнения тестов. В этой статье мы рассмотрим поток веб-приложения на Go, как писать модульные тесты для каждого слоя приложения.

Читать далее

Интернет против капчи: есть ли будущее у тестов вроде «найдите все картинки с велосипедами»?

Время на прочтение7 мин
Охват и читатели1.6K

Капчи, которые должны «отделять» людей от ботов, стали настоящей головной болью для пользователей. Порой приходится не выбирать светофор или «зебру», а решать сложные головоломки или математические примеры, многие из которых ставят в тупик — а вот боты, кажется, щёлкают их как орешки. Мы в beeline cloud решили разобраться в теме.

Читать далее

Когда фидбэк может уничтожить продукт

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели713

Как попытки быть ближе к пользователю иногда отдаляют от цели

В одномстартапе мы решили сделать по уму — активно собирать и учитывать обратную связь.
Видим комментарий: «Сделайте поиск попроще» — переделываем.
Пишут: «Темная тема нужна обязательно!» — добавл яем.
...

Читать далее

Разработка с учетом паттернов WAI ARIA

Время на прочтение9 мин
Охват и читатели2.6K

Сегодня веб-приложения стали сложными интерактивными системами, напоминающими полноценные десктоп приложения. Однако за красивыми интерфейсами и богатым функционалом часто скрывается важный аспект, которому уделяется недостаточно внимания — доступность (accessibility). Для миллионов пользователей с ограниченными возможностями это означает, что они не могут полноценно взаимодействовать с сайтом, выполнить базовые действия или получить информацию.

Проблема особенно ярко выражена в современных одностраничных приложениях (SPA), кастомных компонентах, модальных окнах и прочих динамических UI-решениях, которые не учитывают, как с ними будут работать вспомогательные технологии. Например:

Читать далее

WHIP — стандартный протокол общения WebRTC приложений

Время на прочтение8 мин
Охват и читатели1.5K

Всем привет! Давно я ничего не писал на Хабр про WebRTC. Наверное как‑то не было повода, да и WebRTC давно понятен и прост в общих чертах. Пара строк кода с одной стороны, пара строк кода с другой — вот и готово. Наверное. Там дальше есть несколько тонкостей. На самом деле — целое море тонкостей и обстоятельств, которые надо понимать и уметь с ними работать, но такая уж наша инженерная доля — криво неидеально читать и писать стандарты.

Но сегодня я хочу рассказать не столько про WebRTC как таковой, сколько про велосипеды в его использовании в продакшн‑среде и о том, как тихо без помпы растёт новый стандарт для его сигналинга. На написание этой серии статей меня натолкнула активность Sean Dubois, создателя и мейнтейнера Pion — отличной WebRTC‑библиотеки для Golang.

Читать далее

Ваш сайт теряет пользователей прямо сейчас. Виноват один символ: '+' в email

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели6.8K

Привет, Хабр! Представьте ситуацию: вы нашли крутой сервис, регистрируетесь, вводите свой email my.name+coolservice@gmail.com (ведь вы, как и я, любите порядок во входящих) и… получаете ошибку «Некорректный email». Знакомо? Уверен, что да.

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

Читать далее

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