اولین همایش تخصصی نرم‌افزارهای موبایل و نتیجه من

104 روز قبل نوشته شده ·  برچسب: , · ۳ دیدگاه

یکی از اتفاقات خیلی خوبی که تو وب و دنیای برنامه‌نویسی ایران اتفاق افتاد، برگزاری همایش تخصصی نرم‌افزارهای موبایل بود که در ۱۷ اسفند ۱۳۹۱ برگزار شد.

همایش نرم‌افزارهای موبایل

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

همینطور که (برخی) دوستان و شاید شما بدونید، من برنامه‌نویس بازار بورس ایران هستم و برخی برنامه‌های بورس رو حدود ۲ سال هست که گسترش می‌دم. متاسفانه (یا خوشبختانه) بازار بورس ایران خیلی خیلی از تکنولوژی و ابزارهای بروز دور بود و هست تا جایی که نصب کردن یک انجمن متن‌باز روی یک دومین تونسته عنوان بهترین انجمن بازار مالی و بورس ایران رو در جشنواره وب بگیره، مسخره.

من همیشه از زمانی که وارد این بازار شدم تلاش می‌کردم تکنولوژی‌های جدید رو وارد این بازار و صنعت بکنم و فکر می‌کنم تا جایی که قدرتم می‌رسیده، خوب عمل کردم اما خب بحث‌های امروز واقعا ذهنیت من رو تغییر داد. آمارها خیلی خیلی جذاب و فریبنده بودند.

اینطور شد که من تصمیم گرفتم به عنوان یک Weekend Project برنامه Android و iOSی برای بازار بورس ایران بنویسم، چیزی که الان در حاضر خوب انجام نشده (اگر حتی باشه) و خب وجود داشتن چنین چیزی خیلی به درد مردم خواهد خورد.

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

به جای تمرکز بر روی ابزارها، بر روی مفاهیم تمرکز کنید

114 روز قبل نوشته شده ·  برچسب: , , , · ۶ دیدگاه

چیزی که باید در ترم اول دانشگاه گفته بشه اما بجای گفتن این موضوع، اساتید مستقیم میرن سراغ مطرح کردن کار با پاسکال یا سی‌پلاس‌پلاس (یه ابزار)!

توییت مهدی در مورد همین بحث

یعنی چی؟

اگر شما علاقه دارید که برنامه‌نویس خوبی باشید باید بجای تمرکز بر روی ابزارهایی مانند پی‌اچ‌پی، نودجی‌اس، سی‌شارپ یا… بر روی مفاهیم بزرگترین از برنامه‌نویسی تمرکز کنید. این مفاهیم بزرگ‌تر در تمامی زبان‌ها و تکنولوژی‌هایی که در آینده هم بوجود بیان مشترک خواهند بود (بهتره بگیم رعایت خواهند شد) که در واقع این برگ برنده‌اس.

همیشه ابزارهای زیادی در دنیا بوجود میان و از بین میرن اما تنها مفاهیم اصلی برنامه‌نویسی مانند الگوهای طراحی (Design Pattern) و … بین اون‌ها مشترک خواهد بود.

یه داستان کوتاه

حدود ۹ ماه قبل من بصورت جدی کارم رو با NodeJs شروع کردم، ابزار ساده و کاربردی به نظر میومد ضمن اینکه مردم دنیا خیلی داشتن روش کار می‌کردن و ماژول‌های متنوعی براش نوشته می‌شد که این خیلی خوب بود. لذا تصمیم گرفتم برنامه‌های بعدی‌ام رو با NodeJs شروع کنم تا بیشتر با اون و نحوه کارش آشنا بشم. من فریم‌ورک Express که یک فریم‌ورک برای طراحی MVC وب‌سایت و برنامه‌های تحت وب هست رو انتخاب کردم و شروع کردم به کار باهاش.

همه چی خوب پیش میرفت تا اینکه متوجه یه مسئله دردناک و تلخ شدم و خیلی نا امید شدم! من زمان زیادی گذاشته بودم تا مدیریت جلسه (Session Management) در PHP رو بصورت خوب فرابگیرم (طوطی‌وار) اما چون مفاهیم Express و NodeJs یکم با اون چیزی که در PHP بود فرق داشت، عملا هر کاری کرده بودم از بین رفت. دیگه به درد من نمی‌خوردن و این خیلی برای من بد بود. زمانی زیادی رو از دست داده بودم.

راه حل

از اون به بعد بجای تمرکز کردن بر روی کار با ابزارها، بر روی یاد گرفتن مفاهیم تمرکز کردم. بجای یاد گرفتن Backbone.js بصورت طوطی‌وار و پازلی، مفاهیم اصلی اون مثل MVC یا Store رو یاد گرفتم که بعدا تونستم با تطبیق دادن همون مفاهیم، از اون‌ها در ExtJs استفاده کنم. حس خیلی خوبی بود و احساس می‌کردم اگر در آینده هم تکنولوژی جدیدی بیاد حداقل کمتر چیزی رو از دست می‌دم و می‌تونم از بخشی از چیزهایی که قبلا یاد گرفته بودم استفاده کنم.

نتیجه

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

کارگاه، آموزش جدیدترین تکنولوژی‌های برنامه‌نویسی

124 روز قبل نوشته شده ·  برچسب: , , · یک دیدگاه

مدتی قبل افتخار این رو داشتم که به تیم آموزشی کارگاه، به عنوان مدرس Socket.IO اضافه بشم. به نظر من کارگاه جزو یکی از بهترین حرکت‌‌ها در محیط وب و برنامه‌نویسی ایران خواهد بود چراکه تمرکزش روی آموزش آخرین تکنولوژی‌های موجود در دنیاست، نه فقط یه سری آموزش‌های تکراری و قدیمی. من این دوره‌ها رو شدیدا به کسانی که علاقه به پیشرفت و بروز بودن در زمینه برنامه‌نویسی دارن، پیشنهاد می‌کنم. این ایده بسیار قشنگ کار استاد من، آقای مهدی تقی‌زاده است.

ما فقط آموزش نمی دهیم، سعی می کنیم شما را حرفه ای کنیم.

logo kargah

هدف کارگاه چیست؟

هدف اصلی کارگاه آموزش و برگزاری دوره‌های برنامه‌نویسی هست، اما دوره‌های پیشرفته و خاص. برای مثال آموزش Backbone.js، NodeJs یا HTML5 که همگی جزو جدیدترین تکنولوژی‌های موجود در دنیا  هستند و بسیار بسیار کاربردی.

چطور ثبت‌نام کنیم؟

توسط سایت خود کارگاه می‌تونید این کار رو انجام بدین: kargah.co

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

این وب‌سایت خوشگل کار کیه؟

لوگوی خیلی قشنگ کارگاه، کار دوست عزیزم آقای آرش اصغری و طراحی و پیاده‌سازی وب‌سایت کار دوست و استاد عزیزم سالار کابلی هست که فکر نمی‌کنم لازم باشه در موردشون توضیح بیشتری ارائه کنم!

راز حلقه‌های بی‌نهایت در پاسخ‌های جیمیل چیست؟

128 روز قبل نوشته شده ·  برچسب: , , , , , · ۴ دیدگاه

جیمیل در پاسخ‌های XHRی که به سمت کلاینت‌ها ارسال می‌کنه، همیشه یک حلقه بی‌نهایت while قرار میده (داستان هک شدن جیمیل) که ذهن برخی برنامه‌نویس‌های وب رو مشغول خودش کرده، چرا جیمیل باید چنین کاری رو انجام بده؟ من یک سوال جالب تو سایت stackoverflow پیدا کردم که شخصی دقیقا همین رو پرسیده بود و الان من میخوام بصورت خلاصه دلیل این کار رو توضیح بدم.

مشکل چیه؟

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

نحوه انجام شدن درخواست و پاسخ توسط هکر

نحوه انجام شدن درخواست و پاسخ توسط هکر

بسیار خوب، قبلا در مورد اینکه کسی از روی هر وب‌سایتی نتونه درخواست XHR به یک وب‌سایت دیگه ایجاد کنه فکری شده. برای مثال شما امروزه نمی‌تونید زمانی که کاربر وارد وب‌سایت شما میشه، یک درخواست XHR یا Ajax به یک وب‌سایت دیگه مثلا جیمیل ایجاد کنید و خطای زیر رو دریافت می‌کنید:

خطای Cross Domain AJAX

خطای Cross Domain AJAX

و دریافت این خطا به این دلیل هست که شما تلاش می‌کنید از روی یک دامنه دیگر (مثلا در اینجا sarkh.at) به یک دامنه دیگر در خارج از وب‌سایت (مثلا mail.google.com) درخواست Ajax بزنید و به این ترتیب درخواست با دریافت خطا متوقف می‌شود (برای توضیح بیشتر این سوال رو مطالعه بفرمایید)

اما مسئله‌ای که باید به اون توجه بشه این هست که این محدودیت فقط برای درخواست‌های Ajax هست و درخواست‌هایی که مثلا توسط iframe یا تگ‌های img و script ایجاد می‌شن شامل دریافت این خطا نمی‌شن، برای همین هست که شما می‌تونید از وب‌سایتتون، عکسی که خارج از وب‌سایت قرار داره رو فراخوانی کنید.

حالا اگر هکر بجای ایجاد یک درخواست XHR، یک تگ script ایجاد که و همون آدرس رو وارد کنه، پاسخ به درستی و بدون مشکل دریافت خواهد شد. مثلا من چنین کدی رو ایجاد کنم:


 

همه چیز درست کار می‌کنه و پاسخ دریافت میشه اما من خطای جاوا اسکریپت می‌گیرم چون فایل واقعا یک کد جاوا اسکریپت نیست حالا فرض کنید ما یک صفحه رو پیدا کنیم (مثلا صفحه لیست contactها در جیمیل) که پاسخ اون JSON هست. عالیه، الان اگر درخواست با تگ script ایجاد بشه، پاسخ از جیمیل دریافت میشه و می‌شه اطلاعاتی که توسط تگ script دریافت میشه رو دزدید.

اشاره می‌کنم به اینکه شما می‌تونید اطلاعات موجود در یک درخواست JSON رو بدزدید توسط یک سری روش‌ها (این مطلب کامل رو مطالعه کنید) برای مثال در (بعضی) نسخه‌های مرورگرها مشکلی هست که به شما اجازه میده constructor موجودات کلی در مرورگر رو override کنید، مثلا Array رو که نتیجه میشه چنین کدی:


 

خب حالا با روش معرفی شده، حتی اگر مرورگرها جلوی درخواست XHR به یک دامنه دیگر رو بگیرند، شما می‌تونید توسط ایجاد تگ script، اطلاعات هدف رو خیلی قشنگ بخونید.

دزدیدن اطلاعات توسط JSON Hijacking

دزدیدن اطلاعات توسط JSON Hijacking

راه حل؟

خب به هر حال راه حلی هم برای این مشکل موجود هست، شما می‌تونید خیلی راحت اول پاسخ‌هاتون یک حلقه بی‌نهایت قرار بدین، اینطوری قبل از اینکه هکر بخواد کد شما رو پردازش کنه و اطلاعات رو بدزده، وارد این حلقه بی‌نهایت میشه و اطلاعات بعدی شما به دست اون نخواهد رسید! این دقیقا کاری هست که جیمیل برای محافظت از لیست contactهای شما می‌کنه:

 

پاسخ جیمیل به لیست contactها

پاسخ جیمیل به لیست contactها

روش‌های مشابهی هم استفاده میشه، مثلا throw کردن یک exception در اول پاسخ و… که همه یک هدف رو دنبال می‌کنند.

در مورد اینکه شما در وب‌سایت خودتون چطور می‌تونید یک حلقه بی‌نهایت رو حذف کنید باید بگم که چون شما در وب‌سایت خودتون قرار دارید (دامنه‌ها یکی هستند) می‌تونید درخواست Ajax ایجاد کنید و سپس به راحتی توسط توابع جای‌گزینی متن یا replace اون حلقه بی‌نهایت رو حذف کنید و بقیه اطلاعات رو به درستی پردازش و استفاده کنید، در واقع شما قدرت pre-process دارید که هکر اون رو نداره.

حالا اگر یکم به اطراف خودمون بهتر دقت کنیم میبینیم که خیلی‌ها هنوز این مشکل رو دارند! ;)

منابع:

در کار با jQuery، راست به چپ فکر کنید

137 روز قبل نوشته شده ·  برچسب: , , , · ۶ دیدگاه

ذهن انسان در هنگام پردازش متون، از چپ به راست (در زبان‌های چپ به راست، مثل انگلیسی) فکر می‌کنه و جمله‌ها و متن‌ها رو پردازش می‌کنه در حالی که اکثر موتورهای پردازش selectorها در جاوا اسکریپت (موتور Sizzle و حتی querySelectorAll) این کار رو برعکس انجام می‌دهند، یعنی از راست به چپ. این یک نکته مهم هست که طراح‌های وب بباید بدونن برای ایجاد کردن برنامه‌های بهتر و سریع‌تر و چون فکر می‌کنم ۹۰٪ اون‌ها هنوز این راز مهم رو نمی‌دونن (بر اساس یه نظرسنجی کوچیک!)، لذا من تصمیم گرفتم خیلی خلاصه و مفید این نکته رو توضیح بدم.

پردازش از راست به چپ یعنی چی؟

حالت زیر رو در نظر بگیرید:

همینطور که مشاهده می‌کنید ما در این کد قصد داریم تمامی پاراگراف‌های موجود (تگ p) در کلاس box را دریافت کنیم. خب وقتی ما شروع می‌کنیم به خوندن این قطعه کد، توقع داریم کد به این صورت رفتار کنه:

۱- ابتدا تمامی المنت‌های صفحه با کلاس box رو دریافت کنه.

۲- حالا تمامی پاراگراف‌های موجود (تگ p) واقع در کلاس‌های box رو بگیره.

اما در حقیقت اینطور نیست و جی‌کوئری (در حقیقت موتور sizzle) اینطور رفتار نمی‌کنه. جی‌کوئری در حقیقت اینطور رفتار می‌کنه:

۱- تمامی تگ‌های p صفحه دریافت میشه.

۲- اون سری از تگ‌های p که در کلاس box قرار دارن گرفته و فیلتر میشن.

و اینطور شما نتیجه نهایی رو خواهید داشت، یعنی تمامی تگ‌های p واقع در المنت با کلاس box در صفحه.

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

راه حل؟

راه حل این مشکل خیلی ساده‌اس. خوشبختانه کتابخانه jQuery چند تابع به نام‌های find و children رو معرفی کرده که توسط اون‌ها می‌تونید یک سری المنت که زیر مجموعه یک المنت بزرگتر (پدر) هستند رو دریافت کنید. کار این دو تابع بصورت خیلی خلاصه اینه که ابتدا شما می‌تونید یک چیز رو از روی صفحه انتخاب کنید (مثلا کلاس box) و سپس بهش بگید که تمام موجودات و المنت‌های زیر مجموعه اون رو برای شما فیلتر کنه. مثال این کد رو می‌تونید اینجا ببینید:

راه حل پیشنهادی برای این مشکل استفاده از دو تابع معرفی شده در کد بالاست. حالا این کد کد چطور برخورد می‌کنه؟ توابع children و find دقیقا چپ به راست کار می‌کنند یعنی ابتدا المنت سمت چپ کد را دریافت کرده و سپس المنت‌ها و موجودات معرفی شده در بخش راست کد رو از میگیرن یعنی اگر بخوام کدهای بالا رو تحلیل کنیم اینطور میشه:

۱- ابتدا تمامی المنت‌ها با کلاس box از صفحه دریافت میشه.

۲- بعد تگ‌های موجود در المنت با کلاس box خونده می‌شن.

که این خیلی به بهتر شده و سرعت برنامه کمک خواهد کرد چرا که فقط و فقط تگ‌های pیی از صفحه خونده می‌شن که ما اون‌ها رو می‌خواهیم، نه همه تگ‌های p. این رو اضافه کنم که در دو تابع children و find عملکرد نسبتا مشابهی دارن اما تابع find بر روی برخی مرورگرها سریع‌تر و بهتر عمل می‌کنه.

خودتان آزمایش کنید!

برای اثبات این ادعا می‌خوام شما رو تشویق کنم که این تست رو در سایت jsPerf انجام بدین. توسط این تست متوجه سرعت عملکرد سه تابع معرفی شده میشین:

نتیجه تست انواع selectorها در jQuery

زیاد نگران نباشید

بخشی که باید در آخر بهش اشاره کنم اینه که لازم نیست شما زیاد نگران این نوع بهینه‌سازی‌ها باشید چرا که موتورهای پردازش selector مانند Sizzle (که jQuery از آن بهره می‌برد) خودش برخی از selectorها رو بهینه می‌کنه و شاید زیاد نیازی به بهینه‌سازی خود برنامه‌نویس نباشه (تاکید کنم، نه همیشه) اما اینکه بدونیم پشت همه این کتابخانه‌ها چه اتفاقی میوفته میتونه خیلی جالب و مفید باشه :)

بخش‌هایی از مقاله برگرفته شده از:

تلویزیون سرطان است

143 روز قبل نوشته شده ·  برچسب: , , , · ۸ دیدگاه

این دومین نوشته غیرفنی من تو این وبلاگ هست و یکم متفاوت‌تر از چیزهایی که تا الان اینجا بوده.

مدتی هست که تو هر جمعی می‌رم علمی‌ترین صحبت‌ها در مورد سریال‌های تلویزیونی هست! دیدی دیشب فلانی چیکار کرد؟ دیدی دیشب با اون ازدواج کرد؟ دیدی دیشب حامله شد؟ دیدی …

و چند روز قبل که وارد یک جمع کاملا مهندسی شدم، یکی از مهندسین همون جمع ازم پرسید که مهندس دیدی دیشب فلانی از فلانی طلاق گرفت؟ گفتم چی؟ با تعجب گفت مگه اون سریال رو شما نمیبینی؟!!

اینطور شد که تصمیم گرفتم یه مطلب غیرفنی خیلی کوتاه بنویسم در مورد اینکه آیا واقعا به این توجه کردیم که تماشا کردن و پیگیری کردن این سریال‌های مسخره کل زندگی ما رو پر کرده؟ آیا به این توجه می‌کنیم که عمرمون داره میره و ما فقط با تماشا کردن این فیلم‌ها و سریال‌های تلویزیونی داریم اون رو هدر میدیم؟

تلویزیون سرطان است

تلویزیون سرطان است

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

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

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

یه حساب کتاب ساده:

هر روز ۱ ساعت زمان برای مطالعه

هر ۱ ساعت مطالعه، حدودا ۳۰ صفحه کتاب

هر ماه، ۳۰ روز و هر سال، ۱۲ ماه است

۱ × ۳۰ × ۱۲ × ۳۰ = حدودا ۱۰۰۰۰ صفحه و معادل ۵۰ کتاب

واقعا نمیشه روزانه ۱ ساعت به مطالعه اختصاص بدیم؟! در مورد هر چیزی که دوست داریم نه یه مطلب یا کتاب خاص، در مورد مطالب تخصصی رشته خودمون حتی. آیا به این توجه کردیم که همین سریال‌هایی که هر شب تماشا می‌کنیم، حدودا ۲ ساعت هستن؟!

طلویذیون صرتان است چون آدم‌ها رو بی‌صواد می‌کنه و غدرط فکر کردن رو از اون‌ها میگیره!

تلویزیون را از بین ببرید!

 

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

فقط در آخر این رو هم اضافه کنم که این مطلب رو میشه برای شبکه‌های اجتماعی مخصوصا فیس‌بوک بسط داد!

و عذر می‌خوام که در مورد رشته‌/بخشی که تخصص من نیست نظر دادم اما من از اینکه می‌بینم خانواده من، دوستان من و هر کسی که اطرافم هست هر شب سریال‌های چرند و بی سر و تهی رو نگاه می‌کنه واقعا نگران هستم و امیدوارم این مطلب حداقل به بعضی‌ها کمک بکنه و اگر شما هم با من هم عقیده هستید، این مطلب رو به اشتراک بگذارید.

چطور همیشه مخزن Git خودمان را بروز نگه داریم؟

152 روز قبل نوشته شده ·  برچسب: , , , , · بدون دیدگاه

اگر شما در یک پروژه فعالیت می‌کنید که تغییرات در اون زیاد هست، احتمالا دائما احتیاج به بروز رسانی مخزن Git خودتون خواهد داشت. من می‌خوام خیلی ساده توضیح بدم چطور میشه مخزن Git رو به آخرین نسخه موجود در مخزن اصلی رسوند. این نکته رو اضافه کنم که تمام آموزش‌ها قابل استفاده در Github هم هستند.

خیلی راحت این مراحل رو انجام بدین. فرض می‌کنیم که ما یک مخزن بر روی گیت هاب داریم به آدرس git://github.com/master/upstream.git که در واقع مخزن اصلی هست که ما اون رو fork کردیم، حالا وارد فولدر مخزن در دستگاه خودتون بشید و دستور زیر رو وارد کنید در ترمینال:

git remote add upstream git://github.com/master/upstream.git

توسط این دستور ما upstream رو تعریف کردیم که اشاره می‌کنه به مخزن اصلی کد. دوباره تاکید می‌کنم،‌ این آدرس باید آدرس گیت مخزن اصلی باشه که در حقیقت ما اون رو fork کردیم.

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

git fetch upstream
git rebase upstream/master

حالا مخزن شما، به آخرین نسخه موجود در مخزن اصلی بروز شده. اگر مشکلی در فراید merge کردن به وجود بیاد می‌تونید خیلی راحت با ابزارهای مرتبط اون‌ها رو برطرف کنید.

تشکر از مقاله بسیار خوب Dan Croak در مورد بروزرسانی مخازن گیت.

یک مخزن تمیز داشته باشید، Travis-CI چیست؟

159 روز قبل نوشته شده ·  برچسب: , , , , , , · ۶ دیدگاه

همیشه در گسترش و ادامه دادن پروژه‌های بزرگ (و حتی کوچک) این نگرانی وجود داره که مثلا اگر چند نفر روی مخزن اصلی همیشه در حال کامیت کردن و ارسال تغییرات هستند، ممکن هست یکی بر اثر یک اشتباه کوچیک (که اکثرا اتفاق میوفته) باعث بشه بخشی از کد از کار بیوفته یا یک امکان که قبلا در سیستم اضافه شده بوده از بین بره و دچار مشکل بشه. البته برخی راه کارها برای حل این مشکل هست مثل Git یا بهتر بگم استفاده از Distributed Source Controlها اما آیا برای یک تیم ۲۰۰۰ نفری، آیا امکان بررسی تک تک کدهای گسترش‌دهندگان هست؟ در عمل‌، خیر!

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

سرویس Travis یک ابزار رایگان برای Continuous Integration هست  که به شما این امکان رو میده که به مخزن گیت‌هاب (فقط گیت‌هاب) وصل بشه و بصورت خودکار، بعد از هر تغییر در مخزن، آخرین نسخه کد رو دریافت کنه و اقدام به اجرا و راه‌اندازی تست‌های پروژه بکنه و اگر هر مشکلی در اجرا کردن تست‌ها به وجود بیاد، بلافاصله یک ایمیل به شما می‌زنه و شما رو از اجرا نشدن و بروز خطا در مخزن مطلع ‌می‌کنه.

TravisCI

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

به عنوان یک مثال ساده از این سرویس، می‌تونید وضعیت کد PersianJs رو در این لینک مشاهده کنید.

در پست بعدی نحوه تنظیم و اتصال یک مخزن گیت‌هاب به سرویس Travis رو به طور کامل توضیح خواهم داد.

کار با CSS3 Transition آسان‌تر می‌شود، MotionJs چیست؟

201 روز قبل نوشته شده ·  برچسب: , , , , , , , · ۵ دیدگاه

مدتی قبل که در حال انجام یک پروژه وب بودم، نیاز شد که با CSS3 Transition یک سری انیمیشن تهیه کنم. از طرفی نگرانی برای اجرا شدن این انیمیشن‌ها بر روی تمام مرورگرها (مدرن) وجود داشت لذا مجبور بودم بررسی‌ها و شرط‌های زیادی رو انجام بدم. همه این‌ها همراه شد با اینکه کارفرما در انیمیشن یک تغییر خیلی کلی ایجاد کرد و من مجبور شدم کد CSSی که نوشته بودم رو مجددا باز نویسی کنم و این رو هم حتما در نظر دارید که تغییر و در واقع نگهداری کدهای CSS چقدر سخته!

بعد از اینکه اون پروژه تموم شد به این فکر افتادم که اگر یک کتابخانه JavaScript وجود داشته باشه که برای من انیمیشن‌های CSS3 رو ایجاد کنه  خیلی خوب میشه، هم می‌تونم شرط‌ها و کنترل‌های بهتری روی برنامه ایجاد شده داشته باشم (برای مثال ایجاد if، timer یا loop) و هم اینکه نگهداری و تغییر در کد یا برنامه ایجاد شده خیلی آسان‌تر خواهد شد چراکه به زبان JavaScript نوشته شده. در ضمن پیچیدگی مدیریت مرورگرهای مختلف یا ایجاد دستورات CSS مرتبط با مرورگر افراد هم توی این کتابخانه مدیریت بشه.

بعد از کمی تحقیق متوجه شدم که قبلا افرادی تلاش کردن این کار رو انجام بدن اما یا پروژه متوقف شده یا انقدر بزرگ و پیچیده هستن اون پروژه‌های که الان دارن گسترش پیدا می‌کنن که استفاده کردن از اون‌ها آدم رو به وحشت می‌ندازه!

من MotionJs رو ایجاد کردم که در واقع یک پروژه متن‌باز (تیم usabli.ca) تحت لایسنس MIT هست که هدفش ایجاد یک بستر مناسب و آسان برای نوشتن انیمیشن‌های CSS3 هست. این کتابخانه به زبان JavaScript نوشته شده و در حال حاضر نسخه ۰٫۲ هست که هنوز باید کامل‌تر بشه.


لوگوی MotionJs
 

در نسخه فعلی MotionJs بعد از بررسی نسخه و مرورگر کاربر و اتخاذ بهترین حالت برای ایجاد انیمیشن، امکان ایجاد Transition برای تمامی propertyها (مثلا opacity، background-color و…) وجود دارد ضمن اینکه برای هر Transition می‌توان یک callback معرفی کرد تا زمانی که Transition مربوطه به پایان رسید اون تابع صدا زده بشه. در حقیقت یک callback برای زمانی که Transition کامل انجام میشه.

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

تمام کاری که ما در این مثال انجام می‌دیم اینه که اول یک عنصر با شناسه hello_world رو انتخاب می‌کنیم (MotionJs تمامی CSS Selectorها را می‌فهمد) و بعد در مدت زمان ۴ ثانیه فاصله از بالا (top) رو به ۲۰۰px و شفافیت عنصر انتخاب شده رو به ۱ تغییر می‌دهیم. بعد از اتمام انیمیشن تابع معرفی شده در end اجرا خواهد شد و پیغام End of transition نیز نمایش داده می‌شود. این یک مثال بود که در مخزن MotionJs روی Github هم هست.

به همین راحتی یک انیمیشن CSS3 ایجاد کردیم که بر روی تمامی مرورگرها (مدرن) نمایش داده خواهد شد.

چند ویژگی مهم هست در مورد ‌این کتابخانه که لازم می‌بینم اشاره کنم بهشون:

۱- کم حجم، سبک و سریع.

۲- بدون هیچ وابستگی به کتابخانه دیگه، فقط جاوا اسکریپت.

۳- چندمرورگری یا Cross-Browser

۴- متن‌باز، تحت لایسنس MIT.

به دلیل اینکه MotionJs هنوز دوران جوانی خودش رو طی می‌کنه و الان نسخه ۰٫۲ هست، فعلا تصمیم گرفتم فقط اون رو معرفی کنم و صبر کنم تا نسخه ۰٫۵ که به یک ثبات قابل توجه برسه، بعد از اون یک صفحه رسمی (و حتی شاید یک دامنه مخصوص) براش تهیه می‌کنم و آموزش‌های کامل استفاده ازش رو اونجا قرار می‌دهم.

در حال حاضر تمامی کدها به همراه نمونه‌های طراحی شده (که هر روز هم بیشتر می‌شن) بر روی مخزن Github ما قرار دارد و هر کسی می‌تونه کدها (نسخه فعلی ۰٫۲ هست) رو دانلود و بررسی کنه

آدرس مخزن: https://github.com/usablica/motion.js

خوشحال می‌شیم اگر به تیم گسترش‌دهندگان MotionJs بپیوندید :)

با NodeJs و Socket.IO یک چت مبتنی بر وب بسازید

242 روز قبل نوشته شده ·  برچسب: , , , , , · ۶ دیدگاه

همین‌طور که در مطالب قبلی توضیح دادم، Socket.IO یک راه‌حل مناسب برای پیاه‌سازی برنامه‌های real-time مبتی بر وب است که توسط تکنولوژی NodeJs کار می‌کنه. در این مطلب من قصد دارم نحوه کار با Socket.IO رو توضیح بدم. شما در آخر این مطلب (اگر خوب بخونیدش :دی) می‌تونید برنامه‌های real-time بسیار زیبا/کارایی بسازید که حتی روی Internet Explorer 6 و گوشی‌های موبایل هم کار می‌کنه!

در مورد زبان‌هایی که در این مطلب صحبت می‌شه باید بگم که زبان سرور و کلاینت، هر دو، JavaScript هستند و ما تا آخر این مطلب فقط در مورد این زبان و کمی هم HTML صحبت خواهیم کرد. تمامی سورس‌هایی که در این مطلب کار میشه، بر روی گیت‌هاب این پروژه هست و می‌تونید از اون‌ها استفاده کنید.

خب فکر می‌کنم بهتره بریم سر اصل مطلب. کاری که قراره ما انجام بدیم ایجاد یک چت روم ساده‌اس که افراد وارد اون می‌شن و می‌تونن با هم صحبت کنن، پیغام بفرستن و… .

فقط برای اینکه بهتر بتونید مطلب رو مطالعه کنید و درک اون راحت‌تر بشه، یک شکل خیلی ساده از نحوه ارتباط کلاینت‌ها با سرور رو می‌تونید ببینید:


ساختار ارتباطی کلاینت‌ها با سرور در Socket.IO / NodeJs

برای بزرگ شدن عکس روی آن کلیک کنید


خب همینطور که می‌بینید، socket.io ما در واقعا همون NodeJs ما هست که روی یک پورت خاص اجرا خواهد شد. علاوه بر این، ما دو کد مجزا خواهیم داشت، کد سرور که وظیفه ارسال و دریافت پیغام از کاربران رو داره و یک کد کلاینت که بر روی مرورگر کاربران ما اجرا خواهد شد.

در زبان JavaScript و همینطور NodeJs، اکثر فعالیت‌هایی که انجام میدیم توسط یه سری رویداد یا Event انجام خواهد شد. مثلا این رویدادها رو در نظر بگیرید:
۱- وصل شدن یک کاربر جدید به سرور
۲- قطع شدن کاربر از سرور
۳- پیغام جدید از کاربر
و…

به کمک خاصیت Event-Based بودن NodeJs و این رویدادها، می‌تونیم برنامه چت خودمون رو کامل کنیم.

کد سرور ما فقط ۱۰ خط خواهد بود. تمام کاری که این کد انجام می‌ده نگهداری آخرین پیغام‌ها، دریافت پیغام از کاربران و ارسال اون به همه کاربران آنلاین دیگه و در نهایت حذف کردن یک کاربر در صورت بستن مرورگر (یا در حالت کلی قطع شدن ارتباطش با سرور) از لیست کاربران آنلاین هست.

دو رویداد بسیار مهم در socket.io، رویداد اتصال یک کاربر جدید و قطع شدن یک کاربر هست که به ترتیب با نام‌های connection و disconnect با اون‌ها میشه کار کرد.

کد زیر مربوط به سرور چت هست:

در کد بالا، ما اول به رویداد connection گوش می‌کنیم و به محض وصل شدن یک کاربر جدید، به دو رویداد disconnect (برای زمان قطع شدن ارتباط) و message (برای زمانی که کاربر پیغام جدیدی ارسال می‌کند) هم گوش می‌دیم تا زمانی که اون رویداد برای ما ارسال بشه. آرایه‌ای به نام buffer لیست ۱۵ پیغام‌ آخر ارسال شده توسط کاربران را نگهداری می‌کنه و هنگامی که کاربر جدیدی به سرور ما وصل می‌شه، آرایه برای اون هم ارسال می‌شه.

برای اجرا کردن سرور، باید NodeJs به همراه بسته socket.io بر روی سیستم ما نصب باشه. NodeJs رو می‌تونید از این آدرس دانلود کنید، بعد از نصب به Command Prompt/Terminal برید و دستور زیر رو تایپ کنید:

npm install socket.io

این دستور آخرین نسخه socket.io رو برای شما نصب می‌کنه. بعد از اینکه با موفقیت همه‌چی انجام شد می‌تونید سرور رو اجرا کنید. کد server.js رو می‌شه اینطوری اجرا کرد:

node server.js

حالا باید سرور چت شما روی پورت ۳۰۰۰ اجرا بشه. شما باید خروجی مشابه تصویر زیر رو داشته باشید:



حالا می‌رسیم به کد سمت کاربر یا کلاینت. این کد وظیفه وصل شدن و ارسال و دریافت پیغام رو داره.

همینطور که می‌بینید این کد هم خیلی ساده به سه رویداد message، announcement و history گوش می‌کنه. این‌ها در حقیقت رویدادهایی هستند که خود ما از روی سرور اون‌ها رو ارسال می‌کنیم به کاربرها، حالا اینطرف، روی کلاینت به این رویدادها گوش می‌کنیم و بعد از دریافت کردن اون رویداد و اطلاعات مربوطه، فعالیت مرتبط با اون رویداد رو انجام می‌دیم (مثلا اضافه کردن پیغام به لیست)

در آخر باید بگم که حتما به این مخزن روی گیت‌هاب سر بزنید چون تمام کد بر روی این مخزن وجود دارد: https://github.com/afshinm/socket.io-chat-server

سوال، نظر،‌ پیشنهاد!

مطالب قدیمی‌تر