Watengenezaji wana tabia mbaya ya kujenga vifaa vingi vya aina mbalimbali (Swiss Army knives) wakati wanachohitaji ni kipande kikali cha kisu. Tunatafuta fremu kazi (frameworks) nzito za frontend kabla hata mstari wa kwanza wa HTML haujaandikwa. Tunaunganisha maktaba za michoro (animation libraries), zana za usimamizi wa hali (state management tools), na mifumo ya ujenzi (build pipelines) yenye nguvu inayoweza kuendesha kampuni ndogo. Kisha tunashangaa kwa nini tovuti zetu za kielelezo (portfolio) zinachukua sekunde tatu kuchora, kwa nini urambazaji (navigation) unaharibika kwenye simu, na kwa nini meneja wa ajira huondoka kabla hata hawajaona miradi tuliyotumia miezi kadhaa kuijenga.
Nilichukua njia tofauti kwenye kielelezo changu cha hivi karibuni. Niliacha mfumo wa utegemezi usio na mwisho na kujenga tovuti nzima kwa kutumia HTML ya kimaana (semantic HTML) na CSS safi. Hakuna fremu kazi za JavaScript. Hakuna hatua za ujenzi (build steps). Hakuna injini za michoro za upande wa tatu. Ni jukwaa lenyewe tu, mpangilio ulioshughulikiwa na CSS Grid na Flexbox, na falsafa ya usanifu inayochukulia kasi na uwazi kama vipengele muhimu badala ya mambo ya ziada.
Matokeo yake ni mepesi, ya haraka, na ya kitaalamu. Hivi ndivyo nilivyofanya.
Anza na Msingi
Ujenzi mwingi uliopitiliza huanzia kwenye msingi. Tovuti ya kielelezo haihitaji kuwa programu ya ukurasa mmoja (single-page application). Inahitaji kuonyesha kazi yako, kuwaambia watu jinsi ya kuwasiliana nawe, na kuacha nafasi kwa mtumiaji. Nilitumia HTML ya kimaana kwa sababu kivinjari tayari kinajua jinsi ya kuchora nav, article, na footer. Unapotumia kipengele sahihi kwa kazi sahihi, unapata ufikiaji (accessibility), uonekanaji kwenye injini za utafutaji, na tabia inayoweza kubadilika (responsive behavior) bila malipo. Pia unaandika kodi kidogo. div yenye sifa tano za ARIA ni tu uigaji wa maneno mengi wa button. Nilikiepuka hilo kabisa.
Kwa ajili ya mpangilio, CSS Grid na Flexbox zinatosha kabisa. Grid inashughulikia muundo mkuu: sehemu za ukurasa kwa ujumla, maktaba ya miradi, na upatanishi wa vizuizi vikubwa. Flexbox inasimamia mwingiliano mdogo: viungo vya urambazaji ndani ya kapsuli hiyo, kuweka maandishi katikati ya kadi, na kusukuma footer hadi chini ya dirisha la kivinjari (viewport). Kwa pamoja, zinachukua nafasi ya kila sababu ambayo ungekuwa nayo ya kuingiza fremu kazi ya gridi ya nguzo kumi na mbili mwaka 2018. Kodi inabaki rahisi kusoma. Faili ya CSS inabaki ndogo.
Rangi, Aina ya Maandishi, na Kiasi
Nilitaka kielelezo hicho kihisi utulivu mara tu kinapopakia. Mandhari ya nyuma yanatumia msingi mweupe wenye gradient za mionzi (radial gradients) hafifu. Hakuna kitu cha kushambulia macho. Gradient hiyo ina uwazi mdogo (low opacity), ikitengeneza kina laini kinachozuia ukurasa usionekane bapa bila kuhitaji usikivu mkubwa. Inapakia papo hapo kwa sababu ni CSS tupu. Hakuna picha za hero za kubana, hakuna WebP fallbacks za kusimamia, hakuna maktaba za JavaScript za kuchelewesha upakiaji (lazy-loading) za kusanidi.
Aina ya maandishi (typography) inabeba haiba. Niliunganisha Outfit na Ovo. Outfit, ambayo ni geometric sans-serif, inashughulikia maandishi yote ya UI: lebo za urambazaji, maandishi ya vitufe, maelezo ya mwili, na maelezo ya ziada. Ni wazi kwenye skrini na inasomeka vizuri hata katika saizi ndogo. Ovo, ambayo ni serif yenye mabadiliko ya wastani ya unene, inatumika kwa vichwa vya habari na vichwa vikuu. Muunganisho huo unaupa ukurasa hisia ya kihariri tulivu. Unaonekana kama umesanifiwa, si kama umetumia mandhari (theme) tu. Muhimu zaidi, fonti zote mbili zinapakia kutoka kwa mwito mmoja kwenye huduma ya fonti au faili zinazohifadhiwa yenyewe. Hakuna mabadiliko ya mpangilio (layout shift), hakuna mabadiliko ya maandishi yasiyosanifiwa, hakuna mabadiliko ya uzito wa fonti baada ya uwasilishaji wa awali.
Menyu ya Kapsuli Inayoelea
Urambazaji ndipo tovuti za kielelezo mara nyingi hukwama chini ya uzito wao wenyewe. Menyu zinazofunika ukurasa mzima, skripti za michoro za mfululizo, na aikoni za hamburger zinazohitaji mistari arobaini ya JavaScript ili kubadilisha daraja (class). Sikutaka hata moja ya hayo.
Nilijenga menyu ya kapsuli ya glassmorphic inayoelea. Ni chombo kimoja cha mlalo, chenye ncha zilizopinda, kilichowekwa mahali maalum karibu na juu ya dirisha la kivinjari. Glassmorphism inatokana na rangi ya nyuma ya nusu-wazi na sifa ya backdrop-filter: blur(). Inaelea juu ya maudhui bila kuyaficha, inatoa ufikiaji wa haraka kwa kila sehemu, na inajikunja vizuri kwenye vioo vidogo bila kuhitaji usanifu mpya kabisa. Athari hiyo inaonekana ya kisasa kwa sababu kivinjari ndicho kinachoshughulikia muunganisho (compositing), si maktaba ya canvas.