افزایش سرعت مرور صفحات اینترنت با افزونه فایرفکس

10 02 2010

نکته مهم: در صورتی که آشنایی کافی به اینترنت، مرور صفحات اینترنت و نحوه کارکرد صفحات آن ندارید این شیوه برای شما مناسب نیست. برای درک صحیح عملکرد این روش حداقل باید با mime type ها آشنایی داشته باشید.

در این نوشتار قصد دارم که افزونه BetterCache رو معرفی کنم که این بهبود رو با استفاده از این افزونه انجام خواهیم داد.


دریافت افزونه BetterCache

شیوه نصب و راه اندازی با تنظیمات بهینه

پس از نصب، این افزونه به طور خودکار شروع به کار خواهد کرد، اما تنظیمات پیش فرض آن چندان مناسب نیست و نیاز به تغییرات اندکی دارد. برای اعمال تغییر باید به صفحه تنظیمات این افزونه بروید. برای این کار گزینه Add-ons را از منوی Tools فایرفاکس انتخاب کنید. در پنجره Add-ons به برگه Extensions رفته و با انتخاب BetterCache دکمه Options را انتخاب کنید. به برگه Never-cache list بروید. در کادر Mime-type مقدار text/html را وارد کنید و دکمه Add را بزنید.

و تمام. کاری که الان انجام دادید جلوگیری از اعمال تغییرات توسط این افزونه برای صفحات عادی بود.

BetterCache Never-cache list

BetterCache Never-cache list

شیوه عملکرد این افزونه برای افزایش سرعت

قبل از هر چیز باید در مورد caching اطلاع داشته باشید. caching در وب در حقیقت ذخیره کرده محتویات متن، تصویر و غیره برای مدت زمان مشخص شده توسط سایت هست. این کار باعث خواهد شد که در درخواست های بعدی به جای دریافت مجدد اطلاعات از سرور سایت، فایل cache شده در مرورگر استفاده شود که این باعث صرفه جویی های زیادی میشود. معمولا اکثر سایت ها قوانین خاصی رو برای caching محتویات مختلف سایت در نظر می گیرند. این قوانین در طی اولین انتقال محتویات سایت به مرورگر ارسال میشود.

کاری که این افزونه انجام میدهد دقیقا مربوط به قوانین caching است. این افزونه با دستکاری این قوانین فایرفاکس را مجبور به ذخیره و cache کردن محتویات سایت برای مدت زمان بیشتری میکند. این نکته رمز موفقیت این افزونه در افزایش سرعت است.

اما نکته مهم در اینجا به کارگیری صحیح و جلوگیری از کش کردن اطلاعات ضروری توسط این افزونه است. زیرا ممکن که محتویات قدیمی را به جای محتویات جدید مشاهده کنید. (در این صورت راه حل استفاده از کلید F5 است)

چرا text/html رو به لیست چشم پوشی ها اضاف کردیم؟ به این علت که معمولا محتویات اصلی سایتها توسط صفحات عادی یا html انتقال پیدا می کند. پس در صورتی که این صفحات را کش کنیم دیگر به محتویات تازه دسترسی نخواهیم داشت.

چند نکته مهم در هنگام به کارگیری این افزونه

در صورتی که احساس می کنید که محتویات سایت در حال مشاهده قدیمی هست از دکمه reload فایرفاکس استفاده کنید. برای اینکه تمامی محتویات سایت به طور کامل و از ابتدا دریافت شود از ترکیب کلید های ctrl+f5 استفاده کنید.

در تنظیمات پیش فرض این افزونه سایت های ssl دار کش نمی شوند(این سایتها با یک s اضافی مشخص هستند httpS). برای فعال کردن این امکان گزینه Cache secure connections too را از صفحه اصلی تنظیمات این افزونه انتخاب کنید. با این کار شاهد افزایش چشمگیر سرعت gmail خواهید بود. گزینه refresh در gmail هم فراموش نشود.

نکته برای طراحات وبرنامه نویسان وب: برای جلوگیری از ایجاد مشکل در مشاهده صفحات localhost، در لیست Never-cache list مقادیر localhost و 127.0.0.1 رو هم با استفاده از فیلد URL اضافه کنید.

نکته مهم: در صورتی این افزونه به هر دلیلی مانند جلوگیری از نمایش محتویات به روز در سایت های مورد علاقه شما، مشکلاتی را برایتان ایجاد میکند به سادگی میتوان این افزونه را از فایرفاکس حذف کنید.

پ.ن1: انتظار معجزه از این افزونه نداشته باشید. کارایی این افزونه زمانی مشخص تر خواهد بود که از سایتهای مشخصی بارها در طول روز بازدید کنید و یا سایتهایی که تعداد زیادی اسکریپت دارند.

پ.ن2: برای من این افزونه خیلی مفید بود و در مدت یک هفته که دارم ازش استفاده میکنم احساس میکنم که سرعت مرور صفحات بیشتر از گذشته شده.
باشد که لنگر کشتی دیگر نامردی نکند.





دو ویژگی CSS برای زبانهای راست به چپ از جمله فارسی

28 11 2009

اخیرا در ورژن جدید فایرفاکس (3.6) دو مقدار از ویژگی text-align که جزو استاندارد CSS 3 هستند، پشتیبانی شده است. این دو ویژگی از آن جهت می تونه مهم باشه که برای طراحی سایتهایی با پشتیانی هر دو زبانهای راست به چپ و چپ به راست، کار طراح وب رو بسیار آسان می کنه.

این دو مقدار برای ویژگی text-align عبارتند از:

start: تعیین خواهد کرد که متون در سمت آغاز نوشته با توجه به جهت به کار رفته تراز شوند. به عبارت بهتر در صورتی که مقدار direction که به عنصر مورد نظر اعمال می شود برابر با ltr باشه، مقدار start دقیقا همانند left عمل خواهد کرد و متون به سمت چپ تراز خواهند شد. در صورتی هم که مقدار direction برابر با rtl باشد، مقدار start دقیقا همانند right عمل خواهد کرد و متون به سمت راست تراز خواهند شد.

به مثالهای زیر توجه کنید:

<html>
<body style="direction:ltr">
<p style="text-align:start">Left side of page.</p>
</body>
</html>

متن در سمت چپ قرار می گیرد.

<html>
<body style="direction:rtl">
<p style="text-align:start">Right side of page.</p>
</body>
</html>

متن در سمت راست قرار می گیرد.

end: تعیین خواهد کرد که متون در سمت آخر صفحه یا نوشته با توجه به جهت به کار رفته تراز شوند. به عبارت بهتر در صورتی که مقدار direction که به عنصر مورد نظر هاعمال می شود برابر با ltr باش، مقدار end دقیقا همانند right عمل خواهد کرد و متون به سمت راست تراز خواهند شد. برای مقدار rtl نیز عکس این مطلب اعمال خواهد شد.

همانطور که مطمئنن متوجه شدید عملکرد این دو مقدار بستگی به مقدار direction دارد. این مورد باعث خواهد شد که بدون نیاز به نوشتن کدهای اضافی برای css به راحتی مقصود خود رو اعمال کنید.

پشتیبانی مرورگرها از start و end

به علت نسبتا جدید بودن این دو مقدار مرورگرهای کمی از آنها پشتبانی می کنند. در این میان فقط سه مرور Firefox, safari و chrome این دو مورد رو پیاده سازی کرده اند.

مرورگرهای safari و chrome به علت داشتن موتور مشترک Webkit از نسخه 525 به بعد آن پستیانی به عمل می آورند. به عبارت بهتر Safari نسخه 3.1 و chrome نسخه 1
مرورگر Firefox مقدار start رو از نسخه 1 و مقدار end رو از نسخه 3.6 به بعد پیاده سازی کرده است.

اطلاعات بیشتر در مورد text-align





Closure Tools

18 11 2009
Closure Tools

مدتی نزدیک به دو هفته است که گوگل یکی از پروژه های موفق خودش رو که پشت تعدادی از سرویس هایش یعنی Gmail ، Docs و Maps قرار دارد  رو اوپن سورس کرده.

Closure Tools مجوعه ای از ابزار ها است که برای توسعه دهندگان وب در نظر گرفته شده است. این مجوعه شامل موارد زیر است.

Closure Compiler

بهینه ساز یا فشرده ساز کد های جاوا اسکریپت هست. این ابزار با شناسایی کدهای بی استفاده و حذف آنها قوی تر از سایر فشرده ساز ها ظاهر شده. بی جهت نیست که اسم کامپایلر رو انتخاب کردن. این ابزار همچنین کد رو تا حد زیادی فشرده می کنه. این کار با استفاده از تغییر نام متغیرهای داخلی و پارامترها انجام میشه. همچنین امکاناتی مانند بررسی وجود باگ های احتمالی و تشخیص خطاها ،  در کد نویسی صحیح جاوا اسکریپت بسیار کمک خواهد کرد.

برای امتحان این ابزار به صورت آنلاین به اینجا مراجعه کنید:

http://closure-compiler.appspot.com/home

توجه کنید که هیچ یک از لینکها برای ایران باز نخواهد شد و از روشهای معمول برای رفع این مشکل استفاده کنید.

Closure Inspector

یک افزونه فایرفاکس هست که به افزونه Firebug اضافه می شه. کار اصلی این افزونه ایجاد امکان دیباگ کردن کدهای جاوا اسکریپتی که obfuscated شده هستند است. همچنین این ابزار اماکاتی مانند source mapping و stack trace پیشرفته تر و امکان unit test رو به فایرفاکس شما اضافه خواهد کرد.

برای رفع اشکال کد های اکثر سایتها این ابزار یک کارگشای حرفه ای برای شما خواهد بود.

Closure Library

کتابخانه ای استاندارد شده توسط گوگل برای جاوا اسکریپت هست. این کتابختانه امکانات زیادی مانند طراحی رابط کاربر ، unit testing ، کار با rich-text و تبادل داده ها با سرور و غیره رو فراهم می کنه.

برای کار با کتابخانه حتما مستندات اون رو مطالعه کنید.

Closure Templates

ابزار یا فریم ورکی هست که امکان تولید کد های html دینامیک رو فراهم می کنه. این ابزار هم برای Java و هم برای Javascript پیاده سازی شده است. در صورتی که به صورد دینامیک با جاوا اسکریپت ظاهر صحات رو تغییر می دید این قالب ها کار شما رو سریع تر خواهند کرد.





رفع غلط های املایی سایت با Firefox

10 09 2009

در طراحی یک سایت موفق نداشتن غلط املایی در میان حروف خیلی مهم است. تا جایی که ممکنه باعث بشه خواننده رو از وبسایت زده کنه.

در این روشی که معرفی می کنم هیچ کاری لازم نیست انجام بدید فقط کد زیر رو در نوار آدرس سایتتون وارد کنید. توجه کنید که مرورگر باید Firefox باشه (روی opera 10 امتحان کردم و جواب داد):

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

توجه کنید که این کد یک خط هست و به خاطر اینکه در یک خط جا نشده اینطوری نشون داده می شه. با این کار صفحه به طور کامل قابل ویرایش خواهد شد و زیر خطاهای املایی خط کشیده خواهد شد. با کلیک روی این خطاها می تونید لیست عبارات صحیح رو مشاهده کنید.

Firefox Spell Checking Website

Firefox is spell checking a website

در حقیقت این کد تمام صفحه رو در حالت ویرایش قرار میده، در این صورت هست که فایرفاکس و مرورگر های جدید اقدام به یافتم غلط های املایی می کنند.

نکته: برای اینکه این غلط یابی برای فارسی درست کار کنه باید دیکشنری فارسی فایرفاکس رو نصب کنید. اینجا.

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





Firebug 1.4

15 07 2009
Firebug

امروز فایرباگ نسخه 1.4 نهایی منتشر شد. از این نسخه 11 بتا منتشر شده بود.

از جمله ویژگی های این نسخه می توان به تغییر ظاهر آن و افزایش کارایی و همچنین غیر فعال بودن کامل در صورت عدم استفاده ذکر کرد. همچنین تعدادی ویزگی قابل توجه به بخش اشکال زدایی جاوا اسکریپت اضافه شده است.

بخش Net هم اطلاعات مختلف را در قالب های مناسبتری نمایش می دهد. همچنین سعی شده با افزودن کلیدهای میانبر کاربری این افزونه قدرتمند هرچی سریعتر شود.

لیست کلیه تغییرات را در اینجا مطالعه کنید. (برای ایران مسدود است)

دریافت از صفحه Addons

در صورتی که قبلا این افزونه را نصب کرده اید حتما باید فایرفاکس وجود نسخه جدید را به شما اطلاع داده باشد.

نکته: برای استفاده از این نسخه باید حتما از فایرفاکس 3 به بالا استفاده کنید.





Threadها در جاوا اسکریپت

13 03 2009
WebWorker

در جاوا اسکریپت نیز همانند سایر زبانها انجام برخی محاسبات نیاز به زمان زیادی دارد.

همانند کد زیر که رشته فیبوناچی را محاسبه می کند:

function fibonacci(n) {
  if(n == 0)
    return 0;
  if(n == 1)
    return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

در صورتی که این کد را در صفحه وب خود برای محاسبه عدد 35 ام استفاده کنید، در اکثر مرورگر ها صفحه قفل خواهد شد و اگر خوش شانس باشید مرورگر پس از مدتی با پیغامی ادامه عملیات را خواهد پرسید.

برای رفع چنین مشکلاتی در نسخه 3.1 فایرفاکس استاندارد جدیدی با نام web workers و یا به فارسی «کارگر وب» پیاده سازی شده است. این کارگر وب یکی از استاندارد های نهایی نشده کارگزار استانداردهای وب یا WhatWG است که در حال تکمیل موارد آن هستند.
کار اصلی کارگر وب انجام عملیات و دستورات طولانی در یک thread (به فارسی رشته) جداگانه است تا صفحه اصلی بتواند به طور همزمان و بدون قفل شدن به کار خود ادامه بدهد.
به طبع جدا بودن threadهای اصلی و کارگر وب سبب ایجاد تعدادی محدودیت می شود که برای جلوگیری از مشکلات هستند. یک محدودیت اساسی ارتباط داشتن دو thread با هم از طریق پیغام ها است.
همچنین امکان دسترسی و دستکاری اشیاء DOM وجود ندارد (منظور از DOM سرنام عبارت Dodcument Object Model که همان عناصر صفحه است).
و البته امکان استفاده از AJAX یا شیئ XMLHttpRequest وجود دارد.

  • تعدادی از ویژگیهای Web Workers

دسترسی به شیئ navigator در درون کارگر وب که امکان شناسایی مرورگر را می دهد. ویژگی های appName، appVersion، platform و userAgent قابل استفاده هستند.
امکان خاتمه دادن کار کارگر وب با استفاده از دستور terminate .
اسکریپتهای کارگر وب باید در یک فایل جداگانه و در مسیر یکسان از محل اجرای صفحه قرار داشته باشند.
امکان کنترل خطاهای رخ داده در درون کارگر وب با استفاده از رویداد onerror . در درون این رویداد با استفاده از ویژگی preventDefault  میتوان از خطای رخ داده چشم پوشی کرد.
امکان ارسال اعداد، boolean و اشیاء وجود دارد. تنها محدودیت در این زمینه عدم امکان استفاده از توابع و اشیاء ارجاع داده شده به DOM است.

  • نمونه پیاده سازی

در اینجاها نمونه پیاده سازی شده کامل وجود دارد
http://people.mozilla.com/~bturner/weaveworker/weaveDecryptor.html
https://wiki.mozilla.org/DOMWorkerThreads_current

ابتدا باید آخرین نسخه از Firefox را دریافت کنید. در حال حاظر Firefox 3.1 Beta 3 برای دانلود موجود است. لینک دریافت. (نسخه فارسی نیز موجود است)

در صفحه خود باید یک نمونه از شیئ Worker ایجاد کنید. مانند کد زیر:

var webworker = new Worker("workerScript.js");

در این کد به سازنده کلاس اسکریپت workerScript.js ارسال می شود. سپس برای اینکه بتوانیم پیغام ارسالی توسط کارگر را دریافت کنیم باید رویداد onmessage را پیاده سازی کنیم:

webworker.onmessage = function(event) {
	document.getElementById("result").textContent = event.data;
};

این کد در thread اصلی صفحه اجرا خواهد شد پس امکان تغییر اطلاعات DOM وجود دارد. در اینجا فیلدی با نام result تغییر خواهد کرد.
در صورت تمایل می توان OnError را هم برای دریافت خطاهای احتمالی پیاده سازی کرد:

webworker.onerror = function(event) {
	document.getElementById("result").textContent = "Worker error: " + event.data + "n";
};

پیاده سازی فایل اسکریپت workerScript.js
این فایل که در thread جداگانه ای اجرا خواهد شد باید حداقل دارای یک پیاده سازی ار رویداد onmessage باشد تا بتواند کار مورد نظر را درون خود انجام دهد.

onmessage = function(event) {
  var n = parseInt(event.data);

  if (n == 0 || n == 1) {
    postMessage('Hello');
    return;
  }
}

توجه کنید که تعریف رویداد onmessage مستقیما بوده است. این رویداد پس از اجرای postMessage در thread اصلی اجرا خواهد شد. در این رویداد مقدار ورودی آن را بررسی می کنیم و در صورت برقرار بودن شرط پیغامی به صفحه ارسال می شود.

هم اکنون می توان به کارگر وب دستور اجرا را صادر کرد. برای این منظور باید از متد postMessage استفاده کنید. پس از اولین postMessage ارسالی کارگر وب شروع به کار کرده و اجرا می شود.
توجه کنید که این کد را باید در صفحه بنویسید و نه در فایل اسکریپت.
worker.postMessage(10);

منابع
https://developer.mozilla.org/web-tech/2008/09/04/web-workers-part-1/
https://developer.mozilla.org/web-tech/2008/12/04/web-workers-part-2/
https://developer.mozilla.org/web-tech/2009/01/05/web-workers-part-3/
https://wiki.mozilla.org/DOMWorkerThreads
https://wiki.mozilla.org/DOMWorkerThreads_current
http://www.whatwg.org/specs/web-workers/current-work/
http://ajaxian.com/archives/web-workers-update-for-firefox-31





راهنمای سریع و مرجع کامل Html و CSS

10 02 2009
FireScope

FireScope

به تازگی سایت SitePoint مرجعی را برای Html و CSS راه اندازی کرده که در این آدرس قابل دسترس است.

در این مرجع موضوعات به طور دسته بندی شده قرار گرفته اند که امکان یافتن موارد مورد نیاز از Html و Css را آسان میکنه. همچنین توضیحات و نحوه استفاده از هر مورد به طور کامل ذکر شده است. مثالهای دکر شده نیز قابل توجه هستند. قابلیت جستجو هم که جای خود دارد.

نکته مهمی که در رابطه این سایت می توان ذکر کرد، نمایش پشتیبانی مرورگرها از تگ ها و ویژگیهای css است. تیم این سایت کار زیادی را برای تعیین پشتیبانی های مرورگرها انجام داده اند که نتیجه آن قابل توجه هست. حداقل نسخه ای که مرورگر از ویژگی مورد پشتیبانی می کند ذکر شده و در صورتی که موردی به طور ناقص پشتیبانی شود، علت آن نیز ذکر شده است. همه این موارد همراه با استانداردی که تگ یا ویژگی مورد نظر در آن تعریف شده است می باشد.

پشتیبانی نسخه های مختلف از مرورگرهای Firefox , Internet Explorer , Opera , Safari ذکر است.

SitePoint Reference

SitePoint Reference

ویژگی های این سایت مرجع به همین جا خلاصه نمی شه.

ادامهٔ مطلب »