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

#framework | #backend | #WhataThat

●● معرفی فریم ورک Nest.js ●●

🔸 یک فریم‌ورک پیشرفته برای ساخت بکند اپلکیشن ها که روی Node.js ساخته شده و با استفاده از TypeScript، بهتون این اجازه رو می‌ده تا کدهای قابل تست، مقیاس‌پذیر و نگهداری‌پذیر بنویسید.

ویژگی های کلیدی ✅

➊ ماژولار بودن : معماری NestJS بر اساس ماژول‌هاست که باعث می‌شود کدها سازمان‌یافته‌تر و قابل مدیریت‌تر باشند.

➋ پشتیبانی کامل از TypeScript : به صورت کامل از TypeScript پشتیبانی می‌کنه که توسعه امن‌تر و با دقت بیشتری رو براتون فراهم می‌کنه.

➌ تزریق وابستگی ( Dependency Injection ) : به راحتی می‌شه وابستگی‌های مختلف رو تزریق و مدیریت کرد که این کار کدها رو تمیزتر و تست‌پذیرتر می‌کند.

➍ پشتیبانی از REST و GraphQL : به سادگی API‌های REST و GraphQL زو پشتیبانی می‌کنه و پیاده‌سازی اونها سریع و آسانه.

➎ یکپارچه‌سازی با کتابخانه‌های دیگر : NestJS به راحتی با کتابخانه‌هایی مانند TypeORM، Mongoose و دیگر ابزارها برای مدیریت دیتابیس و ... یکپارچه می‌شه.

🌐 مشاهده داکیومنت NestJS

Channel | Group | YouTube

#NEWPost

💎 ویدیو جدید ایسنتا آپلود شد 💎

ببینید و لذت ببرید، کپشنم بخونید حتما بوس بهتون 😌❤️

🚀 @coolycode

#website #css

🔸 اگر به طراحی با سبک نئومورفیسم علاقه مندی ولی نمیتونی طرح مورد نظرتو پیاده کنی این سایت بهت کمک می‌کنه تا هر حالتی که میخوای رو باهاش بسازی

این سایت با گزینه های کاربردی که داره بهت کمک می‌کنه که المنتت رو به هر شکلی که میخوای در بیاری و در نهایتم کد css تحویلت میده 🚀

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

🚀 @coolycode

#NEWPost

🔸 اگر پست جدیدمونو  ندیدید حتما یه سری به پیج بزنید

نکات مهمی گفتم در مورد حملات xss 🚀

https://www.instagram.com/p/C_nIJ_GMVaf

#vim #WhatsThat

💎 معرفی ویرایشگر قدرتمند Vim 💎

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

مهم ترین ویژگی های Vim ✅

♂️ کراس پلتفرم

روی اکثر سیستم‌عامل‌ها از جمله لینوکس، مک و ویندوز کار می‌کنه.

🚀 سرعت و کارایی

به دلیل طراحی مینیمالیستی و عدم وابستگی به رابط گرافیکی، بسیار سریع است.

🛠️ حالت‌های مختلف

این تکست ادیتور دارای چندین حالت مخلتف برای کار هایی مانند حرکت در متن، ویرایش متن، انتخاب متن و ... است. ( اطلاعات بیشتر )

🎨 قابلیت شخصی‌سازی بالا

می‌تونید تنظیمات و پلاگین‌های مختلفی بهش اضافه کنید تا ویرایشگر رو برای نیازهای خودتون بهینه کنید.

🔋دستورات قدرتمند

به شما امکان می‌ده تا با استفاده از دستورات قدرتمند، به سرعت تغییرات زیادی رو روی متن خودتون اعمال کنید.

🌐 مشاهده داکیومنت

🚀 @coolycode