Kincsesbánya webfejlesztőknek – a Component Gallery

2021. augusztus 08. Blog, Segédlet

A fejlesztés lényegében nem más, mint problémamegoldás – a probléma persze jobb helyzetben nem abban merül ki, hogy “most meg miért nem működik a kódom…!?”. Az, hogy a magunk vagy egy másik designer által megtervezett layoutban a különböző elemek így vagy úgy viselkednek – megmozdulnak, kinyílnak, összecsukódnak, beúsznak, vagy csak rendben a fenekükön maradnak, de pont abban a pozícióban és nem 50 pixellel elcsúszva… ez mind-mind egy megoldandó probléma a fejlesztő számára. 

Minél nagyobb a rutinunk, annál több ilyen kérdésre tudunk többé-kevésbé kész válaszokat adni. Van, amit az ember már álmából felébresztve is tud, mint a rendhagyó múlt idejű igéket, és van, amit tudja, hogy honnan keressen elő, ugyanis egy ilyen problémát már korábban legyőzött, még, ha nem is emlékszik rá abszolút pontosan, hogyan sikerült. 

Ilyenkor elővesszük a korábbi, szépen dokumentált és archivált kódunkat, és kikeressük belőle ezt a nagyjából egy az egyben használható komponenst, és beépítjük az új kódba, pikk-pakk, mindenki örül.

Milyen szép lenne, ha az ilyen, jól megoldott komponenseket be lehetne adni egy közös gyűjteménybe, ahonnan aztán mindenki más – persze mi magunkat is beleértve – boldogan csemegézhetne, ha problémába ütközik kódolás közben!

Pont erre a megállapításra jutott Iain Bean angol frontend fejlesztő is, majd viszont rögtön kapta is magát, és elindította a Component Gallery nevű oldalt, ahol éppen ezt a gyűjteményt hozta létre.    

A Component Galleryt böngészve hamar átláthatjuk, hogyan működik a honlap: a nyitólapon kiemelten a legutóbb frissített komponenseket láthatjuk, a második szekcióban pedig a design rendszerekből jelennek meg ugyanígy a legutóbb frissültek, ugyanis a különböző komponensek a különböző ismert és kevésbé elterjedt design rendszerek (mint a Bootstrap, a Bulma, a Carbon, a Stacks, stb.) elemeiből lettek összeválogatva, és eszerint is vannak kategorizálva.

A teljes könyvtár jelenleg 75 design rendszert tart számon, és összesen 50 komponens között böngészhetünk, közöttük olyanokkal, mint Gomb, Harmonika-menü, Lábléc, File feltöltés, Keresés bevitele, stb… Egy-egy komponens alatt a példák száma 2-3-tól akár 70-80-ig is terjedhet, szóval van miben elmélyedni. Az egyes komponensek végső linkjei általában elvisznek a Component Gallery oldaláról, és az egyes design rendszerek témába vágó aloldalaira vezetnek. Bármilyen rendszerben is írod a kódodat, itt biztos találsz néhány remek megoldást!

^{Címkép: Pexels}