Code Module | کد ماژول

بخشی از تکنولوژی و ابزار هایی که میتینگ پنجشنبه(فردا) دربارشون صحبت میکنیم. پیشنهاد میکنم از دستش ندید 😄 #meet #roadmap #frontend @CodeModule

با کتابخانه Immer بیشتر آشنا بشید🧐 ‏Immer یک کتابخانه جاوااسکریپته که به دولوپرا این امکان رو میده، تا به راحتی و به صورت ایمن، استیت های قابل تغییر (mutable states) رو مدیریت کنن. 🔵هدف اصلی Immer ساده‌سازی کار با داده‌های پیچیده و جلوگیری از بروز خطاهای ناشی از تغییرات ناخواسته، در استیت هاست. این کتابخانه به‌خصوص تو پروژه‌های React و Redux کاربرد زیادی داره و به دولوپرا کمک می‌کنه، تا کدهاشونو خواناتر و قابل نگهداری‌تر کنن. مزایای استفاده از کتابخانه Immer ⬇️ 1️⃣ساده‌سازی مدیریت ‏state : کتابخانه immer با استفاده از پترن برنامه‌نویسی Immutable، تغییرات استیت رو ساده‌تر می‌کنه. شما می‌تونید استیت هارو به صورت مستقیم تغییر بدید و Immer به طور خودکار نسخه جدیدی از استیت تولید می‌کنه. 2️⃣کاهش خطا: با استفاده از Immer، خطر بروز خطاهای ناشی از تغییرات ناخواسته در استیت کاهش پیدا می‌کنه. این موضوع به ویژه تو پروژه‌های بزرگ و پیچیده خیلی حائز اهمیته. 3️⃣‏Performance بالا: Immer بهینه‌سازی‌های خاصی برای پرفورمنس داره و تو بسیاری از موارد، تغییرات استیت رو به صورت کارآمد مدیریت میکنه، بدون اینکه نیاز به کپی کردن کل استیت باشه. 4️⃣سازگاری با Redux‏: Immer‏ به راحتی با Redux ترکیب میشه و می‌تونه در نوشتن reducer های ساده‌تر و خواناتر کمک کنه. 5️⃣پشتیبانی از TypeScript‏: Immer به خوبی با TypeScript سازگاره و دولوپرا می‌تونن از ویژگی‌های تایپ دهی TypeScript استفاده کنن. با توجه به این ویژگی‌ها و مزایا، Immer یک ابزار قدرتمند برای مدیریت استیت در برنامه‌های جاوااسکریپته و به دولوپرا کمک می‌کنه تا کدهاشونو بهبود بدن و کارایی پروژه‌هاشونو، افزایش بدن. برای کسب اطلاعات بیشتر میتونید به داکیومنتش مراجعه کنید. Document 🌕 #immer #library @CodeModule

با tRPC نگران ساخت API نباش!‏ 💀 ‏tRPC توسعه APIهای ایمن از نوع end-to-end رو ساده میکنه. tRPC مخفف "TypeScript Remote Procedure Call"هست و به گونه ای طراحی شده که به دولوپر ها اجازه میده بدون نیاز به واسطه، API های REST یا GraphQL بسازن. این رویکرد type-safety رو از کلاینت تا سرور تضمین میکنه و فرآیند توسعه رو کارآمدتر میکنه. از tRPC چه استفاده ای میشه؟ 🤔 ‏tRPC به ویژه در سناریوهایی که می‌خواید از TypeScript برای توسعه front-end و back-end استفاده کنید، ارزشمنده. با استفاده از tRPC، دولوپر ها میتونن API خود رو در TypeScript تعریف کنن. یک تنظیم معمولی tRPC شامل تعریف برخی کانفیگ ها در سمت سرور هست که میتونه مستقیماً از سمت کلاینت فراخوانی بشه. این کار با استفاده از API ساده tRPC انجام میشه که از پروتکل های HTTP و WebSocket، پشتیبانی میکنه. این پکیج چه ویژگی هایی داره؟ ‏🔵End-to-end Type Safety: سازگاری تایپ رو در بین کلاینت و سرور تضمین میکنه. ‏🔵No Schema Definition: برخلاف GraphQL، نیازی به تعریف اسکیما جداگانه نیست. 🔵سهولت یکپارچه سازی: با فریم‌ورک های فرانت اند مانند Next.js به خوبی ادغام میشه. 🔵انعطاف: از ارتباطات HTTP و WebSocket پشتیبانی میکنه. به صورت کلی ‏tRPC، یک ابزار قوی و نو ظهور برای دولوپر های Node.js هست که به دنبال ساخت API های ایمن، کارآمد و قابل نگهداری هستن. برای کسب اطلاعات بیشتر به داکیومنت این پکیج مراجعه کنید. #trpc @CodeModule

انیمیشن‌های حرفه‌ای به پروژه اضافه کن 🦦 ‏Popmotion یک کتابخانه جاوااسکریپتی برای ساخت انیمیشن‌ها و تعاملات پیچیده هست. این کتابخانه به دولوپرا اجازه میده تا انیمیشن‌های مختلفی رو با استفاده از API ساده و قدرتمند، ایجاد کنن. Popmotion برای انیمیشن‌سازی در وب و برنامه‌های موبایل مناسبه و قابلیت‌هایی مثل انیمیشن‌های تعاملی، جابه‌جایی (tweening)، انیمیشن‌های فیزیکی و واکنش‌های حرکتی رو فراهم می‌کنه. ویژگی‌های کلیدی Popmotion ⬇️ 🔵‏API ساده و قدرتمند: API این کتابخانه ساده و قابل فهمه، و در عین حال امکانات قدرتمندی رو فراهم می‌کنه. 🔵انیمیشن‌های تعاملی: با Popmotion میتونید انیمیشن‌هایی رو ایجاد کنید، که به ورودی‌های کاربر مثل کلیک، حرکت ماوس و ... واکنش نشون بدن. 🔵انیمیشن‌های فیزیکی: Popmotion از مدل‌های فیزیکی مثل فنرها، اصطکاک و شتاب پشتیبانی می‌کنه که می‌تونن انیمیشن‌ها رو طبیعی‌تر و واقعی‌تر کن. 🔵پشتیبانی از انیمیشن‌های CSS و ‏SVG‏: Popmotion می‌تونه انیمیشن‌های CSS و SVG رو مدیریت کنه. 🔵انعطاف‌پذیری بالا: این کتابخانه انعطاف‌پذیری بالایی داره و می‌تونه به راحتی با سایر کتابخانه‌ها و فریم‌ورک‌ها ترکیب بشه. برای کسب اطلاعات بیشتر، به داکیومنت این کتابخانه مراجعه کنید. Document 🌐 #popmotion @CodeModule

تازه پروژه هم ده خط بیشتر نیست 😂😂 #fun @CodeModule

چنل توسعه دهندگان وب! (𝗙𝗿𝗼𝗻𝘁𝗘𝗻𝗱 & 𝗕𝗮𝗰𝗸𝗘𝗻𝗱)

@Dr_Front

گروه پرسش و پاسخ درباره طراحی سایت!❤️🚀

@Front_Group

توسعه dApp با Wagmi و React 🔵 ‏Wagmi یک کتابخانه برای توسعه برنامه‌های غیرمتمرکز (dApps) در اکوسیستم اتریوم با استفاده از React هست. این کتابخانه برای ساده‌سازی ارتباطات با کیف‌پول‌های رمزنگاری، مدیریت وضعیت شبکه و تراکنش‌ها، و دسترسی به قراردادهای هوشمند طراحی شده. برخی از ویژگی های کاربردی Wagmi⬇️ 🔵مدیریت کیف‌پول‌ها: Wagmi به دولوپرا این امکان رو میده تا به راحتی کیف‌پول‌های مختلف (مثل MetaMask، WalletConnect و غیره) رو به برنامه‌هاشون متصل کنن. 🔵مدیریت شبکه و وضعیت: این کتابخانه ابزارهایی برای مدیریت شبکه‌های مختلف اتریوم، بررسی وضعیت اتصال، و سوئیچ کردن بین شبکه‌ها فراهم می‌کنه. 🔵ارتباط با قراردادهای هوشمند: Wagmi امکاناتی برای فراخوانی توابع قراردادهای هوشمند، ارسال تراکنش‌ها، و خوندن داده‌ها از بلاک‌چین به ما میده. 🔵ساختار آسون و یکپارچه: با استفاده از React hooks و context،‏ Wagmi یکپارچگی و سادگی رو برای دولوپرا ایجاد می‌کنه.

در اصل کار این کتابخانه تعامل برقرار کردن با اسمارت کانترکت های شبکه های EVM ای هست. نوشتن و خوندن اطلاعات روی این شبکه ها و Contract هاشون.

برای کسب اطلاعات بیشتر، به داکیومنت این کتابخانه مراجعه کنید. #ethereum @CodeModule

با ماژول string_decoder آشنا بشید! 💀 ماژول «string_decoder» در Node.js روشی کارآمد برای رمزگشایی اشیاء بافر به استرینگ ها، و در عین حال با حفظ یکپارچگی UTF-8 و UTF-16 رو ارائه میکنه. از این ماژول چه زمانی باید استفاده کنیم؟ کلاس اصلی «StringDecoder» هست. این کلاس برای رمزگشایی بافرها به رشته ها با تمرکز بر مدیریت صحیح رمزگذاری کاراکترهای چند بایتی طراحی شده. اما این کلاس چه کاربردی داره؟ به عنوان مثال: 1⃣وارد کردن ماژول: ابتدا برای استفاده باید ماژول «string_decoder» رو ایمپورت کنید. به این صورت:

const { StringDecoder } = require('string_decoder');
 

2⃣ایجاد یک نمونه StringDecoder: میتونید با تعیین رمزگذاری مورد نظر، نمونه‌ای از «StringDecoder» بسازین (به عنوان مثال، «utf8»، «utf16le»، «base64»).

const decoder = new StringDecoder('utf8');
 

3⃣بافرها: از متد "write" برای رمزگشایی بافر ها و از متد "end" برای مدیریت بایت های باقی مانده استفاده کنید.

const buffer = Buffer.from([0xE2, 0x82, 0xAC]);
 const decodedString = decoder.write(buffer);
 console.log(decodedString);// output-> € 
 

متد «end» تضمین میکنه بایت‌های باقی مونده در بافر به درستی رمزگشایی میشن.

const restingBytes = decoder.end();
console.log(remainingBytes);
 

به صورت کلی ماژول «string_decoder» در Node.js یک ابزار کاربردی برای دولوپر هایی هست، که با داده‌های باینری که باید به رشته‌ها تبدیل بشن. برای کسب اطلاعات بیشتر در مورد این ماژول، به داکیومنتش مراجعه کنید. #nodejs @CodeModule

با Preact و تفاوت هاش با React آشنا بشید 🤯 🟣‏Preact یک کتابخانه جاوا اسکریپتیه که به عنوان یک جایگزین سریع و سبک برای React طراحی شده. این کتابخانه با React سازگاری داره، بنابراین دولوپرا میتونن یک MVP (محصول حداقلی قابل قبول) رو به یک برنامه کامل React توسعه بدن. 🚀‏Preact یک Virtual DOM کوچیک داره که فقط ۳ کیلوبایت حجمشه، که این موضوع باعث انتقال سریع‌تر از سرور به کلاینت و بهینه‌سازی loadtime میشه. ‏Preact همچنین یک compatibility layer با React فراهم میکنه و به عنوان یک جایگزین مناسب عمل میکنه. این باعث میشه که دولوپرا به راحتی بتونن اونو تو برنامه‌هاشون بگنجونن و از همون کد و کتابخانه‌ها استفاده کنن، اما با عملکرد بهتر. ✅ویژگی های کلیدی و تفاوت های React و Preact انتخاب بین React و Preact بستگی به نیازها و الزامات خاص پروژه شما داره. هرچند این دوتا کتابخانه دارای ویژگی‌های مشابهی هستن، اما تفاوت‌های کلیدی بینشون وجود داره. برای تعیین اینکه کدومشون گزینه بهتریه، باید در نظر بگیرید که آیا عملکرد Preact کافیه یا اگر به ویژگی‌های بیشتری که React ارائه میده نیاز دارید. عوامل دیگه ای مثل complexity، اندازه و عملکرد پروژه هم میتونه در این تصمیم تاثیرگذار باشن. 🔢‏Complexity: اگر پروژه شما به API پیچیده‌تر و بیشتری نیاز داره، React ممکنه انتخاب بهتری باشه. Preact دارای API ساده‌تریه و ممکنه تمام ویژگی‌های پیشرفته React رو نداشته باشه. 🔢‏Size‏ : Preact دارای باندل سایز کوچیکتری نسبت به React هست که این می‌تونه، برای بهینه‌سازی loadtime برنامه و کاهش استفاده از پهنای باند مفید باشه. اگر سایز یکی از موارد کلیدی پروژه شماست، Preact ممکنه انتخاب بهتری باشه. برای این که پست زیاد طولانی نشه، ادامه مقاله رو در تلگرافمون بخونید. #preact #react #different @CodeModule

ماژولیتیای عزیز 🦦 ♨️آیا میدونستید با ریکشن زدن رو پستا، به ادمین‌های کدماژول انرژی میدید؟ ♨️آیا میدونستید برنامه هایی برای سایت اوپن سورس کد ماژول داریم؟ ♨️آیا میدونستید ما هر پنجشنبه ساعت ۱۰، میتینگ و دورهمی های فوق‌العاده کاربردی داریم؟ (شما هم میتونید ارائه دهنده باشید) ♨️آیا میدونستید با فوروارد کردن پستا، از ما و کامیونیتی برنامه نویسی حمایت میکنید؟ ♨️آیا میدونستید گپ کد ماژول، یکی از فعال ترین گپ های حال حاضر برنامه نویسیه؟ ♨️آیا میدونستید روی حمایت ″کدماژول″ از پروژه های اوپن سورستون، میتونید حساب کنید؟

و در آخر آیا میدونستید اگه انتقاد یا نظری دارید، میتونید پیوی شاهین، ماهان و مهدی مطرح کنید؟

در کنار هم پیشرفت کنیم💙 @CodeModule

شاید برای شما هم سوال باشه که برنامه‌های بزرگ چطور ساخته میشن؟ 🤔

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

تو این پست یک ریپازیتوری بهتون معرفی میکنم که دقیقا به همین مسائل پرداخته. در این مخزن شما لیستی از برنامه های بزرگی رو مشاهده می‌کنید، که با کلیک روی هر کدوم می‌تونید قدم به قدم فرایند ساخت اونها و منابع آموزشی مربوطه رو مشاهده کنید. 🌐 Repository #tips @CodeModule

با فریمورک LoopBack.js آشنا بشید! 🦦 ‏LoopBack.js یک فریمورک بسیار قدرتمند Node.js هست، که برای ساخت API و اتصال اون ها به منابع داده بک اند طراحی شده. ‏LoopBack.js به دولوپر ها این امکان رو میده تا APIهای REST رو با حداقل کدنویسی، بسازن. ‏LoopBack.js در چه مواردی استفاده میشه؟ 🤔 1⃣تعریف مدل و دسترسی به داده: LoopBack به دولوپر ها اجازه میده تا مدل هایی رو بر اساس اسکیما ها تعریف کنن و به طور خودکار API های REST رو برای عملیات CRUD تولید کنن. از انواع منابع داده، از جمله دیتابیس ها مانند MySQL، PostgreSQL، MongoDB پشتیبانی میکنه. 2⃣ادغام با GraphQL: این مورد برای دولوپر هایی که به کوئری انعطاف پذیرتر و کارآمدتر نیاز دارن، کاربردیه. LoopBack از ادغام با GraphQL پشتیبانی میکنه و جایگزین قدرتمندی برای REST هست. 3⃣احراز هویت و مجوز: پشتیبانی داخلی برای احراز هویت کاربر و کنترل دسترسی مبتنی بر نقش (RBAC)، تضمین میکنه که API های شما ایمن هستن و از داده های کاربر محافظت میشه. ‏LoopBack.js یک انتخاب قانع کننده برای دولوپر هایی هست که به دنبال ساخت API های قدرتمند، مقیاس پذیر و انعطاف پذیر هستن. مجموعه جامع ویژگی های اون، همراه با یک کامیونیتی فعال و داکیومنت گسترده، اون رو به ابزاری عالی برای توسعه برنامه های کاربردی وب تبدیل میکنه. برای کسب اطلاعات بیشتر به دایکومنت LoopBack مراجعه کنید. #nodejs #loopback @CodeModule

این عالی بوددد 😂😂 #fun @CodeModule

با قانون dry بیشتر آشنا بشید 🙃 🔵قانون DRY (Don't Repeat Yourself) یکی از اصول مهم در برنامه‌نویسی و توسعه نرم‌افزاره که به معنای "تکرارش نکن" هست. این اصل بر این باور استواره که هر قطعه اطلاعات یا منطق باید تنها یک بار در کد وجود داشته باشه و در صورت نیاز به استفاده مجدد، باید به اون ارجاع داده بشه. در ادامه به توضیح بیشتر این قانون و مزایاش می‌پردازیم: ✅مزایای رعایت کردن قانون DRY: 1️⃣کاهش خطا: با کاهش روند تکرار کد، احتمال بروز خطا کمتر میشه. اگر یک منطق یا تابع در چندین جا تکرار بشه و نیاز به تغییر داشته باشه، ممکنه بر اثر فراموشی تغییرات در همه قسمت‌ها اعمال نشه و این باعث بروز باگ‌هایی در پروژه بشه. 2️⃣کد هایی با قابلیت نگهداری بیشتر: کدهای غیر تکراری، برای نگهداری و به‌روزرسانی مناسب تر هستن. اگر نیاز به تغییر یک بخش از کد باشه، تنها کافیه اون رو فقط در یک جا تغییر بدید. 3️⃣بهبود خوانایی: کدهای تمیز و غیر تکراری معمولاً خواناتر هستن و برای سایر دولوپرا یا حتی خود شما در آینده، فهمیدن و درکشون آسون تره. 4️⃣استفاده مجدد از کد: با پیروی از قانون DRY می‌تونید از توابع، کلاس‌ها یا ماژول‌های مشترک استفاده کنید که باعث صرفه‌جویی در زمان و تلاش میشه. ❓نحوه پیاده‌سازی و پیروی از قانون DRY : ◀️استفاده از توابع و متدها: منطق مشترک رو در توابع یا متدها قرار بدید و به جای تکرار آن در کد، از اونا استفاده کنید. ◀️استفاده از کلاس‌ها و ارث بری: در زبان‌های شیءگرا، می‌تونید از وراثت برای ایجاد کلاس‌های فرزند استفاده کنید تا کدهای تکراری رو کاهش بدید. ◀️ماژولار کردن کد: کد رو به ماژول‌ها یا بسته‌های کوچک تقسیم کنید که هر کدوم وظیفه خاصی رو انجام میدن. این کار باعث میشه که هر ماژول بتونه به‌طور مستقل مورد استفاده قرار بگیره. ◀️استفاده از دیزاین پترن ها: الگوهای طراحی یا Design Patterns می‌تونن به شما کمک کنن، تا بهترین شیوه‌ها رو در ساختاردهی کد خود پیاده‌سازی کنید و از تکرار جلوگیری کنید. قانون DRY یکی از اصول بنیادین برنامه‌نویسیه که به کاهش تکرار و افزایش کیفیت کد کمک میکنه. با پیروی از این اصل، می‌تونید نرم‌افزار و پروژه‌هایی با کیفیت بالاتر و قابلیت نگهداری بیشتر ایجاد کنید 🏖️ #programming #dry @CodeModule

‏Data Lakes چیه و چه کاربردی داره؟😄 دیتا لیک (دریاچه داده) یک مخزن متمرکز هست برای ذخیره انواع داده ها به شکل خام و پردازش نشده. بر خلاف دیتابیس های سنتی، که نیاز به تمیز کردن و سازمان‌دهی داده‌ها قبل از ذخیره‌سازی دارن، دیتا لیک ها میتونن داده‌ها رو همونطور که هستن ذخیره کنن و به انعطاف‌پذیری و مقیاس‌پذیری بیشتری اجازه بدن. این باعث میشه که دیتا لیک برای ذخیره حجم زیادی از داده های متنوع از چندین منبع ایده آل باشن. انواع داده های ذخیره شده در دیتا لیک ها🦦 - داده های ساختاریافته: داده هایی که در ردیف ها و ستون ها سازماندهی میشن، معمولاً در دیتابیس های رابطه ای (مثل دیتابیس های SQL) یافت میشن. به عنوان مثال میشه به سوابق مشتری، گزارش تراکنش ها و... اشاره کرد. - داده های نیمه ساختاریافته: داده هایی که با یک طرح دقیق مطابقت ندارن اما دارای برخی ویژگی های سازمانی هستند. به عنوان مثال میشه به فایل های CSV، لاگ فایل ها، XML و JSON اشاره کرد. - داده های بدون ساختار: داده هایی که فاقد قالب یا ساختار از پیش تعریف شده هستند. به عنوان مثال میشه به ایمیل ها، دایکومنت های Word، فایل های PDF اشاره کرد. - داده های باینری: داده هایی که در فرمت باینری ذخیره میشن مانند تصاویر، فایل های صوتی و ویدئو. برای درک بهترش به مثال زیر توجه کنید: یک شرکت بزرگ مثل آمازون رو تصور کنید. آمازون هر روز حجم عظیمی از داده ها رو از منابع مختلف جمع آوری و تولید میکنه، از جمله: 1⃣داده های مشتری: داده های ساختاریافته از پروفایل های مشتری، تاریخچه خرید و اطلاعات پرداخت ذخیره شده در دیتابیس (فرض بر اینکه از دیتابیس های SQL استفاده میکنه) 2⃣گزارش های وب: داده های نیمه ساختار یافته از گزارش های سرور که رفتار کاربر در وب سایت رو ردیابی میکنه، مانند صفحات بازدید شده، زمان صرف شده در هر صفحه، و عبارت های جستجو. 3⃣کامنت در مورد محصول: داده های بدون ساختار از نظرات مشتریان و بازخورد ارسال شده در صفحات محصول، که ممکنه شامل متن، تصاویر و ویدئو باشه. 4⃣داده های حسگر: داده های دستگاه های IoT(اینترنت اشیا) که در انبارها برای ردیابی سطوح موجودی و حرکت استفاده میشه، و ممکنه در قالب JSON باشن. 5⃣فایل های چند رسانه ای: داده های باینری از جمله تصاویر محصول، فیلم های تبلیغاتی، و ضبط های صوتی برای تماس های خدمات مشتری. به طور خلاصه دیتالیک راه‌حلی انعطاف‌پذیر و مقیاس‌پذیر برای ذخیره‌سازی و تجزیه و تحلیل حجم زیادی از داده‌های متنوع ارائه میکنن، که اون ها رو به ابزاری ارزشمند برای سازمان‌های مبتنی بر داده‌های مدرن تبدیل میکنه. برای کسب اطلاعات بیشتر، پیشنهاد میکنم مطالب زیر رو بخونید: - Data Swamp - Data Lakehouse - Data warehouse #data_lake @CodeModule

این چرخه دائم ادامه داره 😔 #fun @CodeModule