Добро пожаловать в третье издание калейдоскопа Frontenders. Я почти думал, что не выживу на этой неделе. Жизнь…

На этой неделе адаптивные изображения, инструменты для наполнения груди, несколько новых выпусков, TC39 и сообщество разработчиков, а также эпизоды подкастов. Уже сегодня поздно, но я надеюсь, что вам все равно понравится.

Чтение на выходных

Удаление отрицательного воздействия высоты линии

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

Теперь вы вошли в мир смещения пикселей, отрицательных полей и трюков с позиционированием. Что ж, нет, мы все можем вздохнуть с облегчением. Благодаря изобретательности Кевина Пауэлла у нас есть инструмент для обрезки текста. Я искренне надеюсь, что это разожжет огонь, который даст нам такой контроль изначально через стандарт (ведется ли такая работа уже?). text-crop: narrow; кто-нибудь?

Исследование вовлеченности разработчиков TC39

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

Документирование компонентов

За последние два года или около того в этой сфере произошло многое. Существует так много инструментов для создания систем дизайна / библиотек шаблонов, что часто теряешься в выборе одного из них.

Находясь в процессе создания кодовой базы клиентского интерфейса для MDN Web Docs, у меня есть личный опыт в этом. Однако это невероятно важно, и серия статей Натана Кертиса, посвященных особенностям его создания, своевременна и невероятно полезна. Даже если вы не являетесь человеком, ответственным за его создание в своей компании, это того стоит.

В разделе Обзор инструментов далее в этом посте я разместил несколько ссылок на инструменты, специально предназначенные для автоматизации большей части этого процесса при работе с кодовыми базами React или Vuejs.

Возвращение к сжатым изображениям

Сжатие изображений - это техника Даана Джобсиса, позже определенная как сжатые изображения людьми из группы Filament. Это метод, пытающийся наилучшим образом решить проблему отзывчивых изображений. В то время не было собственного решения для этого, поэтому вместо стандартной реализации на основе браузера возникли различные методы.

Несмотря на то, что теперь у нас есть элемент picture, я все еще не вижу, чтобы он широко использовался в Интернете. В этой статье Тим Кадлец пересматривает вышеупомянутую технику и утверждает, что нам больше не нужно иметь дело с компромиссами, связанными с этой техникой. Вместо этого мы можем принять новые стандарты, такие как элемент picture, srcset и дескрипторы плотности.

Чтобы узнать больше об атрибутах srcset и sizes, перейдите к статье Джейка Арчибальда Анатомия адаптивных изображений

Инструмент Roundup

Гид по стилю жизни

Как упоминалось выше, я недавно узнал о конструкторе Vuejs Design System и, покопавшись в основном репозитории, я узнал, что он состоит из нескольких библиотек. Один из них - vue-styleguidist, основанный на react-styleguidist. Итак, создаете ли вы с помощью Vuejs или Reactjs, эти инструменты позволяют автоматизировать большую часть процесса создания руководства по стилю.

Сонарвал

По сути, он заявлен как линтер для Интернета и был создан JS Foundation. С веб-сайта:

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

Помимо веб-сайта, вы также можете запустить сонар как интерфейс командной строки и определить свой собственный набор правил.

Инструменты для адаптивных изображений

Следуя приведенной выше статье Тима, я нашел пару инструментов, которые могут помочь в вашем набеге на создание адаптивных изображений.

Во-первых, инструмент командной строки от Filament Group для анализа эффективности использования отзывчивой разметки изображений в разных окнах просмотра ~ imaging-heap

Второй инструмент - букмарклет линтера от Мартина Освёгера, который вы можете запустить на любой странице, чтобы проверить типичные ошибки и передовой опыт, связанный с адаптивными изображениями ~ RespImageLint

Ремонт

Управление зависимостями в проекте может быть утомительной задачей. Однако это чрезвычайно важная задача для обеспечения стабильности и безопасности вашего проекта в целом. Github предлагает способ отслеживать зависимости и получать уведомления, когда уязвимость безопасности была обнаружена в одной из ваших зависимостей.

Renovate стремится сделать шаг вперед, сделав столько или меньше процесса, сколько вам нужно. Он неуверен, но предлагает некоторые разумные значения по умолчанию. Вы можете добавить Renovate с торговой площадки Github во все репо или выборочно.

Известные релизы

Подкасты

Подкаст веб-платформы ~ Руководство разработчика в мир веб-стандартов

Следуя ранее упомянутому в опросе разработчиков TC39, это отличный эпизод из подкаста веб-платформы, целью которого является демистификация мира веб-стандартов.

В этот мир нас ведет Джори Берсон из Bocoup, которая сама является членом JS Foundation.

Слушайте сейчас

Журнал изменений ~ Бремя открытого исходного кода с Джеймсом Лонгом

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

В этом выпуске ведущие журнала изменений беседуют с Джеймсом Лонгом, создателем, среди прочего, Nunjucks и Prettier именно на эту тему.

Слушайте сейчас

Журнал изменений ~ Автоматические обновления зависимостей

И если по волшебству, в выпуске этой недели журнала изменений к команде присоединяется создатель вышеупомянутого Renovate. Итак, если вы не уверены, стоит ли использовать Renovate на пробу, узнайте все подробности и загляните в будущее этого инструмента.

Слушайте сейчас

На этой неделе все. Если вы наслаждаетесь долгими выходными, удачи :) Увидимся на следующей неделе. Оставайтесь любопытными!