مدیریت کلاس ها با پکیج classnames 😎

در این پست بهتون یه پکیج به نام classnames معرفی میکنم، که به شما اجازه میده تا به راحتی کلاس‌های CSS رو به صورت داینامیک مدیریت کنید. این ابزار به خصوص در توسعه با React 🔵 بسیار مفید هست. به جای ترکیب دستی کلاس‌ها، می‌تونید با استفاده از این کتابخانه کلاس‌ها رو بر اساس شرایط مختلف اضافه یا حذف کنید.

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

برای کسب اطلاعات بیشتر به داکیومنت این کتابخانه مراجعه کنید ⬇️

🌐Document

#classnames #css
@CodeModule

با هونو بیشتر آشنا بشید! 🦦

‏Hono یک فریمورک مینیمالیست برای Node.js هست که بر عملکرد و سادگی تأکید داره. از فریمورک هایی مانند Express و Koa الهام گرفته شده اما به گونه ای طراحی شده که حتی سبک تر و سریع تر باشه. هدف Hono ارائه یک روش کارآمد برای ایجاد برنامه های کاربردی وب و API، بدون هزینه اضافی و غیر ضروری هست.

هونو چه کاربردی داره؟

‏Hono برای دولوپر هایی ایده آل هست که به دنبال یک فریمورک ساده و با کارایی بالا، برای ساخت برنامه های سمت سرور هستن. این یک API مختصر ارائه میده که شروع رو آسون میکنه و در عین حال انعطاف پذیری مورد نیاز برای برنامه های پیچیده تر رو فراهم میکنه. Hono در سناریوهایی که سرعت و مینیمالیسم بسیار مهم هستن، مثل میکروسرویس ها و API gateways میدرخشه.

اما Hono چه ویژگی هایی داره؟

‏- API مینیمالیست : Hono یک API مینیمالیست ارائه میده که دولوپر رو قادر میسازه، تا به سرعت route ها رو ایجاد و ریکویست/ریسپانس ها رو رسیدگی و ارسال کنه.
- پشتیبانی از میدلور ها: Hono از میدلور ها پشتیبانی میکنه و به دولوپر ها این امکان رو میده تا عملکرد فریمورک رو به راحتی گسترش بدن.

- پشتیبانی از تایپ اسکریپت: Hono پشتیبانی کامل از تایپ اسکریپت رو ارائه میده که type safety و تجربه بهتر توسعه دهنده رو ممکن میسازه.

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

#nodejs #hono
@CodeModule

منبعی پر از سوالات تخصصی لینوکسی 🪴

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

🔗 CheatSheet

#linux #interview
@CodeModule

خاطراتتون زنده شد؟ 😞

#fun
@CodeModule

اسکرول بارهای حرفه ای بساز‌ 🦦

‏OverlayScrollbars یک کتابخانه جاوااسکریپتیه که بهتون اجازه میده تا اسکرول‌بارهای سفارشی و زیبا به پروژه هاتون اضافه کنید. این کتابخانه بسیار انعطاف پذیره و قابلیت‌های متنوعی مثل:

🔵اسکرول‌بارهای سفارشی با طراحی مدرن

🔵پشتیبانی از دستگاه‌های لمسی

🔵پشتیبانی از مرورگرهای مختلف

🔵امکانات پیشرفته برای تنظیم و شخصی‌سازی

🔵ادغام راحت با فریم‌ورک‌ها و کتابخانه‌های مختلف مثل React, Angular, Vue و ...

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

برای کسب اطلاعات بیشتر به داکیومنت این کتابخانه مراجعه کنید.

#overlayScrollbars
@CodeModule

با ماژول crypto بیشتر آشنا بشید! 💀

ماژول crypto یک فریمورک داخلیه که انواع عملکردهای رمزنگاری ضروری رو برای ایمن سازی داده ها، از جمله هش، رمزگذاری، و رمزگشایی، و همچنین مدیریت signatures و certificates ارائه میده.

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

ماژول «کریپتو» عمدتاً برای پیاده‌سازی ویژگی‌های امنیتی در برنامه‌های Node.js استفاده میشه. برای مثال:

‏1⃣Hashing: هش کردن فانکشن، یک طرفه هست و داده ها رو به رشته ای با اندازه ثابت از کاراکترها تبدیل میکنه که معمولاً برای ذخیره رمزهای عبور ایمن استفاده میشه. ماژول «crypto» متد هایی مثل «createHash» برای تولید هش با استفاده از الگوریتم‌های مختلف ارائه میکنه.

2⃣رمزگذاری و رمزگشایی: برای ایمن نگه داشتن داده های حساس، ماژول crypto به شما امکان میده داده ها رو رمزگذاری کنید و بعداً با استفاده از همان کلید یا کلید دیگری رمزگشایی کنید. این برای انتقال ایمن داده ها در سراسر شبکه مفیده.

3⃣امضای دیجیتال: این ماژول همچنین از ایجاد و تأیید signatures پشتیبانی میکنه و از صحت داده ها، اطمینان میده. این به ویژه در سناریوهایی که نیاز به ارتباط امن یا توزیع نرم افزار دارن مفیده.

4⃣تولید کلید: تولید ایمن کلیدهای رمزنگاری یک جنبه حیاتی رمزنگاری هست و ماژول crypto، عملکردهایی رو برای ایجاد کلیدهای تصادفی برای رمزگذاری، و سایر فرآیندهای رمزنگاری ارائه میده.

به صورت کلی ماژول «crypto» در Node.js یک ابزار قدرتمند برای دولوپرا هست، تا بتونن ویژگی های امنیتی رو در برنامه های خودشون پیاده سازی کنن. برای کسب اطلاعات بیشتر به داکیومنت ماژول مراجعه کنید.

#nodejs #crypto
@CodeModule

با ‏پکیج Chalk، دیباگ رو راحت تر کن! 🦦

‏Chalk یک پکیج Node.js هست که به دولوپر ها اجازه میده، خروجی ترمینال رو با رنگ های بصری استایل و قالب بندی کنن. این پکیج یک راه آسون برای افزودن رنگ به برنامه‌های کامند لاین ارائه میکنه، که گزارش‌ها، هشدارها و پیام‌های خطا رو خواناتر و از نظر بصری، جذاب‌تر میکنه.

از این پکیج چه استفاده ای میشه؟

پس از نصب این پکیج، میتونید شروع به اعمال رنگ ها و استایل ها در خروجی های کنسول خود کنید. به عنوان مثال، می تونید متن رو پررنگ کنید، زیر اون خط بکشید یا رنگ اون رو به قرمز، سبز، آبی و موارد دیگه تغییر بدید:

const chalk = require('chalk');

console.log(chalk.green('CodeModule Success!'));
console.log(chalk.red.bold('CodeModule Error!'));
console.log(chalk.blue.underline('CodeModule Info!'));

به صورت کلی ‏Chalk یک پکیج همه کاره و سبک وزنه، که با اضافه کردن رنگ و سبک به خروجی ترمینال در برنامه های Node.js، دیباگ کردن رو آسون تر میکنه.

برای کسب اطلاعات بیشتر به گیتهابش مراجعه کنید.

#chalk
@CodeModule

دورهمی های کدماژول، قسمت پنجم

موضوع: مهاجرت کاری به عنوان دولوپر 🪐

مهمان گفتگو: جناب آقای مهدی شریفی

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

امشب ساعت 10 این گفتگو و دورهمی رو از دست ندید‌(لینک میت رأس ساعت قرار میگیره)

@CodeModule

الگوی Event Delegation چیه؟ ✌️

در این پست می‌خوایم با الگویی به نام Event Delegation آشنا بشیم که بهمون اجازه میده پروژه هایی سریع‌تر، خواناتر و با عملکرد بالاتری داشته باشیم.

اگه چندین المنت مشابه داشتیم و نیاز بود با یک رویداد خاص (مثلاً keyup) همهٔ این المنت‌ها رو مدیریت کنیم، این الگو با استفاده از قابلیت Event Propagation، بهمون اجازه میده تا با اضافه کردن هندلر (یا Listener) به المنت والد، بتونیم رویدادهای المنت‌های داخلی رو مدیریت کنیم. یعنی ما به جای اینکه برای تک تک این المنت‌ها هندلر بنویسیم، هندلر رو به المنت والد اضافه می‌کنیم.

بریم که این الگو رو پیاده‌سازی کنیم. المنت‌های زیر رو در نظر بگیرید ⬇️

<form> 
  <input id="num-1" name="num-1"> 
  <input id="num-2" name="num-2"> 
  <input id="num-3" name="num-3"> 
  <input id="num-4" name="num-4"> 
  <input id="num-5" name="num-5"> 
  <input id="num-6" name="num-6"> 
</form> 

ما ابتدا برای المنت والد یعنی <form> یک ایونت keyUp تنظیم میکنیم:

document.querySelector('form').addEventListener('keyup', (event) => { 
  console.log(event.target.value); 
}); 

باید بدونیم که با این کد، رویداد keyup همهٔ المنت‌های داخلی فرم قابل مدیریت هست و با رخ دادن این رویداد، کدی که توی هندلر نوشتیم برای همهٔ المنت‌ها اجرا میشه، حتی برای ورودی‌های دیگه‌ای مثل textarea و checkbox. حالا اگه ما بخوایم فقط برای input های نوع text این رویداد رو مدیریت کنیم، باید توی هندلر این قضیه رو مدیریت و محدود کنیم و مشخص کنیم که دقیقاً با کدوم ورودی‌ها سر و کار داریم:

document.querySelector('form').addEventListener('keyup', (event) => { 
  if (event.target.tagName === 'INPUT' && event.target.type === 'text') { 
    console.log(event.target); 
  } 
}); 

حالا به راحتی می‌تونیم رویداد keyup همهٔ <input> ها رو مدیریت کنیم و حتی اگه ورودی‌هایی اضافه یا کم بشه، کدی که نوشتیم دیگه تغییری نمی‌کنه. برای کسب اطلاعات بیشتر این مقاله رو مطالعه کنید.

#javascript #eventDelegation
@CodeModule

۵ پستی که پیشنهاد میکنم از دست ندید (مربوط به گیتهاب) 🌐

🔵ساخت پروفایل حرفه ای در گیتهاب

🔵سطح گیتهابت رو بسنج!

🔵اصول نوشتن کامیت حرفه‌ای در گیتهاب

🔵دسترسی به تاریخچه Git با Git History

🔵‏کی منو آنفالو کرده؟ 😞

#top
@CodeModule

زندگی لاکچری ایز کامینگ... 😂

#fun
@CodeModule

با Pixi.js بیشتر آشنا بشید 😎

‏pixi.js یک کتابخانه‌ی جاوااسکریپت متن باز (open source) برای ایجاد گرافیک‌های دو بعدی با کارایی بالا در مرورگرهاست. این کتابخانه به دولوپرا این امکان رو میده که بازی‌ها، انیمیشن‌ها و اپلیکیشن‌های تعاملی رو به راحتی و با سرعت بالا توسعه بدن. pixi.js به دلیل استفاده از WebGL و Canvas، پرفورمنس فوق‌العاده‌ای تو ارائه گرافیک‌های پیچیده و جذاب داره.

❓چرا از pixi.js استفاده کنیم؟

1⃣ پرفورمنس بالا: pixi.js به طور خاص برای استفاده از WebGL طراحی شده که به دولوپرا اجازه میده تا گرافیک‌های پیچیده و با کیفیت بالا رو بدون کاهش سرعت اجرا کنن.

🔢 سازگاری با مرورگرها: این کتابخانه با اکثر مرورگرهای مدرن سازگاره و به راحتی میشه اونو در پروژه‌های وب استفاده کرد.

🔢 سادگی و راحتی: API ساده و مستندات جامع pixi.js به دولوپرا این امکان رو میده که به سرعت شروع به کار کنن و پروژه‌هاشونو پیاده‌سازی کنن.

🔢 پشتیبانی از انیمیشن: pixi.js امکانات پیشرفته‌ای برای ایجاد انیمیشن‌های نرم و روان فراهم می‌کنه، که برای بازی‌ها و اپلیکیشن‌های تعاملی خیلی مهمه.

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

#pixijs #webgl
@CodeModule

با ماژول DNS آشنا بشید!🦫

در حوزه برنامه نویسی شبکه، domain name resolution یک وظیفه اساسی هست. ماژول DNS (سیستم نام دامنه) در Node.js یک راه قوی و ساده برای تعامل با DNS ارائه میده و به دولوپر ها این امکان رو میده، تا عملیات مختلف مربوط به نام دامنه و آدرس های IP رو انجام بدن.

از این ماژول چه استفاده ای میشه؟

1️⃣حل نام دامنه: میتونید از متد هایی مثل «dns.lookup()» و «dns.resolve()» برای تبدیل نام دامنه به آدرس IP و بالعکس استفاده کنین. این به ویژه برای برنامه‌هایی که نیاز به اتصال به سرورها یا سرویس‌های شناسایی شده با نام دامنه دارن، مفیده.

2️⃣پرسش سوابق DNS: این ماژول به شما امکان میده انواع مختلف رکوردهای DNS مثل رکوردهای A، رکوردهای AAAA، رکوردهای MX و غیره رو بازیابی کنید. به عنوان مثال، dns.resolveMx() سرورهای تبادل رو برای یک دامنه بازیابی میکنن، در حالی که dns.resolveSrv() اطلاعاتی در مورد سوابق سرویس ارائه میده.

3️⃣معکوس جستجوهای DNS: با dns.reverse()، میتونید جستجوهای معکوس DNS رو برای یافتن نام دامنه مرتبط با یک آدرس IP معین انجام بدید. این برای برنامه هایی که نیاز به تأیید یا ثبت منبع درخواست های دریافتی دارن، مفیده.

4️⃣رسیدگی به خطاهای DNS : این ماژول دارای مکانیزم هایی برای رسیدگی به خطاهای DNS نیز هست. به عنوان مثال، هنگامی که یک query DNS با شکست مواجه میشه، ماژول اطلاعات خطای مفصلی رو ارائه میده که میتونه برای تشخیص و رسیدگی موثر به مسائل استفاده بشه.

به صورت کلی ماژول DNS در Node.js، یک ابزار ضروری برای دولوپر هایی هست که با برنامه های شبکه ای کار میکنن و به وضوح به نام دامنه و قابلیت های جستجوی DNS نیاز دارن. برای کسب اطلاعات بیشتر به داکیومنت ماژول مراجعه کنید.

#nodejs
@CodeModule

مگه موزیسین ها دل ندارن ؟ 😂🗿

#fun
@CodeModule

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

🔵 Link

#figma
@CodeModule

امنیت برنامه‌های فرانت‌اند با Content Security Policy (CSP) 🙂

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

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

<!DOCTYPE html> 
<html> 
  <head>...</head> 
  <body> 
 
    <img src="https://an-external-website.i‌o/" /> 
 
  </body> 
</html> 

به فرض اینکه مشکلی از بابت CORS نباشه، این عکس که از یک منبع خارجی به صفحه اضافه شده، بدون مشکل دانلود و اجرا میشه. اما توی بعضی از شرایط اگه به همین شکل به مرورگر اجازهٔ دانلود از هر منبعی رو بدیم، ریسک‌های امنیتی بزرگی رو به برنامه اضافه کردیم.

ما با استفاده از CSP که یکی از مکانیزم های امنیتی پیاده سازی شده در مرورگر های مدرن هست، از حملاتی مانند XSS یا Cross-Site Scripting و data injection میتونیم جلوگیری کنیم و تا حد زیادی می‌تونیم امنیت رو به برنامه‌های فرانت‌اند بیاریم. دو تا مقاله زیر به طور کامل و جامع راجب CSP صحبت کردند و بهتون پیشنهاد میکنم، حتما اونها رو بخونید.

- Article
- Article

#csp
@CodeModule

کد ادیتور حرفه ای در پروژه های ریکتی 🔵

اگه میخواید داخل پروژه هاتون یک کد ادیتور حرفه ای داشته باشید و به کاربر قابلیت کد زدن در سایتتون رو ارائه بدید، کتابخانه React-Monaco-Editor رو از دست ندید.

‼️کتابخانه React-Monaco-Editor چیه ؟

این کتابخانه یک تکست ادیتور در قالب کامپوننت به شما ارائه ارائه میده که در برنامه های ریکتی قابل استفاده هست و همچنین، قابلیت های زیادی مثل دسترسی به کد ها به صورت text، ساپورت همه‌ی زبان های برنامه نویسی، code highlighting و همچنین پیاده سازی تم های مختلف رو به شما میده. این کتابخانه به شما این امکان رو میده، تا تجربه استفاده از یک کد ادیتور حرفه ای و قابل شخصی سازی رو داشته باشید.

ویژگی های React-Monaco-Editor ⬇️

🔵قابلیت شخصی سازی

🔵ساپورت انواع زبان برنامه نویسی

🔵قابلیت eventHandling روی ادیتور

🔵قابلیت دسترسی به کد های نوشته شده

با این کتابخانه میتونید یک تکست/کد ادیتور حرفه ای و همه کاره رو داخل پروژه هاتون داشته باشید و به راحتی اون رو در اختیار کاربراتون قرار بدید.

برای اطلاعات بیشتر و نحوه کار با این کتابخانه میتونید به داکیومنتش مراجعه کنید‌ 🏖️

🔗 Document

#react #reactMonacoEditor
@CodeModule