سه ابزار فوق‌العاده مفید برای طراحی سایت (آموزشی)

ابزار شماره ۱:

اینکه بعد از هر تغییر در کد و برای مشاهده تغییرات صورت گرفته باید به صفحه مرورگر رفته و صفحه با زدن F5 یا Ctrl+R و ... رفرش کنید، کمی آزار دهنده است. برای حل این مشکل ابزارهایی وجود دارد. شرکت Jetbrains برای حل این مشکل ابزاری را برای مرورگر Chrome ایجاد کرده است که قابلیت ویرایش زنده کدهای CSS، HTML و JavaScript و دیباگ کردن JavaScript را دارا است.
برای دانلود این افزونه روی این آدرس کلیک کنید.
برای نحوه استفاده از این افزونه و مشاهده برخی قابلیت‌های این افزونه این فیلم را حتماً دانلود کنید.

----------------------------------------------------------------------------------

ابزار شماره ۲:

یکی از نقص‌های IDEهای شرکت Jetbrains این است که قابلیت جابجایی cursor یا مکان‌نما در مکان‌های مورد نیاز برای افزایش سرعت تایپ را با فشردن یک کلید خاص ایجاد نکرده است. در IDEهای شرکت Eclipse این امکان قابل فعالسازی است و با زدن دکمه Tab، مکان‌نما به راحتی بین مکان‌های مورد نیاز جابجا می‌شود. برای فعالسازی این قابلیت در IDEهای شرکت Jetbrains، یک پلاگینی وجود دارد که علاوه بر رفع این مشکل، امکانات بسیار جالبی برای طراحی وب فراهم می‌کند. برای مثال شما برای نوشتن عبارت <a href="|">|</a> کافی است که حرف a را تایپ کرده و سپس دکمه Tab را فشار دهید و خود به خود این المان نوشته می‌شود و مکان‌نما در اولین مکانی که با نماد | نشان‌ داده‌ام قرار می‌گیرد و با زدن دکمه Tab، مکان نما بین | ها جابجا می‌شود.

لیستی از این عبارت‌های کوتاه شده که به شدت به تسریع تایپ شما کمک می‌کند در این آدرس قابل مشاهده است. (می‌توانید نسخه pdf شده این صفحه را  که توسط خود این سایت تهیه شده است، دانلود کنید، همچنین می‌توانید صفحه سایت مذکور را که به عکس تبدیل کرده‌ام، به صورت عکس دانلود نمایید)
برای نصب این پلاگین در IDE خود، میانبر Ctrl+Alt+S را زده یا از منوی File بر روی ...Settings کلیک کرده و سپس وارد بخش Plugins شده و عبارت Emmet را تایپ کنید. این پلاگین را نصب کنید و ویرایش‌گر خود را ری‌استارت کنید. حالا قادر خواهید بود از این پلاگین به راحتی استفاده کنید.
ذکر یک میانبر بسیار کارآمد در IDEهای اکثر شرکت‌ها در اینجا خالی از لطف نیست. شما برای رفتن به خط بعد، بدون توجه به اینکه مکان‌نما در کجا قرار دارد از میانبر Shift+Enter استفاده می‌کنید اما میانبری وجود دارد که علاوه بر رفتن به خط بعد به جهت تسریع در کدنویسی به تکمیل برخی دستورات و بلاک‌ها می‌پردازد، برای این منظور شما می‌توانید از میانبر Ctrl+Shift+Enter استفاده کنید و به دلیل استفاده مکرر من از این میانبر فوق‌العاده، من این میانبر را به Alt+Semicolon تغییر داده‌ام. پیشنهاد می‌کنم خاصیت Complete Current Statement را که با میانبر مذکور به آن متصل می‌شود، مطالعه نمایید.
برای اصلاح فرمت کلی صفحه و اصلاح بهم ریختگی‌های کدنویسی، می‌توانید از میانبر Ctrl+Alt+L استفاده کنید که من به عنوان مثال میانبر Ctrl+S را نیز به این کار اختصاص داده‌ام، موقع اختصاص دادن یک میانبری که قبلاً استفاده شده است شما با اخطار زیر مواجه می‌شوید. برای اضافه شدن به لیست، روی Leave کلیک کنید، اگر وظیفه‌ جدیدی که به این میانبر اختصاص داده‌اید با وظیفه‌های دیگر این میانبر تلاقی نداشته باشد، می‌توانید بدون دغدغه آن را اضافه و از آن استفاده کنید، اما در این مثالی که زده‌ام برای Reformat Code باید از یک میانبر مستقل استفاده کنید (یعنی همان Ctrl+Alt+L که هم سهل‌الوصول است و هم مستقل). مانند دو شکل زیر:

----------------------------------------------------------------------------------

ابزار شماره ۳:

سایت emmet.io علاوه بر پلاگین معرفی شده یک افزونه جهت مشاهده سایت طراحی شده (یا هر سایت دیگری) در هر سایز دلخواهی را فراهم می‌کند که می‌توانید این افزونه را برای مرورگر Chrome از این آدرس دانلود و نصب نمایید. برای مثال صفحه اصلی همین سایت برای موبایل با سایزهای مختلف به شکل زیر خواهد بود و نکته جالب توجه این است که این ابزار به شما یک عکس از صفحه اصلی سایت نمی‌دهد بلکه می‌توانید در هر صفحه موبایل یا تبلت و ... به هر آدرسی از سایت بروید. حتی می‌توانید اندازه هر وسیله را با موس تغییر دهید. همچینین برای این منظور می‌توانید به سایت‌هایی که برای این منظور طراحی شده‌اند نیز سر بزنید (برای مثال سایت browserstack.com).

علاوه بر این ابزار، این سایت یک ابزار دیگری جهت ویرایش زنده کدهای HTML و CSS فراهم کرده است که به نظر من ابزار خود شرکت Jetbrains که در بالا به آن اشاره شد بهتر است.