Frontend + Weekly №2: Выпущен Puppeteer 1.0, Держите webpack быстро в Slack, Prisma

Лучшие статьи, ссылки и новости, связанные с Frontend-разработкой, и многое другое, доставляемые один раз в неделю. Все ссылки в этом выпуске собраны из Medium, Hacker News, Reddit, Twitter, MyBridge и т. Д.

Больше проблем можно найти в Frontend + Weekly Repository.

Новости

  • Выпущен Speedometer 2.0: В 2014 году команда WebKit в Apple выпустила Speedometer 1.0, эталон скорости отклика веб-приложений. На прошлой неделе был выпущен Speedometer 2.0 - инструмент для тестирования скорости отклика современных веб-приложений, обновленный и улучшенный в соответствии с современными стандартами.
  • Puppeteer 1.0 Released: Chromium 65, API покрытия кода JS / CSS, настройка PDF, поддержка XPath, доступ к протоколу raw devtools.
  • JQuery 3.3.0 Released: Прошло некоторое время с момента последнего выпуска jQuery, но команда Core не бездельничала, они больше сосредотачиваются на том, что можно удалить, а не добавить. В новой версии методы .addClass (), .removeClass () и .toggleClass () теперь принимают массив классов.
  • Доступен Angular 5.2: выпущена версия Angular 5.2.0. Это второстепенный выпуск, который заменяет 5.1 и содержит множество исправлений. В этой версии они улучшают проверку типов для шаблонов, добавляют поддержку TypeScript 2.6 и улучшают параметры маршрутизатора и наследование данных.

Руководство

  • Что нового в Vue Devtools 4.0: всего несколько дней назад было выпущено большое обновление для Vue Devtools, в этой статье мы рассмотрим новые функции и улучшения. Изменения включают в себя редактируемые данные компонента, открытие компонента в редакторе, отображение исходных имен компонентов, упрощение проверки компонентов, фильтрация событий по компонентам, сворачиваемые инспекторы и т. Д.
  • Соглашения об именах CSS, которые сэкономят вам часы на отладку: чертовски сложно поддерживать CSS, плохо написанный CSS быстро превратится в кошмар. Вот несколько соглашений об именах, которые избавят вас от стресса и сэкономят бесчисленные часы.
  • Отслеживание веб-страниц только с использованием CSS (без JS): эта статья является доказательством концепции отслеживания / анализа веб-сайтов с использованием только CSS и без Javascript. Мы можем собрать некоторую базовую информацию о пользователе. Используя этот метод, можно отследить, когда пользователь впервые переходит по ссылке или наводит курсор на поле в первый раз.
  • Обновление проекта create-react-app до настройки разделения кода SSR +: с момента своего создания create-react-app является отличным инструментом для быстрого прототипирования приложений React, демонстраций и тестирования различных функций или методов. К счастью, мы можем улучшить ситуацию, даже не выбрасываясь. Попробуем проделать это шаг за шагом. Вот что мы расскажем: рендеринг на стороне сервера, разделение кода с возможностью реагирования, разделение кода на сервере, использование chunkNames webpack.

Инженерные практики

  • Держите webpack быстро: практическое руководство для повышения производительности сборки: Webpack - отличный инструмент для объединения ресурсов внешнего интерфейса, но его природа, включающая батареи, и множество сторонних инструментов могут затруднить оптимизацию. Этот пост представляет собой практическое руководство, предлагающее то, что мы узнали на нашем пути к более быстрой сборке. Ребята из Slack делятся своим опытом по измерению стоимости сборки, распараллеливанию процесса сборки, уменьшению нагрузки на слова, использованию кеша, инвестированию в оборудование и т. Д.
  • CSS Grid + Flexbox для решения реальных проблем: недавно мне дали адаптивный дизайн, который выглядел сложным, так как элементы менялись в порядке, а макеты менялись в разных окнах просмотра. Этот новый дизайн выглядел сложным, пока мы не подумали о нем в терминах CSS Grid и FlexBox. Проблемой для этого будет поддержка Internet Explorer 11 и Safari 9+. Выделив сложности дизайна, мы покажем CSS, необходимый для поддержки современных браузеров, затем добавим поддержку IE и, наконец, заставим его работать в Safari 9 + 10.0.
  • Пять ловушек, которых следует избегать при модульном тестировании Vue.js: Модульное тестирование - это самостоятельный навык, и он может не быть вашим приоритетом, пока вы изучаете новый язык или новую структуру. В блоге автор покажет вам конкретные шаги, которые вы можете использовать в повседневной работе, пройдя по примерам Vue.js, и поможет вам избежать пяти ловушек: ожидание до конца, тестирование неправильных вещей, двойное тестирование. , структурная стыковка, тестирование всего.

Под капотом

  • Понимание исходного кода React: React предлагает простой и интуитивно понятный способ программирования интерфейсных приложений со всеми движущимися частями, сходящимися в форме состояний. Эта серия статей посвящена внутренней работе React. В первой статье мы начнем с рассмотрения одного из критических путей React с рендеринга простого компонента, за которым следует компонент класса.
  • Как Node загружает встроенные модули: в предыдущем блоге автор начал смотреть, как был инициализирован основной процесс Node. Там происходило довольно много всего. Одна из вещей, которая особенно привлекла мое внимание, была ссылка на функцию, которая, казалось, загружала встроенные модули во время фазы инициализации основного процесса Node.
  • JS-вещи, о существовании которых я никогда не подозревал: на днях я читал документацию по MDN и обнаружил эти JS-функции и API, о существовании которых я даже не подозревал. Итак, вот краткий список этих вещей, полезных или нет - изучение JS, похоже, никогда не заканчивается. Существуют операторы меток, оператор void, оператор запятой, с условным оператором, API интернационализации, оператор конвейера, параметры setTimeout () и т. Д.

Открытый исходный код

  • After.js: фреймворк, похожий на Next.js, для серверных приложений React, созданных с помощью React Router 4. Next.js великолепен, но его система маршрутизации не устраивает автора, поэтому он создал After.js, чей цели - маршруты - это просто компоненты и не имеют / не должны иметь ничего общего со структурой папок.
  • Dialog-polyfill: dialog-polyfill.js - это полифилл для <dialog> и <form method="dialog">. <dialog> - это элемент для всплывающего окна на веб-странице, включая модальный параметр, который сделает остальную часть страницы инертной во время использования. Это может быть полезно для блокировки взаимодействия пользователя до тех пор, пока он не ответит вам, или для подтверждения действия. См. Спецификацию HTML.
  • Scrollama: Scrollama - это современная и легкая библиотека JavaScript для прокрутки с использованием IntersectionObserver в пользу событий прокрутки.
  • ДЖАРВИС: J.A.R.V.I.S. (Just A Rather Very Intelligent System) поместит в ваш браузер всю необходимую информацию из вашей сборки веб-пакета, будь то в dev или prod. Он во многом вдохновлен другими панелями управления веб-пакетами, и основная идея не оригинальна, но вот некоторые особенности: показывает количество импортированных модулей ES Harmony, которые могут быть древовидными, и CJS, которые нет, показывает, насколько хорошо работают ваши активы в 12 различных типах подключения.
  • 1Backend: 1Backend - это платформа, предназначенная для упрощения развертывания, запуска и поддержки лямбда-функций / микросервисов. Это позволяет вам запустить новое живое приложение за секунды - после выбора вашего технического стека (например, Go с доступом к базе данных SQL) вы получите пустое приложение, которое уже работает и может быть вызвано извне (через HTTP). На данный момент он поддерживает Go, JavaScript, TypeScript и MySQL.
  • Prisma: Prisma может превратить вашу базу данных в GraphQL API. Prisma позволяет вам разработать модель данных и получить готовый к работе GraphQL API за считанные минуты. Prisma GraphQL API предоставляет мощные абстракции и строительные блоки для разработки гибких, масштабируемых бэкэндов GraphQL: типобезопасный API, моделирование данных с декларативным SDL, API реального времени, расширенная композиция API и работает со всеми интерфейсными фреймворками.