Обновить
450.74

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

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

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

Atomic CSS: верстка и легкость бытия

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

Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы.

Эту статью можно отчасти считать продолжением моей предыдущей, по данной теме, хотя напрямую они не связанны. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект.

Такс такс, что тут у нас?

Новости

Делаем новогоднюю поздравительную открытку, используя только CSS

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

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

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

В ходе реализации я буду использовать все последние фишки CSS. Вдруг вы о них не слышали — заодно и что-то полезное для себя найдёте.

Давайте уже сделаем новогоднюю открытку!

Читать далее

Заменяем JS обычным HTML

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

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!

Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.

Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS.

В этой статье я приведу несколько примеров; сможете придумать свои?

Читать далее

Как налоговый юрист написал сервис для расчета пени по НДС с помощью LLM, не зная Python

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

Я налоговый юрист и автор телеграм-канала «Налоговый Инсайдер». В моей работе есть рутинные задачи, которые сложно автоматизировать стандартными средствами вроде Excel. Одна из таких задач — расчет пени по НДС при подаче уточненной налоговой декларации.

В этой статье я расскажу, как не написав самостоятельно ни строчки кода с помощью Gemini и ChatGPT я прошел путь от идеи до работающего приложения на Flask , и с какими неочевидными техническими проблемами (вроде устаревшего Python на хостинге и CGI-скриптов) столкнулся гуманитарий-юрист пытаясь запустить современную программу на обычном хостинге.

Читать далее

Разбираем net/http на практике: пишем веб-сервис DeadDrop для безопасного обмена сообщениями

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

Первая часть цикла «Разбираем net/http на практике»: создаём с нуля сервис DeadDrop — аналог Privnote для безопасной передачи самоуничтожающихся сообщений и файлов.

На чистой стандартной библиотеке net/http разбираем основы:

запуск HTTP-сервера

маршрутизация в ServeMux

написание middleware (логирование и recovery от panic)

работа с HTML-шаблонами и layout’ами

подключение статики через http.FileServer и embed.FS

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

Идеально для начинающих и тех, кто хочет глубоко понять внутренности популярных фреймворков вроде Gin и Echo. Пишем код вместе!

Читать далее

Databasus — open source инструмент для резервного копирования PostgreSQL, MySQL и MongoDB (ex-Postgresus)

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

В начале декабря я публиковал статью про Postgresus 2.0 — инструмент для резервного копирования PostgreSQL. С момента этой статьи пришло много запросов на добавление других баз данных, много положительной обратной связи от пользователей и набралось больше 1000 звёзд на GitHub.

А потом я узнал, что нарушил торговый знак 🥲. Оказывается, нельзя брать первое понравившееся название — и использовать его. Точнее можно, но с оговорками.

В итоге было принято решение о маленьком ребрендинге. Теперь Postgresus — это Databasus. И поддерживает другие базы: MySQL, MariaDB и MongoDB (при этом оставляя основной фокус на PostgreSQL).

Ниже — детальнее, что из себя представляет проект и почему произошло переименование.

Читать далее

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

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

Опыт одиночной разработки и поддержки долгоживущего веб-приложения: отказ от фронтенд-фреймворков, использование нативных возможностей браузера, работа с Core Web Vitals и влияние AI-поиска на трафик реального проекта.

Читать далее

Инженерия UX и производительности: от ядра к периферии

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

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

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

Хотелось не просто ускорить метрики, а выстроить полноценную систему, которая бы работала для пользователя как обычное SPA-приложение: быстро, плавно, визуально современно, а главное с уважением к пользователям.

Читать далее

Будущее web-разработки для веб-студий и digital-агентств: проектная разработка клиентских сайтов в эпоху ИИ

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

Мои рассуждения про будущее web‑разработки — не в абстрактном смысле «что будет с React или с PHP», а в очень прикладном контексте: проектная разработка клиентских сайтов для веб‑студий и digital‑агентств.

Главный тезис, который я вижу всё отчётливее: ИИ делает дешёвым «сделать», но дорогим «поддерживать и не ломать». И именно поэтому ценность архитектурной ясности, доменных инвариантов и проверяемых контрактов будет расти, а не исчезать.

Углубиться в тему

MDUI: как отдать UI backend-разработчикам

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

Как сократить Time-to-Market в 7 раз и научить бэкенд-разработчиков собирать страницы за 15 минут? В этой статье я делюсь опытом внедрения Meta-Driven UI в ERP-системе. Расскажу, как я «душила» легаси с помощью Strangler Fig Pattern, внедрила FSD-архитектуру на Vue 3 и почему Render-функции оказались эффективнее обычных шаблонов.

Читать далее

RSC Explorer: что на самом деле летит по сети в React Server Components

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

Команда JavaScript for Devs подготовила перевод статьи о том, как на самом деле работают React Server Components. Автор разбирает RSC на уровне протокола: что именно стримится с сервера, как JSX путешествует по сети, почему состояние не ломается при обновлениях и зачем React вообще понадобился такой странный формат.

Читать далее

Практическая оптимизация React: ререндеры, Context, списки, INP и code splitting

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


Оптимизация в React почти всегда сводится к двум факторам: объёму работы, которую выполняет JavaScript, и частоте (а также «стоимости») перерисовок компонентов. Сам React работает достаточно быстро, но в крупных интерфейсах даже небольшие архитектурные промахи и на первый взгляд безобидные ререндеры начинают заметно бить по производительности.

В данной статье мы расскажем про ключевые подходы к оптимизации React-приложений: как уменьшить количество лишних ререндеров, сократить объём вычислений при вводе и скролле и снизить нагрузку стартового JavaScript.

Читать далее

Нейроучитель — NeuroTeacher

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

Всем привет!

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

Итак, перед вами — нейроучитель! Хех... Сразу говорю — к нейросетям он не имеет отношения (или опосредованное). Да и не учитель, собственно. Это моя собственная методика интервальных повторений, то есть зубрежки, увеличения словарного состава... Но обо всем по порядку — в статье я расскажу, почему это все же «нейро», зачем и каким образом.

Читать далее

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

«У нас всё отлично»: как поверхностный аудит выявляет архитектурные риски на ранних этапах

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

Мне довелось выступить техническим экспертом на бизнес-акселераторе Genesis: IT & Telecom в СибГУТИ.

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

Читать далее

Мультиплексирование: от основ до сложных сценариев

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

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

Читать далее

Лучшие нейросети для работы и творчества в 2026 году

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

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

В этой статье рассмотрим наиболее полезные инструменты на базее ИИ и то, как они меняют подход к работе и созданию контента.

Читать далее

Живая документация проекта через VS Code + Codex + Memory Bank

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

Пошаговая инструкция и промпты для агента OpenAI Codex — создаем актуальную документацию проекта. А заодно упрощаем для продакт-менеджеров постановку задач программистам.

Читать далее

WebSockets vs HTTP: Как устроена двусторонняя связь в вебе

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

На заре интернета, когда возможности веба ограничивались просмотром информационных статей, однонаправленного протокола HTTP, посылающего запрос серверу и получающего ответ, было вполне достаточно. А потом пришли приложения со своими push-уведомлениями, мессенджеры для общения, карты для онлайн-навигации — и здесь технологии HTTP уже стало недостаточно. Требовалось двунаправленное соединение, в котором не только клиент мог отправлять запрос, но и сервер мог динамически посылать информацию клиенту для отображения. Так и появились WebSockets.

Сегодня мы разберем, что это за технология, чем WS отличается от WSS, и почему без WebSockets современный веб был бы невыносимо медленным.

Читать далее

Ваш сайт вам больше не принадлежит: как CVE-2025-11953 отдает ключи хакерам

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

Итак, 5 ноября команда JFrog опубликовала предупреждение об уязвимости CVE-2025-11953 в инструментах командной строки проекта React Native Community CLI. React Native — это платформа которую используют тысячи разработчиков для создания мобильных приложений, которые мы видим в App Store или Google Play. А React Native Community CLI через командную строку предоставляет инструменты для разработки и сборки этих приложений, куда как раз и входил злополучный пакет.

На первый взгляд, это еще один CVE в длинном списке. Но проблема глубже: уязвимость в популярном пакете может затронуть сотни проектов одновременно и ударить не только по продакшену, но и по устройствам разработчиков и CI-пайплайнам.

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

Читать далее

Путевые заметки о знакомстве со Spring Data R2DBC

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

Привет, Хабр! Меня зовут Каненков Александр, я backend-разработчик в Домклик. Не так давно я резко и с головой погрузился в мир реактивного программирования и очень заинтересовался этой темой. Хочу поделиться кратким введением в Spring Data R2DBC, зачем это нужно, как начать использовать и какие преимущества даёт. Мы разработаем небольшое приложение, добавим flyway и напишем пару тестов.

Читать далее
1
23 ...

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