</awat>
217 subscribers
54 photos
13 videos
7 files
25 links
🖥 تیم توسعه </awat.dev>
متخصص در توسعه فرانت‌اند
دایرکت 📱
@awat_admin
Download Telegram
گاهی، تنها چیزی که از یک واکنش باقی می‌مونه، اثریه که دیگه نمیشه پاکش کرد...

علم شیمی
علم زندگی



@awat_dev
❤9
۵ انیمیشن پرکاربرد CSS برای طراحی سایت

1. Fade Up | ورود از پایین


.fade-up {
animation: fadeUp .7s ease-out both;
}
@keyframes fadeUp {
from {opacity:0; transform:translateY(20px)}
to {opacity:1; transform:translateY(0)}
}


2. Button Hover | افکت هاور دکمه

.btn-hover {
transition: all .3s ease;
}
.btn-hover:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px #0002;
}


3. Floating | حرکت شناور

.floating {
animation: floating 2.5s ease-in-out infinite;
}
@keyframes floating {
0%,100% {transform:translateY(0)}
50% {transform:translateY(-10px)}
}


4. Shine Effect | افکت درخشش

.shine {
position: relative;
overflow: hidden;
}
.shine::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg, transparent, #ffffff55, transparent
);
animation: shine 3s infinite;
}
@keyframes shine {
0%,70% {left:-100%}
100% {left:200%}
}


5. Pulse | افکت نبض

.pulse {
animation: pulse 1.5s ease-out infinite;
}
@keyframes pulse {
0% {box-shadow:0 0 0 0 #ef444477}
70% {box-shadow:0 0 0 12px #ef444400}
100% {box-shadow:0 0 0 0 #ef444400}
}



نکته: برای استفاده، کلاس موردنظر را به عنصر HTML اضافه کنید.



@awat_dev
❤9
سکوتِ شبِ تهران
1❤6🕊4
بزودی یکسری از دوره های رایگان بعضی از مباحث که فکر میکنم خوبن رو قرار میدم

@awat_dev
❤11
</awat>
بزودی یکسری از دوره های رایگان بعضی از مباحث که فکر میکنم خوبن رو قرار میدم @awat_dev
خب یکسری دوره های مربوط به فرانت اند رو میخوام بزارم براتون

دوره html css ( صوفی لرن ) کامل و جامع رایگان

https://youtube.com/playlist?list=PLOjAN00I0bBc&si=ZjnFSxeRlis9WwHE

دوره فلکس باکس ( سالار حقیقت نیا ) رایگان

https://youtube.com/playlist?list=PLprvbQiR3cN-fVGiLy0DrevvfjJaFUNFq&si=AP6fuKwhV63lN6yT

دوره فلکس باکس ( سبز لرن )

https://sabzlearn.ir/course/flex-box/

دوره فلکس باکس ( میلاد بهرامی ) رایگان

https://youtube.com/playlist?list=PLhpS3tgUDZcpcJ9hfsSXZN0xEbNkBcR0n&si=_r9hahFObfmezdy4

دوره سی اس اس گرید ( سبز لرن )

https://sabzlearn.ir/course/css-grid/

دوره تیلویند ( سالار حقیقت نیا )

https://youtube.com/playlist?list=PLprvbQiR3cN9Mt_rINlJX6UOn4utVPBX2&si=86RV8F_6_4SB3rLI

دوره تیلویتد ( میلاد بهرامی )

https://youtube.com/playlist?list=PLhpS3tgUDZcp1fZLQu5I58ubM8B5ahBya&si=sKVvaBAFt10mcmk0

دوره گیت و گیت هاب ( میلاد بهرامی )

https://youtube.com/playlist?list=PLhpS3tgUDZcpamFNTdjXyRKzFGaBAkcLq&si=s6X7aqx2WXVPpeyK

دوره جاواااسکریپت

صوفی لرن (پیشنهادی) پولی

دوره جاوالسکریپت ( سالار حقیقت نیا )

https://youtube.com/playlist?list=PLprvbQiR3cN_s_scnGOn8hsp0QFHLz4uD&si=4tBMJ--G7f4phwfW

دوره جاوااسکریپت و ریکت ( جوناس )

https://t.me/undefinedee/273
❤10
نادر را دیدم که بوی خون می‌دهد
او ممکن است، تمام روسیه را فتح کند...

قید شده در نامه سفیر روسیه



@awat_dev
❤8🕊2
وبسایت vibiz.ai
برای ایده پردازی از سایت های برند های مختلف مورد علاقتون کاربرد زیادی داره.

بدرد بخور


@awat_dev
❤10
میخوام در مورد سوالی که همیشه مطرح میشه نظر خودمو بگم

همیشه افرادی هستن که براشون سواله آیا با پیشرفت هوش مصنوعی خوبه من حوضه فرانت اند رو ادامه بدم یا نه؟ یا اصلا بیام سمت برنامه نویسی یا نه هوش مصنوعی جای برنامه نویس ها رو میگیره؟

نوع سوال ها فرق داره اما وقتی وارد میشی تهش میرسیم به جایگاه برنامه نویس و هوش مصنوعی

دوستان به نظر من هوش مصنوعی العان در حال حاضر جای برنامه نویس رو نمیگیره و توی کد زدن به برنامه نویس کمک میکنه که سرعت کد زدنش افزایش پیدا بکنه و پروژه رو در زمان کمتری کامل کنه
هوش مصنوعی جای برنامه نویس های جونیور و سینیور رو نمیگیره فقط داره نحوه کار برنامه نویسا رو تغییر میده
هوش مصنوعی همینطور که گفتم یه ابزاره که به برنامه نویس کمک میکنه اما تضمین کننده نتیجه نیست
هوش مصنوعی میتونه کد بزنه اما برنامه نویس باید کد رو تمیز کنه باید امنیت و عملکرد اون کد با نیاز پروژه رو بررسی کنه
در ضمن کد نویسی فقط کد نویسی نیست ، فهم مسئله راه حل برای حل مشکل پروژه معماری دیباگ کردن و تصمیم گیری فنی پروژه بخش مهمی هستن که توسط برنامه نویس انجام میشه و هوش مصنوعی نمیتونه جاش رو بگیره

به جای ترسیدن از هوش مصنوعی یاد بگیریم چطور ازش استفاده کنیم تا بتونیم خروجی بهتری بگیریم


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


@awat_dev
❤11
اگ طرحی ندارید یا فکر میکنید طرح از کجا بیارید هوش مصنوعی
https://stitch.withgoogle.com/
کمکتون میکنه فقط کافیه بگین چه وبسایتی میخواین بهتون دیزاین رو تحویل میده یعنی تو توضیح می‌دی چه سایتی می‌خوای؛ مثلاً فروشگاه لباس فارسی، و هوش مصنوعی بر اساس توضیحاتت طرح صفحات رو تولید می‌کنه.

@awat_dev
❤8
The mountains will remember you...

trying hard


@awat_dev
❤6🕊2
کمیت پایین، کیفیت بالا
کد کمتر، کد با کیفیت تر

پ.ن: کد کمتر به این معنی نیست که کاراییشو از دست بده کمتر کردن کد واسه حذف کارایی نیست، واسه بالا بردن سرعته ای برنامه نویس مو قشنگ.


@awat_dev
❤6🗿3
توی تلگرام باگ جدیدی پیدا شده که با کلیک روی این لینک اکانت تلگرام شما پاک میشه.

روی هر لینکی کلیک نکنید!



@awat_dev
❤8
Education is power But with TARGET

Fact


@awat_dev
❤4🕊2
💻 اصول طراحی گرافیک در وب‌سایت 💻

طراحی یک وب‌سایت حرفه‌ای، نیازمند همکاری مؤثر میان طراحان گرافیک و برنامه‌نویسان است. برای رسیدن به نتیجه‌ای مطلوب، توجه به نکات زیر حائز اهمیت است:

👥 هماهنگی تیمی: پیش از اجرا، درباره جزئیات طرح، اندازه‌ها و محدودیت‌های فنی با یکدیگر گفت‌وگو کرده و هماهنگ شوید.
┈┅┅━✦━┅┅┈
🎨 رنگ‌ها: از رنگ‌هایی هماهنگ با هویت برند استفاده کنید و خوانایی متن‌ها را در اولویت قرار دهید.
🖼 تصاویر و بنرها: کیفیت، ابعاد و حجم تصاویر را متناسب با ساختار سایت انتخاب کنید تا زیبایی و سرعت بارگذاری حفظ شود.
⚙ اصول فـنی: طراحی واکنش‌گرا و سازگاری عناصر بصری با دستگاه‌های مختلف را جدی بگیرید.
┈┅┅━✦━┅┅┈
به یاد داشته باشید که بهترین نتیجه زمانی حاصل می‌شود که طراح گرافیک و برنامه‌نویس، از ابتدا تا مرحله اجرای نهایی، در کنار یکدیگر همکاری کنند...

@awat_dev
❤82
در مورد import و export توی جاوااسکریپت پست بزارم؟
ریکشن بزارید.
❤103
قسمت اول export

در پروژه های کوچیک معمولا تمام کد ها رو توی یک فایل قرار میدیم ولی توی پروژه های بزرگ تر توی یک فایل نوشتن کد ها کار درستی نیست و خوانایی کد رو کم میکنه برای بهتر شدن خوانایی کد میتوانیم کد ها را در فایل جداگانه قرار بدیم و از قابلیت ماژول ها استفاده کنیم.

توی این پست میخوایم در مورد export بگیم و ادامه رو توی پست بعدی براتون می نویسم.

دستور export به ما این اجازه رو میده که متغیر ها و توابع و کلاس ها و سایر قابلیت هایی یک فایل رو برای استفاده توی یک فایل دیگ در دسترس بزاریم

بیاین یک مثال بزنیم برای درک بهتر مثلا شما میخواهید هدر وبسایت خودتان را به صورت داینامیک توی همه ی صفحات نمایش بدید اگر به صورت استاتیک این کار رو بخواید انجام بدید حتمی باید تمام کد های هدر رو توی تمام فایلا بزارید ولی با ماژول ها یک بار اون رو میسازید و export میگیرید و توی تمام صفحات فقط یک خط کد اضافه میکنید با اینکار هم کد خودتون خوانا تر میشه و هم از تکرار کد ها جلوگیری میشه.

بریم تو دل کد که کاربرد واقعی اون رو متوجه بشیم

برای مثال فایلی به نام calculator.js ایجاد میکنیم:


‍‍‍
export const number = 10;

export function sum(a,b){
return a + b;
}

توی این مثال متغیر number و تایع sum با استفاده از export در دسترس ماژول های دیگ قرار گرفتند

یه نکته اینجا وجود داره متغیر ها و توابعی که صادر نشده اند به طور مستقیم از طریق این ماژول قابل وارد کردن نیستند.

مثلا:


const name = "Mohsen";

export const age = 21;

توی این مثال فقط سن صادر شده و نام همچنان داخل همین ماژول باقی میماند


انواع export توی جاوااسکریپت

named export:
برای صادر کردن قابلیت هایی با نام مشخص میتوان چندین خروجی نام دار داشت
default export:
برای تعریف یک خروجی پیشفرض هر ماژول حداکثر یک خروجی پیش فرض دارد

من پیشنهاد میکنم از روش named export استفاده کنید و توی این پست هم همین روش رو توضیح میدم اگر خواستید روش دیفالت اکسپورت هم یاد بگیرید میسپارم به خودتون یه سرچی دربارش بکنید.


توی روش named export میتونیم چند متغیر تایبع یا کلاس را از یک فایل صادر کنیم هر خروجی نام مشخص خودشو داره
روش اول استفاده از export هنگام تعریف

توی این روش ما وقتی تایع یا متغیر را تعریف میکنیم همراهش اکسپورت هم میگیریم مثلا فرض کنید فایلی به نام user.js داریم:

export const name = "mohsen";
export const age = 21;

export function great(){
console.log("Hello World);
};

توی این مثالی که زدم سه خروجی name , age , great داریم با این روش هرکدام از این قابلیت ها میتونند توی فایل های دیگ استفاده بشن

روش دوم استفاده از export در انتهای فایل

ما اول میتونیم متغیر ها تابع ها را تعریف کنیم و بعد همه را انتهای فایل صادر کنیم مثال:

const name = "mohsen";
const age = 21;

function great(){
console.log("Hello World");
};

export { name , age , great};

این روش هم نتیجه روش قبلی رو داره تنها تفاوتش توی محل نوشتن export هست توی روش اول کنار تعریف هر قابلیت نوشته میشه توی روش دوم نام قابلیت ها انتهای فایل مشخص میشه.

حالا بریم سراغ کاربرد این روش

این روش فقط وقتی مفید که یه فایل چند قابلیت مرتبط داشته باشه

مثلا توی فایل calculator.js میتونیم چند تا تابع ریاضی داشته باشیم:

export function sum(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}

export function multiply(a, b) {
return a * b;
};

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

توی این پست export رو توضیح دادم توی پست بعدی نحوه import هم براتون توضیح میدم.

باتشکر.



@awat_dev
❤333
This media is not supported in your browser
VIEW IN TELEGRAM
تو مُفَسِر محبت، تو طلایه‌دار صبحی
فاتح تاریخی من، تو خود سردار صبحی


@awat_dev
15🗿22
if day == "October 29":
celebrate("Cyrus the Great")
else:
pass # Halloween is just a side event 🎃


هالووین بود اون موقع؟؟؟


@awat_dev
6🗿2❤1
این همه اسطوره توی یه قاب؟ رم گوشی کم آورده

تعداد 33 مدال جهان و المپیک در یک قاب


@awat_dev
5❤31
آنچه امروز بر گردن اوست
روایت تمام روز هایی‌ست که کم نیاورده...

استمرار


@awat_dev
42❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤32