Friss források a webes tervezők és fejlesztők számára (2017. október)

Ebben a hónapban a Fresh Resouces egy kicsit más lesz, mint az előző hónapokban. Mi, webes fejlesztők, gyorsan változó iparágban élünk, és sok hirdetést láttam néhány legnagyobb technológiai cégtől, mint például a Google, a Microsoft, a Firefox és a PHP, amelyek megváltoztatják az építés módját. a háló.

Ebben a részletben a listánk fele ezekről a bejelentésekről szól. Szóval, készen álljon a jövőre!

Alapvető képoptimalizálás

Ez egy kimerítő cikk a web képének optimalizálásához írta Addy Osmani. Ez nem olyan, mint más írások, amelyek a teendők körül, vagy csak a tennivalók és a hamisítványok körül forognak.

Ez a cikk valóban megismeri a technikai részleteket, valamint a tudomány az optimalizálás mögött. Alapos információkat talál több optimalizálási megközelítésről és képformátumról is, eszközöket, tippeket és néhány valós példát.

PHP 7.2

Átfogó utalás arra, hogy mi jön a PHP-hez 7.2. A PHP alkalmazás teljesítményét javító kiegészítések mellett a PHP 7.2 is elérhető olyan értékcsökkenés, amelyben több dolog is megszűnik és nem szabad tovább használni.

A 7.2-es PHP-ben két olyan funkció létezik, amelyek elavultak create_function () és __autoload (). Ha Ön webes fejlesztő, tekintse át a kódot, és végezze el a szükséges változtatásokat. Láttam számos WordPress plugint, amelyek még mindig használják ezeket a két funkciót.

Webmegosztó API

Őszintén szólva nem láttam ezt az API-t az internetre. Mivel azonban az interneten való kölcsönhatásunk fele szól “megosztás”, ez az API nagymértékben megnöveli a dolgokat könnyebb a webfejlesztők számára, hogy natív megosztási élményt építsenek, különösen a mobil platformon.

Ez az API jelenleg csak a Google Chrome for Desktop és Android esetén érhető el. Nézze meg ezt a Youtube-videót, hogy lássa, hogyan működik.

Image Async attribútum

Egy másik dolog, ami forradalmasítja az internetet, az aszinkron az img elem attribútuma. Az írás idején egy pár megközelítés van aszinkronizálja a képet, ami egy kis JavaScript-trükköt tartalmaz. Hamarosan csak hozzá tudunk adni async = ON a img elem.

Firefox Quantum

A Mozilla agresszíven nyomta a Firefox frissítéseit, néhány kóddal “Quantum projekt”. Ez magában foglalja a Quantum CSS-t is rendkívül gyors CSS renderelés, új felhasználói felület és új DevTools.

A kiadás a webes fejlesztőkben a vontatás megszerzése és néhány már átkapcsolta a főböngészőt Firefoxra. Több is jön ez a projekt, többek között a Quantum DOM és a WebRender. Látni fogjuk-e a Firefox Quantum motoron alapuló Node.js versenyzőt? Nos, talán igen.

MS Edge az iOS és az Android számára

A Microsoft most bejelentette kiadja legfrissebb böngészőjét, az Edge-t az iOS és Android rendszerre. Ez azt jelenti, hogy van még egy böngésző, amellyel a webhelyek tesztelhetők.

Gutenberg

A WordPress jelenleg ambiciózus projekten van, Gutenberg nevű kóddal. Gutenberg egy A WordPress szerkesztője szinte teljes egészében a JavaScript használatával készült.

Ekkor Gutenberg React segítségével épült de a projekt egy másik keretrendszert is figyelembe vesz, mint például a Preact, Vue vagy valami más. Ez egy bonyolult helyzet. Tehát a WordPress fejlesztők számára témákat és bővítményeket építenek, és tartsák szem előtt a projektet megváltoztatja a WordPress építésének módját örökre.

FoitFout

Az FoitFout egy praktikus eszköz két különböző megközelítés összehasonlítására, úgynevezett FOIT és FOUT egyéni betűtípusok betöltése az interneten. Ezzel az eszközzel képesek vagyunk a két megközelítés utánozni és eldönteni, hogy melyik megközelítés a legjobban illeszkedik az Ön webhelyéhez.

Vuera

Vuera a JavaScript könyvtár, amely lehetővé teszi a Vue és a React együtt használását. A Vue komponenst az a .vue vagy használjon React komponenst a Vue-ban. Most már a csapatod lehet minden keretrendszerrel termelékenyebb előnyben részesítik.

húzható

“húzható” a Shopify fantasztikus könyvtára. A natív böngésző tetején épült Drag-n-Drop API, és lehetővé teszi egy kiterjedt API használatát. Abban az esetben, ha nem ad valamit, amire szüksége van, írhat egy egyéni modul a funkciók bővítéséhez. Nézze meg a demót, hogy megtudja, hogyan működik.

FlowchartJS

Ahogy a neve is mutatja, a FlowchartJS a könyvtár, amely lehetővé teszi egy folyamatábra építését, mint a PowerPoint. Hasonlóképpen, létrehozhat különböző formátumú diagramokat, köztük kör, ellipszis, négyzet, gyémánt, háromszög stb.

QuickBill

Könnyű és könnyű egyszerű webes alkalmazás számla létrehozásához. Futtatásához natív böngésző technológiákat és API-kat használ, így nincs szükség fiókra. Egyszerűen látogasson el a webhelyre, adja hozzá az elemeket a számlához, és készítse el a PDF-fájlt. Ez az!

Mocka

Mocka a tartalmi helyőrző, amelyet a prototípusok webhelyére használhat. Ez csak 500 bájt és teljesen testreszabható. A Sass mixin segítségével könnyen felveheti azt a projekt CSS fájljába.

A A CSS számos osztályt biztosít beleértve mocka-media kép helyőrző létrehozásához, mocka-címsor fejléc létrehozásához, és mocka-text tetszőleges szöveg létrehozása.

VueStar

A VueStar a A Vue komponens egy csillogó hatás hozzáadásához, amikor egy ikonra kattint, hasonló a Twitterhez “szív” ikon a mobil alkalmazásban. Az összetevő egy új elnevezést tartalmaz vue csillagos ahol hozzáadhatja azt az internet korában. És kész!

Grid játszótér

A CSS Grid egy új koncepciót vezet be az interneten, hogy kialakítson egy elrendezést és az első pillantásra bonyolult komplexum, mivel számos új tulajdonsággal rendelkezik.

A GridPlayground alapvetően a Mozilla kezdeményezés a CSS Grid tanítására és a CSS Grid elfogadásának előrehaladására. Még a Firefox új eszközt hoz a DevTools-hoz, hogy megvizsgálja a Grid elrendezést.

Részletkezelő

“Részletkezelő” egy egyszerű alkalmazás a kódrészletek tárolásához és kezeléséhez. Új elemet hozhat létre, beillesztheti a kódot, és állíthatja be a pontot. Ezen a ponton semmi sem túl divatos, és csak azt adja meg a forráskódot, amelyet az NPM használatával kell fordítania.

Csatolt interfész

Nagy a progresszív és hozzáférhető tabulációs navigáció kiépítése a JavaScript minimális használatával. Nagyszerű erőforrás azoknak, akik többet szeretnek megtudni az elérhető designról.

SwissInCSS

A SwissInCSS számos klasszikus svájci poszter-tervezést mutat be, a CSS-et használva. A forráskód elérhető a CodePen-ben.