🔆 راهنمای 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 ☝🏼

سلامی به زیبایی کد استاتوس 200😁❤️

دوستان هدف من از ساخت این چنل نه آموزش دادنه نه چیزای دیگه...
چون اصلا در سطح کسی که بخواد آموزش بده نیستم

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

زندگی بدون باگی رو براتون آرزومندم😁❤️

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

🔹 لیست تمام کامیت هایی که انجام دادیم :

shell
git log

🔹 برای رفتن به یک کامیت مشخص کافیه بعد لاگ گرفتن آیدی کامیتی که میخوایم بریم بهش رو بردایم مثل این :

commit 25a5...3547 (HEAD -> master)

🔹 و بعد دستور زیر :

shell
git reset --hard 25a5...3547

🔹 حرکت کردن بین کامیت ها به این صورتی کمی خطرناکه پس بهتره اگه میخوایم تغییری توی پروژمون ایجاد کنیم یک branch جدید بسازیم.
لیست branch های خودمون (لوکال) :

shell
git branch

🔹لیست تمام برنچ ها (لوکال + ریموت):

git branch -a

🔹 برای ساخت یک برنچ جدید از دستور زیر استفاده میکنیم :

shell
git branch <branch name>

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

🔹 برای سوئیچ کردن بین برنچ ها از دستور زیر استفاده میکنیم :

shell
git checkout <branch name>

🔹البته میتونیم با دستور زیر برنچ دلخواهمون رو بسازیم و مستقیم بریم توش و دیگه تو دو مرحله اینکارو نکنیم:

git checkout -b <branch name>

🔹 برای مرج کردن اول میریم تو اون برنچی که در واقع برنچ اصلیمون هست و میخوایم یک برنچ دیگه رو که یکسری تغییرات توش انجام دادیم رو با این برنچ اصلی مرج کنیم پس :

shell
git checkout <branch name EX: master>

🔹 و بعد :

shell
git merge <branch name>

🔹 برای اضافه کردن پروژمون به گیتهاب یا به عبارتی انتقال ریپازیتوری محلیمون به ریپازیتوری گیتهاب ابتدا باید یک ریپازیتوری در گیتهاب بسازیم.
برای اینکار ابتدا دستور زیر رو مینویسیم :

shell
git remote add origin <repo url>

🔹 کاری که کردیم این بود که یک remote branch به اسم origin رو اضافه کردیم و آدرسش رو در انتها قرار دادیم.

🔹 حالا مشخص میکنیم که میخوایم چه برنچی رو انتقال بدیم یا در واقع push کنیم تو ریموت برنچمون که همون origin هستش با دستور :

shell
git push origin master

🔹 گاهی ما تغییراتی رو در مخزن راه دور یا ریموت خودمون که همون گیتهاب باشه ایجاد میکنیم و میخوایم اون تغییرات رو برای اینکه تداخلی با پروژمون تو ریپازیتوری محلی هست نداشته باشه انتقال بدیم به کامپیوترمون پس برای این کار دستور زیر رو میزنیم :

shell
git pull origin master

🔹 بررسی مخزن های ریموت که اضافه کردیم بالاتر با دستور git remote add origin repo url:

git remote -v

🔆 راهنمای کار با Git ☝🏼

‌
همیشه سر نوشتن پیام کامیت هام فکر میکردم دارم فقط چیزی مینویسم که انگار فقط خودم میفهممش و بقیه اگه بخونن متوجهش نمیشن👌

این یه pdf عالی و خلاصه هست که باعث میشه بسته به تغییراتی که توی پروژتون ایجاد میکنید کامیت های استاندارد تری بزارید که درک اون تغییرات برای خودتون و دیگران خیلی راحت تر باشه✅

به عنوان مثال اگر یک باگ توی کدتون رو برطرف کردین اینجوری کامیت میزنین :

git commit -m "fix: message"

‌
🔆 این یکی از بهترین اکستنشن های vsCode هست که باهاش میشه کد های js رو بدون این که هیچ سند html بسازیم اجرا کنیم و نیاز به لایو سرور هم نباشه چون همزمان توی ۳ نقطه طبق عکسی که دادم خروجی رو به بهترین شکل بهمون نشون میده😁

🔹اسمش : Quokka.js

🔹روش استفاده : کافیه اکستنشن رو نصب کنیم و بعد از توی command palette که هم از تنظیمات هم با کلید ctrl+shift+p میشه بازش کرد عبارت زیر رو بنویسیم :

Quokka.js: Start on Current File

🔹نکته : قبلش حتما باید توی فایلی جاوااسکریپتیمون باشیم.

#This_is_javascript
🗿😁

🔆 اولویت اجرا شدن کد ها تو js در پشت صحنه و callstack اینجوریه که:

✅ اول کد های اسکوپ گلوبال اجرا میشن.

✅ بعد microtask queue که به عنوان مثال promise ها و داده هایی که fetch میشن در اون قرار میگیرن.

✅ و در نهایت callback queue که میشه به setTimeout اشاره کرد.

🔆دوستان اگر اکانت لینکدین شما روزی به هر دلیلی 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 روشن نباشه هرچند برای من چند بار اتفاقی روشن بود و حواسم نبود😅❌

🔆 تجربه جالب امروزم‼️

داشتم به این فکر میکردم که فرض کنیم کاربر تو سایتمون هست یهو اینترنتش قطع میشه و خودش هم اون لحظه متوجهش نمیشه😵

خب قطعا محتوای سایتمون درست براش لود نمیشه و شاید فکر کنه مشکل از سایتمونه و سایتمون رو ترک کنه🤦‍♂

خلاصه که گشتم و گشتم رسیدم به کتابخونه Offline.js که هروقت اینترنت کاربر قطع یا وصل بشه بهش یه نوتیف جذاب میده ✅

لینکش :

https://github.hubspot.com/offline/docs/welcome/

البته بعدش هم تلاش کردم خودم کدی بنویسم که این کارو میکنه ✅

کافیه یک تابعی بسازیم که مثلا هر 1 ثانیه یک بار یک ریکوئستی به یک API فیک مثل jsonplaceholder بزنه و اگر response.status اون برابر 200 یا زیر 300 نبود به کاربر اطلاع بده که آفلاین شده.

مثال سادش :

const ajaxCall = async function () {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        if (!response.ok && response.status > 300) {
            throw new Error();
        }
        const data = await response.json();
        console.log("شما آنلاین هستید.");

    } catch (error) {
        console.error('مشکلی در عملیات دریافت داده بوجود آمده است:', error.message);
        console.log("شما آفلاین هستید.");
    }
};
setInterval(() => {
    ajaxCall();
}, 500);

🔆 بعضی از این سامانه های آزمون آنلاین رو دیدین وقتی وسط آزمون میرین تو یه تب دیگه و بعد که بر میگردین میبینین همه جواب هاتون پاک شده ⁉️

خب اینم خلاصه فهمیدم جریانش چیه😁

✅ در واقع میان تو کد جاوااسکریپت خودشون روی document یه ایونت visibilitychange میزارن و توش یه شرط مینویسی که اگه document.visibilityState  برابر visible باشه یعنی کاربر تو سایته و اگه برابر hidden باشه یعنی از صفحه آزمون بیرون رفته.

مثال :

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'hidden') {
    console.log("کاربر خارج شده");
  } else if (document.visibilityState === 'visible') {
    console.log("کاربر در صفحه است.");
  }
});

🔆 راهنمای کار با Tailwind css :

✅ بر خلاف Bootstrap که شامل اجزای از پیش طراحی شده هست، تیلویند یک فرمورک css هست که به شما کلاس های سودمندی (utility classes) میده که با کنار هم قرار دادن این کلاس ها میتونید UI جذابی رو طراحی کنید.

🔸 در کل برای شروع یک پروژه با تیلویند 2 تا دستور مهم وجود داره :

npm install -D tailwindcss

این دستور تیلویند را به عنوان یک devDependency به پروژمون اضافی میکنه و دلیلی که از D- یا همون save-dev-- استفاده میکنیم اینه که ما از تیلویند فقط موقع توسعه سایتمون استفاده میکنیم و در محیط تولید مورد نیاز نیست.

npx tailwindcss init

با این دستور از ابزار npx استفاده میکنیم تا یک فایل تنظیمات پیشفرض به اسم tailwind.config.js رو ایجاد کنیم که برای سفارشی سازی تیلویند استفاده میشه.

🔸 وقتی دستورات بالا رو میزنیم یک پوشه با عنوان node_modules، یک فایل با عنوان package-lock.json، یک فایل با عنوان package.json و در نهایت فایل tailwind.config.js ساخته میشود که ساختار پیشفرض درون آن به این صورت است :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

🔸 قبل از ادامه مراحل نصب بیاید بخش های مختلف فایل tailwind.config.js رو بررسی کنیم:

🔹 محتوای content : این بخش مشخص میکنه که تیلویند میتونه کدوم فایل های پروژه مارو بررسی کنه تا درون اونها بتونیم از کلاس های تیلویند استفاده کنیم که به طور معمول آدرس زیر رو بهش میدیم :

content: ["./**/*.{html,js}"],

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

🔹 محتوای theme : در این بخش ما میتونیم ویژگی های پیشفرض تیلویند رو تغییر بدیم یا حتی ویژگی جدیدی رو هم اضافه کنیم که ساختار زیر رو داره:

  theme: {
    extend: {},
  },

⁉️ حالا سوال اینه که چه زمانی باید تغییرات رو مستقیم درون theme قرار دهیم و چه زمانی درون extend ؟؟؟

♦️ زمانی که میخوایم ویژگی های جدیدی به ویژگی های موجود در تیلویند اضافه کنیم بدون تغییر ویژگی های پیشفرض اون هارو درون extend قرار میدیم ولی زمانی که میخوایم ویژگی از قبل تعریف شده ای رو در تیلویند تغییر بدیم اون هارو درون theme قرار میدیم مثل :

theme: {
    screens: {
      xs: "475px",
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      "yekan": "Yekan"
    },
    extend: {
      colors: {
        "primary": {
          DEFAULT: "#041aa4",
        }
      },
      spacing: {
        "34": "8.5rem"
      }
    },
  },

در این مثال ما سایز های screen رو برای رسپانسیو سازی و font family رو کاملا تغییر دادیم و شخصی سازی کردیم. و همچنین یک رنگ جدید به اسم primary رو به رنگ های دیگه تیلویند و یک spacing با مقدار 34 به سایر spacing ها اضافه کردیم.

🔹 محتوای plugins : در این بخش افزونه های تیلویند رو میتونیم اضافه کنیم برای داشتن قابلیت های بیشتر مثل افزونه فرم :

plugins: [
    require('@tailwindcss/forms'),
  ],

👆👆👆👆

🔸 میرسیم به ادامه مراحل راه اندازی. حالا بهتره یک فایل index.html و یک پوشه ای به اسم src ایجاد کنیم و درون آن یک پوشه مختص css درست کنیم تا فایل های مربوط به css رو درون اون قرار بدیم. اولین فایلی که باید بسازیم input.css هست و باید محتوای زیر رو درون اون قرار بدیم :

@tailwind base;
@tailwind components;
@tailwind utilities;

در واقع input.css نقطه ورود برای تیلویند است و شامل دستورات و قواعدی هست که میگن تیلویند css نهایی رو چجوری پیاده سازی کنه.

♦️ دستور اول : شامل استایل های پایه یا base تیلویند میشه مثل استایل های ابتدای عناصر html که بهمون کمک میکنه تا در همه مرورگر ها یک استایل ثابت و یکپارچه رو داشته باشیم. البته میتونیم چیز های جدیدی به این لایه اضافه کنیم مثل :

@layer base {
    @font-face {
        font-family: Yekan;
        src: local(Yekan), url("./Yekan.woff") format("woff");
    }
}

♦️ دستور دوم : شامل استایل های کامپوننت هامون میشه که یکسری استایل های از پیش ساخته شدن هستن برای عناصر مختلف مثل دکمه ها و فرم ها و کارت ها و ... و برای اضافه کردن یک کامپوننت باید این کار رو بکنیم :

@layer components {
    .btn {
        @apply bg-green-600 text-white text-2xl p-3 rounded-lg font-medium shadow-lg shadow-gray-700 active:bg-green-700 font-yekan;
    }
}

♦️ دستور سوم : در این بخش ما دیگه کامپوننت نداریم بلکه دقیقا همون کلاس هایی که در کدمون استفاده میکنیم رو داریم مثل text-2xl که البته میتونیم مورد های دلخواهم هم بهش اصافه کنیم مثل :

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px #ff0000;
  }
}

🔸 حالا کافیه در کنار input.css یک فایل output.css که به عنوان خروجی کار استفاده میشه رو بسازیم و اون رو لینک کنیم به فایل html خودمون و بعد دستور زیر رو در ترمینال وارد میکنیم :

npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch

حالا برنامه ما آماده اجرا هست و کافیه فایل index.html خودمون رو در لایو سرور اجرا کنیم و حالا هر تغییری که در فایل html ایجاد کنیم به صورت آنلاین و خودکار رسد و اعمال میشه و اصلا به همین خاطر ما آخر دستورمون نوشتیم watch--

🟢 نکته : ما میتونیم عوض اینکه هر بار دستور بالا رو در ترمینال وارد کنیم بیایم در فایل package.json یک کلید مختص همون درست کنیم به این صورت :

"scripts": {
    "build": "npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"
  }

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

npm run build

🔆 چرا باید در جاوااسکریپت از 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 | داکیومنت هام