🔆 چرا باید در جاوااسکریپت از use strict یا همون StrictMode استفاده کنیم؟🤔

✅ ببینید، StrictMode یک حالت سخت گیرانه جاوااسکریپته که بهمون کمک میکنه کد هامون خطای کمتری داشته باشه بیاید همینو یه مثال بزنم :

// "use strict";
let new = [4, 5, 6, 7];

🔹 توی کد بالا حالت StrictMode غیرفعاله.
نام new یک کلمه از پیش رزرو شده توسط جاوااسکریپته که یعنی نباید ازش استفاده کنیم و ممکنه تداخل ایجاد کنه ولی با این وجود وقتی کد رو اجرا میکنیم هیچ اروری دریافت نمیکنیم 🤯❌

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

"use strict";
let new = [4, 5, 6, 7];

🔹 حالا StrictMode فعاله و جاوااسکریپت بهمون ارور میده که کلمه new از قبل توسط من رزرو شده و شما نمیتونی ازش استفاده کنی👌

اگه میخواید لیست کلمات رزرو شده توسط جاوااسکریپت رو بدونید برید تو سایت زیر :

https://www.w3schools.com/js/js_reserved.asp

🔆 دوستان یک نکته امنیتی مهم برای فرانت اند رو فهمیدم که میتونه باعث ایجاد باگ های xss بشه که گفتم بگم بهتون.

✅ حتما براتون پیش اومده که از خودتون پرسیده باشید چه فرقی میکنه که برای اضافه کردن محتوا به یه تگ از innerHtml استفاده کنیم یا textContent👌

💻 بیاید فرض بر این کنیم که یک input داریم که کاربر کامنتش رو مینویسه و بعد از زدن دکمه «ارسال» کامنتش به صفحه اضافه میشه...

زمانی که از innerHtml استفاده کنیم کاربر میتونه توی اون input یک کد جاوااسکریپت مثل کد زیر وارد کنه که قابل اجرا هم هست و یک دکمه به سایت اضافه میکنه :

<script><button>hack</button></script>

حالا فکرشو کنید هکر میتونه چه کد های خطرناک تری تزریق کنه به سایت 🧨

حالا اگه از textContent استفاده کنیم دیگه اون کد جاوااسکریپتی که وارد میکنه قابل اجرا نیست و به صورت یک String یا رشته در میاد😉

🔆 دیروز نیاز بود یه مرور خیلی سریع از jQuery داشته باشم برای یه کاری.

واقعا بهتر از w3schools پیدا نکردم یعنی ✅

کامل...
با مثال های خوب...
توضیحات شفاف...
مخصوصا بخش jQuery Refrences

حتی خوراک کسیه که بخواد از صفر یادش بگیره، خلاصه اینم گفتم که داشته باشید شاید یه روز نیاز شد چیزی ازش یاد بگیرید🤌
‌

🔆 معرفی Google IDX پروژه نو ظهور گوگل

⁉️ در واقع IDX یک محیط کدنویسی تحت وب هست که شما بدون این که نیاز به سخت افزار قدرتمندی داشته باشید میتونید هر پروژه ای رو روی سرور های ابری توسعه بدید.

✅ شما میتونید به راحتی با بیشتر زبان ها و فریمورک های محبوب دنیا توش پروژه خودتون رو توسعه بدید. تازه به هوش مصنوعی gemini هم دسترسی دارید میتونه کد هارو توضیح بده براتون.

📝 حتی به راحتی می تونید برنامه های خودتون رو به Firebase متصل کنید و از سرویس های اون مثل احراز هویت، پایگاه داده و ذخیره سازی ابری استفاده کنید.

⚠️ این IDE هنوز تو حالت Preview هست و کامل عرضه نشده.

#IDX #Programming #GoogleIDX #Firebase
@Documentham | داکیومنت هام

🔆 داده ها در localStorage با چه فرمتی ذخیره و با چه فرمتی دریافت میشوند؟ این سوالی بود که توی یکی از مصاحبه هام از من پرسیده شد.

اول از همه باید بگم که برای ذخیره داده ها توی loaclStorage باید از متد setItem و برای دریافتشون باید از متد getItem استفاده کنیم.

✅ به صورت کلی داده ها توی localStorage باید به صورت رشته (string) ذخیره بشن، پس برای تبدیل داده هامون به رشته باید از JSON.stringify استفاده کنیم. مثال :

const data = { name: "Mersad", age: 22 };
localStorage.setItem("user", JSON.stringify(data));

اینجا داریم میگیم که میخوام یک آبجکت رو با مشخصات بالا به عنوان یک رشته با مشخصه یا کلید "user" توی localStorage ذخیره کنم.

✅ حالا ما اگه بخوایم این داده ها رو از localStorage دریافت کنیم باز هم به صورت یک رشته به ما برمیگردونه ولی برای اینکه بتونیم از داده هاش استفاده کنیم باید به فرمت اولیه خودش (آبجکت / آرایه) تبدیلش کنیم که این کار با استفاده از JSON.parse امکان پذیره. مثال:

const localStorageData = localStorage.getItem("user");
const parsedData = JSON.parse(localStorageData);

#localStorage #Programming
@Documentham | داکیومنت هام

🔆 یکی از چیزایی که خیلی کم دیدم بهش پرداخته بشه AbortController هستش.

زمانی که ما یاد میگیریم چطور از Fetch و API ها استفاده کنیم برای ارسال یا دریافت دیتا از سمت سرور، یادمون میره که یه نگاه به تب Network بندازیم و تعداد ریکوئست هایی که ارسال میشه رو مدیریت کنیم.

✅ تو این ویدئو سعی کردم بهتون توضیح بدم چطور از فرستادن ریکوئست های زیاد و الکی به سمت سرور جلوگیری کنید.

#AbortController #Api #JavaScript
Documentham | داکیومنت هام

🔆 از یک هفته پیش شروع کردم به خوندن این کتاب :
📚HTTP The Definitive Guide

✅ این کتاب توسط مهندس احسان نیک آور به دقت و زیبایی ترجمه شده پس با خیال راحت شروع کنید🤝

⁉️ حالا چرا باید این کتابو بخونیم؟

در کل پشت هر تراکنشی توی وب پروتکل HTTP در حال اجراست و عملا برای اینکه یه لول سطحتون رو ارتقا بدید خوندن این کتاب توصیه میشه.
حالا چرا؟ چون شما به مفاهیمی مثل مدیریت اتصال TCP، پروکسی ها، کشینگ، ربات‌های وب و فایل‌های robots.txt، احراز هویت Basic و Digest، تراکنش‌های HTTP امن، هدایت مجدد ترافیک، میزبانی چند رسانه ای و... کاملا مسلط میشید.

‌
#HTTP #Programming #Frontend #Backend
Documentham | داکیومنت هام

🔆 وقتی شروع به یادگیری جاوااسکریپت کردم خیلی زبان عجیبی بود برام و عاشق منطقی که نداشت شده بودم:) حالا چرا؟

چرا حاصل اولی میشه 54 ولی دومی میشه 1 :

console.log("5" + 4); -> 54

console.log("5" - 4); -> 1

✅ کدوم درسته کدوم غلط⁉️ این سوالیه که از خودم میپرسیدم.

یکم که گذشت فهمیدم وقتی جاوااسکریپت بین دوتا مقدار عملگر + رو میبینه جفتش رو به رشته (string) تبدیل میکنه و وقتی عملگر - رو میبینه همه رو به عدد (number) تبدیل میکنه و گفتم اوکی لابد قانونش همینه دیگه. یه مدت همینجوری پیش رفتم که باز یه علامت سوال اومد بالا سرم که اقا اصلا چرا اینجوری باید باشه؟😂 چون سر خیلی چیزای دیگه باز نتایجی میگرفتم که مورد انتظارم نبودن.

📝 اینجا بود که با یکم تحقیق با دو مفهوم و رفتار توی جاوااسکریپت آشنا شدم به اسم Implicit و Explicit که توی وویس زیر خیلی ساده برداشت خودم رو ازشون گفتم بهتون که میتونید گوش بدید ❤️👇

#Implicit #Explicit #Programming #Frontend
Documentham | داکیومنت هام

‌
🔆 اگه شما هم مثل من توی استفاده از Redux کمی فراموشکاری دارید این دفترچه راهنما کارو در میاره براتون.

تو این فایل به صورت قدم به قدم همه کارای مربوط به Redux Toolkit رو گفتم از همون اولش که چطور باید نصبش کرد تا ساخت store و state ها و نحوه استفاده و بروزرسانی state ها تو ری اکت توسط redux.

روز برنامه نویس هم مبارک 💻❤️

#Redux #React #Programming #Frontend
Documentham | داکیومنت هام

🔆 2 تا نکته مهم اما تجربی:

✅ اگه فعلا در سطح جونیور و درحال یادگیری هستین یه مدت این دوتا کاری که بهتون میگم رو بکنید تا به بلایی که سر من اومد دچار نشید:

🔻از اکستنشن هایی که کد رو خودش تکمیل میکنه یا بهت پیشنهاد میده استفاده نکن.
🔻کدای بقیه رو هم (غیر از کد های خیلی طولانی) دستی بنویس ولی copy و paste نکن.

🤔 حالا قضیه چیه؟
چند وقت پیش مجبور بودم برای توضیح یه سری کد به شخصی از ++Notpad استفاده کنم و خب همونطور که میدونید یک محیط کاملا خام واسه کد نویسیه.
هیچی دیگه چشتون روز بعد نبینه از لحاظ فنی همه چیو درست بهش توضیح دادم اما از لحاظ syntaxically و املا تا دلت بخواد به باگ و خطا خوردم😂

❌ مثلا داشتم بهش میگفتم یه کتابخونه رو باید چطور استفاده کرد در صورتی که حتی import هم نکرده بودمش چون اکستنشن های vscode همیشه به صورت خودکار خودش این کارو برام انجام میداد و کلی اشتباهای دیگه.

✅ انجام این کاری که گفتم 2 تا مزیت برام داشته تا الان:
🔸واقعا میزان یادگیریم و فهمیدن چیزایی که مینویسم بیشتر شده.
🔸نگرانی واسه اینکه تو یه مصاحبه فنی ازم بخوان توی یه IDE بدون هیچکدوم از این ابزار ها کدنویسی کنم ندارم.

❤️پس این کار هایی که گفتمو انجام بدین حتی واسه html,css ,... و اول یکم آشنا شین با نحوه نوشتارش و بعد از اونا استفاده کنین

#programming #Frontend
Documentham | داکیومنت هام