Good Night 🌚✨

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


@CodeModule

📖 دسترسی به تاریخچه Git با Git History

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

به طور کلی، اکستنشن Git History به شما این امکان و میده تا تاریخچه branch ها، فایل‌ها و لاین هاتونو به صورت گرافیکی جستجو و پیگیری کنید 🏖️

برای نصب این اکستنشن کاربردی، عبارت Git History رو در بخش extensions برنامه Vscode، سرچ کنید 🔥


#extension #git #vscode
@CodeModule

وقتی اشتباهی یه قسمت از استایلا رو پاک میکنی، پروژه: 😂😂


#fun
@CodeModule

با استفاده از این سایت، Clip path کاستوم خودت رو بساز 🔥

سایت Bennett Feely's Clippy یک ابزار آنلاینه که به کاربران این اجازه رو میده، تا به راحتی CSS clip-path کاستوم خودشون رو ایجاد کنن. این ابزار به شما کمک می‌کنه تا با استفاده از رابط گرافیکی، اشکال مختلف رو برش بدید و در نهایت کد CSS مربوط به اون رو دریافت کنید.

پ.ن: clip-path به شما این امکان رو میده که با برش دادن یک عنصر به یک شکل (دایره، بیضی، چند ضلعی و ...) اشکال پیچیده در CSS و وبسایت ایجاد کنید.

🔵Website

#css #clippath #tools
@CodeModule

😉همه چیز راجب Markdown و Rich Text

تو این پست قراره به بررسی و مقایسه تخصصی Markdown و Rich Text بپردازیم.

‼️مارک داون (Markdown) چیه؟

در واقع Markdown یک زبان ساده برای نگارش متنه که به شما این امکان و میده، محتوای خودتونو با استفاده از نشانگرهای ساده مثل # برای تایتل ها و * برای تاکید متن، و ... فرمت‌بندی کنید. همچنین فایل های Markdown با فرمت .md شناخته میشن.

✅مزایای استفاده از Markdown :

🔵سادگی و قابل فهم بودن برای همه

🔵قابلیت تبدیل به HTML و دیگر فرمت‌ها

🔵امکان استفاده از ویرایشگرهای متنی ساده

‼️ریچ تکست (Rich Text) چیه ؟

در اصل Rich Text یک فرمت متنی پیشرفتست که به شما امکان میده متن خودتونو با استفاده از قابلیت‌های گوناگون مثل رنگ، فونت، تصاویر و جداول، فرمت‌بندی کنید. همچنین فایل های Rich Text با فرمت .rtf شناخته میشن.

✅مزایای استفاده از Rich Text :

🔵امکان افزودن تصاویر، جداول و فرمت‌بندی پیچیده

🔵قابلیت نمایش زیبا و حرفه‌ای

🔵سازگاری با بسیاری از برنامه‌ها و وب‌سایت‌ها

🔵 تفاوت بین Markdown و Rich Text چیه ؟

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

تفاوت های دیگه ای که وجود داره، richText محدودیت هایی توی استفاده داره که Markdown نداره و همچنین درک و استفاده Markdown ساده تر از Rich Text هست، ولی در سمت دیگه Rich Text امکانات بیشتر و بهتری در اختیارتون قرار میده.

با درک تفاوت‌ها بین Markdown و Rich Text، میتونید تصمیم بهتری برای نگارش و فرمت‌بندی محتواهاتون بگیرید. انتخاب بین سادگی و پیچیدگی، به نوع محتوا و نیازتون بستگی داره.


#markdown #richText #different
@CodeModule

خبر کوتاه بود و دردناک

ورسل خبر از انتشار نسخه آزمایشی ورژن ۱۵ نکست داد 💀

تغییرات و قابلیت های جدید ⬇️

پشتیبانی از React 19 RC، React Compiler (بتا) و بهبود خطاهای hydration.

درخواست‌های fetch ، Route Handlers GET و نویگیشن کاربر در مرورگر، دیگه به طور پیش‌فرض کش نمیشه.

دیزاین create-next-app آپدیت شده و فلگ جدیدی برای فعالسازی و استفاده از توربوپک در توسعه لوکال ایجاد شده.

قابلیت partial preRendering (بتا): اضافه شدن کانفیگ آپشن جدید برای Layout و Page.

ویژگی next/after (بتا): رابط برنامه‌نویسی جدید برای اجرای کد پس از پایان استریم کردن پاسخ.

باندل کردن پکیج های اکسترنال (استیبل): کانفیگ آپشن های جدید برای App و Pages Router.


Document 🌐

#nextjs
@CodeModule

یه مخزن پر از Api های رایگان ⚡️

در ریپازیتوری زیر، مجموعه ای بزرگ از API های رایگان و دسته بندی شده وجود داره، و واسه هر نوع پروژه ای که دارید، میتونید api پیدا کنید.


🐱 https://github.com/public-apis

#free #api
@CodeModule

تست رسپانسیو وبسایت، در همه اندازه ها🔥

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

Download 🌐

#responsive #ltbrowser
@CodeModule

با رسم شکل در VsCode 📖

اگه نیاز به نمایش و توضیح یک فلوچارت یا شکل برای هم تیمی یا ... دارید، و همچنین در حال کار با VsCode هستید، نیازی نیست به سراغ ابزارهای جداگونه برید و فقط کافیه، اکستنشن Draw.io Integration رو نصب کنید.

برای نصب، نحوه استفاده و اطلاعات بیشتر، عبارت Draw.io Integration رو در بخش extentions برنامه VsCode سرچ کنید 🔥


#extensions
@CodeModule

شمارش 1 تا 10 با بیل گیتس 😂😂

#fun
@CodeModule

مقایسه Cookies با Local Storage، کدوم یکی فضای بهتری واسه ذخیره سازیه؟🧐

دو روش معمول برای ذخیره‌سازی داده‌ها، Cookies و Local Storage میباشد. هر کدوم از این روش‌ها مزایا و معایب خودشون رو دارن که در ادامه با هم به بررسیشون میپردازیم.

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

🔵کوکی‌ها با هر درخواست به سمت سرور ارسال میشن، در حالی که داده های لوکال استوریج، به صورت خودکار به سمت سرور ارسال نمیشن.

🔵حداکثر حجم و اندازه کوکی‌ها ۴ کیلوبایته، در حالی که فضای ذخیره‌ سازی در لوکال استوریج حجم بیشتری رو پشتیبانی میکنه.

🔵در بحث امنیت، کوکی ها ممکنه در معرض حملاتی مثل Cross-Site Request Forgery (CSRF) قرار بگیرن. با این حال، میشه با استفاده از ویژگی‌هایی مانند HttpOnly و Secure به امنیت اون‌ها افزود. اما داده‌های ذخیره شده در Local Storage، قابل دسترسی توسط هر اسکریپتی که دامنه آن اجرا می‌شود، هستن. بنابراین در معرض حملات XSS قرار دارن.


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


#cookies #localstorage
@CodeModule

😉تفاوت بین مُفَسِر و کامپایلر چیه ؟

برای درک بهتر موضوع، بهتره اول بدونید هر کدوم چی هستن و چه مزایایی دارن ⚡️

‼️مفسر (interpreter) چیه:

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

👌مزایای استفاده از مفسر:

◀️سادگی

◀️امکان دسترسی سریع به خطاها

◀️اجرای فوری برنامه

‼️کامپایلر (compiler) چیه:

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

👌مزایای استفاده از کامپایلر:

◀️بهبود عملکرد برنامه

◀️افزایش بهینگی

◀️بهبود امنیت


✅ تفاوت بین کامپایلر و مفسر:

✅در حین اجرا، مفسر به صورت تفسیری و خط به خط عمل می‌کنه، در حالی که کامپایلر به صورت کامل برنامه رو ترجمه، و سپس اجرا میکنه.

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

✅برنامه‌هایی که توسط مفسر اجرا میشن از قابلیت Live coding حمایت میکنن، اما برخی از برنامه‌هایی که توسط کامپایلر ترجمه شدن، این امکان رو ندارن.

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


#programming #software #compiler #interpreter
@CodeModule

🧐تست Api با ابزار مجهز به هوش مصنوعی !

در واقع HTTPie، یک ابزار قدرتمند و در عین حال کاربرپسند برای ارسال درخواست‌های HTTP و کار با APIها هست.

این ابزار به دولوپرا کمک میکنه تا درخواست‌های HTTP رو به راحتی ارسال، و پاسخ‌ها رو مشاهده و تحلیل کنند. همچنین شامل ویژگی‌هایی مثل سازگاری با APIهای RESTful و GraphQL، پشتیبانی از قالب‌های مختلف احراز هویت و یکپارچگی با ابزارهای دیگر توسعه هست🔥

مهم تر از همه این ابزار قابلیت استفاده از Ai رو هم داره، تا بتونه بهتر پاسخگوی نیاز ها و انجام تسک ها باشه(در حال حاضر روی نسخه 1.0) هست.

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

🔵Website

#tools #api #ai
@CodeModule

این خیلی خوب بود 😂😂


#fun
@CodeModule

😍 کد هارو با Shiki، در سایت هایلایت و به اشتراک بذار!

کتابخانه Shiki، یک سینتکس هایلایتر خفن و قدرتمنده که با استفاده ازش میتونید، کد های دلخواهتون رو در داخل سایت قرار بدید.

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

✅مزایای کتابخانه Shiki چیه:

◀️قدرتمند و سریع

◀️قابل کاستومایز

◀️ظاهر زیبا و مدرن

◀️پشتیبانی از انواع زبان ها

◀️قابلیت استفاده در فریم ورک های مدرن


با استفاده از Shiki، دیگه دغدغه یک سینتکس هایلایتر سریع با امکانات بالا رو ندارید، و به راحتی و زیبایی کارتون رو هندل میکنید 🔥


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

Document 🌕

#library #playground
@CodeModule

Good Night 🌚✨

هرگز نمی‌تونید از اقیانوس رد بشید، مگه اینکه جرأت چشم برداشتن از ساحل رو داشته باشید.


@CodeModule

آموزش دیزاین پترن ها به زبون آدمیزاد! 💀

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


🔗https://github.com/3lf/design-patterns-for-humans


#design_patterns
@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

چرا به جای تایپ any از unknown استفاده کنیم؟ 🥶

همونطور که میدونید Any به معنای «هر چیزی» هست. پس بنابراین اگر این تایپ رو برای متغیری ست کنیم، یعنی این اجازه رو بهش دادیم که هر مقدار و داده ای رو بتونه قبول کنه. این تایپ، تمام ویژگی‌های تایپ اسکریپت از جمله بررسی تایپ، تکمیل خودکار و safety رو غیرفعال می‌کنه.

در مقابل تایپ unknown ، ورژن Type Safe تایپ any هست. یعنی با استفاده از unknown می‌تونیم با امنیت بیشتری نسبت به any کدنویسی کنیم. اما این امنیت یعنی چی و چرا باید unknown و به any ترجیح بدیم؟ 🤔


🔵 ایمنی بیشتر

تایپ any به تایپ‌چکر اجازه میده که به هر نوع داده ای بدون هیچ بررسی خاصی، دسترسی داشته باشه. این می‌تونه منجر به بروز خطاهایی در زمان اجرا بشه، زیرا تایپ‌چکر نمیتونه اطمینان حاصل کنه که عملیات‌های انجام شده بر روی متغیر ایمن هستن یا نه.

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


🔵 بهبود خوانایی و نگهداری کد

استفاده از تایپ unknown باعث میشه که کد شما مستند تر باشه. به دیگران و همچنین به خودتون نشون میده که قصد دارید نوع متغیر رو قبل از استفاده مشخص کنید. اما تایپ any این مفهوم رو نمیرسونه و میتونه به سوءتفاهم‌ها و خطاهایی منجر بشه.


به طور خلاصه، استفاده از تایپ unknown به جای any باعث افزایش ایمنی و خوانایی کد میشه، و از خطاهای احتمالی جلوگیری می‌کنه. به همین دلیل توصیه میشه که در مواقعی که نوع داده‌ای مشخص نیست، از تایپ unknown استفاده کنیم ⚡️

#typescript
@CodeModule