CSS Position — управление размещением элементов

#почитать

Наиболее часто используемые position значения:

▪️static(по умолчанию): элемент позиционируется в соответствии с обычным потоком документа. Свойства top, right, bottom и left не имеют никакого эффекта.
▪️relative: элемент позиционируется относительно своего обычного положения в потоке документа. Вы можете перемещать его, используя верх, право, низ или лево, но он все равно будет занимать место в своем исходном положении.
▪️absolute: элемент позиционируется относительно ближайшего позиционированного предка (не обязательно родителя) и удаляется из обычного потока документа.
▪️fixed: элемент позиционируется относительно окна браузера, то есть он остается на месте даже при прокрутке страницы.
▪️sticky: элемент переключается между относительным и фиксированным позиционированием в зависимости от положения прокрутки пользователем.

⏱Читать статью

Chrome 130 - что нового

#почитать


• добавлена новая форма компактных уведомлений о совершённых операциях, показываемых под адресной строкой в виде небольшой полоски, перекрывающей контент;

• при включённом режиме экономии потребления энергии (Energy saver) реализована экспериментальная поддержка автоматической заморозки вкладок, потребляющих много ресурсов CPU, но при этом не выводящих звук и скрытых в течение более 5 минут. Исключение делается только для вкладок, связанных с управлением внешними устройствами или проведением видео и аудио конференций (подобные вкладки определяются на основании доступа к API для работы с USB, Bluetooth, камерой, устройствами ввода и микрофоном, а также организации канала связи с использованием RTCDataChannel или MediaStreamTrack);

• в версии для платформы Android реализован встроенный просмотрщик документов в формате PDF, не требующий вызова внешних приложений, а также появилась поддержка сторонних служб автозаполнения и хранения паролей;

• предоставлена возможность открытия в режиме «картинка в картинке» (picture-in-picture) не только видео, но и любых элементов для показа произвольного контента поверх другого содержимого;

• добавлена возможность обращения к внешним словарям со сжатием ответов при помощи алгоритмов Brotli и Zstandard;

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

• добавлена поддержка разбора неспециальных схем URL (не включённых в список типовых схем) с разделением хоста и пути (парсер URL-адресов в Chrome теперь корректно обрабатывает нестандартные URL);

• Поведение элемента приведено к соответствию Safari и Firefox: в режиме видимости "none" элемент теперь не скрывается, а переключается на отдельный стиль;

• расширены возможности инструментов для веб-разработчиков. В панель анализа сетевой активности добавлено выпадающее меню с дополнительными фильтрами. Добавлена опция для чистки конфиденциальных данных перед сохранением HTTP-сеанса в формате HAR (HTTP Archive).


⏱Подробнее
▫️ Посмотреть (en)

AggregateError в JavaScript

#почитать

AggregateError помогает обрабатывать сразу несколько ошибок в JavaScript. Это упрощает управление кодом и делает его надежным.

⏱Читать статью

7 принципов JavaScript, которые стоит запомнить

#почитать

▪️Замыкания сделают код чище
▪️Деструктуризация сделает код проще
▪️Debouncing и Throttling оптимизируют производительность
▪️Каррирование повышает гибкость функций
▪️Proxy перехватывает действия объектов
▪️Как работает цикл событий и асинхронный JavaScript
▪️Мемоизация улучшает производительность

⏱Читать статью

Градиентный текст с тенью

#почитать

В наши дни градиентный текст довольно легко сделать с помощью background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.

⏱Читать статью

▫️Профилирование Node.js

#посмотреть

С помощью инструментов профилирования Node.js разработчики "положили" графики времени ответа сервера.

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

⏱Смотреть на YouTube ⏱️45 минут

Кэширование Next.js

#почитать

Next.js расширяет API fetch, чтобы дать вам суперсилы, когда дело касается кэширования.

⏱Читать статью

Инструменты отладки JavaScript

#почитать

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

⏱Читать статью

Сборщик мусора в V8

#почитать

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

⏱Читать статью

15 суперполезных плагинов Chrome в помощь фронтендеру

#почитать

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

⏱Читать

Интерактивный видеопереход в Next.js

#почитать

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

⏱Читать статью

Приемы TypeScript для надежности кода

#почитать

Самоссылающиеся типы, прозрачные типы, типобезопасный DeepPartial и пр.

⏱Читать статью

▫️Как я Docker'изовал сайт на Next.js + сделал CI/CD

#посмотреть

Показываю реальный кейс автоматизации сайта. Завернул в докер сайт на Next.js/MySQL с сервером на базе nginx и отдачей статики напрямую через этот nginx, минуя Next.js.

⏱Смотреть на YouTube ⏱️35 минут

Server-Driven UI (SDUI) + Rise Tools

#почитать

Реализация разработки Server-Driven UI (SDUI) с использованием Rise Tools. Она разработана для бесшовного обновления приложений React Native, предоставляя динамические компоненты UI, которые можно обновлять в производстве без пересборки или повторного развертывания.

⏱Читать статью