സോഷ്യൽ മീഡിയയ്ക്കായി ഞങ്ങൾ എങ്ങനെ കോഡ് സ്ക്രീൻഷോട്ടുകൾ നിർമ്മിക്കുന്നു
ഞങ്ങൾ മുൻപ് കോഡ് സ്ക്രീൻഷോട്ടുകൾ നേരിട്ട് (manually) എടുക്കുമായിരുന്നു.
ഞങ്ങൾ എഡിറ്റർ തുറന്ന്, വിൻഡോ ക്രോപ്പ് ചെയ്ത്, ആ ഫയൽ ഒരു പോസ്റ്റിലേക്ക് ഇടുന്ന രീതിയായിരുന്നു പിന്തുടർന്നിരുന്നത്. ഇത് മൂന്ന് പ്രശ്നങ്ങൾക്ക് കാരണമായി:
- ഓരോ പോസ്റ്റിലും തീമുകൾ മാറിക്കൊണ്ടിരുന്നു.
- ചിത്രങ്ങളുടെ വീതിയിൽ വ്യത്യാസങ്ങൾ ഉണ്ടായിരുന്നു.
- മൊബൈൽ സ്ക്രീനുകളിൽ സ്ക്രീൻഷോട്ടുകൾ മങ്ങിയതായി (blurry) കാണപ്പെട്ടു.
ഞങ്ങൾ അത് നേരിട്ട് ചെയ്യുന്നത് നിർത്തി. ഇപ്പോൾ ആവശ്യാനുസരണം രണ്ട് വ്യത്യസ്ത രീതികളാണ് ഉപയോഗിക്കുന്നത്.
ഒറ്റപ്പെട്ട പോസ്റ്റുകൾക്കായി ഞങ്ങൾ ഒരു ബ്രൗസർ ടൂൾ ഉപയോഗിക്കുന്നു. നിങ്ങൾ കോഡ് പേസ്റ്റ് ചെയ്യുക, ഒരു ഭാഷ തിരഞ്ഞെടുക്കുക, എന്നിട്ട് വൃത്തിയുള്ള ഒരു PNG ഡൗൺലോഡ് ചെയ്യുക. ഒരു സിംഗിൾ ട്വീറ്റിനോ സ്ലൈഡിനോ ഇത് വളരെ വേഗത്തിൽ ചെയ്യാവുന്നതാണ്.
ഓട്ടോമേറ്റഡ് പോസ്റ്റുകൾക്കായി ഞങ്ങൾ ഒരു API ഉപയോഗിക്കുന്നു. പബ്ലിഷ് ചെയ്യുന്ന സമയത്തോ അല്ലെങ്കിൽ ഒരു ബിൽഡ് പൈപ്പ്ലൈനിനുള്ളിലോ (build pipeline) ചിത്രങ്ങൾ നിർമ്മിക്കേണ്ടി വരുമ്പോഴാണ് ഇത് ഉപയോഗിക്കുന്നത്. നിങ്ങൾ ഒരു POST റിക്വസ്റ്റ് വഴി കോഡ് അയക്കുന്നു, പകരം ഒരു URL ലഭിക്കുന്നു.
എന്തുകൊണ്ട് ഒരു API ഉപയോഗിക്കണം? ഒരു ഡിപ്ലോയ്മെന്റ് പൈപ്പ്ലൈനിൽ (deployment pipeline) ഒരു മനുഷ്യന് ബട്ടൺ ക്ലിക്ക് ചെയ്യാൻ കഴിയില്ല. എന്നാൽ ഒരു API ഉപയോഗിക്കുന്നതിലൂടെ, മാനുവൽ ജോലികൾ ഇല്ലാതെ തന്നെ ഓരോ തവണയും കൃത്യമായ ചിത്രങ്ങൾ നിർമ്മിക്കാൻ നിങ്ങളുടെ സിസ്റ്റത്തിന് സാധിക്കുന്നു.
സോഷ്യൽ മീഡിയ കോഡ് ചിത്രങ്ങൾ മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഞങ്ങളുടെ നിർദ്ദേശങ്ങൾ:
- ചെറുതാക്കി വെക്കുക. ഇരുപത് വരികളിൽ കൂടുതൽ ആകരുത്. നീളമുള്ള കോഡ് സ്നിപ്പറ്റുകൾ മൊബൈലിൽ വായിക്കാൻ പ്രയാസമായിരിക്കും.
- ഹൈ കോൺട്രാസ്റ്റ് ഉപയോഗിക്കുക. സോഷ്യൽ മീഡിയ പ്ലാറ്റ്ഫോമുകൾ ചിത്രങ്ങൾ കംപ്രസ്സ് ചെയ്താലും Dracula അല്ലെങ്കിൽ One Dark പോലുള്ള തീമുകൾ വ്യക്തമായി കാണപ്പെടും. ലോ കോൺട്രാസ്റ്റ് തീമുകൾ മങ്ങിയതായി തോന്നും.
- റെസല്യൂഷൻ നിലനിർത്തുക. ഹൈ റെസല്യൂഷൻ ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ കോഡ് റെറ്റിന ഡിസ്പ്ലേകളിൽ (retina displays) വ്യക്തമായിരിക്കാൻ സഹായിക്കുന്നു.
- റിസൾട്ടുകൾ കാഷെ (cache) ചെയ്യുക. ഒരേ കോഡ് തന്നെ വീണ്ടും റെൻഡർ ചെയ്യാതിരിക്കാൻ ഇമേജ് URL സൂക്ഷിച്ചു വെക്കുക.
ബ്രൗസർ ടൂളും API-യും ഒരേ റെൻഡറർ (renderer) ആണ് ഉപയോഗിക്കുന്നത്. ഇതിനർത്ഥം നിങ്ങളുടെ മാനുവൽ പോസ്റ്റുകളും ഓട്ടോമേറ്റഡ് പോസ്റ്റുകളും എപ്പോഴും ഒരേപോലെ ഇരിക്കും എന്നാണ്.
നിങ്ങൾ എങ്ങനെയാണ് കോഡ് സ്ക്രീൻഷോട്ടുകൾ കൈകാര്യം ചെയ്യുന്നത്? നിങ്ങൾ അത് നേരിട്ട് ചെയ്യുകയാണോ അതോ ഒരു API ഉപയോഗിക്കുകയാണോ? കമന്റുകളിൽ അറിയിക്കുക.
സ്രോതസ്സ്: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91