#chalange #js_challenge

خروجی این کد چی میشه ؟ 🤔

Channel | YouTube | Instagram

* چنل یوتوبمونم صد تایی شد 🥳🎉 *

دمتون گرم که تا اینجا همراهمون بودید ❤️

امیدوارم روز به روز بتونم ویدیو های باکیفیت تری براتون بسازم تا همینجوری پله های موفقیت رو در کنار هم طی بکنیم 🚀

به همین مناسبت ویدیو جدید رو بعد از چند هفته منتشر میکنیم 🔥

#tools #website

💎معرفی وبسایت 💎

* می‌خوای اسکرین‌شات کدت حرفه‌ای‌تر و جذاب‌تر به نظر برسه؟ 🤔 *

تو این ویدیو یه ابزار بی‌نظیر بهتون معرفی کردم که باهاش می‌تونید از کد های خودتون اسکرین شات‌هایی با طراحی دلخواه خودتون بسازید ⚡

این وبسایت قابلیت کاستومایز بالایی رو در اختیار شما قرار میده و تقریبا همه چیز مثل رنگ‌ها، فونت‌ها، پس‌زمینه و هرچیزی که به ذهنتون می‌رسه با این وبسایت قابل تغییره ⚡

پ.ن : اگر دنبال یه راه ساده و سریع برای ایجاد اسکرین شات‌های باکیفیت از کد های خودتی، این ویدیو رو از دست نده 😁

مشاهده ویدیو

Channel | YouTube | Instagram

میخند ؟ 😂😈

#fun

موقعیت : هر بار که میرم ببینم کی این باگو ساخته

Channel | YouTube | Instagram

#event

سلام و درود رفقا 🙌

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

منتظر دیدارتون هستیم 🚀

مشاهده در ایوند 🔗

Channel | YouTube | Instagram

سلام و درود به همگی 🙌

از اونجایی که خیلی از من سوال شد در مورد این برنامه، نیاز دونستم که یک مقدار دقیق تر توضیح بدم برای دوستانی که متوجه نشدند

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

این برنامه از این نیاز نشعت گرفته شده 👆👆👆

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

و بریم سراغ سوال دوم ２

آیا محدودیتی برای برنامه نویسای شاخه های دیگه مثل DevOps, Backend و ... وجود داره ؟

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

در نتیجه به همین دلیلی که ذکر کردم تصمیم گرفتیم این برنامه رو برای برنامه نویسان فرانت‌اند تدارک ببینیم.

اما هیچ محدودیت خاصی برای این مورد در نظر گرفته نشده و کلیه عزیزانی که علاقه مند هستند که توی این برنامه شرکت کنند میتونند هم از لینک ثبت نام در ایوند و هم از آیدی من (@MohammadTazaroie ) جهت ثبت نام اقدام کنند.

و همچنین همونطور که توی این پیام گفتیم، میتونید حوزه کاری خودتون رو به ما بگید تا برنامه های بعدی رو مخصوص حوزه کاری شما برگزار کنیم ❤️

#javanoscript #js_trick #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part3

توی پارت های قبلی ( یک و دو ) به معرفی متد Object.defineProperty پرداختیم و ویژگی های کلیدی و ارگومان های مختلف این متد رو بررسی کردیم.

حالا توی این پست قراره که پروپرتی های get و set که متعلق به آرگومان denoscriptor هستند رو باهم بررسی کنیم.


❓ مفهوم getter چیست ؟

گِتِر تابعی است که هر زمان به مقدار یک ویژگی دسترسی پیدا می‌کنید، فراخوانی می‌شود.
به جای بازگرداندن مقدار مستقیم ویژگی، getter می‌تواند یک محاسبه انجام دهد یا مقدار را از منبع دیگری دریافت کند.

❔ مفهوم setter چیست ؟

سِتِر تابعی است که هر زمان مقداری به یک ویژگی نسبت داده می‌شود، فراخوانی می‌شود.
به جای جایگزینی مستقیم مقدار ویژگی، setter می‌تواند مقدار جدید را تغییر دهد یا قبل از ذخیره سازی آن، یک عملیات اعتبارسنجی انجام دهد.

بریم تو مثال عملی ببینیم چیکار میکنند 🚀

const obj = {};

let value = 0;

Object.defineProperty(obj, 'prop', {
    get() {
        return value;
    },
    set(newValue) {
        value = newValue + 1;
    },
    configurable: true,
    enumerable: true
});

obj.prop = 10;
console.log(obj.prop);

set :
وقتی obj.prop = 10 را می‌نویسیم، در واقع setter فراخوانی می‌شود و مقدار value به ۱۱ تغییر می‌کند.

get :
وقتی console.log(obj.prop) را می‌نویسیم، در واقع getter فراخوانی می‌شود و مقدار فعلی value که ۱۱ است در خروجی چاپ خواهد شد.

کاربردهای عملی set و get ✅

１ محاسبه مقادیر : می‌توانید از getter برای محاسبه مقادیر بر اساس مقادیر دیگر استفاده کنید. 👇

const person = {
   firstName: "ali",
   lastName: "ahmadi"
};

Object.defineProperty(person, 'fullName', {
  get() {
    return ${this.firstName} ${this.lastName}.toUpperCase();
  }
});

console.log(person.fullName); 

خروجی :

ALI AHMADI

２ اعتبارسنجی داده‌ها : می‌توانید از setter برای اطمینان از اینکه مقادیر ورودی معتبر هستند، استفاده کنید. 👇

const person = {};

Object.defineProperty(person, 'age', {
  get() {
    return this._age;
  },
  set(newAge) {
    if (newAge < 0) {
      throw new Error('سن نمی‌تواند منفی باشد.');
    }
    this._age = newAge;
  }
});

person.age = 30;
console.log(person.age); // خروجی: 30

try {
  person.age = -5;
} catch (error) {
  console.error(error.message); // خروجی: سن نمی‌تواند منفی باشد.
}

و این هم از پارت آخر متد Object.defineProperty

یک مقدار طولانی شد به این دلیل که دوسداشتم این متد رو به خوبی درک کنید ⚡❤️

Channel | YouTube | Instagram

#javanoscript #js_trick #object

* چرا باید از ()Object.is در مقایسه برابری استفاده کنید ؟ *

در جاوا اسکریپت از عملگر == برای مقایسه برابری دو مقدار استفاده می‌شود. با این حال، این عملگر به دلیل تبدیل خودکار نوع داده‌ها (coercion) می‌تواند نتایج غیرمنتظره‌ای را به همراه داشته باشد. برای مثال :

console.log(0 == ""); // true console.log(null == undefined); // true

در مقابل، === مقایسه برابری دقیق تری را انجام می‌دهد و به نوع داده‌ها توجه می‌کند. 👇

console.log(0 === ""); // false
console.log(null === undefined); // false

* حالا بریم بینیم متد Object.is دقیقا چیه ؟ 🤔 *

این متد یک روش جدید در جاوااسکریپت است که برای مقایسه برابری دقیق دو مقدار، مشابه === ، عمل می‌کند. با این تفاوت که Object.is در موارد خاص مانند مقایسه NaN، -0 و +0، نتایج دقیق‌تری ارائه می‌دهد.

* 💥 مثال عملی 👇 *

const a = NaN;
const b = 0 / 0;

console.log(a === b); // false
console.log(Object.is(a, b)); // true

در این قطعه کد دو متغیر به نام‌های a و b تعریف میکنیم و هر دو را برابر با مقدار NaN قرار می‌دهیم. این مقدار ( NaN ) معمولاً زمانی ایجاد می‌شود که یک عملیات ریاضی منجر به نتیجه‌ای نامعتبر شود، مانند تقسیم صفر بر صفر.

１مقایسه اول ( a ===b ) : این مقایسه از عملگر برابری دقیق (===) استفاده می‌کند که هم مقدار و هم نوع داده‌ای دو متغیر را بررسی می‌کند. در این مورد، هر دو متغیر مقدار NaN دارند اما === باز هم false را برمی‌گرداند. دلیل این اتفاق این است که در استاندارد IEEE 754 (استاندارد اعداد ممیز شناور)، NaN با خودش برابر نیست.

２ مقایسه دوم ( Object.is(a, b) ) : این مقایسه از متد Object.is استفاده می‌کند که برای مقایسه برابری دو مقدار طراحی شده است. این متد در بیشتر موارد مانند === عمل می‌کند، اما در مورد NaN رفتاری متفاوت دارد. Object.is تشخیص می‌دهد که هر دو متغیر مقدار NaN دارند و بنابراین true را برمی‌گرداند.

* ✅ مزایای استفاده از این متد چیه ؟ *

● دقت بیشتر : این متد در مقایسه با == و === دقت بیشتری در مقایسه برابری دارد 🚀

● خوانایی کد: استفاده از این متد کد شما را خواناتر و قابل فهم‌تر می‌کند ✅

● سازگاری با استانداردها: این متد بخشی از استاندارد های ECMAScript 2015 است و در اکثر مرورگرهای مدرن پشتیبانی می‌شود ⚡

Channel | YouTube | Instagram

#javanoscript #js_trick #unary_operators

* عملگرهای یکانی (unary operators) در جاوااسکریپت *

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

این عملگرها عملیات مختلفی مانند افزایش/کاهش، ارزیابی نوع داده، منفی کردن یک مقدار و غیره را انجام می‌دهند ⚡

بریم چند موردش رو تو کد ببینیم 🚀


عملگر بیتی (~) : بیت‌های یک عدد را معکوس می‌کند.

let x = 5; // در باینری: 0000000000000000000000000000010
x = ~x; // در باینری: 11111111111111111111111111111010

عملگر void : هر مقداری را نادیده می‌گیرد و undefined برمی‌گرداند

function exampleFunction() {
    return 42; // این مقدار برگشتی تابع است
}

console.log(void exampleFunction()); // undefined

اگر دوست داشتید در مورد بقیه unary operator ها بدونید توی پست زیر به طور کامل بررسیشون کردیم 🔥

https://www.instagram.com/p/C-a5UK5swFQ

Channel | YouTube | Instagram

#fun

- بالاخره به پایتون مسلط شدم 😂

Channel | YouTube | Instagram

#libarary #reactjs #react_helmet

● معرفی لایبرری React Helmet ●

لایبرری React Helmet یک کتابخانه برای مدیریت head در سند HTML در اپلیکیشن‌های React است. با استفاده از React Helmet، می‌تونید به سادگی عنوان صفحه، متا تگ‌ها، و سایر عناصر موجود در head سایت را بر اساس وضعیت فعلی اپلیکیشن تنظیم کنید.
این ابزار برای بهبود SEO، مدیریت اطلاعات متا تگ ها، و به‌روزرسانی داینامیک تگ‌های HTML در اپلیکیشن‌های تک‌صفحه‌ای (SPA) بسیار مفید است. همچنین، React Helmet به شما اجازه می‌دهد که این تغییرات را در هر کامپوننتی از اپلیکیشن خود اعمال کنید، بدون نیاز به دسترسی مستقیم به HTML.

مثال 🚀

import React from 'react';
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <noscript>My Page Title</noscript>
        <meta name="denoscription" content="This is a denoscription of my page" />
      </Helmet>
      <h1>Hello, World!</h1>
      <p>Welcome to my React app with dynamic noscript and meta tags!</p>
    </div>
  );
}

✅ میتونید برای کسب اطلاعات بیشتر به داکیومنت React Helmet در Npm یا GitHub مراجعه کنید.

Channel | Group | YouTube | Instagram

رفقا محمد عزیز توی حوزه وب فعالیت میکنه، از فرانت گرفته تا DevOps و امنیت و ...
و توی پست هاش بیشتر نکاتی رو میگه که هر جایی نمیبینید 🔥

اگر دوست داشتید جوین چنلش بشید تا از محتواش استفاده بکنید

#youtube

سلام رفقا امیدوارم حالتون خوب باشه

بالاخره قسمت کامیونیتی یوتوب وا شد 🤩💥
اولین پستمون رو هم گذاشتیم، ممنون میشک با لایک و‌ کامنت خودتون از این پست حمایت کنید تا پستای بهتر و با کیفیت تری بزاریم 🔥❤️

http://youtube.com/post/UgkxW1dWAh6SkOCE7H6hlGMeQml34PhBLdxX

#libarary #storybook

● معرفی لایبرری StoryBook ●

لایبرری Storybook یک ابزار متن‌باز برای توسعه و تست کامپوننت‌های UI به‌صورت مستقل است. این ابزار به شما اجازه می‌دهد تا کامپوننت‌ها را جدایی از برنامه اصلی توسعه داده و بررسی کنید و همچنین این لایبرری با فریمورک‌های مختلف مثل React، Vue و Angular سازگار است ⚡

✅ ویژگی ها

➊ امکان مشاهده و تست کامپوننت‌ها در حالت‌های مختلف را فراهم می‌کند.

➋ برای کامپوننت ها داکیومنت خودکار ایجاد می‌کند.

➌ این ابزار همکاری بین تیم‌های طراحی و توسعه را بهبود می‌بخشد.

➍ افزونه‌های متعددی برای تست بصری و دسترس‌پذیری دارد.

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

➏ برای پروژه‌های بزرگ و تیم‌های توسعه‌دهنده بسیار مفید است.

مثال عملی 🚀

// Button.stories.js
import React from 'react';
import { Button } from './Button';

export default {
  noscript: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  variant: 'secondary',
};

توی این کد دو نوع دکمه Primary و Secondary را در Storybook ایجاد کردیم.

✅ در کل با استفاده از Storybook می‌توانید به سرعت UI خود را تست و بهبود دهید.

داکیمونت رسمی stoorybook 🔗

Channel | Group | YouTube | Instagram

#javanoscript #triks #js_trick

● استفاده از Optional Chaining در جاوااسکریپت ●

وقتی میخواید به یک پروپرتی در یک آبجکت دسترسی پیدا کنید و مطمئن نیستید که آیا اون پروپرتی وجود داره یا نه، میتونید از Optional Chaining استفاده کنید تا از ارور جلوگیری کنید ⚡

مثل عملی 🚀

let user = {
  name: "Ali",
  address: {
    city: "Tehran"
  }
};

console.log(user.address?.city); // "Tehran"
console.log(user.contact?.phone); // undefined (بدون ارور)

ممنون میشم با ری‌ اکشنای خودتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube | Instagram

توی این پست 5 تا کتابخانه مهم ری‌اکتی رو بهتون معرفی کردم که دیر یا زود به کارتون میاد 👌

ممنون میشم با لایک و کامنتاتون بهمون انرژی بدید تا پستای بیشتر و با کیفیت تری بسازیم ❤️

https://www.instagram.com/p/C-gIW2isv4o