🔺وایب کدینگ (Vibe Coding) چیه که همه جا دارن دربارش صحبت می‌کنن؟

- وقتی این رو از ChatGPT پرسیدم حس کردم یه یکمی در جریان موضوع نیست. مثلاً گفت:

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

- اما در واقع عبارت Vibe Coding که کمتر از ۳ ماه میشه که سر زبون‌ها افتاده، روشی برای توسعهٔ نرم‌افزار هست که شخص کاملاً با وابستگی به AI توسعه رو انجام میده. یعنی مسئله رو برای AI شرح می‌دیم و اون برامون کدها رو تولید می‌کنه. یعنی همون کاری که بیشتر ماها هر روز داریم انجام می‌دیم :)

- توی این روش، افراد تازه‌کار می‌تونن کدهایی در سطح افراد باتجربه بنویسن. به نظر من اولویت‌ها برای تشخیص یک توسعه‌دهندهٔ خوب داره عوض میشه. به نظر شما مهندس نرم‌افزار خوب توی عصر هوش مصنوعی چه ویژگی‌هایی داره؟

🔺سوال مصاحبه: چه زمانی از SSR استفاده کنیم؟ چه زمانی از SSG و چه زمانی از CSR؟

ـ SSR که مخفف Server-side Rendering هست برای زمانی مناسبه که سئو اهمیت داره. مثلاً برای بلاگ‌ها و صفحاتی که برای جذب کاربر طراحی شده (Marketing Pages). به این دلیل که موتورهای جستجو راحت‌تر می‌تونن محتویات صفحه رو بخونن

- اگه محتویات صفحات ما داینامیک نیستن و در گذر زمان خیلی تغییر نمی‌کنه و همچنین تعامل زیادی با کاربر نداره، اما همچنان سئو اهمیت داره، بهتره که از SSG یا Static Site Generation استفاده کنیم. چون صفحات ما یک بار تولید و کش میشن و تا زمانی که نیاز نباشه، از همون محتویات کش شده استفاده میشه

- اما اگه می‌خوایم یک دشبرد طراحی کنیم و یا مثلاً محتویات صفحه بعد از احراز هویت به کاربر نمایش داده میشه، از CSR یا همون Client-side Rendering استفاده کنیم. به این دلیل که برنامهٔ ما بعد از لود اولیه خیلی سریع‌تر می‌تونه عمل کنه

- بعضی وقت‌ها هم لازمه بعضی از این روش‌ها رو با هم ترکیب کنیم. که این روش با عنوان ISR یا Incremental Static Regeneration شناخته میشه. توی ISR صفحه‌ها مثل SSG ساخته میشن، اما بعد از مدتی توی بازه‌های زمانی مشخص به طور خودکار محتویات اونها بروز میشه. توی این روش، صفحه‌ها سرعتی به اندازه SSG ها دارن، اما مثل SSR همیشه بروز هستن

#ux

🔺ـ Subresource Integrity چیه؟ 🤔

- اگه ریسورس‌های یک صفحه (اسکریپت‌ها، استایل‌ها و ...) رو از یک منبع خارجی (مثلاً CDN) لود می‌کنیم، یه نکته امنیتی مهم رو باید در نظر داشته باشیم

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

- برای جلوگیری از این اتفاق، مرورگرها یک قابلیت امنیتی دارن به اسم Subresouce Integrity یا به‌طور خلاصه SRI

- توی این پست با این ویژگی و نحوهٔ پیاده‌سازی اون بیشتر آشنا می‌شیم:
ditty.ir/587

#frontend

🔺توابع if/else به CSS اضافه شدن 🔥

- این ویژگی فعلاً از کروم 137 به بعد در دسترس هست

- مشاهدهٔ دمو

#css

کوچیک‌ترین کاری که می‌تونم بکنم اینه که دوره‌های آموزشی دیتی رو رایگان در اختیارتون بذارم. کد تخفیف:
off-100

برای این دوره‌ها می‌تونین استفاده کنین:
- پروژه‌های جاوااسکریپتی برای تازه‌کارها
- آموزش جامع جاوااسکریپت به زبان ساده
- همه چیز از ES6 جاوااسکریپت

#زنده_باد_ایران 🇮🇷✊

نسخه 7 ویت (Vite) منتشر شد و چیزی که جالب بود اینه که مستندات به زبان فارسی رسماً اضافه شده:
https://fa.vite.dev/

جزییات بیشتر:
https://vite.dev/blog/announcing-vite7.html

- دم بچه‌های پر تلاش جامعهٔ فارسی‌زبان گرم 👏💪

#tools

🔺اکمااسکریپت ۲۰۲۵ و متدهای جدید Set

- توی جدیدترین آپدیت اکمااسکریپت (۲۰۲۵) متدهای جدید و کاربردی به مجموعه Set اضافه شده

- توی جدیدترین پست دیتی اونها رو بررسی می‌کنیم:
ditty.ir/589

#javanoscript

🔺آزادسازی قانونی جاوااسکریپت

- شاید جالب باشه که بدونیم مالکیت کلمهٔ «جاوااسکریپت» در اختیار شرکت اوراکل هست. این در حالیه که این شرکت نه جاوااسکریپت رو ساخته و نه تلاشی برای توسعهٔ اون انجام داده

- به‌تازگی گروهی از افراد معروف حوزهٔ برنامه‌نویسی (از جمله خالق جاوااسکریپت، خالق نودجی‌اس، خالق npm و ۲۱هزار نفر دیگه) از طریق قانون درخواستی برای لغو مالکیت واژه «جاوااسکریپت» توسط اوراکل رو ارائه دادن

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

- اوراکل چکار کرد؟ اوراکل برای اینکه به دادگاه ثابت کنه که داره از کلمهٔ جاوااسکریپت استفادهٔ تجاری می‌کنه زیاد خودش رو به زحمت نینداخت. رفت از وبسایت رسمی نودجی‌اس یک اسکرین‌شات مرموزانه گرفت و به دادگاه ارائه داد و گفت «من دارم استفاده تجاری می‌کنم. لطفاً برند من رو تمدید کنید!»

- این کار باعث عصبانیت بیشتر رایان دال (مالک نودجی‌اس) شد. تا جایی که شکایتی رو در این مورد هم ثبت کرد (که البته شکایت برای این قسمت به جایی نرسید)

- اما موضوع آزادسازی و عامیت بخشیدن به کلمه «جاوااسکریپت» هنوز در حال بررسی هست و شرکت اوراکل تا تاریخ ۷ آگوست ۲۰۲۵ می‌بایست در این مورد اظهار نظر کنه

- این اتفاق چرا مهمه؟ توی دنیایی که کپی‌رایت اهمیت داره، استفاده کردن از نام جاوااسکریپت ممکنه تبعات قانونی برای افراد و سازمان‌ها داشته باشه و برای همین افراد و سازمان‌ها سعی می‌کنن با ریسک کمتری از این واژه استفاده کنن. مثلاً استفاده از JS Conf بجای JavaScript Conf

- صفحه رسمی با این درخواست:
https://javanoscript.tm


#javanoscript

یکی از خبرنامه‌هایی که چند ساله دنبالش می‌کنم Web Tools Weekly هست که هر هفته ابزارها و پلاگین‌ها و ... جدید مرتبط با وب رو معرفی می‌کنه و توضیح میده:
https://webtoolsweekly.com

‌

طبق آمار وبسایت معروف Pragmatic Engineer، توی سال ۲۰۲۵ GitHub Copilot پراستفاده‌ترین ابزار هوش مصنوعی برای مهندسان نرم‌افزار بوده.

- این در حالی بوده که توی سال ۲۰۲۴ شرکت‌کننده‌ها بیشتر به ChatGPT رأی داده بودن

https://newsletter.pragmaticengineer.com/p/the-pragmatic-engineer-2025-survey

یه نکته قابل توجه دیگه که این نظرسنجی داشت این بود که اکثر شرکت‌کننده‌هایی که از ابزارهای Vibe Coding استفاده می‌کنن، مهندس‌های نرم‌افزار نبودن. در واقع اکثرشون مدیر، فاندر و ... بودن

این آمار نشون میده که ابزارهای Vibe Coding مثل Vercel v0, Bolt .new و Lovable بیشتر توسط افرادی استفاده شده که توانایی فنی خوبی نداشتن (یا زمانش رو نداشتن) و می‌خواستن یک طرح اولیه از نرم‌افزار بسازن و به بقیه نشون بدن که منظورم اینه

یه کتابخونه شبیه Lodash معرفی شده به اسم es-toolkit که در مقایسه با Lodash سرعت خیلی بالاتر و حجم کمتری داره، Tree-shaking داره و از صورت پیشفرض از تایپ‌اسکریپت استفاده می‌کنه:
https://es-toolkit.dev/

#links

🔺ـ ChatGPT یک قابلیت اضافه کرده به اسم Study Mode که باهاش می‌تونید مرحله به مرحله یک چیز رو یاد بگیرین

- قبلاً برای مثال اگه بهش می‌گفتین یه پروژه Todo رو با ری‌اکت برام بزن، همهٔ آموزش رو توی یک پاسخ جا می‌داد، که در نتیجه خیلی از نکات و مراحل نادیده گرفته میشدن

- اما الان حالت Study Mode مرحله به مرحله سعی می‌کنه همه نکات رو توی پاسخ‌های جداگونه ارائه بده و شما فقط باید بهش بگید «مرحله بعد»

https://chatgpt.com/?hints=study

🔺نظرسنجی

- مزایای ابزارهایی مثل ChatGPT و Copilot برای همه‌مون که مشخصه. اما به نظر من بزرگترین عیبی که ابزارهای هوش مصنوعی دارن اینه که آدم رو به شدت تنبل می‌کنن. مغز ما کمترین تلاش رو برای حل مسئله می‌کنه و توی بلند مدت اصلاً چیز خوبی نیست. مثل یک لقمهٔ همیشه آماده. مثل اینکه بگی تا وقتی که ماشین هست چرا باید پیاده‌روی کنم؟

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

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

نظر شما چیه؟

🔺وبسایت v0.app یک سرویس جدید از Vercel هست که می‌تونه نسبتاً دقیق پرامپت‌ها و عکس‌ها رو به کد تبدیل کنه. برای مثال ازش خواستم لینکدین رو بازطراحی کن و چنین چیزی توی کمتر از ۱ دقیقه تحویل داد:
https://v0.app/chat/linkedin-redesign-nh5RmyjyyZ1

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

https://v0.app

🔺تجربه‌ای از ۲۰۰+ مصاحبه کاری

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

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

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

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

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

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

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

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

🔺برنامه‌نویسی = مهارت حل مسئله

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

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

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

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

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

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

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

- توی پست‌های بعدی سعی می‌کنم راه‌هایی رو معرفی کنم که کمک می‌کنه مهارت‌های حل مسئله‌مون رو بهتر کنیم 🌹

🔺می‌خواید مهارت‌های الگوریتم‌نویسی و حل مسئله‌تون رو توسعه بدید؟

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

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

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

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

- با این کار حتی لازم نیست سراغ وبسایت‌های لیت‌کد و هکررنک و ... برید و مسائل پیچیدهٔ کوانتومی پیاده‌سازی کنید

۱۰۰ بار سریع‌تر از 𝗘𝗦𝗟𝗶𝗻𝘁 ؟! 😃

- واقعاً یکی از معضلات پروژه‌های بزرگ وقتیه که ابزارهایی مثل 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

🔺با این ٢٠٠ سوال مهارت CSS خودتون رو به چالش بکشین:

https://css-questions.com/

#css