Nové zdroje pro webové designéry a vývojáře (říjen 2017)

Tento měsíc bude Fresh Resouces trochu jiný než v předchozích měsících. My, weboví vývojáři, žijeme v rychle se měnícím průmyslu a viděl jsem spoustu oznámení od některých největších technologických společností, jako je Google, Microsoft, Firefox a PHP, které změní způsob, jakým budujeme síť.

V této splátce bude polovina našeho seznamu o těchto oznámeních. Buďte připraveni pozdravit budoucnost!

Základní optimalizace obrazu

Je to vyčerpávající článek pro optimalizaci obrazu pro web napsal Addy Osmani. Není to jako jiné zápisy, které se točí kolem jak-na, nebo jen to a don'ts pouze.

Tento článek vás ve skutečnosti projde technickými detaily a také vědy za optimalizací. Najdete zde také podrobné informace o několika optimalizačních přístupech a obrazových formátech, nástroje, tipy a některé příklady z reálného světa.

PHP 7.2

Komplexní odkaz na to, co přichází do PHP 7.2. Kromě doplňků, které zlepšují výkon aplikací PHP, přichází také s produktem PHP 7.2 odpisy, ve kterých bude několik věcí odstraněno a neměly by být dále používány.

V PHP 7.2 existují dvě funkce, které mají být odmítnuty create_function () a __autoload (). Pokud jste webový vývojář, zkontrolujte svůj kód a proveďte nezbytné změny. Viděl jsem mnoho WordPress pluginy, které stále používají tyto dvě funkce.

Web Share API

Upřímně jsem neviděl tento API přichází na web. Nicméně, protože polovina naší interakce na webu je “sdílení”, toto API bude velmi dělat věci webovým vývojářům je snazší vytvořit nativní sdílení, zejména na mobilní platformě.

Toto rozhraní API je v současné době k dispozici pouze v prohlížeči Google Chrome pro stolní počítače a Android. Podívejte se na toto video YouTube, abyste ho viděli v akci.

Asynchronní atribut obrázku

Další věc, která bude revoluci webu je async atributu pro prvek img. V době psaní existuje několik přístupů nahrát obrázek asynchronně, který zahrnuje malý trik JavaScriptu. Brzy budeme moci přidat async = on na img živel.

Kvantum Firefoxu

Mozilla agresivně tlačí aktualizace Firefoxu s některými vylepšeními, kódově pojmenovanými “Projekt Quantum”. Obsahuje Quantum CSS - nový motor pro extrémně rychlé vykreslování CSS, nové uživatelské rozhraní a nové nástroje DevTools.

Vydání je získávání trakce ve webových vývojářích a někteří již přepnuli svůj hlavní prohlížeč na Firefox. V tomto projektu je více, včetně Quantum DOM a WebRender. Budeme vidět Node.js kandidáta na základě Firefoxu Quantum? No, možná ano.

MS Edge pro iOS a Android

Společnost Microsoft právě oznámila vydání svého nejnovějšího prohlížeče, Edge, iOS a Android. To znamená, že pro vaše webové stránky je ještě jeden prohlížeč, se kterým chcete testovat.

Gutenberg

WordPress je v současné době na ambiciózním projektu s názvem Gutenberg. Gutenberg je a facelift k editoru WordPressu postavenému téměř výhradně s JavaScriptem.

V tomto bodě je Gutenberg postaven s Reactem ale projekt zvažuje další rámec jako Preact, Vue nebo něco jiného. Prozatím je to složitá situace. Takže, pro vývojáře WordPress stavební témata a pluginy, aby se vaše oči na projekt jako to změní způsob, jakým budujeme navždy WordPress.

FoitFout

FoitFout je užitečný nástroj pro porovnání dvou různých přístupů tzv. FOIT a FOUT to načíst vlastní písma. S tímto nástrojem můžete emulovat dva přístupy a rozhodnout, který přístup je pro vaše stránky nejvhodnější.

Vuera

Vuera je Knihovna JavaScript, která vám umožní používat Vue a React společně. Komponentu Vue můžete zahrnout z .vue nebo použijte komponentu React ve Vue. Váš tým teď může být produktivnější s jakýmkoli rámcem které upřednostňují.

Draggable

“Draggable” je fantastická knihovna od Shopify. Je postaven na vrcholu nativního prohlížeče Přetáhněte API API a umožňuje rozsáhlou práci s rozhraním API. V případě, že neposkytuje něco, co potřebujete, můžete napsat vlastní modul pro rozšíření jeho funkcí. Podívejte se na demo, jak to funguje.

FlowchartJS

Jak název napovídá, FlowchartJS je Knihovna, která umožňuje vytvořit vývojový diagram jako v aplikaci PowerPoint. Podobně můžete vytvořit různé tvary grafu včetně kruhu, elipsy, čtverce, diamantu, trojúhelníku atd.

QuickBill

Lehký a jednoduchou webovou aplikaci pro vytvoření faktury. Používá nativní technologie prohlížeče a rozhraní API pro spuštění, takže není potřeba žádný účet. Jednoduše přejděte na webovou stránku, přidejte položky na fakturu a vygenerujte soubor PDF. A je to!

Mocka

Mocka je zástupný symbol obsahu, který můžete použít pro tvorbu prototypových webových stránek. Je to jen 500 bytů a plně přizpůsobitelné. Pomocí mixinu Sass jej můžete snadno zahrnout do souboru CSS vašeho projektu.

CSS poskytuje řadu tříd počítaje v to mocka-media vytvořit zástupný symbol obrázku, mocka-záhlaví vytvořit nadpis a mocka-text vytvořit libovolný text.

VueStar

VueStar je a Komponenta Vue přidává šumivý efekt, když kliknete na ikonu, podobný tomu, co Twitter dělá s “srdce” ikona v jejich mobilní aplikaci. Komponenta zavádí nový prvek pojmenovaný vue-star kde jej můžete přidat do webového věku. A jste hotovi!

Mřížka hřiště

CSS Grid představuje na webu nový koncept, který staví rozvržení a na první pohled je to druh komplexu vzhledem k mnoha novým vlastnostem, které má.

GridPlayground je v podstatě a Mozilla iniciativa učit CSS Grid a tlačit CSS Grid přijetí vpřed. Dokonce i Firefox přináší do nástroje DevTools nový nástroj pro kontrolu rozvržení mřížky.

Správce fragmentů

“Správce fragmentů” je jednoduchý aplikace pro ukládání a správu fragmentů kódu. Můžete vytvořit novou položku, vložit kód a nastavit bod. V tomto okamžiku nic příliš fantázního a to pouze poskytuje zdrojový kód, který budete muset kompilovat pomocí NPM.

Rozhraní s kartami

Velký průchod na budování progresivní a přístupné navigace pomocí minimálního využití JavaScriptu. Skvělý zdroj pro ty, kteří se chtějí dozvědět více o přístupném designu.

SwissInCSS

SwissInCSS vystavuje několik klasických švýcarských návrhů plakátů bez použití CSS. Zdrojový kód je k dispozici v CodePen.