தேவைக்கு அதிகமான சிக்கலான கருவிகளை உருவாக்குவது டெவலப்பர்களிடம் உள்ள ஒரு கெட்ட பழக்கம். ஒரு கூர்மையான கத்தி மட்டும் போதுமானிருக்கும் போது, அவர்கள் ஒரு சுவிஸ் ஆர்மி கத்தியையே (Swiss Army knife) உருவாக்க முயல்கிறார்கள். முதல் வரியாக HTML எழுதத் தொடங்கும் முன்பே, கனமான frontend frameworks-களை நாம் பயன்படுத்தத் தொடங்கிவிடுகிறோம். அனிமேஷன் லைப்ரரிகள் (animation libraries), state management கருவிகள் மற்றும் ஒரு சிறிய நிறுவனத்தையே இயக்கக்கூடிய அளவுக்கு வலிமையான build pipelines ஆகியவற்றை நாம் இணைக்கிறோம். அதன் பிறகு, ஏன் நமது போர்ட்ஃபோலியோ தளங்கள் திரையில் தோன்றுவதற்கு மூன்று வினாடிகள் எடுத்துக்கொள்கின்றன, ஏன் மொபைலில் நேவிகேஷன் (navigation) வேலை செய்யவில்லை, மற்றும் நாம் பல மாதங்கள் செலவழித்து உருவாக்கிய திட்டங்களைப் பார்ப்பதற்கு முன்பே ஏன் வேலைக்கு எடுப்பவர்கள் (hiring managers) தளத்தை விட்டு வெளியேறுகிறார்கள் என்று நாம் வியக்கிறோம்.
எனது சமீபத்திய போர்ட்ஃபோலியோவில் நான் ஒரு வித்தியாசமான பாதையைத் தேர்ந்தெடுத்தேன். முடிவில்லாத சார்புத் தேவைகளின் (dependencies) சூழலில் இருந்து விலகி, முழுத் தளத்தையும் semantic HTML மற்றும் சுத்தமான CSS கொண்டு உருவாக்கினேன். எந்த JavaScript frameworks இல்லை. எந்த build steps இல்லை. எந்த மூன்றாம் தரப்பு அனிமேஷன் என்ஜின்களும் இல்லை. வெறும் பிளாட்ஃபார்ம் மட்டுமே, CSS Grid மற்றும் Flexbox மூலம் கையாளப்பட்ட லேஅவுட் (layout), மற்றும் வேகத்தையும் தெளிவையும் ஒரு கூடுதல் அம்சமாகப் பார்க்காமல், அடிப்படைத் தேவையாகக் கருதும் ஒரு வடிவமைப்புத் தத்துவம் மட்டுமே.
இதன் முடிவு லேசானது, வேகமானது மற்றும் தொழில்முறைத் தரமானது. நான் இதை எவ்வாறு அணுகினேன் என்பதை இங்கே விரிவாகக் காணலாம்.
அடித்தளத்திலிருந்து தொடங்குங்கள்
அதிகப்படியான இன்ஜினியரிங் (over-engineering) பெரும்பாலும் அடித்தளத்திலிருந்தே தொடங்குகிறது. ஒரு போர்ட்ஃபோலியோ ஒரு single-page application ஆக இருக்க வேண்டிய அவசியமில்லை. அது உங்கள் வேலையைக் காட்ட வேண்டும், உங்களைத் தொடர்பு கொள்ளும் முறையைச் சொல்ல வேண்டும், மற்றும் பயனருக்குத் இடையூறு இல்லாமல் இருக்க வேண்டும். நான் semantic HTML-ஐப் பயன்படுத்தினேன், ஏனெனில் ஒரு nav, ஒரு article, மற்றும் ஒரு footer-ஐ எவ்வாறு காண்பிக்க வேண்டும் என்பது உலாவிகளுக்கு (browser) ஏற்கனவே தெரியும். சரியான வேலைக்கு சரியான எலிமெண்ட்டைப் பயன்படுத்தும்போது, அணுகல்தன்மை (accessibility), தேடுபொறித் தெரிவுத்திறன் (search engine visibility) மற்றும் responsive செயல்பாடு ஆகியவற்றை நீங்கள் கிட்டத்தட்ட இலவசமாகப் பெறுகிறீர்கள். மேலும் நீங்கள் குறைவான குறியீடுகளையே (code) எழுதுவீர்கள். ஐந்து ARIA பண்புகளைக் கொண்ட ஒரு div, ஒரு button-ன் வெறும் நீளமான நகலாகும். நான் அதை முற்றிலும் தவிர்த்தேன்.
லேஅவுட்டிற்கு (layout), CSS Grid மற்றும் Flexbox போதுமானவை. Grid பெரிய கட்டமைப்பைக் கையாள்கிறது: ஒட்டுமொத்த பக்கப் பிரிவுகள், புராஜெக்ட் கேலரி, முக்கிய பிளாக்குகளின் சீரமைப்பு. Flexbox சிறிய மாற்றங்களை நிர்வகிக்கிறது: அந்த கேப்சூலுக்குள் இருக்கும் நேவிகேஷன் லிங்குகள், கார்டுகளுக்குள் உரையை மையப்படுத்துதல், வியூபோர்ட்டின் (viewport) கீழே ஒரு фуட்டர்-ஐத் தள்ளுதல். இவை இரண்டும் சேர்ந்து, 2018-ல் நீங்கள் ஒரு பன்னிரண்டு-நெடுவரிசை (twelve-column) கிரிட் பிரேம்வொர்க்கை இறக்குமதி செய்ய வேண்டிய அனைத்து காரணங்களையும் நீக்குகின்றன. குறியீடு வாசிக்க எளிதாக இருக்கும். CSS கோப்பு சிறியதாக இருக்கும்.
வண்ணம், எழுத்துரு மற்றும் கட்டுப்பாடு
எனது போர்ட்ஃபோலியோ லோட் ஆகும் தருணமே ஒரு அமைதியான உணவைத் தர வேண்டும் என்று நான் விரும்பினேன். பின்னணி ஒரு லேசான அடிப்படையையும், நுணுக்கமான radial gradients-களையும் பயன்படுத்துகிறது. எதுவுமே ஆக்ரோஷமாக இல்லை. அந்த gradient குறைந்த ஒளிபுகழ்தன்மையுடன் (low opacity) இருப்பதால், பக்கம் தட்டையாகத் தெரியாமல் ஒரு மென்மையான ஆழத்தைத் தருகிறது, ஆனால் கவனத்தை ஈர்க்கப் போராடவும் இல்லை. இது தூய CSS என்பதால் உடனடியாக லோட் ஆகிறது. சுருக்க வேண்டிய hero images இல்லை, நிர்வகிக்க வேண்டிய WebP fallbacks இல்லை, அல்லது கட்டமைக்க வேண்டிய JavaScript lazy-loading லைப்ரரிகள் இல்லை.
எழுத்துருக்களே (Typography) தனித்துவத்தைக் கொண்டுவருகின்றன. நான் Outfit மற்றும் Ovo ஆகியவற்றை இணைத்தேன். Outfit என்ற geometric sans-serif, அனைத்து UI உரைகளையும் கையாள்கிறது: நேவிகேஷன் லேபிள்கள், பட்டன் உரை, உடல் உரை (body copy), மெட்டா விவரங்கள். இது திரைகளில் தெளிவாகத் தெரியும் மற்றும் சிறிய அளவுகளிலும் வாசிக்க எளிதாக இருக்கும். Ovo என்ற medium-contrast serif, தலைப்புகள் மற்றும் முக்கிய தலைவிற்காகப் பயன்படுகிறது. இந்த இணைப்பானது பக்கத்திற்கு ஒரு அமைதியான எடிட்டோரியல் உணவைத் தருகிறது. இது ஒரு தீம் (theme) போலத் தெரியாமல், வடிவமைக்கப்பட்டது போலத் தெரியும். மிக முக்கியமாக, இரண்டு எழுத்துருக்களும் ஒரு ஒற்றை எழுத்துரு சேவை அழைப்பு அல்லது self-hosted கோப்புகளிலிருந்து லோட் ஆகின்றன. இதனால் layout shift அல்லது ஆரம்ப ரெண்டரிங்கிற்குப் பிறகு எழுத்துருக்கள் மாறுவது போன்ற சிக்கல்கள் இல்லை.
மிதக்கும் கேப்சூல் மெனு
நேவிகேஷன் என்பது போர்ட்ஃபோலியோக்கள் பெரும்பாலும் தங்களின் சொந்தச் சுமையால் முடங்கும் இடமாகும். முழுத் திரை overlay மெனுக்கள், சிக்கலான அனிமேஷன் ஸ்கிரிப்ட்கள் மற்றும் ஒரு கிளாஸை (class) மாற்ற 40 வரிகள் JavaScript தேவைப்படும் ஹம்பர்கர் ஐகான்கள் (hamburger icons). இவை எதுவுமே எனக்குத் தேவையில்லை.
நான் ஒரு மிதக்கும் glassmorphic capsule மெனுவை உருவாக்கினேன். இது ஒரு கிடைமட்ட கொள்கலன் (horizontal container), விளிம்புகள் வளைந்தவை, மற்றும் வியூபோர்ட்டின் மேற்பகுதியில் fixed நிலையில் வைக்கப்பட்டுள்ளது. இந்த glassmorphism என்பது ஒரு அரை-வெளிப்படையான பின்னணி நிறம் மற்றும் backdrop-filter: blur() பண்பிலிருந்து கிடைக்கிறது. இது உள்ளடக்கத்தை மறைக்காமல் அதன் மேல் மிதக்கிறது, ஒவ்வொரு பிரிவிற்கும் உடனடி அணுகலை வழங்குகிறது, மேலும் முழுமையான மறுவடிவமைப்பு இன்றி சிறிய திரைகளிலும் அழகாகச் சுருங்குகிறது. இது ஒரு canvas லைப்ரரியால் அல்லாமல், உலாவியே இதைச் செய்வதால் நவீனமாகத் தெரிகிறது.