ഫ്ലൈയിൽ യുഐ പ്രോട്ടോടൈപ്പുകൾ സൃഷ്ടിക്കാനും പങ്കിടാനും നിങ്ങളെ അനുവദിക്കുന്ന ഒരു വെബ് ആപ്പോ വിപുലീകരണമോ ഉണ്ടായിരുന്നെങ്കിൽ എന്ന് നിങ്ങൾ എപ്പോഴെങ്കിലും ആഗ്രഹിക്കുന്നുണ്ടോ?
ഞങ്ങൾ എല്ലാവരും ചെയ്യുന്നു! ഞങ്ങളുടെ സൈറ്റുകൾ അല്ലെങ്കിൽ ആപ്പുകൾ എങ്ങനെ കാണാനും അനുഭവിക്കാനും ഞങ്ങൾ ആഗ്രഹിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള ആശയങ്ങൾ നമുക്കെല്ലാവർക്കും ഉണ്ട്.
അതിനാൽ, നിങ്ങൾ ഒരു മികച്ച ഡിസൈൻ കൊണ്ടുവന്നു, നിങ്ങൾ അത് എങ്ങനെ ചെയ്തുവെന്ന് കൃത്യമായി ഓർക്കുന്നില്ലേ?
ഇപ്പോൾ നിങ്ങൾ അത് പങ്കിടാൻ ഒരു വഴി കണ്ടെത്തണം. നിങ്ങൾ വളരെ സങ്കീർണ്ണമായ ഒരു ഡിസൈൻ പങ്കിടാൻ ശ്രമിക്കുകയാണെങ്കിൽ ഇതിന് ദിവസങ്ങൾ, ആഴ്ചകൾ പോലും എടുത്തേക്കാം.
നിങ്ങളുടെ വെബ് ആപ്പ് പ്രോട്ടോടൈപ്പുകൾ നിർമ്മിക്കാൻ കാത്തിരിക്കേണ്ട കാര്യമില്ല. ഡാബ്ലെറ്റ് ഉപയോഗിച്ച് അവ ഇപ്പോൾ സൃഷ്ടിക്കുക.
ഘടകങ്ങൾ വലിച്ചിടുക, ശൈലി, സംരക്ഷിക്കുക. അവലോകനത്തിനായി ഇത് ഒരു ഡിസൈനർക്ക് അയയ്ക്കുക അല്ലെങ്കിൽ അവതരണത്തിലേക്ക് പകർത്തുക. സാധ്യതകൾ അനന്തമാണ്.
എന്താണ് ഡാബ്ലെറ്റ്?
ഉപയോഗിക്കുന്നു ഡാബ്ലെറ്റ്, നിങ്ങൾക്ക് തത്സമയം CSS-ന്റെയും HTML കോഡിന്റെയും ചെറിയ സ്നിപ്പെറ്റുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കാം.
ഇത് ഉപയോഗിക്കുമ്പോൾ നിങ്ങളുടെ CSS കോഡിൽ പ്രിഫിക്സുകളൊന്നും ആവശ്യമില്ല. നിങ്ങളുടെ ഉള്ളടക്കം സംഭരിക്കാനും മറ്റ് സൈറ്റുകളിൽ പോസ്റ്റുചെയ്യാനും മറ്റുള്ളവരുമായി പങ്കിടാനും GitHub സാരാംശങ്ങൾ നിങ്ങളെ അനുവദിക്കുന്നു.
മറ്റ് ഡെവലപ്പർമാരുമായി കോഡ് സ്നിപ്പെറ്റുകൾ പങ്കിടാനും ഫീഡ്ബാക്ക് നേടാനുമുള്ള മികച്ച മാർഗമാണിത്.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു?
കോഡ് ടൈപ്പ് ചെയ്തയുടൻ, വിഷ്വൽ ഔട്ട്പുട്ട് അതിന്റെ മുകളിൽ തൽക്ഷണം ദൃശ്യമാകും. ജാവാസ്ക്രിപ്റ്റ് എല്ലാ കീസ്ട്രോക്കിലും ഇത് പ്രവർത്തിപ്പിക്കുന്നത് അലോസരപ്പെടുത്തുമെന്നും ചില സാഹചര്യങ്ങളിൽ ബ്രൗസർ ഉപയോഗശൂന്യമാകാൻ കാരണമായേക്കാമെന്നും കണക്കിലെടുത്ത് ഒറ്റയൊറ്റ ഒഴിവാക്കലാണ്.
JavaScript ടാബിലെ "Run JS" ഓപ്ഷൻ അല്ലെങ്കിൽ കീബോർഡ് കുറുക്കുവഴി (Ctrl + Enter അല്ലെങ്കിൽ Cmd + Enter) ഉപയോഗിക്കുന്നത് ഒരു Dabblet പ്രവർത്തിക്കുമ്പോൾ JavaScript പ്രവർത്തിപ്പിക്കും. ഈ ശൈലി മാറ്റാൻ ഓപ്ഷനുകൾ മെനു നിങ്ങളെ അനുവദിക്കുന്നു.
ഒരു ഡെവലപ്പർ എന്ന നിലയിൽ, നിങ്ങൾക്ക് ഈ മൂന്ന് ഭാഷകളിലും ഒരേസമയം കോഡിംഗ് അല്ലെങ്കിൽ പൂർത്തിയായ ഉൽപ്പന്നം കാണുന്നതിന് ഇടയിൽ മാറാം.
സവിശേഷതകൾ
നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട ഡാബ്ലെറ്റിന്റെ സവിശേഷതകൾ ഇവയാണ്:
ദ്രുത CSS എഡിറ്റിംഗ്: നിങ്ങൾക്ക് വേഗത്തിൽ CSS പ്രോപ്പർട്ടികൾ ചേർക്കാനും എഡിറ്റ് ചെയ്യാനും നീക്കം ചെയ്യാനും കഴിയും. മാറ്റങ്ങൾ തത്സമയം പേജിൽ പ്രതിഫലിക്കും.
വാക്യഘടന ഹൈലൈറ്റിംഗ്: CSS, HTML കോഡുകൾ വാക്യഘടന ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നു, ഇത് വായിക്കാനും മനസ്സിലാക്കാനും എളുപ്പമാക്കുന്നു. നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ കോഡും സാധൂകരിക്കപ്പെടും. നിങ്ങൾക്ക് വേണമെങ്കിൽ കോഡ് ബോക്സ് മറയ്ക്കാനും നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം.
സ്വയമേവ പൂർത്തിയാക്കുക: CSS പ്രോപ്പർട്ടികൾക്കും മൂല്യങ്ങൾക്കുമായി ഡാബ്ലെറ്റ് സ്വയമേവ പൂർത്തിയാക്കുന്നു. നിങ്ങൾ സ്റ്റൈൽഷീറ്റുകൾ സൃഷ്ടിക്കുമ്പോഴോ എഡിറ്റുചെയ്യുമ്പോഴോ ഇത് വളരെ സഹായകമാകും.
മുൻകൂട്ടി നിർമ്മിച്ച CSS സ്റ്റൈൽഷീറ്റുകൾ: നിങ്ങൾക്ക് ജനപ്രിയ വെബ്സൈറ്റുകളിൽ നിന്ന് മുൻകൂട്ടി നിർമ്മിച്ച CSS സ്റ്റൈൽഷീറ്റുകൾ ആക്സസ് ചെയ്യാൻ കഴിയും. നിങ്ങളുടെ സ്വന്തം വെബ്സൈറ്റിലേക്ക് വേഗത്തിലും എളുപ്പത്തിലും ശൈലികൾ ചേർക്കാൻ ഇവ ഉപയോഗിക്കാം.
Gist പിന്തുണ: നിങ്ങളുടെ കോഡ് സ്നിപ്പെറ്റുകൾ മറ്റുള്ളവരുമായി എളുപ്പത്തിൽ സംഭരിക്കാനും പങ്കിടാനും നിങ്ങളെ അനുവദിക്കുന്ന GitHub Gists-നെ Dabblet പിന്തുണയ്ക്കുന്നു.
തത്സമയ പ്രിവ്യൂ: പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ നിങ്ങളുടെ കോഡ് മാറ്റങ്ങളുടെ ഫലങ്ങൾ തത്സമയം കാണാൻ കഴിയും. ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു വാചകത്തിന്റെ നിറം മാറ്റുകയാണെങ്കിൽ, നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ ടെക്സ്റ്റിൽ പ്രതിഫലിക്കുന്ന മാറ്റം നിങ്ങൾ കാണും.
കീബോർഡ് കുറുക്കുവഴികൾ: ഒരു പുതിയ ശൈലി റൂൾ ചേർക്കുകയോ അഭിപ്രായമിടുകയോ പോലുള്ള പൊതുവായ ജോലികൾക്കായി ഡാബ്ലെറ്റിന് കീബോർഡ് കുറുക്കുവഴികൾ ഉണ്ട്.
ഒന്നിലധികം വ്യൂ മോഡുകൾ: Dabblet ഒന്നിലധികം വ്യൂ മോഡുകൾ വാഗ്ദാനം ചെയ്യുന്നു, ഇത് കോഡും ഫലങ്ങളും വശങ്ങളിലായി അല്ലെങ്കിൽ മുകളിലും താഴെയുമായി കാണാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
ആരേലും
- ദ്രുത CSS
- നിങ്ങൾ സൈൻ ഇൻ ചെയ്താലും, നിങ്ങൾക്ക് ആൾമാറാട്ടം സംരക്ഷിക്കാം.
- ആംഗിളുകൾ, നിറങ്ങൾ, ദൈർഘ്യം മുതലായവ പോലുള്ള വിവിധ പാരാമീറ്ററുകൾക്കായുള്ള ഇൻലൈൻ CSS മൂല്യ പ്രിവ്യൂവറുകൾ.
- എല്ലാം XHR-ed ആണ്, അതിനാൽ നിങ്ങൾ സംരക്ഷിക്കുമ്പോൾ പോലും പേജ് ഒരിക്കലും പുതുക്കില്ല.
- കീബോർഡ് കുറുക്കുവഴികൾ ധാരാളം.
- എല്ലാ കോഡുകളും സ്വയമേവ ഫോർമാറ്റ് ചെയ്തിരിക്കുന്നു (മാർക്ക്ഡൗൺ ഒഴികെ).
- യാത്രയിൽ നിന്ന് ഉറച്ച ഡോക്യുമെന്റേഷൻ.
ബാക്ക്ട്രെയിസ്കൊണ്ടു്
- ഇന്റർഫേസ് ആദ്യം അൽപ്പം അമിതമാണ്, പക്ഷേ നിങ്ങൾ അത് ഉപയോഗിക്കും.
- പ്രോജക്റ്റ്-ലെവൽ മാനേജ്മെന്റ് ഫീച്ചറുകളൊന്നുമില്ല (ഇതുവരെ).
ഡാബ്ലെറ്റ് ഇന്റഗ്രേഷൻസ്
ഏതൊരു പ്ലാറ്റ്ഫോമും മറ്റ് സേവനങ്ങളുമായി സംയോജിപ്പിക്കേണ്ടതുണ്ട്, ഡാബ്ലെറ്റ് ഒരു അപവാദമല്ല. ഡാബ്ലെറ്റ് വാഗ്ദാനം ചെയ്യുന്ന ചില സംയോജനങ്ങൾ ഇനിപ്പറയുന്നവയാണ്:
Google അനലിറ്റിക്സ്
ഡാബ്ലെറ്റ് പേജുകളിലേക്ക് നിങ്ങളുടെ Google Analytics ട്രാക്കിംഗ് കോഡ് എളുപ്പത്തിൽ ചേർക്കാനാകും. നിങ്ങളുടെ ഡാബ്ലെറ്റിനായി പേജ് കാഴ്ചകളും മറ്റ് സ്ഥിതിവിവരക്കണക്കുകളും ട്രാക്കുചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കും.
ഉബുണ്ടു
ഉബുണ്ടു തീമുകൾ സൃഷ്ടിക്കാൻ ഡാബ്ലെറ്റ് ഉപയോഗിക്കാം. നിങ്ങൾക്ക് ഒരു പുതിയ ഡാബ്ലെറ്റ് സൃഷ്ടിക്കാനും CSS, HTML കോഡ് ചേർക്കാനും ഒരു വെബ് ബ്രൗസറിൽ തീം പ്രിവ്യൂ ചെയ്യാനും കഴിയും.
ദിഗിതലൊചെഅന്
ഒരു തരത്തിലുള്ള ക്ലൗഡ് ഹോസ്റ്റിംഗ് കമ്പനി ബിസിനസുകൾക്ക് ക്ലൗഡ് കമ്പ്യൂട്ടിംഗ് സേവനങ്ങൾ നൽകുന്നു, ഇത് അവരുടെ പ്രവർത്തനങ്ങൾ കൂടുതൽ കാര്യക്ഷമമായി വളർത്താൻ അനുവദിക്കുന്നു.
ഡാബ്ലെറ്റ് ഇത് എന്ത് ചെയ്യുന്നു?
നിങ്ങൾക്ക് ഇപ്പോൾ നിങ്ങളുടെ ഡാബ്ലെറ്റുകൾ സൃഷ്ടിക്കാനും നിയന്ത്രിക്കാനും വിന്യസിക്കാനും കഴിയും ഡിജിറ്റൽ ഓഷ്യൻ സ്പേസുകൾ.
നിങ്ങളുടെ എല്ലാ കോഡ് സ്നിപ്പെറ്റുകളും ഒരിടത്ത് സൂക്ഷിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുകയും അവ മറ്റുള്ളവരുമായി പങ്കിടുന്നത് എളുപ്പമാക്കുകയും ചെയ്യുന്നു.
ഡാബ്ലെറ്റുകൾക്കുള്ള ഇതരമാർഗങ്ങൾ
ഇതരമാർഗങ്ങൾ എല്ലായ്പ്പോഴും നിലവിലുണ്ട്, അതേ സിരയിൽ, ഡാബ്ലെറ്റിന്റെ കാര്യത്തിൽ ഒരാൾക്ക് ചിന്തിക്കാനുള്ള ചിലത് ഇതാ:
Pastebin.com
പ്രോഗ്രാമർമാർ സാധാരണയായി സോഴ്സ് കോഡോ കോൺഫിഗറേഷൻ ഡാറ്റാ ശകലങ്ങളോ സംരക്ഷിക്കാൻ വെബ്സൈറ്റ് ഉപയോഗിക്കുന്നു. എന്നിരുന്നാലും, നൽകിയിരിക്കുന്ന സ്ഥലത്ത് ആർക്കും ഏത് വാചകവും ഇടാം.
ജെഎസ് ബിൻ
JavaScript-നുള്ള ഒരു സൗജന്യ ടെസ്റ്റിംഗ് ടൂളാണ് JS Bin. ഒരു പാളിയിൽ Javascript ഉം മറ്റൊന്നിൽ HTML ഉം നൽകിക്കഴിഞ്ഞാൽ ഫലം ഒരു ചെറിയ URL വഴി പങ്കിട്ടേക്കാം. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന ചില JS ലൈബ്രറികളിൽ നിന്ന് തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു മെനു ഉപയോഗിക്കുക.
CssDeck
നിങ്ങളുടെ കോഡിംഗ് ശ്രമങ്ങളിൽ നിങ്ങളെ സഹായിക്കുന്ന മറ്റുള്ളവരുമായി ടെസ്റ്റ് കേസുകൾ സൃഷ്ടിക്കുന്നതിനും കൈമാറ്റം ചെയ്യുന്നതിനും ഈ ഉപകരണം മികച്ചതാണ്. വിവിധ ഓപ്ഷനുകൾ ഉപയോഗിച്ച്, മറ്റ് പ്രോഗ്രാമർമാരുമായി നിങ്ങൾക്ക് തൽക്ഷണം പ്രോജക്റ്റുകളിൽ സഹകരിക്കാം.
പ്ലങ്കർ
വെബ് ഡെവലപ്പർമാർക്ക് മസ്തിഷ്കപ്രക്രിയ നടത്താനും സഹകരിക്കാനും അവരുടെ ചിന്തകൾ പങ്കിടാനും കഴിയുന്ന ഒരു ഡിജിറ്റൽ പ്ലാറ്റ്ഫോമാണ് പ്ലങ്കർ.
ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് "ഹലോ, വേൾഡ്!" എന്ന് തുടങ്ങാം. സമ്പന്നമായ പഠനാനുഭവം സൃഷ്ടിക്കുന്നതിന് ഏത് ഭാഷയിലും പ്രോഗ്രാം ചെയ്ത് കോഡ് സ്നിപ്പെറ്റുകൾ, മാർക്ക്ഡൗൺ, സ്ക്രീൻഷോട്ടുകൾ എന്നിവ ചേർക്കുക.
അവസാന വാക്ക്
ഉപസംഹാരമായി, വെബ് ഡെവലപ്പർമാർക്ക്, പ്രത്യേകിച്ച് വേഗത്തിലും എളുപ്പത്തിലും വഴികൾ തേടുന്നവർക്ക്, ഡാബ്ലെറ്റ് ഒരു ഉപയോഗപ്രദമായ ഉപകരണമാണ് അവരുടെ കോഡ് പരിശോധിക്കുക.
അതിന്റെ വിവിധ സവിശേഷതകളും സംയോജനങ്ങളും ഉള്ളതിനാൽ, ഈ പ്ലാറ്റ്ഫോമിന്റെ ഉപയോഗം കണ്ടെത്തുന്നത് ബുദ്ധിമുട്ടാണ്.
ഇന്ന് ഇത് പരീക്ഷിച്ചുനോക്കൂ!
നിങ്ങളുടെ അഭിപ്രായങ്ങൾ രേഖപ്പെടുത്തുക