Nauji ištekliai žiniatinklio dizaineriams ir kūrėjams (2019 m. Kovo mėn.)
Per pastaruosius keletą mėnesių įvyko daug interneto svetainių kūrimo. Pirma, nauja bloko redaktorius, pavadintas Gutenberg, pagaliau buvo sujungtas į „WordPress 5.0“. Tai labai didelis pokytis nuo jo įkūrimo, nes jis sukuria naują pagrindą „WordPress“ vystytis ateityje ir pakeis būdą, kaip kūrėjai išplėsti „WordPress“ funkcijas.
Antra, keletas mūsų kolegų kūrėjų sukūrė keletą tikrai naudingų priemonių, pavyzdžiui, leidžiančių peržiūrėti JSON terminalą ir pora React bibliotekų, kurios gali būti labai naudingos interneto projektavimo ir plėtros projektams.
Ir galiausiai, kai kurie iš efektyviausių išteklių, nuorodų ir papildinių buvo pradėtos padėti jums atnaujinti savo projektus pagal naujesnes tendencijas.
Paimkime išsamesnį šviežių interneto plėtros išteklių sąrašą.
Gutenbergo vadovas
Oficialus „WordPress“ vadovas, kuriame galite ieškoti dizaino nuorodų, blokų kūrimo kodų pavyzdžiai ir kiti projektai. Tai yra pirmasis jūsų Gutenberg'o kūrimo pavyzdys.
Blokuoti pastolius
Su blokiniu redaktoriu WP-CLI dabar suteikia patogų būdą pradėti sukurti Gutenbergo bloką su nauja CLI komanda, wp pastolių blokas. Galite sukurti ir įtraukti ją į esamus papildinius ir temas.
CGB
Kitas būdas lengvai paleisti „Gutenberg“ bloką yra „Create Guten Block“ (CGB) generuoti katilinę sukurti Gutenbergo bloką. Jis susideda iš šiuolaikinių priemonių, tokių kaip React.js, Webpack, ESLint, Babel ir kt. nereikia konfigūruoti jokių šių įrankių todėl galite tiesiog sutelkti dėmesį į savo kodo rašymą.
Elementoriniai blokai Gutenbergei
WordPress įskiepis, kuris leidžia jums įterpti bet kokius Elementor šablonus ir peržiūrėkite jį tiesiai redaktoriuje. Įskiepis turi daugybę kitų suderinamumo funkcijų besiūlių redagavimo patirties tarp Elementoro ir Gutenbergo. Peržiūrėkite šį vaizdo įrašą, kad pamatytumėte, kaip tai veikia.
Atominiai blokai
Gutenbergo blokų rinkinys su vis daugiau kolekcijų. Šio rašymo metu ji pateikia “Rašyti tinklelio bloką” kuri leidžia jums pridėkite savo svetainės įrašų sąrašą tinklelio schemoje. Taip pat yra “Atitikties blokas” kuris, kaip rodo pavadinimas, į puslapį įterpti atsiliepimą. Peržiūrėkite visą šio puslapio „Blokų“ peržiūrą.
Blokuoti galeriją
Žvilgsnis į akį, į kurį įterpiamas paveikslėlių galerija, „Blokuoti galeriją“ suteikia nepriekaištingą patirtį pridėti vaizdus į jūsų įrašą. Paprasčiausiai palikite vaizdus, stiliaus galerijos ekraną (mūrinis stilius, karuselė arba viso ekrano ekranas) ir visa tai nustatoma. Šiuo metu tai tiesiog geriausias „WordPress“ galerijos blokas.
„CoBlocks“
Vieno to paties autoriaus blokų, kurie sukūrė pirmiau minėtą blokų galeriją „CoBlocks“, rinkinį sudaro daugybė blokų, kurie pagerins jūsų svetainės turinį, pvz. Akordeonas, kainodaros lentelė, Gif, paspaudimas, ir daugiau blokų.
„StagBlocks“
Kitas Gutenbergo blokų rinkinys. Įskiepis atneša daug įdomių blokų, kuriuos daugelis iš jūsų vertintų. Ji apima „Stat Block“, kuri leidžia jums pritaikyti statistiką savo žinutėse ir puslapiuose. Svetainės kortelės blokas, kuris bus peržiūrėti tinklalapį išgalvotas kortelių stilius. Kodo blokas, kuris suteiks kodą su pažymėta spalva.
Vidiniai blokai
Be to, Gutenbergo blokų, tokių kaip “„Google“ žemėlapių blokas” įterpti žemėlapį, “Mūsų paslaugų blokas” į įterpti paslaugų sąrašą su mygtuku tinklelio rodinyje, ir “Atsiliepimai „Area Block“” įterpti atsiliepimų sąrašą. „Otter Block“ yra „Gutenberg Blocks“ kolekcija, kurią vertintų įmonės ir temų kūrėjai.
Išplėstiniai Gutenbergo blokai
Šis įskiepis ateina su sauja Išplėstiniai blokai, kurie praturtina jūsų turinį pvz., automatiškai sukurta turinio lentelė, “Giphy blokai” įtraukti GIF vaizdą iš „Giphy.com“, “Unsplash blokas” įterpti vaizdus iš „Unsplash.com“, “Reklaminio skelbimo reklamos blokas”, „WooCommerce“ “Add-to-Cart mygtuko blokas”, ir daug daugiau.
Blokuoti laboratoriją
„Block Lab“ leidžia kūrėjams lengvai sukurti „Gutenberg“ bloką. Įskiepis leidžia jums užregistruoti naują bloką su patogia GUI ir šablonus PHP. Net nereikia išmokti React.js.
EDD blokai
Įskiepis, leidžiantis pateikti „Easy Digital Downloads“ produktus „Gutenberg“ redaktoriuje. Skirtingai nei naudojant trumpąjį kodą, blokas parodys produkto rodinius.
Bandymas Gutenberge
Ar nėra pasirengęs įdiegti „Gutenberg“ įskiepio ar atnaujinti savo svetainę į „WordPress 5.0“? Jūs galite tiesiog įkelkite šią svetainę ir išbandykite naują redaktorių.
Gutenbergo debesis
Tai tarsi „AppStore“ „Gutenberg“ blokams. Centrinė vieta, kur galite gauti „Gutenberg“ blokai, kuriuos galima naudoti „WordPress“ ir „Drupal“. Taip, Drupal taip pat ketina priimti redaktoriui Gutenbergo redaktorių.
Gutenbergo pavyzdžiai
„Github“ kodų pavyzdžių saugykla, sukurianti „Gutenberg“ blokus. Čia galite rasti paprasčiausias Blokuoti į sudėtingesnį pavyzdį, pvz., sukurti a “Receptų blokas” kuris redaguotojui nustato šabloną, kurį naudotojai gali pridėti receptas turinys. Geras pavyzdys tiems, kurie nori mokytis iš realių pavyzdžių, o ne vadovėlių.
GutenbergJS
„Gutenberg“ tik „JavaScript“ versija. Tai yra NPM paketas, kuris leidžia integruoti „Gutenberg“ į bet kurią „JavaScript“ programą.
Išjungti „Gutenberg“
Nors „Gutenberg“ „WordPress“ suteikia naujų galimybių, tačiau ne visi yra pasiruošę. Jei jūsų esamos svetainės neveikia su „Gutenberg“, galite įdiegti šį papildinį. Tai leidžia jums išjungti „Gutenberg“ redaktorių tam tikriems įrašams, pašto tipams, vartotojų vaidmenims, temoms, taip pat išjungti „Gutenberg“ stilių lenteles.
Klasikinis redaktorius
Arba galite įdiegti šį įskiepį, kad galėtumėte nuolat atnaujinti „WordPress 5.0“, o toliau naudoti senąjį klasikinį redaktorių. Šis papildinys bus palaikomas iki 2022 m.
„ClassicPress“
Kita alternatyva - pereiti prie „WordPress“ šakutės „ClassicPress“. Įjungtas „ClassicPress“ fokusavimas stabilumą ir saugumą. Tai suderinama su „WordPress“ įskiepiais ir planuoja ateityje išleisti naujus įdomius elementus. Išregistruokite mūsų postą: „ClassicPress“: alternatyva „WordPress“ be „Gutenberg & React.js“
Paspartinti WordPress
Kaip WordPress tapo toks didelis; daugiau nei tik dienoraščių platforma. Ypač „Gutenberg“ papildė jūsų svetainėje papildomas apkrovas, kodus, failus, kurie gali sulėtinti jūsų svetainę. Tai yra išsami informacija, kurią galite nurodyti, kad galėtumėte identifikuoti savo svetainėje esančius skausmo taškus ir išspręsti naujausias geriausias šio sektoriaus praktikas.
„Visual Studio“ kodo naršyklės peržiūra
„Visual Studio“ redaktorius, kuriame „Chrome“ „Headless“ viduje sukurta tikroji naršyklė „Visual Studio Code“. Tai leidžia jums peržiūrėti savo darbą realiu laiku kodo redaktoriaus viduje ir įgalina funkcijas, pvz., redaktoriaus derinimą.
Bundlesize
Bundlesize yra priemonė palaikykite „JavaScript“ failą susiejimas dydis. Galite nustatyti maksimalų kiekvienos susietos rinkmenos dydį ir įspėti jus, kai tai yra arba viršijo nustatytą maksimalų dydį. „Bundlesize“ gali būti integruota su CI paslauga, pvz., „TravisCI“ ir „CircleCI“, kad jūsų projektas būtų sklandžiai diegiamas..
WP Emerge
Modernus „WordPress“ temos sistema, pagrįsta MVC modeliu. Jei esate įpratę dirbti su PHP sistema, pvz., „Laravel“ ir „Slim“, esu tikras, kad tikrai įvertinsite šią sistemą. Galite naudoti tokius dalykus kaip maršrutizatorius ir valdiklis, DI konteineriai ir „Middlerware“.
Švyturys Bot
Naudingumas įrankis, leidžiantis paleisti Švyturį CI tarnyboje naudojant „Docker“. Tai puiki priemonė automatizuokite svetainės našumo patikrinimą kiekvieną kartą paspaudus naują svetainės kodo pakeitimą.
Sužinokite React App
Sužinokite „React“ „App“ yra išteklis, skirtas išmokti React.js. Tačiau, skirtingai nei kiti ištekliai, tai turėtų būti įdiegta jūsų kompiuteryje. Jame yra ne tik mokymosi medžiaga, bet ir koduojami bei interaktyvūs pavyzdžiai. Geriausia yra tai, kad jūs galite tai padaryti neprisijungę, kai ji yra įdiegta.
WP priėmimas
WP priėmimas yra naujas įrankis, leidžiantis atlikti priėmimo testus. Paprasčiau tariant, Priėmimo testai yra serija bandymai, skirti imituoti vartotojo elgesį. Yra keletas karkasų, kuriais galima atlikti šį bandymą.
Tačiau, jei pirmiausia dirbate su „WordPress“, jūs įvertinsite šį įrankį naudojimui, nes jis yra sukurtas ir pritaikytas tipiškiems „WordPress“ projektams..
Blizgantis
„JavaScript“ biblioteka imituojate apšvietimo atspindžius jūsų svetainėje, kai žiūrima mobiliajame įrenginyje. Demo galite peržiūrėti https://pqina.nl/shiny/. Verta pažymėti, kad jis veiks tik mobiliajame įrenginyje, nes jis remiasi tam tikra API, kuri yra prieinama tik mobiliuosiuose įrenginiuose.
Reaguokite Lucid
ReactLucid yra priemonė jums padėti debug React ir GraphQL programos interaktyviau. Tai leidžia matyti komponento hierarchiją, būsenos / rekvizitų pakeitimus React programoje, taip pat grafikos schemą, užklausas ir mutacijas realiu laiku.
CSS funkcijos Įjungti
„Chrome“ plėtinys, kuris leidžia jums išjungti tam tikras „CSS“ funkcijas „Chrome“. Taip pamatysite, kaip jūsų svetainė bus rodoma ir elgsis, kai nėra tam tikrų funkcijų. Gana naudinga padėti jums įdiegti naujas CSS funkcijas, kurios gali būti neįdiegtos visose naršyklėse.
Blendy
Priemonė, kuri gali jums padėti pritaikykite CSS fono mišinio režimus su savo vaizdu. Galite peržiūrėti mišinio režimus, keisti spalvas ir taikyti gradientus. Galite naudoti vaizdus iš „Unsplash“ arba įkelti jį iš kompiuterio.
Reaguokite į Elemental
React elementų rinkinys, veikiantis iš lauko. Nėra išorinio CSS, kad būtų galima importuoti ar pritaikyti konfigūracijas, kurias norite įtraukti į „Webpack“. Jame yra svarbiausių komponentų, tokių kaip mygtukas, žymės langelis, SelectList, skirtukai, „Tooltip“ ir daug daugiau.
FX
Jei dažnai dirbate su JSON formatu, esu tikras, kad įvertinsite šią priemonę. fx yra komandinės eilutės įrankis, leidžiantis vizualizuoti JSON duomenis terminale su interaktyviu režimu. taip, kad galėtumėte išplėsti arba sutraukti duomenis. fx galima įdiegti per NPM arba Homebrew.
Monica
Monika yra gana savo kategorijoje. Tai „CRM“ („Customer Relationship Manager“), tačiau tai nėra skirta jūsų klientui, bet jūsų artimiesiems, kaip jūsų šeimai ir draugams.
Kaip ir CRM, tai leidžia jums sekti dalykus, pvz., Su jais susijusius veiksmus, ir kai paskutinis jų paskambino ir pan. Dar daugiau, galite nustatyti, kad primintumėte jums skambinti kažkam, su kuriuo nesate kalbėjęs. Jie vadina PRM (asmeninių santykių vadybininkas).
Jonų sistema
Jonų sistema iš tikrųjų buvo maždaug. Tačiau pastaruoju metu jis labai padidino savo funkcionalumą. Dabar ne tik tai, kad tai greičiau, bet dabar yra joninis suderinama su dviem kylančiomis žvaigždės sistemomis: React.js ir Vue.js.
Tai lemia tai, kad joninis yra a pagrindinės agnostikos priemonės. Taigi ne tik tai, kad ji veikia tam tikrose sistemose, bet ir gali dirbti kartu su naujomis sistemomis, nes ateities plėtra vystosi ateityje.
Pažymėtina
Pažymėtina yra pastabų priėmimo programa. Skirtingai nuo bet kurios kitos panašios programos, ji neturi nuosavybės formos WYSIWYG ar kitų tipiškų varpų ir švilpukų. The programos redaktorius daugiausia maitinamas „Github“ skonio „Markdown“. Pastabos saugomos viename faile .md failus ir priedą. Tai tiesiog veikia ir paprasta.
„TipTap“
TipTap yra WYSIWYG redaktorius, pastatytas ant „ProseMirror“ su „Vue.js.“ Be to, kad iš „ProseMirror“ iš eilės paveldėsite daugybę funkcijų, pvz., „Awesome“ „Markdown“ sintaksės palaikymo, „TipTap“ pristato keletą modernių funkcijų, pvz., Meniu burbulas, kuriame bus rodomas formatavimo meniu, kai bus paryškintas tekstas, pasiūlymo funkcija, kurioje galite pažymėti arba nurodyti asmuo, turintis turinį, ir eksportuoja galimybė eksportuoti turinį JSON formatu.
Atleiskite
Restplain yra „WordPress“ įskiepis, leidžiantis lengvai generuoti „WordPress REST API“ galutinių taškų dokumentaciją, įskaitant pasirinktinius svetainės taškus, taip pat skambinti API iš dokumentų. Vienas dalykas, kurį reikia pažymėti, yra tai, kad jis remiasi parametro schema, kad sukurtų dokumentaciją, todėl įsitikinkite, kad pridėjote tinkamą schemą savo pasirinktiniams galutiniams taškams.
Reaguokite į turinio krautuvą
Reaguokite į turinio krautuvą yra „React custom“ komponentas, leidžiantis rodyti turinio vietos žymeklį, kai faktinis turinys yra įkeltas. Tai panaši į „Facebook“ ir „Instagram“ rodomo krautuvo tipą .
Mitinis
Mitinis yra „WordPress“ starterio tema su šiuolaikinėmis geriausiomis praktikomis, pvz., Priklausomybės įpurškimu, vaizdais ir valdikliais, taip pat moderniomis priemonėmis, pvz. „Webpack“, „Sass“, „Linting“, PHP7 minimalus reikalavimas, ir BEM. Tai puiki tema, kad lygintumėte savo įgūdžius kaip temos kūrėją.
Rafinuotas Github
Naršyklės plėtinys, skirtas patobulinti jūsų patirtį naudojant „Github“. Ji prideda kelis patogius sparčiuosius klavišus, patobulina kai kuriuos išdėstymus ir UI, automatiškai prideda nuorodą į problemas ir PR, ir dar daugiau.
Atidaryti WC
Atviras WC - tai įrankių rinkinys, leidžiantis sukurti individualų interneto komponentą. Į jį įeina pagrindinė biblioteka, sukurianti „Web Component“, „Yanoman“ generatorius, kad būtų galima greitai generuoti “Atidaryti WC” projektą, kuris apima bandymų pastolius, įdėjimas, ir tęsia integraciją.
Atviras tualetas gali būti gera alternatyva, jei norite pirmenybę teikia įgyvendinimui su vietine žiniatinklio funkcija o ne naudojant tokią sistemą kaip Vue.js arba React.js.
Gridome
Gridome yra a įrankis statyti statines svetaines ir interneto programas su „Vue.js“ ir „GraphQL“. Jis gali tvarkyti kelis duomenų srautus, pvz., Iš „CMS“, pvz., „WordPress“ ir „Drupal“, vietinį failą, pvz., „Markdown“ arba „Yaml“, arba išorinę API, pvz., „AirTable“ ir „Contentful“. Tai tikrai puiki alternatyva „Gatsby.js“, ypač jei pageidaujate „Vue.js“ per „React.js“.
Naršyklė
Tai yra naršyklė, kurią įsivaizdavo pats World Wide Web išradėjas, Tim Berners-Lee. Tai yra paprasta naršyklė, skirta HTML ir nerodo adreso juostos kaip moderni naršyklė, bet galite peržiūrėti naršydami Dokumentas> Atidaryti iš visos dokumento nuorodos ir įklijuokite URL ir spustelėkite Atviras. Ir pamatysite, kaip jūsų svetainė bus pateikta su originalia naršykle.
Rastras
Rastras yra moderni tinklelio sistema, sukurta moderniomis HTML ir CSS specifikacijomis, pvz., CSS tinkleliu, „CSS Custom Property“ (kintama) ir pasirinktiniu elementu. Puiki sistema tiems, kurie mėgsta gyventi ant kraštų.
Hooper
„Vue.js“ komponentas, skirtas pridėti „Karuselę“ arba „Slider“. Jis pasiekiamas ir naudojamas per „Touch“, klaviatūrą, pelės ratuką ir kitą pagalbinę navigaciją, jis palaiko RTL ir vertikalią kryptį, išplečiamas ir, žinoma, atsakas.
