Code Module | کد ماژول
前往频道在 Telegram
Hello World 🌎 <> Earth is programmable if you code it Group 👇🏻 @CodeModuleGap Contact Us 👇🏻 @MrShahiin @neoMahan
显示更多2 179
订阅者
无数据24 小时
-47 天
+2930 天
帖子存档
🎨 با مجموعه Shadcn بیشتر آشنا بشید !
در واقع Shadcn یک مجموعه ابزار برای ساخت رابطهای کاربری (UI) هست که پرقدرت و نسبتا نوظهوره، و با ارائه کامپوننتها و ابزارهای مدرن، دولوپرا و توسعهدهنده هارو با تجربهای بینظیر آشنا میکنه. این کتابخانه در واقع مجموعه ای از کامپوننت های reusable هست که با Radix و Tailwind ساخته شده.
این ابزار با تمرکز بر سادگی و انعطاف پذیری، کامپوننت های گستردهای برای طراحی وبسایتها و پروژه ها ارائه میده.
✅ مزایای استفاده از Shadcn چیه :
✅ طراحی زیبا و حرفهای کامپوننت ها
✅ قابلیت کاستوم سازی کامپوننت ها
✅ سریع و بهینه
✅ یادگیری و استفاده آسان
✅ مزایای Shadcn در برابر رقبا چیه ؟
مزایای Shadcn نسبت به سایر رقبا از جمله Bootstrap و Materialize، سبکی، سرعت، انعطاف پذیری و ... هست. همچنین، بهبود پایداری و امنیتی و ایجاد قابلیتهای مدرن، این ابزار رو از سایرین رقباش متمایز میکنه.
🔵 یکی دیگه از ویژگی بسیار جذاب این کتابخانه، اینه که شما میتونین کامپوننت ها رو به صورت جداگانه و به راحتی نصب کنید.
در کل Shadcn UI ابزار یا کتابخانه ای هست که دولوپرا رو در ساخت رابطهای کاربری زیبا، کارآمد و یکپارچه یاری میکنه. با استفاده از Shadcn میتونیم فرآیند توسعه رو سریع تر، کیفیت و یکنواختی UI رو افزایش و تجربه کاربری بهتری ارائه بدیم.
برای یادگیری و اطلاعات بیشتر راجب این کتابخانه، میتونید به داکیومنتش مراجعه کنید 🏖️
Document 🌕
#ui #shadcn
@CodeModule
Good Night 🌑✨
اگه میخوای پرواز کنی؛ باید همه بار های سنگینی که تو رو به سمت پایین میکشن؛ رها کنی.
@CodeModule
بافر چیه و چه کاربردی در Node.js داره؟🚀
تا الان حتما اسم بافر رو شنیدید و شاید در مرحله اول، کمی براتون گُنگ به نظر رسیده باشه. تو این پست به بررسی تخصصی بافر میپردازیم، پس با ما همراه باشید.
قبل از بررسی بافر، باید راجب بایت و بیت اطلاعاتی داشته باشیم.
بیت: ابتدایی ترین سطح داده ها که به صورت 0 و 1 نمایش داده میشن.
بایت: مجموعهی هشت بیت متوالی بایت نامیده میشود، که ظاهرشون بهطور مثال 01010101 میباشد.
اما بافرها چی هستن؟ 🤔
بافرها نظارت کنندههای موقت بر دادهها هستند. آنها دادهها رو نگهداری و دسترسی بهشون رو فراهم میکنن، بدون اینکه به دادهها آسیبی وارد شود ( شبیه یک نگهبان)
یکی از مزیت های قابل توجه بافرها، اینه که هرگونه اختلاف جریان داده ها رو متعادل میکنه و باعث میشه فرایند های کند مانع فرایند های سریع تر نشود.
نحوه استفاده از بافرها در Node.js 🤟
در Node.js، از بافرها زمانی استفاده میکنیم که نیاز به کار با فایلهای باینری، جریانهای TCP و دسترسی سریع و مستقیم به دادههای بایتی داشته باشیم. همچنین برای کار با رشتههای باینری یا دادههای باینری هم، از بافرها در Node.js استفاده میشود.
برای درک بهتر موضوع، میتونیم به سناریو زیر اشاره کنیم⬇️
زمانی که میخوایم یک فیلم یا ویدیو رو از سرویس های آنلاین مثل یوتیوب مشاهده کنیم، حتما براتون سوال شده که چه جوری بدون اینکه کل فیلم دانلود بشه، میتونیم شروع به دیدن ویدیو کنیم. این وظیفه بافرها هست و به طور کلی به این صورته:
ابتدا داده های درحال دانلود در یک بافر ذخیره میشن و این بافر، مثل یک وسیله نگه دارنده عمل میکنه که به نوعی شبیه به یک اتاقه، و زمانی که داده ها به قدر کافی در بافر ذخیره شده باشه، ویدیو شروع به پخش میشه و در حین تماشا داده های بیشتری به بافر اضافه میشود. این فرایند امکان پخش محتوا رو بدون نیاز به انتظار برای دانلود کامل، محیا میکنه.
در نهایت میتونیم نتیجه بگیریم که بافرها در Node.js، نقش مهمی در کنترل و مدیریت دادههای باینری و بایتی دارن، و برای انجام عملیات مرتبط مانند آپلود فایل، خواندن دادهها و کلی کاربرد دیگه، قابل استفاده هستند.
#buffer #nodejs
@CodeModule
طرحهای فیگما واسه توسعه و کدنویسی (پارت اول)🎨
🔵طرح فیگما سایت املاکی (دارای تعداد صفحات بالا + رسپانسیو)
🔵طرح فیگما سایت پوشاکی (دارای تعداد صفحات بالا + رسپانسیو)
🔵طرح فیگما سایت آشپزی
🔵طرح فیگما سایت شخصی
🔵طرح فیگما سایت موسیقی (سلیقه ادمین)
#figma
@CodeModule
🤟 سوالات مصاحبه ای Node.js
🟢در این پست، چند منبع برای سوالات مصاحبه ای Node.js به همراه پاسخ بهتون معرفی میکنم، که هم برای تقویت دانش و هم افزایش درصد موفقیت در مصاحبه ها، فوق العاده مفید و کاربردیه.
🐱 https://gist.github.com/paulfranco
🐱 https://github.com/Devinterview-io
🐱 https://github.com/Mohamed-Hashem
#nodejs #interview
@CodeModule
Good Night 🌑✨
همیشه مراقب اشتباه دوم باش، اشتباه اول
حقت بوده.
@CodeModule
🐱 سطح گیتهابتو با این ابزار بسنج !
گیت هاب برای برنامه نویس مثل شناسنامه میمونه، پس چه بهتر که ما شناسنامه خودمون رو ارزیابی کنیم!
گیت رول یک ابزار خفنه که گیت هابمون رو اسکن میکنه و طبق کد هایی که زدیم و پروفایلمون، اطلاعات منحصر به فردی ارائه میده.
اما این اطلاعات منحصر به فرد شامل چه چیزایی میشه ؟
1⃣زبان هایی که باهاشون کد زدیم.
2⃣تکنولوژی هایی که در حوزه های مختلف استفاده کردیم.
3⃣به پروفایلمون از 1 تا 10 نمره میده (هرچقدر به 10 نزدیک تر باشه بهتره)
4⃣یک نتیجه گیری کلی، در حد یک یا چند خط دربارمون میگه.
5⃣نکاتی راجب کد هایی که نوشتیم، مثل قابلیت نگهداری و قابل اطمینان بودن کد، بهمون ارائه میده.
نحوه استفاده از این ابزار به چه صورته؟ 🔥
ابتدا وارد سایت gitroll.io میشیم و سپس روی Scan Github Now کلیک میکنیم. بعد کلیک دو گزینه به ما نمایش داده میشه که روی Myself کلیک و با اکانت گیت هابمون لاگین میکنیم و تمام، شروع به اسکن میکنه. یک گزینه دیگه هم برای قابلیت اسکن پروفایل های دیگران داره.
‼️برای اسکن کردن باید vpn فعال باشه
در نهایت جدا از اینکه ابزار خوبیه و باعث میشه بفهمی با خودت چند چندی، احتمال محاسبه اشتباه هم داره و نباید زیاد به آمار و ارقامش اعتماد کنید.
🔵 gitroll.io
#github #gitroll
@CodeModule
⌨️ تسلط بر Data Visualization با Matplotlib در پایتون
در واقع Matplotlib یک کتابخانه قدرتمند بصریسازی داده در پایتونه که به کاربران امکان ایجاد انواع گستردهای از نمودارها، چارت ها و گراف هارو میده.
همچنین به دلیل انعطافپذیری و آپشن های کاستومایز سازیش، این کتابخانه در جوامع علمی، تحلیل داده و تسک های یادگیری ماشین (machine learning) به طور گسترده استفاده میشه.
کتابخانه Matplotlib به کاربرا این امکان رو میده که بصریسازیهای با کیفیت بالا مثل نمودارهای خطی، نمودارهای پراکندگی، نمودارهای میلهای، هیستوگرام، نمودارهای دایرهای و ... ایجاد کنن.
این کتابخانه یک اینترفیس (رابط) ساده برای تولید شکلهای با کیفیت چاپی فراهم میکنه که اونو به یک ابزار موثر و ضروری برای بررسی و ارائه دادهها، تبدیل میکنه.
✅مزایای کتابخانه Matplotlib چیه:
🟢پشتیبانی گستره از انواع چارت ها و نمودار ها
🟢قابلیت ادغام با کتابخانه های خفن دیگه ی پایتون مثل Pandas , Numpy
🟢کامیونیتی بزرگ
🟢وجود دسته های بزرگ از نمودار و چارت در گالری Matplotlib که برای راهنمایی کاربرا ایجاد شده
❌معایب کتابخانه Matplotlib چیه :
🔴این کتابخانه دارای منحنی یادگیری تند (steep Learning Curve) هست یعنی برای پیاده سازی نمودار های پیچیده تر باید تسلط عمیقی پیدا کرد.
🔴استایلهای پیشفرض نمودارهای Matplotlib بدون کاستومایز، ظاهر خوبی ندارن.
🔴نمودار های پیچیده ساخته شده توسط Matplotlib ممکنه به اندازه باقی کتابخونه ها بهینه نباشه.
به طور کلی، Matplotlib یک ابزار چندکاربری و قدرتمند برای بصریسازی داده در پایتونه که گزینههای گستردهای برای ایجاد نمودارهای اطلاعاتی و جذاب بصری فراهم میکنه🔥
#python #library #matplotlib
@CodeModule
🔵 با استفاده از این سایت، Box Shadow کاستوم خودت رو بساز !
سایت Css Matic یک ابزار آنلاینه که با استفاده ازش میتونید به صورت دستی، Box Shadow دلخواه خودتون رو تنظیم و بسازید و خروجی کد Css ای اون رو، مشاهده و کپی کنید ✈️
همچنین قابلیت های دیگه ای، مثل ساخت gradient و border radius رو هم داره.
🔵 Box Shadow Generator
#tools #css
@CodeModule
قوانین Cohesion و Coupling، راهی برای نوشتن کدهای حرفه ای تر 💀
دو اصل Coupling (جفت) و Cohesion
(انسجام)، نقش مهمی در ایجاد سیستم های نرم افزاری قوی و قابل نگهداری دارند، که لازمه هر برنامه نویسی راجبشون بدونه !
یکی از مشکلاتی که برنامه نویس های کمتجربه با اون درگیرن، نوشتن کدهای تمیزه که قوانین زیادی براش وجود داره. یکی از اون قوانین Cohesion و Coupling میباشد.
انسجام یا Cohesion چیه ؟
به صورت خلاصه وقتی شما یک فرمانده باشین(coder) و همه سربازاتون(code) هدف خاصی داشته باشن، بادهم یکپارچه میشن و این میشه پیوستگی.
اما بیانش به طور رسمی، به میزان ارتباط و وابستگی عناصر درون یک ماژول، کلاس یا تابع به یکدیگر اشاره داره.
به صورت کلی انسجام دو نوع داره که هرکدوم تعریف خاص خودشون رو دارن:
1⃣انسجام بالا
یعنی همه عناصر درون یک ماژول، دستشون تو یک کاسه هست و باهم برای دستیابی به یک هدف مشترک کار میکنن، که این خودش مزیت هایی داره: کد خواناتر _قابل درک
2⃣انسجام کم
دقیقا برعکس انسجام بالا هست، یعنی هرچی عناصر داخل یک ماژول باهم نامرتبط باشند، انسجام کمتر میشه.
جفت یا Coupling چیه ؟ 🤔
به میزان وابستگی متقابل ماژول ها به هم کوپلینگ میگویند که مثل انسجام ها دو نوع داره:
1⃣ کوپلینگ کم
کوپلینگ کم یعنی ماژول ها به طور ضعیفی به هم متصل هستن، و میتونن اغلب بدون تاثیر بریکدیگر اصلاح بشن، که یکی از مزیت های آن قابل استفاده مجدد شدن کد ها هست.
2⃣کوپلینگ بالا
کوپلینگ بالا نشان دهنده وابستگی زیاد ماژول ها با یکدیگر هست، که اگر در یکی از کد ها باگ یا خطایی رخ بده کل سیستم متوقف میشه یا درست کار نمیکنه.
به طور کلی استفاده از Coupling و Cohesion، به خاطر خوانایی بهتر و درک کد و مزیت های دیگه، توصیه میشه و از طرفی برای استفاده ازشون دو نکته رو باید رعایت کنیم:
🔵گروه بندی کردن ماژول ها، کلاس ها و توابع با وظایف مرتبط
🔵استفاده از روابط انتزاعی برای پنهان کردن جزئیات پیاده سازی
درکل هدف نهایی نوشتن کدی هست که Coupling کم و Cohesion بالا داشته باشد. این نوع کد قابل نگهداری بیشتر، قابل تستتر و دارای استحکام بیشتری هست.
#cohesion #coupling
@CodeModule
چرا به جای تایپ any از unknown استفاده کنیم؟ 🥶
همونطور که میدونید Any به معنای «هر چیزی» هست. پس بنابراین اگر این تایپ رو برای متغیری ست کنیم، یعنی این اجازه رو بهش دادیم که هر مقدار و داده ای رو بتونه قبول کنه. این تایپ، تمام ویژگیهای تایپ اسکریپت از جمله بررسی تایپ، تکمیل خودکار و safety رو غیرفعال میکنه.
در مقابل تایپ unknown ، ورژن Type Safe تایپ any هست. یعنی با استفاده از unknown میتونیم با امنیت بیشتری نسبت به any کدنویسی کنیم. اما این امنیت یعنی چی و چرا باید unknown و به any ترجیح بدیم؟ 🤔
🔵 ایمنی بیشتر
تایپ any به تایپچکر اجازه میده که به هر نوع داده ای بدون هیچ بررسی خاصی، دسترسی داشته باشه. این میتونه منجر به بروز خطاهایی در زمان اجرا بشه، زیرا تایپچکر نمیتونه اطمینان حاصل کنه که عملیاتهای انجام شده بر روی متغیر ایمن هستن یا نه.
اما تایپ unknown تایپچکر رو مجبور میکنه تا قبل از استفاده از داده، نوعش رو بررسی کنه. این باعث میشه که کد ایمنتر باشه و خطاهای کمتری در زمان اجرا رخ بده.
🔵 بهبود خوانایی و نگهداری کد
استفاده از تایپ unknown باعث میشه که کد شما مستند تر باشه. به دیگران و همچنین به خودتون نشون میده که قصد دارید نوع متغیر رو قبل از استفاده مشخص کنید. اما تایپ any این مفهوم رو نمیرسونه و میتونه به سوءتفاهمها و خطاهایی منجر بشه.
به طور خلاصه، استفاده از تایپ unknown به جای any باعث افزایش ایمنی و خوانایی کد میشه، و از خطاهای احتمالی جلوگیری میکنه. به همین دلیل توصیه میشه که در مواقعی که نوع دادهای مشخص نیست، از تایپ unknown استفاده کنیم ⚡️
#typescript
@CodeModule
😎دیتابیس لوکال در مرورگر، با indexed DB !
در این پست به بررسی API IndexedDB و کاربرد اون خواهیم پرداخت. اما آیا تا حالا اسم دیتابیس NoSQL به گوشتون خورده؟ 🧐
در واقع IndexedDB یک سیستم ذخیرهسازی و بازیابی NoSQL در مقیاس بزرگه. همچنین به شما این امکان رو میده که تقریبا هر چیزی که نیاز باشه رو در مرورگر کاربر ذخیره کنید. علاوه بر جستجوی معمول، دریافت و قرار دادن اکشنها، IndexedDB از تراکنشها هم پشتیبانی میکنه.
⚠️تنها عیبی که که این سیستم داره، یادگیری پیچیده تر و سخت تر نسبت به باقی سیستم های ذخیره سازیه.
🔵 ویژگی های indexedDB
⚡️قدرتمند
⚡️ذخیره حجم بیشتری از داده، به نسبت سایر سیستم های ذخیره سازی
⚡️انعطاف ذخیره برای انواع داده ها
⚡️قابلیت استفاده به صورت آنلاین و آفلاین
✅سیستم ذخیره سازی indexedDB چه قابلیت هایی داره ؟
عملیات بسیاری وجود داره که میتونه در IndexedDB انجام بشه. برخی از عملیات ها عبارتند از :
🟢خوندن / سرچ دادههای موجود در object store بر اساس key
🟢خوندن / سرچ دادههای موجود در object store بر اساس index
🟢به روزرسانی دادههای یک رکورد
🟢حذف یک رکورد
🟢اضافه کردن یک رکورد
❌محدودیت های indexedDB چیه ؟
🔴برخی مرورگرها مثل IE پشتیبانی کاملی ازش ندارن.
🔴مرورگر Firefox در حالت Private Browsing، به طور کامل IndexedDB رو غیر فعال میکنه.
در نهایت اگه پروژتون نیاز به ذخیره سازی دادههای پیچیده و ساختاری داره، و همچنین نیاز به حجم بیشتری برای ذخیره سازی داده دارید، indexed DB گزینه مناسبی هست 🏖️
#js #indexeddb #nosql
@CodeModule
آموزش دیزاین پترن ها به زبون آدمیزاد! 💀
الگوی طراحی یا دیزاین پترنها، راه حل هایی برای مشکلات رایج در طراحی نرم افزار و پروژه ها هستن. شناخت این الگوها باعث تمایز یک برنامه نویس حرفه ای از برنامه نویسان معمولی میشه. مهم نیست با چه زبان برنامه نویسی کد میزنید، شناخت و استفاده از این الگوها به شما در طراحی پروژه هاتون کمک بسیار زیادی میکنه.
🔗https://github.com/3lf/design-patterns-for-humans
#design_patterns
@CodeModule
Good Night 🌚✨
هرگز نمیتونید از اقیانوس رد بشید، مگه اینکه جرأت چشم برداشتن از ساحل رو داشته باشید.
@CodeModule
😍 کد هارو با Shiki، در سایت هایلایت و به اشتراک بذار!
کتابخانه Shiki، یک سینتکس هایلایتر خفن و قدرتمنده که با استفاده ازش میتونید، کد های دلخواهتون رو در داخل سایت قرار بدید.
این کتابخانه بیشتر در وبلاگ ها و سایت های آموزشی کاربرد داره، چرا که یک playground خفن براتون ایجاد کرده، که کلی زبان برنامه نویسی و تم رو ساپورت میکنه. همچین کار باهاش فوق العاده سادست.
✅مزایای کتابخانه Shiki چیه:
◀️قدرتمند و سریع
◀️قابل کاستومایز
◀️ظاهر زیبا و مدرن
◀️پشتیبانی از انواع زبان ها
◀️قابلیت استفاده در فریم ورک های مدرن
با استفاده از Shiki، دیگه دغدغه یک سینتکس هایلایتر سریع با امکانات بالا رو ندارید، و به راحتی و زیبایی کارتون رو هندل میکنید 🔥
برای یادگیری و استفاده از این کتابخانه، میتونید به داکیومنتش مراجعه کنید.
Document 🌕
#library #playground
@CodeModule
