Documentham | داکیومنت هام

🔆 راهنمای NPM : 🔻 یک ابزار مدیریت بسته ها و کتابخانه ها است. 🔻 تعریف package.json : فایل تنظیمات پروژه که اطلاعاتی مانند نام، نسخه، وابستگی‌ها و اسکریپت‌ها را ذخیره می‌کند. 🔻 ساخت فایل package.json با دستور : npm init 🔻 ساخت فایل package.json با اطلاعات پیشفرض خودش : npm init -y 🔻 نصب پکیج : npm i <package name> یا npm install <package name> 🔻 نصب پکیج با ورژن مورد نظر : npm i <package name>@<version> یا npm install <package name>@<version> 🔻 حذف نصب پکیج : npm un <package name> یا npm uninstall <package name> 🔻 حذف پکیج : npm rm <package name> یا npm remove <package name> 🔻 نصب تمام پکیج هایی که در فایل package.json وجود دارند : npm i 🔻 آپدیت تمامی پکیج ها : npm update 🔻 کشف آسیب پذیری های پکیج ها : npm audit 🔻 رفع آسیب پذیری های پکیج ها : npm audit fix 🔻 تعریف Dependencies : بسته‌هایی که برای اجرای پروژه ضروری هستند. 🔻 تعریف devDependencies : بسته‌هایی که فقط برای توسعه و تست پروژه استفاده می‌شوند. 🔻 تفاوت اصلی آنها : Dependencies در زمان اجرای پروژه لازم است، اما devDependencies فقط در زمان توسعه مورد نیاز است. 🔻 در حالت عادی پکیج ها در Dependencies نصب میشوند پس برای نصب پکیج در devDependencies از دستور زیر استفاده میکنیم : npm i <package name> --save-dev یا npm i <package name> -D 🔻 نصب پکیج در کل سیستم : npm i <package name> -g 🔻 حذف پکیج از کل سیستم : npm rm <package name> -g 🔻 محل نصب پکیج های گلوبال : C:\Users\username\AppData\Roaming\npm\node_modules 🔻 نصب همزمان چندین پکیج : npm i <package name> <package name> ... 🔻 تعریف package-lock.json : گاهی بعضی پکیج ها خودشان برای اینکه درست کار کنند نیاز به یکسری Dependencies های دیگر هم دارند که آنها به صورت خود کار در package-lock.json نصب میشوند. 🔻 لیست تمام پکیج ها و پیشنیاز های آنان که تا کنون نصب کرده ایم : npm list 🔻 لیست تمام پکیج هایی که فقط در package.json قرار دارند : npm list --depth 0 🔻 اجرای کلید هایی که در script در package.json قرار دارند : npm run <key> 🔻 اجرا و نظارت به طور همزان روی پروژه : npm run <key> --watch یا npm run <key> -W 🔆 راهنمای NPM ☝🏼

🔆 راهنمای کار با Git : ✅ گیت یک سیستم کنترل نسخه یا VCS هست که به ما این اجازه رو میده تا تغییرات رو در کدهامون پیگیری کنیم و به نسخه های مختلف پروژمون برگردیم و حتی به صورت گروهی روی یک پروژه کار کنیم. 🔹 در کل برای شروع یک پروژه یا اضافه کردن کنترل نسخه به پروژه از دستور زیر استفاده میکنیم تا یک مخزن گیت جدید ایجاد بشه که در اون تمام اطلاعات و تاریخچه مربوط به مخزن گیت قرار داره : git init 🔹 بعد از اون باید در پوشه اصلی پروژمون یا همون root پروژه یک فایلی بسازیم به اسم : .gitignore 🔹 تو این فایل اون پوشه ها و فایل هایی که نمیخوایم در ریپازیتوریمون آپلود بشن رو قرار میدیم مثل : node_modules .parcel-cache dist and... 🔹 برای اینکه یک وضعیت کلی از کارای یکه تا الان کردیم بدونیم مثل اینکه در کدوم branch قرار داریم یا آیا تا الان commit ثبت کردیم یا نه و یا حتی اینکه فایل هامون untracked(ردیابی نشده) هستن یا tracked(ردیابی شده) از دستور زیر استفاده میکنیم : git status 🔹 برای ردیابی کردن یا همون tracked کردن فایل هامون که بهش اضافه کردن فایل ها به Staging Area هم میگن از دستور زیر استفاده میکنیم : git add . یا: git add -A 🔹میتونیم هم فقط یک فایل خاص رو tracked کنیم مثلا: git add index.js 🔹 حالا فایل های پروژمون بخشی از ریپازیتوریمون هستن. التبه ریپازیتوری محلی (Local Repository). با ایجاد تغییر توی پروژه فایلی که تغییر پیدا کرده به حالت untracked در میاد پس هربار هر تغییری رو ایجاد میکنیم این دستور رو میزنیم تا همه tracked بشن. 🔹 کاری که تا الان انجام دادیم اضافه کردم فایل ها و تغییرات به ریپازیتوری بود نه ذخیره کردن اونها. یعنی اگه تغییری انجام بدیم بعدش نمیتونیم برگردیم به حالت قبلی، پس برای این کار باید تغییراتمون رو commit کنیم و در کنارش یک پیام هم میزاریم که دقیقا چه کاری انجام دادیم تا اگه تعداد کامیت هامون زیاد بودن بتونیم بریم به کامیت دلخواه. پس دستور زیر رو میزنیم : shell git commit -m "example commit message" 🔹مثال هایی از پیغام خوب برای کامیت کردن: git commit -m "Fixed header bug" git commit -m "Added login feature" git commit -m "Updated README file" 🔹 برای برگشتن به کامیت قبلی از دستور زیر اسفاده میکنیم : shell git reset --hard HEAD 🔹 لیست تما

🔆دوستان اگر اکانت لینکدین شما روزی به هر دلیلی suspend شد کاری که میگم رو بکنید👇 1⃣ وارد لینک زیر بشید : https://www.linkedin.com/help/linkedin/ask/ppq 2⃣ از توی تب اول گزینه Regain Access to My Account رو انتخاب کنید. 3⃣ در قسمت Your Question به انگلیسی بنویسین که اکانت شما مسدود شده و نیاز به کمک دارین و همچنین ذکر کنید که کاری خارج از قنوانین انجام ندادید و پایبند قوانین لینکدین خواهید بود. 4⃣ در قسمت Issue Type هم گزینه Account Restricted رو انتخاب کنید و در نهایت Submit کنید. واسه من یک روزه برگشت و پیشنهاد میکنم به هیچ عنوان وقتی از لینکدین استفاده میکنید vpn روشن نباشه هرچند برای من چند بار اتفاقی روشن بود و حواسم نبود😅❌

🔆 بعضی از این سامانه های آزمون آنلاین رو دیدین وقتی وسط آزمون میرین تو یه تب دیگه و بعد که بر میگردین میبینین همه جواب هاتون پاک شده ⁉️ خب اینم خلاصه فهمیدم جریانش چیه😁 ✅ در واقع میان تو کد جاوااسکریپت خودشون روی document یه ایونت visibilitychange میزارن و توش یه شرط مینویسی که اگه document.visibilityState  برابر visible باشه یعنی کاربر تو سایته و اگه برابر hidden باشه یعنی از صفحه آزمون بیرون رفته. مثال : document.addEventListener("visibilitychange", () => { if (document.visibilityState === 'hidden') { console.log("کاربر خارج شده"); } else if (document.visibilityState === 'visible') { console.log("کاربر در صفحه است."); } });

🔆 دوستان یک نکته امنیتی مهم برای فرانت اند رو فهمیدم که میتونه باعث ایجاد باگ های xss بشه که گفتم بگم بهتون. ✅ حتما براتون پیش اومده که از خودتون پرسیده باشید چه فرقی میکنه که برای اضافه کردن محتوا به یه تگ از innerHtml استفاده کنیم یا textContent👌 💻 بیاید فرض بر این کنیم که یک input داریم که کاربر کامنتش رو مینویسه و بعد از زدن دکمه «ارسال» کامنتش به صفحه اضافه میشه... زمانی که از innerHtml استفاده کنیم کاربر میتونه توی اون input یک کد جاوااسکریپت مثل کد زیر وارد کنه که قابل اجرا هم هست و یک دکمه به سایت اضافه میکنه : <script><button>hack</button></script> حالا فکرشو کنید هکر میتونه چه کد های خطرناک تری تزریق کنه به سایت 🧨 حالا اگه از textContent استفاده کنیم دیگه اون کد جاوااسکریپتی که وارد میکنه قابل اجرا نیست و به صورت یک String یا رشته در میاد😉

🔆 دیروز نیاز بود یه مرور خیلی سریع از jQuery داشته باشم برای یه کاری. واقعا بهتر از w3schools پیدا نکردم یعنی ✅ کامل... با مثال های خوب... توضیحات شفاف... مخصوصا بخش jQuery Refrences حتی خوراک کسیه که بخواد از صفر یادش بگیره، خلاصه اینم گفتم که داشته باشید شاید یه روز نیاز شد چیزی ازش یاد بگیرید🤌 ‌

🔆 داده ها در 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 | داکیومنت هام

🔆 2 تا نکته مهم اما تجربی: ✅ اگه فعلا در سطح جونیور و درحال یادگیری هستین یه مدت این دوتا کاری که بهتون میگم رو بکنید تا به بلایی که سر من اومد دچار نشید: 🔻از اکستنشن هایی که کد رو خودش تکمیل میکنه یا بهت پیشنهاد میده استفاده نکن. 🔻کدای بقیه رو هم (غیر از کد های خیلی طولانی) دستی بنویس ولی copy و paste نکن. 🤔 حالا قضیه چیه؟ چند وقت پیش مجبور بودم برای توضیح یه سری کد به شخصی از ++Notpad استفاده کنم و خب همونطور که میدونید یک محیط کاملا خام واسه کد نویسیه. هیچی دیگه چشتون روز بعد نبینه از لحاظ فنی همه چیو درست بهش توضیح دادم اما از لحاظ syntaxically و املا تا دلت بخواد به باگ و خطا خوردم😂 ❌ مثلا داشتم بهش میگفتم یه کتابخونه رو باید چطور استفاده کرد در صورتی که حتی import هم نکرده بودمش چون اکستنشن های vscode همیشه به صورت خودکار خودش این کارو برام انجام میداد و کلی اشتباهای دیگه. ✅ انجام این کاری که گفتم 2 تا مزیت برام داشته تا الان: 🔸واقعا میزان یادگیریم و فهمیدن چیزایی که مینویسم بیشتر شده. 🔸نگرانی واسه اینکه تو یه مصاحبه فنی ازم بخوان توی یه IDE بدون هیچکدوم از این ابزار ها کدنویسی کنم ندارم. ❤️پس این کار هایی که گفتمو انجام بدین حتی واسه html,css ,... و اول یکم آشنا شین با نحوه نوشتارش و بعد از اونا استفاده کنین #programming #Frontend Documentham | داکیومنت هام