نوشته های یاشار حبیبی

آموزش کاربردی ساخت انیمیشن با سی اس اس (animation with css)

یاشار حبیبی — Sun, 11 Apr 2021 17:42:45 +0430

هممون وقتی به وب سایت های بزرگان تکنولوژی مثل اپل یا مایکروسافت یا شرکت هایی مثل تسلا و مرسدس نگاه می کنیم شگفت زده میشیم.عامل مهمی که شاید باعث برجسته شدن این وب سایت ها میشه انیمیشن ها و جلوه های جذابیه که باعث میشه دلمون بخواد این وب سایت ها رو بارها و بارها نگاه کنیم.خوب، چطوری اونا یه همچین وب سایت هایی با این انیمیشن های شگفت انگیز میسازن؟ تا حالا براتون سوال پیش اومده که انیمیشن های این سایت ها چطوری ساخته شدن؟ و یا دلتون خواسته یه همچین وب سایت های تعاملی زیبا و چشم نوازی برای خودتون یا کسب و کارتون بسازید؟اگر جوابتون مثبته که این مطلب رو واسه شما آماده کردم. بخونید و اگر دوست داشتید منو فالو کنید.تو این مقاله سعی کردم به طور مختصر و مفید اما کامل و گسترده اصول انیمیشن ها با css رو آموزش بدم که خیلی می تونه بهتون تو این زمینه کمک کنه.اگر تازه وارد حوزه برنامه نویسی فرانت اند شدید و یا می خواید دانشتون رو در زمینه انیمیشن های سی اس اس بیشتر کنید، پس به خوندن این مطلب ادامه بدید، چون در آخر یه درک کاملی از سی اس اس بدست میارید.سی اس اس همون طور که شاید خیلی هاتون بدونید قسمت زیبای اپلیکیشن های وبه، یعنی استراکچر و اسکلت وب سایت که همون HTML باشه رو با CSS بهش یه رنگ و لعابی میدیم.انیمیشن ها نقش مهمی تو بهتر کردن تجربه کاربری(UX) بازی می کنن جوری که باعث میشن کاربر درک بهتری از نحوه عملکرد وب سایت پیدا کنه و راحت تر باهاش ارتباط بگیره و یه تجربه خوشایندی رو براش میسازه.ولی انیمیشن باید خیلی هوشمندانه استفاده بشه وگرنه ممکنه در نهایت یه پیجی داشته باشید که بیشتر حواس پرت کنه تا تعاملی و کاربردی.مطابق گزارش گوگل، تقریبا 50 درصد ترافیک وب از دستگاهای موبایل میاد، در نتیجه هر بیزینسی نیاز داره که انیمیشن های سازگار با موبایل تو وبسایتش داشته باشه.برای آموزش رایگان به این لینک برید:کانال یوتیوب yasharhabibimediaانیمیشن های cssای سه جنبه مهم دارن:TransformsTransitionsKeyframesفلوچارت عناصر کلیدی انیمیشن در سی اس اسقسمت اول: ترنسفورمز(Transforms)این پراپرتی کمک میکنه عناصر وبتون رو به روش های شگف انگیزی تغییر بدید، از حرکت دادن تا تغییر سایز دادنش، از چرخوندن تا کج کردنش.و بهترین قسمت: شما می تونید هر چیزی رو بدون تغییر جریان داکیومنت - document flow - دستکاریش کنید.این پراپرتی- transforms - چهار جنبه قابل توجه داره:TranslateScaleRotateSkewبزارید یکم عمیق تر شیم:1. Translateحرکت یه المان از یه نقطه به یه نقطه دیگه رو اساسا بهش میگن translateترنسلیت مختصات یه المان رو تغییر میده. برای تغییر ظاهر یه کامپوننت تو سطح دوبعدی به کار میره.ترنسلیت خیلی ساده یعنی یه المان صفحمون رو از یه موقعیت به موقعیت دیگه حرکتش بدیم. می تونید یه شئ رو تو مختصات x , y جابه جا کنید.حرکت المان رو محور x transform: translateX(200px); transform: translateX(-200px);حرکت المان رو محور ytransform: translateY(200px); transform: translateY(-200px);مختصر نویسی:transform: translate(x-axis, y-axis)مثال: transform: translate(200px, 200px);نکتهtranslate(200px);این دستور فقط تو محور x حرکت میده المانتون رو1. Scaleسایز المان ها رو با اسکیل تغییر میدیمبا scale سایز المان ها رو تغییر میدیم هم تو محور x و هم تو محور y ویا هر دو. تو استقاده از این المان هم باید حواستون باشه که بیش از اندازه اگر سایز المان هارو تغییر بدید شکلشون مخدوش میشه و کیفیتشون کم میشه. یه عددی بالاتر از 1، سایز رو افزایش میده و یه عددی کمتر از 1 سایز اونو کاهش میده، یعنی حالت عادی و سایز عادی یه المان برابر 1 هست و به طور نسبی میشه این سایز رو تغییر داد.تغییر ابعاد در محور x: transform: scaleX(3);تغییر ابعاد در محور y:transform: scaleY(0.5);مختصر نویسی برای تغییر ابعاد در محور x و y:transform: scale(3 , 0.5); transform: scale(0.5);3. Rotateچرخوندن المان ها با rotateمی تونید با rotate یه المانی رو هم در جهت حرکت عقربه های ساعت و هم خلاف عقربه های ساعت بچرخونید. واحد اندازه گیری این چرخش بر اساس درجه‌ست. یه مقدار مثبت المان رو در جهت حرکت عقربه های ساعت می چرخونه و یه مقدار منفی برعکس می چرخوندش. این چرخش میتونه در امتداد محورهای x ، y و z انجام بشه.درک چرخوندن المان ها بوسیله روتیت(rotate) یکم گیج کننده می تونه باشه، واسه همین خیلیا به درستی نمی تونن از این قابلیت استفاده کنن.چرخش در محور x:باید تو ذهنتون تصویر سازی کنید تا بتونید اونو توی محورهای مختلف بچرخونید، چرخوندن تو محور x مثل چرخوندن یه سیخ کباب یا یه سیب زمینی رو آتیشه، ما یه چرخش سه بعدی رو که نمیبینیم تنها چیزی که می تونیم ببینیم تغییر ارتفاع المانمونه که این چرخش رو برامون تداعی میکنه.transform: rotateX(45deg);چرخش در محور y:یه کباب ترکی یا یه رقصنده رو میله رو تجسم کنید(نه اونقدر حالا) چرخش رو محور y همینطوریه همه چیزی که متوجه میشید تغییر عرض المانتونه که چرخش در محور y رو براتون تداعی میکنه.transform: rotateY(45deg);چرخش در محور z:تصور کنید یه نیزه داره میره تو صفحتون و نیزه در حال چرخشه، این در اصل بهترین جهت برای چرخوندن المان هاست برای اینکه با چرخشش در جهت عقربه های ساعت و یا برعکس به راحتی می تونید متوجه تغییر جهت چرخشتون بشید.transform: rotateZ(45deg) – در جهت حرکت عقربه های ساعتtransform: rotateZ(-45deg) – در خلاف جهت عقربه های ساعتمنو تو کانال های زیر رو فالو کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia4. Skewکج کردن المان ها با skewبا این قابلیت می تونید المان هاتون رو کج کنید. هم مقدار مثبت میگیره هم منفی، و مثل روتیت(چرخش) واحد اندازه گیریش درجه‌ست.مقدار مثبت x، المان رو به چپ کج میکنه و مقدار منفی x، برعکسشه. و همینطور تغییر مقدار y اونو به بالا و پایین کج میکنه.در جهت x:skewX(45deg) or skew(45deg);درجهت y:transform: skewY(80deg);5. ترکیب کردن transformهاخیلی راحت میشه چندین نوع transform رو همزمان اعمال کرد. ترتیب مهمه(بعضی مواقع) طوری که دومین تغییر ترنسفورم روی اولین تغییر اعمال میشه و سومی روی نتیجه تغییر دوتای اول اعمال میشه.ترکیب چند ترنسفورمtransform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);همه این تغییر ترنسفورم ها روی یه رویدادی که توسط کاربر انجام میشه مثل با موس رفتن روی یه المان(hover)، کلیک کردنش، فوکوس کردن روش، اکتیو و ... . برای اینکه این جادو رو در عمل بتونید ببینی، می تونید این تغییر ترنسفورم ها رو به این رویداد ها اضافه کنید..element-to-animate{ display: block }.element-to-animate:hover{ transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg); }قسمت دوم: ترنزیشنز(Transitions)transitionsاگه قسمت بالا رو خونده باشید و کار کرده باشید، ممکن تو حالت هاور(hover) متوجه یه حرکت غیرعادی شده باشید. این دقیقا همون کاریه که ترنزیشن انجام میده. ترنزیشن ها(transitions) به سیال و رون شدن انیمیشن ها کمک میکنن.ترنزیشن ها رو با کمک این پراپرتی ها میشه کنترل کرد:transition-propertytransition-durationtransition-timing-functiontransition-dela1. transition-propertyبا این ویژگی می تونید مشخص کنید که ترنزیشنتون رو کدوم ویژگی cssای اعمال بشه. مثلا می خواید این ترنزیشن روی مارجین و پدینگ اعمال بشه یا بک گراند و یا بردر و ... . پس شما می تونید یه ترنزیشن رو به یه ویژگی و یا تمام ویژگی های اون المان اعمال کنید(البته ویژگی هایی که میشه بهشون ترنزیشن داد). یه لیست کامل از ویژگی هایی که جز این لیست می تونن باشن رو می تونید اینجا پیدا کنید.اعمال کردن ترنزیشن به یه ویژگی خاص CSS:transition-property: background-color;اعمال یه ترنزیشن به کل لیست ویژگی های CSS المانمون:transition-property: all;2. transition-durationمدت زمانی که انیمیشن اجرا میشه. براحتی میتونه با ثانیه یا میلی ثانیه مقدار دهی بشه. پیشنهاد میکنم که از ثانیه استفاده کنید چون وقتی می خونیدش راحتتر درکش میکنید که چقدر انیمیشنتون طول میکشه.transition-duration: 0.5s;3. transition-timing-functionکی سرعت رو دوست نداره!سرعت چیزیه که میتونه باعث ساخت یه تجربه کاربری خوب بشه یا اونو از بین ببره، پس پیشنهاد میکنم کنترلش کنید. اینو از طریق transition-timing-function می تونید اعمال کنید.خود CSS چنتا مقدار از پیش تعریف شده داره که اونارو می تونیم برای کنترل سرعتمون استفاده کنیم مثل:(ease, ease-in, ease-in-out)و اگه دوست دارید کنترل سرعت رو به طور کامل دست خودتون بگیرید از Bezier Curves استفاده کنیدtransition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);4. transition-delayبا این می تونید یه وقفه ای بین اون رویدادی که انیمیشنتون رو شروع میکنه و زمان شروع واقعی انیمیشنتون بدید، یعنی به زبان ساده با این می تونید مشخص کنید که انیمیشنتون چقدر طول بکشه که شروع بشه و با مقادیر ثانیه و میلی ثانیه مقدار دهی میشه:transition-delay: 0.5s;مختصر نویسی پراپرتی transitionاینجوری همه رو میشه یه جا تعریف کرد:transition: (property) (duration) (transition-timing-function) (transition-delay);استفاده همزمان از Transforms و Transitionsوضعیت اول: عادی.element-to-animate{ display: block; transition: transform 1s ease 0.2s, background 1s; }وضعیت دوم: هاور(Hover).element-to-animate:hover{ background: black; transform: translateX(200px); }برای ترنزیشن بین وضعیت اول و دوم هم میشه به صورت جدا واسه همه پراپرتی ها با مقدارهای زمانی متفاوت مقدار دهی کرد هم میشه یه چیز کلی واسه همشون مقداردهی کرد مثلا اینطوری:transition: all 1s ease 0.2s;قسمت سوم: فریم‌های کلیدی(keyframes)کی فریمز ها(keyframes) به تغییر انیمیشن از یک نقطه زمانی به نقطه زمانی دیگه کاربرد دارن.به دو روش میشه با فریم های کلیدی کار کرد:1 - روش از(From) - به(to)2- روش درصدی1 - روش از(From) - به(to)تو این روش فقط دوتا وضعیت در طول انیمیشن داریم - وضعیت شروع(from) و وضعیت پایان(to).@keyframes animation_name { from { } to { } }برای انیمیشن دادن به یه المان(مثلا یه ماشین) که به طور افقی از وضعیت ابتداییش حرکت میکنه:@keyframes drive{ from { transform: translateX(-200); } to { transform: translateX(1000px); } }.car{ animation-name: drive; animation-duration: 3s; animation-fill-mode: forwards; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in; animation-direction: normal; }2- روش درصدیدر حال حاضر برای انیمیشن هایی که بیشتر از دو وضعیت(شروع و پایان) دارن نمی تونیم از From-to استفاده کنیم. واسه انیمیشن هایی که بیشتر از دو وضعیت دارن از روش درصدی استفاده میکنیم. رویه درصدی انیمیشن رو به وضعیت های میانی متعدد همراه با وضعیت شروع و پایان تقسیم میکنه. وضعیت شروع با %0 مشخص میشه، وضعیت پایان هم با %100 . هرچقدر هم که بخواید وضعیت میانی میتونید داشته باشید. مثال: 0% — 25% — 50% — 75% — 100%@keyframes jump{ 0% { transform: translateY(-50px) } 50% { transform: translateY(-100px) } 100% { transform: translateY(-50px) } }مختصر نویسی انیمیشنanimation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-functio) (animation-iteration-count) (animation-direction) (animation-delay);نکته: تاخیر انیمیشن(animation-delay) همیشه بعد از زمان انیمیشن(animation-duration) میاد.مثال:.car{ animation-name: drive; animation-duration: 3s; animation-fill-mode: forwards; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in; animation-direction: normal; } .car{ animation: drive 3s ease-in infinite normal 2s; }خوب الان دوتا انیمیشن داریم - drive و jump ، که می خوایم به المان ماشینمون اضافش کنیم. اینکارو تو یه خط میتونیم انجامیش بدیم با استفاده از، زنجیره انیمیشن "Chaining Animations"زنجیره انیمیشن"Chaining Animations" چیه؟اجرای چنتا انیمیشن با CSS خیلی راحته، با قرار دادن یه کاما(,) بین انیمیشن ها میشه اونارو یکی بعد از دیگری اجرا کرد. مثل:.car{ animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse; }دسته بندی پراپرتی های انیمیشن(Animation Properties):از چه انیمیشنی استفاده کن؟نام انیمیشن animation-name: اسم انیمیشن که بعد از کلمه کلیدی keyframes@ اومده رو بهش نسبت میدیم.وقتی انیمیشن تموم شد چی کار کن؟انیمیشن تموم شده animation-fill-mode: وقتی انیمیشن از پنجره انیمیشن خارج شد چی کار کن.اگر می خواید انیمیشن n مرتبه تکرار بشهتعداد دفعات تکرار انیمیشن animation-iteration-count: تعداد دفعاتی که می خواید انیمیشن تکرار بشه رو بدید بهش. میتونه یه عدد باشه یا اگر می خواید مدام تکرار بشه از مقدار "infinite" استفاده کنید.اگر می خواید جهت انیمیشن برعکس بشهجهت انیمیشن animation-direction: لازم نیست یه انیمیشن جدا بنویسید واسش تنها کاری که باید بکنید اینه که به این ویژگی مقدار دهی کنید.تو روش From - toreverse: to - from alternate: from-to -> to-from -> from-to alternate-reverse: to-from -> from-to -> to-fromتو روش درصدیreverse: 100% - 0% alternate: 0% - 100% -> 100% - 0% -> 0% - 100% alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%جمع بندیمی تونه واسه شروع کار با انیمیشن ها تو css یکم پیچیده بنظر بیاد ولی همین که یکم باهاش کار میکنید می بینید که خیلی هم راحته و هیجان انگیز.مرسی که تا اینجا با من بودید و وقت گذاشتید. امیدوارم که این مطلب بدردتون بخوره و اگر اینطور بود حتما این مقاله رو لایک کنید و منو هم اینجا هم تو شبکه های اجتماعی فالو کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia

چه طوری کار با هوک های ری اکت رو شروع کنیم

یاشار حبیبی — Fri, 26 Mar 2021 17:50:38 +0430

اگر توی ری اکت تازه کاری و همه جای کدت داری از کلاس ها(class) استفاده میکنی احتمالا متوجه شدی که یه وقتایی پیگیری وضعیت(state) ها آسون نیست، اینکه چه جوری بروزرسانیشون کنی، یا رندرشون کنی و غیره. واسه من که خصوصا سروکله زدن با "this" خیلی اذیت کننده بوده. این ور میری "this" اون ور میری "this" .... خیلی تجربه خوشایندی نیست. ولی نگران نباش هوک ها نجاتمون میدن!تو این پست، توضیح میدم که چرا هوک ها یادگیریشون انقد آسونه و چطوری باعث میشه خوانایی کدمون از قبل خیلی بیشتر و بهتر بشه. در ضمن با یسری مثال روش استفاده از چنتا ازین امکاناتی که تو نسخه های جدید ری اکت فراهم شده رو بهت معرفی میکنم.برای یادگیری ری اکت پیشنهاد میکنم ویدیوی آموزشی زیر رو ببینی:آموزش سریع و کاربردی ری اکتهوک ها(قلاب) چین؟طبق مستندات خود ری اکت:هوک ها یه امکان جدید تو نسخه 16.8 ری اکت هستن که بهت این اجازه رو میدن که از استیت(state) و امکانات دیگه ری اکت بدون استفاده از کلاس(class)ها استفاده کنی.اساسا، استفاده از فانکشن ها به جای کلاس ها می تونه اثر مثبتی رو کارایی(پرفرمنس) و خوانایی کدهات بزاره. کار کلاس(class)ها تمومه تو ری اکت؟نه، ری اکت قصدی برای کنار گذاشتن کلاس ها نداره. هوک ها می تونن همزمان با کلاس ها استفاده بشن و با هم هیچ تداخلی ندارن و رو روش کدزنیتون دخالتی نمی کنن اما هوک ها توی کلاس ها کار نمی کنن.توصیه میشه که ازین به بعد کامپوننت هات رو به صورت فانکشن بنویسی نه کلاس ولی می تونی اون کامپوننت هایی که قبلا به صورت کلاس نوشتیشون رو تغییرشون ندی(البته اگر فک میکنی خیلی پیچیده نیست تبدیلشون، چرا که نه ریفکتورشون کن ولی اجباری نیست)"هوک" (قلاب) دقیقا چیه؟قبل از اینکه بریم سراغ چنتا مثال، خوبه که این مفهوم رو توضیح بدم. یه هوک در اصل یه فانکشنه که بهمون این اجازرو میده که به استیت(state) ری اکت قلاب بندازیم.اگه قبلا با فانکشن کاموننت ها کار کرده باشی میدونی که یه وقتایی لازمه که یه چنتا استیت(state) بهش اضافه کنی. قبل از هوک مجبور بودی که این فانکشن ها رو به کلاس(class) تبدیل کنی تا بتونی از استیت(state) و setState استفاده کنی. با هوک ها خیلی راحت می تونی تو فانکشن کامپوننت ها به استیت و امکانات دیگه ای که تو کلاس ها داشتی دسترسی داشته باشی و از کلاس ها بی نیاز بشی.قوانینی برای هوک هاجدای از همه قوانینی که هوک ها باید پیروی کنن(از اونجایی که یه فانکشن جاوااسکریپتی هستن)، ما یسری قوانین اضافه تری هم داریم:هوک ها رو فقط تو بالاترین سطح باید صدا بزنیم: نمی تونیم تو یه لوپ(حلقه تکرار)، بلاک های شرطی و فانکشن های تو در تو صداشون بزنیم. بلکه باید توی بالاترین نقطه فانکشن ری اکتیمون صدا زده بشن. این به ری اکت اجازه رو میده که با هر بار رندر اونو صدا بزنه.هیچ وقت نباید هوک ها رو توی فانکشن های عادی جاوااسکریپتی صدا بزنیم، همیشه توی فانکشن کامپوننت یا فانکشن سفارشی هوک باید صدا زده بشن.یسری مثال استفاده از هوک هاحالا می خوام یه چنتا مثال نشونت بدم که میتونه مفید باشه برات، و همچنین قدرت هوک ها رو نشونت میده. خوب اول از همه بریم هوک useState رو یادبگیریم هوک ()useStateفرض کنیم یه کلاس مثل این داریم:اساسا، این کلاس یه استیت داره(به اسم count که از صفر شروع میشه). هر وقت که دکمه رو میزنیم باید یکی به مقدار این count اضافه بشه(با استفاده از setState تو خط 16).حالا بیایم همین مثال رو با هوک useState بنویسیمش:اینجا ما تو خط 1 هوک useState رو ایمپورت(import) کردیمش. خط 4 مهمتریم چیز تو این مثاله.هوک ()useState یه متغیر استیت(state) تعریف میکنه. به این روش مقدار استیت رو بین فراخونی های فانکشن حفظ میکنه. به طور معمول وقتی از فانکشن خارج میشیم مقدا متغیر ها از بین میرن ولی متغیرهای استیت بوسیله ری اکت مقادیرشون حفظ میشه و از بین نمیرن.تنها آرگومانی که useState داره مقدار اولیه استیته (تو این مثال count). برخلاف کلاس ها، استیت(state) اینجا لازم نیست که یه شئ باشه.در آخر، useState یه جفت مقدار برمیگردونه: مقدار فعلی استیت و فانکشنی که باهاش میشه مقدار استیت رو بروزرسانی کرد(تغییر داد). پس به جای استفاده از this.setState و this.state می تونیم یه مقدار جدید رو با فانکشن setCount به count نسبت بدیم و تو این مثال تو خط 9 یکی بهش اضافه کنیم.درنهایت، خوندنش هم خیلی راحت تره:

You clicked {count} times

نسبت به این:

You clicked {this.state.count} times

هوک ()useEffectهوک افکت(effect) بهت اجازه میده که ساید افکت ها(side effects) یا همون اثرات جانبی حاصل از تغییر متغییرها تو فانکشن ری اکتی رو پیاده سازی کنی.در ادامه کد قبلیمون، میتونیم یسری کد بهش اضافه کنیم:تو خط اول یه فانکشن جدید ایمپورت(import) کردیم: useEffect. تو خط 6 ازش استفاده کردیم. useEffect مثل متدهای componentDidMount، componentDidUpdate، componentWillUnmount تو کلاس ها عمل میکنه.برای روشن شدن قضیه بگم که، بعضی نمونه های ساید افکت تو ری اکت گرفتن دیتا از سمت بک انده، که بعد از یه فراخونی برفرض سرویس بک اند و دریافت داده ها به صورت دستی دام(DOM) رو تغییر میدیم. ساید افکت ها بعضیاشون لازمه که بعد از اتمام کار از حافظه پاک بشن.بعضیاشونم نیاز ندارن: مثل درخواست های شبکه(network requests)، دستکاری دام(DOM) و لاگ گرفتن. کدی رو که این کارهارو انجام میده اجرا میکنیم و بعدشم بی خیالشون میشیم.برای این موارد ما فقط اینجوری از این هوک استفاده میکینم:useEffect(() => { document.title = `You clicked ${count} times`; });به طور پیش فرض این کد هم بعد از اولین رندر هم بعد از هر بروزرسانی(آپدیت) اجرا میشه. پس بعد از هر رندر ما عنوان صفحمون رو تغییر میدیم(همراه با مقدار count).هر چند خیلی شبیه componentDidMount یا componentDidUpdate هست، افکت هایی که با useEffect پیاده سازی میشن جلوی مرورگر رو برای آپدیت صفحه نمی گیرن. باعث میشه که صفحه واکنشگرا تر باشه وقتی نیاز داریم که افکتمون همزمان اتفاق بیوفته یه هوک دیگه ای هست به نام useLayoutEffect که شبیه api useEffect هست.خوب حالا شاید بگی باشه ولی من می خوام این افکت فقط وقتی کامپوننت بالا اومد(mount شد) اجرا بشه، نه هر بار که بروزرسانی(آپدیت) میشه. البته، این کار رو هم می تونی انجام بدی:معمول ترین روش برای اجرای یه چیزی بعد از اینکه کامپوننت برای اولین بار رندر شد اینه که از یه آرایه خالی ( [ ] ) به عنوان دومین آرگومان فراخونی useEffect استفاده کنیم:useEffect(() => { document.title = `You clicked ${count} times`; }, []);همچنین میتونیم یه مقدار استیت رو با effect نگاه کنیم به این صورت ک هر وقت این مقدار تغییر کرد کد افکت مون اجرا بشه:useEffect(() => { document.title = `You clicked ${count} times`; }, [count]);تو مثال بالا، useEffect فقط زمانی اجرا میشه که count تغییر کنه، هرچند بار که تغییر کنه هم مهم نیست به ازای هر بار تغییر count کد افکت ما هم اجرا میشه.برای یادگیری بیشتر پیشنهاد میکنم ویدیوی آموزشی زیر رو ببینی:آموزش سریع و کاربردی ری اکتامید وارم که این مقاله براتون مفید بوده باشه و ازتون می خوام حتما این مطلب رو لایک کنید و با دیگران به اشتراک بزارید، ممنون.من رو تو شبکه های اجتماعی دنبال کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia

نگاه عمیق تری به ری اکت

یاشار حبیبی — Fri, 26 Mar 2021 00:02:10 +0430

ری اکت یه کتابخونه جاوااسکریپته که برای ایجاد رابط های کاربری سریع و تعاملی برای اپلیکیشن های وب و موبایل ساخته شده. یه کتابخونه متن باز فرانت اند مبتنی بر کامپوننت که تنها برای ساخت لایه نمایش یا همون View اپلیکیشن به کار میره تو معماری mvc یا همون model view controller، لایه نمایش یا همون view مسئول اینه که ظاهر و کارکرد لایه نمایش چه جوری باشه.ری اکتآموزش سریع و کاربردی ری اکتری اکت توسط جوردن واک، مهندس نرم افزار در فیسبوک ساخته شده.این روزها ری اکت بوسیله برندهای برتری مثل Airbnb، Tesla، instagram و walmart و هزاران برند مطرح دیگه استفاده میشه با این مثال ها خواستم بگم که ری اکت واقعا یه فریم ورک تمام عیار برای توسعه اپلیکیشن فرانت اند و اپ های موبایله.خوب حالا چطوری، و چرا ری اکت انقدر کاربردیه؟به عنوان نمونه به این پیج اینستاگرام یه نگاهی بندازیم، اصلی ترین دلیل برتری ری اکت اینه که رابط کاربری (UI) به چندین جزء تحت عنوان کامپوننت تقسیم میشه. این به طور چشم گیری سادگی کار با کد و رفع خطا(debug) رو افزایش میده.ری اکت فریمورکه یا کتابخونه؟یه عده ای اصرار دارن که ری اکت فریمورک نیست، بلکه یه کتابخونست چون فقط لایه نمایش(view) رو کنترل میکنه. ولی واقعیت اینه که با استفاده از کتابخونه های مختلف نه تنها چیزی کمتر از فریمورک نداره بلکه تجربه خودم اینه که می تونه حتی در عین سبک بودن قدرتمندتر هم باشه.ری اکت یه کد توصیفی داره، که شرح میده چی می خوایم، به جای اینکه بگه چجوری انجامش بده. اون صرفا نتیجه رو توصیف میکنه ولی مثل یه آموزش قدم به قدم نیست که بگه دقیقا چجوری انجامش بده. این منجر میشه به یه کد توصیفی سبک که به سادگی قابل فهمه و در نهایت باگ کمتری داره. همچنین ری اکت یه ویژگی فوق العاده داره به نام ویرچوال دام (virtual dom) که باعث میشه برنامه نویسا بدون احتیاج به بروزرسانی کل لایه نمایش(DOM) و دستکاری هزینه بر کل DOM به ازای هر تغییر، براحتی اپلیکیشن های تحت وب و اپ هایی که لایه نمایششون سمت سرور رندر میشه(SSR) رو پیاده سازی کنن.حالا ببینیم ری اکت چی در اختیارمون میزاره و چرا محبوبیتش انقدر زیاد شده:ساخت راحت اپلیکیشن های داینامیک: چون ری اکت کد کمتری نیاز داره و فانکشنالیتی بیشتری رو در اختیارمون میزاره پیاده سازی اپ های داینامیک(پویا) راحت تره باهاش.کارایی رو افزایش میده: ویرچوال دام(virtual dom) با مقایسه وضعیت(state) قبلی کامپوننت ها فقط اون بخشی از سند داکیومنت واقعی (real dom) رو بروزرسانی میکنه که تغییر کرده نه کل دام رو، واسه همین اپ های تحت وب سریع با کارایی و پرفرمنس بالا میشه باهاش ساخت.کامپوننت ها با قابلیت استفاده مجدد و چندباره: کامپوننت ها در اصل اجزاء سازنده هر اپلیکیشن ری اکتی هستن، هر کامپوننت لایه نمایش و لاجیک خودش رو داره، و همه این کامپوننت ها می تونن بارها تو سراسر اپلیکیشن استفاده بشن و زمان توسعه اپ رو کاهش بدن.جریان داده یکطرفه: با جریان یکطرفه داده ها، برطرف کردن خطا ها و دیباگ کردن خیلی خیلی ساده تره و وقتی یه خطایی(باگی) رخ میده به دقت و مشخصا میشه جایی رو که اتفاق افتاده سریعا پیدا کرد و برطرفش کرد.اپلیکیشن های وب و موبایل: یه فریمورکی به اسم ری اکت نیتیو(react native) که از خود ری اکت مشتق شده ، یه راه عالی برای ساخت اپ های فوق العاده موبایله.یه ابزار دیباگ اختصاصی: فیسبوک یه افزونه کروم منتشر کرده که منحصرا برای دیباگ کردن اپ های ری اکتی استفاده میشه. که فرایند خطایابی و دیباگ کردن اپ های ری اکتی رو بسیار ساده تر و سریع تر میکنه.در کل وقتی تمام خوبی ها و بدی های ری اکت رو کنار هم میزاریم، خوبیاش پیشی میگیره.مقایسه ری اکت، ویو و انگولاریه نگاهی به این نمودار بندازین، خیلی واضح نشون میده که میزان دانلود ری اکت نسبت به دو تا رقیب اصلی جاوااسکریپتیش، یعنی ویو و انگولار، خیلی بیشتر و داره بیشتر و بیشتر هم میشه.واقعیت اینه که یه برنامه نویس مدرن و حرفه ای باید بی وقفه مهارت های جدید و تکنولوژی های جدیدی رو یاد بگیره تا بتونه خودش رو نسبت به تغییرات بروز نگه داره. تکنولوژی به سرعت تغییر میکنه و ما باید خودمون رو باهاش وفق بدیم. اگه با ری اکت آشنا نیستی، شدیدا پیشنهاد میکنم که این آموزش رو ببینید و کار با این "من میگم کتابخونه شما بخونید فریم ورک" قدرتمند رو شروع کنید: آموزش سریع و کاربردی ری اکتنظرتون در مورد این مطلب و تجربتون با کار با ری اکت رو با من و بقیه در میون بزارید، مرسی که با من همراه بودید و این مقاله رو مطالعه کردید، اگر براتون مفید بود لطفا لایک کنید و به اشتراک بزاریدش، ممنون.من رو تو شبکه های اجتماعی دنبال کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia

7 نکته و ترفند جاوااسکریپت برای اینکه مثل یه حرفه ای کد بزنی

یاشار حبیبی — Wed, 24 Mar 2021 15:59:40 +0430

امروز می خوام 7 نکته و ترفند جاوااسکریپتی رو بهت بگم که کیفیت کدهات رو بهتر می کنه و می تونی از این به بعد برای پروژه های بعدیت استفاده کنی ازشون.9 نکته و ترفند جاوااسکریپت برای اینکه مثل یه حرفه ای کد بزنیبرای دیدن نکات و ترفندهای جاوااسکریپت یه نگاهی به لینک زیر بنداز:آموزش ویدیویی نکات و ترفندهای جاوااسکریپت1. استفاده از Arrow functionsاکمااسکریپت 6 این روش جدید نوشتن فانکشن ها (arrow functions) رو معرفی کرد که باعث میشه کد فانکشن ها خیلی تمیزتر باشن و درکل خیلی هم سریعتر می تونی بنویسیشون.به جای اینکه فانکشن ها رو این جوری تعریف کنیم:const multiply = function(x, y) { return x * y; };می تونی با کد کمتر به نتیجه مشابهی برسی:const multiply = (x, y) => { return x * y; };این حتی می تونه ساده تر هم بشه:const multiply = (x, y) => x * y;2. عملگر اسپرد(Spread Operators) این سینتکس اجازه میده که یه دیتای تکرارپذیر(مثل آرایه) به عناصر واحد بست داده بشه، معمولا برای گرفتن یه کپی کم عمق(Shallow Copy) از اشیاء جاوااسکریپت هم بکار برده میشه استفاده از این عملگر باعث میشه خوانایی کدها بالاتر بره و مختصرتر هم میشه.ساخت یه آرایه جدید از روی یه آرایه دیگه به عنوان بخشی از آرایه جدید:const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; console.log(lyrics); // نتیجه ===> ["head", "shoulders", "knees", "and", "toes"]یه راه بهتر برای اتصال(concat) آرایه ها به همدیگهlet arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; console.log(arr1) // نتیجه ===> [0, 1, 2, 3, 4, 5]استفاده از عناصر یه آرایه به عنوان آرگومان های یه فانکشنconst add = (a, b, c) => a + b + c; let array = [1,2,3]; console.log(add(...array)); // نتیجه==> 63. عملگر رست(Rest Operator)خیلی شبیه عملگر اسپرد(spread operator) به نظر میاد ولی برای در کنار هم قراردادن یکسری از عناصر به عنوان یه آرایه استفاده میشه یعنی یه جورایی برعکس عملگر اسپرد عمل میکنه یعنی چنتا ایتم رو میگیره تبدیلشون میکنه به یه ایتم از نوع آرایه.const blend = (ice, liquid, ...theRest) => { console.log(theRest); }; blend('ice', 'milk', 'banana', 'strawberry'); // نتیجه ===> ['banana', 'strawberry']آخرین پارامتر فانکشن میتونه به صورت رست باشه یعنی عملگر سه نقطه ( ... ) قبلش بیاد، اینجوری بقیه آرگومان ها رو تو خودش به عنوان یه آرایه نگه داره.4. پرکردن آرایهساخت یه آرایه ساده تو یه خطیه آرایه ای از 5 رشته خالیlet array = Array(5).fill(''); // نتیجه ===>: ['', '', '', '', '']یه آرایه ای از عددهای 0 تا 4let array = Array.from(Array(5).keys()); // نتیجه ===>: [0, 1, 2, 3, 4] // Using the spread operator let array = [...Array(5).keys()] // نتیجه ===>: [0, 1, 2, 3, 4]5. اسامی محاسبه شده ویژگی های یه شئاین قابلیت هم تو اکمااسکریپت 6 به جاوااسکریپت اضافه شد که بهت اجازه میده یه عبارت دستوری (expression) رو داخل کروشه [ ] قرار بدی، که محاسبه میشه و به عنوان اسم یا همون کلید ویژگی های یه شئ استفاده میشه.let key = 'A_DYNAMIC_KEY'; let obj = { [key]: 'A_VALUE', }; console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' }6. روش درست لاگ گرفتن با ()console.logوقتی یه آرایه ای از اشیاء داری شاید بهتر باشه که از ()console.table استفاده کنیconst foo = { name: 'Suibin', age: 30, coder: true }; const bar = { name: 'Borja', age: 40, coder: true }; const baz = { name: 'Paul', age: 50, coder: false }; console.table([foo, bar, baz]);نتیجه:از طریق استایل دهی سفارشی با استفاده از علامت "%" لاگ هات رو متمایز و برجسته کن:console.log('%cStyled log', 'color: orange; font-weight: bold;'); console.log('Normal log');نتیجه:می تونی از چندین شئ تو یه console log لاگ بگیری اینطوری راحتتر متوجه میشی که هر شئ واسه کدوم متغیره:const foo = { name: 'Suibin', age: 30, coder: true }; const bar = { name: 'Borja', age: 40, coder: true }; const baz = { name: 'Paul', age: 50, coder: false }; console.log({ foo, bar, baz });نتیجهبرای یادگیری روش های مختلف دیباگ کردن و لاگ گرفتن پیشنهاد میکنم حتما این ویدیو رو ببینی:نکات و ترفند های دیباگ کردن7. عملگر شرطیهر عملگر شرطی که با if - else می نوشتی رو می تونی به راحتی تو یه خط دستور بنویسیش اینجوری:condition ? (expression if true) : (expression if false)به عنوان نمونه:const hour = 5; if (hour < 18) { console.log('Good day'); } else { console.log('Good evening'); }// Result: Good dayمیشه اینجوری کوتاه بشه:const hour = 5; hour < 18 ? console.log(‘Good day’) : console.log(‘Good evening’); // Result: Good dayتا حالا از این نکات و ترفندها استفاده کرده بودید؟ از کدوماش؟ مرسی بابت وقتی که گذاشتید امیدوارم که مفید بوده باشه لطفا این مطلب رو لایک کنید و به اشتراک بزارید ممنون درضمن نظر هم یادتون نره، برای یادگیری بیشتر کانال های زیر رو فالو کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia

7 نکته و ترفند ری اکت برای بهتر کد زدن در 2021

یاشار حبیبی — Tue, 23 Mar 2021 16:39:18 +0430

7 نکته و ترفند ری اکت برای بهتر کد زدن در 2021تو برنامه نویسی از روش های مختلفی میشه یه مشکلی رو حل کرد فرقی نمیکنه چه زبان یا فریم ورکی باشه جاوااسکریپت، پایتون، ری اکت و یا هر زبان و فریم ورک دیگه ای. وقتی به کد یکی دیگه نگاه میکنی همیشه یه چیز جدیدی هست که بتونی ازش یاد بگیری.ری اکت روز به روز در حال پیشرفت و محبوبیت بیشتره و روش های مختلفی برای حل مسائل تو این "من میگم کتابخونه ولی شما بخونید فریم ورک قدرتمند" وجود داره خوب بیایم به 7 تا نکته و ترفند که تو کار با ری اکت کمکتون نیکنه یه نگاهی بنداریم.برای آموزش رایگان به این لینک برید:کانال یوتیوب yasharhabibimedia1. چطوری تو کنسول(Console) دوتولز (DevTools) دیباگر بزاریم!!!حتما واسه شما هم پیش اومده که می خواین برفرض استایل یه دراپ دان(Dropdown) یا یه چیزی مثل این رو دیباگ کنید اون وقت تا دراپ دان (Dropdown) رو باز می کنید میاید روش رایت-کلیک(right-click) کنید رو ایتم های اون و اینسپکت المنت(inspect element) رو بزنید یهو بسته میشه خود به خود و نمیتونید اینسپکتش(inspect) کنید.خوب اینم یه راه حل ساده:1. کنسول(console) مرورگرتون رو باز کنید.2. دستور زیر رو بنویسید تو کنسول(console) و اجراش کنید.setTimeout(() => { debugger; }, 3000)3. حالا دارپ دانی(Dropdown) رو که می خواین دیباگش کنید رو باز کنید.2. مقدار دهی اولیه useStateبه صورت تنبل(Lazy)یه وقتایی هست که لازمه مقدار اولیه استیت(state) رو از یه متغیری یا فانکشنی محاسبه کنید و مقدار دهی کنید. به مثال زیر توجه کنید:const initialState = someFunctionThatCaluclatesValue(props)const [count, setCount] = React.useState(initialState)از اونجایی که این فانکشن تو بدنه فانکشن کامپوننت ری اکت قرار داره، هربار که یه رندری اتفاق میوفته این فانکشن هم صدا زده میشه حتی با اینکه نیازی به مقدارش نباشه(دفعه اول یه بار محاسبه شده دیگه)حالا ببینیم چه طوری با پرفرمنس بالاتری از طریق مقداردهی اولیه تنبل (lazy initialize) اینو پیاده سازیش کنیم:const getInitialState = (props) => someFunctionThatCaluclatesValue(props)const [count, setCount] = React.useState(getInitialState)اینجوری ری اکت فقط زمانی که به مقدار اولیه نیاز داره این فانکشن رو صدا میزنه(یعنی همون دفعه اول رندر کامپوننت) و خوب باعث میشه کدتون با کارایی و عملکرد بهتری کار کنه.برای دیدن و بررسی این کد به این لینک برید:کد نکته بالا3. رندرهای غیر ضروری رو مونیتور کنیدراه های مختلفی برای پیدا کردن این رندرهای غیر ضروری هست اینجا می خوام یکی از بهترین راه های پیدا کردن رندرهای اضافی کامپوننت ری اکت رو بهتون بگم:why-did-you-renderآره این پکیج رو نصب کنید و خیلی راحت رندرهای اضافی رو پیدا کنید و یه فکری به حالشون بکنید.رندرهای غیر ضروری رو مونیتور کنید4. استفاده از React Windowاز اونجایی که اکثر اپ ها توشون داده ها رو به شکل یه لیست رندر میکنن، وقتی این لیست بزرگ میشه مثل یه سم وارد اپلیکیشنتون میشه و اثر بدی روی کارایی و عملکرد اپ تون میزاره. کلی حافظه رو تو مرورگرتون به خودش اختصاص میده و چون همه این عناصر این لیست توی DOMهستن وقتی اسکرول میکنید دچار یه کندی(lag) میشید. واسه اینکه بتونید فقط اون قسمتی از دیتا ها رو که الان تو صفحه مرورگرتون قابل دیدنه رندر کنید می تونید از پکیج React Window استفاده کنید. مهم نیست سایز لیست شما چقدره اون فقط 20-30 ایتم از لیستتون رو، بسته به سایز پنجره مرورگرتون، رندر میکنه. که کلی پرفرمنس و کارایی اپتون رو بالا میبره.5. استفاده از React Fragmentsمدت ها اینجوری بود که اگر می خواستید ری اکت یه کامپوننت رو به درستی رندر کنه باید همه اون چیزی رو که تو اون کامپوننت برمی گردوندید(return) توی یه divبزاریدبا معرفی فرگمنت ها (fragments) تو ری اکت دیگه لازم نیست ازین روش استفاده کنید در عوض می تونید اینطوری انجامش بدید(یعنی همه چیو بزارید داخل فرگمنت)استفاده ازReact Fragments6. استفاده از React.memoطبق چیزی که مستندات خود ری اکت میگه:اگر کامپوننت شما نتایج مشابهی رو به ازای prop های مشابه رندر میکنه شما می تونید اونو memo کنید، تو بعضی از موارد به خاطرسپاری(memoizing) نتایج باعث افزایش کارایی و عملکرد بهتر میشه به این معنا که ری اکت بیخیال رندر مجدد کامپوننت میشه و از نتیجه آخری که رندر شده مجددا استفاده میکنه.درون خودش React.memoیه مقایسه کم عمق (shallow compare) روی پراپ(prop)ها انجام میده و اگر پراپ ها نسبت به رندر قبلی تغییری نکردن از رندر مجدد کامپوننت اجتناب میکنه.7. شرط گذاری در jsxنوشتن jsxخیلی باحاله و یکی از امکانات اصلی ری اکته. برای رندر مشروط المان ها به جای استفاده از این روش:از این روش استفاده کنید:نتیجهتا حالا از این نکات و ترفندها استفاده کرده بودید؟ از کدوماش؟ مرسی بابت وقتی که گذاشتید امیدوارم که مفید بوده باشه لطفا این مطلب رو لایک کنید و به اشتراک بزارید ممنون درضمن نظر هم یادتون نره، برای یادگیری بیشتر کانال های زیر رو فالو کنید:اینستاگرام: yasharhabibimediaتلگرام: yasharhabibimediaیوتیوب: yasharhabibimedia