🌐 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

💎 معرفی لایبرری Framer Motion 💎

🔸 لایبرری Framer Motion یک انتخاب عالی برای ساخت انیمیشن‌های جذاب و پیچیده در پروژه‌های React‌ای هستش و باهاش میتونید هر انیمیشنی که بخواید رو پیاده‌‌سازی کنید

نکته مهمش اینجاست که با قابلیت هایی که داره بهتون اجازه میده تا انیمیشن های فوق العاده تعامل‌پذیر، با کنترل دقیق بر روی ترنزیشن‌ها رو به سادگی پیاده سازی کنید :)

#️⃣ #libarary #WhatsThat

🆔 Channel | Group | YouTube

#youtube

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

بالاخره قسمت کامیونیتی یوتوب وا شد 🤩💥
اولین پستمون رو هم گذاشتیم، ممنون میشک با لایک و‌ کامنت خودتون از این پست حمایت کنید تا پستای بهتر و با کیفیت تری بزاریم 🔥❤️

https://youtube.com/post/UgkxW1dWAh6SkOCE7H6hlGMeQml34PhBLdxX

* عوامل موثر توی علاقه ما به برنامه نویسی *

اگر میخواید برنامه نویسی رو شروع کنید پیشنهاد میکنم این ویدیو رو ببینید 🚀

مشاهده در پیج اینستاگرام کولی کد

#NEWPost
Channel | YouTube | Instagram

#javascript #trcks

* حذف آیتم از Object داخل جاوااسکریپت *

برای حذف یک آیتم از آبجکت داخل جاوااسکریپت میتونید از عملگر delete استفاده کنید.

نحوه استفاده ازشم به این شکل هست که ابتدا عملگر delete رو مینویسید و بعد از اون property که میخواهید حذف کنید رو از آبجکت مد نظرتون سلکت میکنید طبق مثال زیر 👇👇👇

const user = {
   firstName: "Ali",
   lastName: "Asadi",
   email: "[email protected]"
}

delete user.email

console.log(user) // -> { firstName: "Ali", lastName: "Asadi", }

Channel | YouTube | Instagram

#javascript #tricks

یکی از روش های جالب و سریع تبدیل Number به String داخل جاوااسکریپت به این شکل هست که میایم و یک عدد رو با یک رشته خالی جمع میکنیم.

5 + ' '  -->‌ ‌  ' 5 '

با این کار در واقع داریم عدد 5 رو به یک رشته خالی (' ') اضافه می‌کنیم.

حالا چرا این اتفاق می‌افته ؟ 🤔

جاوا اسکریپت یک زبان برنامه‌نویسی Dynamic Type هست و این به این معنی هست که نوع یک متغیر در زمان اجرا تعیین می‌شود و جاوا اسکریپت به طور خودکار تلاش می‌کنه تا انواع مختلف داده‌ها رو با هم سازگار کنه.
داخل جاوا اسکریپت، وقتی عملگر + بین دو رشته استفاده می‌شود، عمل الحاق (concatenation) انجام میشه؛ یعنی دو رشته به هم چسبیده و یک رشته جدید ایجاد می‌کنند.

حالا تبدیل عدد به رشته به چه شکلی اتفاق میفته ؟

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

⚡ نتیجه نهایی

در عبارت 5 + ' '، عدد 5 به رشته "5" تبدیل می‌شود و سپس به رشته خالی " " الحاق می‌شود. در نتیجه، خروجی عبارت "5" خواهد بود.

💥 مثال‌های دیگر

'Hello' + ' World' -> "Hello World"
'My age is ' + 30 -> "My age is 30"

کاربرد این روش 🚀

در کل این روش معمولاً برای ایجاد رشته‌های دینامیک استفاده میشه. ولی برای تبدیل عدد به رشته هم میتونید ازش استفاده بکنید 😉

Channel | YouTube | Instagram