#react

این کتابخونه‌های React به کارت میاد! (پارت یک) 🚀

1 -🛠 فریم‌ورک‌های React

- اگه می‌خوای یه پروژه React با رندر سمت کاربر (client-rendered) درست کنی، بهترین انتخابت Vite هست که دیگه جاش رو به Create React App داده که قدیمی شده و دیگه استفاده نمی‌شه.

- اگه قصد داری یه پروژه React با رندر سمت سرور یا فول‌استک (full-stack) بسازی، Next.js بهترین و محبوب‌ترین فریم‌ورک فول‌استک برای React هست.

- اگه بعضی از ویژگی‌های Next.js برات سنگین و سخت به نظر میاد، یه جایگزین عالی برای ساخت سایت‌های داینامیک و استاتیک Remix هست.

- حالا اگه دنبال ساخت یه اپلیکیشن هستی که سریع لود بشه و بیشتر محتواش استاتیک باشه، Astro هم یه گزینه خیلی خوبه.

2 - 📦 مدیریت پکیج ها

برای نصب همه کتابخونه‌هایی که تو این راهنما گفته شده، نیاز به یه چیزی به اسم مدیر بسته (Package Manager) داری.‼️

- اگه Node.js رو نصب کرده باشی، که لازمه برای اینکه پروژه React رو روی کامپیوترت اجرا کنی، می‌تونی از NPM استفاده کنی که تو سال ۲۰۲۴ هم هنوز یه انتخاب عالیه. البته جایگزین‌های دیگه‌ای هم برای NPM اومده، مثل Yarn و PNPM.

- جدیدترین جایگزین که تو دنیای جاوا اسکریپت داره سریع محبوب می‌شه، Bun هست. Bun هم یه محیط اجرایی جاوااسکریپته مثل Node و هم یه مدیر بسته، و به عنوان یه جایگزین سریع‌تر برای Node و NPM معرفی شده.

©️<CodeHub/>

#CSS

شورتکات های استایل های css که میتونه به دردتون بخوره.

🔴<CodeHub/>

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

🔗 @E2EChatbot
🔗 Source Code

برای حمایت از پروژه می‌تونید توی گیت‌هاب به ریپازیتوری استار بدید ⭐️ روی کدش مشارکت کنید، باگ‌ها رو گزارش کنید یا اینکه این پست رو به دیگران و افراد فنی صاحب نظر بفرستید تا دیده بشه و ما رو کمک‌مون کنن. 🤍

@Yasha

#Figma_Template

Figma Template: Restaurant

Difficulty : ⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

🔸اگه یه زمانی خواستین برای پروژه های next داکیومنت بنویسین حتما یه نگاه به nextra بندازین میتونه واقعا خیلی عالی و تمیز کار رو واستون در بیاره.

🔴<CodeHub/>

#فکت

شاید فکر کنین برنامه نویسی کار راحتیه و حالا مثلا که چی!!! اما جالبه بدونین که در سال 1969 یك برنامه نویس با حذف یك خط فاصله در کد موشک مارینر موجب انفجار اون پس از بلند شدن از زمین شد و 630 میلیون دلار خسارت رو دست ناسا گذاشت و حدود 20 کارمند ناسا از دنیا رفتن😐

🔴 <CodeHub/>

🔸بیاید که یه بار برای همیشه این مشکل وسط گذاشتن دیو ها رو حل کنیم😂

تو این مقاله با جزییات هفت روش توضیح داده شده که در جاهای مختلف میتونه به کار بیاد.

🔗 https://www.joshwcomeau.com/css/center-a-div/

🔴 <CodeHub/>

#fun

همه چی با یه ریستارت حل میشه😂

#Figma_Template

Figma Template: YourBank

Difficulty : ⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

#fun

واقعا این چند روز بهم ثابت شده که کدی که کار میکنه کار میکنه دیگه مهم نیست چطوری 😂

🔴 <CodeHub/>

ولی این نوع پست ها جدا از جذاب بودنشون واقعا چالش خوبیه که آدم خودشو به چالش بکشه🔥

داخل این چنل میتونید پست های خوبی ببینید که خیلی کار را بنداز و جالبن❤️❤️

#CSS

چیت شیت Child Selector ها در css که در جای زمان و مکان مناسب خیلی میتونه بدرد بخور باشه.

🔴 <CodeHub/>

#Next

✨ رندرینگ در Next.js ✨

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

📌 رندرینگ سمت سرور (SSR):
صفحه وب ابتدا در سرور رندر می‌شود و به‌صورت HTML کامل به کاربر ارسال می‌گردد. این روش برای بهبود سئو و دسترسی سریع به محتوای اولیه عالی است.

📌 رندرینگ سمت کاربر (CSR):
صفحه ابتدا به‌صورت HTML خالی بارگذاری شده و جاوا اسکریپت محتوا را در مرورگر ایجاد می‌کند. این روش برای اپلیکیشن‌های تک‌صفحه‌ای (SPA) که تعاملات زیادی دارند، مناسب است.

📌 رندرینگ استاتیک (SSG):
صفحات به‌صورت استاتیک در زمان ساخت تولید شده و با سرعت بالا به کاربران ارائه می‌شوند. این روش برای سایت‌هایی با محتوای ثابت ایده‌آل است.

📌 رندرینگ هیبریدی (ISR):
ترکیبی از روش‌های استاتیک و دینامیک است که به شما اجازه می‌دهد صفحات را بعداً بدون نیاز به بازسازی کل سایت به‌روزرسانی کنید.

Next.js با این روش‌های مختلف، سرعت و انعطاف بی‌نظیری برای ایجاد اپلیکیشن‌های وب پیشرفته فراهم می‌کند. 💡

🔴 <CodeHub/>

ذات فرانت‌اند به طرز وحشتناکی پیچیده‌ست. اینو زمانی متوجه می‌شید که بخواید یه تیکه از کد یه باندلر مثل ESbuild یا Rollup رو بخونید. یا بخواید درباره الگوریتم‌های Virtual DOM توی مثلا ریکت یا Vue بخونید. فکر می‌کنید ساده‌اس چون فقط یه تیکه از رنگ دادن به دکمه رو توی فرانت دیدید.

@DevTwitter | <Yasha/>

AioClock
در ماه ۴ هزار دانلود داره 🚀
یک شرکت بزرگ تو برزیل هم داره ازش استفاده میکنه و تو لینکدین ازم تشکر کردن خیلی حس خوبی داشت :))

واقعا دوست دارم فول تایم اوپن سورس کار کنم. و مثلا همین پروژه naked sqlalchemy ام حاصله دو شب کار بود.
ولی متاسفانه هنوز به نقطه ای نرسیدم که بتونم کسب درآمد کنم از پروژه اوپن سورسم
برای همین به حمایتتون نیاز دارم این حمایت میتونه یک استار گیت هاب باشه, که پروژه هام بیشتر دیده شه و به اون نقطه نزدیک تر شم 🫶

فریم ورک/لایبری های مفید اوپن سورسی که تاحالا منتشر کردم:

AioClock - A modern python scheduling framework with dependency injection and modular integration support. Alternative for Rocketry or apscheduler

Naked SQLA - A simple and lightweight object mapper around SQLAlchemy core, simple alternative to SQLAlchemy ORM.


CfCrawler - Cloudflare scraper and cralwer written in Async, In-place library for HTTPX. Crawl website that has cloudflare enabled, easier than ever!

@PyBackendHub

#Figma_Template

Figma Template: Agency

Difficulty :  ⭐️⭐⭐

🔗Click for Get Link

🔴</CodeHub>

#fun

وقتی دیگه از ChatGPT و اینترنت چیزی در نمیاد!😂

🔴 <CodeHub/>

تکنولوژی و ابزار فرانت به سرعتی در حال تغییره که آدم از پشت نمیتونه برسه بک اند و حوزه های دیگه رو نمیدونم ولی شما فرض کن تو فرانت داری با پنج شیش تا ابزار کار میکنی‌ برای مثال:

React
Next
CSS Frameworks
Bundlers
JavaScript

ریکت و نکست که دارن به سرعت فضایی آپدیت میدن نکست که دیگه اصلا هر دو هفته یچیز‌ جدید میده الان مثلا Server actions اضافه کرد که خیلی کاربردیه

ریکت بزودی ورژن جدید که تغییرات جامع داره رو میده بیرون

برای فریم وورک های سی اس اس تیلویند از یه طرف و shadcn UI و ... دارن به کلی صنعت رو به سویه جدید میبرن

جاوااسکریپت تو ورژن جدیدش که هنوز در مرحله تایید هستش کلی فیچر جدید داره به زبان اضافه میکنه

هر روز باید کلی وقت بزاری اخبار بخونی و نه تنها از جدیدترین چیز ها اطلاع داشته باشی بلکه باید به اونا تسلط هم داشته باشی مثلا همین سرور اکشن های نکست به سرعت توسط کامیونیتی مورد استقبال قرار گرفت

بنظرم یه باید عجله کنیم تو یادگیری و پیاده سازی

چون به مدت دیگه نه تنها دیگه نمیتونید مباحث رو توی نه ماه تا یکسال جمع کنید بلکه استخدام هم سخت تر میشه چون حجم پیش نیاز ها به قدری سنگین داره میشه که نه تنها مسائل پایه رو باید تسلط داشته باشید و اینکه اگه یه کوچولو حواستون به مسیرتون نباشه ممکنه دچار
Tutorial Hell
بشید، خلاصه خواستم بگم بهتون اگه از فضای مجازی دور شدید بخاطر اعتیاد آور بودنش یه راه حلی پیدا کنید آپدیت هارو بگیرید هر روز به کم وقت بزارید چیزای جدید بخونید اوناییم که وقت کافی نمیزارن و تخصصشون محکوم به فنا هستن، تلخه ولی واقعیته

دوران دانشجویی هم باید کار کنید رو تخصصتون هم درستون بخونید شرایط طاقت فرساست

@DevTwitter | <Mohammad Mousavi/>