ഫ്രണ്ട്-എൻഡ് വെബ് ഡെവലപ്പർമാർക്കായുള്ള മികച്ച സമ്പ്രദായങ്ങൾ

ഏത് ഡിവിയാണ് അടയ്ക്കുന്നതെന്ന് വിശദീകരിക്കുക

മിക്ക സമയവും ഞാൻ ഒരു വെബ് സൈറ്റ് ഉറവിടം കാണുമ്പോൾ, പേജിന്റെ ഏറ്റവും താഴെ, ഏതാണ്ട് അവസാനമില്ലാത്ത ഒരു പട്ടിക, ക്ലോസ് ടാഗുകളുടെ പട്ടിക. വാസ്തവത്തിൽ, പല തുടക്കക്കാരും, അവർ ഗുണമേന്മയുള്ള കോഡ് നിർമ്മിക്കാൻ ടേബിളുകൾ പകരം ഡൈവ് സ് ഉപയോഗിക്കേണ്ടി വരും കരുതുന്നു. ഡിവികൾ മേശകളെക്കാൾ ക്ലീനറുകളാണ്, എന്നാൽ ശരിയായ കോഡ് ഓർഗനൈസേഷൻ ഇല്ലെങ്കിൽ, ടേബിൾ അധിഷ്ഠിത കോഡ് പോലെ (അല്ലെങ്കിൽ ചിലപ്പോൾ കൂടുതൽ) അലങ്കോലമാകാം.

ഇന് ഡെന്റേഷന് ഉപയോഗിക്കുന്നത് നല്ല തുടക്കമാണ്. എന്നാൽ നിങ്ങൾക്ക് ധാരാളം സമയം ലാഭിക്കാൻ കഴിയുന്ന ഒരു ടിപ്പ്, താഴെ കൊടുത്തിരിക്കുന്ന ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നത് പോലെ, നിങ്ങൾ അടയ്ക്കുന്ന ഓരോ ഡിവി ടാഗും കമന്റ് ചെയ്യുക എന്നതാണ്:

<div id="header">
  <div id="sub">...  </div><!-- #sub.first.left -->
</div><!-- #header -->

CSS പുനഃക്രമീകരണം ഉപയോഗിക്കുക

നിങ്ങൾ ഒരു തുടക്കക്കാരനല്ലെങ്കിൽ അല്ലെങ്കിൽ കഴിഞ്ഞ 6 വർഷമായി മരുഭൂമി ദ്വീപിൽ നിങ്ങൾ അവധിക്കാലം ചെലവഴിക്കുകയാണെങ്കിൽ, ഒരു CSS പുനഃക്രമീകരിച്ചത് എത്ര മാത്രം പ്രയോജനകരമാണെന്ന് നിങ്ങൾക്ക് ഇതിനകം തന്നെ അറിയാം. സ്വതവേ, ബ്രൗസറുകൾ എച്ച്ടിഎംഎൽ ഘടകങ്ങൾക്ക് ഒരേ ഡിഫോൾട്ട് സ്റ്റൈലിംഗ് പ്രയോഗിക്കില്ല, ഒരു CSS പുനഃക്രമീകരണം എല്ലാ ഘടകവും പ്രത്യേക ശൈലിഇല്ല എന്ന് ഉറപ്പാക്കും, അതിനാൽ പല ക്രോസ്-ബ്രൗസർ റെൻഡറിംഗ് പ്രശ്നങ്ങളുടെയും അപകടസാധ്യത കൂടാതെ നിങ്ങൾക്ക് സ്വന്തം നിർവചിക്കാൻ കഴിയും.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, ചുരുക്കെഴുത്ത്, വിലാസം, വലുത്, ഉദ്ധരിക്കുക, കോഡ്,
del, dfn, em, font, img, ins, kbd, q, s, samp,
ചെറിയ, സ്ട്രൈക്ക്, സ്ട്രോങ്ങ്, സബ്, സുപ്, ടിടി, വർ,
b, u, i, കേന്ദ്രം,
dl, dt, dd, ol, ul, li,
ഫീൽഡ്സെറ്റ്, ഫോം, ലേബൽ, ഇതിഹാസം,
ടേബിൾ, അടിക്കുറിപ്പ്, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	അതിർത്തി: 0;
	ഔട്ട് ലൈൻ: 0;
	font-size: 100%;
	ലംബ-അലൈൻ: ബേസ് ലൈൻ;
	പശ്ചാത്തലം: സുതാര്യമായ;
}
ശരീരം {
	വരി-ഉയരം: 1;
}
ol, ul {
	list-style: ഒന്നുമില്ല;
}
blockquote, q {
	ഉദ്ധരണികൾ: ഒന്നുമില്ല;
}
blockquote:before, blockquote:after,
q:before, q:after {
	ഉള്ളടക്കം: '';
	ഉള്ളടക്കം: ഒന്നുമില്ല;
}

/* ഫോക്കസ് സ്റ്റൈലുകൾ നിർവചിക്കാൻ ഓർമ്മിക്കുക! */
:focus {
	ഔട്ട് ലൈൻ: 0;
}

/* ഇൻസേർട്ടുകൾ ഹൈലൈറ്റ് ചെയ്യാൻ മറക്കരുത്! */
ins {
	text-decoration: ഒന്നുമില്ല;
}
del {
	text-decoration: line-through;
}

/* മേശകൾ ഇപ്പോഴും മാർക്കപ്പിൽ 'cellspacing="0"' ആവശ്യമാണ് */
table {
	അതിര് ത്തി-തകര് ച്ച: തകര് ച്ച;
	അതിർത്തി- അകലം: 0;
}

ഉറവിടം:http://meerweb.com/eric/tools/css/reset/index.html

@import ഉപയോഗിക്കരുത്

@import നിർദ്ദേശം ഉപയോഗിച്ച് CSS ഫയലുകൾ ഉൾപ്പെടുത്താവുന്നതാണ്. ഉദാഹരണത്തിന്, ഒരു സ്റ്റൈൽഷീറ്റ് മറ്റൊരു രീതിയിൽ ഉൾപ്പെടുത്താൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നെങ്കിൽ ഇത് ഉപകാരപ്രദമാകും. എച്ച്ടിഎംഎൽ ഡോക്യുമെന്റുകളിൽ CSS ഫയൽ ഉൾപ്പെടുത്തുക എന്നതാണ് മറ്റൊരു സാധാരണ സമ്പ്രദായം:

<style type="text/css>
  @import url('a.css');
  @import url('b.css');
</style>

ഇത് പ്രവർത്തിക്കുന്നു, @import നിർദ്ദേശം ഒരു html പ്രമാണത്തിൽ സ്റ്റൈൽഷീറ്റുകൾ ഉൾപ്പെടുത്തുന്നതിനുള്ള മറ്റ് മാർഗ്ഗത്തേക്കാൾ വളരെ പതുക്കെയാണ്:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

കുറഞ്ഞ ട്രാഫിക്ക് വെബ് സൈറ്റുകളിൽ ഇത് ഒരു വ്യത്യാസവും ഉണ്ടാക്കില്ല, എന്നാൽ നിങ്ങൾക്ക് ജനപ്രിയ വെബ് സൈറ്റ് സ്വന്തമാക്കാൻ അവസരം ഉണ്ടെങ്കിൽ, @import ഉപയോഗിച്ച് നിങ്ങളുടെ സന്ദർശക സമയം പാഴാക്കരുത്.
ഉറവിടം:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

"സ്മാഷ്" നിങ്ങളുടെ ചിത്രങ്ങൾ

ഒരു ഡെവലപ്പർ എന്ന നിലയിൽ, വെബിനുവേണ്ടി എന്റെ ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് അത്ര എളുപ്പമുള്ള കാര്യമല്ലെന്ന് ഞാൻ എപ്പോഴും കണ്ടെത്തി. ഞാൻ നല്ല പഴയ "സേവ് ഫോർ വെബ്" ഫോട്ടോഷോപ്പ് കമാൻഡ് ശ്രമിച്ചു, എന്നാൽ മിക്ക സമയത്തും, ഞാൻ വളരെ വലുതോ മതിയായ ഗുണനിലവാരമില്ലാത്തതോ ആയ ചിത്രങ്ങൾ കൊണ്ട് അവസാനിച്ചു.
തൽഫലമായി, എന്റെ വെബ് സൈറ്റുകളിൽ ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ചിത്രങ്ങൾ ഉപയോഗിക്കുന്ന ശീലം എനിക്കുണ്ടായിരുന്നു. നിങ്ങളുടെ സൈറ്റിന്റെ ബാൻഡ് വിഡ്ത്ത് ശ്രദ്ധിക്കാതിരിക്കുമ്പോൾ ഇതൊരു പ്രശ്നമല്ല, എന്നാൽ എന്റെ vps.net വെർച്വൽ പ്രൈവറ്റ് സെർവർ എന്റെ സമീപകാല സ്വിച്ചിനു ശേഷം, ഞാൻ ഇമേജ് വലിപ്പത്തിൽ ശ്രദ്ധ വേണം.

ഈ സമയത്ത്, ഞാൻ വളരെ കൂൾ ടൂൾ സ്മാഷ് ഇത്: നിങ്ങൾ നിങ്ങളുടെ ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ഇമേജ് URL നൽകുക, Smush It നിങ്ങൾക്ക് തികച്ചും ഒപ്റ്റിമൈസ് ചെയ്ത ചിത്രം സൃഷ്ടിക്കും. യഥാർത്ഥ ഗുണനിലവാരം നിലനിർത്തിക്കൊണ്ട്, ഫയൽ വലുപ്പത്തിന്റെ 70% വരെ നിങ്ങൾക്ക് ലാഭിക്കാൻ കഴിയും. ഒരു ഉദാഹരണമായി, ഓൺലൈൻ കോഡ് എഡിറ്ററുകളുടെ ലിസ്റ്റിൽ നിന്നുള്ള എല്ലാ ചിത്രങ്ങളും "സ്മാഷ്ഡ്" ആണ്.

എച്ച്ടിഎംഎല് ലിനൊപ്പം CSS-നെ കൂട്ടിക്കുഴയ്ക്കരുത്

ഒരു മാർക്കപ്പ് ഭാഷ എന്ന നിലയിൽ, ഒരു ഹെഡർ, അടിക്കുറിപ്പ്, പട്ടികകൾ, തടയൽ ഉദ്ധരണികൾ മുതലായവ നിർവചിക്കുന്നതിലൂടെ ഡോക്യുമെന്റുകൾ ഓർഗനൈസ് ചെയ്യുക എന്നതാണ് എച്ച്ടിഎംഎൽ ന്റെ ശരിയായ ഉപയോഗം. കുറച്ചു കാലം മുമ്പ്, ഫ്രണ്ട്-എൻഡ് വെബ് ഡെവലപ്പർമാർ പലപ്പോഴും ഒരു പ്രത്യേക മൂലകം ശൈലിചെയ്യാൻ ഇപ്പോൾ എച്ച്ടിഎംഎൽ ആട്രിബ്യൂട്ടുകൾ ഡിപ്രെക്കേറ്റ് ചെയ്തു.
ഇക്കാലത്ത്, സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഡെവലപ്പർമാർക്ക് ഒരു html പ്രമാണത്തിൽ നേരിട്ട് CSS ചേർക്കാൻ അനുവദിക്കുന്നു. ഇത് ടെസ്റ്റിംഗിന് വളരെ ഉപകാരപ്രദമാണ് അല്ലെങ്കിൽ നിങ്ങൾ തിരക്കിലായിരിക്കുമ്പോൾ. എന്നാൽ സ്റ്റൈൽ ആട്രിബ്യൂട്ട് മോശം സമ്പ്രദായം, അത് പൂർണ്ണമായും സിഎസ്എസ് തത്വശാസ്ത്രം നേരെ പോകുന്നു.

ഇനിപ്പറയുന്ന ഉദാഹരണം, ലളിതമായ ഒരു കോഡ് വായിക്കാൻ എത്ര മാത്രം വൃത്തികെട്ടതും ബുദ്ധിമുട്ടുള്ളതുമായിരിക്കും, സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്:

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">പൂച്ചകൾ ആർ കോഡ്</a>

എച്ച്ടിഎംഎല് ലിനൊപ്പം ജാവാസ്ക്രിപ്റ്റ് കൂട്ടിക്കുഴയ്ക്കരുത്

നിങ്ങളുടെ HTML കോഡ് സിഎസ്എസ് സുമായി കൂട്ടിക്കുഴക്കുന്നത് പോലെ, HTML ഡോക്യുമെന്റുകളിൽ നിങ്ങൾ ഏതെങ്കിലും ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാൻ പാടില്ല. ഇനിപ്പറയുന്ന തെറ്റായ സമ്പ്രദായം ഒരു ഓൺക്ലിക്ക് ഇവന്റ് വിശദീകരിക്കുന്നു:

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">പൂച്ചകൾ ആർ കോഡ്</a>

തടസ്സമില്ലാത്ത ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇതേ ഫലം കൈവരിക്കാൻ കഴിയും. ഈ ഉദാഹരണത്തിൽ, ഞാൻ ജെക്വറി യുടെ ജനപ്രിയ ചട്ടക്കൂട് ഉപയോഗിക്കുന്നു:

$(പ്രമാണം).റെഡി(ഫങ്ഷൻ() {
  $('#cwc').ക്ലിക്ക് (ഫങ്ഷൻ() {
    alert ('I love this website');
  });
});

തുടക്കത്തിൽ ഇത് അല്പം ബുദ്ധിമുട്ടിതോന്നിയേക്കാം, പ്രത്യേകിച്ച് തുടക്കക്കാർക്ക്; എന്നാല് , അത് തീര് ച്ചയായും അല്ല, നിങ്ങളുടെ എച്ച്ടിഎംഎല് ഡോക്യുമെന്റ് വൃത്തിയായി സൂക്ഷിക്കും.

നിബന്ധനയുള്ള അഭിപ്രായങ്ങൾ ഉപയോഗിക്കുക

നിങ്ങൾക്കറിയാം, IE വലിച്ചു, ചില ക്ലയന്റുകൾ ഈ കാലഹരണപ്പെട്ട ബ്രൗസറിന് അനുയോജ്യമായ വെബ്പേജുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ ആവശ്യത്തിൽ കൂടുതൽ വലിച്ചെടുക്കുന്നു. IE-യുടെ നിർദ്ദിഷ്ട പതിപ്പുകൾ ടാർഗറ്റ് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് താഴെ കാണിച്ചിരിക്കുന്ന പോലെ, അറിയപ്പെടുന്ന IE ഹാക്കുകൾ ഉപയോഗിക്കാവുന്നതാണ്:

ഉയരം: 200px; /* സാധാരണ ബ്രൗസറുകൾ */
_height: 300px; /* IE6 */
.ഉയരം: 250px; /* IE7 */
*ഉയരം: 350px; /* എല്ലാ ഐ.ഇ.എസ് .എസ് */

ആ ഹാക്കുകൾ ചിലപ്പോൾ വളരെ ഉപകാരപ്രദമാണ്, എന്നാൽ IE-യുടെ ഒരു നിർദ്ദിഷ്ട പതിപ്പ് ടാർഗറ്റ് ചെയ്യാൻ അവ മികച്ച മാർഗ്ഗമല്ല, അത് നിങ്ങളുടെ CSS വാലിഡേഷൻ പരാജയപ്പെടാൻ കാരണമാകും.

പകരം, താഴെ കാണിച്ചിരിക്കുന്ന നിബന്ധനയുള്ള കമന്റ് IE6 ടാർഗറ്റ് ചെയ്യുന്നതിന് നിങ്ങൾ ഉപയോഗിക്കണം.

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

ജാവാസ്ക്രിപ്റ്റ് ഫയൽ താഴെ വയ്ക്കുക

2000-കളുടെ അവസാനത്തിൽ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ സ്ഥാപിക്കുക എന്നതായിരുന്നു ഏറ്റവും പ്രശസ്തമായ രീതി.<head>ഒപ്പം</head>tിൽ . പ്രശ്നം ആദ്യം നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ ലോഡ് ചെയ്യപ്പെടും, തൽഫലമായി നിങ്ങളുടെ ഉള്ളടക്കം ലോഡ് ചെയ്യപ്പെടും.

നിങ്ങളുടെ ഡോക്യുമെന്റുകളുടെ അടിയിൽ ജാവാസ്ക്രിപ്റ്റ് ഫയലുകൾ വയ്ക്കുക വഴി, ഉള്ളടക്കം ശരിയായി പ്രദർശിപ്പിക്കുമ്പോൾ മാത്രമേ ജെഎസ് ഫയലുകൾ ലോഡ് ചെയ്യപ്പെടുകയുള്ളൂ എന്ന് നിങ്ങൾ ഉറപ്പാക്കും.

    ...    <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
  

HTML സെമന്റലായി ഉപയോഗിക്കുക

എച്ച്ടിഎംഎൽ ഒരു പ്രോഗ്രാമിങ് ഭാഷയല്ല. തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ, പട്ടികകൾ, തുടങ്ങിയ ടെക്സ്റ്റുകൾക്കുള്ള ഘടനാപരമായ സെമാന്റിക്സ് എന്ന നിലയിൽ ഘടനാപരമായ രേഖകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു മാർക്കപ്പ് ഭാഷയാണ് ഇത്.
നിങ്ങൾ പഴയ 90-കളിൽ അല്ലെങ്കിൽ നൂറ്റാണ്ടിന്റെ തുടക്കത്തിൽ വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കാൻ തുടങ്ങിയെങ്കിൽ, ആ സമയത്ത് മാർക്കപ്പ് എത്ര വൃത്തികെട്ടആയിരുന്നു എന്ന് നിങ്ങൾക്ക് അറിയാം. എന്നാല് , അത് പരിണമിച്ചിരിക്കുന്നു.
മറ്റു പല കാര്യങ്ങളിലും, HTML ഘടകം വളരെ പ്രധാനമാണ്. ഒരു ഉദാഹരണമെന്ന നിലയിൽ, ഒരു നാവിഗേഷൻ മെനു എപ്പോഴും ഓർഡർ ചെയ്യാത്ത പട്ടികആയിരിക്കണം:

<ul>
  <li><a href="#">ഹോം</a></li>
  <li><a href="#">ഏകദേശം</a></li>
  <li><a href="#">വിലാസം</a></li>
  <li><a href="#">ബ്ലോഗ്</a></li>
</ul>

ക്രോസ്-ബ്രൗസർ പ്രശ്നങ്ങൾ ഒഴിവാക്കുന്നതിന് നിങ്ങൾ ബിൽഡ് ബി.ബി.ടി.എ ടെസ്റ്റ് ചെയ്യുക

HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് എന്നിവ വികസിപ്പിക്കുമ്പോൾ ഞാൻ ചെയ്ത ഏറ്റവും വലിയ അബദ്ധങ്ങളിലൊന്ന്, ഞാൻ എഴുതുമ്പോൾ ഒന്നിലധികം ബ്രൗസറിൽ എന്റെ പേജുകൾ ടെസ്റ്റ് ചെയ്യുകയല്ല. പകരം, ഞാൻ എന്റെ എല്ലാ കോഡുകളും എഴുതുമായിരുന്നു, ഫയർഫോക്സിൽ അത് എങ്ങനെ യാണ് അവതരിപ്പിക്കപ്പെട്ടത് എന്ന് കാണാൻ.