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

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

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

Необходимая оптимизация изображения

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

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

PHP 7.2

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

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

API веб-обмена

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

Этот API в настоящее время доступен только в Google Chrome для ПК и Android. Посмотрите это видео на Youtube, чтобы увидеть его в действии.

Атрибут изображения асинхронный

Еще одна вещь, которая произведет революцию в Интернете, это асинхронной атрибут для элемента img. На момент написания, существует несколько подходов к загрузить изображение асинхронно, что включает в себя небольшую хитрость JavaScript. Скоро мы сможем просто добавить асинхронный = на на IMG элемент.

Firefox Quantum

Mozilla активно продвигает обновления для Firefox с некоторыми улучшениями под кодовым названием “Квант проекта”. Включает в себя Quantum CSS - новый движок для чрезвычайно быстрый рендеринг CSS, новый пользовательский интерфейс и новые DevTools.

Релиз набирает обороты в веб-разработчиках а некоторые уже переключили свой основной браузер на Firefox. В этом проекте еще много чего, включая Quantum DOM и WebRender. Мы собираемся увидеть соперника Node.js, основанного на движке Firefox Quantum? Ну наверное да.

MS Edge для iOS и Android

Microsoft только что объявила выпустит свой последний браузер Edge для iOS и Android. Это означает, что есть еще один браузер для ваших сайтов для тестирования.

Гутенберг

WordPress в настоящее время работает над амбициозным проектом под кодовым названием Gutenberg. Гутенберг является фейслифт в редактор WordPress, построенный почти полностью на JavaScript.

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

FoitFout

FoitFout - это удобный инструмент для сравнения двух разных подходов, так называемых FOIT и FOUT. загружать пользовательские шрифты в Интернете. С помощью этого инструмента вы можете эмулировать два подхода и решить, какой подход лучше всего подходит для вашего сайта.

Vuera

Вуэра это Библиотека JavaScript, которая позволяет вам использовать Vue и React вместе. Вы можете включить компонент Vue из .вю или используйте компонент React в Vue. Ваша команда теперь может быть более продуктивно с любой структурой что они предпочитают использовать.

Перетаскиваемый

“Перетаскиваемый” это фантастическая библиотека от Shopify. Он построен поверх родного браузера Drag-n-Drop API и позволяет вам обширный API для работы с. В случае, если он не предоставляет то, что вам нужно, вы можете написать пользовательский модуль для расширения его функциональных возможностей. Проверьте демо, чтобы увидеть, как это работает.

FlowchartJS

Как следует из названия, FlowchartJS является библиотека, которая позволяет строить потоковую диаграмму, как в PowerPoint. Точно так же вы можете создавать различные формы диаграммы, включая круг, эллипс, квадрат, ромб, треугольник и т. Д..

QuickBill

Легкий и простое веб-приложение для создания счета. Он использует собственные технологии браузера и API для запуска, поэтому учетная запись не требуется. Просто зайдите на веб-сайт, добавьте элементы в накладную и сгенерируйте файл PDF. это оно!

Mocka

Мока это заполнитель контента, который вы можете использовать для создания прототипа сайта. Это всего 500 байтов и полностью настраиваемый. Вы можете легко включить его в CSS-файл вашего проекта, используя миксин Sass..

CSS предоставляет ряд классов в том числе mocka СМИ создать изображение заполнителя, mocka-заголовок создать заголовок и mocka-текст создать произвольный текст.

VueStar

VueStar является Vue компонент, чтобы добавить сверкающий эффект при нажатии на значок, похоже на то, что делает Twitter с “сердце” значок в их мобильном приложении. Компонент вводит новый элемент с именем вя-звезда где вы можете добавить его в эпоху Интернета. И вы сделали!

Игровая площадка

CSS Grid представляет новую концепцию в сети для создания макета, которая на первый взгляд довольно сложна, учитывая многочисленные новые свойства, которые она имеет.

GridPlayground в основном Инициатива Mozilla по обучению CSS Grid и продвижению внедрения CSS Grid. Даже Firefox приносит новый инструмент в DevTools для проверки макета сетки.

Диспетчер фрагментов

“Диспетчер фрагментов” это простой приложение для хранения и управления фрагментами кода. Вы можете создать новый элемент, вставить код и установить точку. На данный момент ничего особенного, и он предоставляет только исходный код, который вам нужно будет скомпилировать с помощью NPM.

Интерфейс с вкладками

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

SwissInCSS

SwissInCSS демонстрирует несколько классических швейцарских постеров с использованием только CSS. Исходный код доступен в CodePen.