Обновить
369.85

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

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

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

Единый код валидаторов на фронте и бэке (PHP + FFI + Go + JS)

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

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

Если фронт и бэк написан на одном языке (привет js+node), то мы можем напрямую использовать один код валидатора и там и там.

В остальных случаях (js+php, java, python, go, dotnet) есть проблема. Во-первых, придётся два раза писать примерно одно и то же на двух языках, во-вторых, нужно убедиться, что написанное работает одинаково. Особенно печальны случаи, когда фронт ошибочно зарезает данные, валидные с точки зрения бэка и логики приложения.

Читать далее

Рассуждение о Легаси

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

Сегодня хотелось бы поговорить с вами о такой теме как Легаси.

Давайте дадим определение, что такое легаси.

Легаси - это тот код, который писали до нас и который пришел нам от других.

Легаси - это не всегда «плохой» код, а просто код, который устарел по технологии, по структуре или по пониманию.

Почти любой проект со временем превращается в легаси, если его не обновлять.

На своем опыте разработки я могу классифицировать легаси на три категории. Опять же я не претендую на абсолютную объективность. Это только моя классификация, на основе того, с чем лично я столкнулся.

1) Технологии, которые еще работают, но есть обновленные версии пакетов, фреймворков и инструментов. Просто в данный момент код работает на предыдущих версиях. Самый очевидный пример  проект написанный на Vue2, когда есть Vue3. Переписать его на новую версию с одной стороны не так уж и трудно. А с другой это связано с подводными камнями. Если мы переходим с Option Api на Composition Api то простой заменой одного кода на другой не обойтись. Некоторые вещи работают иначе. И придется отлавливать локальные проблемы. Если проект небольшой и сложной логики там мало, то это делается быстро. Если же она есть то проблемы точно будут. Кроме того не стоит забывать, что часть пакетов и библиотек, которые работают с Vue2, не работают с Vue3. Следовательно придется искать аналоги. В целом проблемы и способ перехода здесь прозрачны и это самый легкий вариант.

2) Нельзя переписать, но можно работать. Это проекты написанные на старых технологиях, как jquery и других. Они не могут быть быстро и легко переведены на современные инструменты. Так как для этого придется все писать заново. Однако код, который был написан, достаточно понятен и его не так сложно поддерживать. А переезд на новый вариант это параллельная разработка нового. Здесь тоже все понятно. Мы не имеем возможности бесшовно перейти на новые версии, потому что их просто может не быть. Поэтому приложение пишется с нуля на новом стеке. 

Читать далее

103 Early Hints в NGINX: как выжать бесплатный прирост LCP без переписывания бэкенда

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

Привет, Хабр!

Вы, наверно, привыкли к стандартным HTTP-ответам – 200, 301, 404, 500 и т. д. А тут подкрался новый статус 103 – Early Hints. Это небольшой пинок браузеру: сервер шлет код 103 с заголовками Link: rel=preload ещё до того, как сформировал основной HTML. Пока бэкенд думает над ответом, браузер параллельно начинает грузить критические ресурсы (CSS, JS, шрифты и т. д.). Звучит просто, но эффект на производительность и LCP может быть весьма значительным.

Читать далее

Core Web Vitals-2025: как управлять скоростью и стабильностью сайта

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

Салют, Хабр! 

Меня зовут Паша, я вхожу в группу обеспечения производительности интерфейсов; неформально это команда «Скорость» SberDevices. Мы с коллегами отвечаем за то, чтобы сайты sberdevices.ru, giga.chat, developers.sber.ru и другие быстро работали и красиво выглядели. Если пользователю неудобно использовать сайт, он быстро с него уйдёт (и не станет ничего читать и покупать).

Как только потребовалась оценка качества веб-страниц, появилось и множество подходов к ним. Но в итоге индустриальным стандартом стали методы, предложенные Google и реализованные на уровне браузерных API. Чтобы понять, как сайты стоит оптимизировать и что влияет на их быстродействие, Google оперирует тремя метриками — Core Web Vitals. Две из них действуют с мая 2020 года, а третьей не исполнилось и года. Сегодня расскажу, как разработчик может оценить их и улучшить без консультации команды скорости (если она есть). А ещё благодаря оптимизации метрик Core Web Vitals сайт ранжируется в поисковиках выше. Поехали!

Читать далее

Универсальный парсинг сайтов на Python: requests vs headless, токены, куки, прокси и ротация IP

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

Вы когда-нибудь радовались идеальному прототипу парсера, который у вас летал на демо-странице, а в проде внезапно начал ловить 403, 429, пустые HTML и «куда-то делись карточки»? Контент отрисовывается на JS, сервер требует токен, после смены IP, старая сессия перестаёт работать.

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

Читать далее

Упрощаем работу с БД с помощью Drizzle ORM — как выжать максимум из инструмента

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

Привет, я Сергей Маркизов, разработчик диджитал-продакшна Далее. В наших проектах часто использую Drizzle — современную, типобезопасную ORM для TypeScript, которая не усложняет базовую задачу: читать и писать данные. В этой статье расскажу, чем библиотека отличается от других и как с ней работать.

Читать далее

Не откладывайте на завтра, что можно сделать сегодня

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

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

Все очень просто. Говорите себе: «Это я потом поправлю, а это я потом перепишу. А вот это пока подождет. А файловую систему я потом продумаю»? Так вот это «потом» может так и не наступить. А ваш проект превратится в мусор. А даже если вы и вспомните о том, что пора что-то куда-то переносить, вместо двух файлов у вас будет 100 или больше. И вы уже не будете помнить, что за что отвечает и где лежит. В итоге вместо одного часа вы потратите день или больше на рефакторинг, которого можно и нужно было избежать.

В общем, ключевое — это не бежать сразу писать код, а сначала все продумать. Структуру, архитектуру, всякие эти фишечки и прочее. Хотя бы в общих чертах. Иначе ваш проект очень скоро будет приносить вам боль, а время вы потратите совсем не на то, что вам бы хотелось.

Читать далее

Вебмастеры и реликтовый веб

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

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

Читать далее

Создание чата на api2app + n8n

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

В этом уроке расскажу как можно использовать n8n (платформу для автоматизации рабочих процессов) в связке с api2app. Создам виджет чата с ИИ для встраивания на сайт. У n8n есть свой виджет для встраивания, но возможностей кастомизации маловато.

Читать далее

HTML- и CSS-советы для джуниор фронтенд-разработчиков

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

Привет, Хабр!

Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?

Хорошо, что сейчас ситуация уже лучше. В целом можно найти очень классные статьи, видео и бесплатные курсы. Но и мне есть что сказать!

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

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

Читать далее

Мощь Intl API: подробное руководство по встроенной в браузер интернационализации

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

В двух словах: интернационализация — это не только перевод текста. Она включает в себя форматирование дат, правильное образование множественного числа, сортировку имен и многое другое с учетом конкретных локалей. Вместо тяжелых сторонних библиотек современный JavaScript предлагает Intl API — мощный встроенный инструмент для работы с i18n. Еще одно напоминание о том, что веб действительно глобален.

Существует распространенное заблуждение, что интернационализация (i18n) сводится лишь к переводу интерфейса. Перевод, конечно, важен, но это лишь одна из частей. Настоящая сложность — в адаптации информации под культурные особенности.

Читать далее

Ленивые вычисления в PHP: как генераторы и итераторы экономят память и ускоряют код

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

Как обрабатывать миллионы строк в PHP и не убить память?

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

Читать далее

Мониторинг и анализ производительности бэкенда с помощью ClickHouse и Grafana. Часть 1

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

Всех приветствую! Я Артём Седых, ведущий разработчик команды банковского сопровождения. Нашему cервису уже 8 лет, 16 разработчиков, бэкенд - монолит на PHP. В данном наборе статей расскажу про наш опыт разработки альтернативы pinba и внедрения гибкой системы мониторинга бэкенда в легаси проекте с возможностью увидеть всю систему как на ладони и понять, почему именно проседают определенные экшены. Узнать о замедлении работы не в письмах и звонках от пользователей, а автоматически и прозрачно. На конкретных примерах дашбордов графаны покажу как обнаружить типичные проблемы экшенов, запланировать оптимизацию и даже предсказать снижение производительности.

Читать далее

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

JavaScript: хочу свой HTMLElement

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

Просто хочу строить свой DOM из своих кирпичей.
С преферансом и поэтессами...

Что мне это даст:

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

Читать далее

Срочнее срочного

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

Если вы хоть раз работали в стартапе или команде с неопытным менеджером, то знаете этот особый вид утреннего кофе. Ты садишься за рабочий стол, открываешь чат, и ещё до первого глотка узнаёшь: "Всё отменяем! Срочно делаем вот это!"

Читать далее

От массивов до объектов в JavaScript: пособие для новичков

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

Привет! Я — Александр Дудукало, автор базового курса по JavaScript. В этой статье мы продолжим изучение работы с данными в JavaScript. Если в прошлом материале мы говорили о массивах, то теперь пришло время познакомиться с объектами. Я расскажу, как они помогают эффективно организовать и обрабатывать связанные данные. Подробности под катом!

Читать далее

Linux для начинающих: WSL — это читерство. Как Microsoft дал нам Linux без головной боли. Часть 2

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

WSL2 — удобный инструмент, но, как и любая технология, он не идеален. В этой статье я хочу рассказать о нескольких подводных камнях, с которыми столкнулся сам, и о том, как их можно обойти. Мы не только разберем решения распространенных проблем, но и раскроем потенциал WSL2: запустим Docker с GPU-ускорением для нейросетей и даже Android Studio. Забудьте о конфликтах сред и долгой настройке после переустановки системы — превратите WSL2 из источника проблем в мощный инструмент, который работает на вас

Читать далее

Фильтры в таблицах

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

В B2B-системах и корпоративных интерфейсах фильтры — не «приятный бонус», а спасательный круг в работе пользователя. Когда у вас таблица на 10 000 строк и 100+ колонок, обычным поиском или сортировкой не обойтись. Тут уже нужны сложные фильтры: с несколькими условиями, каскадными зависимостями, сохранёнными пресетами и продуманной логикой применения.

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

Читать далее

React Custom Hook: useStorage

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

Одним из ключевых преимуществ этого пользовательского хука является его простота. Вы можете использовать его для хранения данных любого типа, таких как строки, числа или даже сложные объекты, всего с помощью нескольких строк кода. Кроме того, useStorage выполняет сериализацию и десериализацию данных за вас, поэтому вам не нужно беспокоиться о преобразовании значений в JSON и из него.

Читать далее

SSO на базе Spring Authorization Server. Можно ли в прод?

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

В современных приложениях централизованная аутентификация и авторизация играют ключевую роль в обеспечении безопасности и удобства пользователей. Именно с такой задачей мы столкнулись в компании NAUKA при создании "Платформы" — экосистемы, предназначенной для функционирования наших решений и разработки собственных прикладных приложений. В качестве основного компонента системы аутентификации и авторизации был выбран Spring Authorization Server.

Настоящая статья - это небольшой практический обзор реализации SSO-сервера на основе технологии Spring Authorization Server с акцентом на решении типовых проблем, которые возникают при её использовании в реальной системе. Мы рассмотрим как технические детали, так и архитектурные решения, которые помогут создать надежный и масштабируемый сервер авторизации.

Читать далее

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