Атрибуты и свойства HTML: в чём разница

Распространённая ситуация: разработчик пытается прочитать значение поля ввода через getAttribute('value'), но получает не актуальные данные, введённые пользователем, а первоначальное значение из HTML-разметки.

Это не ошибка JavaScript, а следствие фундаментального различия между атрибутами и свойствами DOM. Атрибуты — это исходные параметры, заданные в HTML (чертёж элемента). Свойства — это текущее состояние DOM-объекта в памяти браузера (реальность). И они могут расходиться.

В новой статье детально разбирается:

✅ Почему input.value и getAttribute('value') ведут себя по-разному.
✅ Как работает defaultValue и для чего он нужен.
✅ Особенности логических атрибутов (checked, disabled).
✅ Что важно знать о свойствах и атрибутах разработчикам на React.

Материал будет полезен как начинающим, так и опытным разработчикам, желающим систематизировать знания о DOM.

🖥 Читать статью

📱 @dev_notes_ru

#HTML #JavaScript #DOM #Frontend

Зачем нужен figcaption, если есть alt

При верстке изображений у разработчиков часто возникает вопрос: чем отличается атрибут alt от элемента <figcaption> и можно ли их использовать взаимозаменяемо? На первый взгляд оба элемента отвечают за описание, но их функции принципиально различаются.

О чем статья:

✅ alt — это замена изображения для тех, кто не может его увидеть (пользователи скринридеров, отключенные изображения).
✅ <figcaption> — это видимая подпись, поясняющая роль изображения в тексте для всех читателей.
✅ Простой тест, который поможет определить, нужна ли изображению подпись или достаточно грамотно заполненного alt.

Материал будет полезен всем, кто работает с контентом и стремится сделать верстку семантически правильной и доступной.

🖥 Читать статью

📱 @dev_notes_ru

#A11y #HTML #Frontend

Понижаем приоритет группы CSS-правил с помощью @layer

Управление приоритетами CSS-правил — одна из ключевых задач при поддержке проекта любого масштаба. Традиционные методы (контроль порядка подключения, повышение специфичности) не всегда эффективны, особенно при работе со сторонними библиотеками или унаследованным кодом.

Альтернативный подход — использование каскадных слоёв (@layer). Помещение "базовых" стилей (например, reset.css) в отдельный слой гарантирует, что они будут уступать основным правилам проекта, написанным вне слоя.

В статье рассматриваются:

✅ Три типовых сценария для применения этой техники.
✅ Особенности интеграции слоёв в существующую архитектуру.
✅ Специфика работы !important внутри каскадного слоя.

Будет полезно всем, кто стремится выстроить чистую и предсказуемую CSS-архитектуру.

🖥 Читать статью

📱 @dev_notes_ru

#CSS #Frontend

📰 Ежемесячный дайджест Baseline: январь 2026

Привет! Встречайте первый в этом году выпуск Baseline Digest. Мы собрали для вас все важные новинки веб-платформы, которые в январе достигли новых этапов в проекте Baseline. Поехали! 🚀

✅ Новое в категории Newly Available

Эти функции теперь стабильно работают во всех основных браузерах.

1. Псевдокласс :active-view-transition
Позволяет стилизовать корневой элемент документа во время перехода между состояниями страницы (View Transition). Это дает тонкий контроль над анимацией смены контента.

2. JavaScript-модули в Service Workers
Теперь и в Service Worker можно использовать стандартные import/export! Просто добавьте { type: 'module' } при регистрации. Это упрощает организацию кода и управление зависимостями.

3. Navigation API
Современная замена устаревшему History API, созданная специально для Single Page Applications (SPA). Дает единый способ управления навигацией, включая кнопки «назад/вперед», с меньшим количеством шаблонного кода.

4. Новые CSS-единицы (относительно root):
rcap: Высота заглавных букв корневого элемента. Идеально для точной типографики.
rch: Ширина символа 0 в шрифте корневого элемента.
rex: Высота строчных букв (ex) корневого элемента. Полезно для вертикального выравнивания.
ric: Ширина/высота иероглифа (CJK) корневого элемента. Незаменимо для многоязычных интерфейсов.

🌐 Новое в категории (Widely Available

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

1. Двухзначное свойство display
Вместо inline-flex можно писать display: inline flex. Это разделяет «внешний» (как элемент взаимодействует с потоком) и «внутренний» (как ведут себя дочерние элементы) типы отображения. Более логично и гибко.

2. Свойство animation-composition
Определяет, как накладываются друг на друга несколько анимаций, влияющих на одно и то же свойство. Доступны режимы: replace (заменить), add (добавить) и accumulate (накопить).

3. Иммутабельные методы массивов
toReversed(), toSorted() и toSpliced() — новые методы, которые возвращают новый массив с изменениями, не трогая исходный. Это шаг к более чистому и предсказуемому функциональному программированию на JavaScript.

🖥 January 2026 Baseline monthly digest

📱 @dev_notes_ru

#Baseline #Frontend

git push —force

📱 @dev_notes_ru

#Joke

Вайб-кодер пытается объяснить функциональность и архитектуру своего приложения

📱 @dev_notes_ru

#Joke

Soft Delete в Laravel: Как настроить, использовать и восстанавливать данные

Soft delete часто воспринимается как простая тема, однако на практике возникает множество вопросов: как правильно тестировать эту функциональность, учитывать требования GDPR, настраивать привязку к маршрутам и автоматически очищать устаревшие записи.

В статье последовательно разобраны следующие темы:

✅ Настройка SoftDeletes и создание миграции
✅ Работа с методами withTrashed(), onlyTrashed() и restore()
✅ Применение Prunable для автоматической очистки базы данных
✅ Тестирование soft delete с использованием встроенных assertion-методов

Материал будет полезен как для внедрения мягкого удаления в новых проектах, так и для рефакторинга существующего кода.

🖥 Читать статью

📱 @dev_notes_ru

#Laravel #Eloquent #PHP #SoftDelete

Как сделать Laravel-контроллер тестируемым и перестать бояться рефакторинга

Вы уверены, что ваши тесты действительно что-то тестируют? 🤔

Представьте: вы случайно (ну, бывает) закомментировали ключевой вызов сервиса в контроллере подписки. Прогоняете тесты — все зеленое! Отличная работа, можно деплоить. А подписчики в это время не подписываются. Знакомое чувство ложной безопасности?

Статья как раз об этой проблеме: когда тесты проверяют ответ, но игнорируют поведение. Разобрал на живом примере, как один new в контроллере делает ваш код непроверяемым.

Что внутри:

🔹 Почему создание сервисов через new — путь к хрупким тестам.
🔹 Как внедрение зависимости (Dependency Injection) спасает ситуацию.
🔹 Прием с resolve() для "легаси-кода", когда менять сигнатуру метода нельзя.
🔹 Сравнение $this->mock() и чистого Mockery — чувствуем разницу.

Если хотите писать тесты, которые находят проблемы, а не просто «проходят», — заглядывайте.

🖥 Читать статью

📱 @dev_notes_ru

#Laravel #TDD #PHP

Интернет без adblocker

📱 @dev_notes_ru

#Joke

📱 @dev_notes_ru

#Joke

Приёмы работы с PostgreSQL, меняющие архитектуру решений

Когда речь заходит о проверке целостности данных, например, запрете пересекающихся интервалов бронирования, возникает вопрос: где разместить эту логику? В коде приложения или на стороне базы данных? PostgreSQL предоставляет инструменты, которые позволяют делегировать такие проверки уровню СУБД, снижая нагрузку на прикладной код и минимизируя риски состояний гонки.

В статье рассматриваются:

✅Ограничение EXCLUDE — декларативный способ запретить пересечение интервалов без дополнительных проверок в коде.
✅Генерируемые колонки (GENERATED) — вычисление производных значений непосредственно в базе.
✅Рекурсивные CTE — обход иерархий и графов в несколько строк вместо императивных конструкций.
✅JSONB и композитные типы — сравнение подходов к моделированию гибких структур данных.

Материал будет полезен разработчикам, которые стремятся писать более лаконичный и надёжный код, опираясь на возможности реляционной модели.

🖥 Читать статью

📱 @dev_notes_ru

#PostgreSQL #SQL #Database

Практическое руководство по элементу <img>: от основ до LCP

Смещение контента при загрузке страницы, избыточный трафик на мобильных устройствах, потерянные баллы Core Web Vitals — всё это часто следствие недооценки возможностей элемента <img>.

В новом руководстве рассматриваются ключевые аспекты работы с изображениями в HTML:

✅ указание width и height для предотвращения смещения макета (CLS);
✅ адаптивность через srcset и sizes — как браузер выбирает нужный размер;
✅ поддержка современных форматов (AVIF, WebP) с помощью <picture>;
✅ управление приоритетами загрузки: loading, decoding, fetchpriority;
✅ стратегия для LCP с предварительной загрузкой адаптивных изображений.

В финале — сравнение ручного подхода и использования Image CDN с акцентом на практическую целесообразность.


🖥 Читать статью

📱 @dev_notes_ru

#HTML #LCP #CoreWebVitals

Taskfile: Когда пора отказаться от Makefile (а когда — нет)

Makefile — инструмент с почти полувековой историей, который продолжает оставаться стандартом во многих проектах. Однако его синтаксис, ориентированный на shell-сценарии, не всегда удобен при решении современных задач: кросс-платформенная работа, интерактивные запросы, модульная организация кода.

Taskfile предлагает альтернативную модель: конфигурация на YAML, где многие сложные сценарии реализованы как встроенные механизмы, а не требуют самодельных конструкций.

В статье рассматриваются ключевые различия между двумя подходами:

✅ документация и навигация по задачам;
✅ работа на разных операционных системах;
✅ инкрементальные сборки и контроль изменений;
✅ интерактивные сценарии и валидация;
✅ модульность и переиспользование конфигураций.

Также приводится три стратегии внедрения Taskfile в существующие проекты — от нового проекта до постепенного рефакторинга проблемных мест.

🖥 Читать статью

📱 @dev_notes_ru

#Taskfile #Makefile #DevOps #автоматизация #инструменты

Проксирование fetch() в серверном JavaScript

Стандарт Fetch не специфицирует проксирование HTTP-запросов, поэтому каждый серверный JavaScript-рантайм реализует эту возможность по-своему. В результате разработчики сталкиваются с несовместимостью решений при смене среды исполнения.

В статье рассматриваются следующие подходы:

✅ Bun и Deno — встроенная поддержка прокси через опции fetch()
✅ Node.js — два пути: глобальные переменные окружения или пакет undici для per-request настройки
⚠️ Cloudflare Workers — отсутствие нативной поддержки и три архитектурных альтернативы (Docker-контейнер, TCP-сокеты, вынос логики в отдельный микросервис)

Также приведён чек-лист для проверки, действительно ли трафик идёт через прокси, и разбор типовых ошибок.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #Nodejs