Tween

Rebecca Murphey یکی از افرادیه که در پادکست yayQuery شرکت داره. این پادکست درباره جی‌کوئری و تحولات اون باضافه یه سری بخش‌های اضافه برای معرفی تکنیک‌های جی‌کوئری یا «پلاگین هفته»ست. به هر حال، در آخرین شماره این پادکست کتاب jQuery Fundamentals نوشته ایشون معرفی شد که اون طور که خودش گفت یه گردآوری از کدهای نمونه و آموزش‌های مفید برای یاددهی جی‌کوئریه. یعنی برای آموزش دادن جی‌کوئری.
من کتاب رو نخوندم، ولی «قرار بود» یه دوره کلاس آموزشی جی‌کوئری برگزار کنیم، که اگه کلاس تشکیل شد مطمئنا این کتاب مفید واقع خواهد شد.
داشته باشیدش که کتاب پر از کده. اگه حوصله خوندن متن‌های طولانی رو برای یادگیری جی‌کوئری ندارید پیشنهاد می‌کنم کتاب رو بخونید: کدهای جی‌کوئری خیلی روان و ساده‌اند، بنابراین یادگیریش زمان نمی‌بره.
راستی، وب‌سایت کتاب jqfundamentals.com هست.

در وب‌سایت جدیدی که در حال ساخت هستم، هر یک از محصولات یک صفحه جداگانه در وردپرس دارند. یکی از این محصولات به دلیل تغییرات ظاهری نسبت به بقیه نیاز به قالبی جداگانه داشت. بنابراین برای این صفحه یک Page Template ساختم. مشکل این‌جاست که با افزودن یک صفحه به این سری محصول باز هم نیاز به انتخاب اون قالب هنگام انتشار صفحه‌ست که، در حالتی که بخوایم خود مشتری سایت‌شو مدیریت کنه اصلاً جالب نیست.
راه حل استفاده از این تابع کوچولوئه:

function is_subpage( $iID = null )
	{
		global $post, $wpdb;

		if ( is_page() AND isset( $post->post_parent ) != 0 )
		{
			$aParent = $wpdb->get_row( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE ID = %d AND post_type = 'page' LIMIT 1", $post->post_parent ) );

			if ( is_int( $iID ) > 0 )
				if ( $aParent->ID == $iID ) return true; else return false;
			else
				if ( $aParent->ID )	return true; else return false;

		}
		else
		{
			return false;
		}
	}

این تابع ID صفحه رو به عنوان آرگومان می‌گیره و چک می‌کنه که آیا صفحه فعلی ننه باباش فلان صفحه هست یا نه.
می‌تونیم این کد رو توی page.php بذاریم و بر اون اساس تغییرات مورد نیازمون رو توی قالب ایجاد کنیم.
نمونه استفاده:

if ( is_subpage( 8 ) )
{
  //do something
};

این تابع رو از وب‌سایت WP Recipes گرفتم.

پانویس: از کاربران سیاره وردپرس فارسی پیشاپیش معذرت می‌خوام. فکر می‌کنم با انتشار این پست تمام نوشته‌های شاخه وردپرس‌ام دوباره منتشر بشند.

علت انتشار چندین و چند باره‌ی پست‌های مربوط به وردپرس‌ام در سیاره وردپرس فارسی چیه؟ تا الان دو سه بار این طور شده.

زمان آشنایی من با اینترنت برمی گرده به دوران Popupها، پنجره های لرزان مرورگر و وبلاگ هایی که برای ورود باید اسمتو وارد می کردی و هنگام خروج با نمایش یک alert اصرار داشتن که دوباره برگردی. بنابراین تعجبی نیست که خیلی سریع علاقه م رو به جی اس از دست دادم. در اون زمان عملاً جاوااسکریپت مرده بود. ۲۰۰۵ و کشف ای جکس بود که جاوااسکریپت رو زنده کرد. ولی من بعد از اون هم به سراغ جی اس نرفتم. این بار دلیلش وجود کتابخونه های باحالی مثل jQuery بود.

چیزی که باعث شد شدیدا به جاوااسکریپت علاقه مند بشم دیدن ویدئوهای داگلاس کراکفورد در یاهو بود. مثل کشفی دوباره بود. جی اس اصلاً زبان بدی نیست. در واقع وقتی باهاش آشنا می‌شی متوجه می شی که فوق‌لعاده هم زبان خوبیه (نظر فعلی من؟ جی اس بهترین زبان برنامه نویسی موجوده) و بیشتر بدیش به خاطر شهرت بد و توسری خور بودنشه.

مثلاً یکی این که الان جاوااسکریپت تنها زبانیه که Prototype Based هست. جاوااسکریپت شی گراست. شی گراتر از هر زبان دیگه‌ای. (همه چیز در جاوااسکریپت شی ایه. حتی توابع) ولی هیچ کلاس پلاسی در این زبان وجود نداره.

من فعلاً سرم به مطالعه جاوااسکریپت گرمه ولی بعدها بیشتر راجع بهش صحبت می‌کنیم. فعلاً، برید ویدئوهای داگلاس کراکفورد در تئاتر یاهو رو ببینید:

آموزش جاواسکریپت، از اصول اولیه تا مباحث پیشرفته
جلسه اول: JavaScript The Programming Language
جلسه دوم: An Inconvenient API, The DOM Theory
جلسه سوم: Advanced JavaScript
این سه تا مال سال ۲۰۰۶ اند. جز جلسه سوم، همه مطالب رو به طور مفصل تر در جلساتی که امسال برگزار کرده توضیح داده.

Douglas Crockford on JavaScript
جلسه اول | جلسه دوم | جلسه سوم | جلسه چهارم | جلسه پنجم
جلسه اول این سری عملاً یک کلاس تاریخ تکنولوژیه، بنابراین برای علاقه مندان تاریخ توصیه می شه.

The JSON Saga
داستان JSON و چطوری شد که این طور شد.

JavaScript: The Good Parts
چرا جاوااسکریپت زبان فوق العاده‌ایه؟

داگلاس کتابی هم به اسم JavaScript: The Good Parts نوشته. شدیداً توصیه می‌شه به خصوص که کل کتاب ۱۵۰ صفحه بیشتر نیست.

الان حدود دو ساله که تئاتر یاهو رو دنبال می کنم. من اصولاً jQuery کارم، ولی سعی می کنم سرکی هم تو کتابخونه های دیگه بکشم؛ آشنایی با چندین کتابخانه به شما مزیت انتخاب می ده و این که بفهمید چرا باید این یا اونو استفاده کنید. مخصوصاً از YUI خیلی خوش میاد، یکی این‌که شرکت معظم یاهو پشت کتابخونه‌ست، از CDN یاهو قابل دسترسیه و در ضمن کلی ویدئوی آموزشی داره!

به هر حال، توصیه می کنم سری به تئاتر یاهو بزنید. بیشتر ویدئوها مربوط به کتابخونه YUI هستند ولی چیزهای خیلی خوبی راجع به Frontend Engineering توشون پیدا می شه.

توصیه می کنم اینا رو ببینید:
Nicole Sullivan — Design Fast Websites
Christian Heilmann — YQL and YUI: Building Blocks for Quick Applications
Bill Scott — Designing the Rich Web Experience: Principles and Patterns for Rich Interaction Design on the Web
Nate Koechley — Professional Frontend Engineering
سری آموزش جاوااسکریپت از داگلاس کراکفورد

شما را نمی دونم ولی من ترجیح می دم برای یادگیری یک موضوع یک کتابی رو بردارم و از اول تا تهش رو بخونم تا این که شروع کنم به مطالعه پراکنده راجع به اون موضوع. در حالت اول یه حس اطمینان وجود داره (که چیزی رو جا ننداختی)، و چون منسجم تر هست یادگیری هم ساده تره.

مدت ها بود دلم می خواست XUL («زول» تلفظ می شه) رو یاد بگیرم. خیلی ساده XUL یه زبان مارک آپ مبتنی بر XML برای ساخت اینترفیس هست. موزیلا این رو توسعه داد تا ازش در ساخت فایرفاکس استفاده کنه. در واقع تکنولوژی پشت افزونه های فایرفاکس همین XUL هست. برای کدنویسی هم از جاوااسکریپت استفاده می شه. ولی من اصلاً به ساخت افزونه برای فایرفاکس علاقه مند نیستم (چون نیازی هم بهش ندارم). موزیلا نرم افزاری رو توسعه داد به نام XUL Runner که می شه ازش برای ساخت برنامه تحت سه سیستم عامل با XUL برنامه ساخت.

کاربرد XUL به همین جا ختم نمی شه. مثلاً مدتی قبل Site Fusion معرفی شد که برای ساخت اینترفیس برنامه از همین زول استفاده می کنه (توضیحات بیشتر رو این جا بخونید)

حالا اگه علاقه مندید زول رو یاد بگیرید کتاب Build Your Own FireFox Extension رو از SitePoint رو بگیرید. SitePoint به مناسبت انتشار افزونه CodeBurnerاش (یه افزونه که به فایرباگ می چسبه و مرجع HTML و CSS هست) کتاب رو به رایگان برای دانلود گذاشته. کتاب ۷۰ صفحه بیشتر نیست و خیلی هم خوب نوشته شده. بگیریدش که از دست نره.

برای راه اندازی سایتی چند زبانه که با وردپرس راه اندازی شده بود از WPML استفاده کردم. باید بگم این افزونه بهترین افزونه برای ساخت سایت چندزبانه بوده که تا حالا در هر سیستمی دیدم. تنها مشکلش اینه که با فعال کردنش محیط مدیریت رو می کنه از چپ به راست. در واقع مانع بارگذاری شیوه نامه راست به چپ می شه که یعنی فونت های محیط مدیریت هم به هم می ریزن.

با نگاه به سورس صفحه متوجه شدم که در محیط مدیریت فایل wp-admin/load-style.php با پارامتر dir=ltr فراخوانی شده. بنابراین باید وردپرس رو وادار کنیم dir=rtl باشه.

راه من خیلی تخمیه. ولی کار می کنه. فایل load-style.php رو که باز می کنیم در حول و حوش خط ۱۲۸ یه همچین چیزی می بینیم:
(من از وردپرس ۳٫۰ استفاده می کنم)

	if ( $rtl && isset($style->extra['rtl']) && $style->extra['rtl'] ) {
		$rtl_path = is_bool($style->extra['rtl']) ? str_replace( '.css', '-rtl.css', $path ) : ABSPATH . $style->extra['rtl'];
		$content .= get_file($rtl_path) . "\n";
	}

تنها کاری که من کردم برداشتن شرط بود تا همیشه الحاق فایل rtl انجام بشه.
این ایده خیلی بدیه. پس فردا که آپدیت کردیم این تغییرات می پره. معمولاً در این مواقع از API وردپس برای فیلتر کردن توابع استفاده می کنند تا مجبور به ویرایش مستقیم فایل های وردپرس نشند ولی مشکل این جاست که این تکه کد درون هیچ تابعی نیست!
به هر حال، من آدم تنبلیم، حوصله جستجو برای راه حلو ندارم! همین برداشتن شرط (فعلاً) کار می کنه.

این جا را بخوانید تا باز در این رابطه با هم صحبت کنیم: http://arstechnica.com/web/news/2009/12/commonjs-effort-sets-javascript-on-path-for-world-domination.ars

یک. یه اسکریپت هست برای پشتیبانی از Border-Radius در همه نسخه های IE. فقط باید این رو به فایل CSSتون اضافه کنید:

.round {
behaviour: url('path/to/border-radius.htc');
}

دستور BEHAVIOUR رو تنها IE پشتیبانی می کنه و الباقی مرورگرها ندید می گیرندش.
نحوه کارش به این صورت هست که فایل استایل تون رو برای دستورات border-radius با هر prefixای که زده باشید بررسی می کنه و این گوشه گردی رو به اون عناصر اضافه می کنه.
از این جا بگیریدش: http://code.google.com/p/curved-corner/

دو. تکنیکی هست برای پشتیبانی از RGBA در IE. با فیلتر گرادینت که آشنایید؟ کافیه طیف رنگی که هر دو رنگ مبدا و مقصدش یکی باشند تعریف کنید. چیزی که حتی در مستندات خود مایکروسافت نیومده اینه که این فیلتر از کانال آلفا هم پشتیبانی می کنه. تعریفش به این صورته:

.element {
	background:none;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
	/* #CC000000 is rgba(0,0,0,.80) */
	zoom: 1; /* make sure element has hasLayout */
	position: relative; /* is needed to enable clearType when using filters */
}

ابتدا پس زمینه رو که قبلاً برای مرورگرهای دیگه و با استفاده از RGBA تعریف کردیم رو حذف می کنیم. بعد فیلتر طیف رنگی رو می سازیم. توجه کنید که رنگ های تعریف شده به فرمت هگز و به صورت ARGB هستند.
فیلتر دو بار تعریف شده، یه بار با پیشوند ms که برای مرورگرهای IE8 به بالاست و یه بار بدون پیشوند برای نسخه های ۷ به پایین. اون zoom: 1 هم برای این تعریف شده تا به عنصر خاصیت hasLayout بده. کلاً چیز مهمی نیست.
حالا، استفاده از فیلترها باعث می شه clearType برای اون عناصر غیرفعال بشه، نتیجتاً متون واضح و شفاف نمایش داده نمی شن. برای دوباره فعالیدن این خاصیت باید مقدار position: relative رو به عنصر داد.
واضحه که این دستورات رو باید با تکنیک دلخواه فقط برای IE فعال کرد.
برای تبدیل RGBA به مقدار مشابهش با فرمت هگز و به صورت ARGB، این جا رو ببینید: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
همین. سخت بود؟!

سه. از شیوه نامه های مخصوص IE که با تکنیک Conditional Comment (توضیحات شرطی) ساخته می شن استفاده نکنید!
اینجا: http://www.phpied.com/conditional-comments-block-downloads/
توضیح داده که تعریف شیوه نامه مخصوص IE حتی وقتی اون شیوه نامه برای اون نسخه از IE نباشه باز هم بارگذاری الباقی صفحه رو بلاک می کنه که باعث کند شدن رندر صفحه می شه. این هم از باگ های عجیب IE.

چهار. برای تست طراحی روی نسخه های مختلف IE، پیشنهاد می کنم IE Collection رو امتحان کنید. همراه این شما IE Developer Toolbar رو هم دریافت می کنید، مشابه افزونه Developer Toolbar در فایرفاکس.

اغلب دستورات اضافه شده مثل Box Shadow، GRBA، Gradients، و… به CSS3، امکان تعیین fallback رو دارند. مثلاً برای RGBA می شه این طور نوشت که:
background: #000000;
background: rgba(0,0,0,0.75);
و مرورگرهایی که از RGBA پشتیبانی می کنند دومی رو استفاده می کنند. اگر نه هم که بود و نبودشون به تجربه کاربری لطمه نمی زنه، مثل border-radius یا box-shadow. خیلی هم خوب. اما زمانی هست که مشتریان شما اصرار دارند طراحی در همه مرورگرها کاملاً یکسان نمایش داده بشه. خب، برای همون مثال RGBA، کد بالا رو به این صورت تغییر می دیم:
background: url(images/tran-black.png) repeat;
background: rgba(0,0,0,0.75);
ولی مشکل این جاست که مرورگرهایی که از RGBA پشتیبانی می کنند هم تصویر معرفی شده رو بارگذاری می کنند (کاملاً مطمئن نیستم البته. باید یه جستجویی انجام بدم.) که این به معنی یه درخواست HTTP اضافه و کاهش سرعت سایت هست.
یه کتابخونه جاوااسکریپتی هست به اسم Modernizr که فقط باید بندازیدش داخل کدتون و بعد کلاس هایی رو به صفحه اضافه می کنه که مشخص می کنه آیا فلان ویژگی پشتیبانی می شه یا نه. این کتابخانه بر اساس feauture detection هست نه User-Agent Sniffing یعنی میاد بررسی می کنه ببینم مثلاً border-radius پشتیبانی می شه یا نه، نه این که بگه الان مرورگرمون IE6 هست بنابراین فلان ویژگی هستش یا نیستش.
خب، حالا باید قبل از selectorتون در CSS، کلاس های مربوطه رو اضافه کنید.
اطلاعات بیشتر در وب سایتش: http://www.modernizr.com/