Ditty | دیتی – Telegram
Ditty | دیتی
3.19K subscribers
194 photos
20 videos
4 files
387 links
دیتی | دنیای ساده‌شدهٔ برنامه‌نویسی وب
https://ditty.ir
Download Telegram
🔺گیت و ۶ تا از مهمترین تجربیات من

- تجربیات و نکاتی رو از استفاده از Git رو براتون به اشتراک گذاشتم که کمک می‌کنن با این ابزار به شکل بهتر و موثرتری استفاده کنیم:

ditty.ir/572

#git
🔥16👍5💯3👏2🙏1
🔺هنرِ Code Review 📝

- یکی از کارهای مهمی که تقریباً همهٔ ما هر روز اون رو انجام می‌دیم و تأثیر قابل توجهی توی تیم و روند توسعهٔ برنامه داره انجام Code Review هست که کمتر کسی اون رو بهمون یاد داده یا منبع مشخصی برای یادگیری اون هست.

- اما طبق تجریبات خودم و دیگران سعی کردم توی جدیدترین پست دیتی 10+ نکتهٔ مهم برای بررسی کدهای یک هم‌تیمی رو بررسی کنم:
ditty.ir/575

#tips
28👍6👌1
🔺جزییات و نکات پیاده‌سازی تکنیک‌های Debounce و Throttle توی ری‌اکت

- این دو از تکنیک‌های پرکاربرد بهینه‌سازی و افزایش سرعت و کیفیت هر برنامه‌ای هستن و به قول معروف برای Rate Limiting به کار میرن

- تکنیک Debounce تضمین می‌کنه یک قطعه کد زمانی اجرا بشه که یک مدت زمان مشخصی از آخرین تلاش برای اجرای اون گذشته باشه. مثلاً یک تابع ده بار پشت سر هم فراخونی میشه، اما می‌خوایم اجرای واقعی اون موقعی باشه که ۵ ثانیه از آخرین فراخونی گذشته باشه.
آشنایی با این تکنیک:
ditty.ir/577

- تکنیک Throttle هم تضمین می‌کنه که کدهای ما توی یک بازه زمانی مشخص فقط یک بار اجرا بشن. مثلاً می‌خوایم یک تابع توی هر بازه زمانی ۵ ثانیه فقط یک بار اجرا بشه. پیاده‌سازی این تکنیک:
ditty.ir/573

#react
👍17🔥31
🔺از ۱۱۴ تگ HTML چند تا رو می‌تونید از حفظ نام ببرین؟ 👇
https://codepen.io/plfstr/full/zYqQeRw


- من حدود ۴۰ تا 👀

#links
👨‍💻6🆒2
Ditty | دیتی
🔺هنرِ Code Review 📝 - یکی از کارهای مهمی که تقریباً همهٔ ما هر روز اون رو انجام می‌دیم و تأثیر قابل توجهی توی تیم و روند توسعهٔ برنامه داره انجام Code Review هست که کمتر کسی اون رو بهمون یاد داده یا منبع مشخصی برای یادگیری اون هست. - اما طبق تجریبات خودم…
توی قسمت قبل با مهارت‌های انجام یک Code Review خوب آشنا شدیم. اما این برای اینکه این پروسه خوب و کامل انجام بشه کافی نیست

- وقتی درخواست Code Review می‌دیم هم می‌بایست یک سری نکات رو رعایت کنیم تا انجام این به راحت‌ترین و مؤثرترین شکل انجام بگیره

توی این قسمت می‌خوایم با مهارت‌های درخواست Code Review آشنا بشیم:
https://ditty.ir/p/5jPdX

#imse
11👍7
آرایه با عضو اجباری توی تایپ‌اسکریپت؟ 🤔

برای مثال چکار کنیم وقتی می‌خوایم یک تایپ برای یک آرایه داشته باشیم که:

۱. اعضای اون عددی باشن
۲. می‌خوایم کاربر رو مجبور کنیم که حتماً این آرایه رو خالی نذاره

از ترفند خط ۶ عکس استفاده می‌کنیم 👌

#typenoscript
👍44🔥17
یه نویسندهٔ جدید و خوش ذوق به دیتی اضافه شده به اسم امیررضا 😉🔥

- بیشتر درباره ری‌اکت می‌نویسه. از پست‌هاش استفاده کنین:

- هرچیزی که باید از کاستوم هوک ها بدونیم
- هدف از ساخت Suspense کامپوننت‌ها چیه؟
- هرچیزی که باید از هوک useDeferredValue بدونیم
- چه روش‌هایی برای دیباگ کردن برنامه ری‌اکتی می‌شناسین؟

#react
🔥439👍6👎1🤔1👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺قابلیت Locked scrolling توی VS Code

- گاهی اوقات حین اینکه دو تا فایل رو با همدیگه مقایسه می‌کنیم، می‌خوایم با اسکرول توی یک فایل، اون فایل هم به‌صورت خودکار اسکرول بشه

- کافیه Command Palette رو باز کنیم و بنویسیم:

View: Toggle Locked Scrolling Across Editors


- پ.ن: Command Palette با دکمه‌های Ctrl+Shift+P (توی مک P⇧⌘) باز میشه

#tips
👍365🔥1
🔺کد ریویو (Code Review) با هوش مصنوعی

- توی شرکت قبلی که بودم یه ابراز هوش مصنوعی اضافه شده بود به اسم CodeRabbit که وقتی توی گیت‌هاب یه PR می‌ساختیم، خودش به صورت خودکار میومد کدها رو چک می‌کرد و به قول معروف Code Review انجام میداد

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

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

- عیبی که این ابزار داره اینه که اولاً پولی هست و شاید استفاده از ایران راحت نباشه (البته ۱۴ روز استفاده رایگان داره). دوم اینکه دوستانی که به توی PR ها ایرادهای الکی می‌گیرن بیکار میشن 😄

پست مرتبط:
هنرِ درخواست Code Review - مهارت‌هایی برای درخواست بررسی کدها از یک هم‌تیمی

#tools
15👍8🔥21🥴1
🔺وایب کدینگ (Vibe Coding) چیه که همه جا دارن دربارش صحبت می‌کنن؟

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

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

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

- توی این روش، افراد تازه‌کار می‌تونن کدهایی در سطح افراد باتجربه بنویسن. به نظر من اولویت‌ها برای تشخیص یک توسعه‌دهندهٔ خوب داره عوض میشه. به نظر شما مهندس نرم‌افزار خوب توی عصر هوش مصنوعی چه ویژگی‌هایی داره؟
22👍11
🔺سوال مصاحبه: چه زمانی از 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
👍2910
🔺هنگام توسعه چقدر Accessibility براتون مهمه و اون رو رعایت می‌کنید؟
Anonymous Poll
18%
همیشه
29%
تقریباً، تا حدودی
34%
کم
20%
نمی‌دونم چیه اصلاً
2
🔺ـ Subresource Integrity چیه؟ 🤔

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

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

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

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

#frontend
23🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
🔺توابع if/else به CSS اضافه شدن 🔥

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

- مشاهدهٔ دمو

#css
👍32🔥167😁1🤣1
کوچیک‌ترین کاری که می‌تونم بکنم اینه که دوره‌های آموزشی دیتی رو رایگان در اختیارتون بذارم. کد تخفیف:
off-100

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

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

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

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

#tools
🔥485👌5👍2
🔺اکمااسکریپت ۲۰۲۵ و متدهای جدید Set

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

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

#javanoscript
🔥177👍6
🔺آزادسازی قانونی جاوااسکریپت

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

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

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

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

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

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

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

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


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

23🔥4🤯2👍1🤷1
طبق آمار وبسایت معروف Pragmatic Engineer، توی سال ۲۰۲۵ GitHub Copilot پراستفاده‌ترین ابزار هوش مصنوعی برای مهندسان نرم‌افزار بوده.

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

https://newsletter.pragmaticengineer.com/p/the-pragmatic-engineer-2025-survey
👍142👎2
Ditty | دیتی
🔺وایب کدینگ (Vibe Coding) چیه که همه جا دارن دربارش صحبت می‌کنن؟ - وقتی این رو از ChatGPT پرسیدم حس کردم یه یکمی در جریان موضوع نیست. مثلاً گفت: مدلی از کدنویسی که شخص خیلی ریلکس و با آرامش کدنویسی می‌کنه، موزیک ملایم پخش میشه، تم‌های جذاب ادیتور و ابزارهای…
یه نکته قابل توجه دیگه که این نظرسنجی داشت این بود که اکثر شرکت‌کننده‌هایی که از ابزارهای Vibe Coding استفاده می‌کنن، مهندس‌های نرم‌افزار نبودن. در واقع اکثرشون مدیر، فاندر و ... بودن

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