Обновить
386.45

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

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

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

Frontend-архитектура, которая работает: как я строю Vue-приложения с минимумом сложностей

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

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

Если вы тоже ищете способы сделать свой код чище и поддерживаемым, или просто хотите обсудить разные подходы к архитектуре, — добро пожаловать в комментарии. Давайте разбираться вместе!

Разобраться в архитектуре

Хватит издеваться над чекбоксами

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

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

Собрал конкретные примеры неправильных чекбоксов с крупных сайтов, чтобы вам было проще защищать свои интерфейсные решения и больше никогда не ошибаться

Читать далее

Как мы заработали 2400000 руб на сервисе для создания фотокниг. Наш главный фейл и выводы

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

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

Читать далее

Готовим геотаргетинг на nginx + GeoIP2 и связываем с локализацией в Next.js

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

В этой статье поделюсь быстрым способом настройки геотаргетинга на nginx + GeoIP2 в связке с локализацией Next.js на примере решения реальной задачи.

Вы узнаете как подключить и настроить GeoIP2 к nginx, как приоритизировать и настроить критерии выбора домена и локали, и как подружить это с Next.js

Читать далее

Почему не стоит принимать первый попавшийся оффер джуниору?

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

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

Читать далее

Какой формат даты выбрать: практическое руководство для UX/UI дизайнеров

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

Дата — это всего три числа, но даже такой маленький элемент интерфейса может серьезно повлиять на пользовательский опыт.

Подробнее

Авто-генерация типизированных API контроллеров на клиенте из Swagger

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

Зачастую нам приходится описывать API-запросы или переписывать уже имеющиеся ввиду изменения каких-то DTO (Data Transfer Object) или параметров у запросов. Это вполне естественно для разработки, но часто оказывается скучным и однотипным процессом, не требующим размышлений или особых навыков. В этой статье я рассказываю, как автоматизировать всю эту историю.

Читать далее

signals в качестве альтернативы useState в React

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

Привет, хабр! Больше года назад я впервые узнал про сигналы, а три месяца назад @Sin9k записал видео на эту тему. И поскольку сигналы по-прежнему обходят стороной, попробую немного исправить ситуацию)

В материале будет использоваться обёртка signals-react, так как изначально рассматриваемая библиотека написана под Preact.

Читать далее

Полезные библиотеки для React-приложений в 2025 году: на что обратить внимание

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

Привет, Хабрчане! Это Леша Жиряков, техлид backend-команды витрины KION. В прошлый раз я писал о секретах популярности Python, а сегодня будет пост о разработке на React. Расскажу, какие библиотеки стоит добавить в свой набор в 2025 году, приведу плюсы и минусы каждой, данные с GitHub и примеры использования. Начнем!

Читать далее

Какие же они тупые❢

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

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

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

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

Читать далее

Как улучшить доступность сайтов с помощью семантического HTML: стандарты семантики

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

Привет, Хабр. Меня зовут Дмитрий, я Frontend-разработчик в компании Webest. В этой статье расскажу, как эффективно использовать семантический HTML, какие теги (от <header> и <main> до <article> и <aside>) действительно приносят пользу, и в каких ситуациях они работают лучше всего. 

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

Читать далее

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 2

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


Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем, я к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».


При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).


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


Так, вы готовы? Давайте посмотрим, что я вам подготовил.

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

DOM-Scope: создание искусственных областей видимости и управление идентификаторами элементов

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

В процессе работы с HTML-документами часто возникает необходимость получить доступ к конкретным элементам DOM. Обычно это делается с помощью уникальных идентификаторов, которые присваиваются нужным элементам. Однако существует вероятность, что в большом документе может оказаться несколько элементов с одинаковыми идентификаторами, что может привести к путанице.

Чтобы избежать этой проблемы, я разработал библиотеку dom-scope, которая позволяет создавать искусственные области видимости (скоупы) внутри DOM. Я хочу поделиться своим решением с сообществом Хабра.

Читать далее

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

VPS за 139 рублей — дом для вашего резюме на основе Hugo

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


Привет, Хабр! Сегодня узнаем, на что реально способны бюджетные VPS от RUVDS. Посмотрим, что можно сделать с самыми недорогими серверами, которые так часто мелькают в рекламе.

Для нашего эксперимента я выбрал конфигурацию за 139 рублей в месяц — VPS с 1 ядром процессора 2.2 ГГц, всего 512 МБ оперативной памяти и 10 ГБ на HDD, а ОС привычная CentOS 9. На всём этом добре мы развернём статический сайт-резюме на Hugo, о чём будет подробнее ниже в тексте.
Читать дальше →

Понимая реактивные системы: искусство планирования зависимостей

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

В этой статье мы продолжим разбирать базовые концепции реактивности на основе идей и примеров, изложенных Райан Карниато (Ryan Carniato), автором SolidJS. Сегодня рассмотрим, как в реактивных системах планируется выполнение изменений производных значений.

Большинство разработчиков воспринимают реактивность как систему событий. У вас есть некоторое состояние, которое обновляется, а все зависящие от него данные пересчитываются. В итоге это изменение проявляется через побочные эффекты.

Читать далее

Перестаньте использовать JWT для сессий

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

К сожалению, в последнее время всё больше и больше людей советуют использовать JWT для управления пользовательскими сессиями в веб-приложениях. Это ужасная идея, и в этом посте я объясню, почему.

Читать далее

Yandex индексация для SPA приложений

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

Год с небольшим назад я проводил здесь испытания, как поисковики индексируют SPA сайты. На тот момент Google справился на отлично, Yandex - не очень

Сейчас Yandex хорошо проиндексировал SPA сайт на Vue 3.

Читать далее

Рекомендуемые библиотеки для React

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



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


React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.


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


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

Как измерить успешность дизайна в техническом продукте? Погружаемся в UX-бенчмаркинг

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

Привет, я Оля Ходаковская — ведущий продуктовый дизайнер облака Selectel. Я отвечаю за проектирование и развитие облачных продуктов: сетей, файрволов, балансировщиков, глобального роутера и логов — и лидирую такие UX-инициативы, как модель UX-зрелости и UX-бенчмаркинг.

В дизайн-процессе Selectel был формально описан этап измерения успешности дизайна, однако никто не знал, как именно ее измерять. В этой статье я расскажу, как мы решили эту задачу с помощью UX-бенчмаркинга. Будет много примеров и внутренней кухни!
Читать дальше →

WebAssembly: Как «невозможное» стало реальностью?

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

Представьте, что вы можете запустить Photoshop в браузере без плагинов. Или обрабатывать 4K-видео на слабом смартфоне. А что, если нейросеть на сайте будет работать в 20 раз быстрее? Звучит как фантастика, но это уже реальность благодаря WebAssembly (Wasm).

В 2017 году WebAssembly представили как «дополнение» к JavaScript. Сегодня же он становится универсальной средой исполнения для любых задач — от игр до серверных приложений. Как это произошло? Давайте разбираться.

Читать далее

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