Свежие ресурсы для веб-дизайнеров и разработчиков (октябрь 2017 г.)

В этом месяце Fresh Resouces будет немного отличаться от предыдущих месяцев. Мы, веб-разработчики, зарабатываем на жизнь в быстро меняющейся отрасли, и я видел много объявлений от некоторых крупнейших технологических компаний, таких как Google, Microsoft, Firefox и PHP, которые изменят наши методы построения. паутина.

В этом выпуске половина нашего списка будет посвящена этим объявлениям. Так что будьте готовы поздороваться с будущим!

Читайте также: Введение в API JavaScript для веб-работников

Основная оптимизация изображения
Это исчерпывающая статья по оптимизации изображения для Интернета, написанная Адди Османи. Это не похоже на другие рецензии, которые вращаются вокруг того, как делать, а чего только нельзя.

Эта статья на самом деле проведет вас через технические детали, а также науку, стоящую за оптимизацией. Вы также найдете исчерпывающую информацию о нескольких подходах к оптимизации и форматах изображений, инструментах, советах и ​​некоторых реальных примерах.
PHP 7.2
Полная справка о том, что будет в PHP 7.2. Помимо дополнений, которые улучшают производительность приложений PHP, PHP 7.2 также поставляется с амортизацией, в которой некоторые вещи будут удалены и больше не должны использоваться.

В PHP 7.2 есть две функции, которые будут устаревшими, а именно create_function () и __autoload (). Если вы веб-разработчик, просмотрите код и внесите необходимые изменения. Я видел множество плагинов WordPress, которые все еще используют эти две функции.

Читайте также: PHP 7: 10 вещей, которые нужно знать

API веб-обмена
Честно говоря, я не видел, чтобы этот API появился в сети. Тем не менее, поскольку половина нашего взаимодействия в Интернете связана с «обменом», этот API-интерфейс значительно облегчит веб-разработчикам процесс создания собственного обмена, особенно на мобильной платформе.

Этот API в настоящее время доступно только в Google Chrome для ПК и Android, Проверять, выписываться это видео на Youtube чтобы увидеть это в действии.
Атрибут изображения асинхронный
Еще одна вещь, которая революционизирует сеть — это атрибут async для элемента img. На момент написания этой статьи было несколько подходов для асинхронной загрузки изображения, что подразумевает небольшую хитрость JavaScript. Вскоре мы сможем просто добавить async = on в элемент img.
Firefox Quantum
Mozilla активно продвигает обновления для Firefox с некоторыми улучшениями под кодовым названием «Project Quantum». Он включает в себя Quantum CSS — новый движок для чрезвычайно быстрого рендеринга CSS, новый пользовательский интерфейс и новые DevTools.

Релиз набирает популярность у веб-разработчиков, и некоторые уже переключили свой основной браузер на Firefox. В этом проекте есть еще Квантовый ДОМ а также WebRender, Мы собираемся увидеть соперника Node.js, основанного на движке Firefox Quantum? Ну, возможно, да.
MS Edge для iOS и Android
Microsoft только что объявила о выпуске своего последнего браузера Edge для iOS и Android. Это означает, что есть еще один браузер для ваших сайтов для тестирования.
Гутенберг
WordPress в настоящее время работает над амбициозным проектом под кодовым названием Gutenberg. Gutenberg — это фейслифт для редактора WordPress, созданный почти полностью на JavaScript.

На данный момент Гутенберг построен с React, но проект рассматривает другой фреймворк, такой как Preact, Vue или что-то еще. Это сложная ситуация на данный момент. Поэтому, для разработчиков WordPress, создающих темы и плагины, следите за проектом, так как он навсегда изменит способ создания WordPress.

Читайте также: Создайте страницу для печати с Gutenberg.css

FoitFout
FoitFout — это удобный инструмент для сравнения двух разных подходов, так называемых FOIT и FOUT, для загрузки пользовательских шрифтов в сети. С помощью этого инструмента вы можете эмулировать два подхода и решить, какой подход лучше всего подходит для вашего сайта.
Vuera
Vuera — это библиотека JavaScript, которая позволяет вам использовать Vue и React вместе. Вы можете включить компонент Vue из .vue или использовать компонент React в Vue. Ваша команда теперь может быть более продуктивной с любой средой, которую они предпочитают использовать.
Перетаскиваемый
Draggable — фантастическая библиотека от Shopify. Он построен на основе собственного API-интерфейса Drag-n-Drop браузера и позволяет вам работать с обширным API. В случае, если он не предоставляет то, что вам нужно, вы можете написать собственный модуль для расширения его функциональных возможностей. Проверьте демо чтобы увидеть, как это работает.
FlowchartJS
Как видно из названия, FlowchartJS — это библиотека, которая позволяет создавать потоковую диаграмму, как в PowerPoint. Точно так же вы можете создавать различные формы диаграммы, включая круг, эллипс, квадрат, ромб, треугольник и т. Д.
QuickBill
Легкое и понятное веб-приложение для создания счета. Он использует собственные технологии браузера и API для запуска, поэтому учетная запись не требуется. Просто перейти на сайтдобавьте элементы в накладную и создайте файл PDF. Это оно!
Mocka
Mocka — это заполнитель контента, который вы можете использовать для создания прототипа сайта. Это всего 500 байтов и полностью настраиваемый. Вы можете легко включить его в CSS-файл вашего проекта, используя миксин Sass.

CSS предоставляет ряд классов, включая mocka-media для создания заполнителя изображения, mocka-heading для создания заголовка и mocka-text для создания произвольного текста.
VueStar
VueStar — это компонент Vue, который добавляет искрящийся эффект при нажатии на значок, аналогично тому, как это делает Twitter со значком «сердце» в своем мобильном приложении. Компонент представляет новый элемент с именем vue-star, куда вы можете добавить его в эпоху Интернета. И вы сделали!
Игровая площадка
CSS Grid представляет новую концепцию в сети для создания макета, и на первый взгляд она довольно сложная, учитывая многочисленные новые свойства, которые она имеет.

GridPlayground — это, в основном, инициатива Mozilla по обучению CSS Grid и продвижению внедрения CSS Grid. Даже Firefox предлагает DevTools новый инструмент для проверки макета Grid.
Диспетчер фрагментов
«Snippet Manager» — это простое приложение для хранения и управления фрагментами кода. Вы можете создать новый элемент, вставить код и установить точку. На данный момент ничего особенного, и он предоставляет только исходный код, который вам потребуется для компиляции с использованием NPM.

Читайте также: беги и делись фрагментами с Glot.io

Интерфейс с вкладками
Отличное руководство по созданию прогрессивной и доступной навигации по вкладкам с минимальным использованием JavaScript. Отличный ресурс для тех, кто хочет узнать больше о доступном дизайне.
SwissInCSS
SwissInCSS представляет несколько классических швейцарских дизайнов постеров, использующих только CSS. Исходный код доступен в CodePen,