ഡെവലപ്പർമാർക്ക് ഒരു മോശം ശീലമുണ്ട്; വെറുമൊരു മൂർച്ചയുള്ള ബ്ലേഡ് മാത്രം ആവശ്യമുള്ളപ്പോൾ അവർ ഒരു സ്വിസ് ആർമി നൈഫ് നിർമ്മിക്കാൻ ശ്രമിക്കുന്നു. ആദ്യത്തെ HTML വരി പോലും എഴുതുന്നതിന് മുമ്പ് തന്നെ നമ്മൾ ഭാരമേറിയ ഫ്രണ്ട്എൻഡ് ഫ്രെയിംവർക്കുകൾ ഉപയോഗിക്കാൻ തുടങ്ങുന്നു. ആനിമേഷൻ ലൈബ്രറികളും, സ്റ്റേറ്റ് മാനേജ്മെന്റ് ടൂളുകളും, ഒരു ചെറിയ കമ്പനിയെപ്പോലും നിയന്ത്രിക്കാൻ ശേഷിയുള്ള ബിൽഡ് പൈപ്പ്ലൈനുകളും നമ്മൾ ഇതിനോടൊപ്പം കൂട്ടിച്ചേർക്കുന്നു. എന്നിട്ട് നമ്മുടെ പോർട്ട്ഫോളിയോ സൈറ്റുകൾ ലോഡ് ആകാൻ മൂന്ന് സെക്കൻഡ് എടുക്കുന്നത് എന്തുകൊണ്ട് എന്നും, മൊബൈലിൽ നാവിഗേഷൻ തകരാറിലാകുന്നത് എന്തുകൊണ്ട് എന്നും, മാസങ്ങളോളം അധ്വാനിച്ചുണ്ടാക്കിയ പ്രോജക്റ്റുകൾ കാണുന്നതിന് മുമ്പ് തന്നെ ഹയറിംഗ് മാനേജർമാർ സൈറ്റ് വിട്ടുപോകുന്നത് എന്തുകൊണ്ട് എന്നും നമ്മൾ അത്ഭുതപ്പെടുന്നു.
എന്റെ ഏറ്റവും പുതിയ പോർട്ട്ഫോളിയോയിൽ ഞാൻ വ്യത്യസ്തമായ ഒരു വഴി തിരഞ്ഞെടുത്തു. അവസാനിക്കാത്ത ഡിപെൻഡൻസികളുടെ ലോകത്തുനിന്ന് മാറിനിന്ന്, സെമാന്റിക് HTML-ഉം ക്ലീൻ CSS-ഉം ഉപയോഗിച്ച് ഞാൻ ഈ സൈറ്റ് പൂർണ്ണമായും നിർമ്മിച്ചു. ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകൾ ഇല്ല. ബിൽഡ് സ്റ്റെപ്പുകൾ ഇല്ല. തേർഡ് പാർട്ടി ആനിമേഷൻ എഞ്ചിനുകൾ ഇല്ല. വെറും പ്ലാറ്റ്ഫോം മാത്രം; ലേഔട്ട് കൈകാര്യം ചെയ്യാൻ CSS Grid-ഉം Flexbox-ഉം ഉപയോഗിച്ചു. വേഗതയെയും വ്യക്തതയെയും വെറുമൊരു അനുബന്ധമായി കാണാതെ പ്രധാന ഫീച്ചറുകളായി പരിഗണിക്കുന്ന ഒരു ഡിസൈൻ ഫിലോസഫിയാണ് ഞാൻ പിന്തുടർന്നത്.
ഇതിന്റെ ഫലം ലഘുവായതും, വേഗതയേറിയതും, പ്രൊഫഷണലുമാണ്. ഞാൻ ഇത് എങ്ങനെയാണ് സമീപിച്ചതെന്ന് താഴെ വിവരിക്കുന്നു.
അടിസ്ഥാനത്തിൽ നിന്ന് തുടങ്ങുക
മിക്ക ഓവർ-എഞ്ചിനീയറിംഗുകളും തുടങ്ങുന്നത് അടിസ്ഥാനത്തിൽ നിന്നാണ്. ഒരു പോർട്ട്ഫോളിയോ ഒരു സിംഗിൾ പേജ് ആപ്ലിക്കേഷൻ (SPA) ആകണമെന്നില്ല. നിങ്ങളുടെ വർക്കുകൾ പ്രദർശിപ്പിക്കുക, ആളുകൾക്ക് നിങ്ങളെ എങ്ങനെ ബന്ധപ്പെടാം എന്ന് അറിയിക്കുക, അതിനുശേഷം വഴിമാറിക്കൊടുക്കുക എന്നതാണ് അതിന്റെ ലക്ഷ്യം. ഞാൻ സെമാന്റിക് HTML ഉപയോഗിച്ചു, കാരണം ഒരു nav, ഒരു article, ഒരു footer എന്നിവ എങ്ങനെ റെൻഡർ ചെയ്യണമെന്ന് ബ്രൗസറിന് നേരത്തെ തന്നെ അറിയാം. ശരിയായ ജോലിക്കായി ശരിയായ എലമെന്റ് ഉപയോഗിക്കുമ്പോൾ, ആക്സസിബിലിറ്റി, സെർച്ച് എഞ്ചിൻ വിസിബിലിറ്റി, റെസ്പോൺസീവ് ബിഹേവിയർ എന്നിവ നിങ്ങൾക്ക് സൗജന്യമായി ലഭിക്കുന്നു. കൂടാതെ നിങ്ങൾ കുറഞ്ഞ കോഡ് മാത്രമേ എഴുതുന്നുള്ളൂ. അഞ്ച് ARIA അറ്റ്രിബ്യൂട്ടുകളുള്ള ഒരു div, ഒരു button-ന്റെ വെറുമൊരു ആവർത്തനമാണ്. ഞാൻ അത് പൂർണ്ണമായും ഒഴിവാക്കി.
ലേഔട്ടിനായി CSS Grid-ഉം Flexbox-ഉം ധാരാളമാണ്. Grid മാക്രോ സ്ട്രക്ചർ കൈകാര്യം ചെയ്യുന്നു: പേജിന്റെ മൊത്തത്തിലുള്ള സെക്ഷനുകൾ, പ്രോജക്റ്റ് ഗാലറി, പ്രധാന ബ്ലോക്കുകളുടെ അലൈൻമെന്റ് എന്നിവ ഇതിൽ വരുന്നു. Flexbox മൈക്രോ ഇന്ററാക്ഷനുകൾ നിയന്ത്രിക്കുന്നു: നാവിഗേഷൻ ലിങ്കുകൾ, കാർഡുകൾക്കുള്ളിലെ ടെക്സ്റ്റ് സെന്ററിംഗ്, ഫൂട്ടർ വ്യൂപോർട്ടിന്റെ താഴെ എത്തിക്കുക എന്നിവ ഇതിലൂടെ സാധ്യമാകും. 2018-ൽ നിങ്ങൾ ഒരു പന്ത്രണ്ട് കോളൻ ഗ്രിഡ് ഫ്രെയിംവർക്ക് ഇംപോർട്ട് ചെയ്യാൻ കാരണമായ എല്ലാ കാര്യങ്ങളെയും ഇവ ഒരുമിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു. കോഡ് വായിക്കാൻ എളുപ്പമായിരിക്കും, CSS ഫയലിന്റെ വലിപ്പം കുറവായിരിക്കും.
നിറം, ടൈപ്പോഗ്രാഫി, മിതത്വം
പോർട്ട്ഫോളിയോ ലോഡ് ചെയ്യുമ്പോൾ തന്നെ ഒരു ശാന്തത അനുഭവപ്പെടണമെന്ന് ഞാൻ ആഗ്രഹിച്ചു. ബാക്ക്ഗ്രൗണ്ടിനായി നേരിയ റേഡിയൽ ഗ്രേഡിയന്റുകളോട് കൂടിയ ഒരു ലൈറ്റ് ബേസ് ആണ് ഉപയോഗിച്ചിരിക്കുന്നത്. അമിതമായ ഒന്നുമില്ല. ഗ്രേഡിയന്റ് വളരെ കുറഞ്ഞ ഓപാസിറ്റിയിൽ ആയതുകൊണ്ട്, പേജ് ഫ്ലാറ്റ് ആയി തോന്നാതെ തന്നെ ഒരു മൃദുവായ ആഴം (depth) നൽകുന്നു. ഇത് ശുദ്ധമായ CSS ആയതുകൊണ്ട് തന്നെ ഉടനടി ലോഡ് ആകുന്നു. കംപ്രസ്സ് ചെയ്യാൻ ഹീറോ ഇമേജുകളോ, WebP ഫാള்பാക്കുകളോ, കോൺഫിഗർ ചെയ്യാൻ ജാവാസ്ക്രിപ്റ്റ് ലേസി-ലോഡിംഗ് ലൈബ്രറികളോ ഇതിലില്ല.
ടൈപ്പോഗ്രാഫിയാണ് വ്യക്തിത്വം നൽകുന്നത്. ഞാൻ Outfit-ഉം Ovo-യും ജോഡിപ്പിച്ചു. ഒരു ജിയോമെട്രിക് സാൻസ്-സെറിഫ് ആയ Outfit, എല്ലാ UI ടെക്സ്റ്റുകളും കൈകാര്യം ചെയ്യുന്നു: നാവിഗേഷൻ ലേബലുകൾ, ബട്ടൺ ടെക്സ്റ്റ്, ബോഡി കോപ്പി, മെറ്റാ ഡീറ്റെയിൽസ് എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു. ഇത് സ്ക്രീനുകളിൽ വളരെ വ്യക്തമാണ്, ചെറിയ വലിപ്പത്തിലും വായിക്കാൻ എളുപ്പമാണ്. മീഡിയം-കോൺട്രാസ്റ്റ് സെറിഫ് ആയ Ovo, ഹെഡറുകൾക്കും പ്രധാന തലക്കെട്ടുകൾക്കുമായി ഉപയോഗിക്കുന്നു. ഈ ജോഡി പേജിന് ഒരു എഡിറ്റോറിയൽ ഫീൽ നൽകുന്നു. ഇത് വെറുമൊരു തീം ഉപയോഗിച്ചതുപോലെയല്ല, മറിച്ച് ഡിസൈൻ ചെയ്തതുപോലെ തോന്നും. ഏറ്റവും പ്രധാനമായി, രണ്ട് ഫോണ്ടുകളും ഒരു ഫോണ്ട് സർവീസിൽ നിന്നോ സെൽഫ്-ഹോസ്റ്റഡ് ഫയലുകളിൽ നിന്നോ ആണ് ലോഡ് ചെയ്യുന്നത്. അതിനാൽ ലേഔട്ട് ഷിഫ്റ്റോ, അൺസ്റ്റൈൽഡ് ടെക്സ്റ്റ് മിന്നലോ, സ്ക്രിപ്റ്റ് ഉപയോഗിച്ചുള്ള ഫോണ്ട് മാറ്റങ്ങളോ ഉണ്ടാകില്ല.
ഫ്ലോട്ടിംഗ് ക്യാപ്സ്യൂൾ മെനു
നാവിഗേഷൻ ആണ് പലപ്പോഴും പോർട്ട്ഫോളിയോകൾ തകരാറിലാകുന്നത്. ഫുൾ സ്ക്രീൻ ഓവർലേ മെനുകൾ, സങ്കീർണ്ണമായ ആനിമേഷൻ സ്ക്രിപ്റ്റുകൾ, ഒരു ക്ലാസ് ടോഗിൾ ചെയ്യാൻ നാൽപ്പത് വരി ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമുള്ള ഹാംബർഗർ ഐക്കണുകൾ എന്നിവ എനിക്ക് വേണ്ടായിരുന്നു.
ഞാൻ ഒരു ഫ്ലോട്ടിംഗ് ഗ്ലാസ്മോർഫിക് ക്യാപ്സ്യൂൾ മെനു നിർമ്മിച്ചു. ഇത് വശങ്ങൾ ഉരുണ്ടതും, വ്യൂപോർട്ടിന്റെ മുകൾ ഭാഗത്തായി ഫിക്സ് ചെയ്തതുമായ ഒരു സിംഗിൾ ഹൊറിസോണ്ടൽ കണ്ടെയ്നറാണ്. ഗ്ലാസ്മോർഫിസം എന്നത് ഒരു സെമി-ട്രാൻസ്പരന്റ് ബാക്ക്ഗ്രൗണ്ട് കളറും backdrop-filter: blur() പ്രോപ്പർട്ടിയും ഉപയോഗിച്ചാണ് നൽകിയിരിക്കുന്നത്. ഇത് കണ്ടന്റിനെ മറയ്ക്കാതെ തന്നെ അതിനു മുകളിൽ ഒഴുകി നടക്കുന്നു, എല്ലാ സെക്ഷനുകളിലേക്കും പെട്ടെന്ന് പ്രവേശനം നൽകുന്നു, കൂടാതെ ചെറിയ സ്ക്രീനുകളിൽ ഡിസൈൻ മാറ്റാതെ തന്നെ ലളിതമായി ചുരുങ്ങുകയും ചെയ്യുന്നു. ബ്രൗസർ തന്നെ കോമ്പോസിറ്റിംഗ് കൈകാര്യം ചെയ്യുന്നതുകൊണ്ട് ഈ ഇഫക്റ്റ് വളരെ മോഡേൺ ആയി തോന്നും.