#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

💎 همرنگ جماعت شو 💎

- شنیدی میگن یه زبان برنامه برنامه نویسی هست همه جا بدرد میخوره و باهاش هوش مصنوعی میزنن خیلی خفنه ؟

+ آره آره اسمش پایتونه خیلی خفنه.

- ایول خودشه، بریم پایتون یاد بگیریم همه دارن میرن پول تو برنامه نویسیه.

🔸 خواهی نشوی رسوا همرنگ جماعت شو 🔸

این ضرب المثل رو زیاد شنیده بودید احتمالا، ولی صرفا میخواستم بهتون بگم چرتی بیش نیست.

حالا چرا ؟؟؟

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

ولی چرا همه ریختن تو بورس ؟!

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

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

چرا همستر میزنی ؟! چون همه دارن میزنن معتبره

من محمدم، اون یکی دوستم اسمش علیه، یکی از دوستام سعیده، هممون باید نجار بشیم ؟ نه به هیچ وجه.

ما انسانیم و هر کدوم از ما باید مسیر خودش رو پیدا کنه. تاکید میکنم هر کدوم از ما باید :

مسیر خودش رو پیدا کنه !

و در آخر

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

❤️ خواهی نشوی همرنگ، رسوای جماعت شو ❤️

#tips

🚀 @coolycode

🌐 https://t.iss.one/coolycodegap

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

راستی یه ربات هوش مصنوعی هم اضافه کردیم که میتونید بهش دسترسی داشته باشید و‌ هر سوالی که دارید ازش بپرسید

ℹ️ راهنمای استفاده از ربات هوش مصنوعی

#AI

بالاخره Next.js ورژن 15 رسما معرفی شد و به صورت stable در دسترس قرار گرفت 😍🔥

طبق دیتایی که وجود داره ۱۴ مورد جدید بهش اضافه شده که کامل توضیح داده در مورد هرکدومشون که میتونید به طور‌ کامل توی بلاگ رسمی Next 15 بخونید

🌐 https://nextjs.org/15

اینم پست جدید vercel در صفحه رسمی لینکدینشون هستش درباره Next 15 🔻

https://www.linkedin.com/posts/vercel_nextjs-15-activity-7254219704683122688-i-Qn



#️⃣ #news #nextjs

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣