درود دوستان! با ۳ تا پست جدید برگشتم.

راستی اگه تلگرام Premium دارین ممنون میشم کانال رو با این لینک Boost کنین:
https://news.1rj.ru/str/ditty_ir?boost

امیدوارم از این پست‌ها استفاده کنین 😉👇

🔺از Prompt Engineering چی می‌دونیم؟ 🤔

یه جمله معروفی هست که میگه:

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

- این روزها توسعهٔ نرم‌افزار بدون استفاده از هوش مصنوعی به نظر من غیر ممکن هست. و مطمئناً کسی که از اون به نفع خودش استفاده می‌کنه هیچ نگرانی نخواهد داشت

- توی این پست می‌خوایم با Prompt Engineering آشنا بشیم که تکینک‌هایی رو بهمون یاد میده تا بهتر و بهینه‌تر با ابزارهای Generative AI کار کنیم:
ditty.ir/530

#ai

🔺با ۳ معیار اصلی Core Web Vitals آشنا بشیم

ـ Core Web Vitals به ۳ معیاری گفته میشه که گوگل از اونها برای سنجش عملکرد و کیفیت یک صفحهٔ وب استفاده می‌کنه

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

- توی پست زیر می‌خوایم درباره Core Web Vitals صحبت کنیم و به طور کلی با ۳ معیاری آشنا بشیم که گوگل برای رتبه‌بندی وبسایت‌ها روی اونها حساب ویژه‌ای کرده:
ditty.ir/529

#frontend

🔺معیار CLS توی Core Web Vitals

- معیار CLS اولین معیار از Core Web Vitals هست که برای بررسی کردن پایداری المنت‌ها توی یک صفحه هنگام لود شدن استفاده میشه. به قول معروف Visual Stability که توی این پست مفصل با اون آشنا می‌شیم:

ditty.ir/532

#frontend

🔺بدون شرح :))

- پ.ن: به جدیدترین ورژن Next.js قابلیتی اضافه شده که میشه دستورات SQL رو سمت سرور اجرا کرد
#fun

🔺یکی از علم‌هایی که هر توسعه‌دهنده‌ای باید توی جعبه‌ابزارش داشته باشه System Design هست (با Design System اشتباه نشه)

- این ریپازیتوری نکته‌های خیلی خوبی رو به اشتراک میذاره که برای هر توسعه‌دهنده‌ای کاربردی و واجب هست:
https://github.com/ByteByteGoHq/system-design-101

#links

🔺پادکست‌های شنیدنی و ارزشمند از تجربیات برنامه‌نویس‌های ایرانی:
t.me/devpodcast

#links

🔺وب‌سایت Vue Mastery همه آموزش‌هاش رو به مدت ۲ روز (جمعه تا یکشنبه) رایگان می‌کنه:
https://www.vuemastery.com/free-weekend

نظر شخصی: حداقل ۲ فریم‌ورک فرانت رو کامل مسلط باشین
#links

🔺چک‌لیست پرفورمنس برنامه‌های فرانت‌اندی:
https://github.com/thedaviddias/Front-End-Performance-Checklist

- نسخه فارسی (با مشارکت صالح فدائی):
https://github.com/ms-fadaei/Front-End-Performance-Checklist

#links

🔺جواب چی میشه؟

https://twitter.com/DThompsonDev/status/1630068064401203201

#quiz

خبر رسیده که متأسفانه صابر عزیز از میان ما رفته 😔🖤🥀

🔺خیلی لذت بخشه وقتی روی پروژه‌های اپن‌سورس کار می‌کنی. مخصوصاً وقتی اولین کارت باشه

کمیل این بازی سودوکو رو طراحی کرده و سورسش رو هم روی گیت‌هاب گذاشته که نکته‌های خوبی می‌تونین ازش یاد بگیرین:
https://sudoku.komeilmehranfar.com

سورس کد:
https://github.com/komeilmehranfar/sudoku-core

اطلاعات بیشتر:
https://www.linkedin.com/posts/komeilmehranfar_sudoku-core


پ.ن: شما هم اگه پروژه اپن‌سورسی دارین، توی کامنت‌ها به اشتراک بذارین

#links

🔺از این ابزارها که می‌تونین Snippet های خوشگل طراحی کنین:
https://app.codeimage.dev

#links

🔺گوگل برای سنجش سرعت و Interactivity یک وب‌سایت از معیار FID از Core Web Vitals استفاده می‌کنه

- این معیار فاصلهٔ زمانی بین اولین تعامل کاربر با صفحه (مثل کلیک روی یک لینک یا دکمه) تا پاسخ مرورگر به اون تعامل رو اندازه‌گیری می‌کنه

- اگه یک امتیاز خوب می‌خوایم، باید زیر ۱۰۰ میلی‌ثانیه به این تعامل پاسخ بدیم و برای این کار باید نکته‌ها و تکنیک‌های #بهینه‌سازی مختلفی رو به کار بگیریم

- توی پست جدید دیتی با دلایل FID ضعیف و همچنین با نکته‌ها و تکنیک‌هایی برای داشتن یک FID عالی آشنا می‌شیم: 🚀
ditty.ir/533

#performance

🔺می‌خواید ببینید یک وب‌سایت از چه فونت‌هایی استفاده می‌کنه؟ این ابزار رو ببینید:
https://fonty.io

#links

🔺برای نام‌گذاری تایپ‌ها توی تایپ‌اسکریپت چه استانداردهایی وجود داره؟

۱. از حالت PascalCase استفاده کنیم. مثلاً User یا UserActivity

۲. از اسم‌هایی که برای شما و بقیه توسعه‌دهنده‌ها خوانا و واضح هستن استفاده کنیم. مثلاً CustomerRecord بجای Record

۳. از حالت مفرد بجای جمع استفاده کنیم. مثلاً UserActivity بجای UserActivities. اگه نیاز به حالت جمع بود می‌تونیم براحتی از UserActivity[] استفاده کنیم

۴. اگه از اینترفیس‌ها استفاده می‌کنین، از حرف I ابتدای اسم استفاده کنیم (اختیاری). مثلاً IBook

۵. از اسم‌های کلی (جنرال) برای تایپ‌های مشابه خودداری کنیم. و بهتره تایپ‌ها کاربرد مشخصی داشته باشن (اصل چهارم اصول سالید)

۶. قانون Hungarian notation. یعنی از آوردن نوع تایپ توی اسم تایپ خودداری کنیم. مثلاً UserNameString

۷. برای جنریک‌ها اشکالی نداره که از اسم‌های خوانا استفاده کنیم. مثلاً func<TItem> بجای func<T>

مقالات تایپ‌اسکریپت:
ditty.ir/c/typenoscript

#typenoscript

این پکیج رو آپدیت کردیم و چند تا ویژگی اضافه کردیم. از جمله قابلیت نمایش پیام‌های دلخواه وقتی یک Regex با خطا مواجه میشه.

همچنین آموزش استفاده از اون توی ری‌اکت رو هم قرار دادم.

ممنون میشم حمایت کنین 😉✌️👇
https://github.com/upjs/facile-validator
#tools

یک نمونه دیگه از این دست سوالات رو میتونین اینجا پیدا کنین:
https://github.com/viraptor/reverse-interview


که به فارسی هم ترجمه شده:
https://github.com/Kaaveh/reverse-interview/blob/master/translations/PERSIAN.md

#links

🔺منظور از Shallow Rendering توی برنامه های فرانت‌اند چیه؟ 🤔

ـ Shallow Rendering یک تکنیک تست‌نویسی هست که بیشتر توی فریم‌ورک‌های Component-Based مثل ویو و ری‌اکت دیده میشه

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

- با این کار، تست کردن راحت‌تر، سریع‌تر و دقیق‌تر خواهد بود. اما باید بدونیم که استفاده از Shallow Rendering همیشه خوب نیست.

از معایب Shallow Rendering اینه که:
- ممکنه رفتارهای اون کامپوننت رو توی محیط‌های واقعی نادیده بگیریم
- اگه کامپوننت به کامپوننت‌های داخلی وابستگی داشته باشه ممکنه حتی باعث سخت‌تر شدن تست بشه
- باعث نادیده گرفته‌شدن خیلی از تعامل‌های بین کامپوننت والد و فرزندها میشه که باعث میشه تست کمتر قابل اعتماد باشه
- پس بهتره از این تکنیک هم مثل هر چیز دیگه‌ای با آگاهی استفاده کنیم
#testing

🔺عملگر Non-null Assertion توی تایپ‌اسکریپت چیه؟ 🤔

- توی این عکس اگه به انتهای خط اول نگاه کنین، یک علامت تعجب انتهای اون عبارت قرار گرفته

- این عملگر به تایپ‌اسکریپت میگه که ما مطمئن هستیم این عبارت Null نیست و لطفاً توی ادامه Null بودن اون رو بررسی نکن

- بدون اون عملگر، تایپ‌اسکریپت توی خط ۳ خطا نشون میداد که:
'el' is possibly 'null'

- این کد رو می‌تونید توی این صفحه اجرا کنین
#typenoscript