Hide and Safeguard Emails from Bots With This Laravel Package https://laravel-news.com/hide-and-safeguard-emails-from-bots-in-laravel-with-muddle

توی این ویدیو سعی کردم تا چند تا از مهم ترین نکاتی رو که میتونن به پرفورمنس شما به عنوان یک برنامه نویس خیلی کمک بکنند رو با چاشنی طنز بیان کنم، اگر دوست داشتید حتما ببینید جذابه ؛))

راستی تموم سعیمون این هست که که هر روز ویدیو های با کیفیت تری براتون بسازیم، اگر نکته ای به ذهنتون رسید حتما بهم بگید 🫰❤️

🌐 مشاهده پست

#️⃣ #NEWPost | #tips

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

#tips

واقعا نکته مهمیه رفقا
به نظر من حتما بهش توجه کنید چون یسریا میان سراغ برنامه نویسی با این دید که قراره پول زیادی به دست بیارن با اینکه اصلا داستان اینجوری نیست و به این شکل عمل نمیکنه. نه برنامه نویسی و نه هیچ شغل دیگه ای.

برید دنبال کاری که بهش علاقه دارید، پول میاد خودش !

💎 همه چیز در مورد سرور ها 💎

🗄️ سرور چیه ؟

خیلی ساده بخوایم بگیم درواقع سرور یک کامپیوتر همیشه روشن و قدرتمنده که متصل به اینترنته که خدمات مختلفی رو ارائه میده.

🔍 چه کاربرد هایی داره ؟

میزبانی وب‌سایت‌ها

ذخیره‌سازی فایل‌ها

سرور ایمیل

سرورهای بازی

پایگاه داده

امنیت و شبکه

🚀 انواع سرورها

➊ سرور فیزیکی

یک دستگاه سخت‌افزاری قوی و مستقله که در دیتاسنترها نگهداری می‌شه

سرور فیزیکی مناسب پروژه‌های بزرگ و سازمانیه.

➋ سرور مجازی (VPS)

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

این نوع سرور مناسب کسب‌وکارهای کوچک تره.

➌ سرور ابری (Cloud)

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

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

🎯 چجوری یک سرور‌ خوب انتخاب کنیم ؟

توی پارت دوم، این پست بهتون میگم که چجوری میتونید یک سرور خوب انتخاب بکنید و چه نکاتی وجود داره که در تهیه سرور باید بهشون توجه بکنید، فردا منتشر میشه منتظرش باشید 🚀

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #WhatsThat | #server | #host | #vps

⭐ 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

💎 تست نویسی چیه ؟ 💎

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

چه مزیت هایی داره ؟ 🚀

🔸 تست نویسی کمک می‌کنه تا از بروز باگ‌ها و مشکلات جلوگیری بشه و باعث می‌شه تا از عملکرد کد اطمینان حاصل کنیم که واقعا نگهداری و تغییرات جدید توی کد رو ساده تر می‌کنه.

و خب در نهایت همه اینا باعث میشه تا، سرعت توسعه بالاتر بره و از لحاظ کیفی توی سطح خوبی قرار بگیره.

✅ انواع روش های تست نویسی

Unit Testing

بررسی کوچک‌ترین بخش‌های برنامه (مانند توابع یا متدها) برای اطمینان از اینکه به درستی کار می‌کنند.

Integration Testing

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

Functional Testing

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

UI Testing

تست عناصر تعاملی در رابط کاربری، مانند دکمه‌ها و فرم‌ها.

Regression Testing

تست عملکرد قبلی نرم افزار پس از اعمال تغییرات جدید، برای جلوگیری از ایجاد خطاهای جدید.

Security Testing

ارزیابی آسیب‌پذیری‌های امنیتی در برابر حملات احتمالی.

در کل تست نرم‌افزار مبحث گسترده تری هستش و پیشنهاد میکنم اگر به این مبحث علاقه مندید مقاله های زیر رو مطالعه کنید

🌐 article

🌐 article 1

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #WhatsThat | #test | #testing

🚀 @coolycode

لیزی لودینگ (Lazy Loading) چیست ؟ 🦥

لیزی لودینگ تکنیکی است که به بارگذاری تأخیری محتوای غیرضروری تا زمانی که کاربر به آن نیاز داشته باشد کمک می‌کند. به جای اینکه همه منابع (تصاویر، ویدیوها یا کامپوننت‌های سنگین) به‌صورت همزمان با بارگذاری اولیه صفحه، بارگذاری شوند، این منابع فقط زمانی که کاربر به آن‌ها اسکرول کند یا نیاز داشته باشد، بارگیری می‌شوند.

✅ ویژگی‌های کلیدی لیزی لودینگ

➊ افزایش سرعت بارگذاری اولیه
با بارگذاری محتوای ضروری، صفحات سریع‌تر لود می‌شوند.

➋ کاهش استفاده از پهنای باند
چون محتوای غیرضروری به‌صورت همزمان لود نمی‌شود، مصرف داده کاهش می‌یابد.

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

چجوری از لیزی لودینگ استفاده کنیم ... ⁉️😁

🔸 برای استفاده از لیزی لودینگ، می‌تونید از اتریبیوت HTML5 زیر برای تصاویر استفاده کنید.

<img src="image.jpg" alt="Sample Image" loading="lazy" />

با استفاده از اتریبیوت loading با مقدار lazy، مرورگر تصویر را تنها زمانی که کاربر به آن نزدیک می‌شود یا به آن نیاز پیدا می‌کند (مثلاً وقتی اسکرول می‌کند) بارگذاری می‌کند.

🔸 در فریم‌ورک‌هایی مانند React.js، می‌تونید با استفاده از تکنیک‌هایی مثل React.lazy و Suspense کامپوننت‌های غیرضروری زو به‌صورت لیزی لود کنید

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

این کد با استفاده از React.lazy کامپوننت را به‌صورت لیزی لود می‌کند و با کمک Suspense تا زمان بارگذاری کامل، یک پیام یا محتوای موقت (مثل "Loading...") را نمایش می‌دهد.

برای اطلاعات بیشتر در مورد لیزی لودینگ و نحوه استفاده از این تکنیک توی شرایط مختلف پیشنهاد میکنم دو تا مقاله زیر رو مطالعه کنید 💥👇

🌐 article

🌐 article 2

#️⃣ #WhatsThat #lazyloading #javascript

🚀 @coolycode

●● ماژول fs در Node.js چیست ؟ ●●

ماژول fs (فایل سیستم) در Node.js برای کار با فایل‌ها و دایرکتوری‌ها استفاده می‌شود. این ماژول امکان خواندن، نوشتن، حذف و مدیریت فایل‌ها رو برای شما فراهم می‌کند.

متدهای مهم file system 🚀

➊ fs.readFile(path, callback)
محتوای فایل رو میخونه و در صورت موفقیت آمیز بودن، اون رو به کال‌بک برمی‌گردونه.

➋ fs.writeFile(path, data, callback)
محتوای پارامتر data رو داخل فایل می‌نویسه و فایل رو بازنویسی می‌کنه.

➌ fs.existsSync(path)
به صورت همزمان بررسی می‌کنه که آیا فایل یا دایرکتوری وجود دارد یا خیر.

➍ fs.unlink(path, callback)
برای حذف فایل ها به‌کار میره و میتونید باهاش هر فایلی رو پاک بکنید.

➎ fs.rename(oldPath, newPath, callback)
نام یا مکان یک فایل رو تغییر می‌ده.

➏ fs.mkdir(path, callback)
یک فولدر ( دایرکتوری ) جدید ایجاد می‌کنه.

🌐 مشاهده کامل متد های fs

#️⃣ #WhatsThat | #nodejs #fs

🚀 @coolycode

●● نود‌جی‌اس ( Node.js ) چیست ؟ ●●

نود‌جی‌اس یک محیط اجرایی سرور-محور برای اجرای کدهای جاوااسکریپتیه که به توسعه‌دهندگان این امکان رو می‌ده تا به جای مرورگر، از جاوااسکریپت در سمت سرور استفاده کنند.

ویژگی‌های کلیدی Node.js ✅

📊 مقیاس‌پذیری بالا

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

🚀 سرعت بالا

به دلیل استفاده Node.js از موتور V8 گوگل کروم که کد جاوااسکریپت رو به سرعت به کد ماشین تبدیل می‌کنه، از سرعت بالایی برخورداره. همچنین، با استفاده از معماری غیرهمزمان، درخواست‌ها به صورت کارآمد و بدون نیاز به انتظار مدیریت می‌شوند.

🔺 تک‌پردازشی، ولی بسیار کارا

نود‌جی‌اس تنها از یک رشته (thread) برای اجرای کد استفاده می‌کند، اما به دلیل None-Blocking بودن اون، عملیات سنگین رو به روشی بهینه مدیریت می‌کنه و این باعث می‌شه که مصرف منابع کم باشه و سرورها به سرعت به درخواست‌ها پاسخ دهند.

📦 مدیریت package‌ها با NPM

نود‌جی‌اس با یک سیستم package manager به نام NPM (Node Package Manager) همراه است که بزرگ‌ترین مخزن بسته‌های نرم‌افزاری متن‌باز است. با NPM، توسعه‌دهندگان می‌توانند به راحتی کتابخانه‌های مختلف را نصب و در پروژه‌های خود استفاده کنند.

⭕ غیر بلاک کننده ( Non-blocking )

نود‌جی‌اس از یک مدل ورودی/خروجی (I/O) غیربلاک‌کننده و رویداد-محور استفاده می‌کند. این بدان معناست که عملیات ورودی/خروجی (مثل خواندن و نوشتن فایل‌ها یا درخواست‌های شبکه) بدون مسدود کردن فرآیند اصلی انجام می‌شود. این ویژگی باعث می‌شود Node.js بتواند هزاران درخواست را همزمان مدیریت کند بدون اینکه نیاز به منتظر ماندن برای یک عملیات I/O باشد.

🌐 وبسایت رسمی Node.js

⬇️ صفحه دانلود Node.js

امیدوارم حسابی لذت برده باشید، توی پست های بعدی متد های بیشتری از Node.js رو‌ با هم دیگه بررسی میکنیم ⚡

#️⃣ #WhatsThat #nodejs #backend

🚀 @coolycode

💎 وب‌اسِمبِلی ( WebAssembly ) چیست ؟ 💎

🔸 وب‌اسِمبِلی  یا به اختصار Wasm یک فرمت باینریه که برای اجرای کد در مرورگرهای وب و سایر محیط‌ها بهینه شده است. هدف اصلی WebAssembly این است که یک روش سریع‌تر و قابل اعتمادتر برای اجرای برنامه‌ها در مرورگرهای وب فراهم کند، خصوصاً برنامه‌های پیچیده و سنگین مانند بازی‌ها، نرم‌افزارهای ویرایش تصویر و ویدئو، یا حتی برنامه‌های علمی که نیاز به پردازش بالایی دارند.

چرا WebAssembly مهم است ؟ 🤔

🔸 در مرورگرهای وب به طور معمول از JavaScript برای اجرای کد استفاده می‌کنند، اما JavaScript در مقایسه با زبان‌های دیگری مثل C، C++ یا Rust کندتر است. WebAssembly به توسعه‌دهندگان این امکان را می‌دهد که کدهایی را که به زبان‌هایی مانند C، C++، Rust و سایر زبان‌های برنامه‌نویسی سطح پایین نوشته شده‌اند، کامپایل کرده و در مرورگر اجرا کنند، در حالی که سرعت اجرا تقریباً به سرعت اجرای بومی نزدیک است.

ویژگی‌های WebAssembly 🚀

⚡ سرعت بالا

وب‌اسِمبِلی برای سرعت بالا طراحی شده است و کد آن تقریباً با سرعت کدهای بومی اجرا می‌شود.

✅ سازگاری با مرورگرها

تمامی مرورگرهای اصلی (Chrome، Firefox، Safari، Edge و غیره) از WebAssembly پشتیبانی می‌کنند.

🛠️ قابلیت حمل بالا

وب‌اسِمبِلی به صورت مستقل از پلتفرم کار می‌کند و در انواع سیستم‌عامل‌ها و مرورگرها قابل اجرا است.

🔐 امنیت بالا

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

🌀 قابلیت تعامل با جاوااسکریپت

با WebAssembly می‌توانید به راحتی با کدهای JavaScript‌ای تعامل کنید و داده‌ها و توابع را به اشتراک بگذارید.

کاربردهای WebAssembly ✅

● بازی‌های ویدئویی

● برنامه‌های علمی و محاسباتی

● ویرایشگرهای حرفه‌ای تصویر و ویدئو

● محیط‌های برنامه‌نویسی تعاملی مانند ( IDE‌ها )

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

امیدوارم حسابی از این پست لذت برده باشید و براتون مفید بوده باشه ⚡❤️

#️⃣ #WhatsThat #webassembly

🚀 @coolycode

💎 وب اسکرپینگ چیه ؟ 💎

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

نمونه کارهایی که میشه باهاش انجام داد 🚀

1️⃣ جمع‌آوری داده‌ها

2️⃣ لاگین خودکار

3️⃣ پر کردن فرم‌ها

4️⃣ مانیتورینگ تغییرات

5️⃣ دانلود خودکار فایل‌ها

بهترین زبان ها و لایبرری ها برای وب اسکپرینگ ✅

Python : BeautifulSoup | Scrapy | Selenium

JavaScript : Puppeteer | Cheerio

PHP : Goutte

Ruby : Nokogiri | Watir

حواستون باشه قوانین سایت‌ها (مثل robots.txt) رو رعایت کنید تا مشکلی از نظر اخلاقی و قانونی پیش نیاد.

#️⃣ #WhatsThat #web_scraping

🆔 Channel | Group | YouTube

#WhatsThat #PWA

●● تکنولوژی PWA چیست ؟! ●●

تکنولوژی Progressive Web Application  یا به اختصار PWA نوعی نرم‌افزاره که با استفاده از تکنولوژی‌های وب مثل HTML ،CSS ،JavaScript و Web Assembly ساخته می‌شه، اما تجربه‌ای شبیه به اپلیکیشن‌های موبایل رو بهتون ارائه می‌دهد.

ویژگی های کلیدی 🚀

➊ قابل نصب : کاربران می‌توانند این اپلیکیشن‌ها رو از طریق مرورگر نصب کنند و به آیکونش رو در صفحه اصلی دستگاه خود داشته باشند‌

➋ کارکرد آفلاین : وقتی اینترنت قطع باشه، PWA می‌تونه به کمک "سرویس ورکر"ها (Service Workers) کار بکنه.

➌ به‌روزرسانی خودکار : این اپلیکیشن‌ها همیشه به‌روز هستند و نیازی به آپدیت دستی ندارند.

➍ امنیت بالا : PWA فقط از طریق HTTPS عرضه می‌شه، یعنی ارتباطات بین کاربر و سرور رمزگذاری شده و امن است.

مزایای PWA ✅

➊ صرفه‌جویی در زمان و هزینه : یک بار توسعه برای همه پلتفرم‌ها کافی است.

➋ حجم کم‌تر : نسبت به اپلیکیشن‌های بومی، PWA حجم کمتری داره و سریع‌تر دانلود و نصب می‌شود.

➌ دسترسی آسان : کاربران بدون نیاز به فروشگاه‌های اپلیکیشن، به راحتی می‌تونند اپلکیشن های PWA را نصب و استفاده کنند.

در کل PWA ترکیبی از بهترین ویژگی‌های وب و اپلیکیشن‌های موبایل رو بهتون ارائه می‌دهه و تجربه کاربری رو بهبود می‌بخشه⚡

Channel | Group | YouTube

#WhatsThat #CMS #HeadlessCMS

●● آشنایی با Headless CMS  ●●

هدلس CMS سیستمیه که فقط بخش مدیریت محتوا و APIها رو برای شما ایجاد می‌کنه و فاقد بخش Frontend هستش. این ساختار برای شما این امکان رو فراهم میکنه تا بتونید محتوای خودتون رو از طریق API ها در هر نوع دستگاه یا پلتفرمی (وب، موبایل، IoT و ... ) نمایش بدید.

مزایا 🚀

➊ استقلال فرانت‌اند : فرانت‌اند و بک‌اند از هم جدا هستند.

➋ چندپلتفرمی بودن : محتوا به هر دستگاهی ارسال می‌شه.

➌ کاهش ریسک امنیتی : دسترسی مستقیم به سرور کمتر می‌شه.

معایب ❌

➊ پیچیدگی توسعه : نیاز به تخصص در چندین فناوری و ابزار مختلف.

➋ هزینه بیشتر : ممکنه به تیم‌های بزرگ‌تر و منابع بیشتری نیاز باشه.

➌ نبود رابط کاربری پیش‌ساخته : فرانت‌اند باید از طراحی بشه.

یکی از بهترین موارد برای استفاده از هدلس CMS وبسایت های وبلاگی هستش و کارتون رو واقعا ساده می‌کنه⚡

Channel | Group | YouTube

#WhatsThat #reactjs

ویر‌چوال دام چیست ؟ 🚀

اگر با ReactJS کار کرده باشید، احتمالا اسم ویرچوال دام ( VirtualDOM ) رو زیاد شنیده باشید

توی این ویدیو به صورت کامل بهتون توضیح دادم که ویرچوال دام چیه و چه کاری برای ما انجام میده ؟

📷 مشاهده در اینستاگرام

Channel | YouTube | Instagram

●● تفاوت بین فریم‌ورک و لایبرری ●●

🔸 کنترل و مدیریت جریان برنامه ⚡

فریم‌ورک : فریم‌ورک کنترل جریان اجرای برنامه رو در دست داره و کد شما رو به زمان و شیوه‌ای که تعیین کرده اجرا می‌کنه.

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

🔸 ساختار و معماری 🌀

فریم‌ورک : فریم‌ورک‌ها معماری و چهارچوب مشخصی رو تحمیل می‌کنند و شما باید برنامه‌ی خودتون رو مطابق با اونها تنظیم کنید.

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

🔸 انعطاف‌پذیری در توسعه  🔄

فریم‌ورک :ممکنه فریم‌ورک‌‌ها انعطاف‌پذیری شما رو محدود کنند چون باید از روش‌ها و الگوهای خاص اونها پیروی بکنید.

لایبرری : لایبرری‌ها به شما آزادی بیشتری می‌دن تا بتونید به روش دلخواه خودتون از اونها بهره‌برداری بکنید.

🔸 مقیاس‌پذیری و اندازه پروژه 📈

فریم‌ورک : فریم‌ورک‌ها برای پروژه‌های بزرگ و پیچیده طراحی شده‌اند که نیاز به ساختاردهی و مدیریت بهتر دارند.

لایبرری : لایبرری‌ها بیشتر برای انجام وظایف خاص و مشخص به کار می‌رن که ممکنه نیاز به مقیاس‌پذیری بالا نداشته باشند.

🔸 وابستگی و تأثیرات تغییر 🔗

فریم‌ورک : فریم‌ورک‌ها معمولاً بخش‌های زیادی از برنامه زو به خودشون وابسته می‌کنند و تغییر فریم‌ورک ممکنه نیاز به تغییرات زیادی در برنامه داشته باشه.

لایبرری : استفاده از لایبرری‌ها معمولاً به صورت مستقل است و تغییر یا حذف آنها تأثیر زیادی بر روی سایر بخش‌های برنامه ندارد.

✅ جمع بندی

اینکه از فریم‌ورک یا لایبرری استفاده کنیم بستگی به نیاز پروژه‌ داره

- اگر پروژه‌ات بزرگه و نیاز به ساختار منظم و یکپارچه داری، فریم‌ورک بهتره چون کلیات کار رو مدیریت می‌کنه و بهت کمک می‌کنه سریع‌تر به نتیجه برسی.

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

#️⃣ #framework #libarary #vs
🆔 Channel | Group | YouTube

#WhatsThat #javascript #window

●● آبجکت window چیه و چه کار هایی برای ما انجام می‌ده ؟ ●●

آبجکت window یک global object هستش که درواقع نماینده پنجره فعلی مرورگریه که اسکریپت شما در حال اجراست و یه جورایی می‌شه گفت که این window مثل مدیر ساختمونه که همه اتاقا و وسایل رو کنترل می‌کنه.

1️⃣ مدیریت تب‌های مرورگر

می‌تونی با window.open یه تب جدید باز کنی یا با window.close یه تب رو ببندی.

let myWindow = window.open("https://example.com")
// بستن تب باز شده بعد از 5 ثانیه
setTimeout(() => {
    myWindow.close();
}, 5000);

2️⃣ دسترسی به ابعاد پنجره

می‌تونی با window.innerWidth و window.innerHeight بفهمی اندازه فعلی پنجره فعلی چقدره. این خیلی به دردت می‌خوره وقتی می‌خوای سایز یه عنصر رو نسبت به اندازه صفحه تنظیم کنی.

let width = window.innerWidth;
let height = window.innerHeight;

let myDiv = document.getElementById("myDiv");

myDiv.style.width = (width / 2) + "px"; 
// نصف عرض پنجره

myDiv.style.height = (height / 3) + "px"; 
// یک سوم ارتفاع پنجره

3️⃣ ذخیره اطلاعات کاربر در LocalStorage

با window.localStorage می‌تونی اطلاعات کاربر رو ذخیره کنی که حتی بعد از بستن و باز کردن مرورگر هم باقی بمونه. مثلا یه کاربر می‌تونه تم سایت رو عوض کنه و بعداً همون تم دوباره براش لود بشه.

// ذخیره اطلاعات
window.localStorage.setItem("theme", "dark");

// خوندن اطلاعات
let theme = window.localStorage.getItem("theme");
console.log("تم انتخاب شده: " + theme);

// پاک کردن اطلاعات
window.localStorage.removeItem("theme");

4️⃣ کنترل URL

با window.location می‌تونی آدرس URL رو بخونی یا عوض کنی. مثلا کاربر رو به یه صفحه دیگه هدایت کنی.

// خوندن آدرس فعلی صفحه
console.log("آدرس فعلی: " + window.location.href);

// هدایت کاربر به صفحه دیگه
window.location.href = "https://example.com";

// تغییر قسمتی از URL بدون لود مجدد صفحه
window.location.hash = "section1"; // کاربر رو به بخش مشخصی از صفحه هدایت می‌کنه

5️⃣ تعامل با کاربر از طریق آلرت‌ها

می‌تونی با window.alert() یه پیام پاپ‌آپ به کاربر نشون بدی یا با window.prompt() ازش چیزی بپرسی.

// نمایش پیام ساده
window.alert("به وبسایت ما خوش آمدید!");

// پرسیدن سوال از کاربر
let name = window.prompt("اسمت چیه؟");
console.log("اسمی که کاربر وارد کرده: " + name);

// گرفتن تأییدیه از کاربر
let result = window.confirm("آیا مطمئن هستید که می‌خواهید ادامه دهید؟");
if (result) {
    console.log("کاربر ادامه داد");
} else {
    console.log("کاربر لغو کرد");
}

✅ در کل همه اینها یسری از قابلیت های پر کاربرد آبجکت window بودن، به زودی یه پست دیگه درست میکنم تا متد های بیشتری از window رو‌ بررسی کنیم

🌐 مشاهده داکیومنت window

🆔 Channel | Group | YouTube

اگر نیاز دارید که خیلی سریع کد های خودتون
رو بدون نیاز به هیچ نیازمندی خاصی به صورت آنلاین اجرا کنید و خروجیش رو در لحظه ببینید میتونید از سایت JSFiddle استفاده کنید ⚡

#javascript | #website

✅ با این سایت میتونید در عین سادگی خروجی کدتون رو خیلی سریع و در لحظه ببینید، که می‌تونه برای :

آموزش، تست کد و دیباگ کردن

بسیار کارآمد باشه 🤩

نحوه استفاده ازش هم خیلی ساده هست و فقط کافیه که وارد سایت JSFiddle بشید و Boilerplate ( متن/کد از پیش تعریف شده ) مد نظرتون رو انتخاب کنید مثل Typescript ,Reactjs و Sass و شروع کنید به کد زدن و در نهایت هم از بالای صفحه کدتون رو ران بکنید 💥

برای اشتراک گذاری آنلاین کدتون هم کافیه که روی دکمه Fork بالای صفحه کلیک کنید تا لینک اختصاصی خودتون رو بسازه 👀

یک سری قابلیت های پولی هم داره که میتونید داخل خود سایت JSFiddle مشاهده بکنید 🔗

Channel | YouTube | Instagram

#libarary | #reactjs

💎 معرف لایبرری Styled Components 💎

با استفاده از Styled Components میتونی داخل ReactJS به صورت CSS-in-JS کدهای CSSای بنویسی و از ویژگی‌هایی مثل تم‌ها، استایل‌دهی پویا با props و پشتیبانی کامل از CSS مدرن استفاده کنی.

با Styled Components میتونید مدیریت بهتر و ساده‌تری رو استایل ها داشته باشید و از تداخل استایل‌ها جلوگیری کنید. ⚡

نمونه استفاده از Styled Components ✅

const Button = styled.button`
  color: ${props => props.primary ? 'red' : 'blue'};
  font-size: 1.5em;
  padding: 0.25em 1em;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

🌐 مشاهده داکیومنت Styled Components

اگر دوست داشتی ری‌اکشن و شیر یادت نره 😉⚡

🚀 @coolycode