Лучшие статьи, ссылки и новости, связанные с развитием Frontend и многое другое, доставлены раз в неделю. Все ссылки в этом вопросе собираются из Средний , Hacker News , Reddit , Twitter , MyBridge , и т.д.
Больше вопросов можно найти в Frontend + еженедельный репозиторий Отказ
Новости
Спидометр 2.0 Вышел : В 2014 году команда WebKit на Apple выпустила спидометр 1.0, ориентир на отзывчивость веб-приложения. На прошлой неделе спидометр 2.0 выделяется, их эталон инструмент для современного интерфейса веб-приложения, обновляется и улучшился, чтобы соответствовать сегодняшним стандартам.
Кукла 1.0 выпущено : CHROMIUM 65, JS/CSS CODIC API API, настройка PDF, поддержка XPath, Access Raw devtools.
jquery 3.3.0 Вышел : Прошло некоторое время после последнего выпуска JQuery, но основная команда не была простаивающейся, они больше сосредоточены на том, что можно удалить, а не добавлять. В новой версии, .addclass (), .reemoveclass () и .toggleass () Способы теперь принимают массив классов.
Angular 5.2 Теперь доступно : Угловая версия 5.2.0 была выпущена. Это второстепенное высвобождение, которое является заменой для падения 5,1, содержащая много исправлений. В этой версии они улучшают проверку типов на шаблоны, добавляют поддержку TeampScript 2.6 и улучшают маршрутизатор PARAL & DATA DATANERALING.
Руководство
Что нового в Vue devtools 4.0 : Большое обновление было выпущено в Vue devtools всего несколько дней назад, в этой статье мы погрузимся в новые функции и улучшения. Изменения включают редактируемые данные компонента, открытый компонент в редакторе, показывают оригинальные имена компонентов, проверяющие компоненты только что стали легче, фильтровать события на компонент, разборные инспекторы и т. Д.
Конвенции CSS именования, которые сэкономят вам часы отладки : Дарно сложно поддерживать CSS, плохо написанные CSS быстро превратится в кошмар. Вот несколько конвенций именования, которые сэкономит вам немного стресса и бесчисленные часы вниз по линии.
Удаление веб-страницы только с использованием CSS (и нет JS) : Эта статья является доказательством концепции для отслеживания/аналитики веб-сайта, используя только CSS и без JavaScript. Мы можем собрать некоторую основную информацию о пользователе, используя этот метод, можно отслеживать, когда пользователь посещает ссылку в первый раз или охватывает в поле в первый раз.
Обновление проекта Create-React-App для настройки SSR + для разделения кода : С момента его создания, React-App-App – отличный инструмент для быстрого прототипирования приложений реагирования, демонстрации и тестирования различных функций или методов. К счастью, мы можем улучшить вещи даже без извлечения. Давайте попробуем сделать этот шаг за шагом. Это то, что мы будем охватывать: рендеринг на стороне сервера, расщепление кода с реактивным нагрузочным, кодовым расщеплением на сервере, используя в пользу Chunksnames WebPack.
Инженерные практики
Держите WebPack Fast: полевой гид для лучшей производительности сборки : WebPack – это блестящий инструмент для объединения фасовных активов, но его батареи, включающие в себя природу, а океан сторонних инструментов может затруднить оптимизм. Этот пост является полевым руководством, предлагающим то, что мы узнали на нашем пути к более быстрому сборку. Slack, ребята, поделитесь своим опытом по измерению стоимости сборки, распараллеливая процесс сборки, снижая словогрузку, используя кеш, вкладывая оборудование и т. Д.
CSS Grid + Flexbox Решая реальные проблемы : Недавно мне дали отзывчивый дизайн, который выглядел комплекс в том, как элементы изменяли порядок и макеты изменялись на разных видовых окнах. Этот новый дизайн выглядел сложным, пока мы не подумали об этом с точки зрения сетки CSS и Flexbox. Задача для этого будет поддерживать Internet Explorer 11 и Safari 9+. После освещения конструктивных сложностей мы покажем CSS, необходимые для поддержки современных браузеров, то мы добавим поддержку IE и, наконец, получите его для работы в Safari 9 + 10.0.
Пять ловушек, чтобы избежать при этом блок тестирования Vue.js : Тестирование подразделения – это навык самостоятельно, и он не может быть вашим приоритетом, пока вы изучаете новый язык или новую структуру. В блоге автор покажет вам конкретные шаги, которые вы можете использовать в своей повседневной работе, прогуливаясь по примерам Vue.js и помочь вам избежать пяти ловушек: жду до конца, тестирование неправильных вещей, тестовые удваивает , структурная муфта, тестирование всего.
Под капотом
Понимание кода исходного сигнала RACT : RECT предлагает простую и интуитивно понятный способ программировать фронт-конечные приложения со всеми движущимися деталями, сходящимися в виде состояний. Эта серия сосредоточена на том, как работает реагирование внутри. Первая статья начнет прогуляться по одному из критических путей реагирования, подтвердив простые компонент и затем следующую классный компонент.
Как устанавливает встроенные модули узла : В предыдущем блоге автор начал смотреть на то, как был инициализирован главный процесс узла. Там было вполне многое, одна из вещей, которые привлекли мне в глаза, было ссылкой на функцию, которая, казалось, была загружается встроенные модули во время фазы инициализации основного процесса узла.
JS Вещи, которые я никогда не знал, существовал : Я читал через Документы MDN на днях и нашел эти функции JS и API, которые я никогда не знал, существовал. Так вот короткий список этих вещей, полезных или нет – изучение JS, казалось бы, никогда не заканчивается. Есть личные выписки, «пустота» оператор, оператор запятой, с условным оператором, API интернационализации, оператор трубопровода, расчетные () параметры и т. Д.
Открытый источник
После.js : Next.js, подобная Framework для приложений Rection React React, построенная с React Router 4. Next.js потрясающе, но его система маршрутизации не удовлетворена для автора, поэтому он строит после.js, цели которых являются маршрутами – это просто компоненты и не должны иметь ничего общего с структурой папки.
Диалог-полифилл : Dialog-Polyfill.js – это полифилл для
<диалог>и<ФОРМА>Отказ<диалог>Это элемент для всплывающей коробки на веб-странице, включая модальный вариант, который сделает остальную часть страницы инертного во время использования. Это может быть полезно заблокировать взаимодействие пользователя, пока не даст вам ответ, либо подтвердить действие. Смотрите HTML SPEC ОтказScrollama : Scrollama – это современная и легкая библиотека JavaScript для Scrollytelling с использованием InterSefectionBserver в пользу событий прокрутки.
Ярвис : J.a.r.v.i. (Просто очень интеллектуальная система) поставит в вашем браузере всю соответствующую информацию, которую вам нужно из вашего WebPack, построить ли в Dev или в Prod. Он очень вдохновлен другими панелями панелей WebPack и основной идеей не является оригинальной, но вот некоторые особенности: показывает подсчет импорта модуля ES Harmony, который может быть Treishakable и CJS, которые не являются, показывают, как хорошо выполняют ваши активы В 12 различных типах подключения.
1backend : 1Backend – это платформа, предназначенная для развертывания, эксплуатации и обслуживания функций/микросервисов/микросервисов. Он позволяет запустить новое живое приложение в считанные секунды – после выбора вашего технологического стека (например, перейти с доступом к базе данных SQL) Вы получаете пустое приложение, которое уже живут и Callable снаружи (через http). В этот момент он поддерживает Go, JavaScript, Tymdercript и MySQL.
Призма : Prisma может превратить вашу базу данных в API GraphQL. Prisma позволяет вам разработать вашу модель данных и иметь производство Ready GraphQl API онлайн за считанные минуты. Prisma GraphQL API обеспечивает мощные абстракции и строительные блоки для разработки гибких масштабируемых бэкэндов GraphQL: Type-Safe API, моделирование данных с декларативной API SDL, API в реальном времени, продвинутой композиции API и работает со всеми рамочными рамками.
Оригинал: “https://dev.to/wxyyxc1992/frontend-weekly-no2-puppeteer-10-released-keep-webpack-fast-from-slack-prisma-o9k”