ریویو پروژه NextJS
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو می‌کنیم.

مشاهده ویدئو

درباره ماب ریویو:
ماب ریویو یه رویداد دوستانه و خودمونی برای انتقال تجربه دانشه.
توی این رویداد دور هم جمع می‌شیم تا یک سورس کد رو با هم ریویو کنیم و درباره پرکتیس‌های بهتر و دلایلش صحبت کنیم.

مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!
15:22 چطوری یک خط خالی توی کد روی استخدام شدن شما تاثیر می‌ذاره؟
31:30 اضافه کردن فرمتر و لینتر
33:03 از public چیزی ایمپورت نکنید
34:47 کی و چطوری باید کامپوننتمون رو بشکنیم؟
42:35 مسئله useless fragment
43:51 یکپارچگی پیاده سازی و اسم گذاری
45:15 مسئله layout
48:04 مسئله اسم گذاری
53:46 بررسی کامپوننت Banner
55:11 چرا نباید از z-index و overflow زیاد استفاده کنید
55:54 تعداد خط‌های کامپوننت Code Smell حساب می‌شه.
57:42 نحوده درست مدیریت z-index
59:51 اصل Single Responsibility تو فرانت اند
01:02:52 چه چیزهایی رو نباید توی کامپوننت برد؟
1:08:55 درک مسئله Spacing
1:11:07 پیاده سازی درست تم dark و light با taildinw
1:16:23 انکپسوله کردن مسئولیت های کامپوننت ها
1:20:07 کی از margin استفاده کنیم کی از padding
1:22:00 از grid و flex تو در تو استفاده نکنید.
1:27:34 به CSS فحش ندیم
1:28:32 فرق بین space و gap توی tailwind
1:30:25 جمع بندی

#fullstacksjs #mobreview #css #react #typescript #nextjs

🔸#typescript-generator

#tips
@TheRaymondDev

🔶 #Typescript OOP

وقتی میتونید از this داخل استاتیک متدها استفاده کنید که متدی که کال میکنید هم استاتیک باشه

when calling a static method inside another static method, you must reference it using this or the class name itself

class HTTPClient {
  static request(url: string, method: string = 'GET'): void {
    console.log(`Requesting ${url} with method ${method}`);
  }

  static fetchData(url: string): void {
    // Calling the static method using "this"
    this.request(url, 'GET');

    // Calling the static method using the class name
    HTTPClient.request(url, 'POST');
  }
}

// Usage
HTTPClient.fetchData('https://api.example.com/data');

#tips

@TheRaymondDev

آرایه با عضو اجباری توی تایپ‌اسکریپت؟ 🤔

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

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

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

#typescript

میخواستم بیشتر nestjs یاد بگیرم ولی خب با این وضعیت نت نمیشد
بخش زیادی از داکیومنت nestjs رو بصورت markdown ذخیره کردم که میتونید راحت استفاده کنید
بخش sample گیتهاب نست که مثالاشو گذاشته هم اوردم تنها کاری که باید بکنید دپندنسی هارو اینستال کنید که اگه نت هم نداشتید بشه یاد گرفت

#nestjs #typescript

@TheRaymondDev

‏از خوبی های ‎#TypeScript همین بس که اگه تازه واردش شدی و حس کردی با ارور های مکرر داره این پیام رو القا میکنه که چقدر برنامه نویس بیشعوری هستی، بدون که قبلشم همینقدر بیشعور بودی منتهی کسی به روت نمیاورده. :))

<ali Azizjahan/>

@DevTwitter

🔥 تفاوت جاوااسکریپت و تایپ‌اسکریپت

جاوااسکریپت یه زبان Dynamic هست یعنی تایپ داده‌ها رو موقع اجرا مشخص می‌کنه و این باعث میشه گاهی با خطاهای عجیب روبرو بشی
تایپ‌اسکریپت اومده تا این مشکل رو حل کنه و به جاوااسکریپت قدرت Static Typing بده یعنی از همون اول تایپ متغیرها رو مشخص کنی و قبل از اجرا خطاها رو ببینی
در واقع تایپ‌اسکریپت مثل یه لایه امن روی جاوااسکریپت عمل می‌کنه و کدتو تمیزتر و قابل پیش‌بینی‌تر می‌کنه
یه نکته مهم بدون تایپ‌اسکریپت تبدیل به جاوااسکریپت میشه پس برای اجرا همیشه به JS برمی‌گرده

#TypeScript #JavaScript

CODELAB | GpCodeLab

🔵 عنوان مقاله
be experimenting with

🟢 خلاصه مقاله:
از کتابخانه‌های زیادی که می‌خواهند به مخاطبان بیشتری برسند، در حال حاضر نسخه‌های JavaScript ارائه می‌شود تا هم در مرورگر و هم در محیط‌های Node.js، Deno و Bun در دسترس باشند. مزیت اصلی، دسترسی گسترده، توزیع ساده از طریق npm و تجربه کاربری یکپارچه بین فرانت‌اند و بک‌اند است.

دو مسیر رایج وجود دارد: بازنویسی بومی با TypeScript برای ارائه APIهای استاندارد، تایپ‌های دقیق و قابلیت tree-shaking؛ یا پورت از زبان‌های سطح پایین به WebAssembly برای حفظ کارایی و استفاده مجدد از کد موجود. ابزارهایی مانند Emscripten، wasm-bindgen و ابزارهای Go این کار را تسهیل می‌کنند و با ارائه TypeScript declarations سطح استفاده‌پسند ایجاد می‌شود.

چالش‌ها شامل انتخاب بین ESM و CJS، بهینه‌سازی اندازه باندل و دارایی‌های WASM، محدودیت‌های مرورگر (فایل‌سیستم و سوکت خام)، تفاوت‌های اجرا در Node.js/Deno/Bun، و مدیریت کارایی و زمان راه‌اندازی است. استفاده از Web Workers، بارگذاری تدریجی، بنچمارک‌گیری در محیط‌های مختلف و مستندسازی دقیق کمک‌کننده است. در حوزه امنیت نیز باید مراقب زنجیره تأمین، نسخه‌بندی SemVer، تست و انتشار مرحله‌ای بود.

نمونه‌های موفق شامل OpenCV.js، نسخه WASM از SQLite، TensorFlow.js، ONNX Runtime Web و Pyodide است که نشان می‌دهند با طراحی API مناسب و ابزار درست، پورت‌های جدی عملی است. قاعده تصمیم‌گیری: اگر کتابخانه سنگین و بهینه است، WASM انتخاب خوبی است؛ اگر هدف تجربه توسعه‌دهنده در اکوسیستم JavaScript است، بازنویسی با TypeScript بهتر است؛ و برای قابلیت‌های سخت‌افزاری/سیستمی، رویکرد هیبریدی یا سمت سرور منطقی است. با پیشرفت WebAssembly/WASI، WebGPU و پلتفرم‌های edge مانند Cloudflare Workers و Vercel Edge، زمان مناسبی برای آزمایش و تکرار است.

#JavaScript #WebAssembly #TypeScript #NodeJS #Deno #npm #OpenSource

🟣لینک مقاله:
https://golangweekly.com/link/175359/web

➖➖➖➖➖➖➖➖
👑 @gopher_academy

📌برای کسایی که نتونستن شرکت کنن

🚀 سورس‌کد و منابع ارائه‌های ایونت اخیرمون منتشر شد!

توی این ایونت دو ارائه‌ی فوق‌العاده داشتیم که حالا می‌تونید به راحتی سراغ کدها و مثال‌هاش برید 👇

💬 ارائه‌ی آقای سالار نیلی درباره‌ی TypeScript
در این ارائه به مفاهیم پایه تا نکات پیشرفته‌ی TypeScript پرداخته شد و مثال‌های عملی جذابی بررسی شدن.
📦 سورس‌کد و اسلایدها در گیت‌هاب:
🔗 github.com/codehalic/workshop-typescript-presentation

⚙️ ارائه‌ی پوریا باباعلی درباره‌ی Flux Pattern
توی این ارائه معماری Flux و نحوه‌ی استفاده از اون در پروژه‌های React مورد بحث قرار گرفت.
📦 سورس‌کد و نمونه‌کدهای ارائه در گیت‌هاب:
🔗 github.com/codehalic/workshop-flux-pattern-presentation

📚 پیشنهاد می‌کنیم حتماً سری به این ریپوها بزنید، کدها رو بررسی کنید و اگر سوالی داشتید با ما در میون بذارید 🙌

#TypeScript #Flux #Workshop #Codehalic #Frontend #WebDev


@codehalics

🚀 سورس‌کد و منابع ارائه‌های ایونت اخیرمون منتشر شد!

توی این ایونت دو ارائه‌ی فوق‌العاده داشتیم که حالا می‌تونید به راحتی سراغ کدها و مثال‌هاش برید 👇

💬 ارائه‌ی آقای سالار نیلی درباره‌ی TypeScript
در این ارائه به مفاهیم پایه تا نکات پیشرفته‌ی TypeScript پرداخته شد و مثال‌های عملی جذابی بررسی شدن.
📦 سورس‌کد و اسلایدها در گیت‌هاب:
🔗 github.com/codehalic/workshop-typescript-presentation

⚙️ ارائه‌ی پوریا باباعلی درباره‌ی Flux Pattern
توی این ارائه معماری Flux و نحوه‌ی استفاده از اون در پروژه‌های React مورد بحث قرار گرفت.
📦 سورس‌کد و نمونه‌کدهای ارائه در گیت‌هاب:
🔗 github.com/codehalic/workshop-flux-pattern-presentation

📚 پیشنهاد می‌کنیم حتماً سری به این ریپوها بزنید، کدها رو بررسی کنید و اگر سوالی داشتید با ما در میون بذارید 🙌

#TypeScript #Flux #Workshop #Codehalic #Frontend #WebDev


@codehalics