Vivaldi x Paganini: The ...
Classical Movement
#Music
🔴<CodeHub/>
همیشه طوری کدنویسی کنید که انگار شخصی که در نهایت کد شما را حفظ میکند، یک روانپریش خشن خواهد بود که میداند کجا زندگی می کنید.
جان وودز بنیانگذار Room to Read
🔴<CodeHub/>
👍5
#NEXT
کار های نسبتا ساده ای که میتونه پرفورمنس توسعه پروژه رو بالا ببره و بعضیاش واقعا کاربردی و ساده ان .
وقت داشتید یه نگاهی به این مقاله بندازید.
🔵 <CodeHub/>
کار های نسبتا ساده ای که میتونه پرفورمنس توسعه پروژه رو بالا ببره و بعضیاش واقعا کاربردی و ساده ان .
وقت داشتید یه نگاهی به این مقاله بندازید.
🔵 <CodeHub/>
👍1
Forwarded from DevTwitter | توییت برنامه نویسی
اگر توی پروژه React js و یا Next js از کتابخانه framer motion استفاده میکنید این پست میتونه براتون خیلی مفید باشه!
سایت aceternity UI با استفاده از framer motion کلی انیمیشن های خفن و کاربری توی زمینه و قسمت های مختلف توسعه دادن که میتونید ببینید و اگر دوست داشتید کدش رو مستقیم کپی و استفاده کنید.
پیشنهاد میکنم حتما به سایتش سر بزنید!!!
https://ui.aceternity.com
@DevTwitter | <Mohammad Reza Moradi/>
سایت aceternity UI با استفاده از framer motion کلی انیمیشن های خفن و کاربری توی زمینه و قسمت های مختلف توسعه دادن که میتونید ببینید و اگر دوست داشتید کدش رو مستقیم کپی و استفاده کنید.
پیشنهاد میکنم حتما به سایتش سر بزنید!!!
https://ui.aceternity.com
@DevTwitter | <Mohammad Reza Moradi/>
👍3
#JS
پنج تا از کتابخونههای قدیمی که یه موقع مناسب و مفید بودن ولی دیگه موقع تغییره :
اول. jQuery:
روزای قدیم برای دستکاری DOM و پشتیبانی از مرورگرهای قدیمی کاربرد داشت، ولی حالا جاوااسکریپت خودش کلی قابلیت داره و روشهای جدید، جای jQuery رو گرفته.
دوم. Lodash:
این کتابخونه واسه کارهای کمکی توی کدها بود، ولی با معرفی ES6 و توابع بومی جاوااسکریپت، نیاز بهش کمتر شده.
سوم. Moment.js:
برای کار با تاریخ و زمان عالی بود، اما حجم بالایش باعث میشه سرعت برنامهها پایین بیاد. جایگزینهایی مثل date-fns و Luxon خیلی سبکتر و بهینهتر هستن.
چهارم. Underscore.js:
نسخه اولیه Lodash که با امکانات کمترش دیگه کافی نیست؛ بهتره از روشهای بومی ES6 استفاده کنید.
پنجم. RequireJS:
ابزار قدیمی برای مدیریت ماژولها که با ورود ES6 ماژولها و ابزارای مدرن مثل Webpack، Vite و Rollup دیگه نیاز بهش کمتر شده.همه رو حل میکنن.
پس اگر هنوز از این کتابخونههای قدیمی استفاده میکنید، وقتشه یه نگاهی به تکنولوژیهای مدرن بندازید تا کدها سریعتر و بهینهتر باشن.
🔵</Codehub>
پنج تا از کتابخونههای قدیمی که یه موقع مناسب و مفید بودن ولی دیگه موقع تغییره :
اول. jQuery:
روزای قدیم برای دستکاری DOM و پشتیبانی از مرورگرهای قدیمی کاربرد داشت، ولی حالا جاوااسکریپت خودش کلی قابلیت داره و روشهای جدید، جای jQuery رو گرفته.
دوم. Lodash:
این کتابخونه واسه کارهای کمکی توی کدها بود، ولی با معرفی ES6 و توابع بومی جاوااسکریپت، نیاز بهش کمتر شده.
سوم. Moment.js:
برای کار با تاریخ و زمان عالی بود، اما حجم بالایش باعث میشه سرعت برنامهها پایین بیاد. جایگزینهایی مثل date-fns و Luxon خیلی سبکتر و بهینهتر هستن.
چهارم. Underscore.js:
نسخه اولیه Lodash که با امکانات کمترش دیگه کافی نیست؛ بهتره از روشهای بومی ES6 استفاده کنید.
پنجم. RequireJS:
ابزار قدیمی برای مدیریت ماژولها که با ورود ES6 ماژولها و ابزارای مدرن مثل Webpack، Vite و Rollup دیگه نیاز بهش کمتر شده.همه رو حل میکنن.
پس اگر هنوز از این کتابخونههای قدیمی استفاده میکنید، وقتشه یه نگاهی به تکنولوژیهای مدرن بندازید تا کدها سریعتر و بهینهتر باشن.
🔵</Codehub>
⚡1
Forwarded from رقصنده با کد (Ali KhodaeiDoost)
۵۶ تا آگهی آخر جابینجا رو دادم به هوش مصنوعی که تحلیل کنه. خلاصه تکنولوژیهایی که نیاز دارن به ترتیب اولویت این شد.
1. React proficiency (hooks, component lifecycle, best practices)
2. Next.js (SSR, SSG, and performance optimization)
3. TypeScript for type-safe, scalable JavaScript
4. State management (Redux, React Query, Zustand, etc.)
5. HTML/CSS frameworks (Tailwind, MUI, Bootstrap, Styled Components)
6. Git version control and team workflows
7. Testing (Jest, Cypress) and clean code practices
8. Familiarity with Docker, CI/CD, and DevOps fundamentals
9. Knowledge of SSR and performance tuning
10. Optional pluses: React Native, WebSocket, GraphQL, PWA
1. React proficiency (hooks, component lifecycle, best practices)
2. Next.js (SSR, SSG, and performance optimization)
3. TypeScript for type-safe, scalable JavaScript
4. State management (Redux, React Query, Zustand, etc.)
5. HTML/CSS frameworks (Tailwind, MUI, Bootstrap, Styled Components)
6. Git version control and team workflows
7. Testing (Jest, Cypress) and clean code practices
8. Familiarity with Docker, CI/CD, and DevOps fundamentals
9. Knowledge of SSR and performance tuning
10. Optional pluses: React Native, WebSocket, GraphQL, PWA
🔥3👍1
Forwarded from DevTwitter | توییت برنامه نویسی
شاید اوایل کار شما هم مثل من فکر میکردید که Lazy Loading فقط برای لود کردن عکسها بکار میره، ولی این فقط یه گوشه از ماجراست! درواقع Lazy Loading یه استراتژی هوشمندانهست که میشه تو خیلی جاها ازش استفاده کرد. بذارید چندتا مثال بزنم تا بیشتر با کاربرد هاش آشنا بشیم
کامپوننتها:
وقتی یه اپلیکیشن بزرگ دارید، نیازی نیست همه کامپوننتها رو از اول لود کنید. مثلاً پنل ادمین رو فقط وقتی ادمین لاگین کرد لود میکنیم!
روتهای برنامه:
چرا باید کد صفحه پروفایل رو موقعی که کاربر تو صفحه اصلی هست لود کنیم؟ بذار هر وقت رفت تو پروفایل، اون موقع لود بشه.
کتابخونههای سنگین:
مثلاً کتابخونه نقشه یا چارت که حجم زیادی دارن رو فقط وقتی کاربر واقعاً بهشون نیاز داره لود میکنیم.
دیتای API:
حتی میتونیم دیتا رو هم Lazy Load کنیم! مثلاً تو لیست محصولات، به جای گرفتن همه محصولات، به تدریج و موقع اسکرول کردن لود کنیم (Infinite Scroll).
نتیجه چی میشه؟
-سرعت اولیه برنامه میره بالا
-منابع سیستم کمتر مصرف میشه
-کاربر فقط چیزی که نیاز داره رو دانلود میکنه
-تجربه کاربری بهتر میشه
پس دفعه بعد که خواستید پرفورمنس برنامهتون رو بهتر کنید، فقط به عکسها فکر نکنید! Lazy Loading خیلی جاهای دیگه هم به دردتون میخوره
@DevTwitter | <Soheil Seyyedi/>
کامپوننتها:
وقتی یه اپلیکیشن بزرگ دارید، نیازی نیست همه کامپوننتها رو از اول لود کنید. مثلاً پنل ادمین رو فقط وقتی ادمین لاگین کرد لود میکنیم!
روتهای برنامه:
چرا باید کد صفحه پروفایل رو موقعی که کاربر تو صفحه اصلی هست لود کنیم؟ بذار هر وقت رفت تو پروفایل، اون موقع لود بشه.
کتابخونههای سنگین:
مثلاً کتابخونه نقشه یا چارت که حجم زیادی دارن رو فقط وقتی کاربر واقعاً بهشون نیاز داره لود میکنیم.
دیتای API:
حتی میتونیم دیتا رو هم Lazy Load کنیم! مثلاً تو لیست محصولات، به جای گرفتن همه محصولات، به تدریج و موقع اسکرول کردن لود کنیم (Infinite Scroll).
نتیجه چی میشه؟
-سرعت اولیه برنامه میره بالا
-منابع سیستم کمتر مصرف میشه
-کاربر فقط چیزی که نیاز داره رو دانلود میکنه
-تجربه کاربری بهتر میشه
پس دفعه بعد که خواستید پرفورمنس برنامهتون رو بهتر کنید، فقط به عکسها فکر نکنید! Lazy Loading خیلی جاهای دیگه هم به دردتون میخوره
@DevTwitter | <Soheil Seyyedi/>
👍3🔥1
#Figma_Template
Figma Template: Global Transactions
Difficulty : ⭐️⭐️⭐️
🔗Click for Get Link
🔴 </CodeHub>
Figma Template: Global Transactions
Difficulty : ⭐️⭐️⭐️
🔗Click for Get Link
🔴 </CodeHub>
🔥2👍1
امروز میخوام یه ترفند باحال از دنیای گوگل رو بهتون معرفی کنم: Google Dork.
🔍مفهوم Google Dork چیه؟
بعضی وقتا میشنید که گوگل فقط یه موتور جستجو نیست! در واقع، گوگل همون ابزار قدرتمندیست که با دستورات خاص میتونید اطلاعات عمیقتر و پنهونیه رو پیدا کنید. مثلاً اگه دنبال فایلهای PDF، تصاویر یا حتی صفحات خاصی از یه سایت هستید، میتونید از دستورهایی مثل:
استفاده کنید تا نتایج دقیقتری بدست بیارید.
💡 چطوری کار میکنه؟
این تکنیک به شما اجازه میده به کمک عبارات جستجوی پیشرفته، چیزهایی رو پیدا کنید که توی جستجوهای معمولی گوگل پنهان میمونن. مثلاً با نوشتن عبارت
میتونید همه فایلهای PDF با کلمه «گزارش» توی سایت مورد نظرتون رو پیدا کنید.
⚠️ مواظب باشین!
یادتون باشه که این تکنیکها فقط برای اهداف آموزشی، تست امنیت و یادگیری هستن. استفاده نادرست یا غیرقانونی از این ترفندها میتونه به دردسرای بزرگی منجر بشه. پس همیشه قوانین رو رعایت کنید و با اخلاقیات کار کنید.
امیدوارم این پست براتون مفید و جذاب بوده باشه.
🔵<CodeHub/>
🔍مفهوم Google Dork چیه؟
بعضی وقتا میشنید که گوگل فقط یه موتور جستجو نیست! در واقع، گوگل همون ابزار قدرتمندیست که با دستورات خاص میتونید اطلاعات عمیقتر و پنهونیه رو پیدا کنید. مثلاً اگه دنبال فایلهای PDF، تصاویر یا حتی صفحات خاصی از یه سایت هستید، میتونید از دستورهایی مثل:
• filetype:pdf
• site:example.com
• intitle:"admin login"
استفاده کنید تا نتایج دقیقتری بدست بیارید.
💡 چطوری کار میکنه؟
این تکنیک به شما اجازه میده به کمک عبارات جستجوی پیشرفته، چیزهایی رو پیدا کنید که توی جستجوهای معمولی گوگل پنهان میمونن. مثلاً با نوشتن عبارت
site:example.com filetype:pdf "گزارش"
میتونید همه فایلهای PDF با کلمه «گزارش» توی سایت مورد نظرتون رو پیدا کنید.
⚠️ مواظب باشین!
یادتون باشه که این تکنیکها فقط برای اهداف آموزشی، تست امنیت و یادگیری هستن. استفاده نادرست یا غیرقانونی از این ترفندها میتونه به دردسرای بزرگی منجر بشه. پس همیشه قوانین رو رعایت کنید و با اخلاقیات کار کنید.
امیدوارم این پست براتون مفید و جذاب بوده باشه.
🔵<CodeHub/>
🔥3👍1
🔹تفاوت بین useEffect و useMemo و useCallback در ری اکت چیه؟
✔️ هوک useEffect در React برای انجام کارهایی استفاده میشه که اثر جانبی دارن. به عبارت ساده، وقتی میخوای بعد از رندر شدن کامپوننت کارهایی مثل دریافت اطلاعات از سرور، تغییر در DOM یا مدیریت اشتراکها انجام بدی، useEffect وارد عمل میشه.
از useEffect معمولاً برای کارهایی مثل دریافت داده (data fetching)، اضافه و حذف کردن event listenerها، و انجام عملیات بعد از تغییر props یا state استفاده میکنن.
✔️هوک useMemo در React برای memoization استفاده میشه. Memoization یعنی ذخیره کردن نتیجهی یک محاسبهی سنگین تا فقط وقتی که وابستگیها تغییر میکنن، دوباره محاسبه بشه. این کار باعث بهینهسازی عملکرد و جلوگیری از اجرای بیدلیل محاسبات میشه.
📌نکته: useMemo فقط مقدار خروجی رو کش میکنه، نه خود تابع رو!
اگه نیاز داری که خود تابع کش بشه (مثلاً برای پاس دادن به useEffect یا useCallback)، بهتره از useCallback استفاده کنی.
هوک useMemo برای کش کردن (cache) خروجی یک تابع یا یک عبارت استفاده میشه تا از انجام محاسبات غیرضروری جلوگیری بشه و عملکرد بهینهتر بشه.
✔️ هوک useCallback شباهت زیادی به useMemo داره، ولی به جای مقدار، روی تابع تمرکز میکنه و اون رو memoize میکنه. این هوک مخصوصاً وقتی مفید میشه که بخوای یک تابع رو بهعنوان prop به کامپوننت فرزند بفرستی و از ایجاد توابع جدید در هر رندر جلوگیری کنی.
📌هوک useCallback یه تابع رو کش (cache) میکنه و فقط زمانی که وابستگیها تغییر کنن، یه نسخهی جدید از تابع میسازه. این کار باعث جلوگیری از رندر غیرضروری کامپوننتهای فرزند میشه.
‼️به طور خلاصه، هر کدوم از این هوکها هدف خاصی دارن و ابزارهای مفیدی برای مدیریت بخشهای مختلف یک کامپوننت React هستن. درک درست از زمان و نحوهی استفادهی useEffect، useMemo و useCallback میتونه به بهینهتر شدن عملکرد و نگهداری راحتتر اپلیکیشنهای React کمک کنه.
Source : useMemo - useEffect - useCallback
🔵 <CodeHub/>
✔️ هوک useEffect در React برای انجام کارهایی استفاده میشه که اثر جانبی دارن. به عبارت ساده، وقتی میخوای بعد از رندر شدن کامپوننت کارهایی مثل دریافت اطلاعات از سرور، تغییر در DOM یا مدیریت اشتراکها انجام بدی، useEffect وارد عمل میشه.
از useEffect معمولاً برای کارهایی مثل دریافت داده (data fetching)، اضافه و حذف کردن event listenerها، و انجام عملیات بعد از تغییر props یا state استفاده میکنن.
useEffect(() => {
// Code to execute after rendering or when specified dependencies change
}, [dependencies]);
✔️هوک useMemo در React برای memoization استفاده میشه. Memoization یعنی ذخیره کردن نتیجهی یک محاسبهی سنگین تا فقط وقتی که وابستگیها تغییر میکنن، دوباره محاسبه بشه. این کار باعث بهینهسازی عملکرد و جلوگیری از اجرای بیدلیل محاسبات میشه.
📌نکته: useMemo فقط مقدار خروجی رو کش میکنه، نه خود تابع رو!
اگه نیاز داری که خود تابع کش بشه (مثلاً برای پاس دادن به useEffect یا useCallback)، بهتره از useCallback استفاده کنی.
هوک useMemo برای کش کردن (cache) خروجی یک تابع یا یک عبارت استفاده میشه تا از انجام محاسبات غیرضروری جلوگیری بشه و عملکرد بهینهتر بشه.
const memoizedValue = useMemo(() => {
// Expensive calculation or function
return result;
}, [dependencies]);
✔️ هوک useCallback شباهت زیادی به useMemo داره، ولی به جای مقدار، روی تابع تمرکز میکنه و اون رو memoize میکنه. این هوک مخصوصاً وقتی مفید میشه که بخوای یک تابع رو بهعنوان prop به کامپوننت فرزند بفرستی و از ایجاد توابع جدید در هر رندر جلوگیری کنی.
📌هوک useCallback یه تابع رو کش (cache) میکنه و فقط زمانی که وابستگیها تغییر کنن، یه نسخهی جدید از تابع میسازه. این کار باعث جلوگیری از رندر غیرضروری کامپوننتهای فرزند میشه.
const memoizedCallback = useCallback(() => {
// Function to memoize
}, [dependencies]);
‼️به طور خلاصه، هر کدوم از این هوکها هدف خاصی دارن و ابزارهای مفیدی برای مدیریت بخشهای مختلف یک کامپوننت React هستن. درک درست از زمان و نحوهی استفادهی useEffect، useMemo و useCallback میتونه به بهینهتر شدن عملکرد و نگهداری راحتتر اپلیکیشنهای React کمک کنه.
🔵 <CodeHub/>
👍7
CodeHub
🔹تفاوت بین useEffect و useMemo و useCallback در ری اکت چیه؟ ✔️ هوک useEffect در React برای انجام کارهایی استفاده میشه که اثر جانبی دارن. به عبارت ساده، وقتی میخوای بعد از رندر شدن کامپوننت کارهایی مثل دریافت اطلاعات از سرور، تغییر در DOM یا مدیریت اشتراکها…
🎯 فرض کنید یه صفحهی داشبورد داریم که توش یه لیست از کاربران نمایش داده میشه. این لیست از یه API دریافت میشه و هر کاربر یه دکمه برای انتخاب شدن داره. اما سه تا مشکل وجود داره:
1️⃣ هر بار که داشبورد باز میشه، درخواست جدید به سرور ارسال میشه، حتی اگه دادهها تغییری نکرده باشن.
✅ استفاده از هوک useEffect → دادهها رو فقط وقتی دریافت کن که کامپوننت لود میشه، نه در هر رندر.
2️⃣ یه محاسبهی سنگین (مثلاً فیلتر کردن کاربران خاص) توی هر رندر دوباره اجرا میشه، حتی اگه لیست تغییر نکرده باشه.
✅ استفاده از هوک useMemo → لیست فیلتر شدهی کاربران رو فقط وقتی محاسبه کن که دادهها تغییر کنن، نه در هر رندر.
3️⃣ هر بار که یه کاربر انتخاب میشه، تابعی که هندلر کلیک هست دوباره ساخته میشه، که باعث رندر غیرضروری کامپوننتهای فرزند میشه.
✅ استفاده از هوک useCallback → تابع کلیک روی کاربران رو ثابت نگه دار تا باعث رندر اضافی نشه.
📌 نتیجه: عملکرد بهتر، جلوگیری از درخواستهای غیرضروری به سرور، و کاهش رندرهای غیرضروری! 🚀
🔵 <CodeHub/>
1️⃣ هر بار که داشبورد باز میشه، درخواست جدید به سرور ارسال میشه، حتی اگه دادهها تغییری نکرده باشن.
✅ استفاده از هوک useEffect → دادهها رو فقط وقتی دریافت کن که کامپوننت لود میشه، نه در هر رندر.
2️⃣ یه محاسبهی سنگین (مثلاً فیلتر کردن کاربران خاص) توی هر رندر دوباره اجرا میشه، حتی اگه لیست تغییر نکرده باشه.
✅ استفاده از هوک useMemo → لیست فیلتر شدهی کاربران رو فقط وقتی محاسبه کن که دادهها تغییر کنن، نه در هر رندر.
3️⃣ هر بار که یه کاربر انتخاب میشه، تابعی که هندلر کلیک هست دوباره ساخته میشه، که باعث رندر غیرضروری کامپوننتهای فرزند میشه.
✅ استفاده از هوک useCallback → تابع کلیک روی کاربران رو ثابت نگه دار تا باعث رندر اضافی نشه.
📌 نتیجه: عملکرد بهتر، جلوگیری از درخواستهای غیرضروری به سرور، و کاهش رندرهای غیرضروری! 🚀
🔵 <CodeHub/>
👌3
Aukai — Aukai [Full Albu...
Years Of Silence
#Music
🔴</CodeHub>
آموزش علوم کامپیوتر نمیتواند هیچکس را به یک برنامه نویس خبره تبدیل کند، همانطور که مطالعه درباره برسها و رنگها نمیتواند از کسی یک نقاش خبره بسازد.
اریک اس. ریموند
🔴</CodeHub>
🔥2
🔹هوک
✔️ هوک useTransition توی React یه ابزاره که بهت اجازه میده قسمتهایی از رابط کاربری رو به صورت پسزمینه (background) رندر کنی. به عبارت ساده، وقتی میخوای یه بهروزرسانی state انجام بدی که ممکنه کار سنگینی باشه (مثلاً فیلتر کردن یه لیست بزرگ یا تغییر دادن محتوای یه تب) و نمیخوای این کار باعث وقفه و لگ توی رابط کاربری بشه، از useTransition استفاده میکنی.
🟡 وقتی useTransition رو بالای کامپوننتت صدا میزنی، دو تا چیز برمیگردونه:
1️⃣ مقدار isPending: یه فلگ که نشون میده آیا یه Transition (یعنی بهروزرسانی با اولویت پایین) در حال انجامه یا نه.
مثلاً اگه مقدارش true باشه، میتونی یه انیمیشن یا پیام "در حال پردازش" به کاربر نشون بدی.
2️⃣مقدار startTransition: یه تابع که هر کاری رو داخلش انجام بدی، به عنوان یه Transition اجرا میشه. یعنی stateهایی که داخل اون تابع آپدیت میشن، به صورت غیر مسدودکننده (non-blocking) انجام میشن.
🔆مثال ساده:
❗️در این مثال، وقتی کاربر روی یکی از دکمهها کلیک میکنه، تابع handleTabChange داخل startTransition اجرا میشه. به این ترتیب، اگر آپدیت state کار سنگینی باشه، به صورت پسزمینه انجام میشه و UI همیشه پاسخگو میمونه.
‼️ چند تا نکته :
1️⃣ هوک useTransition فقط داخل کامپوننتها یا هوکهای سفارشی قابل استفادهس.
2️⃣ اگه داخل تابع startTransition از عملیات async استفاده کنی، بعد از await هم باید آپدیتهای state رو داخل یه startTransition دیگه قرار بدی تا اونها هم به عنوان Transition در نظر گرفته بشن.
خلاصه اینکه، useTransition کمک میکنه تا بهروزرسانیهای سنگین و غیرضروری، بدون ایجاد وقفه توی تجربه کاربری، به صورت پسزمینه انجام بشن
🔵</CodeHub>
useTransition
چیه و چه کاردبرد هایی داره؟✔️ هوک useTransition توی React یه ابزاره که بهت اجازه میده قسمتهایی از رابط کاربری رو به صورت پسزمینه (background) رندر کنی. به عبارت ساده، وقتی میخوای یه بهروزرسانی state انجام بدی که ممکنه کار سنگینی باشه (مثلاً فیلتر کردن یه لیست بزرگ یا تغییر دادن محتوای یه تب) و نمیخوای این کار باعث وقفه و لگ توی رابط کاربری بشه، از useTransition استفاده میکنی.
🟡 وقتی useTransition رو بالای کامپوننتت صدا میزنی، دو تا چیز برمیگردونه:
1️⃣ مقدار isPending: یه فلگ که نشون میده آیا یه Transition (یعنی بهروزرسانی با اولویت پایین) در حال انجامه یا نه.
مثلاً اگه مقدارش true باشه، میتونی یه انیمیشن یا پیام "در حال پردازش" به کاربر نشون بدی.
2️⃣مقدار startTransition: یه تابع که هر کاری رو داخلش انجام بدی، به عنوان یه Transition اجرا میشه. یعنی stateهایی که داخل اون تابع آپدیت میشن، به صورت غیر مسدودکننده (non-blocking) انجام میشن.
🔆مثال ساده:
import { useState, useTransition } from 'react';
function MyComponent() {
const [isPending, startTransition] = useTransition();
const [tab, setTab] = useState('home');
function handleTabChange(newTab) {
// بهروزرسانی state به صورت Transition
startTransition(() => {
setTab(newTab);
});
}
return (
<div>
<button onClick={() => handleTabChange('home')}>Home</button>
<button onClick={() => handleTabChange('profile')}>Profile</button>
{isPending && <span>در حال تغییر تب...</span>}
<div>{tab === 'home' ? 'صفحه اصلی' : 'پروفایل'}</div>
</div>
);
}
❗️در این مثال، وقتی کاربر روی یکی از دکمهها کلیک میکنه، تابع handleTabChange داخل startTransition اجرا میشه. به این ترتیب، اگر آپدیت state کار سنگینی باشه، به صورت پسزمینه انجام میشه و UI همیشه پاسخگو میمونه.
‼️ چند تا نکته :
1️⃣ هوک useTransition فقط داخل کامپوننتها یا هوکهای سفارشی قابل استفادهس.
2️⃣ اگه داخل تابع startTransition از عملیات async استفاده کنی، بعد از await هم باید آپدیتهای state رو داخل یه startTransition دیگه قرار بدی تا اونها هم به عنوان Transition در نظر گرفته بشن.
خلاصه اینکه، useTransition کمک میکنه تا بهروزرسانیهای سنگین و غیرضروری، بدون ایجاد وقفه توی تجربه کاربری، به صورت پسزمینه انجام بشن
🔵</CodeHub>
👏3👍2
🔸 آشنایی با Access Token و Refresh Token
مفهوم Access Token چیست؟
- یک کلید دیجیتال کوتاهمدت (مثلاً ۱۵ دقیقه) است.
- برای دسترسی به منابع سرور (مثل APIها) استفاده میشود.
- پس از انقضا، دیگر معتبر نیست و کاربر باید توکن جدید بگیرد.
مفهوم Refresh Token چیست؟
- یک کلید دیجیتال بلندمدتتر (مثلاً ۷ روز) است.
- برای دریافت Access Token جدید بدون نیاز به ورود مجدد کاربر استفاده میشود.
- معمولاً امنیت بالاتری دارد و در سرور یا کوکیهای امن ذخیره میشود.
⏳ فرآیند رفرش توکن به زبان ساده:
1. ورود کاربر (Login):
- کاربر نام کاربری و رمز عبور را وارد میکند.
- سرور یک Access Token (کوتاهمدت) و یک Refresh Token (بلندمدت) به کاربر میدهد.
2. انقضای Access Token:
- بعد از ۱۵ دقیقه (یا زمان تعیینشده)، Access Token منقضی میشود.
- اگر کاربر بخواهد عملیاتی انجام دهد (مثلاً داده بخواند)، سرور خطای 401 Unauthorized میدهد.
3. درخواست توکن جدید با Refresh Token:
- کلاینت (مثلاً مرورگر یا اپلیکیشن)، Refresh Token را به سرور میفرستد.
- سرور بررسی میکند:
- اگر Refresh Token معتبر باشد → Access Token جدید میسازد و برمیگرداند.
- اگر معتبر نباشد → کاربر باید دوباره لاگین کند.
4. تکرار درخواست اصلی:
- کلاینت، Access Token جدید را جایگزین میکند.
- درخواست اصلی کاربر (مثلاً دریافت داده) با توکن جدید دوباره ارسال میشود.
📌 چرا این مکانیزم مهم است؟
- امنیت: کاهش ریسک سرقت توکن (چون Access Token عمر کوتاهی دارد).
- تجربه کاربری: کاربر بدون دردسر لاگین مجدد، به کارش ادامه میدهد.
- کنترل دسترسی: سرور میتواند با باطل کردن Refresh Token، دسترسی کاربر را فوراً لغو کند.
درباره این مفهوم در این لینک بیشتر بخوانید
🔴</CodeHub>
مفهوم Access Token چیست؟
- یک کلید دیجیتال کوتاهمدت (مثلاً ۱۵ دقیقه) است.
- برای دسترسی به منابع سرور (مثل APIها) استفاده میشود.
- پس از انقضا، دیگر معتبر نیست و کاربر باید توکن جدید بگیرد.
مفهوم Refresh Token چیست؟
- یک کلید دیجیتال بلندمدتتر (مثلاً ۷ روز) است.
- برای دریافت Access Token جدید بدون نیاز به ورود مجدد کاربر استفاده میشود.
- معمولاً امنیت بالاتری دارد و در سرور یا کوکیهای امن ذخیره میشود.
⏳ فرآیند رفرش توکن به زبان ساده:
1. ورود کاربر (Login):
- کاربر نام کاربری و رمز عبور را وارد میکند.
- سرور یک Access Token (کوتاهمدت) و یک Refresh Token (بلندمدت) به کاربر میدهد.
2. انقضای Access Token:
- بعد از ۱۵ دقیقه (یا زمان تعیینشده)، Access Token منقضی میشود.
- اگر کاربر بخواهد عملیاتی انجام دهد (مثلاً داده بخواند)، سرور خطای 401 Unauthorized میدهد.
3. درخواست توکن جدید با Refresh Token:
- کلاینت (مثلاً مرورگر یا اپلیکیشن)، Refresh Token را به سرور میفرستد.
- سرور بررسی میکند:
- اگر Refresh Token معتبر باشد → Access Token جدید میسازد و برمیگرداند.
- اگر معتبر نباشد → کاربر باید دوباره لاگین کند.
4. تکرار درخواست اصلی:
- کلاینت، Access Token جدید را جایگزین میکند.
- درخواست اصلی کاربر (مثلاً دریافت داده) با توکن جدید دوباره ارسال میشود.
📌 چرا این مکانیزم مهم است؟
- امنیت: کاهش ریسک سرقت توکن (چون Access Token عمر کوتاهی دارد).
- تجربه کاربری: کاربر بدون دردسر لاگین مجدد، به کارش ادامه میدهد.
- کنترل دسترسی: سرور میتواند با باطل کردن Refresh Token، دسترسی کاربر را فوراً لغو کند.
درباره این مفهوم در این لینک بیشتر بخوانید
🔴</CodeHub>
👌4👍2
🎯مهارتهایی که در آگهیهای شغلی توسعه نرمافزار به صورت ریموت بیشترین تقاضا را دارند:
1 - Python - Appeared in 33.99% 🥇
2 - SQL - Appeared in 26.08% 🥈
3 - AWS - Appeared in 20.67% 🥉
4 - Java - Appeared in 14.56%
5 - React - Appeared in 12.54%
6 - Docker - Appeared in 11.23%
7 - JavaScript - Appeared in 10.47%
8 - Kubernetes - Appeared in 9.67%
9 - TypeScript - Appeared in 7.89%
10 - Node.js - Appeared in 7.45%
‼️نکته : پایتون به سرعت در حال رشد است به دلیل موج فعلی هوش مصنوعی که نیازمند حجم زیادی از کارهای دادهای است (که پایتون بهترین ابزار برای این کار محسوب میشه).
🔵<CodeHub/>
1 - Python - Appeared in 33.99% 🥇
2 - SQL - Appeared in 26.08% 🥈
3 - AWS - Appeared in 20.67% 🥉
4 - Java - Appeared in 14.56%
5 - React - Appeared in 12.54%
6 - Docker - Appeared in 11.23%
7 - JavaScript - Appeared in 10.47%
8 - Kubernetes - Appeared in 9.67%
9 - TypeScript - Appeared in 7.89%
10 - Node.js - Appeared in 7.45%
‼️نکته : پایتون به سرعت در حال رشد است به دلیل موج فعلی هوش مصنوعی که نیازمند حجم زیادی از کارهای دادهای است (که پایتون بهترین ابزار برای این کار محسوب میشه).
🔵<CodeHub/>
🔥3
🎯مهارتهایی که در بالاترین میانگین حقوق را در نقشهای توسعه نرمافزار ریموت دارند :
1 - Verilog
Average Salary: $234,168
Median Salary: $242,000
Maximum Salary: $333,700
2 - PyTorch
Average Salary: $230,668
Median Salary: $230,000
Maximum Salary: $365,400
3 - TensorFlow
Average Salary: $215,427
Median Salary: $220,000
Maximum Salary: $385,000
4 - Rust
Average Salary: $210,404
Median Salary: $215,000
Maximum Salary: $403,000
5 - Scala
Average Salary: $209,256
Median Salary: $210,000
Maximum Salary: $400,000
6 - Go
Average Salary: $207,840
Median Salary: $205,000
Maximum Salary: $390,000
7 - Kotlin
Average Salary: $205,492
Median Salary: $200,000
Maximum Salary: $380,000
8 - Haskell
Average Salary: $202,678
Median Salary: $201,000
Maximum Salary: $375,000
9 - Clojure
Average Salary: $201,444
Median Salary: $200,000
Maximum Salary: $370,000
10 - Spark
Average Salary: $198,765
Median Salary: $197,500
Maximum Salary: $365,000
❗️این لیست ۱۰ مهارت واقعاً منو شگفتزده کرد! در صدر این لیست Verilog قرار داره، زبانی که شاید خیلی از ما برنامهنویسها حتی اسمش رو نشنیده باشیم. این یه زبان توصیف سختافزار (HDL) هست که بیشتر در صنعت تولید چیپ و مخصوصاً توی آمریکا استفاده میشه. با اینکه تعداد فرصتهای شغلی Verilog خیلی کمتر از Python یا Java هست، ولی حقوق بالایی داره که نشون میده تقاضا برای این مهارت از عرضه بیشتره.
‼️ بجز Verilog، بیشتر مهارتهایی که بالاترین حقوق رو دارن مربوط به تحلیل داده و یادگیری ماشین هستن. این نشون میده که بازار هوش مصنوعی چقدر داغه! اگه دنبال یادگیری یه مهارت جدید برای افزایش ارزش خودت توی بازار کار هستی، این لیست میتونه یه راهنمای عالی باشه.
🔵<CodeHub/>
1 - Verilog
Average Salary: $234,168
Median Salary: $242,000
Maximum Salary: $333,700
2 - PyTorch
Average Salary: $230,668
Median Salary: $230,000
Maximum Salary: $365,400
3 - TensorFlow
Average Salary: $215,427
Median Salary: $220,000
Maximum Salary: $385,000
4 - Rust
Average Salary: $210,404
Median Salary: $215,000
Maximum Salary: $403,000
5 - Scala
Average Salary: $209,256
Median Salary: $210,000
Maximum Salary: $400,000
6 - Go
Average Salary: $207,840
Median Salary: $205,000
Maximum Salary: $390,000
7 - Kotlin
Average Salary: $205,492
Median Salary: $200,000
Maximum Salary: $380,000
8 - Haskell
Average Salary: $202,678
Median Salary: $201,000
Maximum Salary: $375,000
9 - Clojure
Average Salary: $201,444
Median Salary: $200,000
Maximum Salary: $370,000
10 - Spark
Average Salary: $198,765
Median Salary: $197,500
Maximum Salary: $365,000
❗️این لیست ۱۰ مهارت واقعاً منو شگفتزده کرد! در صدر این لیست Verilog قرار داره، زبانی که شاید خیلی از ما برنامهنویسها حتی اسمش رو نشنیده باشیم. این یه زبان توصیف سختافزار (HDL) هست که بیشتر در صنعت تولید چیپ و مخصوصاً توی آمریکا استفاده میشه. با اینکه تعداد فرصتهای شغلی Verilog خیلی کمتر از Python یا Java هست، ولی حقوق بالایی داره که نشون میده تقاضا برای این مهارت از عرضه بیشتره.
‼️ بجز Verilog، بیشتر مهارتهایی که بالاترین حقوق رو دارن مربوط به تحلیل داده و یادگیری ماشین هستن. این نشون میده که بازار هوش مصنوعی چقدر داغه! اگه دنبال یادگیری یه مهارت جدید برای افزایش ارزش خودت توی بازار کار هستی، این لیست میتونه یه راهنمای عالی باشه.
🔵<CodeHub/>
👍6🔥2
تو دنیای سریعِ برنامهنویسی، اگه پیشرفت نکنی، یعنی داری عقب میمونی! تکنولوژیها با سرعت عجیبی تغییر میکنن و کسایی که خودشونو بهروز نگه میدارن، کلی سود میبرن، اما اونایی که جا میمونن، خیلی زود از دور خارج میشن.
‼️رایجترین اشتباهاتی که باعث عقبموندن برنامهنویسا میشن :
1️⃣ انتقاد پذیر نیستن و فیدبک هارو قبول ندارن.
2️⃣ اونا سوال نمیپرسن!
3️⃣ از مشکلات سخت دوری میکنن!
4️⃣ اونا هیچ وقت روی پروژههای شخصی خودشون کار نمیکنن!
5️⃣ اونا هیچ وقت نقش یا شرکتشونو تغییر نمیدن!
6️⃣ سعی برای یادگیری بقیه حوزه ها ندارن!
🔵 </CodeHub>
‼️رایجترین اشتباهاتی که باعث عقبموندن برنامهنویسا میشن :
1️⃣ انتقاد پذیر نیستن و فیدبک هارو قبول ندارن.
- بدون شک، فیدبک سازنده یکی از مهمترین چیزاییه که باعث پیشرفت برنامهنویسا میشه و مهارتاشونو ارتقا میده.
- فیدبک باید حداقل یه تغییر کوچیک تو شیوه کدنویسی و مهندسی تو ایجاد کنه.
- اول از همه، اگه سوالی داری، بپرس! اگه با فیدبک مخالفی یا درست متوجهش نشدی، حتماً در موردش سوال کن. اگه واقعاً درکش نکنی یا بهش اعتقاد نداشته باشی، نمیتونی درست ازش استفاده کنی. پس تسلیم نشو و از کدت دفاع کن!
- به بقیه منتقلش کن! این یکی خیلی سادست؛ بهترین راه یادگیری، یاد دادنه.
2️⃣ اونا سوال نمیپرسن!
- اگه نمیدونی، بپرس! به این فکر نکن که "نکنه دارم وقت اون برنامهنویس رو میگیرم؟" یا "نکنه سؤالم احمقانه به نظر بیاد؟" چون وقتی واقعاً به اون اطلاعات نیاز پیدا کنی و بلد نباشی، خیلی بدتر به نظر میرسه!
3️⃣ از مشکلات سخت دوری میکنن!
- دیدم که بعضی از برنامهنویسا فقط میرن سراغ کارهای آسون و هیچ وقت جرات نمیکنن مشکلات سخت رو حل کنن. ولی این مشکلات سخت همونهایی هستن که بیشترین یادگیری رو برات دارن. اینا تو رو وادار میکنن که متفاوت فکر کنی و تکنولوژیهای جدید رو برای حلشون امتحان کنی. اگه فقط همین مشکلات ساده رو حل کنی، تضمین میکنم که به عنوان یه برنامهنویس عقب میمونی.
4️⃣ اونا هیچ وقت روی پروژههای شخصی خودشون کار نمیکنن!
- هر برنامهنویسی باید سعی کنه پروژههای خودش رو بسازه.دلیل اصلی این کار اینه که هیچ راه بهتری برای بهدست آوردن درک کامل از سیستمها وجود نداره.
- میتونی خلاهای دانشت رو پر کنی و چیزایی مثل طراحی سیستمها، مدیریت محصول، ادغامها، احراز هویت، DevOps و غیره رو یاد بگیری.
5️⃣ اونا هیچ وقت نقش یا شرکتشونو تغییر نمیدن!
وقتی نقش خودتو تغییر میدی یا شرکتت رو عوض میکنی، چندتا اتفاق میافته:
- با همتیمیهای جدیدی آشنا میشی که میتونن چیزای جدیدی بهت یاد بدن.
- روی وظایف جدیدی کار میکنی که مجبور میشی متفاوت فکر کنی.
- با تکنولوژیهای مختلف کار میکنی که باعث میشه مهارتهای بیشتری پیدا کنی و رزومهات رو برای فرصتهای آینده غنیتر کنی.
6️⃣ سعی برای یادگیری بقیه حوزه ها ندارن!
- این ممکنه برای خیلی از برنامهنویسا عجیب باشه، مخصوصاً اونا که اصرار دارن زبان برنامهنویسی خودشون بهترینه!. حقیقت اینه که یاد گرفتن و تمرین زبانهای مختلف، ارزش زیادی داره. در نهایت، زبان برنامهنویسی یه ابزار هست و باید بهترین ابزار رو برای کار انتخاب کنی. هیچ چیزی به اسم بهترین ابزار وجود نداره. برنامهنویسی که ابزارهای بیشتری داشته باشه، قابل تطبیقتر خواهد بود.
🔵 </CodeHub>
🔥4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
الگوریتم Quick Sort به زبون ساده! | یادگیری سریع و راحت 🚀
الگوریتم Quick Sort یکی از سریعترین الگوریتمهای مرتبسازیه که با روش "تقسیم و حل" کار میکنه! 🚀 توی این ویدیو یاد میگیری چطور دادهها رو با این الگوریتم بهینه و سریع مرتب کنی.
🔴 </CodeHub>
الگوریتم Quick Sort یکی از سریعترین الگوریتمهای مرتبسازیه که با روش "تقسیم و حل" کار میکنه! 🚀 توی این ویدیو یاد میگیری چطور دادهها رو با این الگوریتم بهینه و سریع مرتب کنی.
🔴 </CodeHub>
👍2🔥1
Forwarded from DevTwitter | توییت برنامه نویسی
This media is not supported in your browser
VIEW IN TELEGRAM
اینو دیدم برام جالب بود گفتم شما هم ببینید...
پرامپتی که نوشته بودن:
"یک برنامهی پایتون بنویسید که یک توپ را نشان دهد که درون یک ششضلعی در حال چرخش میجهد. توپ باید تحت تأثیر گرانش و اصطکاک باشد و هنگام برخورد با دیوارهای در حال چرخش بهطور واقعگرایانهای بازتاب کند."
@DevTwitter | <Sam92/>
پرامپتی که نوشته بودن:
"یک برنامهی پایتون بنویسید که یک توپ را نشان دهد که درون یک ششضلعی در حال چرخش میجهد. توپ باید تحت تأثیر گرانش و اصطکاک باشد و هنگام برخورد با دیوارهای در حال چرخش بهطور واقعگرایانهای بازتاب کند."
@DevTwitter | <Sam92/>
😁2
15 پروژه اوپن سورسی که باید حتما بوکمارک داشته باشی:
1 - Frappe — Build Scalable Web Apps 🔧
2 - Permit.io — Simplified Access Control 🔒
3 - cal.com — Open-Source Scheduling Tool 🗓⌚️
4 - Screenshot-to-Code — Design to Frontend Code 🎨🔄
5. Sourcebot — Advanced Code Search 🎮⚡️
6. Mockoon — Local Mock APIs 🎮🚫
7. Plane — Simplified Agile Management ✈️
8. Activepieces — Low-Code Workflow Automation ⚙️⌛️
9. DevPod — Collaborative Dev Environments 🤖⚖️
10. SurrealDB — All-in-One Database 📊🌐
11. WunderGraph — API Workflow Optimizer 🔄🎡
12. Keep — Centralized Alert Management 🛎🌐
13. Akto — API Security Simplified ⚠️🔐
14. Podman Desktop — Simplified Container Management 🌬
15. Discourse — Modern Community Platform 🔗🌐
📚Source : LINK
🔵 </CodeHub>
1 - Frappe — Build Scalable Web Apps 🔧
2 - Permit.io — Simplified Access Control 🔒
3 - cal.com — Open-Source Scheduling Tool 🗓⌚️
4 - Screenshot-to-Code — Design to Frontend Code 🎨🔄
5. Sourcebot — Advanced Code Search 🎮⚡️
6. Mockoon — Local Mock APIs 🎮🚫
7. Plane — Simplified Agile Management ✈️
8. Activepieces — Low-Code Workflow Automation ⚙️⌛️
9. DevPod — Collaborative Dev Environments 🤖⚖️
10. SurrealDB — All-in-One Database 📊🌐
11. WunderGraph — API Workflow Optimizer 🔄🎡
12. Keep — Centralized Alert Management 🛎🌐
13. Akto — API Security Simplified ⚠️🔐
14. Podman Desktop — Simplified Container Management 🌬
15. Discourse — Modern Community Platform 🔗🌐
📚Source : LINK
🔵 </CodeHub>
👍2