Forwarded from Golden Code (@lix)
قابلیت @ supports به ما این امکان رو داده تا بتونیم بررسی کنیم آیا یک ویژگی CSS توسط مرورگر پشتیبانی میشه یا نه.
مثلاً ممکنه یه مرورگر نتونه ویژگیهای جدید رو درست نشون بده.
در صورتیکه از ویژگی پشتیبانی بشه استایل مدنظر اعمال میشه ، و در غیر این صورت میتونیم استایلهای دیگه برای مرورگرهای قدیمیتر تنظیم کنیم با این قابلیت.
(در تصویر مثالش درج شده کامل)
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/codewithshripal/status/1855983339574030540?t=hLQU1LKcGWjs93IvrIrsWA&s=35
مثلاً ممکنه یه مرورگر نتونه ویژگیهای جدید رو درست نشون بده.
در صورتیکه از ویژگی پشتیبانی بشه استایل مدنظر اعمال میشه ، و در غیر این صورت میتونیم استایلهای دیگه برای مرورگرهای قدیمیتر تنظیم کنیم با این قابلیت.
(در تصویر مثالش درج شده کامل)
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/codewithshripal/status/1855983339574030540?t=hLQU1LKcGWjs93IvrIrsWA&s=35
👏1
Forwarded from 🎄 یک برنامه نویس تنبل (The Lazy 🌱 Raymond)
🔶 کدوم یک از فریم ورک های CSS در پروژه استفاده کنیم؟
دو فریم ورک معروف در دنیای CSS داریم: ۱- بوت استرپ (Bootstrap) ۲- تیلویند (TailwindCSS)
۱- بوت استرپ (Bootstrap) :
فریم ورک بوت استرپ رسپانسیو سازی و سرعت توسعه بالایی داره و هم سازگار با جاوا اسکریپت است. دارای سیستم گرید قدرتمند برای رسپانسیو سازی المان ها است و قابلیت شخصی سازی خوبی دارد. اگر در پروژه ای می خواهید مداوم تغییراتی اعمال کنید, فریم ورک بوت استرپ پیشنهاد می کنم که دردسرهای شخصی سازی با دستورات خاص برای اعمال کلاس ها را ندارید و دارای کامپوننتهای آماده است.
۲- تیلویند (TailwindCSS) :
با استفاده از تیلویند (Tailwind CSS) می توانید کلاسهای از پیش تعریف شده، به سرعت رابطهای کاربری سفارشی و واکنشگرا ایجاد کنید و رسپانسیو سازی و قابلیت های شخصی بالایی دارد و هم سازگار با جاوا اسکریپت است. اگر در پروژه تغییرات چندانی ندارد و نیازی به اعمال مداوم کلاس ها ندارید رو تیلویند (Tailwind CSS) پیشنهاد می کنم. اما یه سری ایراداتی هست که پیچیدگی در خوانایی کدهای HTML دارد و نیاز به تنظیمات اولیه, وابستگی به ابزارهای ساخت (Build Tools) مانند Webpack، PostCSS یا Vite برای اعمال کلاس ها و دستورات خاص دارید.
#CSS
@TheRaymondDev
دو فریم ورک معروف در دنیای CSS داریم: ۱- بوت استرپ (Bootstrap) ۲- تیلویند (TailwindCSS)
۱- بوت استرپ (Bootstrap) :
فریم ورک بوت استرپ رسپانسیو سازی و سرعت توسعه بالایی داره و هم سازگار با جاوا اسکریپت است. دارای سیستم گرید قدرتمند برای رسپانسیو سازی المان ها است و قابلیت شخصی سازی خوبی دارد. اگر در پروژه ای می خواهید مداوم تغییراتی اعمال کنید, فریم ورک بوت استرپ پیشنهاد می کنم که دردسرهای شخصی سازی با دستورات خاص برای اعمال کلاس ها را ندارید و دارای کامپوننتهای آماده است.
۲- تیلویند (TailwindCSS) :
با استفاده از تیلویند (Tailwind CSS) می توانید کلاسهای از پیش تعریف شده، به سرعت رابطهای کاربری سفارشی و واکنشگرا ایجاد کنید و رسپانسیو سازی و قابلیت های شخصی بالایی دارد و هم سازگار با جاوا اسکریپت است. اگر در پروژه تغییرات چندانی ندارد و نیازی به اعمال مداوم کلاس ها ندارید رو تیلویند (Tailwind CSS) پیشنهاد می کنم. اما یه سری ایراداتی هست که پیچیدگی در خوانایی کدهای HTML دارد و نیاز به تنظیمات اولیه, وابستگی به ابزارهای ساخت (Build Tools) مانند Webpack، PostCSS یا Vite برای اعمال کلاس ها و دستورات خاص دارید.
#CSS
@TheRaymondDev
Forwarded from کدنویس یکروزه (پدرام رحیمی)
لینکهای فراگیری Javascript
علاوه بر اینکه در یک پُست هشتگ های کانال رو معرفی کرده ام، حالا لینکهایی از مطالب مربوط جاوااسکریپت رو هم براتون میذارم که دوره کنید:
- کار با Local storage دیتابیس داخلی
- مشکلات محاسباتی در جاوااسکریپت
- روش ساخت برنامه تست چند جوابی
- چهار فرآیند CRUD در جاوااسکریپت
- آموزش Typescript یا جاوااسکریپت۶
- یک برنامه ی محاسباتی جاوااسکریپت
- جزوه ی مدرن جاوااسکریپت فارسی
- قفل گذاری روی برنامه ی تحت وب
- جزوه ی نصب و آموزش Node.js
- روش ساخت اَپ تک صفحه در Vue.js
- روش ساخت تاس با ۵ خط کدنویسی
علاوه بر اینها روی هشتگ زیر بزنید:
#javascript
علاوه بر اینکه در یک پُست هشتگ های کانال رو معرفی کرده ام، حالا لینکهایی از مطالب مربوط جاوااسکریپت رو هم براتون میذارم که دوره کنید:
- کار با Local storage دیتابیس داخلی
- مشکلات محاسباتی در جاوااسکریپت
- روش ساخت برنامه تست چند جوابی
- چهار فرآیند CRUD در جاوااسکریپت
- آموزش Typescript یا جاوااسکریپت۶
- یک برنامه ی محاسباتی جاوااسکریپت
- جزوه ی مدرن جاوااسکریپت فارسی
- قفل گذاری روی برنامه ی تحت وب
- جزوه ی نصب و آموزش Node.js
- روش ساخت اَپ تک صفحه در Vue.js
- روش ساخت تاس با ۵ خط کدنویسی
علاوه بر اینها روی هشتگ زیر بزنید:
#javascript
Telegram
کدنویس یکروزه
دسترسی به مطالب کانال:
مبتدی #beginner
گرافیک #graphics
بانک #database
کدها #code
محیط #ide
ابزارها #tools
بازی #game
کتاب #book
آندروید…
مبتدی #beginner
گرافیک #graphics
بانک #database
کدها #code
محیط #ide
ابزارها #tools
بازی #game
کتاب #book
آندروید…
Forwarded from LearnPOV | لرن پی او وی
بررسی کامل فریمورک TailwindCss 🚀
تیلویند چیه اصلا ⁉️
مزایا ✅
🎨 قابلیت کاستومایز کردن بسیار بالا
❌ معایب
⏳ زمان توسعه نسبتاً طولانیتر
❌ محدودیت در طراحیهای پیچیده
➖➖➖➖➖➖➖➖➖
تیلویند چیه اصلا ⁉️
تیلویند درواقع یه فریمورک CSSای سبک برای طراحی سایته که به جای نوشتن کدهای جداگانهی CSS، از کلاسهای آماده استفاده میکنی یا به اصطلاح همون utility ها.
مثلاً به جای اینکه توی فایل CSS بنویسی دکمه پسزمینه آبی و متن سفید داشته باشه، فقط توی HTML کلاسهای bg-blue-500 و text-white رو اضافه میکنی.
مزایا ✅
🎨 قابلیت کاستومایز کردن بسیار بالا
یکی از مهم ترین قابلیت های تیلویند این مورده، چون شما میتونید کلاسهای سفارشی، تمها، و حتی پلاگینهای اختصاصی خودتون رو بسازید.🔝 سبک و بهینه
تیلویند فقط کلاسهایی رو که در پروژه استفاده شدهاند، در خروجی نهایی تولید میکنه (با استفاده از PurgeCSS). این باعث میشه که فایلهای CSS نهایی بسیار کوچکتر از فریمورکهایی مثل Bootstrap باشن.💡 یادگیری نسبتاً ساده
در مقایسه با فریمورکهایی که نیاز به یادگیری سیستم گرید و کامپوننتهای از پیش ساختهشده دارند، یادگیری Tailwind آسونتره، مخصوصاً برای کسایی که با CSS آشنایی خوبی دارن، ولی خب اولش یه تایم خوبی رو ازتون میگیره تا خوب و دقیق تر باهاش آشنا بشید.
❌ معایب
⏳ زمان توسعه نسبتاً طولانیتر
چون Tailwind کامپوننتهای آماده (مثل دکمه، فرم، مودال) ارائه نمیده، شما باید این موارد رو خودتون بسازید و این میتونه زمانگیر باشه، مگر اینکه از یک کتابخانهی مبتنی بر Tailwind مثل DaisyUI یا Flowbite استفاده کنید.⁉️ فرآیند ریسپانسیو سازی دشوارتر
تیلویند بر خلاف برخی از لایبرری ها، یک سیستم گرید آماده نداره ولی با کلاسهای responsive utility-first مثل sm:, md:, lg: این کار کاملاً امکانپذیر است، صرفا شیوه اینکار متفاوت تره و خودتون باید انجامش بدید.
❌ محدودیت در طراحیهای پیچیده
با وجود انعطافپذیری بالا، در برخی موارد خاص، ممکنه که Tailwind قادر به پشتیبانی از برخی طراحیهای خیلی پیچیده نباشه و شما مجبو به کدنویسی مستقیم با CSS بشید.
#CSS | #Tailwind
𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
➖➖➖➖➖➖➖➖➖
Forwarded from LearnPOV | لرن پی او وی
🔳 مقایسه Tailwind و Bootstrap
تیلویند | Tailwind
بوت استرپ | Bootstrap
📊 نتیجه گیری
➖➖➖➖➖➖➖➖➖
همونطور که در جریان هستین؛ تیلویند و بوت استرپ دوتا از محبوب ترین فریمورک های css هستن که خیلیا وقتی میخوان یه css فریمورک انتخاب کنن؛ واسه انتخاب یکی از این دوتا توی دوراهی میمونن.
البته که توی چند سال اخیر استفاده از تیلویند افزایش بسیار چشم گیری داشته و محبوبیت بوتاسترپ خیلی کمتر شده و ما میخوایم توی این پست این مسئله رو به طور کامل باز کنیم و ببینیم چه مزیت ها و معایبی دارند هردوشون
تیلویند | Tailwind
مزایا ✅
➊ قابلیت کاستومایز سازی بسیار بالا
➋ فوقالعاده سبک و بهینه، بخاطر ساختارش
➌ یادگیری نسبتاً ساده
➍ پروسه استایلدهی سریع.
معایب ❌
➊ محدودیت در طراحیهای پیچیده
➋ جدا نبودن استایل ها و HTML، که میتونه باعث شلوغ شدن کدها بشه، و خب این مورد توی بوتاسترپ کمتر دیده میشه چپن کامپوننت های از پیش اماده داره
بوت استرپ | Bootstrap
مزایا ✅
➊ وجود کامپوننت های از پیش آماده
➋ وجود grid system برای ریپانسیو سازی
معایب ❌
➊ شباهت زیاد به بقیه سایت هایی که از بوتاسترپ استفاده میکنند و یونیک نبودن
➋ نیاز مند تایم بیشتر برای یونیک کردن کامپوننت ها
➌ حجم بالا و تاثیر منفی بر روی پرفرمونس، به دلیل عدم وجود بهینه سازی های مناسب
البته مورد سوم توی بوتاسترپ ۵ بهتر شده 🔺
📊 نتیجه گیری
از این مقایسه میشه نتیجه گرفت که برای توسعه پروژه هایی که دیزاین منحصر به فردی دارن و در مقیاس بزرگ تری هستن، بهتره که از Tailwind استفاده بشه؛ ولی برای پروژه هایی که تایم کمی دارن و یا دیزاین و پرفورمنس در اولویت نیست، بوت استرپ هم میتونه انتخاب خوبی باشه ✅
#framework #css #tailwind
𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
➖➖➖➖➖➖➖➖➖
Forwarded from کدنویس یکروزه
تاس سه بُعدی فقط با CSS
با این برنامهی بسیار جالب که فقط با اسکریپت CSS بسیار هنرمندانه تاس های واقعی را شبیه سازی کرده می توان بدون صدا تخته نرد هم بازی کرد!
برای چرخش تاس ها و انیمیشن نرم اونها هم از جاوااسکریپت استفاده شده.
کدنویسی با هوش مصنوعی DeepSeek
#javascript #css #html
با این برنامهی بسیار جالب که فقط با اسکریپت CSS بسیار هنرمندانه تاس های واقعی را شبیه سازی کرده می توان بدون صدا تخته نرد هم بازی کرد!
برای چرخش تاس ها و انیمیشن نرم اونها هم از جاوااسکریپت استفاده شده.
کدنویسی با هوش مصنوعی DeepSeek
#javascript #css #html
Forwarded from 🎄 یک برنامه نویس تنبل (The Lazy 🌱 Raymond)
🔶 جایگزین های رنگ سیاه #000000 در CSS
Obsidian | #0B1215 | ابسیدین
Licorice | #1A1110 | شیرین بیان
Onyx | #353839 | عقیق
Black Raisin | #242124 | کشمش سیاه
Arsenic | #3B444B | آرسینک
Oil Black | #0C0C0C | نفت سیاه
Ebony | #555D50 | آبنوس
Jet Black | #0E0E10 | کهربایی
Black Olive | #3B3C36 | زیتونی
Outer Space | #414A4C | برون فضا
Charcoal | #35454F | زغال سنگی
</Elmira Khazaei>
#CSS
@TheRaymondDev
Obsidian | #0B1215 | ابسیدین
Licorice | #1A1110 | شیرین بیان
Onyx | #353839 | عقیق
Black Raisin | #242124 | کشمش سیاه
Arsenic | #3B444B | آرسینک
Oil Black | #0C0C0C | نفت سیاه
Ebony | #555D50 | آبنوس
Jet Black | #0E0E10 | کهربایی
Black Olive | #3B3C36 | زیتونی
Outer Space | #414A4C | برون فضا
Charcoal | #35454F | زغال سنگی
</Elmira Khazaei>
#CSS
@TheRaymondDev
Forwarded from FullstacksJS — Academy
ریویو پروژه NextJS
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو میکنیم.
مشاهده ویدئو
درباره ماب ریویو:
ماب ریویو یه رویداد دوستانه و خودمونی برای انتقال تجربه دانشه.
توی این رویداد دور هم جمع میشیم تا یک سورس کد رو با هم ریویو کنیم و درباره پرکتیسهای بهتر و دلایلش صحبت کنیم.
مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!
15:22 چطوری یک خط خالی توی کد روی استخدام شدن شما تاثیر میذاره؟
31:30 اضافه کردن فرمتر و لینتر
33:03 از public چیزی ایمپورت نکنید
34:47 کی و چطوری باید کامپوننتمون رو بشکنیم؟
42:35 مسئله useless fragment
43:51 یکپارچگی پیاده سازی و اسم گذاری
45:15 مسئله layout
48:04 مسئله اسم گذاری
53:46 بررسی کامپوننت Banner
55:11 چرا نباید از z-index و overflow زیاد استفاده کنید
55:54 تعداد خطهای کامپوننت Code Smell حساب میشه.
57:42 نحوده درست مدیریت z-index
59:51 اصل Single Responsibility تو فرانت اند
01:02:52 چه چیزهایی رو نباید توی کامپوننت برد؟
1:08:55 درک مسئله Spacing
1:11:07 پیاده سازی درست تم dark و light با taildinw
1:16:23 انکپسوله کردن مسئولیت های کامپوننت ها
1:20:07 کی از margin استفاده کنیم کی از padding
1:22:00 از grid و flex تو در تو استفاده نکنید.
1:27:34 به CSS فحش ندیم
1:28:32 فرق بین space و gap توی tailwind
1:30:25 جمع بندی
#fullstacksjs #mobreview #css #react #typescript #nextjs
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو میکنیم.
مشاهده ویدئو
درباره ماب ریویو:
ماب ریویو یه رویداد دوستانه و خودمونی برای انتقال تجربه دانشه.
توی این رویداد دور هم جمع میشیم تا یک سورس کد رو با هم ریویو کنیم و درباره پرکتیسهای بهتر و دلایلش صحبت کنیم.
مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!
15:22 چطوری یک خط خالی توی کد روی استخدام شدن شما تاثیر میذاره؟
31:30 اضافه کردن فرمتر و لینتر
33:03 از public چیزی ایمپورت نکنید
34:47 کی و چطوری باید کامپوننتمون رو بشکنیم؟
42:35 مسئله useless fragment
43:51 یکپارچگی پیاده سازی و اسم گذاری
45:15 مسئله layout
48:04 مسئله اسم گذاری
53:46 بررسی کامپوننت Banner
55:11 چرا نباید از z-index و overflow زیاد استفاده کنید
55:54 تعداد خطهای کامپوننت Code Smell حساب میشه.
57:42 نحوده درست مدیریت z-index
59:51 اصل Single Responsibility تو فرانت اند
01:02:52 چه چیزهایی رو نباید توی کامپوننت برد؟
1:08:55 درک مسئله Spacing
1:11:07 پیاده سازی درست تم dark و light با taildinw
1:16:23 انکپسوله کردن مسئولیت های کامپوننت ها
1:20:07 کی از margin استفاده کنیم کی از padding
1:22:00 از grid و flex تو در تو استفاده نکنید.
1:27:34 به CSS فحش ندیم
1:28:32 فرق بین space و gap توی tailwind
1:30:25 جمع بندی
#fullstacksjs #mobreview #css #react #typescript #nextjs
YouTube
MobReview 6: بررسی کد ریاکت و نکست جی اس
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو میکنیم.
مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!…
مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!…
Forwarded from 🎄 یک برنامه نویس تنبل (The Lazy 🌱)