Nauji ištekliai žiniatinklio dizaineriams ir kūrėjams (2017 m. Spalio mėn.)

Šį mėnesį „Fresh Resouces“ bus šiek tiek kitoks nei ankstesniais mėnesiais. Mes, žiniatinklio kūrėjai, gyvename greitai besikeičiančioje pramonėje, ir aš mačiau daugybę pranešimų iš kai kurių didžiausių technologijų kompanijų, tokių kaip „Google“, „Microsoft“, „Firefox“ ir „PHP“, kurios pakeis mūsų kūrimo būdą internetas.

Šioje dalyje pusė mūsų sąrašo bus apie šiuos pranešimus. Taigi, būkite pasiruošę pasveikinti ateityje!

Esminis vaizdo optimizavimas

Tai yra išsamus straipsnis, skirtas optimizuoti žiniatinklio vaizdą parašė Addy Osmani. Tai ne taip, kaip kiti raštai, kurie sukasi apie tai, kaip tai padaryti, ar tik tai, ką daryti ir nedaryti.

Šis straipsnis iš tikrųjų jus supažindina su techninėmis detalėmis ir mokslas už optimizavimą. Taip pat rasite išsamią informaciją apie kelis optimizavimo metodus ir vaizdo formatus, įrankiai, patarimai ir kai kurie realaus pasaulio pavyzdžiai.

PHP 7.2

Išsamus nuoroda apie tai, kas ateina į PHP 7.2. Be papildymų, kurie pagerina „PHP“ programų našumą, taip pat yra PHP 7.2 nusidėvėjimas, kuriame bus pašalinti keli dalykai ir neturėtų būti naudojamas.

PHP 7.2 yra dvi funkcijos, kurios bus nuvertintos create_function () ir __autoload (). Jei esate žiniatinklio kūrėjas, peržiūrėkite savo kodą ir atlikite būtinus pakeitimus. Aš mačiau daug WordPress įskiepių, kurie vis dar naudoja šias dvi funkcijas.

„Web Share API“

Aš nuoširdžiai nematau, kad ši API ateina į internetą. Tačiau, nes apie pusę mūsų sąveikos internete “dalintis”, ši API labai padės žiniatinklio kūrėjams lengviau sukurti vietinę bendrinimo patirtį, ypač mobilioje platformoje.

Ši API šiuo metu prieinama tik „Google Chrome“ darbalaukyje ir „Android“. Patikrinkite šį „YouTube“ vaizdo įrašą, kad pamatytumėte, kaip veikia.

Image Async atributas

Kitas dalykas, kuris sukels revoliuciją internete, yra async img elemento atributas. Rašymo metu yra keli metodai įkelkite vaizdą asinchroniškai, tai yra šiek tiek „JavaScript“. Netrukus galėsime tiesiog pridėti async = įjungta ant img elementas.

„Firefox Quantum“

„Mozilla“ agresyviai stumdavo „Firefox“ naujinimus su kai kuriais patobulinimais, koduotais “Projektas Quantum”. Jis apima Quantum CSS - naują variklį labai greitas CSS atvaizdavimas, nauja vartotojo sąsaja ir nauji „DevTools“.

Išleidimas yra įgyti traukimą žiniatinklio kūrėjams kai kurie jau pakeitė pagrindinę naršyklę į „Firefox“. Šiame projekte yra daug daugiau, įskaitant „Quantum DOM“ ir „WebRender“. Ar ketiname pamatyti „Node.js“ varžovą pagal „Firefox Quantum“ variklį? Na, galbūt taip.

MS Edge iOS ir Android

„Microsoft“ ką tik paskelbė paleisti naujausią naršyklę „Edge“ į „iOS“ ir „Android“. Tai reiškia, kad yra dar viena naršyklė, skirta jūsų svetainėms išbandyti.

Gutenbergas

„WordPress“ šiuo metu vykdo ambicingą projektą, pavadintą „Gutenberg“. Gutenbergas yra a „WordPress“ redaktorius sukurtas beveik visiškai su „JavaScript“.

Šiuo metu Gutenbergas yra pastatytas su React tačiau projektas apsvarsto kitą sistemą, pvz., „Preact“, „Vue“ ar kažką kitą. Tai yra sudėtinga situacija. Taigi, „WordPress“ kūrėjams kuriant temas ir įskiepius laikykite akis į projektą jis pakeis būdą, kuriuo mes statome „WordPress“ visam laikui.

FoitFout

FoitFout yra patogus įrankis, leidžiantis palyginti du skirtingus metodus, vadinamus FOIT ir FOUT įkelti tinkintus šriftus žiniatinklyje. Naudodamiesi šiuo įrankiu galėsite sekti du metodus ir nuspręsti, kuris metodas geriausiai tinka jūsų svetainei.

Vuera

Vuera yra a „JavaScript“ biblioteka, kuri leidžia naudoti „Vue“ ir „React“ kartu. Galite įtraukti Vue komponentą iš a .vue arba naudokite React komponentą Vue. Dabar jūsų komanda gali būti produktyviau kad jie nori naudoti.

Draggable

“Draggable” yra fantastiška „Shopify“ biblioteka. Jis yra pastatytas ant vietinės naršyklės „Drag-n-Drop“ API ir leidžia jums dirbti su plataus API. Tuo atveju, jei tai nepateikia kažko, ko jums reikia, galite rašyti pritaikytas modulis išplėsti jos funkcijas. Patikrinkite demonstraciją, kad pamatytumėte, kaip jis veikia.

Srauto schemosJS

Kaip rodo pavadinimas, „FlowchartJS“ yra a biblioteka, kuri leidžia sukurti srautinę schemą, kaip ir „PowerPoint“. Panašiai galite sukurti įvairias diagramas, įskaitant apskritimą, elipsę, kvadratą, deimantą, trikampį ir kt.

„QuickBill“

Lengvas ir tiesioginė žiniatinklio programa, skirta sąskaitai faktūrai sukurti. Jis naudoja vietines naršyklės technologijas ir API, kad nebūtų paleista jokių paskyrų. Tiesiog eikite į svetainę, pridėkite elementus į sąskaitą faktūrą ir generuokite PDF failą. Viskas!

Mocka

Mocka yra a turinio lankytojas, kurį galite naudoti prototipų kūrimo svetainėje. Tai tik 500 baitų ir visiškai pritaikoma. Jūs galite lengvai įtraukti jį į savo projekto CSS failą naudodami Sass mixin.

The CSS suteikia keletą klasių įskaitant mocka-media sukurti vaizdo vietos žymeklį, mocka pozicija sukurti kategoriją ir Mocka-tekstas sukurti savavališką tekstą.

VueStar

VueStar yra a Jei norite paspausti ant piktogramos, „Vue“ komponentas prideda putojančio poveikio, panašus į tai, ką „Twitter“ daro su “širdis” piktograma mobiliajame programoje. Komponentas pristato naują pavadintą elementą Vue-Star kur galite ją įtraukti į interneto amžių. Ir baigsite!

Grid Žaidimų aikštelė

„CSS Grid“ pristato naują internetinę koncepciją, kad sukurtų maketą ir iš pirmo žvilgsnio pasiektų sudėtingą kompleksą, turint omenyje daugybę naujų savybių..

GridPlayground yra iš esmės a „Mozilla“ iniciatyva mokyti CSS Grid ir paskatinti CSS Grid priėmimą į priekį. Net „Firefox“ „DevTools“ pateikia naują įrankį, kad patikrintų „Grid“ išdėstymą.

Fragmentų tvarkyklė

“Fragmentų tvarkyklė” yra paprastas programa gali išsaugoti ir tvarkyti kodo fragmentus. Galite sukurti naują elementą, įklijuoti kodą ir nustatyti tašką. Šiuo metu nieko nėra pernelyg išgalvotas ir jis pateikia tik pirminį kodą, kurį turėsite surinkti naudojant NPM.

„Tabbed“ sąsaja

Puikus pasivaikščiojimas, kuriant progresyvią ir prieinamą skirtukų navigaciją naudojant minimalų „JavaScript“ naudojimą. Puikus šaltinis tiems, kurie nori sužinoti daugiau apie prieinamą dizainą.

SwissInCSS

„SwissInCSS“ eksponuoja kelis klasikinius Šveicarijos plakatų dizainus, naudodamasis „CSS“. Pradinis kodas yra „CodePen“.