Code Module | کد ماژول
1.91K subscribers
357 photos
42 videos
6 files
355 links
Hello World 🌎

<> Earth is programmable if you code it </>

Group 👇🏻
@CodeModuleGap

Contact Us 👇🏻
@MrShahiin
@neoMahan
Download Telegram
⚡️پرفورمنس سایتت رو بسنج !

توی این پست یک سایت بهتون معرفی میکنم که با استفاده از اون، میتونید سایت مد نظرتون رو از بابت Performance ،Structure ،LCP و LBT بسنجید و انالیزشون کنید🏋️‍♀️

⚠️ جهت استفاده از این سایت، باید Vpn روشن کنید

🔵Website

#web #performance #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👌2💔1
✌️ با پراپرتی Once در جاوا اسکریپت آشنا بشید!

🟡پراپرتی once در جاوا اسکریپت یک ویژگیه که در تنظیمات (options) های مربوط به متد addEventListener، استفاده میشه. این پراپرتی تعیین می‌کنه که یک event listener، فقط یک بار اجرا بشه و پس از اجرای اولیه به صورت خودکار حذف بشه. این ویژگی بهتون کمک می‌کنه تا از اجرای چندباره‌ی توابع مرتبط با رویدادها جلوگیری کنید.

سینتکس دستور Once در Event listener ها به صورت یک پارامتر درون یک آبجکت پاس داده میشه و مقدار true رو به خودش میگیره :

document.body.addEventListener('click', () => {
console.log('CodeModule run only once :)) ');
}, { once: true });


🟡در کد بالا زمانی که ما روی body کلیک میکنیم، فقط و فقط بار اول CodeModule run only once :)) رو لاگ میگیره و بعد از اون، هرچقدر که کلیک کنیم لاگی گرفته نمیشه. برای مثال از این پراپرتی میتونیم برای مدیریت فرم ها، کلیک روی یک دکمه برای نمایش پیام خاص، یا اجرای یک انیمیشن استفاده کنیم.

به طور کلی پراپرتی once یکی از قابلیت‌های مفید و کارآمد در مدیریت رویدادها در جاوا اسکریپته، که کدنویسی رو ساده‌تر و موثرتر می‌کنه 🔒

#js #trick
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👌5
ادغام و تحویل مداوم (CD/CI) چیه ؟ 🧐

قبل از اینکه راجب این مفاهیم و ارتباطشون باهم حرف بزنیم، باید اول مفهوم و معنی هرکدوم رو بدونیم.

ادغام مداوم یا continues Integration (CI) چیه؟

به صورت کلی CI شبیه بررسی نرم افزاره، یعنی پس از هر تغییر، توسعه دهندگان کد رو ادغام میکنن و یک سیستم خودکار (مثل github action) فورا اونو تستش میکنه.

این باعث میشه اشکالات شناسایی‌ بشن و کد رو ثابت و با کیفیت نگه داره. هدف نهایی یکپارچه سازی پیوسته (CI) ساخت یک محیط توسعه هست که در اون، خطاها در سریع ترین زمان ممکن شناسایی و رسیدگی بشن.

و اما تحویل مدام یا (CD)continuous delivery چیه ؟

یک روش توسعه نرم‌افزاره که انتشار مکرر و قابل اعتماد رو تقویت میکنه، و بر اساس یکپارچگی پیوسته (CI) با خودکارسازی کل فرآیند انتشار نرم‌ افزار، از ساخت و آزمایش تا استقرار، بنا شده.

رابطه CD و CI چجوریه و چه فایده ای داره؟

با خودکارسازی CD کل انتشار نرم افزار بر اساس CI ساخته میشه. این رویکرد ساده مداخله دستی رو به حداقل میرسونه و خطاها رو کاهش میده. همچنین امکان استقرار مکرر و قابل اعتماد رو فراهم می کنه. CD با ترویج بازخورد سریع و تمرکز بر قابلیت استقرار، به تیم ها اجازه میده تا با سرعتی سریع نوآوری کنن.

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

#ci #cd
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥103
Please open Telegram to view this post
VIEW IN TELEGRAM
💔11👌3
👩‍💻 با کتابخانه Next Ui بیشتر آشنا بشید

در واقع Next UI یک کتابخانه UI (رابط کاربری) برای React هست که توسط تیم Next.js توسعه داده شده. این کتابخانه ابزارها و کامپوننت‌هایی رو فراهم میکنه که برای ساخت رابط کاربری‌های وب استفاده میشه.

مزایای استفاده از Next UI چیه؟

🟢طراحی زیبا و حرفه‌ای کامپوننت ها

🟢پشتیبانی از Responsive Design

🟢سرعت بالا و بهینه‌سازی برای SEO

🟢قابلیت کاستومایز سازی کامپوننت ها


معایب استفاده از Next UI چیه؟

🔴مستندات ناقص

🔴کمبود برخی از قابلیت‌ها نسبت به رقبا


🧐 کتابخانه Next Ui چه مزایایی نسبت به سایر رقبا داره؟

این کتابخانه نسبت به رقبای خودش، از سرعت و بهینه‌سازی SEO بهتری برخورداره، اما در عین حال مستندات و پشتیبانی کمتری نسبت به برخی از کتابخانه‌های دیگه داره.

استفاده از Next UI بستگی به نیازها و موارد استفاده خاص شما داره. در صورتی که به سرعت و بهینه‌سازی برای SEO نیاز دارید، Next UI گزینه خوبیه، اما در صورت نیاز به پشتیبانی و مستندات جامع‌تر، ممکنه گزینه‌های دیگه مناسب‌تر باشن👍

برای یادگیری این کتابخانه میتونید به داکیومنتش مراجعه کنید

Document 🌕

#ui #library #nextui
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
8🔥4
اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀

🔵 Link

#figma
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥113
ارگونومی چیه دیگه🗿😂

#fun
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
😁15
پروتکل (RESP) چیه؟ 🤔

سریال سازی پروتکل یا REdis Serialization Protocol یا RESP، یک پروتکل ساده و در عین حال قدرتمند برای ارتباط با کلاینت و سرور ردیس هست.

یکی از مزیت های قابل توجه این پروتکل، پشتیبانی اون از انواع داده ها هست. همچنین همیشه اولین کاراکتر پروتوکل، نوع داده اونه و هر کدوم از داده ها، کاراکتر خاص خودشونو دارن تا برای ردیس قابل فهم باشه، مثال ⬇️

- + : رشته های ساده
- - : خطا ها
- : : عدد صحیح
- $ : رشته های زیاد (برای ذخیره داده های باینری)
- * : آرایه ها

اما وقتی اولین‌ بایت نوع داده هست، پس در انتهای اون چه کاراکتری قرار میگیره؟

در انتهایی خط RESP برای جداسازی دستورات از <LF> و <CR> استفاده میشه، که به این صورت ترجمه میشن :

‌- ترجمه <CR> : با کاراکتر "r\" نشون داده میشه. این کارکتر بدون این که به خط بعدی بره، به ابتدای خط میره.
- ترجمه <LF> : با کاراکتر "n\" نشون داده میشه و به خط بعدی میره.

به صورت کلی RESP توسط کتابخونه های خود redis مدیریت میشه.

یک نمونه از RESP به این صورته:
*2\r\n$3\r\nSET\r\n$5\r\nmykey\r\n$7\r\nmyvalue\r\n


حالا بیاید کد بالا رو ترجمه کنیم!

نکته : تمام کارکتر های "r\n\" به اول خط بعدی میره.

- 2*: آرایه ای رو با دو عنصر (فرمان(command) و آرگومان(argument)) نشون میده.

- $3: طول اولین رشته زیاد رو نشون میده (فرمان)

- فرمان SET : یک مقدار رو به صورت "key-value" تنظیم میکنه

- $5: طوله کلید رو نشون میده (key)

- رشته mykey: کلیدیه که باید مقداری درونش تنظیم بشه.

- $7: طوله مقدار رو نشون میده (value)

- رشته myvalue: مقداری که در کلید ما ست میشه.

- در نهایت کاراکتر های \r\n: به درخواست پایان میده.

تموم این دستورات و کاراکتر ها در ردیس به این صورت نمایش داده میشه :

SET mykey myvalue


به صورت کلی این کار توسط پکیج و کتابخونه های خود ردیس انجام میشه، ولی اینکه بدونیم در پشت صحنه چه اتفاقی میفته، باعث میشه دیدمون نسبت بهش تغییر پیدا کنه. مثلا برای اینکه بدونید درخواست SET رو چجوری میتونیم پیاده سازی کنیم، میتونید این نمونه کد هارو در زبان های مختلف ببینید ⚡️

#redis
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥102
✌️ با مفهموم ASI در جاوااسکریپت آشنا بشید!

‼️در زبان برنامه نویسی جاوااسکریپت، گذاشتن semicolon (;) در پایان دستورات و یا کد هامون اختیاریه، اما این اختیاری بودنش چه دلیلی داره؟

🟡درواقع ویژگی ASI یا Automatic Semicolon Insertion، یک ویژگی داخل زبان جاوااسکریپت هست که گذاشتن semicolon رو در پایان دستورات و یا کد های جاوااسکریپتی اختیاری می‌کنه، به طوری که parser جاوااسکریپت میاد موقع خوندن کد ها،خودش اتوماتیک semicolon رو در پایان کد ها و جاهایی که نیازه میزاره، تا دیگه مشکلی نباشه و کد به درستی خونده بشه.

🤨برای همین شما دیگه نیازی به گذاشتن semicolon در خط به خط کد ندارید.

🟡ولی این هم چند مزایا داره و هم چند معایب، مزایاش اینه که سرعت کد نویسی بالاتر میره و حتی از یکسری باگ هایی که بر اثر فراموشی گذاشتن semicolon بوجود میاد جلوگیری می‌کنه.

اما معایبش چیه؟ همونطوری که می‌تونه از به وجود اومدن باگ های ریز جلوگیری کنه، ممکنه خودش هم عامل به وجود اومدن باگ بشه، به طوری که با گذاشتن فضای خالی (Enter) بین کد ها میاد اخرشون semicolon میزاره که موجب بوجود اومدن SyntaxError یا مشکلاتی از این قبیل میشه.

🧐بهتره خودمون Semicolon بزاریم، یا به ASI بسپریم؟

راه حل عاقلانه اینه که تا جایی که میتونید به گذاشتن semicolon در پایان کد هاتون عادت کنید، تا وقتی که با یک زبان دیگه کد میزنید، دستتون عادت کرده باشه و هم از به وجود اومدن ارور های عجیب در کدهاتون، جلوگیری کنید 😉


#js #asi
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
👌9🔥4
ترجمه برخی از جملات کارفرماها 😔

🟢ما اینجا یه خانواده‌ایم
🔴ترجمه: یه کاری می‌کنیم قشنگ حس کنی بین اعضای خانوادتی. یکی کولرو خاموش می‌کنه، یکی سرکوفت می‌زنه بهت، یکی میگه چایی بیار، تازه ممکنه لباساتم بقیه بپوشن. خلاصه غریبی نکن.

🟢واست رزومه میشه
🔴ترجمه: جوری ازت کار بکشیم، جوری ازت کار بکشیم که هرجا بگی فلان جا کار کردم، درجا استخدام بشی :)

🟢حقوق توافقی
🔴ترجمه: ما یه عددی می‌گیم، تو باید موافقت کنی وگرنه ناراحت می‌شیم. تو که دوست نداری ما ناراحت بشیم عزیزم؟ :)

🟢حقوق پایه وزارت کار
🔴ترجمه: مهم نیست چقدر تخصص داری و چند سال سابقه کار. ما اینجا به قانون پایبندیم، هرچی وزارت کار بگه! :)

🟢محیط پویا و جوان
🔴ترجمه: اینجا یه مشت بچه دور هم جمع شدن که چون کم سن و سالن و توقعشون پایینه استخدامشون کردیم. محیط به قدری پویاست که ممکنه همکارای امروزتو فردا دیگه نبینی!!

🟢کار در شرکت معتبر و مشهور
🔴ترجمه: موقع استخدام‌، بزرگترین شرکت خاورمیانه و حومه‌ایم؛ ولی موقع تسویه، یه زیر پله اجاره کردیم و محصولاتمون رو می‌ذاریم داخل پلاستیک مشکی می‌دیم دست مشتری :)

🟢دارای اتاق فکر و بازی
🔴ترجمه: یه فوتبال دستی رنگ و رو رفته داریم که تار عنکبوت بسته چون هیچکس حق نداره ازش استفاده کنه. مهد کودک که نیومدی، اینجا رو مثل اردوگاه کار اجباری آلمان نازی ببین

🟢باهاتون تماس می‌گیریم
🔴مصاحبه رو رد شدی و هیچ‌وقت قرار نیست تماسی باهات گرفته شه (90 درصد مواقع)


البته جسارت به هیچ شرکت و کارفرمایی نمیکنم، اما اکثریت همینه داستانشون :))


#fun
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
😁23👌4
😉 مراقب وب سایتتون در برابر CSRF باشید!

درواقع CSRF (که XSRF هم گفته میشه)، یک آسیب‌پذیری وبه که مهاجم با استفاده از اون میتونه یوزر رو مجبور به انجام اقداماتی کنه، که قصد انجام اونها رو نداشته. این آسیب‌پذیری به مهاجم اجازه میده تا حدی سیاست SOP رو دور بزنه.

🔵سیاست SOP (کوتاه‌ شده Same Origin Policy) یا سیاست مبدأ مشترک، به منظور جلوگیری از سرقت داده با ارسال درخواست‌های Cross-Origin (میان‌وب‌گاهی) طراحی شده.

🧐چجوری CSRF اتفاق میوفته؟

در یک حمله CSRF، مهاجم با ارسال یک درخواست به وب‌سایت هدف، یوزر رو فریب میده تا درخواست مخرب رو انجام بده. این درخواست معمولاً از طریق یک لینک یا فرم در یک وب‌سایت مخرب برای کاربر ارسال میشه. حال اگه کاربر وارد لینک هدف بشه، درخواست مخرب مهاجم بدون اطلاع و تأیید کاربر انجام میشه.

🔐نحوه جلوگیری از CSRF

برای جلوگیری از CSRF، تکنیک‌های مختلفی وجود داره که شامل استفاده از CSRF Token، بررسی Origin Header، استفاده از SameSite Cookies و اعتبارسنجی Referer Header میشن. همچنین دولوپرا باید به طور دقیق از روش‌های احراز هویت و سطح دسترسی صحیح استفاده کنن (رعایت authorizations و authentication)

به طور کلی CSRF یک تهدید جدی برای امنیت وب‌سایت‌ها می باشد، و باید با دقت و توجه با اونها برخورد بشه. با پیاده‌سازی تکنیک‌های مناسب، میتونیم از این نوع حملات جلوگیری کنیم و امنیت کاربران رو حفظ کنیم 🏖️


#csrf #sequrity
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥134
تفاوت Type Alias و Interface در تایپ‌اسکریپت 🥶

تایپ Alias و اینترفیس شباهت‌های خیلی زیادی بهم دارن و تقریباً هر جایی می‌تونن بجای همدیگه استفاده بشن. اما یه سری تفاوت ها بینشون هست که تو این پست با هم بررسیشون میکنیم.

همونطور که می‌دونید، میتونیم تایپ های دلخواهمون رو با استفاده از Type Alias به شکل زیر تعریف میکنیم:

type Person = { 
name: string;
age: number;
}

اما اگه با اینترفیس‌های آشنایی داشته باشید، می‌دونید که تایپ بالا رو خیلی راحت می‌تونیم با یک اینترفیس هم بنویسیم:
interface Person { 
name: string;
age: number;
}


نحوهٔ استفاده از این اینترفیس هیچ تفاوتی با تایپی که ساختیم نداره و می‌تونه توی مثال بالا استفاده بشه. در واقع توی خیلی از جاها این دو ویژگی می‌تونن به همین شکل بجای همدیگه استفاده بشن.

پس چه تفاوت‌هایی وجود داره؟ 🤔

1⃣کار با مقادیر Primitive

این یکی از مهمترین تفاوت‌های این دو ویژگی هست. تو مثال‌های بالا دیدیم که ما تونستیم برای تایپ string یک تایپ با اسم دلخواه خودمون بسازیم. همونطور که می‌دونیم string یک Primitive (مقدار غیر آبجکتی) هست و ما برای کار با مقادیر Primitive نمی‌تونیم از اینترفیس‌ها استفاده کنیم. در واقع ما از اینترفیس‌ها فقط می‌تونیم برای شکل دادن به آبجکت‌ها استفاده کنیم. اما با Type Alias می‌تونیم هم برای مقادیر آبجکتی و هم Primitive ها تایپ دلخواه بسازیم:

interface Person { 
name: string;
}

// or
type Person {
person: string;
}

type Name = string;


2⃣‏Merge کردن اینترفیس‌ها و Type Aliases

یک تفاوت مهم دیگه (شاید مهمترین تفاوت) این دو ویژگی اینه که ما توی یک برنامه می‌تونیم چند اینترفیس با اسم‌های یکسان داشته باشیم. اما این کار برای تایپ‌ها شدنی نیست و ما خطا می‌گیریم:

interface Person { 
name: string;
}
interface Person {
age: number;
}
const john: Person = {
name: "John",
age: 3,
};

توی کد بالا دو اینترفیس اول با هم ترکیب (Merge) شدن و یک اینترفیس شامل پراپرتی‌های age و name رو تشکیل دادن. اما داشتن دو تایپ همنام توی برنامه شدنی نیست:
type Person = { 
name: string;
}
type Person = {
age: number;
}
// Error: Duplicate identifier 'Person'


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


در نهایت، انتخاب بین این دو به نیازهای خاص پروژه شما بستگی داره و در بسیاری از موارد، می‌تونید از هر دو با هم استفاده کنید تا بهترین نتیجه رو بگیرید. اگر به تداخل یا گسترش نیاز دارید، از interface استفاده کنید. اما اگر نیاز به تعریف انواع پیچیده‌تری دارید یا میخواید از ترکیبات یونین یا تقاطع استفاده کنید، type alias مناسب‌تره.

#typescript
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥75
تا الان به این فکر کردید که چطور دو یا چند زبان مختلف رو در یک پروژه ترکیب کنید؟ 🤔 (مثلا Node.js با Php یا شایدم Python)

حتما دیدین که میگن فلان شرکت برای بک اند وبسایتش از چند زبان مختلف استفاده کرده، اما این چجوری امکان‌ پذیره؟

اینجاست که اعلان "gRPC به گروه پیوست" برامون میاد

حروفه RPC مخففه (Remote Procedure Call) هست، که یک چارچوبه اسکیما محوره که ارتباط بین سرویس هارو بهتر میکنه. همچنین از طریق استفاده از HTTP/2 و بافر های پروتکل (Protobuf)، از قرارداد های استریمینگ و تایپ قوی پشتیبانی میکنه و توزیع چند زبانه رو قادر میسازه.

اما بافر های پروتکل یا (protobuf) چیه؟ 🤔

یک روش کارآمد برای سریال سازی داده به فرمت های باینری هست، و نسبت به فرمت های مبتنی بر متن مثله json از نظر فضا، کارآمدتر و سریع تر برای‌ سریال سازی و سریال زدایی هست.

به صورت کلی این یک تکنولوژی جذابه، و اکثر زبان های محبوب ازش پشتیبانی میکنن که در داکیومنت خود gRPC، لیست زبان ها قرار داده شده.

‏RPC رو توضیح دادیم اما راجب g چیزی نگفتیم!

احتملا فکر کنید g یعنی google اما نه!! تقریبا هر دفعه یک معنی میده، که اینجا معانی های مرسوم حرف g لیست شده.

در چه مواردی از gRPC استفاده میشه؟

🔵معماری‌های میکروسرویس: در معماری‌های مبتنی بر میکروسرویس، سرویس‌های فردی ممکنه در زبان‌های برنامه‌نویسی مجزا برای مطابقت با نیازهای خاص خود توسعه داده بشن. علاوه بر این، ممکنه چندین کار به صورت همزمان نیاز داشته باشن و خدمات ممکنه با بارهای کاری متفاوتی مواجه بشن.

🔵اپلیکیشن های استریم: پشتیبانی gRPC از الگوهای پخش چندگانه، سرویس‌ها رو قادر میسازه تا داده‌ها رو به‌ محض دردسترس شدن، به اشتراک بگذارن و پردازش کنن. بدون اینکه هزینه‌ای برای ساخته مکرر اتصالات جدید داشته باشه. این باعث میشه که برای برنامه‌های چت و ویدیوی real-time، برنامه‌های بازی آنلاین، پلتفرم‌های معاملات مالی و فیدهای داده زنده مناسب باشه.

برای توضيحات بیشتر، مثال های کاربردی و سایر نکات به تلگراف سر بزنید.

#gRPC
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥93
🤯هر متن و کدی رو از ویدیوی مورد نظرت کپی کن!

👌توی این پست قراره یک اکستنشن کاربردی بهتون به نام SelectText بهتون معرفی کنم، که با استفاده از اون میتونید هر متنی که میخواید رو از روی ویدیو کپی و استفاده کنید.

این اکستنشن برای برنامه نویسا که کلی ویدیو آموزشی میبینن، خیلی مفیده چون به راحتی میتونن کد هارو از ویدیو کپی کنن و دیگه، دردسر کد نوشتن نداشته باشن 👨‍💻


🔵 Download

#extension #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👌3
در به در دنبال ابزار‌های کاربردی css نباش 🔵

سایت زیر مجموعه‌ای از بهترین ابزار‌های کاربردی و مهم css رو جمع آوری کرده، و به راحتی میتونید ابزار مد نظرتونو پیدا و استفاده کنید 💀

🔵Website

#css #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥73
🔵 با HOC در React.js آشنا بشید

‏Higher-Order Components یا HOC در React.js یک پترن پیشرفته برای استفاده مجدد از منطق کامپوننت‌ها هست. HOC یک تابعه که یک کامپوننت رو به عنوان ورودی می‌گیره و یک کامپوننت جدید با قابلیت‌های افزوده‌شده رو برمی‌گردونه.

از ‏HOCها معمولاً برای موارد زیر استفاده میکنن:

🔢 استفاده مجدد از منطق: وقتی که می‌خواید منطق یکسانی رو در چندین کامپوننت مختلف به اشتراک بگذارید.

🔢 محدود کردن دسترسی: وقتی که می‌خواید دسترسی به یک کامپوننت رو محدود کنید، مثلاً فقط برای کاربران لاگین شده.

🔢 تزریق داده: وقتی که می‌خواید داده‌ها رو به یک کامپوننت تزریق کنید.

😉رعایت قانون DRY با HOC !

در برنامه نویسی اصولی، یک اصل هست به اسم Clean Coding، که قوانین زیادی داره و ما به عنوان یک Developer حرفه ای باید اون قوانین رو رعایت کنیم. یکی از این قوانین DRY ( dont Repeat Yourself ) هست.

این قانون میگه وقتی یک تیکه کدی رو یکبار نوشتید، دیگه نباید اون رو مجددا بنویسید تا در جاهای دیگه ای استفاده کنید. باید یکبار برای همیشه نوشته بشه و استفاده بشه.


🚀 ویژگی‌های منحصر به فرد HOC چیه؟

🔵اول اینکه HOC ها برای Reusable کردن یک تیکه کد کاربرد دارن.

🔵دوم اینکه HOC ها کامپوننت هارو ویرایش نمیکنن، بلکه یک نسخه بروز شده از اون کامپوننت میسازن.

🔵سوم اینکه HOC ها pure function هستن و هیچ side Effect ندارن.


به طور کلی، استفاده از HOC کدمون رو حرفه ای تر و خلاصه تر می‌کنه. برای مثال ها و اطلاعات بیشتر میتونید این مقاله رو مطالعه کنید.

#hoc #react
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👌3
خروجی کد بالا؟ 😄
Anonymous Quiz
12%
NaN, false
13%
undefined, true
46%
5, true
28%
5, false
🔥7👌3
تکنیک‌ها و ابزار‌های دیباگ در Node.js 🤟

دیباگ کردن، مهم ترین مهارتیه که هر برنامه نویس باید اون رو در خودش تقویت کنه. در این پست با یکسری از تکنیک های این مهارت آشنا میشیم، که احتمالا اون هارو نمیدونستید.

1️⃣دیباگ تعاملی ( Interactive)

این تکنیک از ابزار های تخصصی دیباگ استفاده میکنه و این امکان رو میده اجرای برنامه رو کنترل کنیم. در Node.js ما میتونیم با استفاده از ابزاری مثله node inspector این کار رو انجام بدیم.

2️⃣ردیابی فعالیت (active tracing)

این تکنیک که به عنوان (profiling یا performance) نیز شناخته میشه، فراتر از ردیابی اولیه هست و بر نحوه استفاده برنامه از قدرت پردازش تمرکز داره. این تکنیک زمان مصرف شده اجرای بخش های خاص کد رو اندازه‌گیری، و به شناسایی مناطقی کمک میکنه که منابع رو بیش از حد مصرف، و عملکرد رو مختل میکنن. برای این کار از sentry استفاده می‌کنیم.

3️⃣دیباگ کردن بعد از مرگ (post-mortem debug)

از این رویکرد پس از خرابی غیر منتظره یک برنامه استفاده میشه، که دیباگر ها میتونن از منابع مختلف مثله فایل های گزارش (log files) برای درک علت خرابی استفاده کنن، و از ابزاری مثله NDB استفاده میشه.

4️⃣الگوریتم wolf frence

ما با استفاده از git bisect در گیت، میتونیم الگوریتم wolf-fence رو پیاده سازی کنیم، که در دو مرحله انجام میشه:

🔵تاریخچه گیت رو به دو قسمت تقسیم میکنیم.

🔵بررسی می‌کنیم که آیا اشکال در نیمه اول وجود داره یا نیمه دوم؟

این مراحل رو به صورت مکرر انجام میدیم تا
در نهایت مشکل رو پیدا کنیم.


به صورت کلی تکنیک ها و مباحث زیادی وجود داره که میشه درموردشون حرف زد، مثلا یکی دیگ از تکنیک ها "anti-debugging" هست، که پیشنهاد میکنم خودتون درموردش تحقیق کنید :))

#debugging
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👌2