در به در دنبال ابزار‌های کاربردی css نباش 🔵

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

🔵Website

#css #tools
@CodeModule

🔵 با 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

تکنیک‌ها و ابزار‌های دیباگ در 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

🖼️می‌خوام لینوکس یاد بگیرم! چیکار کنم ؟

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

🔵در اصل لینوکس تفاوت های زیادی از لحاظ نوع کاربری و حتی نصب (در بعضی توزیع ها) با ویندوز داره. بنابراین نمی‌تونیم بگیم پس ویندوز بلدیم یادگیری اینم برامون راحته ، چون لینوکس هم مبانی و راه و چاه های خودش رو داره.

🧐دوره چی ببینیم ؟ آیا با دوره کار جمع میشه ؟

در جواب این سوال باید گفت هر دوره ای مناسب یادگیری لینوکس نیست. حد الامکان سعی کنید با دوره های معتبری مثل Lpic 1 &2 جادی پیش برید و همچنین در کنار این دوره‌ها، خوندن wiki های معتبر رو ازش دریغ نکنید چون اونا تنها منابع معتبر و درست شما هستن.

🤨مستر ربات دیدم جوگیر شدم، برم لینوکس نصب کنم ؟

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

🫠خب حالا بریم لینوکس رو بوت کنیم ؟

نظر شخصی خودم اینه که چون تازه وارد هستید، با بوت کردن لینوکس به عنوان سیستم عامل اصلی کار باهاش رو شروع نکنید! با استفاده کردن از emulator هایی مثل vmWare یا virtualBox یک لینوکس تستی (برای شروع ترجیحا Mint) نصب کنید و روی اون، کار با لینوکس رو تجربه کنید تا در صورت خراب کاری کردن یا بهم ریختن چیزی، مشکل خاصی به وجود نیاد. حتی سایت هایی وجود داره که توی این پست معرفی کردیم، که شما بدون نصب ماشین مجازی میتونید با توزیع های مختلف لینوکس سر و کله بزنید.

🤯بهترین توزیع لینوکس چیه ؟

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

👩‍💻 استفاده از Ubuntu بین کاربرای لینوکس، مخصوصا افرادی که تازه وارد به دنیای لینوکس میشن خیلی رایجه. اما به خاطر یکسری دلایل مثل نوب فرندلی بودن Ubuntu و اینکه با نصب شدنش، کلی پکیج اضافه بر سازمان هم دانلود می‌کنه که شاید لازمتون هم نشه، و یکسری دلایل دیگه ... یکم تردید توی انتخابش به عنوان یک توزیع ایجاد میکنه.

👨‍🍼یکی از توزیع های استیبل و خوب لینوکس(بیشتر حرفه ای ها ازش استفاده میکنن ؛) ) که می‌تونه برای افراد در حال یادگیری هم خیلی مفید باشه، Arch linux هست.

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

🔵همچنین ارچ مینیموم ترین حالت ممکن نصب میشه و باید خودتون، درایور گرافیک رو روش نصب و کانفیگ کنید و ...

👌همچنین اگر مایل باشید، میتونید از توزیع های ارچ بیس مثل Parch linux استفاده کنید که زحمتی از بر و بچه های ایرانیه.


سعی کردم توی این پست سوالاتی که مرسومه رو با نظرات شخصی خودم جواب بدم، تا دوستانی که این سوالات رو دارن براشون رفع ابهام بشه⚡️

#linux #os
@CodeModule

روابط در شرکت‌ ها 😂😂

#fun
@CodeModule

الگو طراحی سینگلتون چیه؟ 🤔

در مهندسی نرم افزار، الگوی singleton یک الگوی طراحیه که نمونه سازی یک کلاس رو به یک نمونه منحصر به فرد، محدود میکنه. همچنین یک الگو Creational و یکی از الگو های معروفه "Gang of Four" نیز هست.

این الگو زمانی مفیده که دقیقاً یک شیء برای هماهنگ کردن اقدامات در یک سیستم، مورد نیازه.

به طور خاص، الگوی سینگلتون به اشیاء اجازه میده:

♨️فقط یک نمونه داشته باشن
♨️دسترسی آسان به نمونه رو فراهم میکنه
♨️نمونه سازی اون رو کنترل میکنه (مثلاً سازنده های یک کلاس رو مخفی میکنه)

چرا اسم این پترن سینگلتون هست؟

این اصطلاح برگرفته از یک مفهوم ریاضیه و به مجموعه ای که دقیقاً یک عنصر داره، سینگلتون میگن. برای مثال مجموعه‌ای مثل {{1،2،3}} یک سینگلتونه، چون حاوی یک عنصر واحده (که خود یک مجموعه هست، اما سینگلتون نیست).

ویژگی های پترن سینگلتون چیه؟

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

- سینگلتون کلاس رو در سطح گلوبال در دسترس قرار میده.

درحالی که singleton میتونه مفید باشه اما باید دربرخی موارد احتیاط کنیم⬇️

چالش های تست: تست کدی که به سینگلتون وابسته هست میتونه مشکل باشه.

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

🔵میتونیم از الگوی تزریق وابستگی (dependency injection) به عنوان جایگزین، برای looser coupling استفاده کنیم.

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

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

#design_pattern #singleton
@CodeModule

5 تا از بهترین سایت‌های ارائه دهنده قالب‌های Html/Css 💀

🔵html5up

🔵freehtml5

🔵styleshout

🔵free-css

🔵tooplate

#template #html #css
@CodeModule

‏IDE اختصاصی برای توسعه پروژه‌های React.js 🔵

‏Reactide یک محیط توسعه یکپارچه (IDE) مخصوص برای توسعه پروژه‌های ریکتی هست. این ide به منظور ساده‌سازی و تسریع فرآیند توسعه برنامه‌های ریکتی طراحی شده، و شامل ویژگی‌ها و ابزارهای متنوعیه که به دولوپرا کمک می‌کنه تا با کارایی بیشتری کد بنویسن، تست کنن و پروژه‌های خودشون رو اجرا کنن.

برخی از ویژگی‌های Reactide ⬇️

رابط کاربری ساده و یکپارچه: Reactide یک رابط کاربری ساده و کاربرپسند داره، و تموم ابزارهای مورد نیاز برای توسعه پروژه‌های ریکتی رو در یک محیط فراهم می‌کنه.

پیش‌نمایش لحظه‌ای (Live Preview): یکی از ویژگی‌های برجسته Reactide، قابلیت پیش‌نمایش لحظه‌ای هست که به دولوپرا این امکان رو میده تا تغییرات کدشون رو بلافاصله در مرورگر داخلی Reactide، مشاهده کنن.

پیکربندی خودکار ابزارها: Reactide بسیاری از تنظیمات و پیکربندی‌های مورد نیاز برای شروع یک پروژه React رو، به صورت خودکار انجام میده و دولوپرا نیازی به پیکربندی دستی و نصب ابزارهای مختلف ندارن.

مدیریت پروژه و فایل‌ها: این IDE شامل یک مدیر فایل و پروژه داخلی هست که به دولوپرا این اجازه رو میده، تا به راحتی فایل‌ها و ساختار پروژه خودشون رو مدیریت کنن.

ویرایشگر قدرتمند: Reactide دارای قابلیت‌های پیشرفته‌ای مثل تکمیل خودکار کد، برجسته‌سازی نحوی و linting هست که به دولوپرا کمک می‌کنه تا کدهای خودشون رو سریع تر و با دقت بیشتری بنویسن.


برای نصب و راه اندازی این IDE، میتونید به داکیومنتش مراجعه کنید 💀

#react #reactide
@CodeModule

وقتی بک اند کار css پروژه رو میزنه : 😂

#fun
@CodeModule

کلاس Event Emitter در Nodejs 🤟

کلاس Event Emitter یکی از مباحث نسبتا پیچیده و دشوار هست، که تو این پست به صورت خلاصه مفهوم اصلیش رو بررسی می‌کنیم.

در ساده ترین حالت خود، event emitter در Node.js فقط یک کالبک می‌باشد.

نکته جالب توجه اینه که ما اغلب اوقات ازشون استفاده می‌کنیم، ماننده سرور http، پاسخ و درخواست ( response و request) و...، همگی کلاس های Event Emitter رو به ارث میبرن. Emitter ها بهتون این امکان رو میدن که یک الگوی طراحی رویداد محور رو در سرور خودتون پیاده سازی کنید، همچنین این الگو طراحی بسیار شبیه به الگو (pub/sub) هست، جایی که فرستنده (pub) پیام های جدیدی رو به همه شنوندگان یعنی (sub) های خودش ارسال میکنه.

اما چجوری از این کلاس استفاده کنیم؟ 🤔

برای مثال نحوه ساخت یک Event Emitter ساده به شکل زیر هست:

const {EventEmitter } = require("events") 
const simpleEmitter = new EventEmitter()

هر زمانی که ما Emitter رو ایمپورت میکنیم، میتونیم یک شنونده بسازیم و پیام هایی رو برای شنونده یا listener ها ارسال کنیم، همچنین برای اضافه کردن شنونده ها از متد "on" استفاده می‌کنیم، برای مثال:

simpleEmitter.on('my-simple-event',()=>{
console.log("run simple event") 
})

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

🔵Article
🔵Article
🔵Article
🔵Article

#nodejs #event_emitter
@CodeModule

کمبود آیکون های دلخواهت اونم رایگان، اذیتت میکنه ؟

😎 توی این پست چند تا منبع رایگان بهتون معرفی میکنم، که آیکون های فوق‌العاده خفنی ارائه میدن.

🔵https://heroicons.com

🔵https://icons8.com

🔵https://uxwing.com/

🔵https://tabler.io/icons


#icon #free #tools
@CodeModule

کی منو آنفالو کرده؟🤔

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

🔵Website

این سایت یه کوچولو باگ داره، موقع وارد کردن آیدی گیتهابتون دقت کنید.

#github
@CodeModule

اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀

🔵 Link

#figma
@CodeModule

آخری لول لجندریه (رو عکس کلیک کنید)😂


#fun
@CodeModule

رشته ها یا threads چی هستن؟ 😄

‏threads در سیستم عامل ها، یک جریان متوالی از دستورالعمل ها در یک فرایند یا process رو نشون میده، ترد ها اغلب اوقات بهشون فرایند سبک وزن هم میگن، چون ویژگی های مشترکی با فرایند ها دارن اما از نظر استفاده از منابع، کارآمدتر هستن. یک فرایند میتونه از چندین رشته تشکیل بشه و وظایف همزمان رو انجام بده.

یک مثال بهتر از دنیای پیرامون❗️

فکر کنید در آشپزخونه هستید و کل آشپزخونه یک process هست.

سرآشپز ‌ها threads های درون این فرایند هستن و هر سرآشپز، مجموعه ای از مهارت ها و مسئولیت های خاص خودش رو داره (آشپزی، آماده کردن ظرف و...)

سفارش یا وظیفه هایی که بر عهده هر سرآشپز قرار میگیره، مانند task هاییه که درون threads ها هستن و هر task وظیفه خاص خودش رو داره.

این معنی و مفهوم Thread بود :))

اما مزیت thread ها چیه؟

1⃣رشته یا threads ها، برنامه رو قادر می‌سازه زمانی که یک thread مسدود شد، (مثلا منتظر عملیات I/O باشه ) هنوزم برنامه پاسخگو باشه.

2⃣رشته ها درون یک فرایند، فضای آدرس حافظه یکسانی رو به اشتراک میزارن و اجازه میدن به‌ طور موثر، به ساختار داده های رایج دسترسی داشته باشن و اصلاحشون کنن.

3⃣با اجازه دادن به چندین رشته برای اجزای همزمان (روی CPUهای چند هسته ای)، برنامه ها میتونن عملکرد قابل توجه ای داشته باشن.

اما در thread ما دو مفهوم به نام های "single-threaded" و "multi-threaded" داریم که هرکدوم بحث جدا دارن، و در ادامه راجبشون پست میزاریم. در صورت تمایل برای کسب اطلاعات بیشتر، میتونید مقالات زیر رو بخونید.

- Article
- Article
- Article
- Article

#threads
@CodeModule

تفاوت immutable | mutable در ✌️

در ابتدا برای اینکه تفاوت mutable و immutable رو درک کنیم، نیازه که یک دانش کلی از primitive type ها و reference type ها داشته باشیم. پس بریم که اول یک یادآوری راجب این دو تا داشته باشیم 😉

🟡‏Primitive type ها چی هستن؟

در جاوا اسکریپت، primitive types شامل string ، Boolean و number و undefined میشه. این نوع دیتا ها در حافظه به صورت مستقل از هم ذخیره میشن و تغییرات بر روی یکی از این داده‌ها، تاثیری بر روی داده‌های دیگه نمیذاره که جلوتر با مثال بهتر درکشون میکنید.

🟡‏Refrence type ها چی هستن؟

در واقع reference types شامل array ،object و function میشه. در این حالت، داده‌ها به صورت cursor در حافظه ذخیره میشن و تغییرات بر روی یک متغیر، میتونه تاثیر گذار بر داده‌های دیگه باشه.

⚡️اما تفاوت mutable و immutable

در جاوا اسکریپت، immutable ها primitive types هستن، یعنی یکبار ایجاد میشن و قابل تغییر نیستن، به عنوان مثال:

let name = 'john';
let name2 = name;

console.log(name); //john
console.log(name2); //john

let name2 = 'doe';

console.log(name); //john
console.log(name2); //doe

در مثال بالا مشاهده کردیم، که در صورت اختصاص دادن مقدار name به متغیر name2، و تغییر دادن مقدار متغیر name2، هیچ تغییری در متغیر name ایجاد نمیشه و همون مقدار اولیه log گرفته میشه.


‼️اما mutable ها reference types هستن، یعنی مقدار اونا قابل تغییره، به عنوان مثال:

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person); //{name:'john' , age:22}

console.log(person2); //{name:'john' , age:22}

let person2.name = 'doe';

console.log(person); // { name: 'doe', age: 22 }

onsole.log(person2); // { name: 'doe', age: 22 }

در مثال بالا با اختصاص دادن مقدار آبجکت person به متغیر person2، و تغییر دادن پراپرتی ها و مقادیر person2، آبجکت prerson هم تغییر میکنه و یک مقدار مساوی log گرفته میشه.

✅بنابراین تفاوت اصلی بین mutable و immutable در قابلیت تغییر مقادیر هست. این تفاوت میتونه در مدیریت داده‌ها و پیاده سازی الگوریتم‌های مختلف تاثیرگذار باشه.

به طور کلی، استفاده از immutable types برای پایداری و پیچیدگی کمتر در پروژه مناسبه، در حالی که mutable types برای عملکردهای پویا و تغییرپذیر مناسبه که نسبت به نیازتون، میتونید ازشون استفاده کنید 🏖️

#js #refrence #primitive
@CodeModule

۵ پستی که پیشنهاد میکنم از دست ندید (پارت سوم) 💀

🔵 ویژگی های یک رزومه کارفرما پسند

🔵 ‏Memoization در جاوا اسکریپت

🔵مفهوم Container ها در دنیای نرم افزار

🔵تفاوت بین مفسر و کامپایلر

🔵استفاده از چندین زبان مختلف در یک پروژه، با gRPC

🔴پارت قبل رو یادتون نره :))


#top
@CodeModule

جوری که developer و tester با پروژه رفتار میکنن😂😂 :

#fun
@CodeModule

آیا Node.js یک single-threaded محسوب میشه؟ 🤟

در پست قبل به بررسی اینکه رشته یا thread چی هست پرداختیم، اما در این پست راجب این که رشته ها در Node.js به چه صورت هستن، صحبت میکنیم.

البته قبل از اینکه بدونیم Node.js تک رشته ای هست یا نه، ابتدا باید مفهوم single-threaded و multi-threaded ها رو متوجه بشیم.

‏single-threaded: اگه شما یک رستوران و یک گارسون داشته باشید، اون گارسون میتونه هربار فقط یک سفارش بگیره، یک غذا رو آماده کنه و به یک مشتری سرویس بده.

‏multi-threaded: حالا اگه همون رستوران چندتا گارسون داشته باشه، میتونه به صورت مستقل سفارش بیشتری بگیره و خدمات بیشتری ارائه بده.

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

اما Node.js واقعا تک رشته ای هست؟ 🤔

‏Node.js ‏بخاطر معماری non-blocking و ایونت محور، اغلب باعث این تصور غلط میشه که ذاتا تک رشته ای هست، ولی خب یک نکته ریزه داره که برای درکش، ابتدا باید با ایونت لوپ ها آشنا بشید‌ ⬇️

در قلب Node.js، ایونت لوپ قرار داره و مکانیزمی هست که کالبک ها رو به صورت non-blocking، مدیریت و اجرا میکنه.این تک رشته به صورت مداوم ایونت هایی مثل درخواست های دریافتی، عملیات های I/O تکمیل شده یا منقضی شدن زمان رو بررسی میکنه، و هنگامی که یک ایونت شناسایی‌ شد کالبک فانکشن های مربوطه رو در صف اجرا قرار میده، سپس ایونت لوپ این تماس هارو به ترتیب دریافت، و پردازش میکنه.


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

#nodejs #thread
@CodeModule