Обновить
364.69

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

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

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

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 с акцентом на решении типовых проблем, которые возникают при её использовании в реальной системе. Мы рассмотрим как технические детали, так и архитектурные решения, которые помогут создать надежный и масштабируемый сервер авторизации.

Читать далее

JavaScript: зачем конструктору return …

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

Этот вопрос интересовал меня настолько давно, что за прошедшие годы даже стал как-то про него забывать. И не то, чтобы меня это прям как-то сильно интересовало, но всё же лучше понимать назначение было бы приятно.

И, ведь, ну в самом деле, подумаешь, ну может разработчику хочеться вернуть не эземпляр, не instance, а какой-нибудь другой объект, и зачем-то при этом ему нужен именно вызов конструктора. Ну, допустим, он хочет чтобы new.target был заполнен и т.п., ну, мало ли какие варианты зачем-то иметь возможность в противном случае вернуть объект. Или может он хочет асинхронных конструкторов и вернуть new Promise, где уже в resolve передать this как вариант для создания await new MyConstructor. Или может быть хочет вернуть Proxy над this для отслеживания операций с этим экземпляром. В общем есть всякие разные причины когда гуманно было бы иметь этот "сахар", но всё же, может быть есть что-то, что иначе никак не сделать? И, самое важное, что эта функциональность былв всегда, с самой первой версии же. Понятно, что может быть про это вообще не думали, просто делали "как привычно". И, да, функции-конструкторы, в отличие от class-овможно вызвать без new и в те времена никаких классов в JavaScript не было конечно, и return объективно был нужен, но может быть есть какие-нибудь варианты когда и с new имеется глубокий практический смысл уже и тогда существовали, то есть может быть назначение операции возврата иного значения конкретно у конструкторов вполне себе приемлемое. И, да, конечно, конструкторы не возвращают примитивы, но может быть и для объектов есть какое-то применение тоже находилось бы, ну, вдруг, внезапно, может быть ...

Читать далее

Как платформа Linear завела меня в кроличью нору local-first-разработки

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

Я начал пользоваться платформой Linear пару месяцев назад. То, с чем я столкнулся, затянуло меня в кроличью нору деталей local-first-разработки (локально-ориентированной разработки), которые изменили мой взгляд на веб-приложения.

Читать далее

ИИ при найме

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

Тренд 2025 года: в некоторых бигтехах кандидату дают сложную задачу и разрешают пользоваться ChatGPT.
Мол, мы же всё равно работаем с ИИ, давайте проверим, как кандидат с ним ладит.

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

Читать далее

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