Oxygen Builder pentru echipe și agenții: cum colaborăm

Oxygen Builder este un instrument incredibil de puternic, dar când vine vorba de colaborarea în echipă în ceea ce privește crearea site-ului web, lucrurile pot deveni puțin dificile. Oficial, echipa din spatele generatorului de pagini recomandă insistent ca un singur utilizator să editeze o dată. Din păcate, pentru agențiile cu proiecte majore, acest lucru este imposibil și îi poate speria pe unii să folosească acest instrument.

În opinia noastră, avantajele depășesc cu mult aceste dezavantaje și am găsit mai multe modalități de a rezolva aceste limitări. În acest articol, vom discuta despre modul în care echipa noastră colaborează atunci când creează site-uri web cu Oxygen Builder. În ultimul an, am făcut tranziția spre crearea a 100% din toate site-urile și proiectele agențiilor noastre în Oxygen, obținând o înțelegere destul de decentă a modului de a face cel mai bine.

Actualizare aprilie 2022: acum folosim Plugin-ul de colaborare de la DPlugins, care rezolvă problema editării utilizatorilor muli pe Oxygen Builder. Citiți recenzia noastră aici.

În primul rând, înțelegeți limitele constructorului

Înainte de a începe chiar să luați în considerare colaborarea folosind Oxygen Builder, este important să înțelegeți limitările și de ce exact este dificil pentru mai mulți utilizatori să creeze eficient un site web cu Oxygen.

În primul rând, ar trebui să citiți acest articol publicat de echipa Oxygen, care precizează exact de ce există Edit Locking (mecanismul care face ca un singur utilizator să poată edita o dată). Iată lucrurile importante:

„Din cauza modului în care Oxygen salvează stiluri, clase și setări globale, editarea cu mai mulți utilizatori sau cu mai multe file cu Oxygen este foarte descurajată.

Vă recomandăm să folosiți o singură filă atunci când lucrați cu Oxygen pentru a evita problemele în care o filă salvează date mai vechi decât alta, ceea ce duce la suprascrierea noilor modificări. Același scenariu poate apărea atunci când doi sau mai mulți utilizatori lucrează în Oxygen în același timp.”

În esență, totul este depozitat într-un loc central. Filele nu vorbesc între ele, așa că dacă un dezvoltator adaugă o clasă personalizată sau un CSS personalizat în foaia de stil globală, iar un alt dezvoltator nu, chiar dacă primul salvează, dacă al doilea dev salvează după, clasele și stilurile va fi suprascris și pierdut. Nu este bun pentru colaborare.

Dacă trebuie să lucrați în echipă, este important să înțelegeți de ce funcționează acest lucru, astfel încât să puteți ocoli cel mai bine această problemă. Din nou, cele două lucruri care vor fi suprascrise: 1) Clasele personalizate adăugate și 2) CSS adăugat la foaia de stil globală.

Atâta timp cât este un singur utilizator pe o pagină/șablon care se salvează, structura va fi salvată, precum și orice stiluri setate pentru ID-ul individual al elementului vor fi bine. Dar dacă adăugați cursuri (important, deoarece acest lucru economisește foarte mult timp), acestea pot fi suprascrise.

Dacă nu trebuie să editați toate odată, nu. Dar dacă acest lucru este esențial pentru compania sau proiectul dvs., încercați unele dintre tehnicile discutate mai jos.

Editați oricum (sau dezactivați acest lucru)

Primul lucru de reținut este că, din punct de vedere tehnic, puteți suprascrie Blocarea Editării, ceea ce facem noi. Nu există setări de activat, pur și simplu faceți clic pe linkul Editați oricum. Aceasta înseamnă că întreaga noastră echipă poate inițializa din punct de vedere tehnic constructorul dintr-o dată, dar aș lua în considerare cu tărie să citesc mai multe despre cum o facem. Încă trebuie să luăm în considerare problemele de suprascriere aici.

Un lucru interesant de remarcat este că, cu Hydrogen Pack (unul dintre suplimentele noastre de top pentru Oxygen, îl folosim în fiecare zi), puteți dezactiva funcția „Edit Locking”, ascunzând „Edit Anyway” împreună. Acest lucru este doar plăcut din punct de vedere estetic, dar nu afectează cu adevărat fluxul de lucru.

Utilizați un cadru

Cadrul este o mentalitate, care trebuie luată în considerare pe parcursul întregului proces de proiectare și construire a unui site web în Oxygen. Un cadru este o colecție de clase CSS care lucrează împreună pentru a vă ajuta să vă structurați site-ul într-o manieră consecventă. Framework-urile sunt foarte răspândite în industria de web design. De exemplu, există Bootstrap, Tailwind și multe altele.

Cu o actualizare recentă Swiss Knife, puteți încărca în bloc clase în builder, puteți apela foaia de stil cadru și puteți utiliza practic orice pentru care aveți lista de clase.

Pentru noi, folosim un cadru specific Oxygen numit Core CSS. Acesta este inclus în OxyNinja Core, care este unul dintre pluginurile noastre preferate datorită acestui cadru. Iată propunerea de vânzare, de pe site:

„A face un site perfect coerent nu a fost niciodată atât de ușor în combinație dintre clasele de utilitate de bază și Oxygen Builder. Coloanele de grilă CSS, cardurile, tipografia, dimensiunea și spațierea, culorile și multe altele sunt deja setate!”

Cu cadrul, putem aplica cu ușurință Dimensiuni de font, umplutură și multe altele, fără a fi nevoie să adăugăm noi clase CSS și să păstrăm consecvența fără a avea nevoie măcar de un ghid central de stil digital. Deoarece clasele sunt instalate pe site de la începutul dezvoltării, nu este nevoie să fie adăugate clase noi, ceea ce înseamnă că nimic nu este suprascris.

Scrieți CSS în afara constructorului

Ca agenție, ne place să folosim CSS pentru a crea interacțiuni unice și efecte de hover. Prin urmare, avem de obicei o mulțime de CSS personalizate pe care fiecare dintre dezvoltatorii noștri le scrie singur. Ar fi bine de adăugat la foaia de stil globală dacă ar fi un singur utilizator pe site-ul web odată, dar de obicei lucrează mai mulți dezvoltatori, așa că avem nevoie de o modalitate de a ocoli problema de suprascriere.

Pentru a face acest lucru, pur și simplu scriem CSS într-un plugin terță parte numit Advanced Scripts. Acesta este creat de același dezvoltator din spatele pachetului de hidrogen și este unul dintre pluginurile noastre preferate. Fiecare dezvoltator are propria sa foaie de stil pe care își scrie CSS. La salvare, stilurile sunt aplicate global pe site. La sfârșitul proiectului, toate stilurile sunt combinate într-o singură foaie de stil principală.

Comunică în mod constant

Există multe cazuri în care trebuie să adăugăm clase CSS specifice elementelor individuale din clădire. Când lucrați în echipă, acest lucru este riscant din cauza problemelor în care lucrurile sunt suprascrise. Pentru a face bine și pentru a nu pierde nicio muncă, colaborăm cu toții folosind slack dacă aveți un singur dezvoltator la toate stilurile necesare la un moment dat al zilei. Aceasta este poate cea mai mare supărare cu acest constructor, dar dacă sunt gestionate corect toate datele vor fi salvate.

Deoarece toate CSS-urile asociate cu clasele sunt în foi de stil, tot ce trebuie să facem este să adăugăm clasele, iar stilurile vor fi aplicate în consecință.

Experimentăm și mai multe concepte. De exemplu, putem crea un depozit Github care conține o foaie de stil CSS centrală și putem folosi caracteristica Live Share pe VS Code pentru a putea scrie stiluri împreună. Apoi putem folosi Scripturi avansate și static pentru a livra stilurile pe site-ul nostru. De asemenea, am adoptat recent și încărcarea în bloc a clasei care vine cu Swiss Knife.

Faceți lucruri diferit care au ca rezultat un flux de lucru colaborativ și mai bun pe Oxygen? Spune-ne aici în comentarii!