چرا باید از Tailwind استفاده نکنیم؟

آرین شاه‌عالمی — Fri, 11 Feb 2022 19:46:10 +0330

مشکلات فریمورک Tailwind CSSاگر چندسالی در دنیای Front-end فعالیت داشتید حتما متوجه شدید که روند تغییرات چقدر در این حوزه سریعه. وقتی شروع کردم به یادگیری فرانت‌-اند همچنان از بعضی‌تگ‌های HTML استفاده میشد برای استایل‌دهی مثل table (هنوز فلکس پشتیبانی نمیشد) بعد کم‌کم JQuery ترند شد و چقدر با ذوق و اشتیاق ازش تعریف میکردیم که آی چقدر traverse کردن بین المنتا راحته و سلکت کردنشون فلانه و بهمان. اونم کم کم رفت و جاشو داد دوباره به pure JS. باز بعدش فرانت‌-اند فریمورک‌‌هایی مثل Angular, React, Vue اومدند و الانم که دارم این مقاله رو مینویسم این فریمورک‌ها هم کم کم دارن جایگاهشونو از دست میدن و Web Assembly و Web Components دارن جاشونو میگیرن. این مقدمه طولانی رو نوشتم که بگم آقا دنیای فرانت‌، دنیایی هستش که یکچیزی ترند میشه و میره، دل‌نبندین که تهش تلخیه. حالا چه ربطی به Tailwind داشت؟؟ اینقدر که تو کامیونیتی‌‌ بیخود از این فریمورک‌ تعریف میشه (ترند شده) و بزرگش میکنن برای هر چیزی ازش استفاده میکنن بدون اینکه بدونن use case اش چیه.*اگه میخوای بری سراغ اصل مطلب این تاریخچه و معرفی Tailwind رو نخونAtomic CSSپایه اساس همه این Utility-first CSS frameworks مثل Tailwind یک پردایم جدید در css بعنوان Atomic هست. کلیتش چی میگه این پردایم؟ همه چی از یک مقاله ساده که آقای Koblentz نوشت شروع شد که اومده بود best practice ‌های CSS رو به چالش کشیده بود و رویکرد functional رو ارائه کرد که بعد‌ها به Atomic معروف شد. این رویکرد میگه بجای استفاده از کلاس‌های کلی برای یک کامپوننت از کلاس‌های کوچک که فقط یک وظیفه دارند استفاده کنیم. برای مثال: یک اسنیپت کد به روش semantic کد HTML مربوط به semantic cssدر قطعه کد بالا ما به روش قدیمی semantic کد CSS رو زدیم که یک باکس محصولات هست و اگر داخلش المنتی به نام title هم باشه اونم استایل میده. آقای Koblentz این روشو دیس کرده (منطقی هم هست حرفاش) و رویکرد Atomic رو معرفی کرد که همون دیزاین بالا رو به شکلی دیگه پیاده‌سازی کرده: همونطور که میبینید ما کلی Utility Class داریم که یکبار تعریف کردیم و چندجا استفاده میکنیم. در واقع ذره ذره شکل میدیم المنت رو (atomic). اصل مطلبتو این لیست تجربیات استفاده از Tailwind رو بازگو میکنم :این فریمورک DRY رو عملی کرده: فریمورک Tailwind ادعا میکنه که رویکرد DRY مخفف (don't repeat yourself) رو در CSS پیاده سازی کرده و باعث شده که برای مثال بجای اینکه تو ده‌تا کمپوننت display:flex رو تعریف کنی یکبار اونو تعریف کنی و تو چند کمپوننت استفاده کنی. ولی اینو نمیگه که بجای تکرار شدن تو CSS توی HTML اسم کلاسش چندبار باید مصرف شه :))زیر پا گذاشتن اصل Separation of Concerns:بخشی از کتاب css masteryتو این عکس، نویسنده، یک سایت قدیمی رو مثال زده که برای استایل دادن وبسایت مجبور شده از المنت‌های HTML استفاده کنه (مثل استفاده از تگ‌‌های و و ). نویسنده در ادامه اشاره میکنه هدف از ایجاد شدن CSS، جدا کردن محتوا و ساختار از مبانی بصری و نمایشی است.To separate content and presentationفریمورک Tailwind دقیقا داره خلاف این اصل عمل میکنه. شما وقتی کلی کلاس داری توی HTML ات دیگه عملا اومدی presentation هارو ریختی تو contentها. در بهترین حالت میشه اینلاین استایل درنظرش گرفت. سند HTML به‌شدت ناخوانایک‌وقت فکر نکنین این کدو یکی از شاگردایِ خبرهِ محسن مدحج زده‌ها. نه!! این کد رو از صفحه Home وبسایت رسمی Tailwind برداشتم. یک کد خیلی تیپیکال از نظر تیل وایندی‌ها :) حالا فرض کنید سورس کدی بهتون میدن که کلی از این المنت‌ها داره. دیگه فایل CSS رو نمیخونین. باید بری تک تک کلاسای HTML اش رو بخونی تا متوجه شی این المنت چیه؟، چه شکلیه؟، چیکار میکنه؟، با hover شدن روش چی‌کار میشه؟، تو حالت ریپانسیو چی‌کار میشه؟ و...ناسازگار با JavaScriptبزرگترین موردی که بهش برخوردم، وقتی بود که میخواستم با کلیک روی یک المنت یک وضعیتی بهش بدم. مثلا کلاس active بدم به اون المنت. در حالت معمولی یک کلاس active مینوشتم که توش برای مثال 1- قطر border المنت رو 2 پیکسل بیشتر میکردم2- رنگ border المنت رو عوض میکردم3- یک transform: translateY(2px) به المنت میدادم4- بک گراند المنت رو سبز میکردم5- color المنت از مشکی به سفید تغییر میدادم6- یک box-shadow هم روش اعمال میکردمبعد با کلیک روی المنت، کلاس active بهش اینجکت میشد. حالا تو Tailwind شما نابود میشی اینو پیاده‌سازی کنی. یک همچین چیزی در میاد اگه Tailwind رو کاستومایز کرده باشید.همونطور که مشاهده میکنید Tailwind نه تنها کد HTML شما رو ناخوانا میکنه، کد JS تون هم خیلی بزرگ میکنه. در آینده هم بخواد حالت active کدمون عوض شه باید بریم سراغ کد JS و اونو تغییر بدیم. ولی در حالت اول فقط لازمه فایل CSS عوض شه. البته Tailwind حالتی داره که بشه یک custom class بنویسی با استفاده از @apply ولی توی محیط توسعه ما ممکن بود ما بخوایم بعدا سوییچ کنیم روی فریمورک دیگه‌ای و اگه Tailwind حذف میشد دیگه نمیشد از apply استفاده کنیم. به شما هم پیشنهاد میکنم تاجایی که امکان داره ازش استفاده نکنین حتی خود داکیومنت Tailwind اونو old school حسابش میکنه.امکان استفاده از ارث بری در CSS نیست!!چون داریم همه چیزو به Tailwind میسپاریم توی تعریف کلاس‌ها دیگه نمیتونیم یکی از ابزار قدرتمند CSS یعنی ارث بری استفاده کنیم که خودش باعث ایجاد duplication در کد میشه. برای مثال:استفاده از ارث بریتو اینجا همه title های درون card ، یک استایل دارند و ما یکبار براش کلاس تعریف کردیم و تو چند المنت استفاده میکنیم. title هایی که بیرون از card استفاده شدن استایل متفاوتی دارند. پیاده‌سازی همین کد رو میریم در Tailwind داشته باشیم. ببینید که چقدر باعث داپلیکیشن میشه و چقدر ارث بری css مفیده.با هر بار استفاده از المنت ‌h3 باید کل کلاس‌هاشو دوباره تکرار کنیمنتیجه‌گیری: فریمورک Tailwind علارغم تمام امکانات دوست‌ ‌داشتنی که ارائه میده، اونقدر کارو برای من سخت کرد که فکر نکنم دیگه برای هیچ پروژه بزرگ یا در حال توسعه‌ای بخوام استفادش کنم.خیلی‌‌هارو میبینم بدون اینکه حتی یکبار ازش استفاده کرده باشن دارن صرفا با ارجاع به داکیمونتش پروموت میکنن (از حق نگذریم واقعا وب‌سایت و داکیومنت زیبایی داره). خلاصه که در به‌کار بردن Tailwind محتاط باشید.

این SQL چیه؟

آرین شاه‌عالمی — Tue, 06 Aug 2019 15:23:40 +0430
در این سری پست‌ها میخوام درباره SQL، تاریخچش و موارد استفادش صحبت کنم. این سری شامل سه بخش هست که فعلا بخش یکشو آماده کردم. لینک بخش دوم هم زمانی که آماده شد به اول همین پست اضافه میکنم.اس کیو ال چیه؟? تلفظ: این تلفظ SQL هنوز یک بحث داغ هستش و برنامه نویسا فعلا سرش به یک نتیجه نرسیدن . منم در جایگاهی نیستم که اظهار نظر کنم. فقط تاریخچه رو میگم خودتون تصمیم بگیرید که تو کدوم جبهه اید. در ابتدا خالق این زبون اسمشو SEQUEL گذاشت و اونو سیکوئل [ˈsiːkwəl] تلفظ میکرد ولی بعد چند وقت به علت تشابه نامش با یک شرکت هواپیمایی مجبور شدند اسمشو عوض کنند به SQL. پس تلفظش هم باید با تغییر نامش عوض میشد، ولی نشد. رِدموندی‌ها (برو بچ مایکروسافتی) هنوز اونو سیکوئل تلفظ میکنند. ولی برنامه نویسایی که از لینوکس اومدند چون My SQL رو مای اِس کیو اِل تلفظ میکردند این رو هم اِس کیو اِل تلفظ میکنند. به هر حال هر دوش درسته ولی اِس کیو اِل، تلفظی رسمی تر و شناخته تر هستش. در ادامه کلیپی داریم از آقامون بیل گیتس که SQL رو سیکوئل تلفظ میکنه. https://www.aparat.com/v/uMEPd ? داده و پایگاه‌داده: قبل از اینکه بپردازیم به تعریف SQL، باید به درک درستی از مفهوم داده و پایگاه‌داده برسیم. خب حالا داده چیه؟ بخوام ساده بگم، داده‌ها، اطلاعاتی هستن مرتبط به یک چیز. برای مثال نام، قد، رنگِ پوست و وزنتون اطلاعاتی هستن مرتبط به شما. حالا ممکنه بپرسید خب پایگاه‌داده پس چیه؟ همونطور که از اسمش پیداست پایگاه‌داده جایی هستش که اطلاعات شما به صورت سیستماتیک و منظم نگهداری میشه. اطلاعات طوری در ستون ها و ردیف های یک جدول نظم داده شده که بشه راحت پیداشون کرد. یک مثال ساده از دیتابیس یا همون پایگاه‌داده میتونه دفتر تلفن خونتون باشه(اگه هنوز نسلش منقرض نشده باشه). تو دفتر تلفنتون اطلاعات (مخاطبین و نامشون) ذخیره شده و بر اساس نام مخاطبین از الف تا ی مرتب شده. دیتابیس هم همینه ولی ممکنه چندین ستون داشته باشه. یعنی ممکنه هم شماره مخاطبین رو داشته باشه هم شغلشون رو. همونطور که اطلاعات در دفتر تلفن بر اساس نام خانوادگی مخاطبین از الف تا ی مرتب شده در دیتابیس (پایگاه‌داده) هم اطلاعات مرتب میشه ولی هر جور که شما بخواین مثلا بر اساس شمارشون، شغلشون، نامشون و نام خانوادگیشون.?چیه این SQL بلاخره؟ بریم سر اصل‌ مطلب. اون دفتر تلفن مثال قبلی یادتونه؟ حالا چجوری باید بهش یکنفرو اضافه کنیم، حذف کنیم یا شمارشو تغییر بدیم. اینجاست که SQL به دادتون میرسه. زبان ساختارمند پرسش‌ها (فکر کنم حداد عادل ترجمش کرده) کارش همینه. در واقع دیتابیس یا همون پایگاه‌داده که نمیتونی با خودکار برداری توش چیزی بنویسی یا غلط گیریش کنی و تغییرش بدی، باید با یک زبونی باهاش صحبت کنی. اون زبون SQL هستش. بخوام خیلی ساده بگم SQL زبانی هستش مشترک بین برنامه‌نویسا و پایگاه‌داده‌ ها که برنامه نویسارو قادر میسازه بتونن در دیتابیس داده ای رو اضافه، حذف، بازخوانی و ویرایش کنند.? چرا SQL ؟ تمام پایگاه‌داده های رابطه ای (در یک پست مفصل درباره انواع پایگاه داده صحبت میکنم) مثل My SQL, SQL Server, Oracle, Informix و Postgres علارغم تفاوت‌هایی که باهم دارند در یک چیز مشترکند. اونم زبان مورد استفادشونه که SQL هستش. در واقع اکثر پایگاه‌داده‌های رابطه ای از SQL بعنوان زبان استاندارد برای تعامل استفاده میکنند. SQL با داشتن امکانات زیر به محبوب‌ترین زبان بین دیتابیس های رابطه‌ای تبدیل شده.ایجاد امکانات برای دسترسی کاربر به اطلاعات، بازخوانی و حذف آنترسیم داده‌هافراهم ساختن امکانات برای تغییر در وضعیت داده‌هافراهم ساختن امکانات برای ایجاد و دراپ (حذف) دیتابیسها و تیبل ها (جدول)فراهم ساختن امکانات برای ایجاد پراسیجر های پیچیدهو در نهایت ایجاد دسترسی های متعدد ? رایجترین دستورها در SQLپرکاربرد‌ترین دستورات SQL? بخش اول اینجا به پایان میرسه. بخش دوم به محض اینکه آماده شه تو صفحه اینستاگرامم به صورت تصویری قرار میگیره. اگه دوست داشتین با دنبال کردنش از اون صفحه هم حمایت کنید.

معماری MVC که میگن یعنی چی؟

آرین شاه‌عالمی — Fri, 26 Jul 2019 15:56:41 +0430
معماری MVC? مقدمهقبلا رویکرد برنامه نویسی سنتی به این صورت بود: دریافت داده --> پردازش اطلاعات --> جواب ولی به مرور زمان و با پیچیده شدن برنامه‌ها دیگه این رویکرد جواب نمیداد. در رویکرد سنتی کدهای فرانت-اند، کدهایی که مسئولیتشون پردازش اطلاعات بود و داده های برنامه، همگی در یک فایل نوشته میشدند که باعث میشد تست پذیری، گسترش و نگهداری برنامه و کدها خیلی سخت بشن. اما با ظهور ‌MVC این مشکلات حل شد. MVC مخفف سه واژه Model, View و Controller هستش. اصلی‌ترین کار MVC جدا کردن مسئولیت بخش‌ها و کم کردن وابستگی بین اونهاست. یعنی بجای اینکه بیایم برنامه رو به روش بالا جدا کنیم، میایم بر اساس نقشی که دارند جداشون میکنیم. بخش اول داده‌ها(Data)، بخش دوم پردازش(Logic) و در نهایت بخش سوم ظاهر (UI).? مدل: Model مهمترین بخش یک برنامه در معماری MVC هستش. مدل ساختار و پایه یک برنامه رو مشخص میکنه. از وظایف مهم مدل میشه به ایجاد ارتباط با پایگاه داده، جواب دادن به درخواست اطلاعات، تغییر در داده های ذخیره شده و حتی نوتیفای کردن آبزرورها در سیستم های رویداد محور، یاد کرد. مدل همچنین در اعتبارسنجی داده‌ها هم نقش مهمی بازی میکنه. نکته مهم این است که این بخش از اتفاقاتی که در بخش های Controller و View می افتد هیچ اطلاعی ندارد. این بخش به دنبال پاسخ از دیگر بخش ها نیست و معمولا بخش های دیگه به مدل وابستگی مستقیم دارند. در کل میشه وظیفه مدل را به سه قسمت عمده اعتبار سنجی، نگهداری و ویرایش اطلاعات برنامه خلاصه کرد.? کنترلر: Controller کنترلر مانند یک رابط بین مدل و ویو برنامه هستش. بیشتر تصمیم‌گیری‌ها و لاجیک نرم‌افزار در کنترلرهای برنامه اتفاق میفته. این بخش در تعامل با Model و View میتواند جریان اطلاعاتی برنامه رو کنترل کنه. وظایف کنترلر شامل دریافت درخواست‌ها، پردازش اونها و پاسخ دادن بهشون هست. برای مثال وقتی شما روی یک لینک کلیک میکنید، وظیفه کنترلر هستش که تعیین کنه با کلیک رو اون لینک قراره چه اتفاقاتی بیفته و برنامه چه پاسخی بهش بده. کنترلر هستش که تعیین میکنه که یک ویو باید چه مدلی دریافت کنه و به نمایش بزارتش.?ویو: هر چیزی که یوزرهای برنامه باهاش در ارتباط هستند و تعامل انجام میدند میشه ویو. ویو معمولا نقطه پایانی یک برنامه طلقی میشه. چرا نقطه پایانی؟ چون همیشه دارای نتایج عملیات هستش. برای مثال وقتی شما تو مرورگر اسم سایتی رو وارد میکنید، یک درخواست به کنترلر میدید. اون کنترلر درخواست رو پردازش میکنه و سپس اطلاعات مورد نظرشو از مدل میگیره و در نهایت اطلاعات رو به ویو میده تا نمایش بده. در واقع ویو وظیفش نشون دادن اطلاعاتی هستش که کنترلر از مدل درخواست کرده. به ویو Presentation Layer هم میگند. ویو رو در برنامه های تحت وب با زبان های HTML ، CSS و JS مینویسند. ویو کاری به منطق برنامه نداره و فقط یک Model دریافت می کنه (اونم کنترلر تعیین میکنه چه مدلی دریافت کنه) و اونو به هر شکلی که نیاز باشه به کاربر نشون میده. ویو‌ها نباید لاجیک (منطق) داشته باشن اگر هم داشته باشن باید ساده و مختصر باشه. ?معماری MVC و ساندویچی!!ُبرای اینکه ساختار MVC خوب براتون جا بیفته یک مثال از ساندویچی میارم. فرض کنید شما (یوزر) میری ساندویچیِ حسین کثیف و منو رو میخونی. اینم منوشون هستش:منویِ ساندویچیشما هوس مرغ کردی، پس پیشخدمت (Controller) رو صدا میزنی و یک ساندویچ مرغِ سه نون با سس اضافه سفارش میدید. پیشخدمت (Controller) میره پشت صندوق و به حسین آقا (Model) میگه که یک ساندویچ مرغ سفارش داده شده.(حسین آقا اهمیت نمیده کی مرغ سفارش داده. اون فقط میدونه که باید یک ساندویچ مرغ درست کنه.) حسین آقا (Model) میره پشت اجاقش جایی که همه چیز اونجا فراهمه. مثل روغن، نون، مرغ، نمک، سوسیس، کره و...حسین آقا (مدل) بسته به درخواستی که پیشخدمت (کنترلر) از شما (یوزر) دریافت کرده مواد رو باهم میکس میکنه ویک ساندویچ مرغ تحویل پیشخدمت میده. حالا شما ساندویچ خودتو (ویو) رو با تمام محتویات درخواستیت تحویل میگیری از پیشخدمت. تو این مثال ما سه بخش مهم داشتیم:? اولی: پیشخدمت که همون کنترلر هستش و وظیفش ایجاد ارتباط بین ویو و مدل (مشتری و حسین آقا) هستش.? دومی: حسین آقا که همون مدل هستش که مسئولیتش نگهداری اطلاعات (مرغ، نون، روغن و...) و تحویل میکس شده اونا به کنترلر هستش. (در واقع نگهداری از مواد اولیه یا همون اطلاعات وظیفه دیتابیس هستش نه حسین آقا که مدله ولی بخاطر پیوستگی مطلب، درباره پایگاه‌داده صحبت نمیکنم).? سوم: ساندویچ مرغ یا همون ویو هستش که نتیجه نهایی کار هستش.این تصویر روشن تر میکنه داستان رو:معماری MVC و نحوه عمکرد آنبا دنبال کردن صفحه اینستاگرام من این مطالب رو به صورت تصویری و یک هفته زود‌تر دریافت کنید.

چند قدم ساده در جهت افزایش سرعت سایت

آرین شاه‌عالمی — Fri, 21 Jun 2019 12:35:26 +0430
افزایش سرعت سایتسرعت بارگذاری وبسایت یکی از مهم ترین ویژگی های یک وبسایت محسوب میشه. طی تحقیقاتی که اخیرا انجام شده، ۴۷ درصد بازدیدکنندگان سایت انتظار دارند سایت شما در ۲ ثانیه یا کمتر بارگذاری شود. اگر مدت زمان بارگذاری سایت بیش از ۳ ثانیه شود، ۴۰ درصد از کاربران، سایت شما را ترک می‌کنند. همچنین وبسایت هایی که سرعت بارگذاری بهتری دارند مورد توجه موتور های جستجو قرار میگیرند و طبق الگوریتم کافئینِ گوگل احتمال اینکه در صفحه اول جستجوها قرار بگیرند بیشتر میشه. بهترین زمان بارگذاری سایت کمتر از ۳ ثانیه است و بر اساس گزارش های دریافتی گوگل اکثر وبسایت ها نزدیک به این معیار نیستند. بهبود عملکرد بارگذاری سایت به دو قسمت عمده تقسیم میشه. فرانت-اند و بک-اند. در این سری، میخوام درباره بهبود عملکرد فرانت-اند صحبت کنم.? کاهش درخواست های HTTPتا جایی که میتونید درخواست های HTTP سایتتون رو کم کنید. برای مثال اگر ۳تا فایل CSS و 5تا فایلJS دارید. تمام فایل های CSS رو به یک فایل و تمام فایل های SJ رو در یک فایل دیگه مینیفای کنید. مینیفای کردن یعنی فشرده کردن و کم کردن حجم فایل که معمولا شامل حذف اسپیس های کد، خطوط جدید و کامنت ها میشه. هر اسپیس یک بیت فضا میگیره و اگه در یک فایل HTMLیا CSS بخواید حساب کنید مقدار زیادی اسپیس دارید که فضای الکی میگیره. سایت های زیادی هستن که به صورت رایگان مینیفای میکنند. فقط لازمه سرچ کنید CSS Minifier. در اسلاید بعد نحوه استفاده از ابزار توسعه دهندگانِ مرورگرِ فایرفاکس برای مدیریت HTTP Request هارو آموزش میدم. البته اینم بگم مرورگر کروم هم این امکانات رو داره ولی من با فایرفاکس راحت ترم.?استفاده از ابزار توسعه دهندگانسربرگ Network در قسمت ابزار توسعه دهندگان مرورگر فایرفاکسهمونطور که در عکس بالا میبینید، بیشترین مدت زمان باگذاری المنت های یک وبسایت، به عکس هاش تعلق داره. پس سعی کنید عکس های خودتونو فشرده سازی کنید که حجم زیادی نگیرن. برای همین منظور ابزارهای زیادی هستش که میتونید استفاده کنید. اولیش ابزار آنلاین هستش مثل سایت های Compressjpeg.com و Compressor.io که عکستونو اونجا آپلود میکنید و فشردشو دریافت میکنید. یکی دیگه از ابزار مفید، همین فتوشاپ هستش. محصول قدرتمند ادوبی که عکستونو باهاش ویرایش و برای استفاده در وبسایتتون بهینش میکنید.یک فوت استادی هم بهتون بگم. برای آیکون و لوگوی وبسایت‌تون از عکس با فرمت SVG، برای عکس های معمولی از فرمتJPG و برای عکس های متحرک از GIF استفاده کنید.? استفاده از CSS Criticalحتما از این ابزار استفاده کنید. ولی قبلش باید مفهوم above-the-fold رو متوجه شید.above-the-fold یا above-the-scroll content به بخشی از سایت میگن که وقتی یک یوزر وارد سایت میشه اولین چیزی هست که میبینه و باید تکمیل شه تا به کاربر القا کنه سایت لود شده. حالا css ای که وظیفش استایل دادن همین بخش مهم هست اسمش critical CSS هست. این ابزارم استفادش اینه که بیاد اون بخش از سایتو تشخصی بده و اولویت رو اونا قرار بده. بعدش بیاد css اون قسمتو لود کنه تا کاربر حس کنه سایت بالا اومده.? استفاده از کتابخانه های فرانت-انداین موضوع رو همیشه به برنامه نویسای دیگه پیشنهاد میکنم که اگر میخواید سرعت سایتتون واقعا عالی باشه از کتابخونه و فریمورکی استفاده نکنید. شاید این ابزار سرعت توسعه رو بالا ببرند و هزینه رو پایین بیارند ولی تاثیر روی پرفُرمنس سایت دارن. هر عاملی بین کد خام شما و مرورگر باشه سرعت رو کم میکنه. کد خام چیه؟ مرورگر ها کلا سه زبان بیشتر نمیفهمند. CSS , JS و HTML به کدی که به این زبونا نوشته شده باشه میگن خام. پس اگه از جیکوئری استفاده میکنید شما دارین یک لایه بین خودتون و کد خام ایجاد میکنید و هزینه اینکار، کاهش پرفورمنس سایت هستش. برای اثبات حرفم، یکسری به سایت Vanilla-js.com بزنید. اونجا اومده سرعت جاوا اسکریپت(vanilla JS) رو با چندتا فریمورک و کتابخونه دیگه مقایسه کرده نتایج جالبه. من یکیشو با اجازه کپی کردم تو عکس پایینی :)مقایسه عملکرد جاوا اسکریپت با چند کتابخونه و فریمورک دیگه? ختم کلامفرانت و بک-اند هر دو به‌طور برابری تاثیر بر سرعت بارگذاری سایت دارن. ولی من تو این پست سعی کردم درباره مهم ترین راهکار های افزایش سرعت بارگذاری سایت در فرانت-اند صحبت کنم. چون خیلی‌ها اونو نادیده میگیرند در حالی که بعضی موقع‌ها واقعا سرعت بارگذاری رو بین 3 تا 5 ثانیه کندتر میکنه پس حتما جدیش بگیرید. من قطعا در پست های بعدی درباره راهکار های بک-اند مثل کش کردن سایت، استفاده از پرتوکل های مختلف، پیکربندی سرور،‌ استفاده از CDN ها و... صحبت میکنم. تا اون موقع فعلا این نکات رو روی سایتتون اعمال کنید و ببینید سرعت بارگذاری سایتتون چقدر تغییر میکنه. بدرود ? اگر دوست دارید مطالب نوشتاری اینجارو به صورت تصویری و یک هفته زود‌تر دریافت کنید، میتونید پیج آکولاد باز رو در اینستاگرام را دنبال کنید.

آبجکت یا کلاس مسئله اینست.

آرین شاه‌عالمی — Wed, 08 May 2019 02:03:17 +0430
فرق آبجکت و کلاس دیروز بعنوان مشاور، داشتم با برنامه نویس ارشد یک شرکت صحبت میکردم درباره قسمتی از کد. توی صحبت های ایشون متوجه شدم که یکسره بجای گفتن آبجکت از کلاس استفاده میکنند. البته این اولین بار نبود که همچین اتفاقی میفته، چند بار دیگه هم از دهن افراد حرفه ای شنیدم. اینم بگم این افراد واقعا وارد بودند و دانش شون کم نبود. فکر میکنم یک اشتباست که بین خیلی از برنامه نویسا رایجه. یک آموزش هم از ماش همدانی توی سایت Udemy دیدم که اونجا هم اون توضیح میده که خیلیا این دو کلمه رو اشتباهاً به جای هم استفاده میکنند پس تصمیم گرفتم یک پست دربارش بنویسم که هم به برنامه نویسای حرفه ای یاداوری کنم اینارو بجای هم استفاده نکنند. هم به افراد تازه کار توضیح بدم آبجکت و کلاس چیه و فرق شون باهم چیه.تعریف کلاس:کلاس نقشه مشترک برای گروهی از اشیاء است. کلاس قالبی هست برای ایجاد شیء (آبجکت) که مقادیر اولیه شیء را تعیین و رفتار های آن را جهت میدهد.خیلی گنگ و نامفهومه نه؟ ادامه بدید به خوندن...اگه یکی ازتون بپرسه ماشین چیه؟ احتمالا ماشینو اینطوری توصیف میکنید:“یک جعبه هستش روی چند تا چرخ که عامل حرکتش یک موتوره و کارشم بردن شما از یک نقطه ای به نقطه دیگست. ”مغز شما اینطوری کار میکنه. یعنی میاد برای فهم اشیا و به خاطر سپردن‌شون،1- ویژگی ها‍‌شونو ( جعبه ای شکل بودن و چرخ داشتن) 2- کارهایی که میتونن بکنن (جا به جا شدن و بوق زدن)رو کنارهم میزاره. کلاس هم دقیقا همین کارو میکنه. میاد خصوصیات و کارهایی که یک چیز میتونه انجام بده رو تعیین و نگهداری میکنه.آبجکت(شیء) چیه حالا؟یک کارخونه ماشین سازی رو فرض کنید که چندتا طراح ماشین داره. برای اینکه این افراد بتونن یک ماشین طراحی کنند باید از یک لیست و دستور العمل که مدیر شرکت بهشون داده پیروی کنند. این لیست میگه تمام ماشینا باید دارای یکسری *خصوصیات شامل نام، چرخ، سیستم روشنایی و رنگ باشند. همچنین باید بتونن *کارهایی شامل گاز دادن، ترمز گرفتن، بوق زدن رو انجام بدن. اون لیست که مدیر نوشته، تو دنیای برنامه نویسی بهش میگن کلاس و ماشین هایی که اون طراحا بر اساس این لیست طراحی کردن میشه آبجکت (شیء). حالا یک طراح میاد چراغارو لیزری میزاره یکی دیگه میره LED میزاره. یک طراح میره دوتا در خفاشی میزاره یکی میاد چهارتا در ساده میزاره. یکی میره ماشینو آبی میکنه یکی زرد.مهم اینه که همشون باید رنگ، چراغ، و چرخ داشته باشند. همشونم باید بتونن گاز بدن، ترمز بگیرن و بوق بزنن.فرق بین آبجکت و کلاس* کار: Behavior * خصوصیات: Propertiesامیدوارم این پست بهتون کمک کرده باشه یک برداشت ساده از این دو مفهوم داشته باشید. در پست بعدی میخوام درباره آبجکت اورینتیشن یا همون شیء گرایی صحبت کنم. در واقع این مقدمه ای برای اون پست هستش.? با دنبال کردن صفحه اینستاگرام من میتونید به این محتوا به صورت تصویری دست پیدا کنید. من معمولا یک هفته زود تر پستمو اول اونجا میزارم.

ایراد‌‌‌‎‎‎‌هایی از جاوا اسکریپت که همه نمیدونند

آرین شاه‌عالمی — Fri, 26 Apr 2019 14:54:07 +0430
ایراد های زبان جاوا اسکریپتبرنامه نوشتن با جاوا اسکریپت جوریه که انگار یک هزار تو خودت درست کرده باشی و توش گم بشی.ــــ مایقن هاوربک? مختصری درباره جاوا اسکریپتخب جاوا اسکریپتو دیگه همه برنامه نویسا میشناسند منم نمیخوام دوباره براتون معرفیش کنم. فقط یک تاریخچه کوتاه میگمو میگذریم ازش. در سال ۱۹۹۵ شرکت Netscape Communication از جناب برندن آیک خواست با الگو گیری از زبان های پایتون، جاوا و اسکیم زبانی ایجاد کنه که داخل مرورگرش (در دهه نود میلادی مرورگر این شرکت، نتسکیپ نویگیتر، محبوب ترین مرورگر دنیا بود) استفاده کنه. ایشونم در می همون سال این زبانو اختراع میکنه و اسمشو میزاره موکا (آره همونی که تو منوی کافیشاپاست سر تلفظ اسمشم همیشه دعواست). بعد ها در نسخه بعدی همون مرورگر، اسمش میشه لایو اسکریپت ولی چون اسمش خیلی گمراه کننده نبود، در دسامبر همون سال تغییر نام پیدا میکنه به جاوا اسکریپت که بشدت مورد انتقاد قرار میگیره بابت تشابه اسمی با جاوا.?عدم وجود عدد صحیحآره درست شنیدید. در جاوا اسکریپت ما چیزی تحت عنوان عدد صحیح نداریم. در واقع این زبان یک نوع داده عددی داره اونم فلوت (float) هستش. به عبارتی دیگه جاوا اسکریپت داده نوع اینتیجر نداره. ممکنه با خودتون بگید خوب نداشته باشه مگه چی میشه؟ به این کد توجه کنید.نبود عدد صحیح در جاوا اسکریپتتازه این که خوبه. اوضاع خراب تر میشه وقتی شما یک چیز شرطی داشته باشی و در اون بخوای دوتا عددو با هم مقایسه کنی مثلا :عملکرد ضعیف این زبان در کار با اعداد صحیح? تبدیل اجبارییکی دیگه از ویژگی های خوب این زبان اینه که بدون این که چیزی بگه برمیداره نوع داده رو تغییر میده. تبدیل اجباری یعنی تغییر نوع داده در اثر یک عمل. برای مثال متغیر a یک رشته است و متغیر b از نوع عددی. وقتی اینارو از هم کم کنیم چی میشه؟؟تبدیل اجباری در جاوا اسکریپت جاوا اسکریپت در اینجا میاد داده a که رشته است رو به زور تبدیل به عدد میکنه و اونو منهای متغیر b میکنه. طبیعتا در بیشتر زبان های برنامه نویسی کامپایلر گیر میده و میگه نمیتونم استرینگ رو منهای عدد کنم ولی جاوا اسکریپت اوکی هستش :) ? جواب ۲۲ میشه. یک اشتباه تایپی هست.? متغیر در سطح کلییکی دیگه از ایرادات این زبان بی ایراد اینه که در حالت پیشفرض تمام متغیر هاش کلی (global) هستن که یکسری مشکلات درست میکنه که من مهماش رو اینجا میگم.متغیر ها به صورت پیشفرض سطح دسترسی کلی دارند.فضایی که هر متغیر در مموری میگیره دیگه پاک نمیشه. مگه اینکه خودتون دستی اون فضا رو پاک کنید که کدتونو خیلی سنگین میکنه. ممکنه یک نام متغیر رو دوبار به کار ببرید در کدتون که اونم باعث میشه مقادریشون هم پوشانی پیدا کنه. یا اینکه یک کتابخونه به سایتتون اضافه میکنید که اونم از همون اسم متغیر شما برای متغیرش استفاده کرده باشه که منجرب به یک فاجعه میشه. یکسره باید از کلمه کلیدی this استفاده کنید و هزاران مشکل دیگه...? کارکرد نادرست آرایه هاتابع سُرت جاوا اسکریپت کلا با عددا حال نمیکنه. همینطوری عشقی مرتب میکنشون. این مثال جالب رو داشته باشید:عملکرد نادرست آرایه ها در جاوا اسکریپتعلت چنین رفتار عجیبی اینه که اصولا آرایه ها در جاوا اسکریپت برای داده های عددی طراحی نشدن بلکه برای داده های رشته ای درست شدن. رو همین حساب، این اعداد رو بر اساس حروف الفبا مرتب میکنن نه بزرگتر کوچکی مقدارشون. خب این پست اینجا به پایان میرسه ولی مشکلات جاوا اسکریپت به این ها مختصر نمیشه و خیلی بیشتر از ایناست مخصوصا در مبحث شی گرایی خیلی اشکال داره. از دید من یکم زبان کثیفی هم هست نظر شما چیه؟ ? پیج آکولاد باز من در اینستاگرام رو دنبال کنید تا به مطالب به صورت تصویری دسترسی پیدا کنید. من یک هفته زود تر مطالب رو اونجا میزارم.@open_brace

محبوب ترین نگارش های نامگذاری

آرین شاه‌عالمی — Tue, 16 Apr 2019 02:19:17 +0430
محبوب ترین نگارش های نامگذاریدو چیز سخت تو این دنیای کامپیوتر وجود داره یکی کش اینولیدیشن و دیگری نامگذاری چیزمیزا.ــــ فیل کارلتون یکی از فاکتور هایی که باعث میشه برای یک کلاس/ متغیر/ متد و ... نامی خواناتر و واضح داشته باشیم، پیروی کردن از یک سیستم نگارشی یکپارچه و قوی هستش. منظور از سیستم های نگارشی چیه حالا؟اگر توجه کرده باشید در بیشتر زبان های برنامه نویسی نمیشه برای نامگذاری چیزی، از اسپیس استفاده کرد. به مثال های زیر توجه کنید:my local variableadd products delete process last name همشون دارای یک یا چند اسپس هستند که خب قابل قبول نیستن در بیشتر زبان ها. پس برنامه نویسا مجبور شدند راه های دیگه رو انتخاب کنند که هم نوشته خوانا باشه هم معناش واضح باشه. چندین راه حل ارائه شد که ما به این راه حل ها میگیم "نگارش". نگارش های نامگذاری نقش مهمی در درک کد دارند به ویژه در زبان هایی مثل Go که استفاده از هر نگارش معنای خاصی ایجاد میکنه. تو این مطلب قصد دارم محبوب ترین نگارش های مورد استفاده برنامه نویس هارو معرفی کنم. نگارش شتری??نگارش شتری: در این نگارش ما ابتدا تمام فاصله (اسپیس) هارو حذف میکنیم. تمام حروف بزرگ را کوچیک کرده و بعدش حرف اول کلمه اول رو کوچیک(lower case) و حرف اول کلمات دیگه رو بزرگ (کاپیتلایز) میکنیم. نگارش شتری در PHP به وفور استفاده میشه. معمولا از این نگارش برای نامیدن متغیر ها و ورودی ها (پارامتر ها و آرگیومنت ها) استفاده میشه. عبارت های داده شده در بالا را با نگارش شتری به این شکل مینویسن:myLocalVariableaddProductsdeleteProcesslastNameجناب بلز پاسکالنگارش پاسکالی: این نگارش یک زیر شاخه نگارش شتری هستش. در نگارش پاسکالی ما ابتدا همه حروف رو کوچیک می کنیم و فاصله ها رو هم برمیداریم. سپس حرف اول هر کلمه رو بزرگ مینوسیم. از نگارش پاسکالی معمولا در نامگذاری کلاس ها، سازنده ها، متد ها و توابع استفاده میشه. مثال های بالا با نگارش پاسکالی به این شکل خواهند بود:MyLocalVariableAddProductsDeleteProcess LastNameمار?? نگارش مار‌‌ گونه: در این نگارش ابتدا تمام حروف بزرگ کوچک میشوند و سپس فاصله ها (اسپیس ها) با آندرلاین (آندرسکور) جایگزین میشوند. مثال های بالا با نگارش مارگونه به این شکل خواهند بود:my_local_variableadd_productsdelete_process last_nameکباب??نگارش کبابی: این نگارش دقیقا مثل نگارش مارگونه هستش با این تفاوت که به جای آندرلاین (آندر اسکور) از خط تیره (دش) استفاده میکنه. مثال های بالا با نگارش کبابی به این شکل خواهند بود:my-local-variableadd-productsdelete-process last-nameامیدوارم این مطلب براتون مفید بوده باشه.

بهترین زبان های برنامه نویسی در سال ۱۳۹۷

آرین شاه‌عالمی — Tue, 09 Apr 2019 15:00:38 +0430
بهترین زبان های برنامه نویسی در سال 1397 تو این پست قصد دارم بهترین زبان های سال ۲۰۱۸ رو معرفی کنم. ابتدا با نحوه گزینش شروع میکنم. ? نحوه گزینش:خب اول اینو بگم که من خودم هیچ پایش و آمارگیری انجام ندادم. فقط اطلاعات چندین منبع موثق رو جمع اوری کردم و به یک نتیجه رسیدم. تو انتخاب بهترین زبان من سه فاکتورِ محبوبیت زبان، تقاضای بازار و تجربه مورد نیاز رو اعمال کردم .سایت استک آورفلو هر سال یک پایش انجام میده و نتایجش رو منتشر میکنه. یک قسمتش محبوب ترین زبان های برنامه نویسی رو رده بندی کرده. اونارو یادداشت کردم. بعدش با جستجو در سایت های کاریابی خیلی بزرگ مثل indeed.com پر تقاضا ترین زبان هارو پیدا کردم. در نهایت اونا رو با چارت تجربه /حقوق سایت استک آور فلو مقایسه کردم.?چرا محبوبیت، تجربه مورد نیاز و تقاضای بازار رو بعنوان فاکتور انتخاب کردم؟- محبوبیت یک زبان نقش مهمی تو آینده اون زبان داره. هر چقدر محبوبیت یک زبان بیشتر باشه آینده روشن تری داره.- تجربه مورد نیاز: زبانی خوبه که بشه با ۴ یا ۵ سال تجربه باهاش، کار پیدا کرد. وگرنه زبان هایی هستن که نیاز به حداقل ۸ سال تجربه دارن تا بتونین جایی استخدام شین.تقاضای بازار: هر چی تقاضا برای یک زبان بیشتر باشه حقوق برنامه نویسش هم بیشتر میشه. با این حساب، برای مثال یک زبانی مثل کلوجر که هرچند میانگین درامد سالیانه ۸۵۰۰۰ دلار داره از نظر من زبان خوبی نیست چون تقاضای پایینی تو بازار داره و محبوبیتش بین برنامه نویسا زیاد نیست. این مقاله دنبال زبانی هستش که حقوق بالا، تقاضای زیاد و همچنین تجربه مورد نیاز کمی داشته باشه. نظر شما رو جلب میکنم به نتایج پایش سایت استک آور فلو که اومده میزان حقوق و تجربه برنامه نویسای زبان های مختلف رو با هم مقایسه کرده. نتایج جالبه.چارت مقایسه حقوق و تجربه توسعه دهندگان زبان های مختلف سایت استک آورفلومحبوب ترین زبان ها از نظر کاربران سایت استک آورفلو در سال 2018 ? رده بندی بهترین زبان های برنامه نویسی ? پایتون: در جایگاه اول قرار میگیره چون تمام فاکتور های خوب رو داره. محبوبیت خوبی بین توسعه دهنده ها داره یک چیزی حدود ۴۰ درصد. تقاضای بالایی هم داره تو بازار کار و با شیش سال تجربه میتونید حقوق نزدیک ۶۰ هزار دلار داشته باشید.? جاوا اسکریپت: محبوب ترین زبان برنامه نویسی هستش که تقاضاش تو بازار هر روز به صورت چشمگیری داره بیشتر میشه. شما میتونید با 6 سال سابقه، میانگین حقوق ۵۵ هزار دلار داشته باشید.? سی شارپ: جایگاه سوم میرسه به سی شارپ. این زبان با محبوبیت ۳۵٪ و تقاضای بالا در بازار کار میتونه میانگین حقوق سالیانه ۶۰ هزار دلار رو تضمین کنه.? جاوا: متاسفانه جایگاه چهارم میرسه به جاوا. اگرچه جاوا بیشترین تقاضا رو تو بازار داره ولی چون حقوق دریافتی توسعه دهنده هاش کمه(کمتر از HTML و CSS)، من تصمیم گرفتم جایگاه چهارم بزارمش. شما میتونید با نزدیک به ۶ سال تجربه میانگین حقوق سالیانه نزدیک ۵۲ هزار دلار داشته باشید.?تایپ اسکریپت: این نوزاد تازه متولد شده جاوا اسکریپت تونسته جایگاه خوبی تو این رده بندی داشته باشه. تقاضای این زبان دارای رشد زیادی بوده نسبت به سال پیش همچنین امسال تونسته محبوبیتشو بین توسعه دهنده ها ۷ درصد بیشتر بکنه نسبت به سال ۱۳۹۶ که رشد واقعا خوبیه. میانگین حقوق توسعه دهنده هاش نزدیک ۶۵ هزار دلاره که از همه زبان های توی این لیست بیشتره.?سی پلاس پلاس: اسطوره تمام زمان ها تونسته جایگاه آخر رو تو این رده بندی بگیره. در مقایسه با زبان های دیگه این رده بندی، ++C تقاضای چندانی نداره ولی همچنان جزو محبوبترین زبان هاست. شما میتونید با سابقه ۶ سال حقوقی نزدیک به ۵۲ هزار دلار داشته باشید.? دوستان آمار هایی که دادم بین المللی هستش. شرایط و آمار ایران ممکنه یکم متفاوت باشه. برای مثال تقاضای برنامه نویس PHP تو بازار های بین الملل در حال کاهشه ولی تو ایران همچنان درخواست هاش در صدر جدوله. جالبه بدونید کمترین میانگین حقوق هم توسعه دهنده های PHP میگیرن( به جایگاه PHP توی چارت اول توجه کنید.)

نوشته های آرین شاه‌عالمی

چرا باید از Tailwind استفاده نکنیم؟

این SQL چیه؟

معماری MVC که میگن یعنی چی؟

چند قدم ساده در جهت افزایش سرعت سایت

آبجکت یا کلاس مسئله اینست.

ایراد‌‌‌‎‎‎‌هایی از جاوا اسکریپت که همه نمیدونند

محبوب ترین نگارش های نامگذاری

بهترین زبان های برنامه نویسی در سال ۱۳۹۷