✅ Claude is cooking ...

دوستانی که windsurf دارن روی اون فعال شده و میتونید تستش کنید.

#AB #AI


🚀 @devsourcech
✅ در بله
🔹 @devsource

🚨 خیلی دوست دارم ابزاری رو معرفی کنم که باهاش می‌تونید از دل کد (چه توی محیط توسعه و چه پروداکشن) کندی‌های سیستم رو با جزئیات کامل بکشید بیرون.

داستان از اینجا شروع میشه که حتماً برای همه‌تون پیش اومده؛ یه ریکوئست میاد، سیستم کنده، اما نمی‌دونید دقیقاً کدوم سرویس یا کدوم کوئری دیتابیس داره وقت رو تلف می‌کنه…

اینجاست که قصه Zipkin شروع میشه.

🛠 Zipkin دقیقاً چیکار می‌کنه؟
زیپکین ابزارِ "Distributed Tracing" هست. یعنی چی؟ فرض کنید یه میکروسرویس دارید که برای گرفتن یه دیتای ساده، باید به ۳ تا سرویس دیگه درخواست بزنه، از اون طرف هم دیتابیسِ سرویس سوم کنده. پیدا کردنِ اینکه این وسط کجای این زنجیره، زمان هدر میره، بدون ابزار عملاً غیرممکنه.

زیپکین میاد برای هر درخواست یه Trace ID میسازه و تمامِ مسیرهایی که اون درخواست طی می‌کنه رو (از سرویس A به B، از B به دیتابیس و...) براتون مانیتور می‌کنه.

💡 مثال واقعی:
توی یک پروژه، ما یه سرویس “تخفیف” داشتیم که گاهی اوقات باعث می‌شد کل سبد خرید با تاخیر ۵ ثانیه‌ای لود بشه. وقتی لاگ‌ها رو چک می‌کردیم، همه سرویس‌ها می‌گفتن “ما اوکی هستیم”.
با Zipkin که مسیر رو نگاه کردیم، فهمیدیم مشکل از دیتابیس یا کد نیست؛ بلکه سرویسِ سبد خرید، برای چک کردنِ وضعیتِ هر آیتم، به جای اینکه یکبار به سرویسِ تخفیف درخواست بزنه، توی یک حلقه (Loop) به ازای هر محصولِ کاربر، یک ریکوئست HTTP جداگانه می‌فرستاد!

حالا اینجا یه سؤال پیش میاد…
آیا برای هر پروژه کوچیکی نیاز به Zipkin داریم؟ نه! این ابزار برای معماری‌های میکروسرویسی و سیستم‌هایی که پیچیدگی‌شون بالاست حکمِ طلا رو داره. اگر یه سرویسِ تکیِ ساده دارید، احتمالاً overkill محسوب میشه.

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

اگر سوال یا تجربه‌ای درباره این موضوع دارید، به آی‌دی خصوصی من یا گروه پیام بدید؛ حتماً جواب می‌دیم.

#سامان #تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅

⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

🚀 مسیر یادگیری React در سال ۲۰۲۶

اگر می‌خوای وارد دنیای فرانت‌اند بشی یا سطح کارت رو حرفه‌ای کنی، React یکی از مهم‌ترین ابزارهای این مسیره. 🌐

اما مشکل اینجاست: خیلی‌ها یا پراکنده یاد می‌گیرن، یا از وسط راه جا می‌مونن.
اینجا قراره قدم‌به‌قدم با هم بریم جلو 👇

🔹 از پایه شروع می‌کنیم: HTML, CSS, JavaScript (بدون اینا React معنی نداره) 🧱
🔹 بعد می‌ریم سراغ: React Basics (Component, Props, State) ⚛️
🔹 بعدش: Hooks (useState, useEffect, useMemo...) 🪝
🔹 در ادامه: Routing, API, پروژه‌های واقعی 🛠️
🔹 و در نهایت: ساخت پروژه‌های واقعی + آمادگی ورود به بازار کار 💼

💡 هدف این کانال: یادگیری اصولی، ساده و پروژه‌محور React — بدون حاشیه و گیج شدن 🎯

#Hame
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

🔥 شروع مسیر یادگیری React

قبل از اینکه React رو شروع کنیم، باید یه چیز مهم رو بدونی:

بدون JavaScript
عملاً React هیچی نیست.
پس اگر می‌خوای حرفه‌ای یاد بگیری، باید این پایه‌ها رو محکم کنی 👇

🧠 نقشه راه قبل از React
🔹 1. HTML ساختار صفحه
🔹 2. CSS ظاهر و استایل‌دهی
🔹 3. JavaScript (مهم‌ترین بخش)

متغیرها (let, const)
شرط‌ها (if/else)
حلقه‌ها (for, map)
آرایه و آبجکت
یکسریfunction ها
کار با DOM
⚡ نکته مهم

اگر JavaScript رو بلد نباشی، React برات فقط یه سری کلمه عجیب میشه.

🎯 پیشنهاد میکنم من که قبل از رفتن سراغ React:
حداقل 30 روز فقطhtml css JS کار کن + تمرین حل کن.


اما نگران نباش
ما همراهت هستیم و این مسیر رو باهاهت همراه میشم

📌 پست بعدی: «برنامه 30 روزه html css JavaScript برای React»

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

راهنمای دوره📢
جهت استفاده از دوره، روی هشتگ‌ها بزنید و مطالب را دنبال کنید 👇
دوره ۳۰ روزه رایگان HTML, CSS, JavaScript 🎓
جهت آمادگی برای ورود به React.js 🚀

شامل سه فاز:

فاز اول: آموزش HTML 🪜
#html_lessons@devsourcech

فاز دوم: آموزش CSS 🎨
#css_lessons@devsourcech

فاز سوم: آموزش JavaScript ⚡
#javaScript@devsourcech

همچنین بخش معرفی وب‌سایت‌های کاربردی 🌐
#معرفی_وبسایت_فرانت_اند@devsourcech

نکات کاربردی فرانت اند 💡
#hints_frontend@devsourcech

نمونه کدها و سورس‌کد مربوطه 💻
#نمونه_کد_فرانت_اند@devsourcech
#سورس_کد_فرانت_اند@devsourcech

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

🚀 برنامه ۳۰ روزه HTML + CSS + JavaScript (مخصوص React)
🟢 فاز 1: HTML (روز 1 تا 5)
هدف: ساختار صفحه رو کامل بفهمی
روز 1:
ساختار کلی HTML
تگ‌های پایه (div, h1, p, span)
روز 2:
لینک‌ها و تصاویر
مسیرها (relative / absolute)
روز 3:
فرم‌ها (input, button, form)
روز 4:
لیست‌ها (ul, ol, li)
جدول ساده (table)
روز 5:
ساخت یک صفحه کامل HTML (Login Page ساده)
🎯 خروجی: یک صفحه کامل بدون CSS

#html_lessons@devsourcech

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

🟡 فاز ۲: CSS (روز ۶ تا ۱۵) 🎨
هدف: ساخت UI واقعی 💻
روز ۶:
selector ها + رنگ + فونت 🎨🔤
روز ۷:
box model (margin, padding, border) 📦
روز ۸:
display (block / inline / inline-block) 🔲
روز ۹:
position (relative, absolute, fixed) 📍
روز ۱۰:
Flexbox (خیلی مهم 🚨) ⚡
روز ۱۱:
Flexbox ادامه + تمرین 🏋️‍♂️
روز ۱۲:
Grid 🧱
روز ۱۳:
hover / transition ✨
روز ۱۴:
responsive design (media query) 📱💻
روز ۱۵:
ساخت یک UI کامل (مثلاً landing page ساده) 🖼️
🎯 خروجی: یک صفحه شبیه سایت واقعی 🌐

#css_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

🔵 فاز 3: JavaScript (روز 16 تا 30) 📅
هدف: رسیدن به سطح React-ready 🎯

روز 16:
let / const 📝
انواع داده‌ها 🧾

روز 17:
شرط‌ها (if / else) ⚖️

روز 18:
حلقه‌ها (for / while) 🔄

روز 19:
آموزش function ها ⚙️

روز 20:
آموزش array ها 📊

روز 21:
map / filter / find (خیلی مهم 🚨) 🔍

روز 22:
آموزش object ها 🧱

روز 23:
آموزش destructuring ساده 🧩

روز 24:
DOM (querySelector, innerText) 🌐

روز 25:
آموزش event ها (click, input) ⚡

روز 26:
کار با فرم‌ها 📝

روز 27:
mini project 1: Todo List ✅

روز 28:
mini project 2: calculator ساده ➗

روز 29:
تمرین ترکیبی (array + DOM) 🤝

روز 30:
جمع‌بندی + رفع ضعف‌ها + آماده ورود به React 🚀

#javaScript_lessons@devsourcech

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

🎯 خروجی این ۳۰ روز:
بعدش تو می‌تونی:
✅ React رو بدون ترس شروع کنی
🚀 مفهوم state و props رو سریع بگیری
💻 پروژه بزنی

پس با من همراه شو تا با هم به دنیای برنامه‌نویسی بریم و سفرمونو شروع کنیم 🛠️🌍✨

برای دوره های فرانت هشتگ های مربوطه را دنبال
#javaScript_lessons@devsourcech

#css_lessons@devsourcech

#html_lessons@devsourcech


#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

خب قبل از اینکه وارد آموزش بشیم، باید محیط کارمون رو آماده کنیم. 🛠️

مثلاً آماده کردن وسایل قبل از سفر میمونه ✈️

قراره VS Code رو نصب کنیم و چندتا ابزار مهم بهش اضافه کنیم.

💻 اول VS Code چیه؟

برنامه VS Code یه ادیتور کد سبک و قدرتمنده که باهاش کدنویسی می‌کنیم 💻. تقریباً همه‌ی فرانت‌اند دولوپرها از همین استفاده می‌کنن.

📦 مرحله 1: نصب VS Code
🔗 دانلود از سایت رسمی: https://code.visualstudio.com/
✔️ وارد سایت شو
✔️ روی Download برای سیستم عاملت کلیک کن
✔️ نصبش کن (مثل برنامه‌های معمولی Next → Next) ✅

⚙️ مرحله 2: تنظیمات اولیه (مهم)
بعد از نصب:
وارد Settings شو ⚙️
این گزینه‌ها رو فعال کن:
Auto Save → روشن 🔒
Word Wrap → روشن (برای اسکرول نکردن افقی) 📜

🔌 مرحله 3: اکستنشن‌های ضروری (خیلی مهم 🚨)
این اکستنشن‌ها رو حتما نصب کن:
🎯 1. Live Server
برای دیدن تغییرات سایت به صورت زنده بدون رفرش 🔄
🎨 2. Prettier – Code Formatter
برای مرتب کردن خودکار کدها 🧹
🧠 3. ES7+ React/Redux Snippets
برای کدنویسی سریع React (بعداً خیلی به درد می‌خوره) ⚛️
🌈 4. Material Icon Theme
برای قشنگ‌تر شدن فایل‌ها و فولدرها 📂
⚡ 5. Auto Rename Tag
وقتی یه تگ HTML رو تغییر میدی، تگ جفتش هم تغییر می‌کنه 🏷️

🧠 نکات مهم (خیلی مهم‌تر از نصب)
✔️ هیچوقت کد نامرتب ننویس 🚫
✔️ از همون اول عادت به تمیز نوشتن کد کن ✨
✔️ هر چیزی رو خودت تایپ کن، کپی نکن ⌨️
✔️ با VS Code راحت شو، این ابزار اصلی توئه 🚀

#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

بریم شروع کنیم دوره ۳۰ روزه فشرده HTML, CSS, JS جهت آمادگی برای ورود به React.js 🚀💻📅

#javaScript_lessons@devsourcech

#css_lessons@devsourcech

#html_lessons@devsourcech


#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

📅 روز 1: شروع HTML
🎯 ساختار صفحه و تگ‌های پایه
🧠خود HTML چیه؟
دوستانHTML زبان ساختاردهی صفحه‌های وبه و بیشتر تحت عنوان یک مارک آپ شناخته میشه تا زبان
یعنی با HTML مشخص می‌کنی:
چی عنوانه
چی متن عادیه
چی بخشه
🏗️ ساختار کلی یک فایل HTML
هر صفحه HTML یه ساختار ثابت داره:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    محتوا اینجا قرار می‌گیره
  </body>
</html>

🧱 تگ‌های پایه
🔹 1. div
برای ساختن بخش‌بندی صفحه استفاده میشه

<div>
  این یک بخش از صفحه است
</div>

🔹 2. h1
برای عنوان‌های اصلی استفاده میشه

<h1>سلام به دنیای وب</h1>

🔹 3. p
برای متن‌های معمولی استفاده میشه

<p>این یک متن ساده است</p>

🔹 4. span
برای متن‌های کوچک داخل یک جمله استفاده میشه

<p>سلام من <span>حامد</span> هستم</p>

🎯 تمرین امروز
یک فایل HTML بساز و داخلش این کارها رو انجام بده:
یک عنوان با h1
یک متن با p
یک بخش با div
داخل یک متن از span استفاده کن
هدف امروز:
فقط اینو بفهمی که HTML یعنی: 👉 ساختار دادن به صفحه، نه ظاهرش

#html_lessons@devsourcech

نکته : HTML زبان برنامه‌نویسی نیست، مارک اپ و ساختاردهی است 📝🏗️
#hints@devsourcech

🌐
#معرفی_وبسایت_فرانت_اند@devsourcech

دوستان برای تمرین هم میتونید از سایت freecodecamp.org 🎓 استفاده کنید

📅 روز 2: لینک و تصویر
🎯 ورود به دنیای واقعی صفحات وب
🧠 لینک‌ها (a)
برای اینکه کاربر از یک صفحه به صفحه دیگه بره از تگ a استفاده می‌کنیم.
✨ مثال ساده:

<a href="https://google.com">برو به گوگل</a>

⚡ نکته مهم:
اینhref یعنی آدرس مقصد لینک
می‌تونه هر سایتی باشه یا حتی صفحه داخلی سایت خودت

🖼️ تصاویر (img)
برای نمایش عکس از تگ img استفاده می‌کنیم.
✨ مثال:

<img src="image.jpg" alt="عکس نمونه">

🧠 توضیح:
اینsrc یعنی آدرس عکس
و alt وقتی عکس لود نشه یا برای سئو استفاده میشه

📂 مسیرها (Paths)
🔹 1. Relative Path (مسیر نسبی)
یعنی فایل داخل پروژه خودته

<img src="./images/photo.jpg">

👉 یعنی: داخل پوشه پروژه بگرد

🔹 2. Absolute Path (مسیر کامل)
یعنی آدرس کامل اینترنتی

<img src="https://example.com/image.jpg">

👉 یعنی: از اینترنت مستقیم بیار

🎯 تمرین امروز
یک صفحه HTML بساز و این کارها رو انجام بده:
یک عکس داخل صفحه نمایش بده 🖼️
یک لینک به گوگل بساز 🔗
از هر دو نوع مسیر (relative و absolute) استفاده کن
🚀 هدف امروز:
یاد بگیری صفحه فقط متن نیست، بلکه: 👉 لینک + تصویر = وب واقعی

#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

📅 روز 3: فرم‌ها در HTML
🎯 ساخت تعامل با کاربر (ورود اطلاعات)
🧠 فرم (form) چیه؟
فرم‌ها برای گرفتن اطلاعات از کاربر استفاده میشن، مثل:
نام
ایمیل
پسورد
پیام
تقریباً همه سایت‌ها (لاگین، ثبت‌نام، سرچ) فرم دارن.
🧱 تگ form

<form>
  <!-- input ها اینجا قرار می‌گیرن -->
</form>

👉 یعنی: یک بخش برای گرفتن اطلاعات


اینپوت⌨️ input (ورودی)
برای گرفتن اطلاعات از کاربر استفاده میشه.
✨ مثال:

<input type="text" placeholder="نام خود را وارد کنید">

🔘دکمه button
برای ارسال یا انجام یک کار:

<button>ارسال</button>

🧠 چند نوع مهم input
🔹 متن:

<input type="text">

🔹 ایمیل:

<input type="email">

🔹 رمز:

<input type="password">

🧪 مثال کامل فرم

<form>
  <input type="text" placeholder="نام">
  <br><br>

  <input type="email" placeholder="ایمیل">
 
  <input type="password" placeholder="رمز عبور">

  <button>ثبت نام</button>
</form>

🎯 تمرین امروز
یک فرم بساز که شامل این‌ها باشه:
نام
ایمیل
رمز عبور
دکمه ارسال
👉 فقط ساختار مهمه، ظاهر مهم نیست
🚀 هدف امروز:
یاد بگیری: 👉 سایت فقط نمایش نیست، تعامل هم داره
#html_lessons@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir

#سورس_کد@devsourcech
#Hamed
#تکنولوژی
اگر این مطلب براتون مفید بود، با زدن روی تیک زیر پست اعلام حضور کنید ✅
‌
⚠️ آدرس کانال در تلگرام( حتما جوین بشید )
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه نویسی:
🥇 https://devsource.ir