Ditty | دیتی – Telegram
Ditty | دیتی
3.19K subscribers
194 photos
20 videos
4 files
387 links
دیتی | دنیای ساده‌شدهٔ برنامه‌نویسی وب
https://ditty.ir
Download Telegram
🔺وبسایت v0.app یک سرویس جدید از Vercel هست که می‌تونه نسبتاً دقیق پرامپت‌ها و عکس‌ها رو به کد تبدیل کنه. برای مثال ازش خواستم لینکدین رو بازطراحی کن و چنین چیزی توی کمتر از ۱ دقیقه تحویل داد:
https://v0.app/chat/linkedin-redesign-nh5RmyjyyZ1

- خیلی وقت پیش هم از تبدیل عکس به کد HTML اون استفاده کرده بودم و تقریباً دقیق بود

https://v0.app
👌15👍81
🔺تجربه‌ای از ۲۰۰+ مصاحبه کاری

توی ۳ سال گذشته اگه بگم بیشتر از ۲۰۰ تا مصاحبه کاری دادم کم نگفتم. از بین هزاران تجربه و نکتهٔ ریز و درشتی که بدست آوردم، اگه بخوام مهمترینش رو براتون به اشتراک بذارم اینه:

» کار کنید و تجربه واقعی و عملی بدست بیارید!

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

- ۸۰٪ دنیای کار امروز مربوط به سافت‌اسکیل هست! بله ۸۰ درصد! سافت اسکیل رو جایی به شما یاد نمیدن. حتی اگه ۱۰۰۰ ساعت کورس دربارش دیدم باشیم، اگه لمسش نکنیم یاد نمی‌گیریم

- گرچه توی حوزه کاری ما یادگیری خیلی موضوع مهمی هست، پیشنهاد من اینه که یادگیری رو حین کار عملی داشته باشین. اگه قصد آموزش دیدن از کتاب‌ها و کورس‌ها و ... رو دارین، به نظرم ۲۰٪ وقتتون رو برای چنین سبک یادگیری بذارین. چونکه یادگیری واقعی از تمرین‌ها و تجربه‌های عملی بدست میاد

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

- پروژه‌های عملی رو خیلی بزرگ در نظر نگیرید. مثلاً پیاده‌سازی یک فروشگاه اینترنتی با ۱۰۰ صفحه کار اشتباهی هست. بلکه سعی کنید چند پروژه خیلی کوچیک ولی متنوع پیاده‌سازی کنید. و اونها رو خیلی شیک و مرتب توی گیت‌هاب قرار بدین

- اگه به تازگی وارد این حوزه شدین (زیر ۵ سال تجربه دارین)، شرکت مناسب برای کار کردن جایی هست که بتونین تجربه کار عملی بدست بیارین. حقوق و مزایای مالی رو بعداً ۱۰۰ برابرش رو بهمون میدن اگه ارزشمند بشیم. توی هر حرفه‌ و شغلی که هستیم، اگه واقعاً قصد پیشرفت داریم به قول معروف باید خاک اون حوزه رو بخوریم.
👍6112🤔2🤣2
🔺برنامه‌نویسی = مهارت حل مسئله

- بعد از مدتی که دارم برای برنامه‌نویسی از ابزارهای معروف هوش مصنوعی (کوپایلوت، چت جی‌پی‌تی) استفاده می‌کنم، واقعاً دوست داشتم یک سری تجارب مهمی رو براتون به اشتراک بذارم

- اوایل که وارد دنیای مهندسی نرم‌افزار شدم، برای برنامه‌نویسی از ادیتور Notepad++ استفاده می‌کردم، و روی استفاده از اون پافشاری داشتم 😄 صرفاً یک ادیتور که بتونه کدها رو رنگی‌رنگی نشون بده برام کافی بود. یادمه بعضی از همکارا می‌گفتن که چرا از ادیتورهای پیشرفته‌تر استفاده نمی‌کنی که قابلیت‌هایی مثل Code suggestion و ... دارن. جواب من این بود که «الان نمی‌خوام»

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

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

- شاید مهم‌ترین مهارت برای یک برنامه‌نویس مهارت حل مسئله هست. حل مسئله یعنی بتونیم به‌راحتی دیباگ کنیم و الگوریتم‌های بهینه و کدهای تمیز و قابل توسعه بنویسم. اگه این مهارت‌ها تقویت بشه، هوش مصنوعی دوست ما خواهد بود و به عنوان یک ابزار به ما کمک می‌کنه بهره‌وری بیشتری داشته باشیم. اما برعکس اگه برای این مهارت‌های حیاتی وابستگی مطلق به چیزهای خارج از خودمون (مثل هوش مصنوعی) داشته باشیم، دیگه به ما نمیشه گفت برنامه‌نویس یا مهندس نرم‌افزار. و همون ابزار جایگزین ما خواهد شد

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

- ابزارهایی مثل Cursor و یا وابستگی بیش‌از اندازه به ChatGPT و Copilot برای کسانی که تازه‌کار هستن مثل تیشه به ریشه زدن هست. وقتی تازه‌کار هستیم و پروژه‌هامون رو می‌دیم به Cursor، به ChatGPT می‌گیم کد ما رو دیباگ کن، و Copilot ما همیشه وصله، دیگه چه انتظاری داریم به مفاهیم مهم برنامه‌نویسی و توسعه نرم‌افزار مسلط بشیم و به رده‌های بالای این حوزه برسیم؟

- توی پست‌های بعدی سعی می‌کنم راه‌هایی رو معرفی کنم که کمک می‌کنه مهارت‌های حل مسئله‌مون رو بهتر کنیم 🌹
👍66👏95👎32🔥2👌2🤷‍♂1
🔺می‌خواید مهارت‌های الگوریتم‌نویسی و حل مسئله‌تون رو توسعه بدید؟

- یه روش که خیلی مناسب هست و کمک می‌کنه به‌صورت کاربردی و آسون الگوریتم‌نویسی حرفه‌ای رو یاد بگیرین، اینه که خودتون توابع کاربردی (Utility Function) که کتابخونه‌هایی مثل Lodash و Laravel Collections ارائه میدن رو پیاده‌سازی کنین

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

- مهمه که از هوش مصنوعی استفاده نکنین و خودتون رو به چالش بکشید. وسواس نداشته باشید. فقط شروع کنید به نوشتن. لازم نیست عالی باشید. این موارد رو توی الگوریتم‌نویسی به خاطر داشته باشید: بهینه‌نویسی (Big O) و تمیز و خوانا نویسی

- می‌تونین یک ریپوی گیت‌هاب بسازین و کداتون رو اونجا قرار بدین

- با این کار حتی لازم نیست سراغ وبسایت‌های لیت‌کد و هکررنک و ... برید و مسائل پیچیدهٔ کوانتومی پیاده‌سازی کنید
31👍6👨‍💻3
۱۰۰ بار سریع‌تر از 𝗘𝗦𝗟𝗶𝗻𝘁 ؟! 😃

- واقعاً یکی از معضلات پروژه‌های بزرگ وقتیه که ابزارهایی مثل Linter و Formatter و روی اونها اجرا میشه

- جدیداً با توصیه Evan You (خالق Vue و Vite و …) با پروژه‌ای به اسم Oxc آشنا شدم که مجموعه‌ای از چند ابزار #جاوااسکریپتی هست که با زبان Rust نوشته شده و ادعا می‌کنه که سرعت و عملکرد فوق‌العادی در مقایسه با رقبا داره

- این ابزارها شامل Parser و Linter و Formatter و Minifier و … هست و توی پروژه‌هایی مثل Vite+ و Shopify و Turborepo استفاده شده و برای مثال ادعا می‌کنه ۱۰۰ برابر سریع تر از ESLint و ۴۰ برابر سریع‌تر از Babel هست

- یکی از ابزارهای این پروژه Oxlint هست که از اکثر دستورات فعلی ESLint و … پشتیبانی می‌کنه. اگه اندازهٔ پروژه‌تون خیلی بزرگ نیست و از ESlint استفاده می‌کنین، می‌تونین اون رو کاملاً با Oxlint جایگزین کنین

- برای آشنایی بیشتر با این پروژه این صفحه رو ببینین:
https://oxc.rs/docs/guide/usage/linter.html

#tools
👍283🙏2
ویت (𝗩𝗶𝘁𝗲) پلاس؟ ⚡️

- یک ایدهٔ جالب تیم Vite متحد کردن و یکپارچه کردن ابزارهایی هست که توی پروژه‌های فرانت‌اندی استفاده میشه. یکی از معضل‌های پروژه‌های فرانت‌اندی تنوع بالای ابزارها و مخصوصاً کانفیگ‌هایی هست که توی اون‌ها استفاده میشه. اما Vite برای حل این مسئله توی نسخهٔ پلاس تلاش کرده چنین ابزارها و کانفیگ‌هایی رو به صورت پیشفرض توی خودش جا بده. مثل Prettier و Linter و Vitest

- ویت پلاس به زودی منتشر میشه و برای پروژه‌های شخصی، اپن سورس و کسب و کارهای کوچیک رایگان هست

- جزییات بیشتر:
https://voidzero.dev/posts/announcing-vite-plus
👌116
🔺 حرکت جالب Stackoverflow

- اگه از چت‌جی‌پی‌تی و ... استفاده می‌کنین ولی دلتون پیش Stackoverflow هست، می‌تونین از سرویس جدید این شرکت استفاده کنین که شباهت زیادی به چت‌بات های امروزی داره ولی جواب‌هایی به سبک Stackoverflow میده:

https://stackoverflow.ai

#links
23👍12😁6😍3
🔺نسخه رسمی React Compiler منتشر شد

- برای خیلی از توسعه‌دهنده‌ها نحوه استفاده درست از توابع useMemo و useCallback و … گنگ بود. طوری که گاهی اوقات اثر معکوس روی عملکرد برنامه داشتن

- چند وقت پیش تیم ری‌اکت شروع کرد به توسعهٔ یک قابلیت خیلی خوب و کاربردی به اسم React Compiler که هدف اصلی اون کاهش قابل توجه نیاز به استفاده از useMemo و useCallback و React.memo و … بود. یعنی افزایش بهینگی و کاهش رندرهای اضافی، به صورت خودکار، بدون نیاز به استفاده از اون توابع!

- حالا نسخه رسمی این ابزار منتشر شده و می‌تونه توی هر برنامهٔ ری‌اکتی ورژن ۱۷ به بالا مورد استفاده قرار بگیره

- نصب و آشنایی بیشتر:
https://react.dev/learn/react-compiler/introduction
🔥268
شرکت OpenAI یه مرورگر اینترنتی منتشر کرده به اسم Atlas که توی خودش از ChatGPT به عنوان یک دستیار هوش مصنوعی استفاده می‌کنه

- یعنی توی هر صفحه که بازدید می‌کنین ChatGPT هم کنار شما حضور داره و می‌تونه کارهای مختلفی مثل پر کردن فرم‌ها، خلاصه‌سازی محتوا و ... رو انجام بده

- این مرورگر بر پایه Chromium هست و فعلاً فقط برای MacOS منتشر شده (و شنیدم باگ امنیتی هم زیاد داره) و به زودی برای پلتفرم‌های دیگه هم منتشر میشه

- مرورگر اطلس قراره قابلیت‌های زیادی رو به خودش اضافه کنه از جمله پروفایل‌های چندتایی و ابزارهایی برای توسعه‌دهنده‌های وب

جزییات بیشتر:
Introducing ChatGPT Atlas | OpenAI
13🥴4👎1
🔺نسخه رسمی 16 Next.js منتشر شد

- به این نسخه React Compiler و جدیدترین قابلیت‌های React 19.2 اضافه شده. این نسخه به‌صورت پیش‌فرض از ماژول باندلر Turbopack استفاده می‌کنه که سرعت خیلی بالاتری توی رفرش و بیلد برنامه داره

جزییات بیشتر:
https://nextjs.org/blog/next-16
👍261
اپل که به تازگی نسخه وب App Store رو راه‌اندازی کرده، یادش رفته بود که Sourcemap سایت رو غیر فعال کنه. و الان کل سورس کد فرانت‌اند پروژه لو رفته:

https://github.com/rxliuli/apps.apple.com
😁55🤣112👍1
github-stats-2025.pdf
814.9 KB
آمارهای جالب GitHub از فعالیت توسعه‌دهنده‌ها توی سال ۲۰۲۵
19🔥2
برای محاسبه border-radius خارجی یک المنت با استفاده از padding و border-radius المنت داخلی میتوان از فرمول ساده زیر استفاده کرد:

outer-radius = inner-radius + padding


🔺برای مثال: یه المان با مشخصات border-radius: 24px و padding: 8px داریم، برای محاسبه border-radius المان داخلی خواهیم داشت:

24px - 8px = 16px

🔺رعایت این نکته باعث میشه طراحی های اصولی تر و حرفه ای تری داشته باشیم.
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://news.1rj.ru/str/ProCode0101
👍2311
یک رزومهٔ کاری خوب حداکثر باید چند صفحه باشه؟
Anonymous Quiz
44%
۱ صفحه
48%
۲ صفحه
5%
۳ صفحه
3%
۵ صفحه
👎2
زبان برنامه‌نویسی ایرانی «آقای هاشمی»! 🥸

یکی که به تازگی برای اسپانیایی‌زبان‌ها یه کامپایلر برای جاوااسکریپت منتشر کرده که میشه جاوااسکریپت رو به اسپانیایی نوشت، من رو یاد این انداخت که خیلی وقته که یه زبان برنامه‌نویسی بومی داریم به اسم «زبان آقای هاشمی»:

https://mr-hashemi.github.io/mr-hashemi
🤣265😁1🤯1
🔺گوگل VS Code خودش رو ساخت!

- گوگل یک IDE جدید ساخته به اسم Google Antigravity که از جدیدترین مدل هوش مصنوعی گوگل یعنی Gemeni 3 پشتیبانی می‌کنه که به قول خودش برای عصر هوش مصنوعی ساخته شده

- این IDE ویژگی‌هایی فراتر از Code Suggestion داره و توی اون اجنت‌های هوش مصنوعی نقش پر رنگی دارن و می‌تونن خیلی از وظایف رو به انجام برسونن. مثلاً می‌تونن با ترمینال تعامل داشته باشن، دستورات رو اجرا کنن و مرورگر رو باز کنن تا ببینن درخواست رو به درستی پیاده‌سازی کردن یا نه:
Google Antigravity
20
این ریپازیتوری بیشتر از ۱۵۰ الگوریتم برنامه‌نویسی رو به زبان جاوااسکریپت به صورت ویدئو و تصویر و کد توضیح داده:
https://github.com/trekhleb/javanoscript-algorithms

پ.ن: پیاده‌سازی بعضی از این الگوریتم‌های معروف یک حرکت خیلی عالی برای بهتر کردن مهارت‌های برنامه‌نویسی هست. بهبود چنین مهارت‌هایی هزاران بار مفیدتر از یادگیری ابزارهای پر زرق و برق مثل ری‌اکت هست
👍2717🔥4🙏3
بهتره بسته بمونه 😄
😱50😁25🤣6👀211
🔺آسیب‌پذیری ری‌اکتی React2Shell چیه؟

- همونطور که احتمالاً شنیده باشین، تیم ری‌اکت یه باگ رو شناسایی کرده که بالاترین درجه آسیب‌پذیری یعنی 10 از 10 رو به اون دادن و اسمش رو گذاشتن React2Shell که به اون React’s Flight protocol هم گفته میشه

- این آسیب‌پذیری برنامه‌های ری‌اکتی‌ای رو تحت تأثیر قرار میده که از Server Component ها استفاده می‌کنن. مثل فریم‌ورک نکست، React Router، و به شکلیه که هرکسی با یک درخواست HTTP ساده می‌تونه کدهای مخرب رو روی سرور اجرا کنه، به قول معروف Remote Code Execution

چه نسخه‌هایی از ری‌اکت و نکست تحت تأثیر قرار می‌گیرن؟
- اگه از ورژن‌های ۱۴ به بالای نکست، و یا ۱۹ به بالای ری‌اکت استفاده می‌کنین، حتماً دستور npm audit رو توی ترمینال پروژه اجرا کنین. اگه چنین چیزی براتون چاپ شد یعنی حتماً باید بروزرسانی انجام بدین:
Severity: critical
Next.js is vulnerable to RCE in React flight protocol - …
fix available via npm audit fix


- البته اگه برنامهٔ شما فقط سمت کلاینت اجرا میشه مشکلی به وجود نمیاد. ولی اگه برنامه‌تون سمت سرور اجرا میشه (مثل SSR نکست) و نسخه‌های ری‌اکت ۱۹ به بالا یا نکست ۱۴ به بالا استفاده می‌کنین حتماً بروزرسانی رو با دستورات توی صفحه زیر انجام بدین:
https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components
👍179👏2😱1