گوگل یه مدل هوش مصنوعی جدید به نام Embedding Gemma منتشر کرده که کاملاً از زبان فارسی پشتیبانی می‌کنه!
دیگه نیازی به کلنجار رفتن با مدل‌های انگلیسی نیست.

این مدل‌ها کاربردهای زیادی دارن، از جمله جستجوی معنایی. برای مثال می‌تونید سیستمی بسازید که وقتی کسی سرچ کرد:
«بهترین گوشی برای عکاسی»، نتایج مرتبط مثل «موبایل‌های مناسب برای دوربین قوی» یا «اسمارت‌فون‌های با کیفیت عکس بالا» هم نمایش داده بشن، حتی اگه دقیقاً همون کلمات رو توی متن نیاورده باشید.

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

@ProCode0101

وبسایت شخصی و پورتفولیو‌های طراحان محصول شرکت Apple

www.edvarddagur.com
www.hannaxu.com
www.isiluzum.com
www.kaitlynchu.com
www.mikematas.com
www.wilson.tv
www.sanghan.co
www.devansdesign.com/apple
www.kare.com
www.aplusplus.org/ 
www.erikjonsson.se/
www.azumbrunnen.me/
www.johncostello.design/
www.jeannepark.com/
www.www.stefanschuster.me/
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

ترد (Thread) تو فرانت یعنی چی؟

ترد (Thread) یعنی یه خط یا مسیر اجرای کد توی برنامه یا مرورگر.

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

---

چندین نوع ترد داریم که خوبه باهاشون اشنا باشیم و بدونیم از هرکدوم باید برای چه کاری استفاده کنیم:

1- ترد اصلی (Main Thread)
- که مسئول همه چیزای اصلی صفحه است: DOM، CSS، رندر و eventها
- هر چیزی که با کاربر در تعامله، اینجا اجرا می‌شه

2- ترد وب وورکر (Web Worker)
- کارهای سنگین و طولانی مثل پردازش داده‌های بزرگ رو با این ترد انجام میدن
- مستقیم نمیتونه با DOM کار می‌کنه و فقط با پیام با main thread حرف می‌زنه

3- ترد سرویس وورکر (Service Worker)
- مخصوص PWA: کش، fetch، push notification
- مستقل از main thread و UI رو قفل نمی‌کنه


برای اینکه کار با main thread خوب و روان باشه، مهمه که کارای سنگین و طولانی رو مستقیم توش نذاریم. همه چیزای مربوط به DOM، رندر و تعامل با کاربر باید سریع اجرا بشه تا صفحه لگ نزنه. کارای پردازشی بزرگ رو بهتره به Web Worker بسپاریم و فقط نتیجه رو برگردونیم. همینطور از تکنیک‌هایی مثل debounce و throttle برای کنترل eventها استفاده کنیم تا main thread شلوغ نشه. وقتی این نکات رو رعایت کنیم، UIامون همیشه روون و بدون لگ می‌مونه
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

این لایبری بهتون امکان درگ و دراپ آبجکت ها توی وب می‌ده :)

github.com/Shopify/draggable
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://news.1rj.ru/str/ProCode0101

5 دقیقه تا پایان سردرگمی با this ، گمشده معروف در JS ☺️🤌🏻
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://news.1rj.ru/str/ProCode0101

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

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

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

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

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

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

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

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

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

دیدین توی گیتهاب نوشته چند درصد کد با چه زبانی زده شده؟ اینو می‌تونید نصب کنید و اطلاعات و گزارش پروژتون از جمله تعداد خط های کامنت و فایل ها و نوع زبان و ... بگیرید
github.com/AlDanial/cloc
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

بکند کارا شاید پشت کارشون قوی باشه ولی پشت کارشون قوی نیست.

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

@ProCode0101

ابزار های Mircrosoft 365 رو دیدین استایل هاش شبیه هم‌دیگس این لایبری ری اکت رو مایکروسافت توسعه داده که بتونید با اون استایل کامپوننت بسازین

مستندات :
react.fluentui.dev
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

ابزار های Mircrosoft 365 رو دیدین استایل هاش شبیه هم‌دیگس این لایبری ری اکت رو مایکروسافت توسعه داده که بتونید با اون استایل کامپوننت بسازین

مستندات :
react.fluentui.dev
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

این کتابخونه PHP که کارش اینه کُد PHP رو می‌گیره، تجزیه‌ش می‌کنه (parse)، تبدیلش می‌کنه به یک درخت نحوی انتزاعی یعنی Abstract Syntax Tree که به اختصار AST بهش می‌گن بعد می‌تونی این درخت رو بررسی، تغییر بدی و دوباره تبدیلش بکنی به کُد PHP

کاربردش چیه ؟ هیچی ! نه شوخی کردم باهاش می‌شه ابزار آنالیز و یا IDE ساخت کلا هر برنامه ای که نیاز به دخالت توی کد داره ساخت.

github.com/nikic/PHP-Parser
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

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


تست آنلاین و مستندات :

matthew.wagerfield.com/parallax
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

روز برنامه‌نویس مبارک به همه هم‌کدی‌های عزیزم!
به ساختن ادامه بدید، نوآوری کنید و هیچ‌وقت به قدرت ایده‌هاتون شک نکنید. هر باگی که برطرف می‌کنید و هر خط کدی که می‌نویسید، قدمی به سوی ساختن آینده است.
یادتون باشه: یک روز بد کدنویسی هنوز هم بهتر از یک روز خوبِ بدون خلاقیت و آفرینش هست.
و یک شوخی درونی برنامه‌نویسا: «من همیشه کدم رو تست نمی‌کنم… ولی وقتی تست می‌کنم، توی محیط واقعی (Production) انجامش می‌دم.» 😅💻

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

@ProCode0101

اینجارو ببینید پر سیستم دیزاینه، هم ‌می‌تونید توش کامپوننت های آماده پیدا کنید هم می‌تونید Voice & Tone پیدا کنید مثلا پیام خطا یا دستورالعملی می‌نویسی، چه لحن و ادبیاتی داشته باش و فایل های آماده فیگما و فتوشاپ و کلی سورس کد دیگه

github.com/alexpate/awesome-design-systems
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

https://x.com/devtwittir/status/1966913469711876310
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

@ProCode0101

#استخدامی

خب آقای X، خانم Y، یه سوال React خفن!

سوال : useEffect  چی هستش اصلا کی به کار مون میادش  و چطور جلوی  (render) رندرای بی‌موردشو بگیریم؟ 

آقا  useEffect مثل یه دستیار باهوشه که می‌گه : «هی، اگه بخوای یه کار جانبی (side effect) تو کامپوننتت انجام بدی، من اینجام!» ✌🏻🌹

این کارای جانبی چی‌ان؟  دریافت داده از API
تغییر چیزی تو DOM (مثلاً تغییر noscript صفحه) 
تنظیم تایمر یا interval (مثلاً یه تایمر شمارش معکوس) 
اشتراک (subscribe) به یه سرویس (مثلاً WebSocket)

به عبارتی، هر چیزی که بخوای «خارج از رندر معمولی» کامپوننت انجام بدی، useEffect جای اونه!

مثال:

  useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
})


مشکل کجاست؟😅🤏🏻

اگه حواست نباشه، useEffect هی رندر می‌کنه و اپ‌تو کند می‌کنه! 

راه‌حل: چطور جلوی رندر بی‌مورد رو بگیریم؟

اولی و اصلیش اینه که Dependency Array رو درست کن!


💥 همیشه یه آرایه به عنوان آرگومان دوم useEffect بده. این آرایه می‌گه useEffect کی باید اجرا بشه:

▫ [] → فقط یه بار موقع mount کامپوننت اجرا می‌شه (مثل componentDidMount).

▫ خالی نباشه یعنی  [variable] → هر وقت متغیر داخل آرایه تغییر کنه، useEffect اجرا می‌شه. 

▫ بدون آرایه → هر بار رندر، useEffect اجرا می‌شه (خطرناکه!).


⛔⛔⛔ پس کد بالا اصلا بهینه نیستش !!!


useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(data => setUsers(data));
},[])


این درستشه ⚡


یه سوال خفن دیگه!

اومدن تو مصاحبه گفتن: «اگه بخوای useEffect فقط یه بار موقع لود کامپوننت اجرا بشه، چی کار می‌کنی؟»
جواب: یه آرایه خالی ([]) می‌ذاری!


سیو کن این پستو! اگه این سبک سوال و جواب به دلت نشست، یه 🔥 بذار و بگو بعدی چی باشه!   
------------------------------------
پُروکُد، جایی که‌ برنامه‌نویسای حرفه‌ای متولد میشن🧑🏻‍💻👇🏽

https://news.1rj.ru/str/ProCode0101