വെബിലെ Material You
ആൻഡ്രോയിഡിൽ ഗൂഗിൾ ഡിസൈൻ കാണാൻ വളരെ മികച്ചതാണ്. അത് വളരെ സുഗമമായി (fluid) അനുഭവപ്പെടുന്നു. ഡൈനാമിക് നിറങ്ങളും ഉരുണ്ട ആകൃതികളും ഇത് ഉപയോഗിക്കുന്നു.
വെബ് ഡെവലപ്പർമാർ നേരിടുന്നത് മറ്റൊരു യാഥാർത്ഥ്യമാണ്. ഇത്തരം തീമുകൾ ഒരു ബ്രൗസറിലേക്ക് കൊണ്ടുവരുന്നത് സാങ്കേതികമായ തടസ്സങ്ങൾ സൃഷ്ടിക്കുന്നു.
Material Design 3 വെബിലേക്ക് മാറ്റുന്നതിനെക്കുറിച്ച് ഞാൻ ഒരു പുതിയ ലേഖനം എഴുതിയിട്ടുണ്ട്. ഇത് React, Angular എന്നിവയിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് ഞാൻ ഇതിൽ പരിശോധിക്കുന്നു.
ഞാൻ ഇതിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന കാര്യങ്ങൾ ഇവയാണ്:
- ഡൈനാമിക് നിറങ്ങളും SSR-ഉം: റൺടൈമിൽ (runtime) കളർ പാലറ്റുകൾ കണക്കാക്കുന്നത് പ്രശ്നങ്ങൾ ഉണ്ടാക്കുന്നു. ഇത് പലപ്പോഴും സ്റ്റൈൽ ചെയ്യാത്ത ഉള്ളടക്കം പെട്ടെന്ന് തെളിയുന്നതിന് (flash of unstyled content) കാരണമാകുന്നു.
- ലേഔട്ട് ജിയോമെട്രി: നിങ്ങളുടെ ഗ്രിഡ് തെറ്റിക്കാതെ തന്നെ വലിയ കോർണർ റേഡിയസുകളും (corner radiuses) ഷേപ്പ് ടോക്കണുകളും (shape tokens) കൈകാര്യം ചെയ്യുക.
- ഡിസൈൻ ടോക്കൺ എൻകാപ്സുലേഷൻ: MUI അല്ലെങ്കിൽ Angular Material പോലുള്ള ലൈബ്രറികളിലൂടെ കസ്റ്റം ടോക്കണുകൾ കൈമാറുക.
നിങ്ങൾ CSS വേരിയബിളുകളോ (CSS variables) തീം പ്രൊവൈഡർമാരോ (theme providers) ഉപയോഗിക്കുന്നവരാണെങ്കിൽ ഇത് ഉപകരിക്കും.
പൂർണ്ണമായ ലേഖനം ഇവിടെ വായിക്കാം: https://dev.to/matin676/the-web-wasnt-built-for-material-you-but-we-build-it-anyway-2gdc