رفقا دمتون گرم تا اینجای کار همراه تیم آوات بودید ، به مناسبت 130 تایی شدنمون هر هفته 10 تا سایت کاربردی میگیم که مربوط به حوضه FrontEnd میشه 🔥❤️
❤4
🚀 ۱۰ سایت کاربردی که هر فرانتاندکار مبتدی بهتره بشناسه
یادمه اوایل کدنویسی، همیشه سردرگم بودم که آموزش رو از کجا دنبال کنم. این لیست همون چیزیه که کاش زودتر پیدا میکردم؛ سیوش کن، به دردت میخوره 👇
1️⃣ مرجع کامل HTML، CSS و JavaScript
developer.mozilla.org
2️⃣ آموزش و راهنمای Performance سایت
web.dev
3️⃣ مقالهها و منابع کاربردی CSS
css-tricks.com
4️⃣ یادگیری JavaScript از صفر تا مباحث پیشرفته
javascript.info
5️⃣ بررسی سازگاری ویژگیها با مرورگرها
caniuse.com
6️⃣ تمرینهای واقعی و پروژهمحور Front-End
frontendmentor.io
7️⃣ محیط آنلاین برای تست و اشتراکگذاری کد
codepen.io
8️⃣ آموزشهای رایگان و پروژهمحور
freecodecamp.org
9️⃣ ساخت و مدیریت پالتهای رنگی
coolors.co
🔟 فونتهای رایگان مناسب استفاده در وب
fonts.google.com
💡 نکته مهم:
لازم نیست همه این سایتها رو همزمان دنبال کنی. هر هفته روی یکی از اونها تمرکز کن و واقعاً ازش استفاده کن؛ نتیجه خیلی محسوستره.
اگه به دردت خورد، سیوش کن و برای یه فرانتاندکار دیگه هم بفرست 🙌
@awat_dev
یادمه اوایل کدنویسی، همیشه سردرگم بودم که آموزش رو از کجا دنبال کنم. این لیست همون چیزیه که کاش زودتر پیدا میکردم؛ سیوش کن، به دردت میخوره 👇
1️⃣ مرجع کامل HTML، CSS و JavaScript
developer.mozilla.org
2️⃣ آموزش و راهنمای Performance سایت
web.dev
3️⃣ مقالهها و منابع کاربردی CSS
css-tricks.com
4️⃣ یادگیری JavaScript از صفر تا مباحث پیشرفته
javascript.info
5️⃣ بررسی سازگاری ویژگیها با مرورگرها
caniuse.com
6️⃣ تمرینهای واقعی و پروژهمحور Front-End
frontendmentor.io
7️⃣ محیط آنلاین برای تست و اشتراکگذاری کد
codepen.io
8️⃣ آموزشهای رایگان و پروژهمحور
freecodecamp.org
9️⃣ ساخت و مدیریت پالتهای رنگی
coolors.co
🔟 فونتهای رایگان مناسب استفاده در وب
fonts.google.com
💡 نکته مهم:
لازم نیست همه این سایتها رو همزمان دنبال کنی. هر هفته روی یکی از اونها تمرکز کن و واقعاً ازش استفاده کن؛ نتیجه خیلی محسوستره.
اگه به دردت خورد، سیوش کن و برای یه فرانتاندکار دیگه هم بفرست 🙌
@awat_dev
❤7
</awat>
zeblo_winblur.rar
دوستان این فایل رو extract کنید و توی مسیر C:\Program Files بریزید
فایل Register.cmd کلیک راست کنید و گزینه run as administrator بزنید بعد از پنج ثانیه ویندوز شما شیشه ای میشه
فایل Register.cmd کلیک راست کنید و گزینه run as administrator بزنید بعد از پنج ثانیه ویندوز شما شیشه ای میشه
💯4
چجوری توی تیلویند کامپوننت ایجاد کنیم؟
بعضی موقع شده چند دکمه یا چند بخش استایل هایی کاملا شبیه به هم دارند این درست نیست به هر کدوم این استایل ها رو دوباره بدیم چون بهینه نیست و استایل ها یکیه و سند مارو شلوغ میکنه برای اینکه از شلوغ شدن صفحه جلوگیری بشه و کد ما تمیز تر و بهینه تر باشه از کامپوننت استفاده میکنیم
برای ایجاد کامپوننت توی تیلویند سی اس اس به سند input.css باید بریم و اونجا کامپوننت های خودمون رو بزاریم
حالا چجوری ؟
ما باید با کد زیر مشخص کنیم که میخوایم کامپوننت ایجاد کنیم:
با کد بالا شما میتونید بیس ایجاد کامپوننت خودتون رو ایجاد کنید داخل کریلی بریسس شما باید یک کلاس نام گذاری کنید طبق سکشنی که دارید میزنید یه کلاس مربوط بدید و داخل اون کلاس شما هم میتونید بصورت سی اس اس خام استایل هاتون رو تعریف کنید هم بصورت تیلویند بصورت سی اس اس خام در پایین مثال میزنم براتون:
با سی اس اس خام مثل مثال بالا میتونید استایلتون رو بدید و کلاس btn رو به سکشن یا دکمتون بدید
میتونید مثل کد بالا استایلتون رو بصورت تیلویند تعریف کنید.
اگ کاربردی بود براتون لایک کنید حتمی
باتشکر.
بعضی موقع شده چند دکمه یا چند بخش استایل هایی کاملا شبیه به هم دارند این درست نیست به هر کدوم این استایل ها رو دوباره بدیم چون بهینه نیست و استایل ها یکیه و سند مارو شلوغ میکنه برای اینکه از شلوغ شدن صفحه جلوگیری بشه و کد ما تمیز تر و بهینه تر باشه از کامپوننت استفاده میکنیم
برای ایجاد کامپوننت توی تیلویند سی اس اس به سند input.css باید بریم و اونجا کامپوننت های خودمون رو بزاریم
حالا چجوری ؟
ما باید با کد زیر مشخص کنیم که میخوایم کامپوننت ایجاد کنیم:
@layer components {}با کد بالا شما میتونید بیس ایجاد کامپوننت خودتون رو ایجاد کنید داخل کریلی بریسس شما باید یک کلاس نام گذاری کنید طبق سکشنی که دارید میزنید یه کلاس مربوط بدید و داخل اون کلاس شما هم میتونید بصورت سی اس اس خام استایل هاتون رو تعریف کنید هم بصورت تیلویند بصورت سی اس اس خام در پایین مثال میزنم براتون:
@layer components {
.btn{
display:flex;
justify-content: center;
align-items: center;
}
}با سی اس اس خام مثل مثال بالا میتونید استایلتون رو بدید و کلاس btn رو به سکشن یا دکمتون بدید
اگر میخواید استایل هاتون رو توی کامپوننت هم بصورت تیلویند باشه باید با @apply این کار رو انجام بدید مثالش رو پایین براتون میزنم:@layer components {
.btn{
@apply flex justify-center items-center;
}
}میتونید مثل کد بالا استایلتون رو بصورت تیلویند تعریف کنید.
اگ کاربردی بود براتون لایک کنید حتمی
باتشکر.
❤11
خب دوستان یه مقاله داریم راجب ساخت header و footer توی جاوا اسکریپت و قرار دادن توی همه صفحات سایت
🤩6❤1
</awat>
خب دوستان یه مقاله داریم راجب ساخت header و footer توی جاوا اسکریپت و قرار دادن توی همه صفحات سایت
اولین راهی که به ذهنتون میاد اینه که توی همه صفحات کد های HTML رو اضافه کنیم ولی خب این روش باعث زیاد شدن کد ها و در نتیجه سنگین شدن سایت میشه
ساخت Header و Footer مشترک برای همه صفحات با JavaScript
اگه چندتا صفحه HTML داری، لازم نیست Header و Footer رو توی همه صفحات کپی کنی. میتونی اونها رو یکبار داخل JavaScript بسازی و در همه صفحات رندر کنی.
📁 ساختار پروژه:
در HTML فقط جای Header و Footer رو مشخص کن:
حالا داخل
نتیجه؟
از این به بعد هر صفحهای که
این روش برای پروژههای ساده و تمرین JavaScript خیلی خوبه و مفاهیم مهمی مثل DOM، innerHTML، Template Literal و Component-like thinking رو هم بهت یاد میده.
بعداً میتونی همین ایده رو حرفهایتر کنی و مثلاً لینک صفحه فعلی رو با کلاس active مشخص کنی.
@awat_dev
اگه چندتا صفحه HTML داری، لازم نیست Header و Footer رو توی همه صفحات کپی کنی. میتونی اونها رو یکبار داخل JavaScript بسازی و در همه صفحات رندر کنی.
📁 ساختار پروژه:
project/
├── index.html
├── about.html
├── contact.html
└── js/
└── components.js
در HTML فقط جای Header و Footer رو مشخص کن:
<div id="header"></div>
<main>
<h1>صفحه اصلی</h1>
</main>
<div id="footer"></div>
<script src="./js/components.js"></script>
حالا داخل
components.js:const header = document.querySelector("#header");
header.innerHTML = `
<header>
<nav>
<a href="index.html">خانه</a>
<a href="about.html">درباره ما</a>
<a href="contact.html">تماس با ما</a>
</nav>
</header>
`;
const footer = document.querySelector("#footer");
footer.innerHTML = `
<footer>
<p>© 2026 My Website</p>
</footer>
`;نتیجه؟
از این به بعد هر صفحهای که
components.js رو لود کنه، Header و Footer رو بهصورت خودکار دریافت میکنه.این روش برای پروژههای ساده و تمرین JavaScript خیلی خوبه و مفاهیم مهمی مثل DOM، innerHTML، Template Literal و Component-like thinking رو هم بهت یاد میده.
بعداً میتونی همین ایده رو حرفهایتر کنی و مثلاً لینک صفحه فعلی رو با کلاس active مشخص کنی.
@awat_dev
❤10🔥1🕊1
📱 چرا در Tailwind CSS بهتره Mobile First طراحی کنیم؟
امروزه بخش بزرگی از کاربران با موبایل وارد سایتها میشن؛ به همین دلیل طراحی از صفحههای کوچکتر شروع کردن، یک روش استاندارد و کاربردیه. در Tailwind CSS هم سیستم Responsive بهصورت Mobile First طراحی شده؛ یعنی استایلهای پایه برای موبایل نوشته میشن و بعد برای صفحههای بزرگتر تغییرات اضافه میشن.
اما چرا این روش بهتره؟
✅ 1. تمرکز روی تجربه کاربر موبایل
وقتی از ابتدا محدودیتهای صفحه کوچک رو در نظر میگیریم، مجبور میشیم فقط عناصر ضروری رو نگه داریم و رابط کاربری سادهتر و کاربردیتری بسازیم.
✅ 2. کد تمیزتر و قابل مدیریتتر
در Tailwind لازم نیست برای هر اندازه صفحه از اول استایل بنویسیم. استایل موبایل بهعنوان پایه قرار میگیره و فقط در breakpointهای بزرگتر تغییرات اضافه میشن. مثلا:
یعنی متن در موبایل وسطچین است و در صفحههای بزرگتر چپچین میشود.
✅ 3. جلوگیری از Overrideهای اضافی
در روش Desktop First معمولا بعداً مجبور میشیم کلی استایل را برای موبایل اصلاح کنیم. اما در Mobile First، ساختار از ابتدا با محدودیتها هماهنگ میشود.
✅ 4. سرعت توسعه بیشتر
با کلاسهای آماده Tailwind میتوانیم سریعتر Responsive Design بسازیم، بدون اینکه مدام Media Queryهای پیچیده بنویسیم.
✅ 5. آیندهنگری بهتر
طراحی Mobile First باعث میشود سایت روی دستگاههای مختلف مثل موبایل، تبلت و دسکتاپ راحتتر گسترش پیدا کند.
🔻 خلاصه:
@awat_dev
امروزه بخش بزرگی از کاربران با موبایل وارد سایتها میشن؛ به همین دلیل طراحی از صفحههای کوچکتر شروع کردن، یک روش استاندارد و کاربردیه. در Tailwind CSS هم سیستم Responsive بهصورت Mobile First طراحی شده؛ یعنی استایلهای پایه برای موبایل نوشته میشن و بعد برای صفحههای بزرگتر تغییرات اضافه میشن.
اما چرا این روش بهتره؟
✅ 1. تمرکز روی تجربه کاربر موبایل
وقتی از ابتدا محدودیتهای صفحه کوچک رو در نظر میگیریم، مجبور میشیم فقط عناصر ضروری رو نگه داریم و رابط کاربری سادهتر و کاربردیتری بسازیم.
✅ 2. کد تمیزتر و قابل مدیریتتر
در Tailwind لازم نیست برای هر اندازه صفحه از اول استایل بنویسیم. استایل موبایل بهعنوان پایه قرار میگیره و فقط در breakpointهای بزرگتر تغییرات اضافه میشن. مثلا:
text-center md:text-left
یعنی متن در موبایل وسطچین است و در صفحههای بزرگتر چپچین میشود.
✅ 3. جلوگیری از Overrideهای اضافی
در روش Desktop First معمولا بعداً مجبور میشیم کلی استایل را برای موبایل اصلاح کنیم. اما در Mobile First، ساختار از ابتدا با محدودیتها هماهنگ میشود.
✅ 4. سرعت توسعه بیشتر
با کلاسهای آماده Tailwind میتوانیم سریعتر Responsive Design بسازیم، بدون اینکه مدام Media Queryهای پیچیده بنویسیم.
✅ 5. آیندهنگری بهتر
طراحی Mobile First باعث میشود سایت روی دستگاههای مختلف مثل موبایل، تبلت و دسکتاپ راحتتر گسترش پیدا کند.
🔻 خلاصه:
Mobile First یعنی اول بهترین تجربه را برای کوچکترین صفحه بساز، بعد امکانات و جزئیات را برای صفحههای بزرگتر اضافه کن. این رویکرد هم با فلسفه Tailwind هماهنگ است و هم باعث میشود کد مرتبتر، قابل توسعهتر و کاربرپسندتر داشته باشیم.
@awat_dev
❤7
توی این پست میخوام چند وبسایت رو بهتون معرفی کنم تا بتونید ازشون برای طراحیهاتون ایده بگیرید.
مثلاً اگه برای طراحی یک دکمه یا بخش خاصی از سایتتون ایدهای ندارید و دنبال الهام گرفتن هستید، این سایتها برای پیدا کردن ایدههای جذاب، عالی هستن:
سایت اول: Behance.net
پلتفرم متعلق به شرکت ادوبی که میتونید توش پروژههای کامل و نمونهکارهای حرفهای طراحان سراسر جهان رو با جزئیات دقیق بررسی کنید.
سایت دوم: Dribbble.com
بهترین مرجع برای دیدن طرحهای بصری و رابط کاربری (UI). اگر دنبال ایدههای سریع و جذاب برای ترکیب رنگ، فرمها و دکمهها هستید، اینجا بینظیره.
سایت سوم: Awwwards.com
جایی برای دیدن سایتهای برنده جایزه! اگر میخواید طراحیهای خلاقانه، ترندهای روز و انیمیشنهای متفاوت وب رو ببینید، حتماً به این سایت سر بزنید.
سایت چهارم: ThemeForest.net
با اینکه یک فروشگاه قالب وبسایت محسوب میشه، اما معدن ایدههای کاربردیه. میتونید با دیدن دموی قالبهای پرفروش، ساختار استاندارد و چیدمان اصولی سایتها رو یاد بگیرید.
سایت پنجم: Mobbin.com
یک آرشیو فوقالعاده از اسکرینشاتِ اپلیکیشنهای واقعی و موفق دنیا. برای ایده گرفتن در زمینه تجربه کاربری (UX) و مسیرهای کاربری (User Flow) بهترین انتخابه.
< @awat_dev />
مثلاً اگه برای طراحی یک دکمه یا بخش خاصی از سایتتون ایدهای ندارید و دنبال الهام گرفتن هستید، این سایتها برای پیدا کردن ایدههای جذاب، عالی هستن:
سایت اول: Behance.net
پلتفرم متعلق به شرکت ادوبی که میتونید توش پروژههای کامل و نمونهکارهای حرفهای طراحان سراسر جهان رو با جزئیات دقیق بررسی کنید.
سایت دوم: Dribbble.com
بهترین مرجع برای دیدن طرحهای بصری و رابط کاربری (UI). اگر دنبال ایدههای سریع و جذاب برای ترکیب رنگ، فرمها و دکمهها هستید، اینجا بینظیره.
سایت سوم: Awwwards.com
جایی برای دیدن سایتهای برنده جایزه! اگر میخواید طراحیهای خلاقانه، ترندهای روز و انیمیشنهای متفاوت وب رو ببینید، حتماً به این سایت سر بزنید.
سایت چهارم: ThemeForest.net
با اینکه یک فروشگاه قالب وبسایت محسوب میشه، اما معدن ایدههای کاربردیه. میتونید با دیدن دموی قالبهای پرفروش، ساختار استاندارد و چیدمان اصولی سایتها رو یاد بگیرید.
سایت پنجم: Mobbin.com
یک آرشیو فوقالعاده از اسکرینشاتِ اپلیکیشنهای واقعی و موفق دنیا. برای ایده گرفتن در زمینه تجربه کاربری (UX) و مسیرهای کاربری (User Flow) بهترین انتخابه.
< @awat_dev />
💯6❤2🔥1
🚨 دوستان، ChatGPT Astra یهجوری قدرتمند ظاهر شده که انگار اومده تو زمین و بازیکنهای قبلی رو یکییکی از بازی خارج کنه....!
این دیگه یه آپدیت ساده نیست؛
انگار یه بازیکن جدید اومده وسط زمین که قراره کل بازی رو عوض کنه! 🥶
این دیگه یه آپدیت ساده نیست؛
انگار یه بازیکن جدید اومده وسط زمین که قراره کل بازی رو عوض کنه! 🥶
🗿6❤1
This media is not supported in your browser
VIEW IN TELEGRAM
قابلیت خفن و جذاب آیفون دوئو تو بخش عکاسی و فیلمبرداری ته خلاقیت و شاهکاره.
سوژه موقع عکاسی میتونه تصویر خودش رو ببینه تا بتونه ژست بهتری بگیره.
یا وقتی که از یه بچه تخمسگ میخواید عکس بگیرید و اذیت میکنه، میتونید کارتون پخش کنید تا حواسش بیاد به سمت دوربین.
@awat_dev
#عمومی
❤2
آچار فرانسه ریسپانسیو در CSS؛ آشنایی با ویژگی
تا حالا براتون پیش اومده که بخواهید یک تصویر، ویدیو یا ظرف (Container) همیشه یک نسبت ابعاد مشخص (مثل مربع ۱:۱ یا مستطیل ۱۶:۹) رو حفظ کنه، حتی وقتی اندازه صفحه نمایش تغییر میکنه؟
قبل از این که ویژگی
چرا باید از
جلوگیری از پرش محتوا (CLS): وقتی تصاویر یا ویدیوها لود میشن، فضای خالی خودشون رو از قبل رزوم میکنن و صفحه ناگهان به هم نمیریزه.
کدنویسی تمیز و کوتاه: نیازی به محاسبات پیچیده ریاضی یا کدهای اضافی نیست.* ریسپانسیو خودکار: به راحتی با تغییر سایز مرورگر، ابعاد عنصر متناسب با نسبت تعیینشده تغییر میکنه.
نحوه استفاده و مثالهای کاربردی
نحوهی نوشتن این ویژگی بسیار ساده است. شما فقط کافیه نسبت عرض به ارتفاع رو به شکل
نکته حرفهای:
شما حتی میتونید مقادیر رو به صورت اعشاری هم وارد کنید؛ مثلاً
aspect-ratioتا حالا براتون پیش اومده که بخواهید یک تصویر، ویدیو یا ظرف (Container) همیشه یک نسبت ابعاد مشخص (مثل مربع ۱:۱ یا مستطیل ۱۶:۹) رو حفظ کنه، حتی وقتی اندازه صفحه نمایش تغییر میکنه؟
قبل از این که ویژگی
aspect-ratio به CSS اضافه بشه، طراحان وب مجبور بودند از ترفندهای عجیبی مثل تکنیک "Padding-bottom hack" (دادن پدینگ درصدی بر اساس عرض) استفاده کنند که کدها رو پیچیده و خواندنشون رو سخت میکرد. اما خوشبختانه امروزه با این ویژگی مدرن، کار بسیار راحتتر شده است.چرا باید از
aspect-ratio استفاده کنیم؟جلوگیری از پرش محتوا (CLS): وقتی تصاویر یا ویدیوها لود میشن، فضای خالی خودشون رو از قبل رزوم میکنن و صفحه ناگهان به هم نمیریزه.
کدنویسی تمیز و کوتاه: نیازی به محاسبات پیچیده ریاضی یا کدهای اضافی نیست.* ریسپانسیو خودکار: به راحتی با تغییر سایز مرورگر، ابعاد عنصر متناسب با نسبت تعیینشده تغییر میکنه.
نحوه استفاده و مثالهای کاربردی
نحوهی نوشتن این ویژگی بسیار ساده است. شما فقط کافیه نسبت عرض به ارتفاع رو به شکل
عرض / ارتفاع جلوی آن بنویسید:.square-box {
width: 100%;
aspect-ratio: 1 / 1;
}
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.hero-banner {
width: 100%;
aspect-ratio: 21 / 9;
}نکته حرفهای:
شما حتی میتونید مقادیر رو به صورت اعشاری هم وارد کنید؛ مثلاً
aspect-ratio: 1.5 دقیقا همان کارکرد aspect-ratio: 3 / 2 رو داره. همچنین ترکیب این ویژگی با object-fit: cover روی تصاویر باعث میشه عکسها بدون به هم خوردن دفرمه شدن، به زیبایی درون قاب خودشان جای بگیرند.❤8
دوستان به نظرتون چرا سایت دیجی کالا به این وسعت و عظمت کمترین و ساده ترین انیمیشن رو داره؟؟؟!!!
❤1
برنامه نویس ها و مدیران بازرگانی دیجی کالا اومدن نشستن یه روز چک کردن دیدن:
با توجه به وضع اقتصادی درخشان کشورمون اکثر مردمی که از دیجی کالا خرید میکنن گوشی های میان رده و حتی رده پایین و ضعیف دارن
اگر از انیمیشن های با کیفیت بالا توی سایت استفاده بشه مردم همین که بیان داخل سایت انقدر اذیت میشن و گوشیشون هنگ میکنه که از سایت میزنن بیرون و در نتیجه فروششون خیلی کم میشه
🔥4🗿4💯1