Resurse proaspete pentru designeri web și dezvoltatori (martie 2019)

Multe lucruri s-au întâmplat în ultimele luni în lumea dezvoltării web. În primul rând, noul editor bazat pe blocuri, codificat Gutenberg, a fost în cele din urmă fuzionat în WordPress 5.0. Este o schimbare foarte mare de la începuturile sale, deoarece stabilește o nouă bază pentru WordPress pentru a evolua în viitor și va schimba modul în care dezvoltatorii se extind pentru funcționalitățile WordPress.

În al doilea rând, câțiva dintre colegii noștri dezvoltatori au creat câteva instrumente utile, cum ar fi una care permite vizualizați JSON în terminal și câteva biblioteci React care se pot dovedi un mare ajutor în proiectarea și dezvoltarea proiectelor web.

Și, în sfârșit, unele dintre cele mai eficiente resurse, referințe și pluginuri au fost lansate pentru a vă ajuta să actualizați proiectele în funcție de noile tendințe.

Să ajungem pe cea mai cuprinzătoare listă de resurse proaspete de dezvoltare web.

Gutenberg Handbook

Manualul oficial WordPress, unde puteți găsi referințe pentru design, exemple de cod pentru crearea blocurilor și altele și un ghid pentru a contribui la proiect. Este prima referință pentru dezvoltarea cu Gutenberg.

Blochează schela

Cu editorul bazat pe blocuri, WP-CLI oferă acum o modalitate convenabilă de a începe crearea unui bloc Gutenberg cu o nouă comandă CLI, wp bloc de schele. Puteți crea și include în pluginurile și temele existente.

CGB

O altă modalitate de a porni cu ușurință un bloc Gutenberg este Crearea Guten Block (CGB) este un instrument generează o plută pentru a dezvolta un bloc Gutenberg. Este alcătuită din instrumente moderne, cum ar fi React.js, Webpack, ESLint, Babel, etc. Cea mai bună parte este că nu trebuie să configurați niciunul dintre aceste instrumente astfel încât să vă puteți concentra pur și simplu asupra scrierii codului.

Blocuri Elementor pentru Gutenberg

Un plugin WordPress care vă permite să introduceți toate șabloanele Elementor și previzualizați-o chiar în cadrul editorului. Plugin-ul vine cu numeroase alte compatibilități care le oferă fără experiență de editare fără sudură între Elementor și Gutenberg. Consultați acest videoclip pentru a vedea cum se face în acțiune.

Blocuri atomice

Un set de blocuri Gutenberg cu un număr tot mai mare de colecții. La momentul acestei scrieri, el furnizează “Post Grid Block” care vă permite să adăugați o listă de postări ale site-ului dvs. într-un aspect al rețelei. Există și a “Testimonial Block” care, după cum sugerează și numele, să introducă o mărturie în pagină. Consultați previzualizările complete ale blocurilor din această pagină.

Galeria de blocare

Un bloc atractiv pentru a introduce galeria dvs. de imagini, Block Gallery oferă o experiență perfectă pentru a adăuga imagini la postarea dvs. Pur și simplu picătură imaginile dvs., stilul de afișare galerie (Masonerie-stil, Carusel, sau Fullscreen), și este totul setat. Este, momentan, pur și simplu cea mai bună Galerie Block pentru WordPress.

CoBlocks

O suită de blocuri de la același autor, care a dezvoltat Galeria de imagini mai sus menționată, CoBlocks constă dintr-un număr de blocuri care vor îmbunătăți conținutul site-ului dvs., cum ar fi Acordeon, Tabel de prețuri, Gif, Click-to-Tweet, și mai multe blocuri care urmează să fie adăugate.

StagBlocks

O altă suită de blocuri Gutenberg. Plugin-ul aduce un număr de blocuri interesante pe care mulți dintre voi l-ați aprecia. Acesta include Stat Block, care vă permite să personalizați statisticile în cadrul postărilor și paginilor dvs. Blocul de site-uri web care va site-ul de previzualizare într-un stil cardic fantezist. Blocul de coduri care va face codul cu culoarea evidențiată.

Otter Blocks

De asemenea, o colecție de blocuri Gutenberg cum ar fi “Blocarea Google Maps” pentru a insera o hartă, “Blocul nostru de servicii” la introduceți o listă de servicii cu un buton într-o vizualizare în rețea, și “Testimonials Area Block” pentru a insera o lista de marturii. Otter Block este o colecție de blocuri Gutenberg pe care întreprinderile și dezvoltatorii de teme le-ar aprecia.

Blocuri avansate Gutenberg

Acest plugin vine cu o mână de blocuri avansate pentru a vă îmbogăți conținutul cum ar fi tabela de conținut generată automat, “Giphy Blocks” pentru a include imaginea GIF de la Giphy.com, “Unsplash Block” pentru a insera imagini de la Unsplash.com, “Banner Ad Block”, WooCommerce “Blocul butonului Adăugare la Cart”, si mult mai mult.

Block Lab

Block Lab îl ajută pe dezvoltatori să creeze un bloc Gutenberg. Plugin-ul vă permite înregistrați un nou Bloc cu un GUI ușor de utilizat și șabloane în PHP. Nici măcar nu trebuie să înveți React.js.

EDD Blocks

Un plugin care vă permite să redactați produsele Easy Digital Downloads în editorul Gutenberg. Spre deosebire de utilizarea Shortcode, blocul va afișa vizualizările de produse.

Testează Gutenberg

Nu sunteți gata să instalați pluginul Gutenberg sau să vă actualizați site-ul la WordPress 5.0? Poți pur și simplu încărcați acest site pentru a încerca noul editor.

Gutenberg Cloud

E ca un AppStore pentru Blocurile Gutenberg. Un loc central unde puteți ajunge Blocuri Gutenberg care pot fi utilizate în WordPress și Drupal. Da, Drupal va adopta, de asemenea, editorul Gutenberg pentru editorul său.

Exemple Gutenberg

Un depozit Github de mostre de cod pentru a crea blocuri Gutenberg. Aici puteți găsi simplu Blocați la un exemplu mai complex, cum ar fi cea de creare a “Rețetă bloc” care stabilește un șablon în editorul pe care îl pot adăuga utilizatorii reţetă conţinut. O referință bună pentru cei care preferă să învețe din exemple reale, mai degrabă decât o carte de text.

GutenbergJS

Versiunea exclusivă JavaScript a lui Gutenberg. Este disponibil ca un pachet NPM care vă permite să integrați Gutenberg în orice aplicație JavaScript.

Dezactivați Gutenberg

Deși Gutenberg aduce noi posibilități pentru WordPress, dar nu toată lumea este pregătită pentru asta. Dacă site-urile existente nu funcționează bine cu Gutenberg, puteți instala acest plugin. Vă permite să dezactivați editorul Gutenberg pentru posturi speciale, tipuri de posturi, roluri de utilizator, teme, precum și dezactivați foile de stil Gutenberg în front-end.

Editorul clasic

Alternativ, puteți instala acest plugin pentru a putea să actualizați WordPress 5.0 în timp ce păstrați în continuare vechiul editor clasic. Acest plugin va fi acceptat până în 2022.

ClassicPress

O altă alternativă este trecerea la o furcă WordPress, ClassicPress. Aparatele Focus ClassicPress sunt activate afaceri, stabilitate și securitate. Este compatibil cu pluginurile WordPress și intenționează să aducă noi caracteristici interesante în versiunile viitoare. Verificați postarea noastră: ClassicPress: Alternativă la WordPress fără Gutenberg & React.js

Accelerați-vă WordPress

Cum WordPress a devenit atât de mare; mai mult decât o platformă de bloguri. Gutenberg, în special, a adăugat câteva încărcări suplimentare, coduri, fișiere pe site-ul dvs., care pot încetini site-ul dvs. Acesta este un detaliu pe care îl puteți referi pentru a vă ajuta să identificați punctele de durere de pe site-ul dvs. și să îi adresați celor mai recente practici în domeniu.

Visual Studio Cod Browser Preview

Un editor de cod vizual care adaugă un browser real, alimentat de Chrome Headless, în interiorul codului Visual Studio. Acest lucru vă permite să previzualizați-vă munca în timp real chiar în interiorul editorului de cod și permite caracteristici cum ar fi depanarea în editor.

Bundlesize

Bundlesize este un instrument pentru păstrați fișierul JavaScript bundling mărimea sub control. Puteți defini dimensiunea maximă a fiecăruia dintre fișierele incluse în pachet și vă va avertiza când este vorba sau a trecut dimensiunea maximă definită. Bundlesize poate fi integrat cu un serviciu CI precum TravisCI și CircleCI pentru implementarea fără probleme a fluxului de lucru în proiectul dvs..

WP Emerge

Un modern Tema tematică WordPress bazată pe modelul MVC. Dacă sunteți obișnuit să lucrați cu un cadru PHP precum Laravel și Slim, sunt sigur că veți aprecia acest cadru. Puteți utiliza lucruri precum Router și Controller, DI Container și Middlerware.

Fată de Bot

Un instrument utilitar care vă permite să rulați farul într-un serviciu CI folosind Docker. Este un instrument minunat automatizați verificarea performanței site-ului de fiecare dată când impingeți o nouă modificare a codului site-ului dvs. web.

Aflați reacția aplicației

Learn React App este o resursă pentru a afla React.js. Dar, spre deosebire de celelalte resurse de acolo, ar trebui să fie așa instalat local în computer. Nu conține numai materiale de învățare, ci și eșantioane de cod și interactive. Cea mai bună parte este că o puteți face offline când este instalată.

Acceptarea WP

WP Acceptance este un nou instrument care vă permite să efectuați teste de acceptare. Pentru a spune pur și simplu, Testele de acceptare sunt o serie de teste pentru a emula comportamentul utilizatorilor. Există o serie de cadre acolo pentru a efectua acest tip de test.

Cu toate acestea, dacă sunteți în primul rând de lucru cu WordPress, veți aprecia acest instrument pentru ușurința de utilizare, deoarece este proiectat și adaptate la tipic WordPress nevoie de proiecte.

Lucios

O bibliotecă JavaScript pentru imita reflecția de iluminare pe site-ul dvs. atunci când este vizualizat pe dispozitivul mobil. Puteți vedea demo-ul în https://pqina.nl/shiny/. Este demn de remarcat faptul că acesta va funcționa numai în dispozitivele mobile, deoarece se bazează pe un anumit API disponibil doar pe dispozitivele mobile.

React Lucid

ReactLucid este un instrument care vă ajută depanarea aplicațiilor React și GraphQL într-un mod mai interactiv. Acesta vă permite să vedeți ierarhia componentelor, modificările de stat / props în cadrul aplicației dvs. React, precum și schema GraphQL, interogările și mutațiile în timp real.

Funcțiile CSS Comută

O extensie Chrome care vă permite dezactivați anumite funcții CSS în Chrome. Cu aceasta puteți vedea modul în care site-ul dvs. Web se va afișa și se va comporta atunci când anumite funcții nu există. Destul de util pentru a vă ajuta să implementați noi funcții CSS care nu pot fi implementate în toate browserele.

Blendy

Un instrument care vă poate ajuta personalizați modurile de amestecare a fundalului CSS cu imaginea dvs.. Puteți previzualiza modurile de amestecare, schimba culorile și aplica gradiente. Aveți posibilitatea să utilizați imagini de la Unsplash sau să le încărcați de pe computer.

React Elemental

O colecție de elemente React care funcționează direct din cutie. Nu există niciun CSS extern pentru a importa sau personaliza configurațiile pe care să le adăugați pe Webpack. Acesta vine cu componente esențiale cum ar fi Butonul, Checkbox, SelectList, Tabs, Tooltip și multe altele.

FX

Dacă de multe ori aveți de-a face cu format JSON, sunt sigur că veți aprecia acest instrument. fx este a instrument de linie de comandă care vă permite să vizualizați datele JSON în Terminal cu modul interactiv. într-un mod în care puteți extinde sau restrânge datele. fx pot fi instalate prin intermediul NPM sau Homebrew.

Monica

Monica este pe propria categorie. Este un fel de CRM (Customer Relationship Manager), dar nu este destinat clientului tău, ci pentru cei dragi ca familia și prietenii tăi.

Ca un CRM, vă permite să urmăriți lucruri precum activitățile dvs. cu ei și când le-ați sunat pentru ultima oară. Chiar și mai mult, poate fi programată să vă reamintească să apelați la cineva cu care nu ați vorbit. Ei îl numesc PRM (Personal Relationship Manager).

Cadru ionic

Cadrul ionic a fost de fapt în jur de ceva timp. Dar, în ultima vreme, a făcut un salt destul de mare în funcționalitatea sa. Acum nu numai că este mai rapid, dar ionic este acum compatibil cu două cadre ascendente: React.js și Vue.js.

Acest lucru creează terenul pentru ca ionicul să fie a instrument agnostic cadru. Astfel, nu numai că funcționează pentru cadre speciale, dar poate funcționa și cu cele noi, pe măsură ce evoluția front-end-ului evoluează în viitor.

notabil

Notă este o aplicație desktop care ține note. Spre deosebire de orice altă aplicație similară, nu are formatare propriu-zisă, WYSIWYG sau alte clopote și fluiere tipice. editorul de aplicații este în principal alimentat de Markdown cu aromă Github. Notele sunt stocate într-un fișier plat .md fișiere, precum și atașamentul. Pur și simplu funcționează.

TipTap

TipTap este un editor WYSIWYG construit pe partea de sus a ProseMirror cu Vue.js. În afară de moștenirea numeroaselor funcții din ProseMirror, cum ar fi suportul minunat al sintaxei Markdown, TipTap aduce câteva funcții moderne, cum ar fi meniul Bubble unde va apărea meniul de formatare când se evidențiază textul, caracteristica Suggestion unde puteți să etichetați sau să menționați o persoană din cadrul conținutului și exportați capacitatea de a exporta conținut în format JSON.

Restplain

Restplein este un plugin WordPress care vă permite să generați cu ușurință documentația finală a punctelor finale API pentru WordPress REST, inclusiv obiectivele personalizate ale site-ului dvs., precum și efectuând un apel API din cadrul docs. Un lucru de reținut este faptul că se bazează pe schema de parametru final pentru a genera documentația, deci asigurați-vă că ați adăugat o schemă adecvată pentru obiectivele personalizate.

Reacționează conținutul încărcătorului

Reacționează conținutul încărcătorului este o componentă personalizată React care vă permite să afișați înlocuitorul conținutului în timp ce încărcați conținutul real. Este similar cu tipul de încărcător pe care îl vedeți pe Facebook și pe Instagram .

Mitic

Mythic este o temă de pornire WordPress cu cele mai bune practici moderne, cum ar fi Dependența de injecție, vizionări și controlori, precum și instrumente moderne, cum ar fi utilizarea Webpack, Sass, Linting, PHP7 cerință minimă și BEM. Este o temă excelentă pentru a-ți îmbunătăți abilitățile ca dezvoltator de teme.

Github rafinat

O extensie a browserului pentru a vă perfecționa experiența atunci când utilizați Github. Se adaugă mai multe taste rapide la îndemână, se rafinate unele layouts și UI-uri, se adaugă automat link-ul către probleme și PR-uri și multe altele.

WC deschis

Open WC este un set de instrumente care vă permit să creați o componentă Web personalizată. Acesta include biblioteca principală pentru a crea o componentă Web, generatoare Yeoman pentru a genera rapid o “WC deschis” proiect, care include schela pentru testare, scămoșare, și continuă integrarea.

WC-ul deschis poate fi o alternativă bună dacă doriți preferă implementarea cu o caracteristică web nativă mai degrabă decât folosind un cadru ca Vue.js sau React.js.

Gridsome

Gridsome este a instrument pentru a construi site-uri statice și aplicații web cu Vue.js și GraphQL. Este capabil să gestioneze mai multe fluxuri de date, cum ar fi de la CMS, cum ar fi WordPress și Drupal, un fișier local precum Markdown sau Yaml sau API extern, cum ar fi AirTable și Contentful. Aceasta este o alternativă foarte bună la Gatsby.js, mai ales dacă preferăm Vue.js peste React.js.

Browserul

Acesta este browser-ul așa cum a imaginat el însuși inventatorul World Wide Web, Tim Berners-Lee. E o browser simplu pentru a face HTML și nu afișează o bara de adrese ca un browser modern, dar puteți vizualiza navigând la Document> Deschideți din referința completă a documentului și lipiți într-o adresă URL și dați clic pe Deschis. Și acolo veți vedea cum va afișa site-ul cu browserul original.

Raster

Raster este un cadru de rețea modern care este construit cu specificații HTML și CSS moderne, cum ar fi CSS Grid, CSS Custom Property (Variable) și element personalizat. Un cadru perfect pentru cei cărora le place să trăiască pe margini.

Dogar

O componentă Vue.js pentru a adăuga un carusel sau un cursor. Este accesibil și ușor de utilizat prin atingere, tastatură, roată de mouse și alte navigații asistive, suportă RTL și direcția verticală, extensibilă și desigur răspuns.