Čerstvé zdroje pre návrhárov webových stránok a vývojárov (október 2017)

Tento mesiac bude Fresh Resouces trochu iný ako v predchádzajúcich mesiacoch. My, weboví vývojári, žijeme v rýchlo sa meniacom priemysle a videl som veľa oznámení od niektorých najväčších technologických spoločností, ako sú Google, Microsoft, Firefox a PHP, ktoré zmenia spôsob budovania sieť.

V tejto splátke bude polovica nášho zoznamu o týchto oznámeniach. Takže buďte pripravení pozdraviť sa do budúcnosti!

Optimálna optimalizácia obrazu

Je to vyčerpávajúci článok na optimalizáciu obrázka pre web napísal Addy Osmani. Nie je to ako ostatné zápisy, ktoré sa točia okolo toho, ako to, alebo to robiť a robiť len.

Tento článok vás vlastne prechádza technickými detailmi, ako aj vedy za optimalizáciou. Nájdete tu tiež dôkladné informácie o niekoľkých optimalizačných prístupoch a formátoch obrázkov, nástroje, tipy a niektoré príklady z reálneho sveta.

PHP 7.2

Komplexný odkaz na to, čo príde do PHP 7.2. Okrem doplnkov, ktoré zlepšujú výkon PHP aplikácií, je k dispozícii aj PHP 7.2 znehodnotenie, v ktorom sa odstráni niekoľko vecí a nemali by sa používať.

V PHP 7.2 existujú dve funkcie, ktoré budú zastarané create_function () a __autoload (). Ak ste webový vývojár, skontrolujte svoj kód a vykonajte potrebné zmeny. Videl som mnoho pluginov WordPress, ktoré stále používajú tieto dve funkcie.

API pre zdieľanie webových stránok

Úprimne som nevidil, že toto API prichádza na web. Avšak ako polovica našej interakcie na webe je asi “zdieľať”, toto API bude veľa robiť veci pre vývojárov webových stránok jednoduchšie vytvárať vlastné skúsenosti so zdieľaním, najmä na mobilnej platforme.

Toto rozhranie API je momentálne k dispozícii iba v prehliadači Google Chrome pre stolné počítače a Android. Pozrite sa na toto video v službe Youtube, aby ste ju videli v akcii.

Async atribútu obrazu

Ďalšia vec, ktorá prinesie revolúciu na webe, je asynchrónne atribút prvku img. V čase písania existuje niekoľko prístupov načítať obraz asynchrónne, čo zahŕňa trochu trik JavaScript. Čoskoro budeme môcť jednoducho pridať asynchrónne = o na img element.

Firefox Quantum

Mozilla agresívne tlačila aktualizácie na Firefox s určitými vylepšeniami, s kódovým názvom “Projekt Quantum”. Zahŕňa Quantum CSS - nový motor pre extrémne rýchle vykresľovanie CSS, nové používateľské rozhranie a nové nástroje DevTools.

Uvoľnenie je získanie trakcie v webových vývojárov a niektorí už zmenili svoj hlavný prehliadač na Firefox. V tomto projekte sa dá prísť viac, vrátane Quantum DOM a WebRender. Budeme vidieť Node.js uchádzač založený na motore Firefox Quantum? Možno áno.

MS Edge pre iOS a Android

Microsoft práve oznámila uvoľnite svoj najnovší prehliadač Edge na iOS a Android. Znamená to, že na vašich webových stránkach je ešte jeden prehliadač.

Gutenberg

WordPress je v súčasnosti na ambicióznom projekte s názvom Gutenberg. Gutenberg je facelift do editora WordPress postavený takmer úplne pomocou JavaScriptu.

V tomto bode je Gutenberg postavený s React ale projekt zvažuje iný rámec ako Preact, Vue alebo niečo iné. Je to teraz zložitá situácia. Takže pre vývojárov WordPress, ktoré vytvárajú témy a pluginy, dávajte pozor na projekt ako to zmení spôsob budovania WordPress navždy.

FoitFout

FoitFout je užitočný nástroj na porovnanie dvoch rôznych prístupov takzvaných FOIT a FOUT načítať vlastné fonty na webe. Pomocou tohto nástroja môžete napodobniť dva prístupy a rozhodnúť sa, ktorý prístup je najvhodnejší pre vaše stránky.

Vuera

Vuera je a Knižnica JavaScript, ktorá vám umožní používať spoločne Vue a React. Komponent Vue môžete zahrnúť z .vue alebo použite komponentu React vo Vue. Váš tím môže byť teraz produktívnejší s akýmkoľvek rámcom ktoré radšej používajú.

Draggable

“Draggable” je fantastická knižnica od Shopify. Je postavený na hornom nativnom prehliadači Drag-n-Drop API a umožňuje vám pracovať s rozsiahlou API. V prípade, že neposkytuje niečo, čo potrebujete, môžete napísať vlastný modul na rozšírenie jeho funkcií. Pozrite sa na demo a uvidíte, ako to funguje.

FlowchartJS

Ako naznačuje názov, FlowchartJS je a knižnica, ktorá umožňuje budovanie vývojového diagramu ako v programe PowerPoint. Podobne môžete vytvoriť rôzne tvary grafu vrátane kružnice, elipsy, štvorca, diamantu, trojuholníka atď.

QuickBill

Ľahké a jednoduchú webovú aplikáciu na vytvorenie faktúry. Používa natívne technológie prehliadača a rozhrania API na spustenie, takže nie je potrebný žiadny účet. Jednoducho prejdite na webové stránky, pridajte položky do faktúry a generujte súbor PDF. To je všetko!

Mocka

Mocka je a ktorý môžete použiť na vytváranie prototypov webových stránok. Je to len 500 bajtov a plne prispôsobiteľné. Môžete ho jednoducho zahrnúť do súboru CSS projektu pomocou mixu Sass.

CSS poskytuje niekoľko tried počítajúc do toho testovanou media vytvoriť zástupný symbol obrázka, testovanou okruh vytvoriť nadpis a testovanou textové vytvoriť ľubovoľný text.

VueStar

VueStar je a Vue komponentu pridať šumivý efekt po kliknutí na ikonu, podobné tomu, čo Twitter robí s “Srdce” v mobilnej aplikácii. Komponent predstavuje nový prvok s názvom vue-star kde ho môžete pridať do webového veku. A vy ste skončili!

Mriežkové ihrisko

CSS Grid predstavuje novú koncepciu na webe na vytvorenie usporiadania a na prvý pohľad je to komplexný vzhľadom na množstvo nových nehnuteľností, ktoré má.

GridPlayground je v podstate a Iniciatíva Mozilla vyučovať CSS Grid a presadzovať prijatie CSS Grid. Dokonca aj Firefox prináša nový nástroj DevTools na kontrolu rozloženia siete.

Správca úryvkov

“Správca úryvkov” je jednoduchý aplikácia na ukladanie a správu úryvkov kódu. Môžete vytvoriť novú položku, prilepiť kód a nastaviť bod. V tomto okamihu nie je nič moc fantazijné a poskytuje len zdrojový kód, ktorý budete musieť zostaviť pomocou NPM.

Rozhranie na záložkách

Veľký prechod na budovanie progresívnej a prístupnej navigácie na karte s minimálnym používaním jazyka JavaScript. Skvelý zdroj pre tých, ktorí sa chcú dozvedieť viac o dostupnom dizajne.

SwissInCSS

SwissInCSS vystavuje niekoľko klasických švajčiarskych plagátových návrhov, ktoré používajú len CSS. Zdrojový kód je k dispozícii v programe CodePen.