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

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

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

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

امشب ساعت 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

ربات کدماژول منتشر شد!🤖

‏Cm Cop که ربات اختصاصی کامیونیتی کدماژول هست، چند روزی میشه که منتشر و ریلیز شده و با استفاده از این ربات میتونید گروهتون رو به صورت کامل مدیریت کنید. این ربات ویژگی های زیادی مثل warn ،ban ،mute، کاربر ویژه، سرگرمی های متفاوت و... داره که واقعا در قالب یه پست نمیشه تک تک فیچر هاش رو بررسی کنیم.

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

در گروه کدماژول هم این ربات فعاله.

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

🟠Repository (استار یادتون نره 🙂)

@CodeModule
@CodeModuleGap

مواردی در رابطه با ساختار آرایه ها که باید بدونید! 🦦

اول از همه باید بدونیم که دو نوع آرایه وجود داره، استاتیک و داینامیک.

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

2️⃣آرایه ها میتونن هر تعداد ابعاد (1 بعدی، 2 بعدی، سه بعدی و غیره) داشته باشن و هر بعد میتونه هر اندازه ای داشته باشه که توسط حافظه کامپیوتر محدود میشه.

3️⃣حلقه های For مناسب ترین ساختار برای تکرار روی یک آرایه هستن. همچنین همونطور که میدونید ایندکس های آرایه از 0 شروع میشن نه 1.

4️⃣آرایه ها راهی برای ذخیره لیستی از آیتم ها در یک متغیر فراهم می کنن. قبلاً اگه نیاز به ذخیره چندین مقدار داشتید، برای هر کدوم متغیرهای جداگانه ای تنظیم کردید. با این حال، آرایه ها این کار رو با اجازه دادن به مقادیر متعدد برای ذخیره تحت یک نام متغیر ساده میکنن. به عنوان مثال، میتونیم یک آرایه برای ذخیره فهرستی از نام‌ها (رشته‌ها)، سن‌ها (اعداد صحیح)، اعداد اعشاری (floats)، یا حتی تایپ سفارشی ایجاد کنید. هر مقدار در یک آرایه در یک bucket جداگانه ذخیره میشن و میتونید بر اساس ایندکس اون در لیست به یک باکت خاص مراجعه کنین.

هر باکت با یک ایندکس عددی همراه هست که از 0 شروع میشه و برای هر باکت بعدی 1 افزایش پیدا میکنه. این شاخص برای اشاره به یک ایندکس خاص در آرایه استفاده میشه. برای مثال، در یک آرایه «ages» با عناصر «[66، 53، 39، 24]»، باکت اول (ایندکس 0) مقدار «66» رو نگه میداره، باکت دوم (ایندکس 1) دارای «53» هست، و به همین ترتیب تا انتها.

6️⃣حافظه مصرف شده توسط یک آرایه استاتیک به دو عامل بستگی داره:

🔵اندازه آرایه: این تعداد کل عناصر آرایه هست.

🔵اندازه هر عنصر: این به نوع داده آرایه بستگی داره. به عنوان مثال، یک «int» معمولاً 4 بایت، یک «char» یک بایت و یک «float» معمولا 4 بایت و یک ««double»» معمولا 8 بایت داره.

7️⃣کل حافظه مورد نیاز یک آرایه استاتیک رو میشه با استفاده از فرمول زیر محاسبه کرد:

‏- Memory Consumption (bytes) = Number of Elements * Size of Each Element (bytes)

به عنوان مثال:

int myArray[100];

در اینجا، «myArray» دارای 100 عنصر هست و هر «int» معمولاً 4 بایت هست که به صورت زیر محاسبه میشه:

- Memory Consumption (bytes)= 100 * 4 = 400(bytes)

این آرایه 400 بایت حافظه مصرف میکنه.

برای اطلاعات و مشاهده موارد بیشتر، پیشنهاد میکنم مقالات زیر رو بخونید.
- Article
- Article
- Article

#array
@CodeModule

زمان کارآموزی به چه نکاتی توجه کنیم؟ 🤔

🔵تا می‌تونید سوال بپرسید

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

🔵رفتار دوستانه و تعامل داشته باشید

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

🔵منظم و وقت شناس باشید

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

🔵مسئولیت بیشتری درخواست کنید

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

🔵از همون اول انتظار استخدام شدن نداشته باشید

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

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

#tips
@CodeModule

تو کامپیوترت YouTube downloader داشته باش 📹

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

پس خیلی خوبه که بتونیم یک YouTube downloader روی سیستم عامل خودمون داشته باشیم.

🪴برای نصب این نرم افزار در لینوکس کافیه کامند زیر رو وارد کنید:

sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl

sudo chmod a+rx /usr/local/bin/youtube-dl

‼️اگر هم curl ندارید یا ازش استفاده نمیکنید میتونید با wget نصب کنید:

sudo wget https://yt-dl.org/downloads/latest/youtube-dl -O /usr/local/bin/youtube-dl

sudo chmod a+rx /usr/local/bin/youtube-dl

🔥 همچنین کاربرای ویندوز و مک هم میتونن با دانلود فایل های این نرم افزار که داخل ریپازیتوری انتهای پست موجوده، از این نرم افزار کاربردی استفاده کنن.

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

🐱 Github

#tools #software
@CodeModule

خب پسرم این صفحه رو که میبینی فقط باید جیغ بزنی 😂😂

#fun
@CodeModule

ارتباط امن با ماژول TLS 🪼

‏Transport Layer Security (TLS) پروتکلی هست که حریم خصوصی و یکپارچگی داده ها رو بین دو برنامه در حال ارتباط فراهم میکنه. در Node.js، ماژول "tls" یک ماژول داخلی هست که به دولوپر ها اجازه میده تا ارتباطات شبکه ایمن رو از طریق TCP (Transmission Control Protocol) با استفاده از TLS و SSL پیاده سازی کنن.

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

ماژول "tls" در درجه اول برای ایجاد سرورها و کلاینت های ایمن استفاده میشه که از طریق کانال های رمزگذاری شده ارتباط برقرار میکنن. این تضمین میکنه که هرگونه داده رد و بدل شده در برابر دستکاری محافظت میشه.

1⃣ایجاد سرور TLS: متد «tls.createServer()» به شما امکان میده یک سرور امن ایجاد کنید که به اتصالات ورودی گوش میده. شما باید یک آبجکت حاوی certificates ها و کلیدهای مورد نیاز برای رمزگذاری ارائه کنید.

2⃣ایجاد یک کلاینت سرور: به طور مشابه، متد «tls.connect()» به شما امکان میده کلاینت ایجاد کنید که به طور ایمن به یک سرور TLS متصل بشه و میتونید، گزینه هایی مانند نام، هاست و پورت رو مشخص کنیم.

3⃣ویژگی های اضافی: ماژول tls همچنین از ویژگی های مختلفی مانند احراز هویت، و مدیریت چندین اتصال امن به طور همزمان پشتیبانی میکنه.

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

#nodejs #tls
@CodeModule

چند نمونه از خز ترین جملات دولوپرا 👍

🔵با html ناسا هک کن

🔵جاوااسکریپت منطق نداره

🔵فرانت‌اند برنامه نویسی حساب نمیشه

🔵با مدحج پولدار میشی

🔵دیگه php منسوخ شده

🔵وردپرس برنامه نویسی حساب نمیشه

🔵لینوکس پز دادن داره

مورد دیگه ای بود، تو کامنتا بگید😔

#fun
@CodeModule

نگاهی به سایت State of JS 👍

سایت State of JS یک نظرسنجی سالانه در مورد تکنولوژی‌های مربوط به جاوااسکریپت هست. این سایت اطلاعاتی درباره محبوبیت، ترندها، ابزارهای مختلف جاوااسکریپت مثل فریم‌ورک‌ها، کتابخانه‌ها، و ابزارهای دیگه فراهم می‌کنه. کاربران و توسعه‌دهندگان جاوااسکریپت از سراسر جهان در این نظرسنجی شرکت می‌کنن و نتایج اون به صورت گزارش‌های تحلیلی ارائه میشه.

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

Website 🌐

#javascript
@CodeModule