چرا باید از Vite.js استفاده کنیم؟ 💌

(ویت) Vite.js ابزاریه که بر اساس زبان برنامه نویسی جاوا اسکریپت ساخته شده و قصد داره تو توسعه سریع تر پروژه به توسعه دهندگان کمک کنه. 

در واقع Vite.js یک Build Tool و Local Development Server هست.

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

🗝ویژگی‌های کلیدی ViteJS

ابزارهایی مانند Webpack و Rollup کمک زیادی به جریان توسعه وب اپلیکیشن‌ها کردن. اما این موارد نسبتا قدیمین و با پیچیده تر شدن کدبیس اپلیکیشن‌ها، تو بعضی از سناریوها نمی‌تونن پاسخگوی نیازای ما باشن. برای مثال Rollup دیگه جوابگوی وب اپلیکیشن‌های پیچیده نیست و به همین دلیل ViteJS ایجاد شد تا این مشکلاتو حل کنه.

💙دلیل محبوبیت Vite.js چیه؟

یکی از اصلی‌ترین ويژگی‌هایی که باعث می‌شه ViteJS محبوب باشه سرعت بالای اون تو Reloading هست. Dev Server هایی که از Bundler استفاده می‌کنن معمولا برای اجرا کردن کد به زمان زیادی نیاز داشتن، اما حالا Vite.JS با داشتن پشتیبانی محلی از اکمااسکریپت یا ESM مستقیما اونارو تو مرورگر اجرا میکنه و زمان اجرا کدارو بالاتر برده.
در واقع ViteJS این میزان از سرعتو مدیون مدل HMR یا Hot Module Replacement هست.

‼️به این هم اشاره کنم که HMR به این معنیه که ماژول‌ها می‌تونن به صورت مستقل از المان‌های دیگه خودشانو جایگزین یا بروزرسانی کنن. البته ابزارهای دیگه ای هم هستن که از این مدل پشتیبانی میکنن اما Vite.JS با استفاده کردن از ESM به صورت محلی یا لوکال، سرعت این حالت رو بیش از پیش سرعت داده.

❓به صورت پیشفرض از چه قالب های جاوا اسکریپتی پشتیبانی می‌کنه؟

🔵 قالب Vanilla
🔵 قالب Vue.js
🔵 قالب React.js
🔵 قالب Preact.js
🔵 قالب Svelte.js
🔵 قالب Solid.js
🔵 قالب Qwik.js

در کل Vite.js یک ابزار باورنکردنیه که نسبتاً جدیده و ویژگی‌های منحصربه‌فرد خودشو داره. تجربه توسعه‌ سریع‌تر و پشتیبانی از قالب های مختلف دلیل محبوبیت و دوست داشتنی بودن این ابزاره.


Document 🌕

#js #web
@CodeModule

Good Night 🌚✨

"روزای بد رو همه دارن، کسی موفق میشه که جا نزنه و برای هدفش تلاش کنه"

@CodeModule

چگونه یک commit با معنا در git بنویسیم؟ 💀

نوشتن کامیت خوب یک هنره و این زمانی بیشتر خودشو نشون میده که در یک تیم مشغول به کار باشید.

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


هدف از نوشتن commit با معنا چیه؟ 🤔

🔵 تولید خودکار فایل CHANGELOG.md توسط اسکریپت

🔵 در نظر نگرفتن بعضی از کامیت های بی اهمیت با git bisect (مثل فورمت کردن کدها)

🔵 داشتن اطلاعات بهتر و کاراتر هنگام بازببینی تاریخچه کامیت ها


هر خط از پیغام کامیت نباید بیشتر از 100 کاراکتر باشه. همین باعث میشه که خوندن متن کامیت هم در گیتهاب و هم در سایر ابزار های گیت آسون تر باشه. هر متن کامیت دارای سرآمد (header)، بدنه (body) و بخش زیرین (footer) هست که توسط خط خالی (Blank line) از هم جدا میشن.


متن سرآمد

متن قسمت سرآمد یک خطه که به صورت خلاصه وار توضیحاتی در مورد تغییرات ارائه میده و شامل نوع (type)، محدوده [تغییرات] (scope) و موضوع (subject) هست.

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


🔵 feat
🔵 fix
🔵 docs
🔵 refactor
🔵 test
🔵 chore


متن بدنه

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

متن بخش زیرین

در این بخش برخی اطلاعات خاص در مورد commit ارائه میشه مثل BREAKING CHANGE.
این مورد در فوتر به عنوان یک توضیحات آورده میشه. همونطور که از اسمش هم مشخصه اگه یک تغییر اساسی در پروژه و فایلی داشتیم این مورد باید حتما اضافه بشه.



اطلاعات بیشتر و میتونید تو این مقاله مطالعه، و یک پله خودتون و نسبت به سایر دولوپر ها حرفه ای تر کنید⚡️

#commit #git
@CodeModule

اگر توسعه دهنده فرانت باشید، حتما توی پروژه هاتون به کتابخانه هایی برای نمایش دادن نمودار ها (chart) نیاز پیدا میکنید.

تو این پست ۶ تا از بهترین کتابخانه ها در این زمینه رو معرفی میکنم تا بتونید توی پروژه هاتون، چارت هارو مثل آب خوردن هندل کنید😎


◀️کتابخانه Chart.js

◀️کتابخانه HighCharts

◀️کتابخانه C3.js

◀️کتابخانه Chartist

◀️کتابخانه Plotly

◀️کتابخانه Apexcharts.js


#library #js #chart
@CodeModule

با استفاده از این سایت، میتونید مقالات پرمیوم سایت مدیوم رو به صورت رایگان بخونید 😎

فقط کافیه لینک مقاله رو بنویسید و سپس روی دکمه Go کلیک کنید.

➡️Website◀️

#tool
@CodeModule

کابوس بک اند دولوپرا 😂😂


#fun
@CodeModule

Good Night🌚✨

"شکست خوردن و موفق شدن، هر دوی این
تجربه ها به یه اندازه اهمیت دارن"



@CodeModule

محبوب ترین theme های برنامه VsCode
در سال 2023 👨‍💻


1⃣ Github theme

🔢 Winter is coming

🔢 Monkai pro

🔢 Dracula

🔢 Tokyo night

🔢 Ayu

🔢 One dark pro

🔢 noctis



#vscode #theme
@CodeModule

تا حالا اسم Electron.js به گوشتون خورده؟ 🤔

در واقع Electron یک فریمورک متن بازه که توسط GitHub توسعه داده شده. این فریمورک برای ساخت برنامه های دسکتاپ به صورت پلتفرم با جاوا اسکریپت، HTML و CSS مورد استفاده قرار می گیره. Electron اجازه میده تا توسعه برنامه های کاربردی GUI دسکتاپ با استفاده از اجزای برنامه نویسی جلو و عقب در ابتدا برای برنامه های کاربردی وب توسعه پیدا کنه.

ویژگی کلیدی Electron اینه که کراس پلتفرم هست و اپلیکیشن هایی که از این فریمورک استفاده می کنن قابلیت ساخت و اجرا در سه سیستم عامل Mac، ویندوز و لینوکس و خواهند داشت💀


نمونه برنامه های ساخته شده با Electron⬇️

🔵Vscode
🔵GitHub Desktop
🔵Atom
🔵Skype
🔵Discord


نگاهی به ساختار درونی Electron⬇️

این Electron ترکیبی از Nodejs و Chromium هست. Nodejs رو که دیگه همه شما میشناسید و Chromium هم یک پروژه متن‌باز یا Open source هست که توسط Google توسعه داده شده و شباهتهای زیادی به Google chrome داره و در تعدادی از ویژگی‌ها و لوگو با هم تفاوت دارن.

شما میتونین به همه امکانات Chromium دسترسی داشته باشید و همچنین از موتور V8 مربوط به Javascript و همچنین از بسته و ماژولهای مختلف Nodejs استفاده کنید. شما میتونین هر کدی که در Nodejs مورد نظرتون هست رو در الکترون مورد استفاده قرار بدین.


در نهایت Electron.js یکی از بهترین فریمورک‌های جاوا اسکریپت برای برنامه نویسی سمت سرور هست که به شما اجازه میده برنامه‌های تحت دسکتاپ و توسعه بدید 😎


Document 🌐

#electron
@CodeModule

زبان شما چند سالشه؟ 🤔


#language #programming
@CodeModule

Good Night 🌚✨

"‏هرچی افراد کمتری از زندگیت خبر داشته باشن به همون اندازه همه چی بهتر پیش میره…"


@CodeModule

با انواع حملات سایبری و امنیتی در کامپیوتر آشنا بشید ⚡️

1️⃣حمله DDOS

2️⃣حمله بد افزار

3️⃣حمله مرد میانی

4️⃣تزریق SQL

5️⃣ویروس ها

6️⃣حمله بروت فورس

7️⃣حمله فیشینگ

8️⃣حمله کیلاگر

9️⃣حمله XSS


#cyberattack #hack
@CodeModule

فکت😂😂:

#fun
@CodeModule

🛜اینترنت اشیا (iot) چیه؟

اصطلاح اینترنت اشیا (IOT:Internet of things) به میلیاردها دستگاه فیزیکی در سراسر جهان اشاره داره که مجهز به حسگرها، گوشی های هوشمند و سایر دستگاه های الکتریکی هستن و با همدیگه ارتباط دارن.
وقتی که درباره معنای گسترده Internet of things صحبت می شه، همه دستگاه های متصل به اینترنت رو شامل میشه اما این اصطلاح به مرور زمان بیشتر برای دستگاه هایی استفاده شد که متصل به همدیگه بودن. درواقع اصطلاح IOT معمولاً به اون دسته از دستگاه هایی گفته میشه که انتظار نمیره به اینترنت وصل شن

💙کاربرد اینترنت اشیا

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

◀️کشاورزی
◀️ساخت و ساز
◀️منازل
◀️خودرو
◀️مراقبت های بهداشتی
◀️امنیت عمومی

⬇️مزایای اینترنت اشیا

✅جمع آوری داده ها

یکی از مهم ترین بخش ها در هر صنعت و سازمان، داده های اونه. سازمان ها با استفاده از IOT در کسب و کار خود میتونن حجم عظیمی از داده هارو درباره مشتریان و محصولاتشون جمع آوری کنن

✅خودکارکردن کارها

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

✅نظارت بر داده ها

نظارت بر داده ها یکی از اصلی ترین مزیت های اینترنت اشیا هست و به کاربر کمک می کنه اطلاع کافی از مقدار دقیق منابع و کیفیت اون ها داشته باشه

⬇️معایب اینترنت اشیا

❌نداشتن حریم خصوصی

امنیت و حفاظت از حریم خصوصی یکی از بزرگ ترین مسائلیه که اینترنت اشیا با اون مواجه هست

❌تغییر ماهیت انسان

استفاده و برخورداری بیش ازحد از این فناوری ممکنه در درازمدت به ایجاد تغییرات اساسی در طبیعت انسان از نظر رفتاری و جنبه های روانی منجر بشه

❌هک کردن

اینترنت اشیا در حال پرکردن شکافت میان دنیای دیجیتال و فیزیکیه به این معنا که هک کردن دستگاه ها میتونه عواقب جدی در دنیای واقعی ایجاد کنه

❌ویروس های رایانه ای

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

در حال حاضر این فناوری در مراحل اولیه هست؛ چون که فناوری های زیرساختی اون مثل حسگر، شبکه 5G و تجزیه و تحلیل با استفاده از ماشین تا حدودی تو مراحل اولیه توسعه خود هستن.

#iot #internet
@CodeModule

تو این پست قراره با ۶ کتابخانه پر کاربرد جاوا اسکریپتی، برای توسعه اسلایدر آشنا بشیم 😎⬇️


1⃣ کتابخانه Swiper.js

🔢 کتابخانه Flickity.js

🔢 کتابخانه Splide.js

🔢 کتابخانه Glide.js

🔢 کتابخانه Tiny slider.js

🔢 کتابخانه Owl carousel


#js #library
@CodeModule

معرفی چند عملگر جاوا اسکریپتی که احتمالا از کاربرد اون بی خبری! ✌️


🔵عملگر in

اولین عملگری که قراره بررسی کنیم عملگر in هست که با استفاده از این عملگر میتونیم بررسی کنیم که آیا یک key (همان نام خاصیت ها در آبجکت های ما) در شی ما وجود داره یا نه:

const obj = {
    name: ″shahin″
    id: 1
}

if (″name″ in obj) {
   console.log(″name is exist″)
}

🔵عملگر void

عملگر void کلیدواژه‌ای هست که یک گزاره رو ارزیابی می‌کنه و در نهایت مقدار undefined و برگشت میده. به مثال زیر توجه کنید:

   logger() { 
        return 89 
    } 
} 
 
const d = new D 
 
log(void d.logger()) // unde

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


🔵عملگر delete

ساده‌ترین روش برای حذف مقداری از آرایه، استفاده از کلیدواژه Delete هست. برای این کار فقط به نام متغیر و ایندکسی که می‌خواید پاک کنید، نیاز دارید:

let numbers = [1,2,3,4]; 
delete numbers[1]; 
console.log(numbers); // [1, undefined, 3, 4]

البته در زمان استفاده از این روش باید مراقب باشید، زیرا گرچه این متد ساده به نظر میاد، اما در اغلب موارد موجب بروز سردرگمی میشه.


#operators #javascript
@CodeModule

یادگیری زبان های خارجی با کمک هوش مصنوعی ! 🤖

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


➡️Website◀️

#ai #tools
@CodeModule

پکیج Turbopack چیه و چیکار میکنه؟ 😎

پکیج Turbopack برای بهینه سازی کدهای جاوااسکریپت، تایپ اسکریپت و فایل های وابسته به پروژه ست و جایگزین بسیار خوبی برای پکیج webpack هستش.

این پکیج که توسط سازندگان Webpack با استفاده از زبان Rust ساخته شده، عملکرد بی نظیری رو در پردازش های بالا در سمت سرور از خودش ارائه میکنه.
زمانی که Turbopack یک بسته بهینه شده میسازه در صورت تغییر اطلاعات قبلی فقط همون قسمت تغییر میکنه و بسته جدیدی ساخته نمیشه، همین کار باعث جلوگیری از پردازش بیهوده میشه.

با استفاده از فناوری Hot Module Replacement (HMR) برنامه شما در سریعترین زمان ممکن آپدیت میشه به عنوان مثال به ازای هر 1000 کامپوننت ری اکتی زمان Rerender شدن به 26 میلی ثانیه کاهش پیدا کرده که این واقعا بی نظیره. (البته این سرعت در فریمورک Next.js 13 تست شده که واقعا عالیه)


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

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

🔵کمک به توسعه سریع

🔵یکپارچه سازی بی نقص

🔵ساده و بهینه


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

Document 🌐

#turbopack #webpack
@CodeModule