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

ریپازیتوری زیر نکاتی راجب این استاندارد ها توی 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

Good Night 🌚✨

هر احمقی می‌تونه کدهایی بنویسه که کامپیوتر بفهمه، اما برنامه‌نویس خوب کدهایی می‌نویسه که دیگر انسان‌ها هم بتونن درک کنن.


@CodeModule

📚کتابخانه lodash چیه و چه مزایایی داره؟

در اصل Lodash یک کتابخانه قدرتمند جاوا اسکریپت هست که مجموعه‌ای از توابع کاربردی برای انجام وظایف رایج در برنامه‌نویسی رو ارائه میده. این کتابخانه به شما کمک می‌کنه تا کدتونو کوتاه‌تر، خواناتر و کارآمدتر کنید.

🔵 کاربردهای Lodash:

◀️کار با آرایه‌ها: Lodash توابع مختلفی برای پیمایش، فیلتر کردن، مرتب‌سازی و دستکاری آرایه‌ها ارائه میده.

◀️کار با اشیاء: Lodash توابعی برای دسترسی به مقادیر اشیاء، بررسی وجود خواص، ادغام اشیاء و موارد دیگر ارائه میده.

◀️توابع: Lodash توابع مختلفی برای ایجاد، ترکیب و curry کردن توابع ارائه میده.

◀️اعداد: Lodash توابعی برای انجام محاسبات ریاضی و دستکاری اعداد ارائه میده.

◀️رشته‌ها: Lodash توابعی برای دستکاری رشته‌ها مانند برش، جایگزینی و تبدیل به حروف بزرگ و کوچک ارائه میده.

◀️مجموعه‌ها: Lodash توابعی برای کار با مجموعه‌ها، مانند مجموعه‌ها و نگاشت‌ها ارائه میده.

⚡️مزایای استفاده از Lodash:

✅کاهش حجم کد: Lodash توابع زیادیو ارائه میده که می‌تونن به شما کمک کنن تا کدتونو کوتاه‌تر و خواناتر کنید.

✅افزایش کارایی: Lodash توابعیو ارائه میده که به شما کمک می‌کنن تا کدتونو کارآمدتر کنید.

✅کاهش خطا: Lodash توابعیو ارائه میده که به شما کمک می‌کنند تا از خطاهای رایج در برنامه‌نویسی جلوگیری کنید.

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

Document 🌕

#lodash #library #js
@CodeModule

🔵چکیده ای از فریم ورک Alpine.js

در واقع Alpine.js یکی از فریم ورک های جاوا اسکریپته که به شما این امکان رو میده پروژه هاتون و با کد کمتر و بهینه تر بنویسید ! 😎

💙البته گفتن کد کمتر منظور ساده نویسی رو میرسونه چون شما میتونید، لاجیک هایی رو که با کد های زیاد جاوا اسکریپت توسعه میدادید و با دو الی سه خط انجام بدید و این باعث میشه سرعت و کیفیت کار شما بالا بره.

همچنین Alpine.js مثل انگولار، React.js، Vue.js و Svelte این امکان رو میده تا برنامه نویس به صورت بهینه کدنویسی کنه و با دردسر کمتری کد خودشو تغییر بده و با استفاده از یک رابط، برنامه‌ی خودش رو آسون‌تر توسعه بده.


✅برخی از مزایای Alpine.js:

🔢 سینتکسی مشابه به Vue.js داره و شما اگه با با این فریم ورک کار کرده باشید یادگیری Alpine.js براتون آسون تره

🔢 راحت تر میتونید DOM رو دستکاری کنید

🔢 به راحتی میتونید اطلاعات رو بایند کنید

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

🔢 آلپاین جی اس رو میتونید هم به شکل کامپوننت و هم میان کد های Html استفاده کنید


برای اطلاعات بیشتر و نحوه نصب و استفاده از Alpine.js، میتونید به داکیومنتش مراجعه کنید.


Document 🌕

#framework #alpine
@CodeModule

Good Night 🌚✨

"سختی ها و مشکلاتو در آغوش بگیر، اونا قراره بخشی از سخنرانی پیروزیت باشن"


@CodeModule

5 کتابخانه کاربردی که component های آماده tailwind-css ارائه میدن🔥

1️⃣Flowbite

2️⃣Tailwind Elements

3️⃣Tailwind Templates

4️⃣Daisy UI

5️⃣Tailwind UI


#tailwind
@CodeModule

پسورد من توی چند سایت مختلف😂😂😂:


#fun
@CodeModule

در پست های قبل راجب اهمیت تست نویسی صحبت کردیم و امروز میخوایم یکی از محبوب‌ترین فریمورک‌ها برای این کار، یعنی Jest و بررسی کنیم😎

✅فریمورک Jest چیه؟

در واقع Jest یک فریمورک تست نویسی جاوااسکریپتی هست که امروزه به طور گسترده‌ای مورد استفاده قرار میگیره. این فریمورک با همه فریمورک‌های مدرن جاوا اسکریپت مثل React، Angular، Vue،  Node و نظایر این‌ها سازگاری داره.

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


❓چرا Jest و انتخاب کنیم؟

وضعیت پرسش‌نامه سال ۲۰۱۸ جاوااسکریپت نشون میده که Jest محبوب‌ترین و پر استفاده‌ترین فریمورک تستینگ برای جاوااسکریپت بوده و حدود ۳۹٫۶% از توسعه دهنده ها از اون استفاده میکردن.

و همچنین Facebook، Twitter، Airbnb، Instagram، Spotify و بسیاری از استارتاپ‌های بزرگ، همگی از این فریمورک برای تست محصولاتشون که با جاوااسکریپت نوشته شده، استفاده میکنن.


✅مزایای فریمورک Jest

◀️بدون پیکربندی

◀️استفاده ساده

◀️سرعت بالا

◀️اجرای موازی تست ها

◀️مستندات بسیار خوب


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

برای یادگیری این فریمورک میتونید به داکیومنتش مراجعه کنید.


Document 🌕

#testing #jest #framework
@CodeModule

بررسی برخی فیچر های جدید جاوا اسکریپت (ES14) ✌️

اکما اسکریپت ۱۴ موجی از ویژگی‌های هیجان‌انگیز و در سال ۲۰۲۳ به نمایش گذاشت تا تجربه‌ی بهتری از برنامه نویسی با جاوا اسکریپت داشته باشید.

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

1⃣ متد findLast
این متد در پروتوتایپ تمامی آرایه‌ ها قابل دسترسی هست (به عنوان مثال Array.prototype.findLast) و به طور مشابه به متد find عمل می‌کنه و برای یافتن یک عضو در آرایه استفاده میشه. با این تفاوت که جستجو رو از انتهای آرایه شروع می‌کنه.

const array1 = [5, 12, 50, 100, 44];const found = array1.findLast((element) => element > 45);
console.log(found);//Output: 100

2⃣متد toSorted
این متد نیز مشابه متد sort هست. این دو متد برای مرتب‌سازی اعضای یک آرایه استفاده میشن، با این تفاوت که متد toSorted آرایه اصلی و تغییر نمیده و خروجی اون یک آرایه جدید از اعضای مرتب‌شده هست.

const sortedNumbers = numbers.toSorted((a, b) => a - b) 
console.log(sortedNumbers) // Output: [1, 2, 3, 4, 5] 
 
// common mistake using numbers 
const nums2 = [0, 15, 5, 10, 20] 
const sortedNums2 = nums2.toSorted() 
console.log(sortedNums2) // Output: [0, 10, 15, 20, 5]

3⃣ متد toReversed
این متد نیز مشابه متد reverse عمل می‌کنه که برای معکوس کردن اعضای یک آرایه استفاده می‌شود، با این تفاوت که متد toReversed آرایهٔ اصلی و تغییر نمیده، بلکه خروجی اون یک آرایه جدید از اعضای معکوس شده هست.

const originalArray = [1, 2, 3, 4, 5];
// toReversed
const newArray = originalArray.toReversed();
console.log(originalArray); // Output: [1, 2, 3, 4, 5] the array is unmodified
console.log(newArray); // Output:[5, 4, 3, 2, 1]

4⃣ متد with
این متد به ما اجازه میده که یک عضو از آرایه رو با یک مقدار دیگه جایگزین کنیم، بدون اینکه آرایه اصلی و تغییر بدیم. این متد دو ورودی می‌گیره: ورودی اول که شماره ایندکس مورد نظر برای جایگزینی هست، و ورودی دوم مقدار جدید مورد نظر هست.

const numbers = [1, 2, 9999, 4]; 
 const result = numbers.with(2, 3); 
 console.log(result); // [1, 2, 3, 4]

5⃣متد groupBy
با استفاده از متد groupBy، می‌تونیم اعضای یک آرایه رو بر اساس یک ویژگی مشترک بین آن‌ها گروه‌بندی کنیم. نکته‌ای که درباره‌ی groupBy وجود داره اینه که بر خلاف متدهای بالا، این متد به صورت استاتیک در دسترس، و مستقیماً از شیء Object Global قابل دسترسی هست.

 const inventory = [ 
  { name: &quotasparagus&quot, type: &quotvegetables&quot, quantity: 5 }, 
  { name: &quotbananas&quot, type: &quotfruit&quot, quantity: 0 }, 
  { name: &quotgoat&quot, type: &quotmeat&quot, quantity: 23 },
]

function myCallback({ quantity }) { 
  return quantity > 5 ? &quotok&quot : &quotrestock&quot 
} 
 
const result2 = Object.groupBy(inventory, myCallback);

#javascript #es14
@CodeModule

Good Night 🌚✨

" سورس‌کد مثل لطیفه (جوک) می‌مونه؛ اگه مجبور به توضیحش شدید، بدونید که اصلاً خوب نوشته نشده. "


@CodeModule