[Перевод] Почему стоит использовать тег <picture> вместо <img>

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

читать далее

[Перевод] Примеры применения переменных CSS на практике

Когда я впервые попробовал использовать переменные CSS, у меня не было полного представления об их возможностях. Правильное их использование позволяет существенно сократить время и трудозатраты на

читать далее

[Перевод] HTMHell — адовая разметка

Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов. Каждая заметка включает сам фрагмент плохого кода, который дополняется объяснениями, в чём именно

читать далее

[Перевод] Контейнерные запросы в CSS

Как фронтенд-дизайнер я за последние 6 лет не был так взволнован новой CSS-функцией, как сейчас. Благодаря усилиям Мириам Сюзанны и других умных людей прототип контейнерных запросов можно включить в

читать далее

[Перевод] Как обеспечить глассморфизм с помощью HTML и CSS

Вы, наверное, подумаете — ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того? В прошлом году мы познакомились с нейморфизмом, который до сих пор является довольно

читать далее

Малоизвестные, но крутые атрибуты в HTML

Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF.

читать далее

[Перевод] Создание видеочата с помощью Node.js + Socket.io + WebRTC

Сегодня, специально к старту нового потока по веб-разработке, поделимся с вами туториалом, из которого вы узнаете, как создать видеочат с помощью JavaScript и NodeJS. Также вы научитесь использовать

читать далее

[Перевод] Вы можете создавать эти элементы, не используя JavaScript

Мы привыкли создавать некоторые элементы пользовательского интерфейса с помощью JavaScript, например аккордеоны, всплывающие подсказки (тултипы), усечение текста и т. д. Но, поскольку HTML и CSS

читать далее

Оптимизация графики в Voximplant Kit

Что делать, если сценарий крутой и сложный, но из-за этого начинает тормозить? Данным вопросом задались наши разработчики Voximplant Kit и придумали функцию оптимизации. Продолжая серию обновлений

читать далее

[Перевод] Веб-компоненты проще, чем вы думаете

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

читать далее

Что такое @font-face на самом деле

После очередного увиденного: font-weight: normal; font-family: BrutalType-Bold, sans-serif; я понял, что что-то не так в датском королевстве. Давайте попробуем разобраться, что такое @font-face на

читать далее

SEO-friendly HTML для верстальщика

В этой статье не будет подробного разбора всех аспектов SEO-friendly сайта. Я собрал здесь лишь тот объем информации, с которым мне необходимо было познакомиться для решения SEO-задач в компании

читать далее