Fluid Superscripts and Subscripts

#почитать

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

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

Практикум. Разноцветный текст

#почитать

Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?

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

Проблема с new URL(), и как URL.parse() её решает

#почитать

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.

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

Что может сломать CSS свойство aspect-ratio

#почитать

В CSS есть свойство aspect-ratio, которое получило полную поддержку примерно в 2021 году. Это свойство дает гораздо лучший дизайнерский результат, чем принудительное изменение размеров. При использовании элементов вроде <video> задача "Мне нужен здесь квадрат" или "Мне нужен размер 16:9" - это вполне разумные требования к дизайну. Особенно в нестабильной среде адаптивной верстки, когда вы намеренно стараетесь не думать о точных размерах, потому что знаете, что они могут измениться.

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

Как веб-серверы обрабатывают запросы

#почитать

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

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

Какой формат лучше — WebP, PNG или JPG

#почитать

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

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

CSS @import: Плюсы и минусы

#почитать

Импортирование CSS в каскадный слой. Условный импорт CSS с помощью запросов @supports и медиа запросов. @import vs <link>

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

Победители awwwards и их performance в Lighthouse

#почитать

Все дизайнеры обожают сайт awwwards – площадку с платной публикацией, где собраны самые классные работы в сфере веб-дизайна. А поскольку мы душнилы по части performance, мы собрали почти 5000 сайтов, определили их фреймворк и проверили производительность в Lighthouse.

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

Паттерны для эффективного манипулирования DOM с ванильным JavaScript

#почитать

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

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

Элегантная реализация Long Press обработчика с помощью CSS анимации

#почитать

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

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

Практикум. Загрузка файла с прогресс-баром

#почитать

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

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

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

За хорошим UI следует хороший UX

#почитать

Когда Google изменила оттенок синего в рекламных ссылках, она получила дополнительный годовой доход в размере 200 миллионов долларов.

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

HTML — язык программирования. Убедите меня в обратном

#почитать

HTML — самый значимый язык вычислений, программирования или чего-либо еще, из когда-либо созданных.

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

@scope и блоки стилей HTML — это мощное сочетание

#почитать

Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации.

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

Rust vs JavaScript: повышение производительности на 66% с помощью WebAssembly

#почитать

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

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