Eloquent JavaScript کتاب رایگان آموزش جاوااسکریپت است که توسط Marijn Haverbeke نوشته شده است. این کتاب که در ابتدا برای ارائه به صورت دیجیتال تهیه شده بود، به صورت نسخه چاپی و kindle نیز موجود است که البته بر خلاف نسخه آنلاین و تعاملی، برای تهیه آن نیاز به پرداخت هزینه است.

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

نسخه رایگان Eloquent JavaScript تحت لیسانس CC 3.0 و به شکل های زیر عرضه شده است:

• نسخه آنلاین و تعاملی که امکان تست کردن کدها و مثال های کتاب و نوشتن کد و تست آن را در اختیار خواننده قرار می دهد
• نسخه HTML قابل دانلود و فشرده شده
• نسخه قابل چاپ بدون ویژگی تعاملی

Post from: PotatoZone

Eloquent JavaScript – کتاب رایگان و تعاملی آموزش جاوااسکریپت

HTML5 فقط تعیین نمی کنه چه چیزهایی در صفحه باشن، HTML5 حتی می‌تونه تعیین کنه چه قسمت‌هایی از مرورگر در اختیار توسعه‌دهنده قرار بگیره. یکی از این قسمت‌ها context menu یا منوی کلیک راست هست.

Chris Heilmann مقاله‌ای برای نشون دادن و آموزش این ویژگی HTML5 منتشر کرده. این مقاله نشون میده چطور میشه با استفاده از HTML،CSS و JavaScript این ویژگی رو به کار گرفت.

دموی منوی کلیک راست رو می‌تونید اینجا ببینید. این دمو از چند قسمت تشکیل شده؛ عکس و متن.

وقتی روی عکس کلیک راست می کنید متوجه ۳ آیتم جدید میشید که قبلا در منو وجود نداشتن. ۲ آیتم با آیکون‌های مربوطه و یه آیتم دیگه که خودش ۲ تا آیتم داره. وقتی روی آیتم rotate کلیک می‌کنید عکس ۹۰ درجه می‌چرخه و وقتی دوباره روش کلیک می‌کنید به حالت قبل برمیگرده. وقتی روی آیتم resize کلیک می‌کنید عکس کوچیک میشه و با کلیک مجدد به اندازه اولیه برمی‌گرده. چطوری این اتفاق میافته؟

با HTML5 منو و آیتم‌ها رو ایجاد می‌کنیم.

کلیک کردن روی این آیتم‌ها تابع متناسب با آیتم رو فراخوانی می‌کنه.

<menuitem label=”rotate” onclick=”rotate()” icon=”arrow_rotate_clockwise.png”>

این تابع، کلاس مربوطه رو به عنصر اضافه و یا ازش حذف می‌کنه.

document.querySelector(‘#menudemo’).classList.toggle(‘rotate’);

توسط CSS خصوصیاتی برای این کلاس‌ها تعریف شده، خصوصیاتی از قبیل rotate، scale، transform و transition که همگی از خصوصیات CSS3 هستند و برای ایجاد انتقال، تغییر شکل، چرخش و تغییر اندازه استفاده میشن.

#menudemo { -moz-transition: 0.2s; width:200px; }

#menudemo.rotate { -moz-transform: rotate(90deg); }

زیر عکس دو تا متن دیده میشه، با انتخاب چند کلمه و کلیک راست کردن روی این متن‌ها و کلیک کردن روی آیتم count words تعداد کلمات انتخاب شده شمرده میشه و به نمایش در میاد. فرق این دو متن چیه؟ اگه چیزی رو انتخاب نکنید و روی متن اول کلیک راست کنید آیتم count words فعاله در حالی که چیزی برای شمرده شدن وجود نداره ولی اگه روی متن دوم کلیک راست کنید آیتم count words غیر فعاله.

این قسمت هم عملکردی مثل قسمت اول(عکس) داره ولی کمی پیچیده تره.

چیزهایی که من نوشتم توضیحات کلی بود، برای دیدن کدها و جزئیات بیشتر مقاله اصلی رو بخونید.

Post from: PotatoZone

پشتیبانی فایرفاکس ۸ از منوی کلیک راست HTML5 + دمو

Jeffrey Way سردبیر Nettuts+ سایتی رو با نام Prefixr راه اندازی کرده که به صورت خودکار پیشوندهای مرورگرها برای خواص CSS3 رو به کد شما اضافه می کنه تا مجبور نشید این خواص رو چند بار کپی کنید و پیشوندها رو اضافه کنید.

استفاده از سایت خیلی راحته، فقط باید کد CSS رو وارد کنید و روی Prefixize کلیک کنید. می تونید از قسمت Exclude پیشوندهایی رو که نمی خواید اضافه بشن رو انتخاب کنید. با انتخاب Compress My Code کد شما فشرده میشه تا حجم کمتری اشغال کنه.

این سایت در حال حاضر آلفا است و ممکنه اشکالاتی داشته باشه. از Recent Updates می تونید آخرین تغییرات سایت رو مشاهده کنید.

استفاده از API

برای استفاده از API در ترمینال دستور زیر رو در وارد کنید:

curl -sSd css=”body { border-radius: 5px; }” http://prefixr.com/api/index.php

به جای کد CSS بالا کد خودتون رو وارد کنید.

توجه داشته باشید که برای اجرای این دستور باید cURL روی کامپیوترتون نصب باشه.

نصب cURL در اوبونتو:

sudo apt-get install curl

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

در صفحه API Usage پلاگین ها و روش استفاده از API در ویرایشگرهای TextMate، Vim، Alfred و Coda قرار داده شده.

روش استفاده از API در gedit

برای استفاده در gedit(ویرایشگر متن گنوم) اول باید پلاگین External Tools رو فعال کنید. برای این کار وارد قسمت Preferences بشید و External Tools رو در تب Plugins تیک بزنید.

از طریق Configure Plugin در قسمت تنظیمات یا با انتخاب Manage External Tools از منوی Tools وارد تنظیمات پلاگین بشید.

می خوایم دو دستور ایجاد کنیم یکی برای Prefixize کردن سند جاری و یکی هم برای Prefixize کردن متن انتخاب شده.

یه دستور جدید ایجاد کنید و اسمش رو بذارید Prefixize Current Document.

دستور زیر رو وارد کنید:

curl -sSd “css=`cat`” “http://prefixr.com/api/index.php”

در قسمت Input سند جاری(Current document) رو برای ورودی انتخاب کنید.

در قسمت Output ایجاد سند جدید(Create new document) رو برای خروجی انتخاب کنید.

می تونید در قسمت Shortcut Key برای این دستور کلید میانبر تعیین کنید. به جای Create new document می تونید Replace current document یا گزینه های دیگه ای متناسب با نیاز خودتون انخاب کنید.

حالا با باز کردن فایل CSS و انتخاب Tools>External Tools>Prefixize Current Document نسخه تغییر یافته فایلتون در سند جدیدی قرار می گیره.

دوباره دستور جدیدی ایجاد کنید و این باز اسمش رو Prefixize Selected Text بذارید و همون دستور قبلی رو وارد کنید.

Current selection رو برای Input و Replace current selection رو برای Output انتخاب کنید.

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

Post from: PotatoZone

Prefixr پیشوندهای مرورگرها را به کدهای CSS3 شما اضافه می کند

Preloaders: این سایت نسبت به دو سایت دیگه از امکانات و تنظیمات بیشتری برخورداره. علاوه بر تغییر رنگ دارای امکاناتی مثل گیف های سه بعدی و متنوع و تنظیمات سرعت و جهت و سایز انیمیشن است.

Ajaxload: فقط دارای تنظیمات تغییر رنگ است.

LoadInfo: دارای امکان تغییر رنگ و سایز.

Post from: PotatoZone

۳ سایت تولیدکننده گیف های متحرک برای لودینگ

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

مثلا اگر وب سایتی طراحی کرده اید یا در حال طراحی هستید و می خواهید آن را با متن ببینید می توانید از Lorem ipsum برای پر کردن قسمت های نوشتاری استفاده کنید تا پیش نمایش و تجسمی بهتر داشته باشید. حال اگر وب سایت شما از قسمتهای تصویری تشکیل شده و نیاز به استفاده از تصاویر در سایزها و رنگ های مختلف دارید می توانید از Dummy Image Generator برای این کار استفاده کنید.

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

تولید تصویر بصورت پیشرفته تر و با گزینه های متفاوت نیز توسط سایت در اختیار قرار گرفته است.

کد Dummy Image Generator به زبان PHP نوشته شده و تحت لیسانس MIT جهت دانلود قرار گرفته است.

دو نمونه وب سایت برای تولید متن Lorem ipsum:

lorem-ipsum.info (امکان تولید متن به چند زبان،انتخاب تعداد پاراگراف و کلمات)

lorem2 (دارای پاراگراف و لیست کوتاه و بلند)

[via lifehacker]

Post from: PotatoZone

Lorem ipsum برای تصاویر: Dummy Image Generator