👻 با Jotai بیشتر آشنا بشید

در واقع Jotai یک کتابخانه state manager از معماری Atomic و همچنین سبک و مدرن برای برنامه‌های React هست که به سادگی و کارایی تأکید داره.

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

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

مزایای استفاده از استیت منیجر Jotai ⬇️

◀️راحتی استفاده

◀️یادگیری آسان

◀️انعطاف پذیری

◀️حجم کم و بهینه


✅‌ همچنین بنده یک مقاله درباره Jotai نوشتم، که در اون با کلی مثال برای هر کانسپت، میتونید به راحتی کار با این استیت منیجر رو یاد بگیرید و در نهایت، یک پروژه نهایی با jotai رو با هم توسعه میدیم.

برای یادگیری این کتابخانه، میتونید به داکیومنت و همچنین مقاله بنده که در گیتهاب به صورت اوپن سورس منتشر کردم، سر بزنید 🧑‍🎓


Document 🌕

How-to-Learn-Jotai-Article 🐱

#statemanager #react #jotai #atomic
@CodeModule

مهارت سرچ کردن چقدر اهمیت داره؟ 🤔

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

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

مهم ترین نکته اینه که انگلیسی سرچ کنید. در صورتی که زبانتون زیاد خوب نیست،
میتونید از translate استفاده کنید. اما چرا؟ دلیلش اینه بتونید از تمام منابع جهانی استفاده کنید، اگه فقط فارسی سرچ کنید، محدود به منابع و سایت های ایرانی میشید و ممکنه جواب سوال های تخصصیتون رو نگیرید :)

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


نکاتی در رابطه با شیوه صحیح سرچ کردن⬇️

1️⃣سرچ با اجبار مطابقت دقیق

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

"What is Javascript"

2️⃣استفاده از عملگر AND

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

Html And Css

3️⃣استفاده از عملگر OR

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

Javascript or python" free cours

4️⃣استفاده از علامت *

زمانی که بخشی از عبارت مورد نظرتون و فراموش می‌کنید، به راحتی می‌تونید به جای اون عبارت یا کلمه از علامت (ستاره) استفاده کنید.

the * of money

5️⃣استفاده از عملگر /

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

Laptop/lenovo

قطعا در طول دوران برنامه نویسی با چالش های زیادی روبه رو میشید. با یادگیری چند تکنیک ساده میتونید این چالش ها رو به فرصت تبدیل کنید و به یک برنامه نویس خود ساخته تبدیل شوید 💀


#search
@CodeModule

🤯متد های کاربردی Console که نمیدونستی!

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


⚡️انواع متد ها و کاربردهاشون:

1️⃣متد log: برای چاپ کردن اطلاعات دلخواه اعم از متن ، عدد ، آبجکت ، آرایه ، ‌و ... در کنسول مرورگر

console.log("CodeModule")

2️⃣متد info: برای خروجی اطلاعات آموزنده روی کنسول‌ (درباره موضوعی میخواید اطلاعات کمک کننده بدید)

console.info("CodeModule is the best")

3️⃣متد error: برای خروجی خطا روی کنسول که متن دلخواه شما رو به شکل ارور در کنسول چاپ میکنه

console.error("this is a error")

4️⃣متد warn: برای خروجی اخطار روی کنسول که متن دلخواه شما رو به صورت هشدار (با رنگ زرد) در کنسول چاپ میکنه

console.warn("this is a warn")

5️⃣متد clear: برای پاک کردن کنسول از همه لاگ ها و ارور ها و ...

console.clear()

6️⃣متد time و timeEnd : برای نشان دادن طول مدت اجرای یک تکه کد استفاده میشه

   console.time("myTimer is start");
   // some code here
   console.timeEnd("myTimer is end");
  

7️⃣متد table: برای نمایش داده‌ها به‌صورت جدول روی کنسول، که خیلی کاربردیه!

   const names = ["mahan", "shahin", "ghasem"];
   console.table(names); 

با یادگیری این متد ها، میتونید خیلی حرفه ای تر و راحت تر با کنسول کار کنید و خروجی ها و مشکلات کد هارو، دقیق تر بررسی کنید 🏖️


#console #js
@CodeModule

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

این کتاب در تقویت مهارت حل مسئله، حسابی بهتون کمک میکنه و یاد میگیرید که چطور یک مسئله رو، به بهترین روش حل کنید🔥

توصیه میکنم حتما مطالعش کنید👍


#book #softskill
@CodeModule

ابزار storybook چیه و چه کاربردی داره؟🤔

استوری بوک از ابزارهای کارآمد برای طراحی، تست و پیاده سازی UI پروژه ها میباشد. کتابخانه بزرگ و قدرتمندی که با زبان جاوا اسکرپیت و به صورت open source منتشر شده و به کمک افزونه های قدرتمندش، رشد چشمگیری در بین دولوپرا و توسعه دهندگان پیدا کرده.


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


1⃣توسعه کامپوننت های UI به صورت جداگانه و غیر وابسته به سایر کامپوننت ها

2⃣اجرا خارج از محیط برنامه اصلی (کاهش نگرانی در مورد کدهای پروژه و ...)

3⃣افزونه های قدرتمند به همراه API بسیار ساده برای شبیه سازی و توسعه کامپوننت ها ( لینک - نویگیشن - کلیک و ... )

4⃣افزایش کارایی کامپوننت های نوشته شده

5⃣پشتیبانی از اغلب فریمورک‌ها و کتابخانه‌ها (React، Vue، Angular و ...)

6⃣کمک به داکیومنت نویسی پروژه

7⃣اجرای تست های مختلف بر روی کامپوننت (یونیت تست - اینتگریشن - اسنپ شات و ... )

8⃣ امکان توسعه المان ها و کامپوننت ها به صورت تیمی

9⃣استفاده دوباره از کامپوننت های موجود و کاهش کدها و پیچیدگی پروژه


اگرچه Storybook ابزار قدرتمندی برای توسعه و نمایش اجزای رابط کاربری هست، اما برای هر نوع پروژه ای مناسب نیست. این ابزار برای پروژه‌های بزرگ مقیاس، و همچنین پروژه هایی مناسبه که معماری‌ مبتنی بر کامپوننت دارن. به طور کلی، هر پروژه‌ای که اعضای تیم، نیاز به مستندسازی، همکاری و تست داشته باشن، storybook بهترین گزینه هست💀


#storybook
@CodeModule

5 اکستنشن کاربردی گوگل، برای طراحان وبسایت⚡️

1⃣اکستنشن WhatFont

یکی از مهم‌ترین افزونه‌هایی که باید به‌ عنوان طراح وب بشناسید، اکستنشن WhatFont هست. به کمک این افزونه می‌تونید فقط با نگه داشتن ماوس بر روی فونت مورد نظر، نوعش رو شناسایی کنید.

2⃣اکستنشن Colorzilla

با استفاده از اکستنشن Colorzilla، می‌تونید کد HEX رنگ مورد نظرتون رو پیدا، و به‌راحتی کپیش کنید. با این ابزار نه تنها می تونید تاریخچه رنگ ها رو ببینید، بلکه این امکان و هم دارید که گرادیان های CSS ای رو تحلیل کنید.

3⃣اکستنشن Image Downloader

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

4⃣اکستنشن Dimensions

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

5⃣اکستنشن CSSViewer

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


#extensions
@CodeModule

دکتر ها : گوگل کردن مطالب آنلاین (چیزایی که بلد نیستید) از شما یک دکتر نمیسازه.

برنامه نویسا : 😂😂


#fun
@CodeModule

😇 با زبان نشانه گذاری XML بیشتر آشنا بشید

در واقع XML مخفف عبارت «eXtensible Markup Language» به معنی «زبان نشانه‌گذاری توسعه‌پذیر» هست. XML زبان به حساب میاد، اما زبان برنامه نویسی محسوب نمیشه.

زبان XML از «نشانه‌گذاری» (Markup) استفاده می‌کنه و قابل بسط و توسعست. XML از زبان استاندارد نشانه‌گذاری تعمیم‌یافته (Standard Generalized Markup Language) یا به اختصار SGML مشتق شده.

🧐تفاوت Xml با Html چیه ؟

برخلاف تگ‌ها یا همون برچسب‌های HTML، تگ‌های XML خود توصیف‌گر هستن یعنی خودشون تعیین کننده قابلیتشونن. XML یک قالب و فُرمت آزاد و باز به حساب میاد. یعنی فرمت فایل XML به صورت آزاد برای استفاده هر فردی در دسترس قرار داره. اصطلاح ازاد یا باز (Open) در اینجا فلسفه اپن سورس رو تداعی میکنه. پسوند XML به صورت .xml   هست.

🔵 مزایای استفاده از XML چیه ؟

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

🔵حفظ تمامیت و بی‌نقصی داده‌ها

🔵بهبود کارایی جستجو

🔵طراحی اپلیکیشن‌های انعطاف‌پذیر


✅اهمیت زبان XML در چیه و چرا اینقدر مهمه؟

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

✅ این زبان در چه زمینه هایی کاربرد داره؟

◀️انتقال داده ها

◀️وب اپلیکیشن ها

◀️مستندسازی

◀️برنامه نویسی اندروید

در کل XML یک زبان نشانه‌گذاریه که به دلیل قابلیت‌های گسترده‌اش برای ذخیره‌سازی و انتقال داده‌ها، در برنامه‌نویسی و سیستم‌های اطلاعاتی بسیار پرکاربرد هست.

برای یادگیری این زبان میتونین به منابع معتبر مثل W3schools مراجعه کنید🔥


#xml #language
@CodeModule

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