Прокачиваем навыки отладки с помощью инструментов разработчика 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 элемент <чудесный>?

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона

Вчера был интересный разговор, который начала Сара Суайдан:

твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36:

Вот что я хотела бы увидеть в HTML:
<color value=“” />
Просто. Чрезвычайно полезно, особ. для дизайн-систем сегодня.

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

На правах Древнего Старожила Веба, я сел и пораздумывал над этим.

Почему семантический 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: специфичность — не каскад

Пролог (в котором едва обошлось без драки)

Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate:

Насколько хорошо вы знаете CSS? (эмодзи: ученик у доски)

При таких классах:

.red { color: red; }
.blue { color: blue; }

какого цвета будут эти дивы?

<div class="red blue">
<div class="blue red">

Решено с помощью 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 нравится мне всё больше и больше.

Стандарт для нестандартного

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

В какой-то момент оказалось, что такими нестандартными штуками в вебе достаточно активно пользуются. И бедным браузерам, чтобы не вылететь из конкурентной гонки, волей-неволей пришлось худо-бедно эту отсебятину поддерживать. Фактически, она стала стандартом де-факто. И практикам из WHATWG ничего не осталось, как написать для этих нестандартных штук свой стандарт, названный стандартом совместимости (Compatibility Standard). Чем же он нас порадует?

Как мы делали веб-интерфейс для 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.

Удивительный и неизвестный inline-block

Эта статья задумана как начало цикла про загадки, сюрпризы, малоизученные особенности и маленькие полезные секреты самого могущественного, пожалуй, свойства в CSS — свойства display. У нас уже были статьи про новинки этого свойства — значения contents (что это вообще, его сюрпризы, преимущества и подводные камни для доступности) и flow-root. Но и старые, давно знакомые (казалось бы) значения этого свойства таят в себе немало сюрпризов, подводных камней и удивительных открытий. Прежде всего, пожалуй, это значения с «приставкой» inline-: inline-flex, inline-grid, inline-table, и, наконец, наш старый знакомый inline-block.

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

Как создавать 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 (модель, представление, модель представления)

Химия CSS-гридов

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

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

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

Перевод статьи 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). «Ведь смысл стандартизации — чтобы всё работало одинаково, в конце-то концов». Если что-то попало в Стандарт, то все его единообразно реализуют… верно?