Пресни ресурси за уеб дизайнери и разработчици (октомври 2017 г.)

Този месец Fresh Resouces ще бъде малко по-различен от предходните месеци. Ние, уеб разработчиците, живеем в бързо променяща се индустрия и съм виждал много съобщения от някои от най-големите технологични компании като Google, Microsoft, Firefox и PHP, които ще променят начина, по който изграждаме мрежата.

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

Основна оптимизация на изображението

Това е изчерпателна статия за оптимизиране на изображение за мрежата написана от Ади Османи. Това не е като другите писмени текстове, които се въртят около начина, по който да се правят, или само за действията и не.

Тази статия всъщност ви води през техническите подробности, както и науката зад оптимизацията. Ще намерите и подробна информация за няколко подхода за оптимизиране и форматите на изображения, инструменти, съвети и някои примери от реалния свят.

PHP 7.2

Подробен справка за това, което идва в PHP 7.2. Освен добавките, които подобряват производителността на PHP приложенията, PHP 7.2 също идва амортизация, в която ще бъдат премахнати няколко неща и повече не трябва да се използва.

В PHP 7.2 има две функции, които ще бъдат отхвърлени именно create_function () и __autoload (). Ако сте уеб разработчик, прегледайте кода си и направете необходимите промени. Виждал съм многобройни WordPress плъгини, които все още използват тези две функции.

Web Share API

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

Понастоящем този приложен програмен интерфейс (API) е налице само в Google Chrome за настолни компютри и Android. Вижте това видео в YouTube, за да го видите в действие.

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

Друго нещо, което ще революционизира мрежата е асинхронен атрибут за елемента img. По време на писането има няколко подхода заредете изображението асинхронно, което включва малък трик на JavaScript. Скоро ще можем да добавим асинхронен = на върху 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

Vuera е a JavaScript библиотека, която ви позволява да използвате Vue и React заедно. Можете да включите компонент Vue от a .Vue или използвайте React компонент във Vue. Вашият екип вече може да бъде по-продуктивни с всякаква рамка които те предпочитат да използват.

плъзгане

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

FlowchartJS

Както подсказва името, FlowchartJS е a библиотека, която позволява изграждане на блок-схема като в PowerPoint. По същия начин можете да създавате различни форми на диаграма, включително кръг, елипса, квадрат, диамант, триъгълник и т.н..

QuickBill

Лека и директно уеб приложение за създаване на фактура. Той използва местни браузърски технологии и API, за да работи, така че не е необходим акаунт. Просто отидете на уебсайта, добавете елементите към фактурата и генерирайте PDF файла. Това е!

Mocka

Mocka е a съдържател на съдържание, който можете да използвате за създаване на уебсайт. Това е само 500 байта и напълно приспособима. Можете лесно да го включите в CSS файла на вашия проект с помощта на Sass mixin.

Най- CSS предоставя редица класове включително mocka медии , за да създадете контейнер за изображения, mocka-заглавие за да създадете заглавие и mocka текст за да създадете произволен текст.

VueStar

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

Мрежа за игри

CSS Grid въвежда нова концепция в мрежата за изграждане на оформление и е доста сложна на пръв поглед, предвид многото нови свойства, които има.

GridPlayground е основно a Инициативата на Mozilla да научи CSS Grid и да придвижи напред CSS Grid. Дори Firefox добавя нов инструмент към DevTools, за да провери оформлението на мрежата.

Мениджър на откъси

“Мениджър на откъси” е просто приложение за съхранение и управление на кодови фрагменти. Можете да създадете нов елемент, да поставите кода и да зададете точката. В този момент нищо не е прекалено фантастично и осигурява само изходния код, който ще трябва да компилирате с помощта на NPM.

Интерфейс с раздели

Чудесна преминаване през изграждане на прогресивна и достъпна навигация с табулация с минимално използване на JavaScript. Голям ресурс за тези, които искат да научат повече за достъпния дизайн.

SwissInCSS

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