فکت😂😂:

#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

Good Night 🌚✨

"انسان های بی هدف مجبورند تمام عمر برای انسان های هدفمند کار کنند"

@CodeModule

۷۰ سوال مصاحبه ای جاوا اسکریپت و میتونید تو pdf زیر مشاهده کنید⬇️

https://lnkd.in/eHEaJtH6

#javascript
@CodeModule

چگونه به برنامه نویس بهتری تبدیل بشیم؟

تو این پست با مهمترین فاکتورها و عواملی که در تبدیل شما به یک برنامه نویس حرفه ای تر تاثیرگذار هستن، آشنا میشیم. البته منظورم از برنامه نویس بهتر و حرفه ای تر، دو بعد شخصیتی و فنی هست 🔥


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

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

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

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

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

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

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

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

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

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


#programming #skill
@CodeModule

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

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


🐱 Repository

#html #bestpractice
@CodeModule

Good Night 🌚✨

هیچوقت برای پول کار نکن
بذار پول برای تو کار کنه 🛍

@CodeModule

آشنایی با weakSet و weakMap در ✌️

در جاوا اسکریپ دو تا ساختمان داده ی دیگه به اسم های WeakMap و WeakSet وجود داره که مشابه Map و Set هستن، با این تفاوت که تنها Object و آرایه و Non-Registered Symbol ها رو به عنوان Key قبول می کنند، اینجوری وقتی که Key مقدار Null بگیره از طریف WeakMap یا WeakSet هم قابل دسترسی نخواهد بود و Garbage-Collector محتوای اون رو از حافظه پاک میکنه.

مثالی از WeakMap:

let weakMap = new WeakMap();

let key1 = {id: 1};
let key2 = {id: 2};
let key3 = {id: 3};

weakMap.set(key1, "Value associated with key1");
weakMap.set(key2, "Value associated with key2");

console.log(weakMap.get(key1)); // Output: Value associated with key1

key1 = null; // حذف مرجع key1

// حالا حافظه رو بررسی کنید، ممکنه مقدار مرتبط با key1 حذف بشه چون دیگه هیچ مرجعی بهش اشاره نمی‌کنه

مثالی از WeakSet:

let weakSet = new WeakSet();

let obj1 = {name: "Alice"};
let obj2 = {name: "Bob"};
let obj3 = {name: "Charlie"};

weakSet.add(obj1);
weakSet.add(obj2);

console.log(weakSet.has(obj1)); // Output: true

obj1 = null; // حذف مرجع obj1

// حالا حافظه رو بررسی کنید، ممکنه obj1 از WeakSet حذف بشه چون دیگه هیچ مرجعی بهش اشاره نمی‌کنه 

در کل توی پروژه های بزرگ که بهینه سازی در حد چند خط هم مهمه از این دو ساختار استفاده میشه.
مثال و اطلاعات بیشتر و میتونید تو داکیومنت زیر مطالعه کنید⬇️

Document 🌐

#javascript #weakset #weakmap
@CodeModule

وقتی میای یک خط از کدت رو اوپتیمایز کنی 😂

#fun
@CodeModule

🚀 فریمورک Astro.js چیه ؟

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


⚠️ هدف و ماهیت کلی Astro چیه ؟

در واقع Astro رو میتونیم در بین معماری‌های مختلف فریمورک در دسته‌بندی MPA قرار داد. منظور از MPA همان Multi-Page Application یا اپلیکیشن چند صفحه‌ایه.

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


⚡️دو موردی که Astro رو خاص می‌کنه:

1️⃣معماری BYOT: شما در Astro می‌تونید از ابزارهای مختلف به صورت بسیار ساده استفاده کنید. به این نوع معماری BYOT یا Bring Your Own Tech گفته می‌شه که در نهایت هدفش اینه تا شما بتونید کتابخانه‌ها و ابزارهای مختلف مورد نیازتونو در کنار این فریمورک استفاده کنید. برای انجام چنین کاری Astro یک CLI معرفی کرده که با استفاده از اون به راحتی می‌تونید کتابخانه‌هایی مثل React و Vue رو وارد پروژه خود کنید.

2️⃣معماری island: معماری Island در Astro.js یک رویکرد معماری هست که برای بهبود کارایی وب‌سایت‌ها و سرعت بارگیری اونا طراحی شده. در این معماری، هر صفحه وب‌سایت به عنوان یک جزیره (Island) مستقل مدل‌سازی میشه. این به این معنا هست که هر صفحه از وب‌سایت به صورت جداگانه مدل‌سازی و ساخته میشه، بدون اینکه نیاز به بارگیری کامل تمام منابع وب‌سایت باشه.


🔥چند ویژگی خفن دیگه از astro:

🔵پشتیبانی از Markdown به صورت پیشفرض

🔵ادغام پذیری

🔵دیپلوی ساده

🔵سازگاری با سایر فریمورک های جاوا اسکریپت

همچنین فریمورک Astro.js دارای امکاناتی مثل کامپایل‌کردن از پیش و بهینه‌سازی برای سرعت بالا در بارگیری وب‌سایت هست. این فریمورک از React و Vue.js الهام می‌گیره، اما با هدف ارائه راه‌حل‌هایی ساده‌تر و کارآمدتر، جهت توسعه وب‌سایت‌ها سریع تر عمل می‌کنه.


Document 🌐

#astro #framework 
@CodeModule

وب اپلیکیشن یا pwa چیه و چرا باید یادش بگیریم؟ 💀


وب اپلیکیشن یا PWA که مخفف کلمه Progressive Web Apps هست، به معنای اپلیکیشن تحت وب پیش رونده میباشد.

این نوع اپلیکیشن در سال ۲۰۱۵ توسط گوگل معرفی شد. Pwa نیاز به نصب نداره و از طریق مرورگر در اختیار کاربران قرار میگیره.
در طراحی وب اپلیکیشن‌ها این امکان داده شده که کاربر هم بتونه به صورت آنلاین و هم آفلاین از وب اپلیکیشن استفاده کنه. در وب اپلیکیشن‌های آفلاین، هسته اصلی برنامه در cache مرورگر ذخیره شده و در صورتی که ارتباط با اینترنت نیز قطع بشه، این اپلیکیشن‌ها بارگذاری خواهند شد و هنگام اتصال مجدد، اپلیکیشن به روزرسانی خواهد شد.


مزایای استفاده از pwa ⬇️

🔵محدود نبودن به سیستم عامل

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

🔵بدون نیاز به نصب و اشغال حافظه

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

🔵بدون نیاز به بروزرسانی

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

🔵واکنشگرا بودن

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

🔵هزینه پایین‌تر نسبت به اپلیکیشن

طراحی وب اپلیکیشن، نسبت به اپلیکشن‌های موبایل هزینه کمتری داره. وقتی که شما اقدام به طراحی اپلیکیشن برای کسب‌وکار یا پروژه ای می‌کنید، باید اپلیکیشن خودتون و در دو نسخه اندروید و ios تهیه کنید و نیاز به یک تیم برنامه نویسی برای هر یک از نسخه‌ها خواهید داشت. اما برای تهیه وب اپلیکیشن، شما تنها نیازمند یک تیم طراحی وب سایت حرفه‌ای هستید که با زبان‌های Html، CSS و سایر زبان‌های طراحی وب آشنایی داشته باشن.

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

#pwa
@CodeModule

تلاش های یک برنامه نویس برای رفع باگ :😂

#fun
@CodeModule

انیمیشن های جادویی با Framer Motion⏬

کتابخانه Framer Motion، یک کتابخانه جاوااسکریپتی برای ایجاد انیمیشن‌های تعاملی در وب هست. این کتابخانه به دولوپرا اجازه میده تا به راحتی، انیمیشن‌ها و ترکیبات حرکتی مختلف رو به وبسایت‌ها و پروژه های خودشون اضافه کنن. از جمله ویژگی‌های مهم این کتابخانه علاوه بر سادگی، پشتیبانی از چندین پلتفرم مختلف مانند وب، React Native و محیط‌های دیگر هست. Framer Motion از یک سینتکس داخلی تمیز و اجزای React بهره می‌بره که این کتابخانه رو بک انتخاب مناسب برای توسعه دهندگان React می‌کنه.

کتابخانه Framer Motion دارای ویژگی‌های متعددیه که امکان ایجاد انیمیشن‌های پویا و جذاب و برای دولوپرا فراهم می‌کنه.

برخی از ویژگی های Framer Motion ⬇️

🔵سادگی

🔵ترکیبات حرکتی پیشرفته

🔵 پشتیبانی از چندین پلتفرم

🔵انیمیشن‌های چند بعدی


این تنها چند ویژگی از کتابخانه Framer Motion هست که اونو به یکی از ابزارهای محبوب برای توسعه انیمیشن در وب تبدیل کرده.
پیشنهاد میکنم حتما یه سر به داکیومنت این کتابخانه بزنید⚡️


Document 🌐

#animation #framer_motion

📚با استیت منیجمت Mobx بیشتر آشنا بشید

در واقع Mobx یک کتابخانه مدیریت استیت برای برنامه‌های جاوااسکریپته که به طور معمول با React استفاده میشه. در Mobx مفهوم اصلی، observables ها هستن که واکنش‌پذیریو تو برنامه شما فعال میکنن.
استیت منیجمنت Mobx از الگوی تغییرات رفع اشکال (reactive programming) استفاده می‌کنه تا همگام با تغییرات در داده‌ها، رابط کاربری رو به‌روز کنه.

🔵 نکته: observables ها اشیاء یا مقادیر قابل مشاهده هستند. به این معنی که هنگام تغییر اونها، observables ها به طور خودکار آگاه میشن و هر مولفه یا تابع واکنش‌پذیر دوباره اجرا میشه.


❓چرا از Mobx استفاده کنیم؟

‼️حجم بسیار کم

‼️سازگاری کامل با typescript

‼️ساده

‼️عملکرد قوی در پروژه های بزرگ


✅ نکته : توجه داشته باشید که استفاده از MobX به معنای لغو دادگان نامتغیره که ممکنه برای شما یک مانع شدید باشه.


در کل استیت منیجمنت MobX نسبت به سایر استیت منیجمنت ها مثل redux و... بسیار ساده تر و کم حجم تر هست و کار باهاش تجربه دلنشینی برای شما به ارمغان میاره. برای یادگیری این کتابخانه میتونید به داکیومنتش مراجعه کنید


Document 🌕

#library #state_managment #mobx
@CodeModule

یه ابزار کاربردی برای لینوکس بازا🪴

این سایت قابلیت اینو داره که هر دستور shell ای که وارد میکنید رو وظیفشو بهتون بگه! 🔥


➡️Website◀️

#linux #shell #tools
@CodeModule