Свіжі ресурси для веб-дизайнерів і розробників (жовтень 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 Web Share

Я чесно не бачу цей API, що приходить в Мережу. Однак половина нашої взаємодії в Інтернеті “обміну”, цей API значно покращить ситуацію простіше для веб-розробників створювати власний досвід обміну, особливо на мобільній платформі.

Наразі цей API доступний лише в Google Chrome для настільних ПК і Android. Перегляньте це відео YouTube, щоб побачити його в дії.

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

Інша річ, яка буде революціонізувати в Інтернеті async атрибут елемента img. На момент написання статті існує кілька підходів завантажте зображення асинхронно, що передбачає невеликий трюк JavaScript. Незабаром ми зможемо просто додати async = on на img елемент.

Firefox Quantum

Mozilla активно наполягає на оновленнях Firefox з деякими поліпшеннями, кодованими “Проект Quantum”. Вона включає в себе 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 з a .vue або використовуйте компонент React у Vue. Ваша команда тепер може бути більш продуктивні з будь-якими рамками що вони воліють використовувати.

Draggable

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

FlowchartJS

Як випливає з назви, FlowchartJS - це бібліотека, яка дозволяє побудувати блок-схему, подібну до PowerPoint. Аналогічно, ви можете створювати різні форми діаграми, включаючи коло, еліпс, квадрат, діамант, трикутник і т.д..

QuickBill

Легкий і просте веб-додаток для створення рахунка-фактури. Він використовує власні технології браузера та API для запуску, так що жоден обліковий запис не потрібний. Просто перейдіть на веб-сайт, додайте елементи до рахунку-фактури та створіть файл PDF. Це воно!

Mocka

Mocka - це контент-заповнювач, який можна використовувати для створення прототипів веб-сайту. Це всього 500 байт і повністю настроюється. Ви можете легко включити його в CSS-файл вашого проекту за допомогою мікшера Sass.

The CSS надає ряд класів у тому числі mocka-media для створення заповнювача зображення, mocka-заголовок щоб створити заголовок, і mocka-текст для створення довільного тексту.

VueStar

VueStar є Компонент Vue для додавання іскрового ефекту при натисканні на піктограму, подібно до того, що робить Twitter “серце” значок у своєму мобільному додатку. Компонент вводить новий елемент з ім'ям vue-зірка де ви можете додати його до веб-віку. І все готово!

Сітка майданчик

CSS Grid представляє нову концепцію в Інтернеті, щоб створити макет, і на перший погляд це складний, враховуючи численні нові властивості.

GridPlayground є в основному a Ініціатива Mozilla навчить CSS Grid і підштовхнути CSS Grid вперед. Навіть Firefox приносить новий інструмент для DevTools, щоб перевірити макет Grid.

Менеджер фрагментів

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

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

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

SwissInCSS

SwissInCSS демонструє декілька класичних швейцарських дизайнів плакатів, які використовують лише CSS. Вихідний код доступний у CodePen.