Что меня очень взволновало и вдохновило на этой неделе, так это новый Инспектор специальных возможностей Firefox. Улучшение инструментов — это ключевой шаг на пути к лучшим результатам, поэтому я очень рад улучшениям, которые это внесет в доступность Интернета!
Наслаждайтесь!
KBall от ZenDev
CSS и SCSS
CSS Grid в IE: разоблачение распространенных заблуждений относительно IE Grid
Хотите верьте, хотите нет, но вы можете использовать CSS Grid в IE11 — на самом деле, IE был одним из первых браузеров, поддерживающих версию CSS Grid, так как толчок к спецификации исходил от Microsoft. Однако, поскольку это было так рано для вечеринки и больше не обновлялось, в версии IE11 Grid есть определенные причуды. В этой статье мы рассмотрим их и покажем вам, как вы можете писать макеты сетки, которые работают в современных браузерах и IE11, поэтому, если поддержка IE11 мешает вам попробовать Grid, это для вас.
CSS Grid Level 2: А вот и подсетка
Отличное объяснение вложенных сеток в CSS Grid, самой большой/самой важной функции, которая будет включена во второй раунд спецификации CSS Grid. Было много надежд, что подсетки дойдут до первого раунда, но в конечном итоге от них отказались, чтобы дать больше времени выяснить, как именно они должны работать, не задерживая остальных. Работа идет полным ходом, и, надеюсь, скоро мы увидим первые реализации — прочтите это, чтобы узнать, о чем ажиотаж.
Как быстро создавать прототипы приложений с помощью CSS Grid и CSS Variables
Ничего потрясающего, но очень хороший пошаговый пример создания простого макета с помощью Grid и его тематики с использованием переменных CSS. Если вы из тех, кто любит учиться, работая вместе, это хороший вариант.
Исследование некоторых возможностей, открываемых CSS Grid и другими расширенными функциями CSS. После периода консолидации лучших практик и относительно застойной технологии компоновки, которая привела к тому, что большая часть Интернета выглядит одинаково, мы сейчас вступаем в период невероятного разнообразия.
Короткое видео, рассказывающее об истории спецификации CSS и о том, что происходит сейчас. Отличный обзор того, как процесс спецификации развивался с течением времени. Фрагментация по нескольким спецификациям определенно приводит к тому, что нужно отслеживать больше вещей, но я думаю, что это огромная часть того, почему сегодня мы наблюдаем гораздо более быстрый прогресс в веб-платформе.
JavaScript
Изучите эти основы JavaScript и станьте лучшим разработчиком
Я очень верю в основы, и в этой статье хорошо показано множество основных фундаментальных частей языка JavaScript. Есть части, где, я думаю, они могли бы объяснить лучше или рассказать подробнее, но в целом это солидная статья, которая знакомит с множеством уникальных особенностей языка.
face-api.js — JavaScript API для распознавания лиц в браузере с помощью tensorflow.js
Мы продолжаем видеть все больше и больше приложений и инструментов для машинного обучения, разработанных на JavaScript поверх tensorflow.js. Вот еще одна — библиотека с открытым исходным кодом, которая позволяет запускать весь конвейер машинного обучения для распознавания лиц с ускорением графического процессора прямо в вашем браузере. Мы уходим в чертово БУДУЩЕЕ.
Руководство Fullstack React по использованию ссылок в компонентах React
Рефы — одна из действительно интересных функций в React и Vue для «снятия покровов» и получения доступа к базовому DOM браузера. Очень полезно для таких вещей, как подключение сторонних библиотек и работа с теми редкими случаями, когда абстракция виртуальной DOM немного негерметична. Это полное руководство по использованию ссылок в React является первоклассным.
Автономный магазин PWA для приложений электронной коммерции, который можно подключить к любому решению для электронной коммерции, чтобы получить сверхбыстрый, масштабируемый и ориентированный на мобильные устройства интерфейс. Система включает кеш между бэкэндом и интерфейсом, автономные возможности и многое другое. В настоящее время magento, кажется, имеет наибольшую поддержку, но система адаптеров настроена так, чтобы можно было легко добавлять дополнительные серверные части электронной коммерции. В последнее время я не был в электронной коммерции, но в следующий раз, когда у меня будет причина, я обязательно посмотрю на это.
Создание AR/VR с помощью Javascript и HTML
Я уже давно интересовался потенциалом AR/VR в Интернете, с тех пор как Киран Фарр указал мне, что сочетание прогрессивного улучшения и глубоких ссылок делает веб-VR еще более мощным, чем нативный VR. . Однако попадание в этот мир может показаться немного пугающим, и эта статья призвана исправить это, дав вам определение терминов и список ресурсов, где можно перейти от аутсайдера к инсайдеру в мире WebVR.
Другое
Firefox 61 — Квант Солнцестояния
Две супер крутые вещи в последней версии Firefox. Во-первых, теперь они включили параллельный синтаксический анализ CSS, продолжая свой путь параллелизации ВСЕХ вещей в браузере, чтобы использовать преимущества многоядерных процессов. Но действительно интересная вещь, которая побудила меня включить его в информационный бюллетень, это то, что они добавили совершенно новый Инспектор доступности, упрощающий отладку того, как программы чтения с экрана взаимодействуют с вашим сайтом. Это ОГРОМНО для того, чтобы помочь разработчикам сделать веб-сайты более доступными.
Представляем инспектор специальных возможностей в инструментах разработчика Firefox
Немного старая статья, но вдохновленная недавним выпуском, делающим Инспектора доступности доступным для всех, я хочу подчеркнуть это. Взаимодействуйте со своим сайтом, как если бы это была программа для чтения с экрана, и углубитесь в базовое дерево специальных возможностей, чтобы понять, как оно работает и почему что-то не работает. Это феноменальный шаг вперед для доступности.
Использование JavaScript по отраслям
Разбивая данные из массового опроса пользователей npm, мы видим, как использование JavaScript варьируется в зависимости от отрасли. Интересно, что есть отрасли, в которых jQuery используется более чем на 50%! Я также был заинтригован тем, сколько людей используют Electron — более 20% в каждой отрасли! Даже учитывая, что это может быть аудитория, состоящая из людей, больше ориентированных на бэкэнд/узлы, это больше, чем я ожидал.
Взгляд на то, какие метрики имеет смысл измерять при рассмотрении производительности JavaScript, и некоторые инструменты, которые помогут в этом разобраться. Использование ЦП часто упускается из виду из-за увеличения количества используемого нами JavaScript на стороне клиента, но, особенно когда мы стремимся расширить нашу аудиторию за пределами США и Европы, огромное количество устройств, которые люди используют, — это недорогие смартфоны. которые довольно ограничены на фронте процессора.
Быстрые вызовы WebAssembly и реализация любых ссылок
Одна из вещей, которая возникла на прошлой неделе, когда я говорил о WebAssembly, заключалась в том, что одно из текущих ограничений заключается в том, что вызовы между WebAssembly и JavaScript выполняются довольно медленно, что, как правило, сокращает круг вещей, для которых WebAssembly полезен. Хорошо, не успели обсудить, как всплывает это, выделяя работу, которая сделала вызовы функций в WASM и из WASM примерно в 10 раз быстрее в Firefox.
Счастливой пятницы!
Вам нравится этот информационный бюллетень? Получите его прямо в свой почтовый ящик! Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, уроки и анонсы по CSS/SCSS, JavaScript, а также множество других замечательных Front-end новостей — подпишитесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на zendev.com 6 июля 2018 г.
