✅ آموزش مینفی کردن کدها در ویندوز با استفاده از Git، می‌توانید از ابزارهایی مانند Terser (برای جاوا اسکریپت) یا cssnano (برای CSS) استفاده کنید. فرض می‌کنیم که شما Node.js و npm را نصب کرده‌اید. مراحل زیر را دنبال کنید:

1⃣ ابتدا از ترمینال یا CMD دستور زیر را برای نصب Terser و cssnano اجرا کنید:

npm install terser cssnano --save-dev

2⃣ نوشتن اسکریپت در فایل package.json خود، یک اسکریپت برای مینفی کردن فایل‌ها اضافه کنید. مانند زیر:

{
  "scripts": {
    "minify-js": "terser src/**/*.js -o dist/app.min.js",
    "minify-css": "cssnano src/**/*.css dist/styles.min.css"
  }
}

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

npm run minify-js
npm run minify-css

3⃣ اگر می‌خواهید این پروسه را قبل از کامیت کردن (commit) خودکار انجام دهید، می‌توانید از git hooks استفاده کنید. شما می‌توانید pre-commit hook را ایجاد کنید که مینفی کردن را انجام دهد.

4⃣ برای این کار می‌توانید از husky استفاده کنید:

npx husky-init && npm install

5⃣ سپس فرمان زیر را برای فعال‌سازی pre-commit hook اضافه کنید:

npx husky add .husky/pre-commit "npm run minify-js && npm run minify-css"

🔘 حالا هر بار که شما یک commit انجام می‌دهید، کدهای شما به طور خودکار مینفی خواهد شد.

#وب #گیت #css #js
🌈 Web_Designer98.t.me

🔸کد آماده سازنده متن دست نویس

🔹ما کد ایجاد یک تولید کننده متن را می گذاریم که در آن می توانید یک فونت را انتخاب کنید و سپس این متن را به صورت تصویر دانلود کنید.

💻 کد را دریافت کنید

#html #css #js #web #php
🌈 Web_Designer98.t.me

🔸️ابزار خوبی که به شما امکان می دهد ترتیب اجرای کدهای JS را به وضوح مشاهده کنید

🔹️می توانید نمونه های آماده را انتخاب کنید یا کد خود را وارد کنید؛ نتیجه را مشاهده کنید؛ برای درک کلی جاوا اسکریپت بسیار مفید است

🌐 https://www.jsv9000.app/
🌐 https://github.com/Hopding/js-visualizer-9000-client

#is #web #html #css

🌈 Web_Designer98.t.me

🚀 آموزش سریع برنامه‌نویسی با OverAPI! 🌐

آیا به دنبال یک مرجع سریع برای سینتکس‌ها و مثال‌ها در زبان‌ها و فناوری‌های مختلف هستید؟ OverAPI برای توسعه‌دهندگان front-end، مخصوصاً کسانی که با HTML، CSS، جاوا اسکریپت و موارد دیگر کار می‌کنند، بسیار مفید است! 🖥️💡

📌 لینک مستقیم: overapi.com

#OverAPI #FrontendDev #WebDevelopment #HTML #CSS #JavaScript #CodingTips #DeveloperTools

🌈 Web_Designer98.t.me

✨ افکت جدید اپل: "شیشه مایع"! ✨

برای کسانی که این افکت رو از دست دادن، اپل با طراحی جدیدش درخشش خاصی به دنیای وب اضافه کرده. 💻💫

علاقه‌مندان با استفاده از فیلترهای HTML، CSS و SVG موفق به بازسازی این جلوه زیرلایه شدن. البته این افکت در مرورگر کروم به زیبایی کار می‌کنه، اما متاسفانه در سافاری مشکلاتی داره! 😅

👉 برای دیدن این اثر خلاقانه، لینک زیر رو بررسی کنید: 
🔗 مشاهده افکت در CodePen

#اپل #شیشه_مایع #HTML #CSS #SVG #طراحی #وب #کروم #سافاری #نوآوری

🆔 @Web_Designer98

📢 خبر داغ برای توسعه‌دهندگان و علاقه‌مندان وب! 💻✨

افکت جدید اپل با استفاده از فیلترهای HTML، CSS و SVG به زیبایی در وب بازسازی شد! 🔥

اگر طراحی جدید "شیشه مایع" اپل را از دست داده‌اید، حالا می‌توانید با کلیک روی لینک زیر این جلوه منحصربه‌فرد را ببینید: 🌈👇

🔗 مشاهده افکت شیشه مایع

نکته جالب: این افکت در مرورگر کروم به خوبی کار می‌کند، اما متاسفانه در سافاری قابل مشاهده نیست! 😕💔

#اپل #شیشه_مایع #HTML #CSS #SVG #توسعه_وب #طراحی_جذاب #کروم #سافاری #برنامه‌نویسی

🆔 @Web_Designer98

🚀✨ افکت تایپ جالب برای وب‌سایت شما!

🔥 آیا به دنبال یک افکت جذاب برای متن‌های وب‌سایتتان هستید؟ با افکت تایپ می‌توانید به راحتی عرض متن را به صورت افزایشی و جذاب تغییر دهید! فقط کافیه چند خط CSS بنویسید. 🔤💻

🔹 کد CSS:

.typing-effect {
  width: 10ch; /* حداکثر عرض */
  overflow: hidden; /* پنهان کردن Overflow */
  animation: typing 1s steps(10) infinite alternate-reverse; /* انیمیشن افکت تایپ */
}

@keyframes typing {
  from { width: 0ch; } /* شروع از عرض صفر */
}

✨ نکته: این افکت فقط با فونت‌های تک فاصله‌ای کار می‌کند. استفاده از این تکنیک به متن‌های شما روح و زندگی می‌بخشد! 😍🎉

برای دیدن این افکت در عمل، کد را در پروژه‌تون امتحان کنید و نظرات‌تون رو به ما بگید! 💬👇

#CSS #WebDesign #Animation #TypingEffect

🆔 @Web_Designer98

🌟 آیا به دنبال راهی سریع برای بررسی ویژگی‌های HTML/CSS در خبرنامه‌های ایمیلی هستید؟ 📧

جواب‌ها رو در caniemail.com پیدا کنید! این وبسایت شبیه به «آیا می‌توانم استفاده کنم» است، اما برای کلاینت‌های ایمیل. 🙌

به راحتی می‌توانید پشتیبانی از ویژگی‌های مورد نیاز خود را در Gmail، Outlook، iOS و دیگر برنامه‌های ایمیل بررسی کنید. ✅

#HTML #CSS #EmailMarketing #caniemail #WebDevelopment #Newsletter

🆔 @Web_Designer98

🌟 آیا می‌خواهید بدانید کدام ویژگی‌های HTML/CSS در ایمیل‌ها کار می‌کنند؟ 📧

به کمک caniemail.com می‌توانید به سرعت بررسی کنید! 🔍 این سایت مشابه «Can I use» است، اما مختص کلاینت‌های ایمیل.

✅ پشتیبانی ویژگی‌ها در Gmail، Outlook، iOS و سایر کلاینت‌های ایمیل را به راحتی کشف کنید! 🌐

🔗 caniemail.com

#HTML #CSS #EmailDesign #WebDevelopment #TechTools #EmailClient

🆔 @Web_Designer98

🚀 50 پروژه فرانت‌اند برای یادگیری و تمرین!

💻 در این مخزن، 50 پروژه فرانت‌اند از صفر برای کمک به توسعه‌دهندگان عزیز قرار داده شده است.

📚هر پروژه شامل پوشه مخصوص خود و فایل‌های لازم: HTML، CSS، JavaScript، React، Bootstrap و Tailwind CSS است. این فرصتی عالی برای یادگیری و بهبود مهارت‌های وب‌دولوپمنت شماست!

🌐 لینک پروژه‌ها رو اینجا ببینید: کلیک کنید!

#فرانت_اند #برنامه_نویسی #وب_دولوپمنت #پروژه_فرانت_اند #یادگیری #توسعه_دهنده #HTML #CSS #JavaScript #React #Bootstrap #TailwindCSS

🆔 @Web_Designer98