𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد – Telegram
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
6 subscribers
225 photos
77 videos
6 files
354 links
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
بهترین کادویی که میتونید برای یه برنامه نویس بگیرید ❤️😊

#️⃣ #programming #gift

🚀 @coolycode
#text | #frontend


فکر کن میخوای یه پروژه فرانت از صفر تا صد بالا بیاری، از چه تکنولوژی هایی داخلش استفاده میکنی ؟

حد اقل یک فریم‌ورک و uikit نام ببرید

بگید برای هندل کردن استیتا ترجیح میدید از چه روشی استفاده‌ کنید

هر نکته ای که به ذهنتون میرسه که توی این پروژه رعایت بکنید که قبلاً نمی‌کردید بگید


🚀 @coolycode
مثل اینکه امروز درواقع قبل ساعت دوازده ( 30 سپتامبر ) روز جهانی پادکست بوده 🎙️

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

🚀 @coolycode
💎 معرفی کتابخانه 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
دهه نودی تو کوچه خلوت ... 🙂

پست جدید همین الان آپلود شد، هیچی نمیگم برید ببینید :)))😂

🌐 مشاهده پست

#️⃣ #NEWPost #instagram

🚀 @coolycode
💎 وریبل‌ها در CSS 💎

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

نحوه تعریف و استفاده از وریبل‌ها 🚀

➊ وریبل‌ها در CSS با استفاده از -- تعریف می‌شوند و برای دسترسی به آن‌ها از تابع var() استفاده می‌کنیم

:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}

توی کد بالا وریبل های خودمون رو در شبه کلاس :root تعریف کردیم


➋ حالا برای استفاده از وریبل‌ها در بخش‌های مختلف CSS، کافی است آن‌ها را با تابع var که بالاتر گفتیم فراخوانی کنیم

body {
background-color: var(--primary-color);
color: var(--secondary-color);
font-size: var(--font-size);
}

button {
background-color: var(--secondary-color);
font-size: var(--font-size);
}

تو کد بالا رنگ و اندازه فونت عناصر body و button رو با وریبل‌های CSS مقدار دهی کردیم.



#️⃣ #css #css_variables

🚀 @coolycode
#question

شبه کلاس :root در css چیست ؟؟

🚀 @coolycode
وبسایت BrowserStack یک ابزار آنلاین برای تست وب‌سایت‌ها و اپلیکیشن‌ها در مرورگرها و دستگاه‌های مختلف به صورت زنده هستش.

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


امکانات این وبسایت قدرتمند 🚀

تست زنده (Live Testing)
تست وب‌سایت‌ها و اپلیکیشن‌ها بر روی بیش از ۳۰۰۰ دستگاه و مرورگر.


📲 تست اپلیکیشن‌های موبایل
آپلود و تست اپلیکیشن‌های iOS و Android روی دستگاه‌های واقعی‌.


🤖 تست خودکار
اجرای تست‌های خودکار با ابزارهایی مانند Selenium و Appium.


📊 تست عملکرد
بررسی سرعت و عملکرد وبسایت با تنظیمات مختلف شبکه.


🔒 تست محلی (Local Testing)
امکان تست وب‌سایت‌های محلی که روی سرورهای داخلی قرار دارند و هنوز عمومی نشده‌اند.


⚒️ یکپارچه‌سازی با CI/CD
امکان اتصال به ابزارهای CI/CD مانند Jenkin


🌐 تست سازگاری مروگرها
تست وب‌سایت‌ها در نسخه‌های مختلف مرورگرها مانند Chrome، Firefox، Safari، و Edge.


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

#️⃣ #website #browserstack

🚀 @coolycode
هیچوقت فکرشو میکردید بشه طرح های ui داخل فیگما رو با چند تا کلیک به کد تبدیل کرد ... ⁉️💥

ابزار locofy همین الان داره انجامش میده. اونم نه فقط به کد html, css بلکه از Typenoscript و کلی چیزای دیگه پشتیبانی می‌کنه که واقعا برگاتون میریزه :))

از چیا پشتیبانی میکنه ؟ 🚀

طبق ادعای خودش‌ قابلیت این رو داره تا طرح شمارو به هر کدوم از تکنولوژی های زیر تبدیل کنه :

Frameworks
React
Angular
Next
Vue
Gatsby


Design System
MUI
Bootstrap
Ant Design
ChakraUi
Vuetify
...


Other
Javnoscript
Typenoscript
Tailwind
Css
...


البته از تکنولوژی های دیگه ای هم پشتیبانی میکنه و برای هر مرحله از پروژه مثل دانلود کد، دیپلوی و ... برنامه داره که میتونید توی عکس همسن پست ببینید

راستی توی این ویدیو نحوه استفاده ازش رو توضیح داده، به نظرم ببینید جالب بود 🔻

📺 https://youtu.be/yhCtAs--r_Y


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

#️⃣ #figma #tools #AI #uiux

🚀 @coolycode
نحوه خاموش کردن ویندوز

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

روش اول
روی دکمه Start (آیکون ویندوز) در پایین سمت چپ صفحه کلیک کنید.

گزینه Power را انتخاب کنید.

سپس گزینه Shut down را بزنید.


روش دوم
دکمه پاور بر روی لپ تاپ یا کیس را پیدا کنید.

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


از این به بعد میتونی با خیال راحت سیستمت رو خاموش کنی ؛)

#️⃣ #fun

🚀 @coolycode
This media is not supported in your browser
VIEW IN TELEGRAM
راستشو بگید، کدوماتونو برنامه نویسی نجات داد ... :)

#️⃣ #programming

🚀 @coolycode
توی پست جدید اینستاگرام یه سایت بهتون معرفی کردم که سورس کد کلی بک گراند انیمیشنی خفن رو براتون گذاشته که میتونید ازشون توی وبسایتتون استفاده کنید 🤩

💎 لینک ویدیو

#️⃣ #NEWPost #website

🚀 @coolycode
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
Video
دوست دارید ری‌اکشنای پریمیوم رو‌فعال کنیم ؟ 😁🔥
💎 شبه‌کلاس root در CSS 💎

شبه‌کلاس root در CSS به عنصر ریشه (یا بالاترین عنصر) در سند HTML اشاره می‌کنه. این شبه‌کلاس یکی از اجزای کلیدی CSS به شمار می‌ره، به‌ویژه وقتی که از متغیرهای CSS ( نمونه استفاده ازش رو در پست های قبلی داشتیم ) استفاده می‌کنیم.

اولویت ( priority ) در :root به چه شکله ؟ 🚀

شبه‌کلاس هایی مثل hover ,focus و root نسبت به انتخابگرهای تگ ( مثل div یا html ) اولویت بیشتری دارن.

یعنی اگر استایل یکسانی هم در انتخابگر تگ و هم در شبه‌کلاس :root تعریف کنید، استایل :root اعمال خواهد شد 🔻

:root {
--bg-color: lightblue;
}

html {
--bg-color: pink;
}

body {
background-color: var(--bg-color); /* پس‌زمینه آبی روشن خواهد بود */
}


تعاملش با جاوااسکریپت چطوره ؟ 💥

جاوااسکریپت به خوبی این مورد رو هندل کرده و شما میتونید متغیرهای تعریف‌شده در :root رو با جاوااسکریپت به صورت داینامیک تغییر بدید، مثل تغییر تم وبسایت.

مثال :
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

توی کد بالا، مقدار متغیر --primary-color به #e74c3c تغییر می‌کنه، و تمام عناصری که از این متغیر استفاده می‌کردند، به روز می‌شن.


امیدوارم حسابی از این پست لذت برده باشی، اگر دوست داشتید با ری‌اکشناتون بهمون انرژی بدید ❤️

#️⃣ #css #root

🚀 @coolycode
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
دوست دارید ری‌اکشنای پریمیوم رو‌فعال کنیم ؟ 😁🔥
حالا که انقد ری‌اکشن پریمیوم دوست دارید چنلو بوس کنید که فعال شه 🙂😂

اینم لینک حمایتمون، اگر محتوای کانالو دوست دارید با بوست کردن میتونین ازمون حمایت کنید 🔥❤️

https://news.1rj.ru/str/boost/coolycode