Svaigi resursi tīmekļa dizaineriem un izstrādātājiem (2019. gada marts)
Pēdējo mēnešu laikā daudz kas ir noticis tīmekļa attīstības pasaulē. Pirmkārt, jaunais bloka redaktors, kodēts Gutenberga, beidzot ir apvienota programmā WordPress 5.0. Tā ir patiešām liela pārmaiņa kopš tās izveides, jo tā rada jaunu pamatu WordPress attīstībai nākotnē un mainīs veidu, kā izstrādātāji paplašina WordPress funkcijas..
Otrkārt, daži no mūsu līdzstrādniekiem ir izveidojuši dažus patiešām noderīgus instrumentus, piemēram, tādus, kas ļauj apskatīt JSON terminālī un pāris React bibliotēkas, kas var izrādīties ļoti noderīgas web dizaina un izstrādes projektos.
Un visbeidzot, daži no visefektīvākajiem resursi, atsauces un spraudņi ir uzsākti, lai palīdzētu jums atjaunināt savus projektus atbilstoši jaunākajām tendencēm.
Let's get par visplašāko sarakstu svaigu web izstrādes resursus.
Gutenberga rokasgrāmata
Oficiālā WordPress rokasgrāmata, kurā jūs varat meklēt atsauces uz dizainu, kodu piemēri bloku izveidei un citi un ceļvedis, lai veicinātu projektu. Tā ir jūsu pirmā atsauce, izstrādājot ar Gutenbergu.
Sastatnes
Ar bloka redaktoru WP-CLI tagad nodrošina ērtu veidu, kā sākt darbu izveidot Gutenberga bloku ar jaunu CLI komandu, wp sastatņu bloks. Varat to izveidot un pievienot esošajiem spraudņiem un tēmām.
CGB
Vēl viens veids, kā viegli uzsākt Gutenberga bloku, ir izveidot Guten Block (CGB) ir līdzeklis, lai ģenerēt katlu izveidot Gutenberga bloku. Tas sastāv no tādiem moderniem instrumentiem kā React.js, Webpack, ESLint, Babel uc Labākā daļa ir tāda, ka nav nepieciešams konfigurēt nevienu no šiem rīkiem lai jūs varētu vienkārši koncentrēties uz koda rakstīšanu.
Elementora bloki Gutenberga
WordPress spraudnis, kas ļauj jums ievietojiet visas Elementor veidnes un priekšskatiet to tieši redaktorā. Spraudnis ir aprīkots ar daudzām citām saderībām, kas nodrošina bezšuvju rediģēšanas pieredze starp Elementoru un Gutenbergu. Apskatiet šo videoklipu, lai redzētu, kā tas darbojas.
Atomu bloki
Gutenberga bloku komplekts ar arvien lielāku kolekciju skaitu. Šīs rakstīšanas laikā tā nodrošina “Postgrāmatas bloks” kas ļauj jums pievienojiet vietnes amatu sarakstu tīkla izkārtojumā. Ir arī “Atsauksmes bloks” kas, kā norāda nosaukums, ievieto atsauksmi lapā. Pārbaudiet šajā lapā esošos bloku priekšskatījumus.
Bloķēt galeriju
Uzkrītošais bloks, lai ievietotu attēlu galeriju, Block Gallery nodrošina bezšuvju pieredzi, lai pievienotu attēlus savam ziņojumam. Vienkārši nometiet attēlus, veidojiet galerijas displeju (mūra stils, karuselis vai pilnekrāns), un tas viss ir iestatīts. Šobrīd tas ir tikai labākais WordPress galerijas bloks.
CoBlocks
Tāda paša autora bloku komplekts, kas izstrādāja iepriekš minēto bloka galeriju, CoBlocks sastāv no vairākiem blokiem, kas uzlabos jūsu vietnes saturu, piemēram, Akordeons, cenu tabula, Gif, klikšķi-uz-čivināt, un vairāk jāpievieno bloki.
StagBlocks
Vēl viens Gutenberga bloku komplekts. Spraudnis sniedz virkni interesantu bloku, ko daudzi no jums novērtētu. Tas ietver Stat Block, kas ļauj pielāgot statistiku jūsu ziņojumos un lapās. Tīmekļa vietnes kartes bloks, kas būs priekšskatīt tīmekļa vietni iedomātā kartes stilā. Kodu bloks, kas padarīs kodu ar iezīmētu krāsu.
Otter bloki
Arī Gutenberga bloku kolekcija, piemēram, “Google Maps bloks” lai ievietotu karti, “Mūsu pakalpojumu bloks” uz ievietojiet pakalpojumu sarakstu ar pogu režģa skatā, un “Atsauksmes Platība” lai ievietotu atsauksmju sarakstu. Otter Block ir Gutenberga bloku kolekcija, ko uzņēmumi un tematiskais attīstītājs novērtētu.
Advanced Gutenberg bloki
Šis spraudnis nāk ar nedaudziem uzlaboti bloki, lai bagātinātu jūsu saturu piemēram, automātiski izveidots satura rādītājs, “Giphy Blocks” iekļaut GIF attēlu no Giphy.com, “Unsplash Block” lai ievietotu attēlus no Unsplash.com, “Reklāmkaroga reklāmu bloks”, WooCommerce “Add-to-Cart pogas bloks”, un daudz vairāk.
Bloka laboratorija
Block Lab ļauj izstrādātājiem viegli izveidot Gutenberg Block. Spraudnis ļauj jums reģistrēt jaunu bloku ar lietotājam draudzīgu GUI un veidnes PHP. Jums pat nav nepieciešams apgūt React.js.
EDD bloki
Spraudnis, kas ļauj padarīt Easy Digital Downloads produktus Gutenberga redaktorā. Atšķirībā no īsceļa, blokā tiks parādīti produkta skatījumi.
Pārbaudiet Gutenbergu
Vai neesat gatavs instalēt Gutenberg spraudni vai atjaunināt vietni programmā WordPress 5.0? Jūs varat vienkārši ielādējiet šo vietni, lai izmēģinātu jauno redaktoru.
Gutenberga mākonis
Tas ir kā AppStore Gutenberga blokiem. Centrālā vieta, kur var iegūt Gutenberga bloki, kurus var izmantot WordPress un Drupal. Jā, Drupal arī pieņems redaktora Gutenberga redaktoru.
Gutenberga piemēri
Github repozitorija kodu paraugiem, lai izveidotu Gutenberga blokus. Šeit jūs varat atrast vienkāršākais bloks uz sarežģītāku piemēru, piemēram, a “Recepšu bloks” kas redaktorā nosaka veidni, lai lietotāji varētu pievienot recepte saturu. Laba atsauce tiem, kas dod priekšroku mācīties no reāliem piemēriem, nevis mācību grāmatu.
GutenbergJS
Gutenberga tikai JavaScript versija. Tas ir pieejams kā NPM pakete, kas ļauj integrēt Gutenbergu jebkurā JavaScript lietojumprogrammā.
Atspējot Gutenberg
Lai gan Gutenberga dod jaunas iespējas WordPress, bet ne visi ir gatavi tam. Ja jūsu esošās vietnes nedarbojas labi ar Gutenberg, varat instalēt šo spraudni. Tas ļauj jums atspējot Gutenberga redaktoru noteiktām ziņām, pasta veidiem, lietotāju lomām, tēmām, kā arī atspējot Gutenberga stilu tabulas priekšpusē.
Klasiskais redaktors
Varat arī instalēt šo spraudni, lai jūs varētu saglabāt atjauninājumu programmā WordPress 5.0, vienlaikus saglabājot veco klasisko redaktoru. Šis spraudnis tiks atbalstīts līdz 2022. gadam.
ClassicPress
Vēl viena alternatīva ir pārslēgties uz WordPress dakšu, ClassicPress. ClassicPress fokuss ir ieslēgts stabilitāti un drošību. Tas ir saderīgs ar WordPress spraudņiem un plāno nākotnē izlaist jaunas interesantas funkcijas. Izrakstīšanās mūsu amatā: ClassicPress: Alternatīva WordPress bez Gutenberg & React.js
Paātrināt WordPress
Tā kā WordPress ir kļuvis tik liels; vairāk nekā tikai blogošana. Jo īpaši Gutenberga ir pievienojusi jūsu vietnei papildu slodzes, kodus, failus, kas var palēnināt jūsu vietni. Šī ir detalizēta informācija, kuru varat izmantot, lai palīdzētu jums noteikt vietnes sāpes un risināt jaunākās nozares labākās prakses.
Visual Studio koda pārlūkprogrammas priekšskatījums
Vizuālā koda redaktors, kas pievieno īstu pārlūkprogrammu, ko darbina Chrome Headless iekšpusē Visual Studio kods. Tas ļauj jums priekšskatiet savu darbu reālajā laikā labajā pusē koda redaktorā un iespējo funkcijas, piemēram, redaktoru atkļūdošanu.
Bundlesize
Bundlesize ir līdzeklis, lai saglabāt JavaScript failu apvienošana izmērs. Jūs varat definēt katra pievienotā faila maksimālo lielumu, un tas brīdinās, kad tas ir aptuveni vai pārsniedz noteiktu maksimālo lielumu. Bundlesize var tikt integrēts ar CI pakalpojumu, piemēram, TravisCI un CircleCI, lai bez kavēšanās izvietotu darbplūsmu savā projektā.
WP Emerge
Moderns WordPress tēma ir balstīta uz MVC modeli. Ja esat pieradis strādāt ar PHP sistēmu, piemēram, Laravel un Slim, es esmu pārliecināts, ka jūs patiešām novērtēsit šo sistēmu. Jūs varat izmantot tādas lietas kā Router un Controller, DI Container un Middlerware.
Bāka bāka
Lietderības rīks, kas ļauj vadīt Lighthouse CI pakalpojumā, izmantojot Docker. Tas ir lielisks līdzeklis automatizējiet jūsu vietnes veiktspējas pārbaudi katru reizi, kad veicat jaunas izmaiņas jūsu vietnes kodā.
Uzziniet React App
Uzziniet React App ir resurss, lai uzzinātu React.js. Bet atšķirībā no citiem resursiem, kas tur ir, tam vajadzētu būt datorā instalēta lokāli. Tā satur ne tikai mācību materiālus, bet arī kodē un interaktīvos paraugus. Labākā daļa ir tā, ka to var izdarīt, kad tā ir instalēta bezsaistē.
WP pieņemšana
WP akceptēšana ir jauns rīks, kas ļauj veikt pieņemšanas testus. Vienkārši sakot, Pieņemšanas testi ir virkne testus, lai līdzinātu lietotāja uzvedību. Ir vairāki ietvari, lai veiktu šāda veida testus.
Tomēr, ja jūs galvenokārt strādājat ar WordPress, jūs novērtēsiet šo rīku lietošanas ērtībai, jo tas ir izstrādāts un pielāgots tipiskiem WordPress projektiem..
Spīdīga
JavaScript bibliotēka mobilajā ierīcē skatiet apgaismojuma atspoguļojumu savā tīmekļa vietnē. Demo var apskatīt vietnē https://pqina.nl/shiny/. Ir vērts atzīmēt, ka tas darbosies tikai mobilajā ierīcē, jo tas balstās uz noteiktu API, kas ir pieejams tikai mobilajās ierīcēs.
Reaģējiet uz Lucid
ReactLucid ir līdzeklis, lai palīdzētu jums debug React un GraphQL lietojumprogrammas interaktīvāk. Tas ļauj jums redzēt komponentu hierarhiju, stāvokļa / rekvizītu izmaiņas jūsu React lietojumprogrammā, kā arī GraphQL shēmu, vaicājumus un mutācijas reālā laikā.
CSS funkcijas Pārslēgt
Chrome paplašinājums, kas ļauj jums atspējot noteiktas pārlūkprogrammas Chrome funkcijas. Ar to jūs varat redzēt, kā jūsu vietne sniegs un rīkosies, ja nepastāv noteiktas funkcijas. Diezgan noderīgi, lai palīdzētu jums ieviest jaunas CSS funkcijas, kas var nebūt ieviestas visās pārlūkprogrammās.
Blendy
Rīks, kas var jums palīdzēt pielāgojiet CSS fona maisījuma režīmus ar savu attēlu. Varat apskatīt maisījuma režīmus, mainīt krāsas un piemērot slīpumus. Varat izmantot attēlus no Unsplash vai augšupielādēt to no datora.
Reaģēt Elemental
React elementu kolekcija, kas darbojas tieši no kastes. Nav ārēja CSS, lai importētu vai pielāgotu konfigurācijas, kas jāpievieno Webpack. Tas nāk ar būtiskām sastāvdaļām, piemēram, pogu, izvēles rūtiņu, SelectList, cilnēm, Tooltip un daudz vairāk.
FX
Ja jūs bieži sastopaties ar JSON formātu, es esmu pārliecināts, ka jūs novērtēsiet šo rīku. fx ir komandrindas rīks, kas ļauj vizualizēt JSON datus terminālā ar interaktīvo režīmu. tādā veidā, ka jūs varat paplašināt vai sakļaut datus. fx var uzstādīt, izmantojot NPM vai Homebrew.
Monica
Monika ir diezgan savā kategorijā. Tas ir sava veida CRM (Klientu attiecību pārvaldnieks), bet nav domāts jūsu klientam, bet jūsu mīļajiem, piemēram, jūsu ģimenei un draugiem.
Tāpat kā CRM, tas ļauj jums sekot līdzi tādām lietām kā jūsu aktivitātes, un, kad jūs pēdējo reizi tos izsaucāt utt. Vēl vairāk, to var iestatīt, lai atgādinātu jums, ka zvanāt kādam, kuru jūs neesat sarunājis kādā laikā. Viņi to sauc par PRM (Personal Relationship Manager).
Jonu sistēma
Jonu satvars jau kādu laiku ir bijis. Bet pēdējā laikā tā ir veikusi diezgan lielu lēcienu tās funkcionalitātē. Tagad ne tikai tas ir ātrāks, bet tagad ir arī jonu ir saderīga ar divām pieaugošām zvaigznīšu ietvarām: React.js un Vue.js.
Tas nosaka zemi, lai jonu būtu pamata agnostikas rīks. Tātad ne tikai tas, ka tas darbojas konkrētām sistēmām, bet var arī strādāt ar jaunajiem, jo nākotnes attīstība attīstās nākotnē.
Ievērojams
Ievērojams ir piezīmju pieņemšanas darbvirsmas lietojumprogramma. Atšķirībā no jebkuras citas līdzīgas lietotnes tas nav aprīkots ar patentētu formatējumu, WYSIWYG vai citiem tipiskiem zvani un svilpes. The lietojumprogrammas redaktors galvenokārt darbojas ar Github aromātu Markdown. Piezīmes tiek saglabātas vienotā failā .md failus, kā arī pielikumu. Tas vienkārši darbojas un vienkārši.
TipTap
TipTap ir WYSIWYG redaktors, kas uzcelts uz ProseMirror virsmas ar Vue.js. Neatkarīgi no mantojuma vairākām funkcijām no ProseMirror no kastes, piemēram, awesome Markdown sintakses atbalsta, TipTap sniedz dažas modernas funkcijas, piemēram, izvēlnes burbulis, kurā parādīsies formatēšanas izvēlne, izceļot tekstu, ieteikumu funkcija, kurā varat atzīmēt vai norādīt persona, kas satur saturu, un eksportēt spēja eksportēt saturu JSON formatējumā.
Atjaunot
Restplain ir WordPress spraudnis, kas ļauj viegli izveidot jūsu WordPress REST API gala punktu dokumentāciju, ieskaitot pielāgotos gala punktus jūsu vietnē, kā arī API zvana veikšana no dokumentiem. Viena lieta, kas jāatzīmē, ir tā, ka dokumentācija tiek ģenerēta, pamatojoties uz parametru shēmu, tāpēc pārliecinieties, ka esat pievienojis atbilstošu shēmu savam pielāgotajiem beigu punktiem.
Reaģējiet uz satura ielādētāju
Reaģējiet uz satura ielādētāju ir React pielāgots komponents, kas ļauj attēlot satura izvietojumu, kamēr tiek ielādēts faktiskais saturs. Tas ir līdzīgs tam, kāda veida iekrāvējs ir redzams Facebook un Instagram .
Mītisks
Mītisks ir WordPress startera tēma ar mūsdienīgām labākajām praksēm, piemēram, atkarības iesmidzināšana, skati un kontrolieri, kā arī mūsdienīgi instrumenti, piemēram, lietošana Webpack, Sass, Linting, PHP7 minimālā prasība, un BEM. Tā ir lieliska tēma, lai izlīdzinātu savas prasmes kā tēmas izstrādātāju.
Rafinēts Github
Pārlūka paplašinājums, lai uzlabotu savu pieredzi, lietojot Github. Tas pievieno vairākus ērtus karstos taustiņus, precizē dažus izkārtojumus un UI, automātiski pievieno saiti uz problēmām un PR, un vēl daudz vairāk.
Atvērt WC
Atvērt WC ir rīku kopums, kas ļauj izveidot pielāgotus tīmekļa komponentus. Tas ietver galveno bibliotēku, lai izveidotu Web komponentu, Yanoman ģeneratorus, lai ātri ģenerētu “Atvērt WC” projektā, kas ietver testus, uzklāšana, un turpina integrāciju.
Atvērtā WC var būt laba alternatīva, ja vēlaties dod priekšroku ieviešanai ar vietējo tīmekļa funkciju nevis izmantot sistēmu, piemēram, Vue.js vai React.js.
Gridsome
Gridsome ir a rīks, lai izveidotu statiskas tīmekļa vietnes un tīmekļa lietojumprogrammas ar Vue.js un GraphQL. Tas spēj apstrādāt vairākas datu plūsmas, piemēram, no CMS, piemēram, WordPress un Drupal, vietējo failu, piemēram, Markdown vai Yaml, vai ārēju API, piemēram, AirTable un Contentful. Šī ir tiešām lieliska alternatīva Gatsby.js, it īpaši, ja dod priekšroku Vue.js pār React.js.
Pārlūks
Tā ir pārlūkprogramma, ko paredzēja pats World Wide Web izgudrotājs, Tim Berners-Lee. Tas ir vienkāršs pārlūks, lai padarītu HTML un neparāda adrešu joslu kā modernu pārlūkprogrammu, bet jūs varat apskatīt, dodoties uz Dokuments> Atvērt no pilnas dokumenta atsauces un ielīmējiet URL un noklikšķiniet uz Atvērt. Un tur redzēsiet, kā jūsu vietne sniegs sākotnējo pārlūkprogrammu.
Rastra
Rastra ir moderna režģa sistēma, kas veidota ar mūsdienīgu HTML un CSS specifikāciju, piemēram, CSS režģi, CSS pielāgoto īpašumu (mainīgais) un pielāgoto elementu. Ideāls ietvars tiem, kam patīk dzīvot malās.
Hoopers
Vue.js komponents, lai pievienotu karuseļu vai slīdni. Tas ir pieejams un izmantojams, izmantojot Touch, Keyboard, Mouse Wheel un citu palīg navigāciju, tas atbalsta RTL un vertikālo virzienu, paplašināmu un, protams, atbildi.
