#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
دهه نودی تو کوچه خلوت ... 🙂
پست جدید همین الان آپلود شد، هیچی نمیگم برید ببینید :)))😂
🌐 مشاهده پست
پست جدید همین الان آپلود شد، هیچی نمیگم برید ببینید :)))😂
🌐 مشاهده پست
#️⃣ #NEWPost #instagram
🚀 @coolycode
💎 وریبلها در CSS 💎
وریبلها در CSS به شما این امکان رو میدن تا مقادیر تکراری مانند رنگها، اندازهها و فونتها را یکبار تعریف کرده و در کل کدهای CSS خود از آنها استفاده کنید. این قابلیت به افزایش خوانایی و مدیریت بهتر کد کمک میکند.
نحوه تعریف و استفاده از وریبلها 🚀
➊ وریبلها در CSS با استفاده از -- تعریف میشوند و برای دسترسی به آنها از تابع var() استفاده میکنیم
➋ حالا برای استفاده از وریبلها در بخشهای مختلف CSS، کافی است آنها را با تابع var که بالاتر گفتیم فراخوانی کنیم
وریبلها در 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
وبسایت BrowserStack یک ابزار آنلاین برای تست وبسایتها و اپلیکیشنها در مرورگرها و دستگاههای مختلف به صورت زنده هستش.
امکانات این وبسایت قدرتمند 🚀
⌛تست زنده (Live Testing)
📲 تست اپلیکیشنهای موبایل
🤖 تست خودکار
📊 تست عملکرد
🔒 تست محلی (Local Testing)
⚒️ یکپارچهسازی با CI/CD
🌐 تست سازگاری مروگرها
🌐 مشاهده وبسایت 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
Design System
Other
البته از تکنولوژی های دیگه ای هم پشتیبانی میکنه و برای هر مرحله از پروژه مثل دانلود کد، دیپلوی و ... برنامه داره که میتونید توی عکس همسن پست ببینید ⚡
🌐 وبسایت رسمی locofy
ابزار 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
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
هیچوقت فکرشو میکردید بشه طرح های ui داخل فیگما رو با چند تا کلیک به کد تبدیل کرد ... ⁉️💥 ابزار locofy همین الان داره انجامش میده. اونم نه فقط به کد html, css بلکه از Typenoscript و کلی چیزای دیگه پشتیبانی میکنه که واقعا برگاتون میریزه :)) از چیا پشتیبانی…
امیدوارم از این مطلب لذت برده باشید، اگر دوست داشتید با ری اکشناتون بهمون انرژی بدید 😍❤️
●● نحوه خاموش کردن ویندوز ●●
توی این آموزش قراره دو تا از بهترین روشهای خاموش کردن ویندوز رو باهم بررسی کنیم.
➊ روش اول
➋ روش دوم
از این به بعد میتونی با خیال راحت سیستمت رو خاموش کنی ؛)
توی این آموزش قراره دو تا از بهترین روشهای خاموش کردن ویندوز رو باهم بررسی کنیم.
➊ روش اول
روی دکمه Start (آیکون ویندوز) در پایین سمت چپ صفحه کلیک کنید.
گزینه Power را انتخاب کنید.
سپس گزینه Shut down را بزنید.
➋ روش دوم
دکمه پاور بر روی لپ تاپ یا کیس را پیدا کنید.
انگشت خود را بر روی دکمه فشار دهید تا زمانی که سیستم شما خاموش شود.
#️⃣ #fun
🚀 @coolycode
توی پست جدید اینستاگرام یه سایت بهتون معرفی کردم که سورس کد کلی بک گراند انیمیشنی خفن رو براتون گذاشته که میتونید ازشون توی وبسایتتون استفاده کنید ⚡🤩
💎 لینک ویدیو
💎 لینک ویدیو
#️⃣ #NEWPost #website
🚀 @coolycode
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
Video
دوست دارید ریاکشنای پریمیوم روفعال کنیم ؟ 😁🔥
💎 شبهکلاس root در CSS 💎
شبهکلاس root در CSS به عنصر ریشه (یا بالاترین عنصر) در سند HTML اشاره میکنه. این شبهکلاس یکی از اجزای کلیدی CSS به شمار میره، بهویژه وقتی که از متغیرهای CSS ( نمونه استفاده ازش رو در پست های قبلی داشتیم ) استفاده میکنیم.
اولویت ( priority ) در :root به چه شکله ؟ 🚀
شبهکلاس هایی مثل hover ,focus و root نسبت به انتخابگرهای تگ ( مثل div یا html ) اولویت بیشتری دارن.
تعاملش با جاوااسکریپت چطوره ؟ 💥
جاوااسکریپت به خوبی این مورد رو هندل کرده و شما میتونید متغیرهای تعریفشده در :root رو با جاوااسکریپت به صورت داینامیک تغییر بدید، مثل تغییر تم وبسایت.
مثال :
امیدوارم حسابی از این پست لذت برده باشی، اگر دوست داشتید با ریاکشناتون بهمون انرژی بدید ❤️
شبهکلاس 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
اینم لینک حمایتمون، اگر محتوای کانالو دوست دارید با بوست کردن میتونین ازمون حمایت کنید 🔥❤️
https://news.1rj.ru/str/boost/coolycode
Telegram
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
از این کانال حمایت کنید تا بتواند به قابلیتهای اضافی دسترسی پیدا کند.
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
حالا که انقد ریاکشن پریمیوم دوست دارید چنلو بوس کنید که فعال شه 🙂😂 اینم لینک حمایتمون، اگر محتوای کانالو دوست دارید با بوست کردن میتونین ازمون حمایت کنید 🔥❤️ https://news.1rj.ru/str/boost/coolycode
سه نفر حمایت کنن میتونیم استوریم بزاریم🔥😁
البته قابلیت های بیشتری فعال میشه، خلاصه که جینگولای بیشتری به پست ها اضافه میشه 😂