Svaigi resursi tīmekļa dizaineriem un izstrādātājiem (2017. gada oktobris)

Šomēnes Fresh Resouces būs nedaudz atšķirīgs no iepriekšējiem mēnešiem. Mēs, tīmekļa izstrādātāji, dzīvojam strauji mainīgajā nozarē, un es esmu redzējis daudzus paziņojumus no dažiem lielākajiem tehnoloģiju uzņēmumiem, piemēram, Google, Microsoft, Firefox un PHP, kas mainīs veidu, kā mēs veidojam tīmeklī.

Šajā maksājumā puse no mūsu saraksta būs par šiem paziņojumiem. Tātad, būsiet gatavs sveicināt nākotni!

Būtiska attēlu optimizācija

Tas ir izsmeļošs raksts, lai optimizētu tēlu tīmeklī raksta Addy Osmani. Tas nav tāpat kā citi pieraksti, kas griežas ap to, vai to dara un nedar.

Šis raksts patiešām iet caur tehniskajām detaļām, kā arī zinātne aiz optimizācijas. Jūs atradīsiet arī detalizētu informāciju par vairākām optimizācijas pieejām un attēlu formātiem, rīki, padomi un daži reāli piemēri.

PHP 7.2

Visaptverošs atsauce uz to, kas nāk uz PHP 7.2. Neatkarīgi no papildinājumiem, kas uzlabo PHP lietojumprogrammu veiktspēju, nāk arī PHP 7.2 nolietojums, kurā tiks likvidētas vairākas lietas un to vairs nedrīkst izmantot.

PHP 7.2 versijā ir divas funkcijas, kas tiks nomainītas create_function () un __autoload (). Ja esat tīmekļa izstrādātājs, pārskatiet savu kodu un veiciet nepieciešamās izmaiņas. Esmu redzējis daudzus WordPress spraudņus, kas joprojām izmanto šīs divas funkcijas.

Tīmekļa koplietošanas API

Es godīgi neredzēju šo API, kas ierodas tīmeklī. Tomēr, tā kā puse ir mūsu mijiedarbība tīmeklī “dalīšanās”, šī API ievērojami padarīs lietas tīmekļa izstrādātājiem ir vieglāk izveidot vietējo koplietošanas pieredzi, īpaši mobilajā platformā.

Šī API pašlaik ir pieejama tikai Google Chrome darbvirsmai un Android. Skatiet šo Youtube videoklipu, lai to redzētu darbībā.

Image Async atribūts

Vēl viena lieta, kas revolucionizēs tīmekli, ir async atribūts img elementam. Rakstīšanas laikā ir dažas pieejas ielādēt attēlu asinhroni, kas ietver nelielu JavaScript triku. Drīz mēs varēsim vienkārši pievienot async = ieslēgts uz img elementu.

Firefox Quantum

Mozilla ir agresīvi spiežot Firefox atjauninājumus ar dažiem uzlabojumiem, ar koda nosaukumu “Projekts Quantum”. Tas ietver Quantum CSS - jaunu dzinēju ļoti ātra CSS atveidošana, jauns lietotāja interfeiss un jauni DevTools.

Atbrīvošana ir vilces iegūšana tīmekļa izstrādātājos un daži jau ir mainījuši savu galveno pārlūkprogrammu uz Firefox. Šajā projektā ir vairāk, tostarp Quantum DOM un WebRender. Vai mēs redzēsim Node.js pretendentu, pamatojoties uz Firefox Quantum dzinēju? Nu, varbūt jā.

MS Edge iOS un Android ierīcēm

Microsoft tikko paziņoja atbrīvojiet savu jaunāko pārlūkprogrammu Edge uz iOS un Android. Tas nozīmē, ka ir vēl viena pārlūkprogramma, lai jūsu tīmekļa vietnes varētu pārbaudīt.

Gutenberga

WordPress pašlaik ir vērienīgs projekts, kods Gutenberg. Gutenberga ir a facelift uz WordPress redaktoru, kas izveidots gandrīz pilnībā ar JavaScript.

Šajā brīdī Gutenberga ir būvēts ar React bet projekts apsver citu sistēmu, piemēram, Preact, Vue vai kaut ko citu. Tagad tā ir sarežģīta situācija. Tātad, WordPress izstrādātājiem veidojot tēmas un spraudņus, turiet acis par projektu tas mainīs veidu, kā mēs veidojam WordPress uz visiem laikiem.

FoitFout

FoitFout ir ērts līdzeklis, lai salīdzinātu divas dažādas pieejas, ko sauc par FOIT un FOUT ielādēt pielāgotus fontus tīmeklī. Izmantojot šo rīku, jūs varat sekot abām pieejām un izlemt, kura pieeja vislabāk atbilst jūsu vietnei.

Vuera

Vuera ir a JavaScript bibliotēka, kas ļauj izmantot Vue un React kopā. Varat iekļaut Vue komponentu no a .vue vai izmantot reakcijas komponentu Vue. Jūsu komanda tagad var būt produktīvāka ar jebkuru sistēmu ka viņi vēlas izmantot.

Velciet

“Velciet” ir fantastiska no Shopify bibliotēka. Tā ir veidota uz vietējās pārlūkprogrammas Drag-n-Drop API un ļauj jums izmantot plašu API. Gadījumā, ja tas nenodrošina kaut ko, kas jums nepieciešams, varat rakstīt pielāgots modulis, lai paplašinātu tās funkcijas. Pārbaudiet demo, lai redzētu, kā tas darbojas.

Plūsmas diagrammasJS

Kā norāda nosaukums, FlowchartJS ir a bibliotēka, kas ļauj veidot plūsmas shēmu, piemēram, PowerPoint. Tāpat jūs varat izveidot dažādas diagrammas formas, ieskaitot apli, elipse, kvadrātu, dimantu, trijstūri utt.

QuickBill

Viegls un viegls vienkārša tīmekļa lietojumprogramma, lai izveidotu rēķinu. Tas izmanto vietējās pārlūka tehnoloģijas un API, lai darbotos, tāpēc nav nepieciešams konts. Vienkārši dodieties uz vietni, pievienojiet tos rēķinam un ģenerējiet PDF failu. Tieši tā!

Mocka

Mocka ir a satura vietnes īpašnieks, ko var izmantot tīmekļa vietnes prototipu veidošanai. Tas ir tikai 500 baiti un pilnībā pielāgojams. To var viegli iekļaut projekta CSS failā, izmantojot Sass mixin.

The CSS nodrošina vairākas klases tostarp mocka-media lai izveidotu attēla vietas apzīmējumu, mocka-virsraksts lai izveidotu virsrakstu, un mocka-teksts izveidot patvaļīgu tekstu.

VueStar

VueStar ir a Vue komponents, lai pievienotu dzirkstošo efektu, noklikšķinot uz ikonas, līdzīgs tam, ko Twitter dara ar “sirds” ikonas savā mobilajā lietotnē. Komponents ievieš jaunu nosaukumu vue-star kur var to pievienot tīmekļa laikmetā. Un jūs esat pabeidzis!

Grid rotaļu laukums

CSS Grid iepazīstina ar jaunu koncepciju tīmeklī, lai izveidotu izkārtojumu un tā ir pirmā kompleksa komplekss, ņemot vērā daudzās jaunās īpašības, kas tai ir.

GridPlayground būtībā ir a Mozilla iniciatīva mācīt CSS režģi un virzīt CSS Grid pieņemšanu uz priekšu. Pat Firefox rada jaunu rīku DevTools, lai pārbaudītu režģa izkārtojumu.

Fragmenta pārvaldnieks

“Fragmenta pārvaldnieks” ir vienkāršs lietotne, lai saglabātu un pārvaldītu koda fragmentus. Varat izveidot jaunu vienumu, ielīmēt kodu un iestatīt punktu. Šajā brīdī, nekas pārāk iedomātā, un tas tikai nodrošina avota kodu, kas jums būs nepieciešams, lai apkopotu, izmantojot NPM.

Savienojuma interfeiss

Liels caurskatāms, lai izveidotu progresīvu un pieejamu cilnes navigāciju, minimāli izmantojot JavaScript. Lielisks resurss tiem, kas vēlas uzzināt vairāk par pieejamo dizainu.

SwissInCSS

SwissInCSS eksponē vairākus klasiskus Šveices plakātu dizainus, neizmantojot CSS. Avota kods ir pieejams CodePen.