Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая. — Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5. — Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений. – Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс,…

Подробнее
Приглашаем на бесплатный челлендж по веб-разработке

Приглашаем на бесплатный челлендж по веб-разработке

Коллеги, давайте все задачи уже после майских. Потому что на майских позанимаемся веб-разработкой на майском челлендже. За 10 дней вы выучите основы вёрстки на HTML и CSS и программирования на JavaScript и PHP. Если вы уже что-то умеете — структурируете, если ещё не умеете — сам Тим Бёрнерс-Ли велел (возможно, мы не проверяли). Главный приз — бесплатное обучение на курсе «HTML и CSS. Профессиональная вёрстка сайтов». На него претендуют все участники, дошедшие до конца. Подробности под…

Подробнее
Фронтенд-новости №3. Node.js v18.0.0, аннотации типов в JavaScript, СSS Toggles

Фронтенд-новости №3. Node.js v18.0.0, аннотации типов в JavaScript, СSS Toggles

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 18 — 24 апреля 2022. Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой. Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles - декларативный…

Подробнее
Фронтенд-новости №2. Новинки CSS в 2022, ShadowRealms и холивары про async/await

Фронтенд-новости №2. Новинки CSS в 2022, ShadowRealms и холивары про async/await

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 11 — 17 апреля 2022. Читать далее

Подробнее
Всё о веб-анимациях в 2022

Всё о веб-анимациях в 2022

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards. Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею

Подробнее
Фронтенд-новости №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, даже если не занимаются этим на работе. Ну знаете, все эти «сделай кнопку покруглее», «сделай текст более красненьким», или кому-то из друзей сайт собрать. Авторы статей сталкивались с редактором Хабра (особенно старым). Или вот, например, наш выпускник, бывший системный администратор, пишет: Когда я работал сисадмином, однажды со словами «Тыжпрограммист, помоги!» ко мне обратился друг, которому нужен был интернет-магазин. Я кое-как…

Подробнее
Никто не знает, как работает каскад

Никто не знает, как работает каскад

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так? Неожиданный для многих ответ сразу после ката. Там же подробный рассказ о том, как работает каскад — фильтрует, обрабатывает и вычисляет значения свойств. Например, что будет, если указать в трёх разных местах цвет одного и того же элемента. p.s. Если у вас отключены картинки в ленте на Хабре, то сразу заходите под кат — тест дублируется и…

Подробнее
Типы значений в CSS. Абсолютные, относительные и всякие другие

Типы значений в CSS. Абсолютные, относительные и всякие другие

Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы. Читать далее

Подробнее
Как мы делаем курсы по вёрстке. Опыт из первых рук

Как мы делаем курсы по вёрстке. Опыт из первых рук

Среди разработчиков курсов ходит легенда об авторе, который смог перед стартом курса полностью реализовать учебный проект и подобрать материалы, опираясь на код этого проекта. Годом позже этот автор собрал все яйца в «Ну, погоди» и посмотрел финальный мультик, а ещё через год полностью прошёл тетрис. Пытались ли вы посадить рядом трёх взрослых мужиков и сделать так, чтобы они договорились о том, каким должен быть код? Ведь самое сложное не написать код, а договориться о конечном варианте.

Подробнее
Критерии качества вёрстки 2021

Критерии качества вёрстки 2021

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе. С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали. Сейчас пришло время обсудить с сообществом обновлённые…

Подробнее