اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀
(طرح رسپانسیوش هم موجوده)
💎 Link
#figma
@CodeModule
(طرح رسپانسیوش هم موجوده)
💎 Link
#figma
@CodeModule
👌5🔥1
دائم دنبال api هستی و پیدا نمیکنی؟ 🕷
توی این پست ۲ api مارکت خاص بهتون معرفی میکنم که واسه هر چیزی که فکر کنید، api دارن. از دیجی کالا و آشپزی و ... بگیر تا هوش مصنوعی !!
▫️https://apieco.ir/
▫️https://one-api.ir/
#api
@CodeModule
توی این پست ۲ api مارکت خاص بهتون معرفی میکنم که واسه هر چیزی که فکر کنید، api دارن. از دیجی کالا و آشپزی و ... بگیر تا هوش مصنوعی !!
▫️https://apieco.ir/
▫️https://one-api.ir/
#api
@CodeModule
🔥7
دنبال نمونه پروژه برای تمرینی؟ 💥
ریپازیتوری 50projects50days مجموعهای از ۵۰ پروژهی کوچیک و کاربردیه که به منظور تمرین و تقویت مهارتهای HTML، CSS و JavaScript طراحی شده. پیشنهاد میکنم حتما یه سر بزنید.
🔗 Repository
#repository
@CodeModule
ریپازیتوری 50projects50days مجموعهای از ۵۰ پروژهی کوچیک و کاربردیه که به منظور تمرین و تقویت مهارتهای HTML، CSS و JavaScript طراحی شده. پیشنهاد میکنم حتما یه سر بزنید.
🔗 Repository
#repository
@CodeModule
GitHub
GitHub - bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS
50+ mini web projects using HTML, CSS & JS. Contribute to bradtraversy/50projects50days development by creating an account on GitHub.
داکیومنتهای مورد نیازت رو آفلاین همراهت داشته باش! 💻
فرقی نمیکنه مشغول چه حوزهای هستی، این ابزارها در زمان قطعی اینترنت به فریادت میرسن.
📖 DevDocs
تقریباً هر چیزی که لازم داری رو یکجا جمع کرده؛ از JavaScript، TypeScript، React و Node.js گرفته تا CSS، HTML و دهها تکنولوژی دیگه. کافیه داکیومنتهای موردنیازت رو دانلود کنی تا هر زمان، حتی بدون اینترنت، به اونها دسترسی داشته باشی.
⚡️ Zeal
یکی از بهترین ابزارها برای دسترسی آفلاین به مستنداته. کافیه Docsetهای موردنیازت رو یکبار دانلود کنی؛ بعد از اون با یک جستجوی ساده، بدون نیاز به اینترنت به همه داکیومنتها دسترسی داری.
🔗 DevDocs
🔗 Zeal
#document
@CodeModule
فرقی نمیکنه مشغول چه حوزهای هستی، این ابزارها در زمان قطعی اینترنت به فریادت میرسن.
📖 DevDocs
تقریباً هر چیزی که لازم داری رو یکجا جمع کرده؛ از JavaScript، TypeScript، React و Node.js گرفته تا CSS، HTML و دهها تکنولوژی دیگه. کافیه داکیومنتهای موردنیازت رو دانلود کنی تا هر زمان، حتی بدون اینترنت، به اونها دسترسی داشته باشی.
⚡️ Zeal
یکی از بهترین ابزارها برای دسترسی آفلاین به مستنداته. کافیه Docsetهای موردنیازت رو یکبار دانلود کنی؛ بعد از اون با یک جستجوی ساده، بدون نیاز به اینترنت به همه داکیومنتها دسترسی داری.
🔗 DevDocs
🔗 Zeal
#document
@CodeModule
devdocs.io
DevDocs API Documentation
Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…
❤🔥6
با Nuqs بیشتر آشنا بشید 🕷
پکیج Nuqs یک کتابخونه برای مدیریت state از طریق query string در پروژه های React و فریمورکهایی مثل Next.js هست.
به زبان سادهتر: با Nuqs میتونید stateهایی مثل فیلترها، سرچ کاربر، پیجینیشن، یا هر متغیری رو که نیازه در URL نگه دارید و خیلی راحت و type-safe مدیریتشون کنید.
قابلیتهای مهم این پکیج
اگه از دست useSearchParams و useRouter خسته شدی، پکیج Nuqs دقیقاً همونه که دنبالش بودی.
🔗 Document
#nuqs
@CodeModule
پکیج Nuqs یک کتابخونه برای مدیریت state از طریق query string در پروژه های React و فریمورکهایی مثل Next.js هست.
به زبان سادهتر: با Nuqs میتونید stateهایی مثل فیلترها، سرچ کاربر، پیجینیشن، یا هر متغیری رو که نیازه در URL نگه دارید و خیلی راحت و type-safe مدیریتشون کنید.
قابلیتهای مهم این پکیج
💥 پشتیبانی از انواع داده (string number, boolean, date, array و ...)
💥 سازگاری کامل با App Router
💥 سینک خودکار بین state و URL
💥 سادهتر از useSearchParams
اگه از دست useSearchParams و useRouter خسته شدی، پکیج Nuqs دقیقاً همونه که دنبالش بودی.
🔗 Document
#nuqs
@CodeModule
🔥3
۱۳ سپتامبر یا ۲۵۶مین روز سال، به عنوان روز برنامهنویس شناخته میشه، اما چرا ۲۵۶؟
چون برای ما دولوپرها عدد خاصیه؛ ۲۵۶ برابر با 2⁸ هست و در دنیای باینری و کامپیوتر، ارتباط مستقیمی با ۸ بیت و یک بایت داره.
شاید همین عدد کوچیک، بهانهای باشه برای تبریک به آدمهایی که هر روز با کد، منطق و کلی باگ، چیزی میسازن.
روزتون مبارک ❤️🔥
آیندهی درخشانی برای تکتکتون آرزو میکنم 💙
@CodeModule
چون برای ما دولوپرها عدد خاصیه؛ ۲۵۶ برابر با 2⁸ هست و در دنیای باینری و کامپیوتر، ارتباط مستقیمی با ۸ بیت و یک بایت داره.
شاید همین عدد کوچیک، بهانهای باشه برای تبریک به آدمهایی که هر روز با کد، منطق و کلی باگ، چیزی میسازن.
روزتون مبارک ❤️🔥
آیندهی درخشانی برای تکتکتون آرزو میکنم 💙
@CodeModule
❤🔥15🔥2
دیگه وقتت رو برای نوشتن کاستوم هوکها هدر نده🩸
پکیج usehooks-ts مجموعهای از هوکهای آماده و کاربردی برای پروژههای ریکتی هست که خوشبختانه با تایپ اسکریپت هم سازگاره. در این مجموعه، هوک های مختلفی برای انواع کارها مانند مدیریت ایونتها، مدیریت لوکال استوریج، مدیریت تایمرها، دسترسی به اطلاعات مرورگر و ... پیدا میشه، که باعث سادهتر شدن کدنویسی، سرعت بیشتر و همچنین کاهش نیاز به نوشتن کد تکراری میشه.
🔗 Link
#react
@CodeModule
پکیج usehooks-ts مجموعهای از هوکهای آماده و کاربردی برای پروژههای ریکتی هست که خوشبختانه با تایپ اسکریپت هم سازگاره. در این مجموعه، هوک های مختلفی برای انواع کارها مانند مدیریت ایونتها، مدیریت لوکال استوریج، مدیریت تایمرها، دسترسی به اطلاعات مرورگر و ... پیدا میشه، که باعث سادهتر شدن کدنویسی، سرعت بیشتر و همچنین کاهش نیاز به نوشتن کد تکراری میشه.
🔗 Link
#react
@CodeModule
usehooks-ts
React hook library, ready to use, written in Typescript.
👌3
Forwarded from Persian GitHub
ربات GitHub Lens ساخته شد. 🎉
یه ربات کاربردی برای پیدا کردن، بررسی و استفاده راحتتر از پروژهها و ابزارهای گیتهاب.
از پیدا کردن پروژههای جدید و دیدن ترندهای گیتهاب گرفته تا جستجوی پروژهها، دستهبندی، مشاهده جزئیات و دانلود Release؛ همه رو میتونید از داخل ربات انجام بدید.
👉 🤖 @GitHubLensBot
برای کامیونیتی ساختیم؛ رایگان و با عشق ❤️
یه ربات کاربردی برای پیدا کردن، بررسی و استفاده راحتتر از پروژهها و ابزارهای گیتهاب.
از پیدا کردن پروژههای جدید و دیدن ترندهای گیتهاب گرفته تا جستجوی پروژهها، دستهبندی، مشاهده جزئیات و دانلود Release؛ همه رو میتونید از داخل ربات انجام بدید.
برای کامیونیتی ساختیم؛ رایگان و با عشق ❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
اگه بخواید یک نمونه کار فول استک رو انلاین کنید، حداقل ماهی ۱.۵ تا ۲ تومن هزینه زیر ساخت و نگهداریش رو دارید. سرویس دهنده های عزیز هم که ماهیانه دارن افزایش قیمت میدن.
یکجا رزومه فرستادم، گیر داد چرا سرعت یکی از پروژهها پایینه.
خب مردک تو اگه میدونستی سرویس دیتابیس پروژه روی رندوم ترین سایت با پلن free توی دور افتاده ترین قاره دیپلوی شده، راجع به این که چرا ریکوست ها اینقدر طول میکشه صحبت نمیکردی !!!
لطفا شل کن کارفرمای عزیز.
من نمیتونم ففط برای بالا بودن پروژه ها ماهی ۸ ۹ تومن هزینه کنم.
@CodeModule
یکجا رزومه فرستادم، گیر داد چرا سرعت یکی از پروژهها پایینه.
خب مردک تو اگه میدونستی سرویس دیتابیس پروژه روی رندوم ترین سایت با پلن free توی دور افتاده ترین قاره دیپلوی شده، راجع به این که چرا ریکوست ها اینقدر طول میکشه صحبت نمیکردی !!!
لطفا شل کن کارفرمای عزیز.
من نمیتونم ففط برای بالا بودن پروژه ها ماهی ۸ ۹ تومن هزینه کنم.
@CodeModule
👌25
وقتی نوشتن کد دیگه مزیت نیست! 🌪
با ظهور ایجنتهای مختلف مثل Claude Code، Codex و ابزارهای مشابه، نیاز شرکتها به نیروی انسانی داره کمتر میشه.
برای اینکه روی این موج سهمگین بتونیم شناور بمونیم و غرق نشیم، باید بدونیم ارزش یک دولوپر امروزی دقیقاً به چیه؟
قبلاً برای ساخت یک فیچر، بخش قابل توجهی از ارزش یک دولوپر به این بود که:
اما حالا با AI، نوشتن بخش زیادی از این کدها دیگه اونقدر سخت و زمانبر نیست.
پس سؤال داره تغییر میکنه.
اینجاست که تجربه واقعی هنوز ارزش خودش رو حفظ میکنه.
هوش مصنوعی میتونه در چند ثانیه کد تولید کنه، اما اینکه چه کدی باید تولید بشه، چرا باید اینطور ساخته بشه و آیا واقعاً انتخاب درستی بوده یا نه، همچنان نیازمند درک مسئله و قضاوت مهندسیه.
شاید در آینده، ارزش یک دولوپر کمتر به تعداد خطوط کدی که مینویسه وابسته باشه و بیشتر به تصمیمهایی هست که میگیره.
ما وارد دورهای شدیم که تعریف برنامهنویس داره تغییر میکنه.
حالا سؤال اینه:
ما هم قراره باهاش تغییر کنیم؟
@CodeModule
با ظهور ایجنتهای مختلف مثل Claude Code، Codex و ابزارهای مشابه، نیاز شرکتها به نیروی انسانی داره کمتر میشه.
برای اینکه روی این موج سهمگین بتونیم شناور بمونیم و غرق نشیم، باید بدونیم ارزش یک دولوپر امروزی دقیقاً به چیه؟
قبلاً برای ساخت یک فیچر، بخش قابل توجهی از ارزش یک دولوپر به این بود که:
چقدر سریع میتونه این فیچر رو کدنویسی کنه؟
اما حالا با AI، نوشتن بخش زیادی از این کدها دیگه اونقدر سخت و زمانبر نیست.
پس سؤال داره تغییر میکنه.
آیا این دولوپر درک میکنه چی باید ساخته بشه؟
آیا میتونه برای مسئله، معماری درست انتخاب کنه؟
آیا میفهمه پیشنهاد AI چه زمانی درسته و چه زمانی اشتباه؟
آیا میتونه خروجی AI رو Review و Debug کنه؟
آیا تفاوت بین کد تمیز و کد کثیف رو تشخیص میده؟
آیا میتونه وقتی سیستم در پروداکشن خراب شد، ریشه مشکل رو پیدا کنه؟
آیا میفهمه چه زمانی باید به AI اعتماد کنه و چه زمانی نباید؟
اینجاست که تجربه واقعی هنوز ارزش خودش رو حفظ میکنه.
هوش مصنوعی میتونه در چند ثانیه کد تولید کنه، اما اینکه چه کدی باید تولید بشه، چرا باید اینطور ساخته بشه و آیا واقعاً انتخاب درستی بوده یا نه، همچنان نیازمند درک مسئله و قضاوت مهندسیه.
شاید در آینده، ارزش یک دولوپر کمتر به تعداد خطوط کدی که مینویسه وابسته باشه و بیشتر به تصمیمهایی هست که میگیره.
ما وارد دورهای شدیم که تعریف برنامهنویس داره تغییر میکنه.
حالا سؤال اینه:
ما هم قراره باهاش تغییر کنیم؟
@CodeModule
1👌12💔2
Ky، رقیب سرسخت اکسیوس 🪖
اگه با Axios کار میکنید و پایه ثابت پروژه هاتون هست، قراره Ky هم برای شما بسیار جذاب باشه.
Ky یک HTTP Clientئه که بر پایهی Fetch API ساخته شده و از مرورگرهای مدرن، Bun، Node.js و Deno پشتیبانی میکنه.
اما چه تفاوتی با Fetch و Axios دارد؟
🔸 API سادهتر نسبت به Fetch
Ky سعی نمیکنه که یک سیستم کاملاً متفاوت از Fetch ایجاد کنه، بلکه همون ریکوست رو سادهتر و کاربردیتر میکنه.
در کنار API سادهتر، امکاناتی مثل Retry داخلی، Timeout، پشتیبانی بهتر از TypeScript و اعتبارسنجی Response با Schema رو هم ارائه میده..
🔸 هوک های کاربردی
Ky مجموعهای از Hookها رو در اختیار ما قرار میده:
با استفاده از این هوکها میتونیم قبل از ارسال ریکوست، هنگام Retry، قبل از ارور یا بعد از دریافت رسپانس، لاجیک موردنظر رو اضافه یا تغییر بدیم.
🔸 سبک و بدون Dependency
Ky حدود 9KB حجم داره و هیچ dependency خارجی نداره، در حالی که حجم Axios حدود 18.5KB هست.
در نهایت برنده میدان؟
هر دو هدفی مشترک، اما رویکرد متفاوتی دارن. Axios یک HTTP Client مستقل با API و امکانات خودش هست، در حالی که Ky به Fetch نزدیکتره و سعی میکنه تجربهی کار با Fetch رو ساده و کاملتر کنه. به همین دلیل برای انجام بعضی کارها نسبت به Axios به کد کمتری نیاز داره.
🔗 Document
#ky
@CodeModule
اگه با Axios کار میکنید و پایه ثابت پروژه هاتون هست، قراره Ky هم برای شما بسیار جذاب باشه.
Ky یک HTTP Clientئه که بر پایهی Fetch API ساخته شده و از مرورگرهای مدرن، Bun، Node.js و Deno پشتیبانی میکنه.
اما چه تفاوتی با Fetch و Axios دارد؟
🔸 API سادهتر نسبت به Fetch
Ky سعی نمیکنه که یک سیستم کاملاً متفاوت از Fetch ایجاد کنه، بلکه همون ریکوست رو سادهتر و کاربردیتر میکنه.
در کنار API سادهتر، امکاناتی مثل Retry داخلی، Timeout، پشتیبانی بهتر از TypeScript و اعتبارسنجی Response با Schema رو هم ارائه میده..
🔸 هوک های کاربردی
Ky مجموعهای از Hookها رو در اختیار ما قرار میده:
beforeRequestbeforeRetrybeforeErrorafterResponse
با استفاده از این هوکها میتونیم قبل از ارسال ریکوست، هنگام Retry، قبل از ارور یا بعد از دریافت رسپانس، لاجیک موردنظر رو اضافه یا تغییر بدیم.
🔸 سبک و بدون Dependency
Ky حدود 9KB حجم داره و هیچ dependency خارجی نداره، در حالی که حجم Axios حدود 18.5KB هست.
در نهایت برنده میدان؟
هر دو هدفی مشترک، اما رویکرد متفاوتی دارن. Axios یک HTTP Client مستقل با API و امکانات خودش هست، در حالی که Ky به Fetch نزدیکتره و سعی میکنه تجربهی کار با Fetch رو ساده و کاملتر کنه. به همین دلیل برای انجام بعضی کارها نسبت به Axios به کد کمتری نیاز داره.
🔗 Document
#ky
@CodeModule
🔥6💔1
رفتم مصاحبه کاری برای پوزیشن جونیور بکاند دولوپر.
کاری به نحوه مصاحبه و رفتار و هیچ چیزی ندارم، مسئله ای که بهش برخوردم حقوقه.
بنده قبل از این که بک اند دولوپر باشم، یه فرانت دولوپر باتجربه هستم.
رسیدیم به بخش شیرین حقوق و من مبلغ درخواستیم رو گفتم(مبلغ پایین تر از رنج تهران و حتی ارزشی که خودم خلق میکنم بود)
مصاحبه کننده قبول نمیکنه و میگه میدونی که تعداد اگهی کمه؟ در جواب از مهارت های خودم گفتم و برگشته میگه ما اینجا فقط بک اند دولوپر نیاز داریم.
حرفشون رو تایید کردم و گفتم باشه، اما تسک فرانت به من نمیدی یا سئو تکنیکال برای پروژه نیاز داشتی به من مربوط نیست.
من اینجا فقط یه بک اند دولوپر جونیور هستم.
قبول نکرد و گفت اره تو میخوای مثل کامپیوتر ۰ و ۱ بری جلو، ضربه بزنی به تیم و باید هر تسکی محول شد انجام بدی...
گفتم روی چشم، حقوقم رو اعلام کردم دیگه.
نپذیرفت.
سوال اینجاست، من باید به سازشون برقصم و بخشی از زحماتم رو ندید بگیرم، یا شرکتها باید از این مفتبری کردن دست بردارن؟
کاری به نحوه مصاحبه و رفتار و هیچ چیزی ندارم، مسئله ای که بهش برخوردم حقوقه.
بنده قبل از این که بک اند دولوپر باشم، یه فرانت دولوپر باتجربه هستم.
رسیدیم به بخش شیرین حقوق و من مبلغ درخواستیم رو گفتم(مبلغ پایین تر از رنج تهران و حتی ارزشی که خودم خلق میکنم بود)
مصاحبه کننده قبول نمیکنه و میگه میدونی که تعداد اگهی کمه؟ در جواب از مهارت های خودم گفتم و برگشته میگه ما اینجا فقط بک اند دولوپر نیاز داریم.
حرفشون رو تایید کردم و گفتم باشه، اما تسک فرانت به من نمیدی یا سئو تکنیکال برای پروژه نیاز داشتی به من مربوط نیست.
من اینجا فقط یه بک اند دولوپر جونیور هستم.
قبول نکرد و گفت اره تو میخوای مثل کامپیوتر ۰ و ۱ بری جلو، ضربه بزنی به تیم و باید هر تسکی محول شد انجام بدی...
گفتم روی چشم، حقوقم رو اعلام کردم دیگه.
نپذیرفت.
سوال اینجاست، من باید به سازشون برقصم و بخشی از زحماتم رو ندید بگیرم، یا شرکتها باید از این مفتبری کردن دست بردارن؟
👌20
با چند کلمه، یک پرامپت حرفهای بساز 🧩
اگه برای نوشتن پرامپتهای خوب همیشه مجبورید چندین دستور رو پشت سر هم بنویسید، این ابزار میتونه کارتون رو خیلی سادهتر کنه.
این ابزار یک Prompt Builder هست که عبارتهای کوتاه و ساده شما رو به پرامپتهای مفصل و دقیق تبدیل میکنه.
مثلاً بهجای اینکه بنویسید:
میتونید این متن رو به این ابزار بدید و خروجی زیر رو تحویل بگیرید 👇
🔗 site
#ai
@CodeModule
اگه برای نوشتن پرامپتهای خوب همیشه مجبورید چندین دستور رو پشت سر هم بنویسید، این ابزار میتونه کارتون رو خیلی سادهتر کنه.
این ابزار یک Prompt Builder هست که عبارتهای کوتاه و ساده شما رو به پرامپتهای مفصل و دقیق تبدیل میکنه.
مثلاً بهجای اینکه بنویسید:
یه کامپوننت لاگین با Next.js بساز، ریسپانسیو باشه، ولیدیشن داشته باشه، TypeScript باشه و کد تمیز بنویس.میتونید این متن رو به این ابزار بدید و خروجی زیر رو تحویل بگیرید 👇
یک کامپوننت Login برای Next.js بنویس که:
1. نیازمندیهای فنی:
- با TypeScript نوشته شود
- کاملاً ریسپانسیو باشد (موبایل، تبلت، دسکتاپ)
- حتما validation سمت کلاینت برای ایمیل و پسورد داشته باشد
- پیامهای خطا و موفقیت نشان دهد
2. ویژگیهای UX:
- فیلد ایمیل و پسورد
- دکمه ورود
- "رمز عبور را فراموش کردم" لینک
- "ثبتنام" لینک
- حالت loading حین ارسال
3. استانداردهای کد:
- کد تمیز و خوانا با naming واضح
- کامپوننت کوچک و قابل استفاده
- استفاده از React hooks
- استایلدهی با Tailwind CSS
- توضیحات برای بخشهای پیچیده
4. خروجی:
- کد کامل و آماده برای استفاده
ا - include کنید types/interfaces
🔗 site
#ai
@CodeModule
🔥3