Статьи

Смогут ли React-хуки заменить компоненты высшего порядка (HOC)?

Перевод статьи Do React Hooks Replace Higher Order Components (HOCs)? с сайта medium.com для css-live.ru, автор — Эрик Эллиотт

«Мандаринка» — снимок Малкольма Карлоу (CC-BY-2.0)

Как только API React-хуков вышел, стало появляться много вопросов о том, сможет ли он заменить другие общие библиотеки и паттерны в экосистеме React+Redux.
Хуки задумывались как замена классам и еще одна прекрасная альтернатива для композиции поведения в отдельные компоненты. Компоненты высшего порядка также полезны для композиции поведения. Очевидно, что их задачи где-то пересекаются, так не заменить ли нам компоненты высшего порядка хуками? Более чем ясно, что некоторые HOC-и они заменить могут. Но нужно ли заменять все ваши HOC-и на React-хуки?

Смогут ли React-хуки заменить Redux?

Перевод статьи Do React Hooks Replace Redux? с сайта medium.com для css-live.ru, автор — Эрик Эллиотт

Вкратце: хуки хороши, но Redux они не заменят

«Мандаринка» — снимок Малкольма Карлоу (CC-BY-2.0)

Как только API React-хуков вышел, стало появляться много вопросов о том, сможет ли он заменить Redux.

Как по мне, хуки довольно слабо пересекаются с Redux. Они не дают никакого нового волшебства для состояний, а лишь улучшают API для того, что уже было в React. Но с API хуков пользоваться нативным React-инструментарием для состояния стало гораздо удобнее, а поскольку он – еще и более простая замена для классовой модели, мне теперь гораздо чаще удается к месту использовать состояние компонента

Чтобы мои слова стали понятнее, давайте сначала разберемся, зачем вообще нам бывает нужен Redux.

Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS

Перевод статьи Using CSS Custom attributes generated by JavaScript as a handover mechanism с сайта medium.com для css-live.ru, автор — Кристиан Хайльман

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

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

CSS и производительность сети

Перевод статьи CSS and Network Performance с сайта csswizardry.com, опубликовано на css-live.ru с разрешения автора — Гарри Робертса.

Несмотря на то, что сайт уже больше десяти лет называется «CSS-волшебство», за последнее время на нём не было ни одной статьи, связанной с CSS. Давайте я это исправлю, совместив две мои любимые темы: CSS и производительность.

CSS критически важен для отображения страницы — браузер не начнет рендеринг, пока не найдет, загрузит и распарсит весь CSS — поэтому крайне важно как можно скорее получить его на устройстве пользователя. Любая задержка на критическом пути скажется на нашей начальной отрисовке, заставив пользователя видеть пустой экран.

В чём главная проблема?

Собственно, вот почему CSS так важен для производительности:

  1. Браузер не может отобразить страницу до построения дерева отрисовки;
  2. дерево отрисовки получается из DOM и CSSOM вместе взятых;
  3. DOM — это HTML плюс любой блокирующий JavaScript, который на него влияет;
  4. CSSOM — все CSS-правила, применённые к DOM;
  5. с помощью атрибутов async и defer можно легко сделать JavaScript неблокирующим;
  6. сделать CSS асинхронным намного сложнее;
  7. поэтому важно помнить, что скорость загрузки страницы определяется самой медленной таблицей стилей.

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 2)

Перевод статьи Improve Your Debugging Skills with Chrome DevTools (Part 2) с сайта telerik.com для css-live.ru, автор — Питер Милчев

Chrome devtools

В этой статье мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Вы научились проверять сгенерированный HTML и применённые стили? Уже смело можете отлаживать JavaScript в браузере? Надеюсь, поскольку в этой серии мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Освоив новые навыки, мы поэкспериментируем с базовыми примерами Kendo UI, а в конце статьи возьмём реальный пример jQuery Grid, чтобы отточить на нем свежеприобретенные знания.

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 1)

Перевод статьи Improve Your Debugging Skills with Chrome DevTools с сайта telerik.com для css-live.ru, автор — Питер Милчев

Chrome devtools

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

Бывали ли у вас неприятности с неверной работой JavaScript? Доводилось ли вам биться с подгонкой стилей элементов на своей странице? Бесит ли вас, когда страницу каждый раз надо тестировать на разных устройствах?

Если ответили «Да» хотя бы на один вопрос, то эта статья для вас. Вот наши полезные приемы и советы, которые помогут вам всё это побороть и повысить вашу продуктивность.

Почему семантический HTML важен, и как TypeScript помогает это понять

Перевод статьи Understanding why Semantic HTML is important, as told by TypeScript с сайта medium.com для css-live.ru, автор — Мэнди Майкл

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

Из-за того, что внимание во фронтенд-разработке всё больше сосредотачивается на JavaScript, а про HTML все как будто забывают, недавно мне пришлось потратить какое-то время, пытаясь понять, как объяснить разработчикам, нацеленным на JavaScript, почему важно изучать и понимать HTML

Это натолкнуло меня на идею:

«Почему семантический HTML важен, и как Typescript помогает это понять»

Решено с помощью CSS! Логическая стилизация на основе числа элементов

Перевод статьи Solved with CSS! Logical Styling Based on the Number of Given Elements с сайта css-tricks.com для CSS-live.ru, автор — Юна Кравец

Эта статья третья из серии про мощь CSS.

Все статьи серии:

А вы знали, что CSS — Тьюринг-полный? А что его можно использовать для вполне серьёзной логической стилизации? Можно-можно! И не нужно закладывать логику для стилевых правил в JavaScript, или навешивать скриптом классы, для которых вы задаете стили. Во многих случаях CSS сам справится с этим. Я до сих пор ежедневно открываю новые CSS-трюки, и этим CSS нравится мне всё больше и больше.

Как мы делали веб-интерфейс для Google Photos: заглядываем под капот

Перевод статьи Building the Google Photos Web UI с сайта medium.com для CSS-live.ru, автор — Антин Харасимив

Несколько лет назад мне посчастливилось стать инженером в команде Google Photos и поучаствовать в их первом запуске в 2015-м. Множество людей вложило силы в этот продукт — дизайнеры, продукт-менеджеры, исследователи и бесчисленные инженеры (в области Android, iOS, веба и серверной части), если упомянуть лишь некоторые важные роли. Я отвечал за пользовательский веб-интерфейс, а точнее, за сетку с фотографиями.

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

Введение в API MutationObserver из JavaScript

Перевод статьи An introduction to the JavaScript MutationObserver API с сайта benfrain.com, автор — Бен Фрейн.

Недавно мне довелось немного поиграть с JavaScript-овым API MutationObserver и я был приятно шокирован. Я уже наметил те места, где я, наверное, мог бы сделать код чище с помощью него. Если не слышали о нём раньше, вот небольшой пример

MDN описывает интерфейс MutationObserver так:

С помощью интерфейса MutationObserver можно наблюдать за изменениями, происходящими в DOM-дереве.

Вы не сильно ошибётесь, если представите их в качестве обработчиков событий для изменений DOM-элементов.

Поддержка также хорошая. IE11 и все вечнозелёные браузеры на десктопе. На мобильных это Android 4.4 и выше и iOS6.

Как создавать Vue-компоненты, словно профи

Перевод статьи How To Build Vue Components Like A Pro ? с сайта blog.bitsrc.io для css-live.ru, автор — Rajat S

Vue — один из самых быстро растущих фреймворков в современном мире. Представленный как «интуитивный, быстрый и компонентный» инструмент на базе паттерна MVVM для построения интерактивных интерфейсов, Vue стал любимым JavaScript-фреймворком для разработки интерактивных веб-приложений и интерфейсов для каждого разработчика. Его 97 тыс. звёзд на GitHub с релиза в 2014 яркое тому подтверждение.

В отличие от Angular, который основан на старой доброй архитектуре Model-View-Controller (модель, представление, контроллер), Vue следует системе Model-View-View-Model (модель, представление, модель представления)

Компоненты и разделение ответственности

Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита

Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов.

Эффективная работа над стандартами, часть 2: трудный путь к компромиссу

Перевод статьи Effective Standards Work, Part 2: Threading the Needle с сайта infrequently.org для css-live.ru, автор — Алекс Рассел

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

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

Эффективная работа над стандартами, часть 1: оперативная обстановка

Перевод статьи Effective Standards Work, Part 1: The Lay Of The Land с сайта infrequently.org для css-live.ru, автор — Алекс Рассел

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

«Почему браузеры не соблюдают стандарты!» — задумчиво бормочет разработчик (заводя баг на chrbug.com). «Ведь смысл стандартизации — чтобы всё работало одинаково, в конце-то концов». Если что-то попало в Стандарт, то все его единообразно реализуют… верно?

Устойчивый, декларативный, контекстный (новый взгляд на сильные стороны CSS)

Перевод статьи Resilient, Declarative, Contextual с сайта keithjgrant.com для css-live.ru, автор — Кит Грант

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

Сегодня я подойду с другой стороны. Я взгляну на три основных характеристики CSS, которые отличают его от обычных языков программирования: устойчивость, декларативность и контекстуальность. Полагаю, что понимание этих аспектов CSS — ключ к мастерству в нем.