چند وقت پیش در یکی از پروژههایی که با Next.js توسعه میدادم، نیاز به یک loading bar داشتم تا هنگام navigation نمایش داده بشه.
چند پکیج رو امتحان کردم، اما تقریبا همهشون یکی از این مشکلات رو داشتن:
- خیلی از پکیجها با App Router بهخوبی کار نمیکردند
- با دکمههای back/forward مرورگر کار نمیکردند
- امکان نمایش UI سفارشی به عنوان loading هنگام navigation وجود نداشت
برای همین تصمیم گرفتم یک پکیج سبک، قابل سفارشی سازی و سازگار با App Router و Pages Router توسعه بدم:
ابزار nextjs-progress
چند قابلیت کلیدی:
- پشتیبانی کامل از App Router و Pages Router
- پشتیبانی از TypeScript و JavaScript
- امکان نمایش UI سفارشی به جای progress bar
- تشخیص back/forward مرورگر
- و Link و useRouter اختصاصی
- و useProgress برای کنترل دستی
اگر از Next.js استفاده میکنی و دنبال یک راهحل پایدار برای نمایش loading هنگام navigation هستی تا تجربه کاربری رو بهبود ببخشی، این پکیج دقیقا برای همین ساخته شده.
https://github.com/thehadikarimi/nextjs-progress
https://www.npmjs.com/package/nextjs-progress
✦ 💻 @programming_codiing
چند پکیج رو امتحان کردم، اما تقریبا همهشون یکی از این مشکلات رو داشتن:
- خیلی از پکیجها با App Router بهخوبی کار نمیکردند
- با دکمههای back/forward مرورگر کار نمیکردند
- امکان نمایش UI سفارشی به عنوان loading هنگام navigation وجود نداشت
برای همین تصمیم گرفتم یک پکیج سبک، قابل سفارشی سازی و سازگار با App Router و Pages Router توسعه بدم:
ابزار nextjs-progress
چند قابلیت کلیدی:
- پشتیبانی کامل از App Router و Pages Router
- پشتیبانی از TypeScript و JavaScript
- امکان نمایش UI سفارشی به جای progress bar
- تشخیص back/forward مرورگر
- و Link و useRouter اختصاصی
- و useProgress برای کنترل دستی
اگر از Next.js استفاده میکنی و دنبال یک راهحل پایدار برای نمایش loading هنگام navigation هستی تا تجربه کاربری رو بهبود ببخشی، این پکیج دقیقا برای همین ساخته شده.
https://github.com/thehadikarimi/nextjs-progress
https://www.npmjs.com/package/nextjs-progress
✦ 💻 @programming_codiing
🔥2❤1
🖥 معنی حروف آخر در اسم پردازندهها چیه؟
🧠 آخر اسم پردازندهها (مثل i7-12700K) فقط یه حرف نیست،
حرف آخر دقیقاً میگه پردازنده برای چه کاری ساخته شده!
تو پست بعدی، یه نگاه کامل و سریع میندازیم به این حروف برای Intel و AMD 👇
✔️ پردازندههای Intel:
📎 خلاصهش اینکه: فقط عدد پردازنده مهم نیست
✦ 💻 @programming_codiing
🧠 آخر اسم پردازندهها (مثل i7-12700K) فقط یه حرف نیست،
حرف آخر دقیقاً میگه پردازنده برای چه کاری ساخته شده!
تو پست بعدی، یه نگاه کامل و سریع میندازیم به این حروف برای Intel و AMD 👇
✔️ پردازندههای Intel:
📎 خلاصهش اینکه: فقط عدد پردازنده مهم نیست
✦ 💻 @programming_codiing
🔥2
</ MoDev >
تو پست بعدی، یه نگاه کامل و سریع میندازیم
🔸 K → قابل اورکلاک
🎯 مخصوص گیمینگ و رندرینگ حرفهای
🔸 KF → قابل اورکلاک، اما بدون گرافیک داخلی
🎯 مناسب گیمینگ و کارهای سنگین با کارت گرافیک جدا
🔸 F → بدون گرافیک داخلی
🎯 برای سیستمهایی که کارت گرافیک مجزا دارن
🔸 T → کممصرف
🎯 مناسب اداری، خانگی، مصرف پایین
🔸 H → مخصوص لپتاپهای گیمینگ
🎯 مناسب بازی و طراحی گرافیکی سنگین
🔸 HK → H + قابلیت اورکلاک
🎯 گیمینگ حرفهای تو لپتاپ
🔸 U → کممصرف، اولترابوک
🎯 مناسب کارای روزمره، سبک، دانشجویی
🔸 X / XE → ردهبالا و حرفهای
🎯 برای تولید محتوا، رندر سنگین، پروژههای صنعتی
✔️ پردازندههای AMD:
🔸 X → فرکانس و قدرت بیشتر
🎯 برای گیمرها و رندرینگ
🔸 XT → نسخه بهینهشده X
🎯 اجرای سنگینتر، بهتر از مدلهای X
🔸 G → دارای گرافیک داخلی
🎯 مناسب کارای روزمره، گیم سبک، طراحی ساده
🔸 H → مخصوص لپتاپ گیمینگ
🎯 مناسب بازی و طراحی سنگین
🔸 HS → نسخه کممصرفتر H
🎯 گیمینگ با مصرف برق پایینتر
🔸 U → کممصرف، مخصوص لپتاپ
🎯 تماشای فیلم، تایپ، آموزش، عمومی
🔸 PRO → مدلهای تجاری
🎯 مناسب امنیت، برنامهنویسی، شرکتها و
سرورها
✦ 💻 @programming_codiing
🔥3❤1
</ MoDev >
36 سریال پیشنهادی برای تماشا به همراه نمرات IMDb ' گفتم شاید خوشتون بیاد از نوع پست ها ' ✦ 💻 @programming_codiing
بازم از این چیزا بزارم ؟ ❤️ || 👎🏻
یه ری اکشن که زمانی نمی گیره ازتون
❤8👍2👎1
</ MoDev >
بازم از این چیزا بزارم ؟ ❤️ || 👎🏻 یه ری اکشن که زمانی نمی گیره ازتون
چه حرف گوش کن یه ری اکشن بودا 🙂↔️
😁3❤1
مقایسه جامع GitLab و GitHub و Git
یه توضیح کوتاه و جامع برای سه ابزار قدرتمند در دنیای توسعه نرمافزار هاا
✦ 💻 @programming_codiing
یه توضیح کوتاه و جامع برای سه ابزار قدرتمند در دنیای توسعه نرمافزار هاا
✦ 💻 @programming_codiing
❤4
برین کتاب چگونه کمال گرا نباشیم رو بخونین خیلی از برنامهنویس ها دچارشن
من که نابود شدم , باید برم بخونم.
✦ 💻 @programming_codiing
من که نابود شدم , باید برم بخونم.
یک فرد با کاراکتر کمالگرایی (perfectionism) صد نفر رو در یک نفر زندگی میکنه! یعنی میزان توقعاتی که از خودش و توانمندیهاش داره، چند برابر یک آدم عادیه
به خاطر همین همیشه ناآروم و مضطربه!
چه رنجی میکشه کسی که کمالگراست...
✦ 💻 @programming_codiing
👍7
مواردی که در راستای امنیت Api باید بلد باشید:
📎 https://roadmap.sh/api-security-best-practices
✦ 💻 @programming_codiing
📎 https://roadmap.sh/api-security-best-practices
✦ 💻 @programming_codiing
❤1
‼️ یه اپی معرفی کنم که مجبورت میکنه بیدار بشی...!
▪️اگه از اون دسته از آدمایی هستی که خوابت به شدت سنگینه پیشنهاد میکنم یه بار برنامه QR Alarm رو نصب کنی ... چرا؟!
▪️چون آلارم کوک میکنی بعد واسه قطع شدن آلارم باید یه QR کد مشخص رو اسکن کنی ، مثلا QR روی پاکت شیر ، یا اصلا یه QR پرینت بگیر بذار بیرون از خونه که قشنگ خواب از سرت بپره
🅿️ Download From Play Store
✦ 💻 @programming_codiing
▪️اگه از اون دسته از آدمایی هستی که خوابت به شدت سنگینه پیشنهاد میکنم یه بار برنامه QR Alarm رو نصب کنی ... چرا؟!
▪️چون آلارم کوک میکنی بعد واسه قطع شدن آلارم باید یه QR کد مشخص رو اسکن کنی ، مثلا QR روی پاکت شیر ، یا اصلا یه QR پرینت بگیر بذار بیرون از خونه که قشنگ خواب از سرت بپره
🅿️ Download From Play Store
✦ 💻 @programming_codiing
🤣4❤1
یه ابزار باحال آنلاین که یه عکس میدی بهش، بهت گرادینت میده با کلی تنظیمات.
برای وقتایی که دنبال یه بکگراند یا پلت رنگی هماهنگ با یه تصویری، عالیه.
تو مرورگر کار میکنه و رایگانه
http://photogradient.com
✦ 💻 @programming_codiing
برای وقتایی که دنبال یه بکگراند یا پلت رنگی هماهنگ با یه تصویری، عالیه.
تو مرورگر کار میکنه و رایگانه
http://photogradient.com
✦ 💻 @programming_codiing
❤3
این سایت اومده یسری سوال چالشی و مصاحبهای از Css و Js رو به صورت سطحبندیشده و همراه با جواب تشریحی گذاشته که اگه در حال یادگیری هستین خیلی میتونه واسه درک بهتر کمکتون کنه:
⚡️ https://30secondsofinterviews.org
✦ 💻 @programming_codiing
⚡️ https://30secondsofinterviews.org
✦ 💻 @programming_codiing
❤4🔥1
تست رسپانسیو وبسایت، در همه اندازه ها🔥
برنامه LT Browser، یک ابزار تست نمایشگر وب هست که به دولوپرا کمک میکنه، تا طراحی وبسایتهای خودشون رو بر روی انواع دستگاهها و اندازههای صفحه نمایش، تست کنند. این برنامه امکان تست ریسپانسیو و تطابق وبسایت با دستگاههای مختلف از جمله تلفن همراه، تبلت و کامپیوتر رو فراهم میکنه 📱
می تونید از افزونه هایی هم استفاده کنید در مرورگر خود که این بنظرم افزونه بهتره.
Download 🌐
✦ 💻 @programming_codiing
برنامه LT Browser، یک ابزار تست نمایشگر وب هست که به دولوپرا کمک میکنه، تا طراحی وبسایتهای خودشون رو بر روی انواع دستگاهها و اندازههای صفحه نمایش، تست کنند. این برنامه امکان تست ریسپانسیو و تطابق وبسایت با دستگاههای مختلف از جمله تلفن همراه، تبلت و کامپیوتر رو فراهم میکنه 📱
می تونید از افزونه هایی هم استفاده کنید در مرورگر خود که این بنظرم افزونه بهتره.
Download 🌐
✦ 💻 @programming_codiing
👍2🔥1
۱۸ سایت کاربردی برای پیدا کردن شغل ریموت و کسب درآمد دلاری 🌎
1. dice.com
2. remote.co
3. devsnap.io
4. remotive.io
5. remoteok.com
6. flexjobs.com
7. upwork.com
8. whoishiring.io
9. justremote.co
10. remotefront.io
11. wellfound.com
12. powertofly.com
13. skipthedrive.com
14. authenticjobs.com
15. weworkremotely.com
16. jobspresso.co
17. remotework.io
18. hired.com
19 - linkedIn.com
✦ 💻 @programming_codiing
اگه قصد داری با شرکتهای خارجی همکاری کنی یا به دنبال فرصتهای شغلی بینالمللی هستی، این وبسایتها میتونن نقطه شروع خوبی باشن:
1. dice.com
2. remote.co
3. devsnap.io
4. remotive.io
5. remoteok.com
6. flexjobs.com
7. upwork.com
8. whoishiring.io
9. justremote.co
10. remotefront.io
11. wellfound.com
12. powertofly.com
13. skipthedrive.com
14. authenticjobs.com
15. weworkremotely.com
16. jobspresso.co
17. remotework.io
18. hired.com
19 - linkedIn.com
✦ 💻 @programming_codiing
❤4
جعبه ابزار برای فرانت اند کارا 👀
🔹️ یه سایت کاربردی و متنباز برای فرانتاند دولوپر ها پیدا کردیم که کلی ابزار مفید مثل ساخت گرادینت، تولید داده تستی، فشردهسازی SVG، و تبدیل CSS به JSX رو یکجا جمع کرده. طراحی ساده، بدون تبلیغ، و قابل استفاده مستقیم تو مرورگر 🔥
⚡️ omatsuri.app
✦ 💻 @programming_codiing
🔹️ یه سایت کاربردی و متنباز برای فرانتاند دولوپر ها پیدا کردیم که کلی ابزار مفید مثل ساخت گرادینت، تولید داده تستی، فشردهسازی SVG، و تبدیل CSS به JSX رو یکجا جمع کرده. طراحی ساده، بدون تبلیغ، و قابل استفاده مستقیم تو مرورگر 🔥
⚡️ omatsuri.app
✦ 💻 @programming_codiing
❤3👏1
چه آینده ای در انتظار Typescript هست ؟
تایپاسکریپت 5.8.2 آخرین نسخه رسمی که تا امروز (13 مارس 2025) منتشر شده، که در 27 فوریه 2025 اومده. این نسخه بیشتر روی بهبودهای کوچک و رفع مشکلات تمرکز داشته و چیز خیلی عجیب و غریبی توش نیست. طبق اعلام تیم تایپاسکریپت توی وبلاگ رسمیشون، چندتا تغییر اصلی داشته:
بهبود type checking ها: مثلاً بررسی دقیقتر تایپ هایی که توی شرطها برمیگردن یا وقتی به یه چیزی با ایندکس دسترسی پیدا میکنی.
پشتیبانی بهتر از ابزارهای ویرایشگر : مثل مرتب کردن importها بدون توجه به بزرگ یا کوچیک بودن حروف، که با بقیه ابزارها بهتر جور دربیاد.
رفع اشکالات: یه سری باگهای نسخههای آزمایشی رو درست کردن.
این نسخه بیشتر یه بهروزرسانی معمولی بود و برای اکثر برنامهنویسها تغییر بزرگی توی کارشون ایجاد نکرد، مگر اینکه از یه سری ویژگی خاص استفاده میکردن که حالا دقیقتر شده.
حالا خبر بزرگ : تایپاسکریپت 7.0 با زبان Go
حالا بریم سراغ چیزی که همه رو توی شبکههای اجتماعی و جاهای دیگه هیجانزده کرده. طبق پستهایی که توی X دیدم و یه اعلامیه که ظاهراً 11 مارس 2025 توی وبلاگ تایپاسکریپت منتشر شده، تیم مایکروسافت داره روی یه نسخه کاملاً جدید کار میکنه که با زبان Go بازنویسی شده. یعنی کمپایلر تایپاسکریپت که الان با خودش نوشته شده و به جاوااسکریپت تبدیل میشه، قراره به یه برنامه مستقل و سریع با Go تبدیل بشه.
چرا Go رو انتخاب کردن؟
سرعت: توی پستهای X گفته شده که تستهای اولیه نشون میده این نسخه تا 10 برابر سریعتر از نسخه الان کار میکنه. مثلاً توی پروژههای بزرگ مثل VS Code که از سرور تایپاسکریپت (tsserver) زیاد استفاده میکنه، این سرعت میتونه کار رو خیلی راحتتر کنه.
کارایی: Go یه زبان کامپایلشدهست و خیلی بهینهتر از جاوااسکریپت اجرا میشه، مخصوصاً برای کارای سنگین مثل بررسی نوعها توی پروژههای بزرگ.
چیا قراره عوض بشه ؟
پرفورمنس بهتر : اگه این 10 برابر سریعتر بودن واقعی باشه، برای پروژههای بزرگ که الان بررسی نوعهاشون گاهی چند ثانیه یا حتی چند دقیقه طول میکشه، یه تغییر بزرگه.
سرور سریعتر: چون VS Code و خیلی از ویرایشگرها از tsserver برای تحلیل کد استفاده میکنن، این میتونه تجربه برنامهنویسی رو خیلی بهتر کنه.
هنوز معلوم نیست این تغییر به Go روی خود زبان (مثل دستورات یا ویژگیها) اثر میذاره یا فقط کمپایلر رو عوض میکنه
✦ 💻 @programming_codiing
تایپاسکریپت 5.8.2 آخرین نسخه رسمی که تا امروز (13 مارس 2025) منتشر شده، که در 27 فوریه 2025 اومده. این نسخه بیشتر روی بهبودهای کوچک و رفع مشکلات تمرکز داشته و چیز خیلی عجیب و غریبی توش نیست. طبق اعلام تیم تایپاسکریپت توی وبلاگ رسمیشون، چندتا تغییر اصلی داشته:
بهبود type checking ها: مثلاً بررسی دقیقتر تایپ هایی که توی شرطها برمیگردن یا وقتی به یه چیزی با ایندکس دسترسی پیدا میکنی.
پشتیبانی بهتر از ابزارهای ویرایشگر : مثل مرتب کردن importها بدون توجه به بزرگ یا کوچیک بودن حروف، که با بقیه ابزارها بهتر جور دربیاد.
رفع اشکالات: یه سری باگهای نسخههای آزمایشی رو درست کردن.
این نسخه بیشتر یه بهروزرسانی معمولی بود و برای اکثر برنامهنویسها تغییر بزرگی توی کارشون ایجاد نکرد، مگر اینکه از یه سری ویژگی خاص استفاده میکردن که حالا دقیقتر شده.
حالا خبر بزرگ : تایپاسکریپت 7.0 با زبان Go
حالا بریم سراغ چیزی که همه رو توی شبکههای اجتماعی و جاهای دیگه هیجانزده کرده. طبق پستهایی که توی X دیدم و یه اعلامیه که ظاهراً 11 مارس 2025 توی وبلاگ تایپاسکریپت منتشر شده، تیم مایکروسافت داره روی یه نسخه کاملاً جدید کار میکنه که با زبان Go بازنویسی شده. یعنی کمپایلر تایپاسکریپت که الان با خودش نوشته شده و به جاوااسکریپت تبدیل میشه، قراره به یه برنامه مستقل و سریع با Go تبدیل بشه.
چرا Go رو انتخاب کردن؟
سرعت: توی پستهای X گفته شده که تستهای اولیه نشون میده این نسخه تا 10 برابر سریعتر از نسخه الان کار میکنه. مثلاً توی پروژههای بزرگ مثل VS Code که از سرور تایپاسکریپت (tsserver) زیاد استفاده میکنه، این سرعت میتونه کار رو خیلی راحتتر کنه.
کارایی: Go یه زبان کامپایلشدهست و خیلی بهینهتر از جاوااسکریپت اجرا میشه، مخصوصاً برای کارای سنگین مثل بررسی نوعها توی پروژههای بزرگ.
چیا قراره عوض بشه ؟
پرفورمنس بهتر : اگه این 10 برابر سریعتر بودن واقعی باشه، برای پروژههای بزرگ که الان بررسی نوعهاشون گاهی چند ثانیه یا حتی چند دقیقه طول میکشه، یه تغییر بزرگه.
سرور سریعتر: چون VS Code و خیلی از ویرایشگرها از tsserver برای تحلیل کد استفاده میکنن، این میتونه تجربه برنامهنویسی رو خیلی بهتر کنه.
هنوز معلوم نیست این تغییر به Go روی خود زبان (مثل دستورات یا ویژگیها) اثر میذاره یا فقط کمپایلر رو عوض میکنه
✦ 💻 @programming_codiing
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
🌐 آدرس IP دقیقاً چیه و چه مدلهایی داره؟
اگر تا حالا اسم IPv4 ،IPv6 یا IP عمومی و خصوصی رو شنیدی ولی دقیق نمیدونستی فرقشون چیه، توی این آموزش با این مفهوم آشنا می شی و یاد میگیری چرا شناخت ip برای شبکه و اینترنت مهمه
✦ 💻 @programming_codiing
اگر تا حالا اسم IPv4 ،IPv6 یا IP عمومی و خصوصی رو شنیدی ولی دقیق نمیدونستی فرقشون چیه، توی این آموزش با این مفهوم آشنا می شی و یاد میگیری چرا شناخت ip برای شبکه و اینترنت مهمه
✦ 💻 @programming_codiing
❤1
</ MoDev >
⚡️ سایتهای خوب برای الهام گرفتن توی دیزاین Web Design http://curated.design Landing Pages http://landing.love SaaS Websites http://saaspo.com Navbar Inspiration http://navbar.gallery CTA Sections http://cta.gallery Mobile App Design http://mobbin.com…
+
به غیر از سایت های بالایی☝🏻 و سایت هایی مثل پینترست و فیگما
می تونید برای ایدده گرفتن سرچ کنید مثلا قالب آماده سایت فروشگاهی لباس
خیلی سایت براتون بالا میاد که مثلا سایت راست چین رو ببینید خیلی سایت های اماده داره که با ui خاصی زده شدن و زیبا هستن .
حالا درسته خیلی هاشون قالب اماده وردپرس هست ولی شما که فقط برای ایده گرفتن از ui می بینید و این فرقی نداره که وردپرسی باشه نباشه.
یا می تونید سایتی که می زنید رو هم سایت هایی با موضوع سایت خودتون سرچ کنید و اونا هم برسی کنید که این خیلی پیشنهاد نمی شه.
به غیر از سایت های بالایی☝🏻 و سایت هایی مثل پینترست و فیگما
می تونید برای ایدده گرفتن سرچ کنید مثلا قالب آماده سایت فروشگاهی لباس
خیلی سایت براتون بالا میاد که مثلا سایت راست چین رو ببینید خیلی سایت های اماده داره که با ui خاصی زده شدن و زیبا هستن .
حالا درسته خیلی هاشون قالب اماده وردپرس هست ولی شما که فقط برای ایده گرفتن از ui می بینید و این فرقی نداره که وردپرسی باشه نباشه.
یا می تونید سایتی که می زنید رو هم سایت هایی با موضوع سایت خودتون سرچ کنید و اونا هم برسی کنید که این خیلی پیشنهاد نمی شه.
❤1