حق داشتی طلاق بگیری، حق داشتی 😔

#fun
@CodeModule

پیاده سازی تکست ادیتور در ۳ سوت 🔵

‏SlateJS یک کتابخانه برای ساخت و مدیریت تکست ادیتور یا ویرایشگرهای متن در پروژه های React هست. این کتابخانه به دولوپرا اجازه میده تا ویرایشگرهای متن سفارشی‌سازی‌شده و قدرتمندی ایجاد کنن.

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

Document 🌐

#textEditor
@CodeModule

‏Event-Driven Programming در Node.js 🤟

برنامه‌نویسی رویداد محور، یک پارادایم برنامه‌نویسی هست که در آن جریان برنامه توسط ایونت هایی مانند اقدامات کاربر (کلیک‌ها، فشار دادن کلیدها)، خروجی‌های حسگر یا پیام‌های دیگر programs/thread تعیین میشه. Node.js از این پارادایم به طور گسترده برای مدیریت کارآمد عملیات های ناهمزمان استفاده می‌کنه.

اما این پارادایم چجوری کار میکنه؟ 🪲

‏1⃣Initialization: هنگامی که یک برنامه Node.js شروع میشه، ایونت لوپ رو مقداردهی اولیه میکنه و شروع به اجرای اسکریپت میکنه.

‏2⃣Event Registration: ایونت ها و کالبک ها (ایونت هندلر ها) با استفاده از "EventEmitter" یا سایر API ها مانند "http" یا "fs" ثبت میشن.

‏3⃣Event Emission: هنگامی که یک ایونت رخ میده (به عنوان مثال درخواست HTTP، تکمیل شدن خواندن یک فایل)، Node.js ایونت رو منتشر میکنه و کالبک رو فراخوانی میشه.

‏4⃣Event Loop: ایونت لوپ ایونت ها رو بررسی و کالبک هارو اجرا میکنه. همچنین task رو در یک حلقه پیوسته پردازش میکنه تا زمانی که کار دیگری برای انجام وجود نداشته باشه.

به صورت کلی Event-Driven Programming در Node.js برای ساخت برنامه های مقیاس پذیر، کارآمد و real-time خوب و قدرتمنده. در صورت تمایل برای کسب اطلاعات بیشتر، مقالات زیر رو میتونید مطالعه کنید.

- Article
- Article
- Article

#nodejs
@CodeModule

97 نکته و موردی که هر دولوپر باید از اونها اطلاع داشته باشه 🦦

ریپازیتوری زیر بر اساس کتاب 97 Things Every Programmer Should Know project، ‏۹۷ چیز یا نکته به درد بخور برای دولوپرا رو ترجمه و لیست کرده. پیشنهاد میکنم از دست ندید.

🌪 Repository

#tips
@CodeModule

مبارکت باشه به خوشی استفاده کنی 😔

#fun
@CodeModule

پروتکل TCP چیه؟ ⚙

‏TCP (Transmission Control Protocol) یکی از پروتکل‌های اصلی در مجموعه پروتکل‌های اینترنتی (Internet Protocol Suite) هست که برای انتقال داده‌ها بین دستگاه‌ها، در شبکه‌های مختلف مورد استفاده قرار می‌گیره. TCP اطمینان حاصل میکنه که داده‌ها به صورت صحیح و بدون خطا از مبدأ به مقصد انتقال پیدا کنن. این پروتکل از مکانیزم‌هایی مانند تصحیح خطا، ترتیب‌دهی بسته‌ها و کنترل جریان برای ارائه یک ارتباط قابل اعتماد استفاده می‌کنه.

کاربردهای TCP در Node.js 🤟

در نودجی‌اس، TCP به عنوان یک پروتکل پایه‌ای برای ساخت سرور و کلاینت‌های شبکه استفاده میشه. با استفاده از ماژول net در Node.js، میشه به راحتی سرورهای TCP و کلاینت‌های TCP ساخت. این ماژول امکان ارتباطات همزمان و با کارایی بالا رو فراهم میکنه و برای کاربردهایی مانند چت سرورها، انتقال فایل، و هر نوع ارتباط real-time بین دستگاه‌ها بسیار مناسبه.

به عنوان مثال میتونیم با استفاده از ماژول net به این صورت یک سرور TCP بسازیم:

var net = require('net');

var server = net.createServer(function(socket) {
  socket.write('Echo server\r\n');
  socket.pipe(socket);
});

server.listen(1337, '127.0.0.1');

به صورت کلی پروتکل TCP یک ابزار قدرتمند و مطمئن برای انتقال داده‌ها در شبکه‌های مختلف هست، که این برای دولوپر ها بسیار مفیده. استفاده از TCP در Node.js میتونه به بهبود عملکرد و قابلیت اطمینان برنامه‌های شبکه‌ای کمک کنه. برای کسب اطلاعات بیشتر مقالات زیر رو پیشنهاد میکنم.

- Article
- Article
- Article

#nodejs #tcp
@CodeModule

الگو دکوراتور چیه؟ 🤔

در برنامه‌نویسی شی‌گرا، الگوی دکوراتور یک الگوی طراحی(design pattern) هست که اجازه میده رفتار جدیدی به یک شیء خاص به صورت پویا اضافه بشه، بدون اینکه بر رفتار سایر اشیاء از همان کلاس تأثیر بزاره. این الگو به اصل مسئولیت تک (Single Responsibility Principle) پایبنده، چون امکان تقسیم وظایف بین کلاس‌های مختلف رو فراهم میکنه و همچنین به اصل باز-بسته (Open-Closed Principle) کمک میکنه، چون میتونه کارکرد کلاس‌ها رو بدون تغییرشون افزایش بده.

توجه داشته باشید این الگو با دکوراتور ها در پایتون یکی نیست‼️

برای درک بهتر با هم یک مثال میزنیم. فرض کنید که در یک کافی‌شاپ قهوه سفارش میدید. حالا چطور الگوی دکوراتور رو میتونیم ببینیم؟

* هسته: درواقع قهوه شما جزء اصلی هست و فرقی نداره چه قهوه ای باشه.

* دکوراتورها: ممکنه بخوایید به قهوه خودتون اجزای مختلفی اضافه کنید، که به عنوان دکوراتور عمل میکنن. به عنوان مثال این دکوراتور:

‏* MilkDecorator: شیر رو به قهوه شما اضافه میکنه.
‏* SugarDecorator: شکر رو به قهوه شما اضافه میکنه.
‏* SyrupDecorator: شربت های طعم دار رو اضافه میکنه.


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

برخی از ویژگی های این الگو⬇️

🔵نگهداری آسون‌تر: هسته اصلی برنامه بدون تغییر باقی میمونه، که نگهداری و درک کد رو آسون‌تر میکنه.

🔵پایبندی به اصل باز-بسته: میتونید عملکردهای جدیدی به برنامه اضافه کنید بدون اینکه کدهای موجود رو تغییر بدین.

🔵پایبندی به اصل مسئولیت تک: با تقسیم وظایف به کلاس‌های کوچک‌تر و مستقل، کد رو قابل فهم‌تر و قابل مدیریت‌تر میکنه.

به صورت کلی الگوی دکوراتور، یکی از الگوهای مهم و معروف در زمینهٔ طراحی نرم‌افزاره که به عنوان یک الگوی ساختاری (Structural Pattern) در الگوهای طراحی GoF شناخته میشه. این الگو اهمیت زیادی در توسعه‌ی نرم‌افزار داره، پس پیشنهاد میکنم برای درک بهترش مقالات زیر رو بخونید.

- Article
- Article
- Article

#design_pattern
@CodeModule

همه چی آرومه، من چقدر خوشبختم 😣

#fun
@CodeModule

با این ابزار خلاقیت رو به اوج برسون 🚀

‏Bennett Feely یک وبسایت هست که ابزارهای خلاقانه و کاربردی بهتون ارائه میده، که با استفاده از این ابزارها میتونید به سادگی و بدون نیاز به دانش تخصصی، ایده‌های خودتون رو به واقعیت تبدیل کنید.

برخی از ابزارهای Bennett Feely ⬇️

‏* ztext.js: تایپوگرافی 3 بعدی رو به هر وب‌سایت و فونت دلخواهی اضافه کنید.

‏* CSS Scales: این ابزار به شما امکان میده مقیاس‌های رنگی رو از ColorBrewer و van der Walt، Smith و Firing به صورت گرادیانت دریافت کنید.

‏* CSS Pie Chart: با استفاده از گرادیانت‌های مخروطی، نمودارهای دایره‌ای رو به سادگی بسازید.

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


#tools #css
@CodeModule

با ماژول dgram در Node.js آشنا بشید 🐲

ماژول «dgram» در Node.js ابزارهایی رو برای کار با سوکت‌های UDP (User Datagram Protocol) فراهم میکنه. UDP یک پروتکل بدون اتصاله، به این معنی که تبادل short-lived داد ها (داده گرام) رو بین برنامه ها بدون نیاز به اتصال مداوم برقرار می‌کنه.

این ماژول چه کاربردی داره؟ 🤔

* ساخت سوکت های UDP: تابع dgram.createSocket() به شما امکان میده سوکت های UDP رو برای ارسال و دریافت دیتاگرام بسازین. میتونید نوع سوکت رو مشخص کنید (مثلاً «udp4» برای IPv4) و به‌صورت اختیاری یک کالبک برای مدیریت ایونت ها ارائه بدید.

* ارسال و دریافت دیتاگرام: هنگامی که یک سوکت دارید، میتونین از متد «send()» برای انتقال دیتاگرام به یک آدرس و پورت خاص استفاده کنید. متد «send()» داده‌های ارسالی، آدرس مقصد و پورت، و یک کالبک اختیاری برای مدیریت رو می‌پذیره. listener ایونت "message" در سوکت به شما امکان میده دیتاگرام های دریافتی رو دریافت کرده و داده ها رو پردازش کنید.

* مدیریت سوکت: ماژول «dgram» متد های مختلفی رو برای مدیریت سوکت‌های شما ارائه میکنه، از جمله اتصال تنها به یک پورت خاص، پیوستن به گروه‌های چندپخشی برای دریافت پیام‌ها از چندین منبع، و تنظیم ویژگی‌هایی مانند (Time-To-Live (TTL) ) برای دیتاگرام ها.

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


به صورت کلی ماژول dgram در Node.js این مکان رو میده که از سرعت و سادگی UDP برای ارتباط real-time و... استفاده کنید. برای اطلاعات بیشتر به داکیومنت این ماژول مراجعه کنید ⚡️

#nodejs
@CodeModule

🖥 لینکدین و 🌐 گیتهاب دو پلتفرم عالی برای شبکه سازی هستن و همون‌طور که میدونید، دولوپری که شبکه سازی خوبی نداشته باشه، مثل نوازنده‌ایه ک ساز نداره.

در بخش کامنت های این پست لینک گیتهاب و لینکدین خودتون رو بفرستید، تا با بقیه دولوپر‌ها آشنا بشید و کانکشن‌های جدید پیدا کنید 💬

#connection
@CodeModule

میکروسرویس چیه؟ 🦦

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

میکروسرویس ها چجوری کار می کنن؟ 💀

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

به عنوان مثال فرض کنید ❗️

یک برنامه کوچک داریم که وظیفه اون ارسال ایمیل‌های خوش‌آمدگویی به کاربران جدید هست . این برنامه میتونه به سه میکروسرویس تقسیم بشه⬇️

1. میکروسرویس ثبت‌نام کاربر: مسئول ثبت‌نام کاربران جدید و ذخیره اطلاعات اون‌ها در دیتابیس.

2. میکروسرویس تولید ایمیل: مسئول تولید محتوای ایمیل خوش‌آمدگویی بر اساس اطلاعات کاربر.

3. میکروسرویس ارسال ایمیل: مسئول ارسال ایمیل به آدرس کاربر.

اما این میکروسرویس‌ها به چه صورت با هم کار می‌کنن؟😄

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

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

- Article
- Article
- Article

#microservice
@CodeModule

‏AbortController در جاوااسکریپت ✌️

یکی از بزرگترین فاکتورهایی که کمک می‌کنه یک برنامهٔ بهینه و سریع داشته باشیم، اینه که بدونیم چطوری یک عملیات Async رو توی برنامه شروع، و اون‌ رو به پایان برسونیم. در حالت عادی ما عملیات مد نظرمون رو شروع می‌کنیم و بعد از چند لحظه پاسخ عملیات بهمون برمی‌گرده. پس عملیات به طور خودکار به پایان میرسه و به طور کلی، شروع این عملیات به دست خودمونه، اما پایانش خیر!

‏AbortController چیه؟ 🤔

‏AbortController یک قابلیته که اجازه میده خیلی راحت بتونیم یک یا چند عملیات Async رو در زمان لزوم متوقف کنیم.

فرض کنید می‌خوایم اطلاعاتی روی سرور آپلود کنیم:

(async function () { 
  const res  = await fetch('/upload', ... ); 
  const data = await res.json(); 
 
  return data; 
})(); 

گاهی اوقات می‌بینیم که آپلود بیش از حد معمول طول می‌کشه و می‌خوایم اون رو کنسل کنیم تا برای مثال، دکمه‌ای تحت عنوان «تلاش مجدد» نشون بدیم تا کاربر بیش از اندازه منتظر نمونه. fetch به تنهایی چنین قابلیتی رو نداره. اما برای حل این مسئله AbortController به کارمون میاد.

برای اینکه بتونیم عملیات مد نظرمون رو کنترل کنیم، ابتدا باید با استفاده از AbortController یک کنترلر بسازیم:

const controller = new AbortController(); 

همه کنترلرها یک پراپرتی به اسم signal دارن، که به عنوان یک رابط بین کنترلر و عملیاتی که می‌خوایم اون رو کنسل کنیم هست.

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

const controller = new AbortController(); 
 
(async function () { 
  const res  = await fetch('/upload', { 
    // ... 
    signal: controller.signal, 
  }); 
 
  const data = await res.json(); 
 
  return data; 
})(); 

حالا هر زمانی که لازم داشتیم می‌تونیم این عملیات رو کنسل کنیم. برای این کار کافیه متد abort از کنترلر رو صدا بزنیم:

const controller = new AbortController(); 
 
document.getElementById("cancel").onclick = () => { 
  controller.abort(); 
}

به طور کلی، AbortController یک قابلیت کاربردی توی جاوااسکریپت هست که با استفاده اون خیلی راحت می‌تونیم یک یا چند عملیات Async رو در زمان لزوم متوقف کنیم. برای کسب اطلاعات و مشاهده نمونه مثال های بیشتر، این مقاله رو مطالعه کنید.

#javascript
@CodeModule

چالش داریم چه چالشی 🦦

در چالش امروز شما قراره با استفاد از bubble sort یک آرایه بهم ریخته رو مرتب کنید.

آرايه من:

[20,0x2d,01011, 10,0x1d,0101010100, 4,0xf2, 51, 0,3.5, 2, 4,-2];

پاسختون رو کامنت کنید و اگه نمیدونید bubble sort چیه، مقالات زیر رو مطالعه کنید⬇️

- Article
- Article
- Article

#challenge
@CodeModule

۵ سایت فوق‌العاده که هر فرانت دولوپری باید از اونها مطلع باشه 💀

1⃣‏Undraw

یک وبسایت فوق‌العاده که بهتون این امکان رو میده، تصاویر SVG متناسب با نیازهای خودتون رو پیدا، کاستومایز و در پروژه هاتون استفاده کنید.

2⃣‏Kraken

با استفاده از این سایت میتونید تصاویر مد نظرتون رو در اندازه‌های کوچک‌تر فشرده و بهینه کنید. این کار می‌تونه به نفع عملکرد وبسایت و زمان بارگذاریش باشه.

3⃣‏Deblank Colors

‏Deblank Colors ابزاریه که به شما در انتخاب Color Scheme مناسب برای پروژه‌‌هاتون کمک می‌‌کنه. بخشی از تصمیم‌گیری این ابزار مبتنی بر هوش مصنوعی بوده و در نتیجه انجام کارها با سرعت و خلاقیت بیشتری همراه هست.

4⃣‏30secondsofcode

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

5⃣‏frontend.horse

یه سایت کاربردی که با استفاده از اون، میتونید از آخرین اخبار و ترفند های فرانت‌اند با خبر بشید.

#frontend
@CodeModule

‏Domain-Driven Design چیه؟ 🦦

‏Domain-Driven Design رویکردی برای توسعه نرم افزار هست که بر درک و مدل سازی حوزه اصلی کسب و کار تأکید داره، و توسط Eric Evans در کتاب اصلی خود به نام "Domain-Driven Design: Tackling Complexity in the Heart of Software" معرفی شد. DDD استراتژی‌ها و بهترین شیوه‌ها رو برای همسو کردن پروژه‌های نرم‌افزاری با نیازهای پیچیده حوزه کسب‌وکاری رو ارائه میکنه.

مفاهیم اصلی DDD ⬇️

‏🔵 Domain: موضوعی که برنامه فعالیت میکنه رو نشون میده و نشان دهنده کسب و کار یا فعالیت اصلی سازمان هست.

‏🔵 Ubiquitous Language: زبان مشترکی که همه اعضای تیم (دولوپرا، کارشناسان حوزه و... ) به اشتراک میزارن تا از ارتباطات واضح و درک مشترک از دامنه اطمینان حاصل بشه.

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

‏🔵 Entities: اشیایی که اساساً با هویتشون تعریف میشن تا ویژگی هاشون. به عنوان مثال، یک مشتری در یک فروشگاه.

‏🔵 Value Objects: اشیایی که با ویژگی هاشون تعریف میشن و هویت ندارن. به عنوان مثال، یک تاریخ یا یک مقدار ارز.

‏🔵 Aggregates: یک خوشه ای از موجودیت ها و اشیاء که به عنوان یک واحد برای تغییرات داده ها، در نظر گرفته میشن.

‏🔵 Repositories: انتزاعاتی که روش هایی رو برای دسترسی و دستکاری مجموعه ها ارائه میدن و به عنوان پل، بین لایه های دامنه و داده عمل میکنن.

‏🔵 Services: عملیاتی که به طور طبیعی به یک موجودیت یا شی تعلق ندارن، اما برای دامنه ضروری هستن، و اون ها منطق دامنه رو کپسوله میکنن.

‏🔵 Domain Events: ایونت هایی که حاکی از اهمیتی هستن کخ دامنه اتفاق افتاده. اون ها برای تحریک رفتارها یا فرآیندها استفاده میشن.


به صورت کلی Domain-Driven Design یک رویکرد جامع برای توسعه نرم افزار رو ارائه میده که از نزدیک با دامنه کسب و کارشون همسو باشه. DDD روشی ساختاریافته برای مدیریت پیچیدگی‌های ذاتی در توسعه نرم‌افزار ارائه میده و تضمین میکنه که محصول نهایی واقعاً نیازهای تجاری رو منعکس و پشتیبانی کنه. برای کسب اطلاعات بیشتر مقالات زیر رو پیشنهاد میکنم.

- Article
- Article
- Article

#ddd
@CodeModule