𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
کیفیت پستا چطوره ؟؟؟ همه جواب بدید میخوام نظرتونو بدونم 🔥😁
هر پیشنهادی داشتید در مورد پست های چنل و ... توی کامنتا بهمون بگید 🚀
This media is not supported in your browser
VIEW IN TELEGRAM
رابطه همیشگی من با ChatGpt 🫠
رفقا سعی کنید هیچوقت بدون این که کدی که gpt بهتون داده رو متوجه نشدید ازش استفاده نکنید
رفقا سعی کنید هیچوقت بدون این که کدی که gpt بهتون داده رو متوجه نشدید ازش استفاده نکنید
استفاده کورکورانه از کدی که متوجه اش نشدید در آینده میتونه عواقب بدی رو به همراه داشته باشه !
#️⃣ #gpt #fun
🚀 @coolycode
●● معرفی
سیمبل (
🚀 مثال عملی
🌐 مشاهده داکیومنت Symbol
Symbol در جاوااسکریپت ●● سیمبل (
Symbol ) درواقع یک نوع داده ( data type ) در جاوااسکریپت است که برای ایجاد شناسههای منحصر به فرد استفاده میشود. هر Symbol حتی اگر با همان توضیحات ایجاد شده باشد، یکتا و غیرقابل تکرار است. این ویژگی باعث میشود که Symbol به خصوص برای تعریف کلیدهای یکتا در اشیاء و جلوگیری از تداخل نامها مفید باشد.🚀 مثال عملی
const sym1 = Symbol('test')
const sym2 = Symbol('test');
console.log(sym1 === sym2); // false🌐 مشاهده داکیومنت Symbol
#️⃣ #javanoscript #symbol
🚀 @coolycode
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
بتمن تایم ... 🦇🖤 Programmers On Fire ⚡ 🚀 @coolycode
IMG_20240925_022631.jpg
4.3 MB
فایلش با کیفیت اصلی، بدون اضافیات 🚀
💎 آموزش هک بازی دینو 💎
توی این ویدیو بهتون یاد دادم چجوری بازی دایناسور کروم رو بینهایت کنید، در کل هک حساب نمیشه ولی روش جالبی بود که خودم کشف کردم و دوست داشتم باهاتون به اشتراک بزارم 🔥😎
🌐 مشاهده ویدیو
هر کیم بخنده انشالله دایی ناصر بیاد تو خوابش 😂
توی این ویدیو بهتون یاد دادم چجوری بازی دایناسور کروم رو بینهایت کنید، در کل هک حساب نمیشه ولی روش جالبی بود که خودم کشف کردم و دوست داشتم باهاتون به اشتراک بزارم 🔥😎
🌐 مشاهده ویدیو
#️⃣ #youtube
🚀 @coolycode
پست جدیدمون تو اینستا آپلود شد، ببینید و لذت ببرید 😁🔥
💥 راستی هر روز داریم تو پیجمون پست جدید میزاریمااا، از ما گفتن بود از دست ندید ...
https://www.instagram.com/reel/DAWWhI_MbwS/
💥 راستی هر روز داریم تو پیجمون پست جدید میزاریمااا، از ما گفتن بود از دست ندید ...
https://www.instagram.com/reel/DAWWhI_MbwS/
#️⃣ #NEWPost
🚀 @coolycode
💎 جعبه ابزار جادویی Frontend دولوپرا 💎
یک ui kit خفن اوردم براتون که به ادعای خودش جادوییه، اسمش MagicUI هستش و بیش از ۵۰ کامپوننت animate ( انیمیشنی ) شده خفن داره که بهتون قول میدم اگر ببینیدش شما هم مجذوبشون میشید بس که جذابه.
حالا چرا میگم انقدر جذاب و خفنه ؟
به این دلیل که برای ایجاد انیمیشن ها از Framer Motion استفاده میکنه که واقعا بهش قدرت میبخشه و برای استایل دهی ام از tailwind استفاده میکنه.
🌐 مشاهده وبسایت
یک ui kit خفن اوردم براتون که به ادعای خودش جادوییه، اسمش MagicUI هستش و بیش از ۵۰ کامپوننت animate ( انیمیشنی ) شده خفن داره که بهتون قول میدم اگر ببینیدش شما هم مجذوبشون میشید بس که جذابه.
حالا چرا میگم انقدر جذاب و خفنه ؟
به این دلیل که برای ایجاد انیمیشن ها از Framer Motion استفاده میکنه که واقعا بهش قدرت میبخشه و برای استایل دهی ام از tailwind استفاده میکنه.
فیلم چند نمونه از کامپوننت هاش رو گذاشتم میتونید ببینید، لینک سایتشم میزارم براتون حتما یه سر بهش بزنید 🚀
🌐 مشاهده وبسایت
#️⃣ #libarary | #uikit | #tools
🚀 @coolycode
اینم از اولین موزیک ویدیو برنامه نویسی 😂😎
🌐 مشاهده ویدیو
https://www.instagram.com/reel/DAY6deiszKj
سم جدید جور کردم براتون بفرستید برا اینو اون و خلاصه کیف کنید، هر بار بهش فکر میکنم خندم می گیره 🔥😂
🌐 مشاهده ویدیو
https://www.instagram.com/reel/DAY6deiszKj
#️⃣ #NEWPost #programming
🚀 @coolycode
لیزی لودینگ (Lazy Loading) چیست ؟ 🦥
لیزی لودینگ تکنیکی است که به بارگذاری تأخیری محتوای غیرضروری تا زمانی که کاربر به آن نیاز داشته باشد کمک میکند. به جای اینکه همه منابع (تصاویر، ویدیوها یا کامپوننتهای سنگین) بهصورت همزمان با بارگذاری اولیه صفحه، بارگذاری شوند، این منابع فقط زمانی که کاربر به آنها اسکرول کند یا نیاز داشته باشد، بارگیری میشوند.
✅ ویژگیهای کلیدی لیزی لودینگ
چجوری از لیزی لودینگ استفاده کنیم ... ⁉️😁
🔸 برای استفاده از لیزی لودینگ، میتونید از اتریبیوت HTML5 زیر برای تصاویر استفاده کنید.
🌐 article
🌐 article 2
لیزی لودینگ تکنیکی است که به بارگذاری تأخیری محتوای غیرضروری تا زمانی که کاربر به آن نیاز داشته باشد کمک میکند. به جای اینکه همه منابع (تصاویر، ویدیوها یا کامپوننتهای سنگین) بهصورت همزمان با بارگذاری اولیه صفحه، بارگذاری شوند، این منابع فقط زمانی که کاربر به آنها اسکرول کند یا نیاز داشته باشد، بارگیری میشوند.
✅ ویژگیهای کلیدی لیزی لودینگ
➊ افزایش سرعت بارگذاری اولیه
با بارگذاری محتوای ضروری، صفحات سریعتر لود میشوند.
➋ کاهش استفاده از پهنای باند
چون محتوای غیرضروری بهصورت همزمان لود نمیشود، مصرف داده کاهش مییابد.
➌ بهبود تجربه کاربری
کاربران تجربه بهتری از سرعت و عملکرد صفحه خواهند داشت.
چجوری از لیزی لودینگ استفاده کنیم ... ⁉️😁
🔸 برای استفاده از لیزی لودینگ، میتونید از اتریبیوت HTML5 زیر برای تصاویر استفاده کنید.
<img src="image.jpg" alt="Sample Image" loading="lazy" />
با استفاده از اتریبیوت loading با مقدار lazy، مرورگر تصویر را تنها زمانی که کاربر به آن نزدیک میشود یا به آن نیاز پیدا میکند (مثلاً وقتی اسکرول میکند) بارگذاری میکند.🔸 در فریمورکهایی مانند React.js، میتونید با استفاده از تکنیکهایی مثل React.lazy و Suspense کامپوننتهای غیرضروری زو بهصورت لیزی لود کنید
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}این کد با استفاده از React.lazy کامپوننت را بهصورت لیزی لود میکند و با کمک Suspense تا زمان بارگذاری کامل، یک پیام یا محتوای موقت (مثل "Loading...") را نمایش میدهد.برای اطلاعات بیشتر در مورد لیزی لودینگ و نحوه استفاده از این تکنیک توی شرایط مختلف پیشنهاد میکنم دو تا مقاله زیر رو مطالعه کنید 💥👇
🌐 article
🌐 article 2
#️⃣ #WhatsThat #lazyloading #javanoscript
🚀 @coolycode
5 نکته کاربردی در زمینه UI, UX که به عنوان یک فرانتاند دولوپر بهتره بدونید ... 💥
🎨 طراحی مینیمال (Minimalism)
⌛ سرعت بارگذاری (Loading Speed)
🟢 تعاملات واضح (Clear Interactions)
✅ طراحی بر اساس الگوهای شناخته شده (Familiar Patterns)
💬 بازخورد فوری (Immediate Feedback)
این نکات به شما کمک میکنند تا تجربه کاربری بهتری را برای کاربران وبسایت ایجاد کنید و با دید بهتری پروژه رو جلو ببرید ✅
🎨 طراحی مینیمال (Minimalism)
رابطهای کاربری ساده و کمجزئیات باعث میشود کاربران به راحتی با سایت ارتباط برقرار کنند و تمرکز بیشتری بر محتوای اصلی داشته باشند.
⌛ سرعت بارگذاری (Loading Speed)
کاربران انتظار دارند صفحات به سرعت بارگذاری شوند؛ بنابراین بهینهسازی تصاویر و استفاده درست از انیمیشنها میتواند تجربه کاربری ( UX ) را بهبود دهد.
🟢 تعاملات واضح (Clear Interactions)
کاربران باید بدانند چگونه با المانهای مختلف تعامل کنند، به همین دلیل استفاده از دکمههای برجسته و بازخوردهای بصری مانند تغییر رنگ یا افکتهای هاور کمک میکند تا تجربه کاربری بهبود یابد.
✅ طراحی بر اساس الگوهای شناخته شده (Familiar Patterns)
استفاده از الگوهای رایج در طراحی مانند منوهای همبرگری یا ساختار صفحات مشابه سایتهای مشهور به کاربران کمک میکند سریعتر با وبسایت آشنا شوند.
💬 بازخورد فوری (Immediate Feedback)
ارائه بازخورد فوری به کاربران پس از انجام یک عملیات (مثل ارسال فرم یا کلیک روی دکمه) باعث میشود آنها بدانند که عملیات با موفقیت انجام شده است.
مثلا وقتی به روی دکمه ارسال فرم کلیک میشود، بهتر است دکمه به حالت لودینگ در بیاید تا زمانی که پاسخ از سمت سرور دریافت شود
این نکات به شما کمک میکنند تا تجربه کاربری بهتری را برای کاربران وبسایت ایجاد کنید و با دید بهتری پروژه رو جلو ببرید ✅
#️⃣ #uiux #tips
🚀 @coolycode
توی 10 روز چنل دوومون صدتایی شد 🔥😍
اگر دوست داشتید چنل دومو داشته باشید، هر روز براتون ویدیو های top برنامه نویسی رو میزاریم 💥
👈 لینک چنل 👉
اگر دوست داشتید چنل دومو داشته باشید، هر روز براتون ویدیو های top برنامه نویسی رو میزاریم 💥
👈 لینک چنل 👉
#text | #frontend
فکر کن میخوای یه پروژه فرانت از صفر تا صد بالا بیاری، از چه تکنولوژی هایی داخلش استفاده میکنی ؟
حد اقل یک فریمورک و uikit نام ببرید
بگید برای هندل کردن استیتا ترجیح میدید از چه روشی استفاده کنید
هر نکته ای که به ذهنتون میرسه که توی این پروژه رعایت بکنید که قبلاً نمیکردید بگید
🚀 @coolycode
مثل اینکه امروز درواقع قبل ساعت دوازده ( 30 سپتامبر ) روز جهانی پادکست بوده 🎙️
به همه رفقایی که خودشون پادکست تولید میکنند و عزیزانی که استفاده میکنند، با اندکی تاخیر تبریم میگم 🔥❤️
به همه رفقایی که خودشون پادکست تولید میکنند و عزیزانی که استفاده میکنند، با اندکی تاخیر تبریم میگم 🔥❤️
🚀 @coolycode
💎 معرفی کتابخانه Tailwind Variants 💎
کتابخانه Tailwind Variants یک ابزار جانبی برای Tailwind CSS هستش که به شما کمک میکنه تا مدیریت کلاسهای CSSای به شکل ساده تری انجام بشه و از شلوغی کد شما جلوگیری میکنه 💥
🌐 داکیومنت Tailwind Variants
کتابخانه Tailwind Variants یک ابزار جانبی برای Tailwind CSS هستش که به شما کمک میکنه تا مدیریت کلاسهای CSSای به شکل ساده تری انجام بشه و از شلوغی کد شما جلوگیری میکنه 💥
این کتابخانه به شما این امکان رو میده تا به آسانی حالتهای مختلفی مثل رنگ، سایز و ... رو در یک کامپوننت با استفاده از کلاسهای tailwind تعریف و مدیریت کنید.توی پست های بعدی به بررسی قابلیت های این کتابخانه جذاب میپردازیم ✅
🌐 داکیومنت Tailwind Variants
#️⃣ #WhatsThat | #libarary | #tailwind
🚀 @coolycode
This media is not supported in your browser
VIEW IN TELEGRAM
من تو هر اسپرینت : لطفا به من تسک سنگین بدید، چالش میخوام و حاضرم ده روز نخوابم 💪💎
همچنان من وسط اسپرینت :
همچنان من وسط اسپرینت :
#️⃣ #fun #programming
🚀 @coolycode