اگر هنوز داری نوت‌هات رو توی Google Docs، Notion یا فایل‌های پراکنده نگه می‌داری، یه بار Obsidian رو ببین.

سرویسObsidian یه اپ نوت‌برداریه، ولی بیشتر شبیه یه مغز دوم عمل می‌کنه.

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

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

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

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

یه جور ویکی‌پدیای شخصی خودته.



💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی بهترین منابع برای Front End Design

🌈 Color Sites:
1. colorhunt.co
2. coolors.co
3. color.adobe.com
4. pigment.shapefactory.co

💻 Sites To Download Fonts:
1. dafont.com
2. 1001fonts.com
3. fontsquirrel.com
4. fontfreak.com/fonts-new.htm

🖼 Sites To Download Vector Logos:
1. seeklogo.com
2. logovector.net
3. logotypes101.com
4. logos-vector.com

🔵 Sites To Download Icons:
1. flaticon.com
2. freeicons.io
3. iconstore.co
4. iconfinder.com
5. digitalnomadicons.com
6. iconstore.co

🖌 Brushes Download Sites:
1. brushking.eu
2. brusheezy.com/brushes
3. myphotoshopbrushes.com
4. fbrushes.com
5. gfxfever.com

📁 Sites To Download Files:
1. freepik.com
2. all-free-download.com
3. vecteezy.com
4. freeimages.com

📸 Sites To Download Mockups:
1. mockupsforfree.com
2. mockupworld.co
3. graphicburger.com
4. zippypixels.com

✨ Inspiration Sites:
1. inspirationde.com
2. designspiration.net
3. pinterest.com
4. dribbble.com

🎥 Video Sites:
1. mixkit.co
2. coverr.co
3. motionplaces.com
4. videezy.com

🖼 Photo Sites Without Background:
1. cleanpng.com
2. pngimg.com
3. footyrenders.com
4. pngtree.com

📷 Photo Sites:
1. unsplash.com
2. pexels.com
3. pixabay.com
4. stocksnap.io
5. burst.shopify.com.



💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ریپو Awesome Web Design Tools :

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

https://github.com/nafasebra/awesome-webdesign-tools


💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ریپو Clean Code JavaScript :

مجموعه‌ای از اصول برای نوشتن کدهای تمیزتر و قابل نگهداری‌تر در JavaScript

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

https://github.com/ryanmcdermott/clean-code-javascript


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🎨 تکنیک‌های ایجاد پس‌زمینه فید شده (Faded Background) در CSS

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


🛠️ روش‌های مختلف ایجاد پس‌زمینه فید شده

۱. استفاده از Linear Gradient با Opacity

.section {
  background:
    linear-gradient(
      to right,
      rgb(0 0 0 / 0.5),  /* سیاه با ۵۰٪ شفافیت */
      rgb(0 0 0 / 0)     /* کاملاً شفاف */
    ),
    url(background.png); /* تصویر پس‌زمینه */
}

نکات کلیدی:
از تابع rgb() با پارامتر alpha برای کنترل شفافیت استفاده می‌شود
rgb(0 0 0 / 0.5) یعنی سیاه با ۵۰٪ شفافیت
rgb(0 0 0 / 0) یعنی کاملاً شفاف
می‌توانید رنگ‌های مختلف را با درصد شفافیت متفاوت استفاده کنید

۲. استفاده از RGBA

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

نکات کلیدی:
rgba(r, g, b, alpha) همان rgb(r g b / alpha) است
alpha از ۰ تا ۱ است
۰ = کاملاً شفاف
۱ = کاملاً غیرشفاف
۳. استفاده از رنگ‌های دیگر

.section {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),  /* سفید با ۷۰٪ شفافیت */
      rgba(255, 255, 255, 0)
    ),
    url(background.png);
}

۴. استفاده از رنگ‌های متعدد

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

۵. استفاده از رنگ‌های متعدد با رنگ‌های مختلف

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

نکات کلیدی:
می‌توانید رنگ‌های مختلف را با درصد شفافیت متفاوت استفاده کنید
این روش برای ایجاد افکت‌های پیچیده‌تر استفاده می‌شود


📝 مثال‌های عملی
مثال ۱: پس‌زمینه فید شده برای متن سفید

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

مثال ۲: پس‌زمینه فید شده برای متن سیاه

.hero {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0)
    ),
    url(hero-bg.jpg);
  color: black;
  padding: 60px 20px;
  text-align: center;
}

مثال ۳: پس‌زمینه فید شده برای متن رنگی

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: #ff6b6b;
  padding: 60px 20px;
  text-align: center;
}

🎨 افکت‌های پیشرفته
افکت ۱: پس‌زمینه فید شده با دو رنگ

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0)

),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

افکت ۲: پس‌زمینه فید شده با رنگ‌های مختلف

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

افکت ۳: پس‌زمینه فید شده با رنگ‌های متعدد

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

@Htmlcss_channels

فونت QR Font یک فونت TrueType جالب است که متن را مستقیماً به QR Code تبدیل می‌کند.

با قرار دادن متن داخل براکت، فونت آن را به کد QR تبدیل می‌کند و بقیه متن را مثل یک فونت معمولی نمایش می‌دهد. نسخه‌های مختلف این فونت برای ظرفیت‌های متفاوت در دسترس هستند.

https://github.com/jimparis/qr-font


💎 @Htmlcss_channels  | #HTML #css #JavaScript

۸۰سوال مصاحبه فرانت اند به همراه پاسخ

💎 @Htmlcss_channels  | #HTML #css #JavaScript

۶سایت برای پیدا کردن چالش‌ UIUX :دقیقاً کم‌ کم آمادت میکنن یک Case Study حرفه‌ای بسازی.

1. Daily UI → http://dailyui.co
2. UI Coach → http://uicoach.io
3. UX Challenge → http://uxchallenge.co
4. UX Tools → http://uxtools.co/challenges
5. Fake Clients → http://fakeclients.com
6. Good Brief → http://goodbrief.io


💎 @Htmlcss_channels  | #HTML #css #JavaScript

✅ هوش مصنوعی در سایت 'arxiv' ادغام شده و این سایت به 'autoarxiv' تغییر پیدا کرد.

هوش مصنوعی اضافه شده چه کار می‌کند:
• جستجوی هوشمند: به جای جستجوی کلمه‌کلیدی ساده، با زبان طبیعی می‌توانید مقاله پیدا کنید
• خلاصه‌سازی خودکار: مقالات طولانی را در چند خط خلاصه می‌کند
• پیشنهاد مقالات مرتبط: مقالات مشابه را پیشنهاد می‌دهد• پاسخ به سوال درباره مقاله: می‌توانید از محتوای مقاله سوال بپرسید
• تحلیل روندهای تحقیقاتی: کمک می‌کند موضوعات داغ هر حوزه را بشناسید

https://openresearch.sh/



💎 @Htmlcss_channels  | #HTML #css #JavaScript