Фронтенд-новости №1

Фронтенд-новости №1

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 5—11 апреля. Спецификации Опубликован первый рабочий черновик (First Public Working Draft) Region capture. Последний призыв к рассмотрению предлагаемых изменений в Media Queries Level 3. W3C приглашает к реализации WebXR Device API. Спецификации preload становится отключенным черновиком (Discontinued Draft), чтобы продолжить развитие в HTML living standard. Письмо генерального директора W3С к 33-й годовщине…

Подробнее
Бесплатный интенсив «Основы HTML и CSS за 10 дней»

Бесплатный интенсив «Основы HTML и CSS за 10 дней»

Кажется, почти все на Хабре сталкивались с HTML и CSS, даже если не занимаются этим на работе. Ну знаете, все эти «сделай кнопку покруглее», «сделай текст более красненьким», или кому-то из друзей сайт собрать. Авторы статей сталкивались с редактором Хабра (особенно старым). Или вот, например, наш выпускник, бывший системный администратор, пишет: Когда я работал сисадмином, однажды со словами «Тыжпрограммист, помоги!» ко мне обратился друг, которому нужен был интернет-магазин. Я кое-как…

Подробнее
[Перевод] Как Discord реализовал навигацию клавиатурой по всему приложению

[Перевод] Как Discord реализовал навигацию клавиатурой по всему приложению

Мы делаем Discord доступным для каждого. В 2020 году мы многое сделали, чтобы значительно улучшить ассебилити в приложении. Остаётся ещё много работы, но мы уже сейчас можем рассказать об одном из наших последних проектов - Навигация по клавиатуре. Далее по катом. Читать далее

Подробнее
На пути к дизайн-системе: как мы сделали визуал и разработку почти единым целым

На пути к дизайн-системе: как мы сделали визуал и разработку почти единым целым

Привет, Хабр! Меня зовут Анатолий Долгов и я frontend-разработчик международной команды Учи.ру. Сегодня я расскажу, как мы успешно синхронизировали параметры дизайна и кода. Это упростило многие рабочие моменты, уменьшило количество неприятных ошибок и сделало нас ближе к внедрению полноценной дизайн-системы. Читать далее

Подробнее
[Перевод] Почему разработчики любят Bulma?

[Перевод] Почему разработчики любят Bulma?

5 причин для того чтобы использовать Bulma в вашем следующем проекте. Bulma это open-source, адаптивный и легковесный CSS фреймворк базирующийся на flexbox сетке. Этот новый фреймворк уже завоевал сердца многих разработчиков. Итак, в этой статье, я расскажу о пяти причинах, почему разработчики любят Bulma. Читать далее

Подробнее
[Перевод] Погружаемся в CSS: как использовать :where ()

[Перевод] Погружаемся в CSS: как использовать :where ()

Функция :where() помогает писать меньше кода, применять стили ко всему списку и снимает головную боль при использовании CSS reset. В статье разберёмся, как это работает, и посмотрим на примеры использования. Читать далее

Подробнее
Mozilla запустила платный сервис MDN Plus

Mozilla запустила платный сервис MDN Plus

Mozilla запустила новый платный сервис MDN Plus, который дополнит такие коммерческие инициативы, как Mozilla VPN и Firefox Relay Premium. Стоимость подписки составит $10 в месяц или $100 в год. Читать далее

Подробнее
Основы и практика CSS Grid Layout:  как использовать двумерную раскладку для повседневных задач

Основы и практика CSS Grid Layout:  как использовать двумерную раскладку для повседневных задач

Наш фронтенд-разработчик Данила Абрамов @DanilAbr подготовил материал для новичков и практикующих разработчиков, у которых не было возможности разобраться с Grid. В первой части статьи — основные CSS-свойства и принципы раскладки, без которых невозможно понять Grid. Если вы знакомы с основами, переходите сразу со второй части — там примеры решения реальных задач. Читать далее

Подробнее
Простые советы начинающему веб-дизайнеру. Бракуем макет

Простые советы начинающему веб-дизайнеру. Бракуем макет

Привет. В результате работы с начинающими веб-дизайнерами прослеживаются повторяющиеся ошибки — общие в не зависимости от среды разработки (опыт с figma и photoshop). Обсудим их. Эти советы очень простые и подойдут начинающим. Если вы опытный веб-дизайнер и знаете, например, что название рубрики заведомо ограничено в 8 символов, уже посылали шрифт, задумали ширину содержимого 1530px с пониманием дела, то вы большой молодец, а эта статья не для вас. Так как забраковать?

Подробнее
[Перевод] Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

[Перевод] Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам. Читать далее

Подробнее
[Перевод] CSS @layer — полное руководство по каскадным слоям

[Перевод] CSS @layer — полное руководство по каскадным слоям

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

Подробнее
Паттерны верстки. Как объединить верстальщиков и дизайнеров

Паттерны верстки. Как объединить верстальщиков и дизайнеров

Данная статья поможет улучшить взаимодействие между дизайнерами и верстальщиками для минимизации ошибок и повышения продуктивности работы. Работа богата практическими примерами. Она будет полезна специалистам разного профиля. Дизайн является основой качественной верстки и помогает успешно продолжить создание веб-приложения. Читать далее

Подробнее