#Figma_Template

Figma Template: Restaurant

Difficulty : ⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

پایگاه داده indexedDB چیه ؟

🔸ایندکسد دی‌بی (IndexedDB) یه API سطح پایین برای ذخیره‌سازی داده‌های ساختاریافته و حجیم سمت کاربره، که شامل فایل‌ها و بلاب‌ها هم می‌شه. این API از ایندکس‌ها استفاده می‌کنه تا بتونه داده‌ها رو با سرعت بالا جستجو کنه. در حالی که Web Storage ها برای ذخیره‌سازی مقادیر کم داده‌ها مفیده، اما برای ذخیره‌سازی داده‌های حجیم و ساختاریافته چندان کارایی نداره. اینجاست که IndexedDB به کمک میاد.

🔸پایگاه داده IndexedDB یه پایگاه داده شیءگرا و مبتنی بر جاوااسکریپته. IndexedDB بهت اجازه می‌ده اشیائی رو ذخیره و بازیابی کنی که با کلید ایندکس شدن؛ هر شیئی که توسط الگوریتم تکثیر ساختار یافته پشتیبانی بشه رو می‌تونی ذخیره کنی.

🔸ویژگی ها و مزایاIndexedDB

1 - ذخیره‌سازی آفلاین💾🚫
به کاربران امکان می‌دهد بدون اتصال به اینترنت به داده‌های خود دسترسی داشته باشند.

2 - ذخیره‌سازی داده‌های بزرگ💾📡
برخلاف LocalStorage و SessionStorage که ظرفیت محدودی دارند، IndexedDB می‌تواند حجم بزرگی از داده‌ها را مدیریت کند.

3 - ذخیره‌سازی داده‌های پیچیده💾💪
قادر است اشیاء جاوااسکریپت، آرایه‌ها، رشته‌ها، اعداد و دیگر انواع داده‌ها را ذخیره کند.

4 - پایگاه داده NoSQL
این بدان معناست که از سیستم جداول رابطه‌ای استفاده نمی‌کند و بیشتر شبیه به پایگاه داده‌های NoSQL است.

🔸مثال ساده از کار با IndexedDB در جاوااسکریپت :

 // باز کردن یا ایجاد یک پایگاه داده به نام "myDatabase" با نسخه 1
let request = indexedDB.open("myDatabase", 1);

// رویداد onupgradeneeded برای زمانی که نیاز به ایجاد یا به‌روزرسانی پایگاه داده داریم
request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // ایجاد یک Object Store جدید به نام "myObjectStore" با کلید اصلی "id"
  let objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });

  // ایجاد ایندکس بر اساس فیلد "name" که منحصر به فرد نیست
  objectStore.createIndex("name", "name", { unique: false });

  // ایجاد ایندکس بر اساس فیلد "email" که منحصر به فرد است
  objectStore.createIndex("email", "email", { unique: true });
};

// رویداد onsuccess برای زمانی که ارتباط با پایگاه داده با موفقیت برقرار شد
request.onsuccess = function(event) {
  let db = event.target.result;

  // شروع یک تراکنش برای خواندن و نوشتن روی "myObjectStore"
  let transaction = db.transaction(["myObjectStore"], "readwrite");

  // دریافت Object Store
  let objectStore = transaction.objectStore("myObjectStore");

  // اضافه کردن داده‌ها به Object Store
  let addRequest = objectStore.add({ id: 1, name: "John Doe", email: "john@example.com" });

  // رویداد onsuccess برای زمانی که داده با موفقیت اضافه شد
  addRequest.onsuccess = function(event) {
    console.log("داده‌ها با موفقیت به پایگاه داده اضافه شدند!");
  };

  // رویداد onerror برای زمانی که اضافه کردن داده‌ها با خطا مواجه شد
  addRequest.onerror = function(event) {
    console.log("خطا در اضافه کردن داده: ", event.target.error);
  };
};

// رویداد onerror برای زمانی که ارتباط با پایگاه داده با خطا مواجه شد
request.onerror = function(event) {
  console.log("خطا در باز کردن پایگاه داده: ", event.target.error);
};

🔸برای استفاده از indexedDB کتابخونه های زیادی وجود داره که میتونه پیچیدگی استفاده از این پایگاه داده رو برای کاربرد های کوچک برطرف کنه مثل Dexie.org , PouchDB , JsStore


🔴</CodeHub>

بهترین متد ها برای توسعه دهندگان Node.js>

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

🔴<CodeHub/>

#fun

بالاترین درجه مدرک: اونایی که می‌دونن چجوری div رو وسط صفحه بذارن!

🔴 <CodeHub/>

#HTML

🔸قابلیت Dialog داخل html که میتونه خیلی به کارایی و پرفورمنس سایت کمک کنه و میتونه باعث کم شدن کد های زیاد جاوا اسکریپت برای درست کردن همچین بخشی بشه.

🔸 تو این مقاله میتونن بیشتر راجب بهش بدونید.

🔗 https://developer.mozilla.org

🔴 <CodeHub/>

شرکت CrowdStrike بالاخره درباره اتفاق 19 جولای و از کار افتادن 8.5 میلیون کامپیوتر و سرور ویندوزی توضیحات منتشر کرد. جالب اینجاست که مشکل به طرز عجیبی ساده بوده!

فکر کنید که Falcon برای شناسایی تهدیدات 20 سنسور داشت. ولی هنگام افزودن یک سنسور جدید و به‌روزرسانی تمپلیت، هسته داده‌ها همچنان روی همان 20 سنسور قبلی کار می‌کرد! یعنی بخشی از کد سعی می‌کرد به المان 21ام که اصلاً وجود نداشت، دسترسی پیدا کند و این باعث شد که سیستم دچار خطای out-of-bounds بشود. از آنجا که این خطا در سطح کرنل ویندوز پیش آمده بود، سیستم کرش کرده و بلو اسکرین نمایش داد. به نظر می‌رسد که تست کافی برای تعداد سنسورها انجام نشده بود.

درنتیجه، یک آرایه کوچک که یک المان کمتر داشت، باعث بروز مشکلی بزرگ در سطح جهانی شد! این نشان می‌دهد که همان جزئیات ریز و به ظاهر بی‌اهمیت در اصول کدنویسی چگونه می‌توانند تأثیر عظیمی داشته باشند.

🔗لینک فایل RCA

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

🔴</CodeHub>

#جاوا_اسکریپت

این ویدیو رو دیدم و بنظر ابزار جالبیه برای دیباگ کردن کد ها به خصوص برای Event ها که بعضا دیباگ کردنشون میتونه مشکل و سخت باشه.

🔴<CodeHub/>

#Figma_Template

Figma Template: Tourism

Difficulty : ⭐️⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

و این داستان همچنان ادامه دارد...

🔴 <CodeHub/>

دقیقا خود منم وقتی شنبه برای اولین دوباره میرم پای کد هایی که هفته قبل زده بودم😂💔

#fun

حل مشکل تضمینی مرج کانفلیکت در چند ثانیه😂


🔴 <CodeHub/>

این پکیج واقعا محشره , بیشتر مشکلاتی که سایت های ایرانی باهاشون درگیرند رو پوشش داده و داکیومنت ساده و خوبی هم داره.

🔗https://www.npmjs.com


🔴 <CodeHub/>

حتی از زبان های برنامه نویسی هم میشه درس زندگی رو آموخت.

هر کسی در جای خودش ارزشمند و مهمه ❤️

#Figma_Template

Figma Template: Snowboard shop

Difficulty : ⭐️⭐️⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

#TypeScript

🔸برای کسی که تازه کار با TypeScript رو شروع کرده، این زبان ممکنه یه کم ترسناک به نظر بیاد. ولی اگه چند تا نکته و ترفند خوب یاد بگیری، می‌تونی از قدرت TypeScript استفاده کنی تا کدهای ایمن‌تر و قابل اعتمادتر بنویسی.

1 - فعال کردن حالت Strict 🚦
یکی از بهترین ویژگی‌های TypeScript سیستم بررسی دقیق نوع‌هاشه. با فعال کردن این حالت بررسی نوع‌ها رو با دقت بیشتری انجام می‌ده و پیام‌های خطای بهتری هم بهت می‌ده. برای فعال کردن این حالت، باید این گزینه‌ی رو به فایل tsconfig.json اضافه کنی.

{
  "compilerOptions": {
    "strict": true
  }
}

2 - از نوع‌های صریح استفاده کن 📝
زبان TypeScript همونطور که از اسمش پیداست، درباره نوع‌هاست، پس خیلی مهمه که وقتی نوع‌ها رو تعریف می‌کنی، دقیق و واضح باشی. به جای اینکه بذاری TypeScript خودش نوع‌ها رو حدس بزنه، بهتره که نوع متغیرها، پارامترهای تابع و مقادیر بازگشتی رو صریحاً مشخص کنی. این کار خوندن کد رو راحت‌تر می‌کنه و باعث می‌شه که بقیه برنامه‌نویس‌ها راحت‌تر کدتو بفهمن.

function addNumbers(a: number, b: number): number {
  return a + b;
}

3 - از اینترفیس‌ها استفاده کن📋
اینترفیس‌ها (Interfaces) تو TypeScript بهت این امکان رو می‌دن که شکل اشیا رو تعریف کنی و نوع ویژگی‌های اونا رو مشخص کنی. اینترفیس‌ها ابزار قدرتمندی هستن برای اینکه بتونی کدهای قابل استفاده مجدد و قابل نگهداری بنویسی.

interface User {
  name: string;
  age: number;
  email: string;
}

4 - استفاده از Union Types و Type Guards🔀
قابلیت Union types بهت این امکان رو می‌دن که یه متغیر داشته باشی که می‌تونه چند نوع مختلف داشته باشه. این خیلی به درد می‌خوره وقتی که با شرایطی سروکار داری که یه متغیر ممکنه چند تا مقدار مختلف داشته باشه.
با استفاده از union types و محافظت از نوع‌ها (type protection)، می‌تونی کدی بنویسی که هم انعطاف‌پذیرتره و هم محکم‌تر و با سناریوهای مختلف بهتر کنار میاد.

type Shape = 'circle' | 'square' | 'triangle';

function getArea(shape: Shape, size: number): number {
  if (shape === 'circle') {
    return Math.PI * size * size;
  } else if (shape === 'square') {
    return size * size;
  } else if (shape === 'triangle') {
    return (Math.sqrt(3) / 4) * size * size;
  }
}
const area = getArea('circle', 5);

5 - از جنریک‌ها برای کدهای قابل‌استفاده مجدد استفاده کن🔧
جنریک‌ها بهت این امکان رو می‌دن که اجزای کد رو به شکلی بنویسی که با نوع‌های مختلف کار کنه. اونا انعطاف‌پذیری و ایمنی نوع رو فراهم می‌کنن، چون بهت اجازه می‌دن که نوع‌ها رو توی توابع، کلاس‌ها و اینترفیس‌ها پارامتری کنی. با استفاده از جنریک‌ها می‌تونی توابع یا کلاس‌هایی بنویسی که با انواع مختلف داده‌ها کار کنن و در عین حال، ایمنی نوع رو حفظ کنی. اینجا یه مثال می‌زنم:

function identity<T>(value: T): T {
  return value;
}

const result = identity<number>(42);

6 - استفاده از Type Assertion mama🔍
قابلیت Type Assertion یه روش برای اینه که به کامپایلر TypeScript بگی نوع مشخص یه مقدار چیه، وقتی که تو بیشتر از چیزی که چکر نوع می‌دونه، اطلاع داری. این کار بهت اجازه می‌ده که نوعی رو که TypeScript حدس زده رو نادیده بگیری و مقدار رو به عنوان یه نوع دیگه در نظر بگیری. از Type Assertion با احتیاط استفاده کن و فقط وقتی این کار رو بکن که مطمئنی نوع‌ها با هم سازگار هستن. اینجا یه مثال می‌زنم:

let value: any = 'Hello, TypeScript!';
let length: number = (value as string).length;

7 - استفاده از Intersection Types برای ترکیب انعطاف‌پذیر نوع‌ها🔗
قابلیت Intersection types بهت اجازه می‌ده که چند نوع مختلف رو با هم ترکیب کنی و یه نوع جدید بسازی که همه‌ی ویژگی‌ها و متدهای هر کدوم از اون نوع‌ها رو داره. این کار تو زمان تایپ‌کردن خیلی انعطاف‌پذیری می‌ده و می‌تونه مخصوصاً وقتی با ساختارهای پیچیده‌ی آبجکت‌ها سروکار داری، مفید باشه. اینجا یه مثال برات می‌زنم:

type Greeting = {
  greet(): void;
};

type Farewell = {
  sayGoodbye(): void;
};
type GreetingAndFarewell = Greeting & Farewell;
class Person implements GreetingAndFarewell {
  greet() {
    console.log('Hello!');
  }
  sayGoodbye() {
    console.log('Goodbye!');
  }
}
const person = new Person();
person.greet(); // Hello!
person.sayGoodbye(); // Goodbye

🌟زبان TypeScript یه زبان برنامه‌نویسی قدرتمندیه که تایپ‌های استاتیک و ویژگی‌های پیشرفته‌ای برای توسعه جاوا اسکریپت داره. این نکات بهت کمک می‌کنن تا کدهای تمیزتر و قابل‌نگهداری‌تری بنویسی و بهره‌وری‌ت رو بالا ببری.

🔴<CodeHub/>

15 سایت کار راه‌انداز که هر برنامه‌نویسی باید بشناسه؛ وقتت رو به جای هدر دادن، هوشمندانه مدیریت کن!

🔗https://javascript.plainenglish.io

🔴 <CodeHub/>