توی React معمولی، محتوا بیشتر توی مرورگر لود میشه و ممکنه گوگل برای خوندن محتوای صفحه یه کم بیشتر به دردسر بیفته.
ولی Next.js میتونه محتوای صفحه رو از قبل آماده کنه و تحویل گوگل بده، واسه همین سئو کردن سایت باهاش راحتتره.
@awat_dev
ولی Next.js میتونه محتوای صفحه رو از قبل آماده کنه و تحویل گوگل بده، واسه همین سئو کردن سایت باهاش راحتتره.
البته اینجوری نیست که React اصلاً سئو نداشته باشه، ولی برای سایتهای فروشگاهی و محتوامحور، Next.js معمولاً انتخاب بهتریه.
@awat_dev
❤8
اگه یه روز به وجود خدا شک کردید، فقط به این فکر کنید که خدا واقعاً چیه...
اونقدر توی این فکر غرق میشید که یه جایی ذهنتون از ادامه دادن کم میاره؛ نه میتونید درکش کنید، نه میتونید جواب قطعی براش پیدا کنید.
آخرش هم از فکر کردن بهش دست میکشید و ازش فاصله میگیرید، چون ترسیدید...
@awat_dev
اونقدر توی این فکر غرق میشید که یه جایی ذهنتون از ادامه دادن کم میاره؛ نه میتونید درکش کنید، نه میتونید جواب قطعی براش پیدا کنید.
اینجاست ذهنتون در مقابل درک خدا کاملا فلج میشه
آخرش هم از فکر کردن بهش دست میکشید و ازش فاصله میگیرید، چون ترسیدید...
شاید این، فقط یکی از کوچیکترین نشونههای عظمت خدا باشه؛ چیزی که حتی فکر کردن بهش هم میتونه آدم رو به حیرت بندازه.
@awat_dev
1❤11
💾 لوکال استورج در جاوااسکریپت چیه؟
با localStorage میتونیم اطلاعات رو داخل مرورگر ذخیره کنیم؛ بهطوری که بعد از رفرش صفحه یا بستن مرورگر هم باقی بمونن. 🚀
🔹 ذخیره اطلاعات
🔹 دریافت اطلاعات
🔹 حذف یک مقدار
🔹 حذف تمام اطلاعات
📌 نکته مهم: مقادیر LocalStorage بهصورت رشته (String) ذخیره میشن. برای ذخیره آبجکت و آرایه از JSON.stringify() و برای بازیابی اونها از JSON.parse() استفاده میکنیم.
⚠️ اطلاعات حساس مثل رمز عبور رو داخل LocalStorage ذخیره نکنید.
با localStorage میتونیم اطلاعات رو داخل مرورگر ذخیره کنیم؛ بهطوری که بعد از رفرش صفحه یا بستن مرورگر هم باقی بمونن. 🚀
🔹 ذخیره اطلاعات
localStorage.setItem("name", "Mohsen");🔹 دریافت اطلاعات
localStorage.getItem("name");🔹 حذف یک مقدار
localStorage.removeItem("name");🔹 حذف تمام اطلاعات
localStorage.clear();
📌 نکته مهم: مقادیر LocalStorage بهصورت رشته (String) ذخیره میشن. برای ذخیره آبجکت و آرایه از JSON.stringify() و برای بازیابی اونها از JSON.parse() استفاده میکنیم.
⚠️ اطلاعات حساس مثل رمز عبور رو داخل LocalStorage ذخیره نکنید.
❤9
❤2
</awat>
شنبه ها گورستان آرزو های بسیاری از آدم ها بوده که یه روزی قصد داشتن زندگیشونو تغییر بدن، ولی اون شنبه هیچوقت نیومد؛ هیچوقت نمیاد. یه بزرگ @awat_dev
عاقل به کنار دجله تا پل میجست
دیوانهی پا برهنه از آب گذشت...
دیوانهی پا برهنه از آب گذشت...
صائب
❤6🕊3
</awat>
توی مسیر رسیدن به هدف و کار کردن، استمرار و نظم رو به هیچ عنوان دستکم نگیرید!!! هر روز ۲ ساعت کار کردن، بهتر از یه روز ۵ ساعت ترکوندن و دو روز دو ساعت کمتر و چند روز ول کردنه. قرار نیست هر روز بترکونید، قراره هر روز ادامه بدید... قدمهای کوچیک ولی مداوم،…
This media is not supported in your browser
VIEW IN TELEGRAM
❤9
۵ انیمیشن پرکاربرد CSS برای طراحی سایت
1. Fade Up | ورود از پایین
2. Button Hover | افکت هاور دکمه
3. Floating | حرکت شناور
4. Shine Effect | افکت درخشش
5. Pulse | افکت نبض
@awat_dev
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
</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
دوره 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
sabzlearn.ir
آموزش FlexBox پروژه محور + پروژه سایت هاستینگ
دوره آموزش Flexbox پروژهمحور است و در آن کار با این ماژول CSS را یاد میگیرید، همچنین با صفحهآرایی و ریسپانسیو کردن را یک سایت بهصورت عملی آشنا میشوید.
❤10