🔅 Light to Dark mode in CSS



💎 @Htmlcss_channels  | #HTML #css #JavaScript

5 کتاب عالی توی سطوح مختلف برای جاوا اسکریپت 🔥

Eloquent JavaScript (4th Edition)
بهترین کتاب برای یادگیری جاوااسکریپت از پایه با تمرین‌های کاربردی.
You Don't Know JS Yet
مجموعه‌ای عمیق برای درک مفاهیم داخلی و پیشرفته جاوااسکریپت.
JavaScript: The Definitive Guide (7th Edition)
مرجع جامع و کامل برای یادگیری و مراجعه در تمام سطوح.
JavaScript: The Good Parts
آموزش نوشتن کد تمیز و استفاده از بخش‌های قدرتمند زبان.
Secrets of the JavaScript Ninja (2nd Edition)
مناسب برنامه‌نویسان متوسط تا حرفه‌ای برای تسلط بر تکنیک‌های پیشرفته و الگوهای حرفه‌ای.


💎 @Htmlcss_channels  | #HTML #css #JavaScript

تا حالا از AI خواستی برات یک سایت طراحی کنه و آخرش با همون ترکیب همیشگی روبه‌رو شدی؟
گرادیان بنفش، سه‌تا کارت کنار هم، متن‌های بزرگ و یک ظاهر که انگار قبلاً صد بار دیدیش؟ 😅

اینجاست که Taste Skill وارد می‌شه.


پست بعدی رو ببینید 🔻

💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔺مهارت Taste Skill یک مجموعه دستورالعمل برای ابزارهای کدنویسی مبتنی بر هوش مصنوعیه که کمک می‌کنه رابط کاربری‌های حرفه‌ای‌تر، منسجم‌تر و کمتر کلیشه‌ای بسازن.

در واقع خودش فریم‌ورک یا کتابخانه UI نیست؛ یک فایل راهنماست که AI قبل از طراحی و کدنویسی می‌خونه و بر اساسش تصمیم می‌گیره:

• چه فونت و ترکیب‌بندی‌ای مناسب پروژه‌ست
• فاصله‌گذاری‌ها و رنگ‌ها چطور انتخاب بشن
• انیمیشن‌ها چقدر و کجا استفاده بشن
• طراحی چطور با هویت برند هماهنگ بمونه
• از چه الگوهای تکراری و بی‌دلیلی دوری بشه

مثلاً به AI یادآوری می‌کنه که هر صفحه‌ای به گرادیان بنفش، کارت‌های شیشه‌ای یا داشبورد نمایشی نیاز نداره!

این ابزار با سرویس‌ها و ایجنت‌هایی مثل Cursor، Claude Code، Codex، Windsurf، v0 و چند ابزار دیگه قابل استفاده‌ست و به فریم‌ورک خاصی هم محدود نیست.

برای نصب نسخه اصلی می‌تونید از این دستور استفاده کنید:

"npx skills add github.com/Leonxlnx/taste… --skill "design-taste-frontend""

بعد از نصب، AI فایل "SKILL.md" رو می‌خونه و موقع طراحی رابط کاربری، قواعدش رو در نظر می‌گیره.

در مجموع، اگه با AI سایت می‌سازید ولی از خروجی‌های تکراری و بیش‌ازحد «AI‌طور» خسته شدید، Taste Skill می‌تونه مثل یک طراح هنری یا منتقد طراحی کنار ایجنت کدنویسی‌تون عمل کنه.

🔗 tasteskill.dev

📍https://github.com/Leonxlnx/taste-skill

#هوش_مصنوعی #طراحی_رابط_کاربری #برنامه_نویسی #طراحی_وب



💎 @Htmlcss_channels  | #HTML #css #JavaScript

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

سایتِ OriginKit بیشتر از ۲۵۰ کامپوننت انیمیشنی آماده داره؛

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

برای React و Framer قابل استفاده‌ست، به ابزارهای کدنویسی AI هم وصل می‌شه و رایگانه.

https://www.originkit.dev/



#هوش_مصنوعی #طراحی_رابط_کاربری #برنامه_نویسی #طراحی_وب



💎 @Htmlcss_channels  | #HTML #css #JavaScript

یه سایت پیدا کردم که تقریبا هر مشکلی که به خاطر جا افتادن جزئیات توی طراحی کامپوننت‌های UI پیش میاد رو حل می‌کنه.

برای ساختن کارت‌ها، نویگیشن و فرم‌ها، چک‌لیست‌های دقیق و مرحله‌به‌مرحله میده، طوری که دیگه هیچ‌وقت جزئیات ریز و مهم رو از قلم نمی‌ندازی.

checklist.design


💎 @Htmlcss_channels  | #HTML #css #JavaScript

اگه برای ساختن لودر دیگه ایده‌ای نداری، یه نفر Text Streaming، In-line Loaderها و Image Loaderها رو به‌صورت متن‌باز منتشر کرده.

https://generativeloaders.com

همشون رایگانه برای نصبش اینو اجرا کنید:

npm install generative-loaders

💎 @Htmlcss_channels  | #HTML #css #JavaScript

یه اکستنشن خوب به اسم postmate جایگزین بی دردسر postman

تقریبا همه‌چی رو ساپورت می‌کنه GraphQL و WebSocket خیلی بی دردسره.

marketplace.visualstudio.com/items?itemName=PostMate-lab.postmate


💎 @Htmlcss_channels  | #HTML #css #JavaScript

با Three.js میشه سایت‌های تعاملی سه‌بعدی ساخت که نور، آب‌وهوا، دوربین و مدل‌های 3D رو مستقیم داخل مرورگر کنترل می‌کنن.

این پروژه برای ساخت مدل‌ها از Claude Code و برای تکسچر و صدا از Higgsfield استفاده کرده.

Three.js: https://threejs.org/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🎨 اگه برای طراحی سایت یا اپلیکیشن دنبال انیمیشن‌ها و المان‌های آماده هستید، این ابزار می‌تونه کلی از زمان طراحی رو کم کنه.

✨ سرویس OriginKit⁠ یک کتابخانه رایگان از کامپوننت‌های متحرک برای وب‌سایت‌های مدرنه که می‌تونید المان‌های آماده رو بردارید و مستقیم داخل پروژه‌تون استفاده کنید.

🧩 داخلش می‌تونید انواع متن‌های متحرک، پس‌زمینه‌ها، نشانگرها، افکت‌ها و انیمیشن‌های مختلف رو پیدا کنید و به‌جای ساختن همه‌چیز از صفر، سریع‌تر رابط کاربری رو جلو ببرید.

🛠️ این کامپوننت‌ها برای استفاده در پروژه‌های React و Framer طراحی شدن و امکان اتصال به ابزارهای کدنویسی هوش مصنوعی مثل Claude Code و Codex هم در نظر گرفته شده.

🚀 برای طراح‌ها و توسعه‌دهنده‌هایی که زیاد با AI و وایب‌کدینگ کار می‌کنن، OriginKit می‌تونه یه منبع آماده و کاربردی برای ساخت سریع‌تر رابط‌های جذاب باشه.

http://originkit.dev


💎 @Htmlcss_channels  | #HTML #css #JavaScript

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

توی Gradient Lab رنگ‌ها رو انتخاب می‌کنی و جهت ترکیب، میزان محوشدن، سرعت حرکت و روشنایی رو تغییر می‌دی. آخرش هم نتیجه رو به‌شکل عکس، ویدیو یا کد آماده برای سایت می‌گیری.

backgrounds.supply/gradient-lab


💎 @Htmlcss_channels  | #HTML #css #JavaScript

یه نفر یه رابط کاربری ساخته به اسم Sashimi UI که ایده‌ش واقعاً جالبه.

یه UI Library که می‌خواد تا جای ممکن از قدرت خود HTML استفاده کنه؛ بدون dependency، بدون JavaScript، بدون قفل شدن به یه framework خاص و بدون کلی فایل config اضافی. یعنی برای ساخت UIهای مدرن می‌تونی از قابلیت‌های native خود وب مثل dialog، popover، فرم‌ها و interactive elementهای HTML استفاده کنی، در حالی که کدت ساده و نزدیک به خود HTML باقی می‌مونه.

خلاصه فقط HTML و بس :

github.com/yuto-hasegawa/sashimi-ui


💎 @Htmlcss_channels  | #HTML #css #JavaScript

نمونه کد عملی برای پیاده‌سازی CSS View Transitions

🎬 نمونه کد: CSS View Transitions

۱. فعال‌سازی ساده روی همه صفحات

ساده‌ترین راه، فعال‌سازی روی <html> هست. فقط کافیه این CSS رو اضافه کنی:

@view-transition {
navigation: auto;
}

همین! حالا هر جابه‌جایی بین صفحات، خودکار انیمیشن داره.

۲. شخصی‌سازی انیمیشن با @keyframes

می‌تونی تعیین کنی صفحه قدیم چطور محو بشه و صفحه جدید چطور ظاهر بشه:

::view-transition-old(root) {
animation: fadeOut 0.4s ease-out;
}

::view-transition-new(root) {
animation: fadeIn 0.4s ease-in;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-20px);
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
}

۳. انیمیشن اختصاصی برای یک المان خاص

فرض کن می‌خوای وقتی از یه صفحه به صفحه دیگه می‌ری، یه کارت خاص جابه‌جا بشه. کافیه بهش یه view-transition-name بدی:

<article style="view-transition-name: hero-card;">
<h1>تیتر اصلی</h1>
<p>توضیحات کارت</p>
</article>

و تو CSS:

::view-transition-old(hero-card),
::view-transition-new(hero-card) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

۴. مثال کامل: یک صفحه با دو لینک

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>دموی View Transitions</title>
<style>
@view-transition {
navigation: auto;
}

body {
font-family: sans-serif;
padding: 2rem;
background: #f5f5f5;
}

.card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
view-transition-name: main-card;
}

a {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
text-decoration: none;
border-radius: 6px;
}

::view-transition-old(root) {
animation: slideOut 0.3s ease-in;
}

::view-transition-new(root) {
animation: slideIn 0.3s ease-out;
}

@keyframes slideOut {
to { opacity: 0; transform: translateX(-30px); }
}

@keyframes slideIn {
from { opacity: 0; transform: translateX(30px); }
}
</style>
</head>
<body>
<div class="card">
<h1>صفحه اصلی</h1>
<p>روی دکمه زیر بزن تا انیمیشن جابه‌جایی رو ببینی.</p>
<a href="page2.html">برو به صفحه دوم</a>
</div>
</body>
</html>

۵. مثال با JavaScript (برای SPA)

function navigateTo(url) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}

document.startViewTransition(() => {
window.location.href = url;
});
}

💎 @Htmlcss_channels  | #HTML #css #JavaScript

ساخت فرم ثبت‌نام فقط چیدن چندتا فیلد کنار هم نیست؛ نمایش درست خطاها، بررسی امنیت رمز عبور و وضعیت ارسال فرم هم باید درست کار کنه.

که beUI مجموعه‌ای از کامپوننت‌های آماده و قابل شخصی‌سازیه که کدشون رو مستقیم داخل پروژه استفاده می‌کنید.
https://beui.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

برای ساخت هر دکمه، فرم یا حالت بارگذاری لازم نیست CSS رو از صفر بنویسید.

چون UIverse بیش از ۷ هزار کامپوننت آماده و متن‌باز داره؛از دکمه و فیلد ورودی گرفته تا کارت، لودر و چک‌باکس.

هرکدوم رو آنلاین می‌بینید و کدش رو مستقیم داخل پروژه استفاده می‌کنید.

https://uiverse.io/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

یک قالب متن‌باز که URL یک سایت رو می‌گیره، طراحی و اجزاش رو بررسی می‌کنه و با کمک AI Agentها نسخه‌ای از اون رو با Next.js و Tailwind بازسازی می‌کنه.

طراحی، Assetها و Design Tokenها استخراج می‌شن و بخش‌های سایت به‌صورت موازی ساخته می‌شن.

https://github.com/JCodesMore/ai-website-cloner-template


💎 @Htmlcss_channels  | #HTML #css #JavaScript

قابلیت جدید Claude Code با /design برای یک صفحه، طرح و پروتوتایپ بصری می‌سازه. می‌تونید ۲ یا ۳ مسیر متفاوت بخواید، مقایسه‌شون کنید و طرح منتخب رو برای پیاده‌سازی به Claude Code بسپارید

ساخت سه طرح خودکار نیست؛ تعداد گزینه‌ها رو باید در درخواست مشخص کنید.

https://claude.com/product/design


💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ابزارهای سئو با هوش مصنوعی؛ کدام‌یک رایگان هستند؟

ابزارهای سئو مبتنی بر هوش مصنوعی در سال‌های اخیر به کمک تولیدکنندگان محتوا آمده‌اند تا تحقیق کلمات کلیدی، بهینه‌سازی مقالات و تحلیل رقبا را سریع‌تر انجام دهند. در میان ابزارهای شناخته‌شده، Jasper AI دارای نسخه رایگان محدود است، اما امکانات کامل آن پولی است. ابزارهایی مانند Surfer SEO، Semrush، Frase و NeuronWriter نسخه رایگان کامل ندارند و بیشتر با دوره آزمایشی یا امکانات محدود رایگان ارائه می‌شوند. Ahrefs نیز برخی ابزارهای رایگان دارد، اما قابلیت‌های اصلی آن نیازمند اشتراک است. برای شروع بدون هزینه، ابزارهایی مانند Google Search Console، Google Trends و Keyword Planner همچنان گزینه‌های کاربردی برای بررسی وضعیت سایت و پیدا کردن موضوعات مناسب هستند.


💎 @Htmlcss_channels  | #HTML #css #JavaScript

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

؛𝗹𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀.𝗱𝗲𝘃 چند تا کتابخونه آماده برای افکت‌های مدرن UI رو یکجا جمع کرده؛ فعلاً چیزهایی مثل Border Beam، Thinking Orbs، Liquid Metal، Gooey و Image Effects داره و بیش از ۲۰ Variant آماده هم براشون گذاشته. نکته خوبش اینه که می‌تونی سریع Preview بگیری و مستقیم برای پروژه‌هات استفاده کنی.

برای Hero Section، Dashboard، AI Interface، Loading State و سایت‌های Motion-heavy واقعاً می‌تونه ایده‌های خوبی بده؛ مخصوصاً اگه با Claude، Codex یا Cursor سایت می‌سازی و می‌خوای خروجی کمتر Generic باشه.

🔖
https://libraries.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript