#javascript #youtube

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

داخل این ویدیو پنج تا تریک خفن و کاربردی در مورد آبجکت ها داخل جاوااسکریپت بهتون یاد دادم که هر وب دولوپری باید بدونه ⚡


1️⃣ -  کپی عمیق یا deep copy چیست ؟
2️⃣ - چک کردن موجودیت پروپرتی موردنظر داخل آبجکت
3️⃣ - حذف یک پروپرتی از آبجکت
4️⃣ - ادغام و مرج کردن دو آبجکت با یکدیگر
5️⃣ - استفاده از defineProperty برای تعریف پروپرتی جدید در آبجکت

مشاهده کامل ویدیو

Channel | YouTube | Instagram

#javascript #youtube

احتمالا برای شما هم پیش اومده که یک آبجکت و یا آرایه رو داخل لوکال استوریج ذخیره کردید و وقتی اومدید دیتاش رو بخونید با این مقدار مواجه شدید ❗

"Object object"

این اتفاق بخاطر هندل نکردم درست این موضوع هنگام ذخیره کردن دیتا هستش ⚠️

داخل این ویدیو دلیلش رو به طور کامل بررسی کردیم و راه حل درست هندل کردنشم بهتون گفتم که قطعا خیلی جاها میتونه کمکتون کنه ⚡

مشاهده کامل ویدیو

Channel | YouTube | Instagram

#reactjs #youtube

سلام به همگی، امیدوارم عالی باشین 🔥

یه دوره جدید رو داخل چنل یوتوب استارت زدیم و قراره داخل این دوره آموزش کامل لایبرری ری‌اکت جی‌اس رو داشته باشیم و امروز اولین قسمت دوره منتشر شد

داخل این ویدیو قراره که لایبرری محبوب ری‌اکت‌جی‌اس رو با هم دیگه بررسی بکنیم و اولین پروژه خودمون رو ایجاد بکنیم ⚡


توی این جلسه چیا قراره یاد بگیریم ؟

1️⃣ - ری‌اکت جی‌اس چیه ؟

2️⃣ - ساخت اولین پروژه با Create React App

3️⃣ - ساختار فایل‌ها و کامپوننت‌ها در ری‌اکت

5️⃣ - چگونگی و نحوه‌کار ری‌اکت

6️⃣ - بررسی ساختار کامپوننت ها و ساخت اولین کامپوننت

مشاهده ویدیو

Channel | YouTube | Instagram

https://youtu.be/q-380g_ypHc

#reactjs #youtube

سلام رفقا امیدوارم حالتون خوب باشه 🔥

توی ویدیو یک تودولیست کامل رو با هم دیگه داخل ری‌اکت با استفاده tailwind css پیاده سازی میکنیم که میتونه پروژه تمرینی خیلی خوبی باشه و همچنین برای استفاده شخصی هم ازش استفاده کنید ✅

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

مشاهده ویدیو

لینک ریپازیتوری پروژه


Channel | YouTube | Instagram

https://youtu.be/XoOIITEyLiw

#youtube

کی سریع تر کد میزنه ؟ 😎😂

درسته توی کد زدن سرعت مهم نیست ولی چالش جالبیه که خودمون رو بسنجیم و ببینیم که چقدر سریع میتونیم کد بزنیم 😉

فکر میکنم که تاحالا همچین سبک محتوایی نبوده باشه تا جایی که من گشتم امیدوارم خوشتون بیاد 🤩💪

مشاهده ویدیو

Channel | YouTube | Instagram

#reactjs #youtube

تو این ویدیو بهتون هوک یوزافکت رو با یه مثال جالب یاد دادم و لیمیت سابمیت فرم رو با یوز افکت هندل کردم برای درک بهتر این هوک که می‌تونه جالب باشه براتون 😁⚡

آموزش کامل هوک یوزافکت در ری‌اکت با مثال کاربردی و مینی پروژه فرم با ولیدشن

Channel | YouTube | Instagram

https://youtu.be/udlqlFd4U7w?si=k2yuYWlC4et0G12B

#javascript #video

یه روش جالب برای هندل کردن دیتای فرم ها، بدون استفاده از ایونت onChange که میتونه خیلی جاها به کارتون بیاد 😉🔥

Channel | YouTube | Instagram

#reactjs #youtube

داخل این ویدیو بهتون یاد دادم که چجوری میتونید بدون استفاده از هیچگونه لایبرری خاصی داخل برنامه ری‌اکتی خودتون دیتای فرم هاتون رو‌ خیلی ساده با چند خط کد جاوااسکریپت مدیریت کنید ⚡️

مشاهده کامل ویدیو داخل‌ چنل یوتوب

مشاهده ریپازیتوری گیت هاب کد های استفاده شده داخل ویدیو

Channel | YouTube | Instagram

#javascript #video

حتما برای شما ام پیش اومده که وارد یه وبسایتی میشید و مثلا یه منویی رو باز میکنید ولی به محض اینکه دکمه بک گوشیتون رو میزنید صفحه عوض میشه 😨🤦🏼‍♂️

این اتفاق بخاطر هندل نکردن درست این مسئله داخل کد هستش، حالا توی این ویدیو بهتون یاد میدم که چجوری میتونید این مورد رو با جاوااسکریپت هندل کنید

Channel | YouTube | Instagram

ولاگ رویداد هنگ‌اوت دولوپر ها😍💪

هنگ‌اوت دولوپر ها یه کامیونیتی کوچیک که ایونتای زبان انگلیسی برگزار میکنند
برنامه ام به این شکله که اول یه ارائه داریم که ارائه این هفته درباره دیزاین پترن ها بود و بعد از ارائه ام به گروهای ۷،۸ نفره تقسیم میشیم مکالمه آزاد و تخصصی داریم با بچه ها
ویدیو ولاگ برنامه این هفته رو هم میتونید از پیج ایسنتاگرام من تماشا کنید

https://www.instagram.com/reel/C6WWXIMsEGa/?igsh=NHVpdm03dng2bWRi

#NEWPost #vlog

Channel | YouTube | Instagram

گشتم و گشتم و یه ui, ux دیزاینر آوردم براتون اونم از نوع خفنش😍💪

مصحابه با ابراهیم فرجامی و پاسخ به سوالات شما
پروداکت منیجر در اوتوموبی | ابراهیم فرجامی

- حق با برنامه نویس هستش یا یوآی یوایکس دیزاینر ؟
- چه خصوصیاتی میتونه توی تبدیل شدن به یک یوآی، یوایکس دیزاینر خوب تاثیر گذار باشه ؟
- 3 تا نکته مثبت درباره ui, ux دیزاینری و این مسیر شغلی ؟
- 3 تا نکته منفی درباره ui, ux دیزاینری و این مسیر شغلی ؟
- چجوری وارد این حوزه کاری شدی ؟
و ...

https://www.youtube.com/watch?v=A-r2I0EGy6E&list=PLAS8sE7zBqC-Kdq5IGNsk79VAWNjAiWsn

#youtube #uiux

Channel | YouTube | Instagram

بالاخره ویدیو همایش فرانت چپتر منتشر شد و میتونید داخل چنل یوتوب بنده ببینید و امیدوارم حسابی ازش لذت ببرید 🔥

بخشی از قسمت های مختلف ویدیو :
- جمع کردن وسایل و آماده شدن برای سفر
- حرکت به سمت ترمینال شرق تهران
- آشنایی اولیه با بچه ها
- حرکت به سمت آمل
- تحویل اتاق ها
- دورهمی شب قبل از همایش
- شروع داستان پر ماجرای اتاق 305
- بازسازی فیلم تایتانیک توسط دوستان 😎😂
- ارائه ...

راستی اینم پیج اینستاگراممه، اونجا بیشتر ویدیو های روزمره میزارم :
instagram.com/coolycode

https://www.youtube.com/watch?v=t8c8VdhlVYM

#youtube

Channel | YouTube | Instagram

هیچوقت فکرشو میکردید بشه طرح های ui داخل فیگما رو با چند تا کلیک به کد تبدیل کرد ... ⁉️💥

ابزار locofy همین الان داره انجامش میده. اونم نه فقط به کد html, css بلکه از Typescript و کلی چیزای دیگه پشتیبانی می‌کنه که واقعا برگاتون میریزه :))

از چیا پشتیبانی میکنه ؟ 🚀

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

Frameworks

React
Angular
Next
Vue
Gatsby

Design System

MUI
Bootstrap
Ant Design
ChakraUi
Vuetify
...

Other

Javscript
Typescript
Tailwind
Css
...

البته از تکنولوژی های دیگه ای هم پشتیبانی میکنه و برای هر مرحله از پروژه مثل دانلود کد، دیپلوی و ... برنامه داره که میتونید توی عکس همسن پست ببینید ⚡

راستی توی این ویدیو نحوه استفاده ازش رو توضیح داده، به نظرم ببینید جالب بود 🔻

📺 https://youtu.be/yhCtAs--r_Y

🌐 وبسایت رسمی locofy

#️⃣ #figma #tools #AI #uiux

🚀 @coolycode

5 نکته کاربردی در زمینه UI, UX که به عنوان یک فرانت‌اند دولوپر بهتره بدونید ... 💥

🎨 طراحی مینیمال (Minimalism)

رابط‌های کاربری ساده و کم‌جزئیات باعث می‌شود کاربران به راحتی با سایت ارتباط برقرار کنند و تمرکز بیشتری بر محتوای اصلی داشته باشند.

⌛ سرعت بارگذاری (Loading Speed)

کاربران انتظار دارند صفحات به سرعت بارگذاری شوند؛ بنابراین بهینه‌سازی تصاویر و استفاده درست از انیمیشن‌ها می‌تواند تجربه کاربری ( UX ) را بهبود دهد.

🟢 تعاملات واضح (Clear Interactions)

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

✅ طراحی بر اساس الگوهای شناخته شده (Familiar Patterns)

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

💬 بازخورد فوری (Immediate Feedback)

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

مثلا وقتی به روی دکمه ارسال فرم کلیک میشود، بهتر است دکمه به حالت لودینگ در بیاید تا زمانی که پاسخ از سمت سرور دریافت شود

این نکات به شما کمک می‌‌کنند تا تجربه کاربری بهتری را برای کاربران وبسایت ایجاد کنید و با دید بهتری پروژه رو جلو ببرید ✅

#️⃣ #uiux #tips

🚀 @coolycode

میدونستی میتونی توی گوشیتم از قابلیت inspect و extensions مرورگر کروم استفاده کنی ؟ ✅

قطعا هر دولوپری نیاز پیدا میکنه که توی گوشیش بتونه به تب inspect و یا افزونه های کروم دسترسی پیدا کنه

مرورگر 𝗞𝗜𝗪𝗜 این قابلیت هارو برای شما فراهم کرده که میتونید از GooglePlay یا Myket هم به سادگی نصب میشه 🚀

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#tools

🫶 @coolycode‌ ‌

🔸 اگر از فرآیند حوصله سر بر ساخت md یا همون Mark Down برای پروفایلتون توی گیت هاب خسته شدید از این سایت استفاده کنید

این سایت توی چند تا استپ ساده یه پروفایل جذاب‌ و خفن برای گیت هابتون آماده میکنه 🚀

🌐 مشاهده وبسایت

🔗 مشاهده نمونه

#️⃣ #website #git
🆔 Channel | Group | YouTube

🔸 وبسایت Devhints یک منبع عالی برای چیت‌شیت‌های برنامه‌نویسیه که دسترسی سریع به دستورات و خلاصه ابزارهای مختلفی مثل JavaScript، Python و Git رو فراهم می‌کنه

این داک جذاب از تکنولوژی های مختلف و متعددی پشتیبانی میکنه، حتما یه سری بهش بزنید ⚡

🌐 مشاهده Devhints

#️⃣ #website #git

🚀 @coolycode

پست جدیدمون آپلود شد تو اینستاگرام ✅😍

🌐 مشاهده پست

#️⃣ #NEWPost #tricks

🚀 @coolycode