Ежемесячное обновление веб-разработки 6/2018: Сложность, DNS через HTTPS и push-уведомления

В наши дни мы видим сложность в каждом уголке веб-проекта. Мы прочитали довольно много статей о том, насколько сложной стала конкретная технология, и мы обсуждаем это снова и снова. Приходя из того времени, когда мы загружали веб-сайты через FTP и не имели git или чего-то подобного, теперь мы живем во времена, когда у нас есть система сборки, транспиляторы, фреймворки, тесты и CI даже для самых маленьких проектов, это легко понять. . Но, с другой стороны, за последние 15 лет веб-разработка настолько выросла, что мы уже не можем сравнивать сегодняшний день с прошлым . И хотя может показаться, что в прошлом некоторые вещи были проще, мы пренебрегаем преимуществами и бесчисленными возможностями, которые у нас есть сегодня. Когда мы тогда не писали тесты, у нас просто не было тестов — то есть не было надежного способа проверки на успех. Когда у нас не было процесса развертывания, было легко загрузить новую версию, но так же легко что-то сломать — и это случалось намного чаще, чем сегодня, когда действует система непрерывной интеграции.

Джеффри Зельдман написал по этому поводу интересную статью: «Культ сложного» описывает, как мы теряемся в ненужных деталях и часто пытаемся слишком много думать о проблемах . Мне нравится создавать системы, которые не слишком сложны, но демонстрируют приличную долю ответственности (когда речь идет об этике, конфиденциальности, безопасности, удобстве работы пользователей и производительности) и надежно работают (тесты, развертывание, доступность и снова выступление). Думаю, проблема поиска правильного баланса не исчезнет в ближайшее время. Сложность есть везде — нам просто нужно решить, является ли она полезной сложностью или она была добавлена ​​просто потому, что она была проще, или потому, что мы перепроектировали исходную проблему.

Новости

• Предстоящая версия Safari 12 была представлена ​​на конференции Apple WWDC. Вот что нового: значки на вкладках, надежные пароли, а также управление генератором паролей через HTML-атрибуты, включая управление двухфакторной аутентификацией, просмотр 3D- и AR-моделей, полноэкранный API на iPad, font-display и, что очень важно, Intelligent Tracking Prevention 2.0, который является более строгим, чем когда-либо, и может оказать значительное влияние на функциональность существующих веб-сайтов.
• Безголовая библиотека автоматизации Chrome Puppeteer вышла в версии 1.5. Он включает в себя контексты браузера для изоляции файлов cookie и других данных, обычно используемых между страницами, а Workers теперь также можно использовать для взаимодействия с Web Workers.
• Google выпустила Lighthouse 3.0, третью основную версию своего инструмента анализа производительности, которая включает новый интерфейс отчетов, некоторые изменения в оценке, экспорт CSV и измерение First Contentful Paint.
• Chrome 67 уже здесь, предлагая прогрессивные веб-приложения для настольных компьютеров, а также поддержку Generic Sensor API и расширение API управления учетными данными для поддержки аутентификаторов U2F через USB.
• За последние месяцы мы заметили некоторые изменения в интерфейсах безопасности браузеров. Во-первых, они выделили сайты, предлагающие защищенное соединение (HTTPS). Затем они решили указать небезопасные сайты, и теперь Chrome объявил о грядущих осенью изменениях, которые сделают HTTPS стандартом по умолчанию, пометив HTTP-страницы как «небезопасные».

Общий

• В «Культе сложного» Джеффри Зельдман пишет о том, как мы часто забываем, что простота — это ключ и цель всего, что мы делаем, общая цель проектов и жизни. Он объясняет, почему этого так трудно достичь и почему гораздо проще — и заманчивее — культивировать сложные системы. Очень хорошее чтение и, безусловно, часть, которую я добавлю в свой «вечнозеленый» список.
• Хейдон Пикеринг поделился новой, очень интересной статьей, которая учит правильно создавать веб-компонент: на этот раз он объясняет, как создать инклюзивный и отзывчивый модуль «Карточка».

Пользовательский интерфейс/UX

• Cool Backgrounds — крутой побочный проект Moe Amaya. Это онлайн-генератор полигональных фонов с градиентами, который может генерировать множество вариантов и форм. Просто красиво.

Инструменты

• Бен Фрейн делится некоторыми полезными приемами редактирования текста, которые доступны почти во всех современных редакторах кода.

Безопасность

• По мере того, как атаки на безопасность через DNS набирают популярность, DNS через HTTPS становится все более и более важным. Лин Кларк объясняет технологию с помощью мультфильма, чтобы ее было легче понять.
• Windows Edge сейчас тестирует поддержку файлов cookie того same-site . Атрибут для еще большей блокировки файлов cookie уже доступен в Firefox и Chrome, поэтому Safari — единственный крупный браузер, которому все еще необходимо реализовать его, но я думаю, что он также появится в их сборках Tech Preview очень скоро.

Конфиденциальность

• ACLU обнаружил, что Amazon теперь официально объединилась с правоохранительными органами и предоставляет технологию массового распознавания лиц, которая уже используется в городах по всему миру.

Веб-производительность

• KeyCDN попросил 15 человек, которые хорошо разбираются в веб-производительности, поделиться с читателями своими лучшими советами. Теперь они поделились этой статьей, содержащей множество полезных советов по производительности на 2018 год, в том числе несколько слов от меня.
• Стефан Юдис обнаружил, что мы уже можем предварительно загружать модули ECMA Script в Chrome 66, добавляя link rel="modulepreload" .

Доступность

• Сравнительно легко создать счетчик загрузки — например, для одностраничного приложения во время загрузки — но мы редко задумываемся о том, чтобы сделать их доступными. Стюарт Нельсон теперь объясняет, как это сделать.
• Пол Стэнтон рассказывает, какие инструменты доступности мы должны использовать для достижения наилучших результатов.

JavaScript

• JavaScript в последнее время подвергается нападкам со стороны людей, предпочитающих Elm, Rust, TypeScript, Babel или Dart. Но JavaScript точно не хуже, как объясняет Андреа Джаммарки на отличных примерах. Эта статья также полезна для всех, кто использует один из этих других языков, поскольку она показывает пару подводных камней, о которых нам следует знать.
• Для многих проектов мы хотим использовать аналитику или другие скрипты, которые собирают личную информацию. С введением GDPR это стало намного сложнее. Yett — хороший инструмент JavaScript, который позволяет блокировать выполнение таких ресурсов до тех пор, пока пользователь не согласится на это.
• Райан Миллер создал новую публикацию под названием «The Frontendian», в которой представлено одно из лучших объяснений и руководств по CORS, с которыми я когда-либо сталкивался.
• Ребята из Microsoft создали красивую интерактивную демонстрационную страницу, чтобы показать, как могут и должны выглядеть веб-пушечные уведомления. Если вы еще не освоились с технологией, это отличный учебник для начинающих о том, как все это работает и как создать интерфейс, который не мешает пользователям.
• Filepond — это библиотека JavaScript для загрузки файлов. Он отлично выглядит и поставляется с множеством адаптеров для React, Vue, Angular и jQuery.
• Вышла версия React 16.4, которая привнесла в библиотеку новую функцию: события указателя. Они облегчат взаимодействие с пользователем и уже давно востребованы.

CSS

• Оливер Шондорфер рассказывает, как начать с вариативных шрифтов в Интернете и как мы можем стилизовать их с помощью CSS. Довольно полное резюме того, что вам нужно учитывать, а также возможные подводные камни.
• С предстоящей macOS Mojave, поддерживающей «темный режим», Safari начнет автоматически устанавливать цвет фона веб-сайтов на черный цвет, если цвет background-color не задан явно. Это отличное напоминание о том, что браузеры могут устанавливать и изменять свои стили по умолчанию, и что нам нужно тщательно устанавливать значения по умолчанию для нашего сайта. Я все еще надеюсь, что «темный режим» будет доступен для CSS Media Query, чтобы мы могли официально добавить его поддержку.
• Рафаэла Ферро рассказывает, как использовать CSS Grid для создания фотогалереи, которая не только хорошо выглядит, но и действительно великолепна. В этой статье есть ответы на многие вопросы, которые я регулярно получаю, говоря о компоновке Grid.
• Марчин Вичари объясняет, как мы можем создать темную тему за короткое время с помощью современных пользовательских свойств CSS.

Рабочая жизнь

• Антон Стен писал о моральных последствиях наших приложений. Содержательное объяснение того, почему времена «двигаться быстро и ломать вещи» определенно прошли, поскольку мы имеем дело с искусственным интеллектом, социальными сетями, влияющими на жизнь людей, и вопросами конфиденциальности, соблюдение которых обеспечивается GDPR.
• В Basecamp теперь есть новый тип диаграммы для отображения статуса проекта: так называемая «диаграмма холмов» добавляет лучший контекст, чем простой индикатор выполнения.
• Бен Вердмюллер делится своими мыслями о резюме и о том, как оно всегда не отражает, кто вы, чем занимаетесь и почему вас следует нанять.

Надеюсь, вам понравилось это ежемесячное обновление. Следующий запланирован на 13 июля, так что следите за обновлениями. А пока, если вам нравится то, что я делаю, рассмотрите возможность финансовой помощи мне в финансировании Списка для чтения по веб-разработке.

Хорошего дня!

— Ансельм