#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

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

اگر سیستمت در دسترس نیست، Tailwind Play بهترین راهه!

با Tailwind Play میتونی یک محیط آنلاین سریع و رسمی برای آزمایش و کدنویسی با Tailwind CSS داشته باشی و بدون نیاز به نصب نتیجه رو در لحظه ببینی

راستی نکته جالبی که وجود داره اینه که میتونی کدت رو سیو کنی و با لینکی که بهت میده با بقیه به اشتراک بزاری 💥

🌐 مشاهده Tailwind Play

✅ نمونه کد ایجاد شده با Tailwind Play

#️⃣ #website #tailwind #css

🚀 @coolycode

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

➊ اول تو ترمینال این کامند رو بنویسید به و جای docker-start کامند مد نظر خودتونو برای استارت کردن داکر رو بنویسید 🔻

set-alias docker-start "C:\Program Files\Docker\Docker\Docker Desktop.exe"



➋ حالا فقط کافیه که کامندی که ست کرده بودی رو بزنی تو ترمینال تا داکر بالا بیاد🔻

docker-start

➌ و در آخر هم اکستنشن docker رو برای راحتی بیشتر کارمون نصب میکنیم تا از داخل vscode بتونیم به کانتینر‌ها و ایمیج‌ها دسترسی داشته باشیم طبق تصویر 🔥

#️⃣ #docker #tricks #extension

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

#vscode #extension

🔸 اگر تو ام خست شدی از اینکه دونه به دونه class‌هایی که ایجاد میکنی رو تو فایل css بنویسی، یه اکستنشن خفن میخوام بهت معرفی کنم که چندین برابر سرعتت رو بیشتر می‌کنه 😎

با افزونه Evondev کافیه فقط تو vscode اون قسمت از فایل HTML رو که میخوای کلس هاش رو داشته باشی سلکت کنی و بعدش کامند 🔻

CTRL + SHIFT + P

رو بزنی و توی سرچ بار بنویسی 🔻

copy css class

و در نهایتم Enter بزنی و تمام.

الان همه کلس هات رو به قالب کد های css کپی‌کرده و میتونی توی هر فایلی که میخوای paste اشون کنی ⚡

🌐 لینک افزونه Evondev

امیدوارم حسابی از این پست لذت برده باشید ❤️

🚀 @coolycode

#WhatsThat #strapi

●● آشنایی با هدلس CMS جذاب Strapi 🚀 ●●

اِستِرَپی یک Headless CMS محبوب و جذابه که با NodeJS ساخته شده و بهتون این امکان رو میده که به راحتی APIهای سفارشی بسازید و مدیریتشون کنید.

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

Channel | Group | YouTube

●●سرو کردن فایل‌های HTML در Express.js ●●

توی این ویدیو بهتون یاد دادم که چجوری میتونید خیلی ساده فایل های HTML‌ای سرو بکنید توی اکسپرس و بفرستید سمت کلاینت.

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

🌐 مشاهده کامل ویدیو در یوتوب

اگه به این سبک پستا علاقه داری به چنلمون یه سر بزن 🚀

#️⃣ #nodejs #youtube #backend 

〰️〰️〰️〰️〰️〰️〰️〰️〰️

Channel | Group | YouTube

●● نحوه استفاده از ابزار cURL ●●

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

curl https://fakestoreapi.com/carts

POST

curl -X POST -H "Content-Type: application/json" -d '{"userId":5,"date":"2020-02-03","products":[{"productId":5,"quantity":1},{"productId":1,"quantity":5}]}' https://fakestoreapi.com/carts

این دو نمونه ساده برای درخواست GET و POST بود و خیلی فلگ های حرفه ای تر و بیشتری وجود داره داخل این ابزار که میتونید ازشون استفاده بکنید 🚀

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

#tools #Api
〰️〰️〰️〰️〰️〰️〰️️〰️〰️〰️

Channel | Group | YouTube

#javascript #tricks

● سه تا از کابردی ترین متد ها برای کار با آبجکت ها ●

➊ متد Object.keys : این متد تمام keyهای یک آبجکت رو گرفته و آن‌ها را در یک آرایه قرار می‌دهد.

➋ متد Object.values : این متد تمام valueهای یک آبجکت را گرفته و آن‌ها را در یک آرایه قرار می‌دهد.

➌ متد Object.entries : این متد keyها و valueها را به صورت key, value ترکیب می‌کند و آرایه‌هایی از این جفت‌ها ایجاد می‌کند.

مثال عملی 🚀

const obj { key1: 'value1', key2: 'value2', key3: 'value3'

};

const keysArray = Object.keys(obj);

const valuesArray = Object.values(obj);

const entriesArray = Object.entries(obj);

console.log(keysArray); 
// Output: ['key', 'key2', 'key3']

console.log(valuesArray); 
// Output: ['value', 'value2', 'value']

console.log(entriesArray); 
// Output: [['key', 'value'], ['key2', 'value'], ['key3', 'value3']]

با حمایتاتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube