⚜️ چطوری سایتی که داریم توسعه میدیم رو روی موبایل ببینیم ؟
خلاصه :
توی این ویدیو یاد میگیریم چطوری سایتی که داریم توسعه میدیم رو روی موبایل خودمون بدون دیپلوی کردن روی سرور و بدون هیچ هزینه ای تست کنیم :)
🎞 لینک ویدیو:
https://youtu.be/uGXRDu0H5iU
🔖 #Web, #وب, #Frontend, #Backend
👤 Matin Soleymani
💎 Channel: @DevelopixWeb
خلاصه :
توی این ویدیو یاد میگیریم چطوری سایتی که داریم توسعه میدیم رو روی موبایل خودمون بدون دیپلوی کردن روی سرور و بدون هیچ هزینه ای تست کنیم :)
🎞 لینک ویدیو:
https://youtu.be/uGXRDu0H5iU
🔖 #Web, #وب, #Frontend, #Backend
👤 Matin Soleymani
💎 Channel: @DevelopixWeb
❤9👍2👎1
Forwarded from | کانال توسعهدهندگان جاوااسکریپت |
This media is not supported in your browser
VIEW IN TELEGRAM
✨ با استفاده از کتابخونه Cursify میتونید افکتهای انیمیشنی زیبایی به Cursor موس در محیط وب بدید. این کتابخونه با React و Typenoscript و Tailwind و Framer Motion ساخته شده و بهراحتی در پروژهها بهصورت کامپوننت قابل استفاده است.
🌐 Website
💎 Channel: @DevelopixJavanoscript
🌐 Website
💎 Channel: @DevelopixJavanoscript
👍10❤1👎1
Forwarded from Developix Support
سلام
پرسشنامه پیش رو با هدف درک بهتر رفتار و نیازهای کسبوکارهای اینترنتی ایرانی در استفاده از ابزارهای پرداخت توسط یک تیم پژوهشی مستقل طراحی شده است. نتایج این پژوهش به ما کمک میکند تا ابزارهایی کارآمدتر و منطبق با نیازهای واقعی شما ارائه دهیم. تکمیل این پرسشنامه کاملاً بینام است و هیچ اطلاعات شخصی از شما ذخیره نخواهد شد. پاسخهای شما نقش کلیدی در بهبود خدمات ابزارهای پرداختی اینترنتی در کشور دارد، بنابراین از شما خواهشمندیم با دقت و صداقت به سوالات پاسخ دهید. زمان لازم برای تکمیل: حدود 5 دقیقه لطفاً برای شروع پرسشنامه، روی لینک زیر کلیک کنید و ما را در این مسیر همراهی کنید.
.
https://survey.porsline.ir/s/lEtAnSw8
.
سپاس فراوان از همکاری صمیمانه شما
پرسشنامه پیش رو با هدف درک بهتر رفتار و نیازهای کسبوکارهای اینترنتی ایرانی در استفاده از ابزارهای پرداخت توسط یک تیم پژوهشی مستقل طراحی شده است. نتایج این پژوهش به ما کمک میکند تا ابزارهایی کارآمدتر و منطبق با نیازهای واقعی شما ارائه دهیم. تکمیل این پرسشنامه کاملاً بینام است و هیچ اطلاعات شخصی از شما ذخیره نخواهد شد. پاسخهای شما نقش کلیدی در بهبود خدمات ابزارهای پرداختی اینترنتی در کشور دارد، بنابراین از شما خواهشمندیم با دقت و صداقت به سوالات پاسخ دهید. زمان لازم برای تکمیل: حدود 5 دقیقه لطفاً برای شروع پرسشنامه، روی لینک زیر کلیک کنید و ما را در این مسیر همراهی کنید.
.
https://survey.porsline.ir/s/lEtAnSw8
.
سپاس فراوان از همکاری صمیمانه شما
👍1
Forwarded from | کانال توسعهدهندگان جاوااسکریپت |
💎 وبسایت UIVerse منبعی غنی از کامپوننتهای پر استفاده و زیبا برای طراحی UI هست که میتونید بهراحتی کدهای مربوط به کامپوننتهای مورد علاقهتون دریافت کنید. لازم بهذکر هست که تمامی کامپوننتها Open-Source هستند و بدون مشکل میتونید استفاده کنید.
🌐 UIVerse.io
💎 Channel: @DevelopixJavanoscript
🌐 UIVerse.io
💎 Channel: @DevelopixJavanoscript
🔥8❤4👍1
Forwarded from | Erfan's Notes | via @DevelopixBot
⭕️ دوره آموزش برنامهنویسی مینی اپ تلگرام
💠 در این دوره به آموزش برنامهنویسی مینی اپ تلگرام میپردازیم، از مباحث پایه و عمومی شروع میکنیم و مفاهیم رو یاد میگیریم.
💠 در این دوره به آموزش برنامهنویسی مینی اپ تلگرام میپردازیم، از مباحث پایه و عمومی شروع میکنیم و مفاهیم رو یاد میگیریم.
❤1👍1
Forwarded from Developix Support
استخدام NOC Cloud Engineer از مسیر آموزش
در بوتکمپ تخصصی Network Operations Center-Tier 1
۸۰ ساعت | آنلاین
🔸آموزش در این بوتکمپ زیر نظر متخصصان با سابقه حوزه شبکه و دیتاسنتر انجام میشود و هدف آن استخدام در موقعیت شغلی کارشناس مرکز عملیات شبکه از میان نفرات برتر بوتکمپ است.
📌برخی از سرفصلهای دوره:
- نصب و مدیریت لینوکس (بر اساس LPIC1 سفارشی)
- اصول شبکه (+Network / CCNA)
- امنیت پایه (+Security)
- مانیتورینگ سرویسها و کار با ابزارهای حرفهای
- مدیریت Incident و تیکتینگ
این دوره مناسب چی کسانی است⁉️
-علاقهمندان به شبکه، IT و امنیت؛
-فارغالتحصیلان یا دانشجویان رشتههای کامپیوتر و برق؛
-کسانی که میخواهند خیلی سریع وارد بازار کار فناوری اطلاعات شوند؛
-افرادی که به دنبال اولین تجربه شغلی در حوزه NOC و شبکه هستند.
📆 تاریخ شروع بوتکمپ: ۳ آبان۱۴۰۴
🔰 بدون پیشنیاز؛ همراه با پروژه عملی و کوئیز
🧾مدرک پایان دوره
🔗 اطلاعات بیشتر و پیشثبتنام👇
https://B2n.ir/mq4649
___
فناپکمپس؛ رشد در بازار کار دیجیتال
@Fanapcampus
در بوتکمپ تخصصی Network Operations Center-Tier 1
۸۰ ساعت | آنلاین
🔸آموزش در این بوتکمپ زیر نظر متخصصان با سابقه حوزه شبکه و دیتاسنتر انجام میشود و هدف آن استخدام در موقعیت شغلی کارشناس مرکز عملیات شبکه از میان نفرات برتر بوتکمپ است.
📌برخی از سرفصلهای دوره:
- نصب و مدیریت لینوکس (بر اساس LPIC1 سفارشی)
- اصول شبکه (+Network / CCNA)
- امنیت پایه (+Security)
- مانیتورینگ سرویسها و کار با ابزارهای حرفهای
- مدیریت Incident و تیکتینگ
این دوره مناسب چی کسانی است⁉️
-علاقهمندان به شبکه، IT و امنیت؛
-فارغالتحصیلان یا دانشجویان رشتههای کامپیوتر و برق؛
-کسانی که میخواهند خیلی سریع وارد بازار کار فناوری اطلاعات شوند؛
-افرادی که به دنبال اولین تجربه شغلی در حوزه NOC و شبکه هستند.
📆 تاریخ شروع بوتکمپ: ۳ آبان۱۴۰۴
🔰 بدون پیشنیاز؛ همراه با پروژه عملی و کوئیز
🧾مدرک پایان دوره
🔗 اطلاعات بیشتر و پیشثبتنام👇
https://B2n.ir/mq4649
___
فناپکمپس؛ رشد در بازار کار دیجیتال
@Fanapcampus
Forwarded from | Erfan's Notes |
حدودا یک ماه از ریلیز شدن نسخه 3.0 وباسمبلی (WASM) میگذره و الان فرصت کردم درموردش بخونم، تغییرات مهمی که داشته رو پایین مینویسم.
💠 پشتیبانی از Address Space های 64 بیت
تا قبل از این نسخه، وباسمبلی محدود به آدرسهای i32 بود و نمیتونست بیشتر از 4GB رو آدرسدهی کنه، ولی پشتیبانی از i64 اضافه شده و این محدودیت عملا بینهایت شده، هرچند که همچنان مرورگرها حداکثر اجازه allocate کردن 16GB رو میدن.
💠 پشتیبانی از Memory های چندگانه
تا قبل از این نسخه، هر ماژول وباسمبلی فقط محدود به یک Memory بود و برای تفکیک باید ماژولها Split میشدند، ولی در این نسخه قابلیت داشتن Memory های متعدد برای یک ماژول اضافه شده.
💠 پشتیبانی از Garbage Collection
در این نسخه یک افزونه با عنوان wasm-gc اضافه شده که در سطوح پایین میتونه مموری رو بهصورت خودکار مدیریت کنه، کامپایلرها میتونند Struct ها و آرایهها و بعضی Integer ها رو به صورت تگ شده تعریف کنند و خود wasm وظیفه allocation و lifetime شون رو برعهده بگیره.
💠 پشتیبانی از Tail Call ها
قابلیت Tail Call به وباسمبلی اضافه شده، این ویژگی از زبانهای فانکشنال الگو گرفته، به این معنی که فانکشنها میتونند در آخرین اکشنشون یک فانکشن دیگهای رو کال کنند بدون اینکه فضایی از Stack رو اشغال کنند، این موضوع در کال های Recursive اهمیت زیادی داره.
💠 پشتیبانی از Exception ها
پشتیبانی از Exception های try و catch در وباسمبلی اضافه شده، تا قبل از این برای چنین کاری باید از JS استفاده میشد.
💠 پشتیبانی از String های جاوا اسکریپت
قابلیت رد و بدل کردن مستقیم String های جاوا اسکریپت بدون نیاز به تبدیل دو طرفه اضافه شده، میتونید مقادر String رو به صورت مستقیم بهعنوان externref پاس بدید و سمت wasm تغییرات لازم رو روش اعمال کنید و سمت JS تحویل بگیرید.
و البته کلی قابلیت دیگه که اگر دوست داشتید میتونید اینجا بخونید.
تا قبل از این نسخه، وباسمبلی محدود به آدرسهای i32 بود و نمیتونست بیشتر از 4GB رو آدرسدهی کنه، ولی پشتیبانی از i64 اضافه شده و این محدودیت عملا بینهایت شده، هرچند که همچنان مرورگرها حداکثر اجازه allocate کردن 16GB رو میدن.
تا قبل از این نسخه، هر ماژول وباسمبلی فقط محدود به یک Memory بود و برای تفکیک باید ماژولها Split میشدند، ولی در این نسخه قابلیت داشتن Memory های متعدد برای یک ماژول اضافه شده.
در این نسخه یک افزونه با عنوان wasm-gc اضافه شده که در سطوح پایین میتونه مموری رو بهصورت خودکار مدیریت کنه، کامپایلرها میتونند Struct ها و آرایهها و بعضی Integer ها رو به صورت تگ شده تعریف کنند و خود wasm وظیفه allocation و lifetime شون رو برعهده بگیره.
قابلیت Tail Call به وباسمبلی اضافه شده، این ویژگی از زبانهای فانکشنال الگو گرفته، به این معنی که فانکشنها میتونند در آخرین اکشنشون یک فانکشن دیگهای رو کال کنند بدون اینکه فضایی از Stack رو اشغال کنند، این موضوع در کال های Recursive اهمیت زیادی داره.
پشتیبانی از Exception های try و catch در وباسمبلی اضافه شده، تا قبل از این برای چنین کاری باید از JS استفاده میشد.
قابلیت رد و بدل کردن مستقیم String های جاوا اسکریپت بدون نیاز به تبدیل دو طرفه اضافه شده، میتونید مقادر String رو به صورت مستقیم بهعنوان externref پاس بدید و سمت wasm تغییرات لازم رو روش اعمال کنید و سمت JS تحویل بگیرید.
و البته کلی قابلیت دیگه که اگر دوست داشتید میتونید اینجا بخونید.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
اصل تکمسئولیتی (Single Responsibility Principle) یعنی هر ماژول یا کامپوننت فقط یک دلیل برای تغییر داشته باشد. در پروژههای وب پیچیده، رعایت SRP باعث میشود کد قابل تستتر، قابل تغییرتر و خواناتر شود. تجربهٔ عملی: وقتی کد را به واحدهای کوچکتر با مسئولیت مشخص تقسیم میکنید، باگها راحتتر پیدا و ویژگیهای جدید سریعتر اضافه میشوند.
مثال فرانتاند (React)
کامپوننت بد: هم دیتا میگیرد، هم وضعیت مدیریت میکند، هم رندر میکند.
تقسیم به مسئولیتها: یک
این تقسیم باعث میشود تست hook و view جداگانه امکانپذیر و تغییر منطق دریافت داده بدون لمس رندر انجام شود.
مثال بکاند (Node.js / Express)
بهجای نوشتن منطق اعتبارسنجی، منطق تجاری و دسترسی به دیتابیس در یک فایل کنترلر، آنها را جدا کنید:
این ساختار واحدها را قابل تست میکند و تغییر در لایهٔ ذخیرهسازی تأثیر کمتری روی کنترلر دارد.
برای مرجع بیشتر منابعی مثل Refactoring.Guru و کتاب "Clean Code" پیشنهاد میشوند. نکتهٔ عملی: اگر نوشتن تست برای یک تابع سخت است، احتمالاً آن تابع بیش از یک مسئولیت دارد — آن را شکسته و ساده کنید.
🔖 #Web #وب #Frontend #Backend #clean_code #SRP #React #Node.js #refactoring #architecture #best_practices
👤 Developix
💎 Channel: @DevelopixWeb
مثال فرانتاند (React)
کامپوننت بد: هم دیتا میگیرد، هم وضعیت مدیریت میکند، هم رندر میکند.
function Dashboard(){
const [data,setData]=useState(null);
useEffect(()=>{fetch('/api/items').then(r=>r.json()).then(setData)},[]);
function save(item){fetch('/api/items', {method:'POST', body:JSON.stringify(item)})}
return <div>{data?.map(i=><div key={i.id}>{i.name}</div>)}</div>
}تقسیم به مسئولیتها: یک
useFetch hook و یک Presentational کامپوننت:
function useFetch(url){
const [data,setData]=useState(null);
useEffect(()=>{fetch(url).then(r=>r.json()).then(setData)},[url]);
return data;
}
function DashboardView({data}){ return <div>{data?.map(i=><div key={i.id}>{i.name}</div>)}</div> }
function Dashboard(){ const data=useFetch('/api/items'); return <DashboardView data={data}/> }این تقسیم باعث میشود تست hook و view جداگانه امکانپذیر و تغییر منطق دریافت داده بدون لمس رندر انجام شود.
مثال بکاند (Node.js / Express)
بهجای نوشتن منطق اعتبارسنجی، منطق تجاری و دسترسی به دیتابیس در یک فایل کنترلر، آنها را جدا کنید:
// controller
async function createItem(req,res){ const item=await itemService.create(req.body); res.json(item) }
// service
async function create(data){ validate(data); return repository.insert(data) }
این ساختار واحدها را قابل تست میکند و تغییر در لایهٔ ذخیرهسازی تأثیر کمتری روی کنترلر دارد.
برای مرجع بیشتر منابعی مثل Refactoring.Guru و کتاب "Clean Code" پیشنهاد میشوند. نکتهٔ عملی: اگر نوشتن تست برای یک تابع سخت است، احتمالاً آن تابع بیش از یک مسئولیت دارد — آن را شکسته و ساده کنید.
🔖 #Web #وب #Frontend #Backend #clean_code #SRP #React #Node.js #refactoring #architecture #best_practices
👤 Developix
💎 Channel: @DevelopixWeb
👍7❤1👎1🔥1
Fastify — فریمورک وب سریع و سبک برای Node.js که برای عملکرد بالا و توسعهٔ روان طراحی شده. 🚀
هدف: پاسخدهی سریع به درخواستها، مصرف کمتر منابع و تجربهٔ توسعه بهتر با معماری پلاگینی و پشتیبانی از TypeScript.
مزایا و نکات کلیدی:
• ⭐ عملکرد بالا و بهرهوری بهتر نسبت به Express
• 🔌 اکوسیستم پلاگین با قابلیت گسترش آسان
• 📐 اعتبارسنجی مبتنی بر schema (AJV) برای APIهای امنتر
• 🧾 لاگینگ پیشفرض با pino و پشتیبانی از TypeScript
نمونهٔ نصب و استفادهٔ ساده:
موارد کاربرد: APIهای با بار بالا، میکروسرویسها، و سرویسهایی که به latency پایین حساساند. نکتهٔ عملی: از schemaها برای تایپ امن و مستندسازی خودکار استفاده کنید. ✅
مستندات و گیتهاب: Docs — GitHub
امتحانش کنید و تجربهتون رو در کانال به اشتراک بذارید. ⚡
#Fastify #NodeJS #توسعه_وب
🔖 #Web #وب #Frontend #Backend #Fastify #NodeJS #توسعه_وب
👤 Developix
💎 Channel: @DevelopixWeb
هدف: پاسخدهی سریع به درخواستها، مصرف کمتر منابع و تجربهٔ توسعه بهتر با معماری پلاگینی و پشتیبانی از TypeScript.
مزایا و نکات کلیدی:
• ⭐ عملکرد بالا و بهرهوری بهتر نسبت به Express
• 🔌 اکوسیستم پلاگین با قابلیت گسترش آسان
• 📐 اعتبارسنجی مبتنی بر schema (AJV) برای APIهای امنتر
• 🧾 لاگینگ پیشفرض با pino و پشتیبانی از TypeScript
نمونهٔ نصب و استفادهٔ ساده:
npm install fastify
const fastify = require('fastify')({ logger: true })
fastify.get('/', async (request, reply) => {
return { hello: 'world' }
})
fastify.listen({ port: 3000 })
.then(() => console.log('listening on 3000'))
.catch(err => fastify.log.error(err))
موارد کاربرد: APIهای با بار بالا، میکروسرویسها، و سرویسهایی که به latency پایین حساساند. نکتهٔ عملی: از schemaها برای تایپ امن و مستندسازی خودکار استفاده کنید. ✅
مستندات و گیتهاب: Docs — GitHub
امتحانش کنید و تجربهتون رو در کانال به اشتراک بذارید. ⚡
#Fastify #NodeJS #توسعه_وب
🔖 #Web #وب #Frontend #Backend #Fastify #NodeJS #توسعه_وب
👤 Developix
💎 Channel: @DevelopixWeb
👍2
Next.js 🚀 برای توسعهدهندگان React
اگر با React کار میکنی و هنوز از Next.js استفاده نکردی، عملاً کلی قابلیت آمادهٔ Production رو از دست میدی؛ از SSR تا routing و image optimization بدون دردسر.
چرا Next.js؟
• Server-Side Rendering و Static Generation آمادهٔ استفاده 📦
• File-based routing؛ هر فایل در
• Image Optimization و
• API Routes برای ساخت backend سبک داخل همون پروژه
نصب سریع
یک صفحه ساده:
برای پروژههای Dashboard، Landing Page، یا SaaS که SEO و سرعت مهم است، Next.js معمولاً انتخاب امن و استاندارد است.
Docs رسمی 👇
nextjs.org/docs
github.com/vercel/next.js
یک پروژه کوچک با Next.js بساز و کمکم ساختار پیشفرضش رو با نیازهای خودت تطبیق بده؛ تجربهٔ خوبی برای معماری Frontend مدرن میدهد. ⚙️
🔖 #Web #وب #Frontend #Backend #Next_js #React #Web #SSR #Frontend
👤 Developix
💎 Channel: @DevelopixWeb
اگر با React کار میکنی و هنوز از Next.js استفاده نکردی، عملاً کلی قابلیت آمادهٔ Production رو از دست میدی؛ از SSR تا routing و image optimization بدون دردسر.
چرا Next.js؟
• Server-Side Rendering و Static Generation آمادهٔ استفاده 📦
• File-based routing؛ هر فایل در
pages/ یک route است• Image Optimization و
next/image برای لود سریعتر• API Routes برای ساخت backend سبک داخل همون پروژه
نصب سریع
npx create-next-app@latest my-app
cd my-app
npm run dev
یک صفحه ساده:
export default function Home() {
return <h1>سلام Next.js 👋</h1>
}
برای پروژههای Dashboard، Landing Page، یا SaaS که SEO و سرعت مهم است، Next.js معمولاً انتخاب امن و استاندارد است.
Docs رسمی 👇
nextjs.org/docs
github.com/vercel/next.js
یک پروژه کوچک با Next.js بساز و کمکم ساختار پیشفرضش رو با نیازهای خودت تطبیق بده؛ تجربهٔ خوبی برای معماری Frontend مدرن میدهد. ⚙️
🔖 #Web #وب #Frontend #Backend #Next_js #React #Web #SSR #Frontend
👤 Developix
💎 Channel: @DevelopixWeb
👍5👎1
📌 در این قطعه کد JavaScript، روی یک آرایه از اعداد عملیات sort، map و join انجام شده است. دقت کنید که
خروجی نهایی اجرای این کد در کنسول چیست؟
🔖 #Web #وب #Frontend #Backend
👤 Developix
💎 Channel: @DevelopixWeb
sort بهصورت پیشفرض روی رشتهها کار میکند و همچنین scope متغیر factor در تابع multiply تغییر میکند.خروجی نهایی اجرای این کد در کنسول چیست؟
const nums = [3, 12, 2, 21, 5];
function multiply(arr, factor = 2) {
arr.sort();
factor = 10;
return arr
.map((n, i) => n * (factor - i))
.join("-");
}
console.log(multiply(nums));
console.log(nums.join(","));
🔖 #Web #وب #Frontend #Backend
👤 Developix
💎 Channel: @DevelopixWeb
👍3
🌙 Dark Mode با یک کلاس روی <html>
خیلی وقتها برای پیادهسازی Dark Mode کلی if/else توی JS و کلی selector توی CSS مینویسیم، درحالیکه میشه همهچیز رو تمیز و مقیاسپذیر با یک کلاس روی ریشهی سند مدیریت کرد.
✅ ایده:
فقط روی تگ
🔧 نمونهی ساده:
و در JS فقط یک بار toggle انجام میشه:
✨ نکات کاربردی:
• با CSS Variable فقط یکبار رنگها رو تعریف میکنی و هرجا لازم بود از
• اگر تعداد رنگها زیاد شد، هنوز هم فقط در دو بلاک
• میشه این الگو رو با
📚 برای جزئیات بیشتر درباره CSS Custom Properties:
MDN - Using CSS custom properties
امتحان این الگو روی یک صفحهی ساده، سریعترین راه برای مرتب کردن تم پروژههای بعدی است و جلو کلی refactor دردناک رو میگیره.
🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web
👤 Developix
💎 Channel: @DevelopixWeb
خیلی وقتها برای پیادهسازی Dark Mode کلی if/else توی JS و کلی selector توی CSS مینویسیم، درحالیکه میشه همهچیز رو تمیز و مقیاسپذیر با یک کلاس روی ریشهی سند مدیریت کرد.
✅ ایده:
فقط روی تگ
<html> یک کلاس مثل .dark ست میشه و بقیهی استایلها بر اساس همون کلاس عوض میشن. این الگو توی خیلی از Design Systemها و کتابخونهها استفاده میشه.🔧 نمونهی ساده:
/* حالت پیشفرض (Light) */
:root {
--bg: #ffffff;
--fg: #111827;
}
/* وقتی Dark Mode فعاله */
html.dark {
--bg: #0f172a;
--fg: #e5e7eb;
}
body {
background-color: var(--bg);
color: var(--fg);
transition: background-color 150ms ease, color 150ms ease;
}
و در JS فقط یک بار toggle انجام میشه:
const root = document.documentElement;
function toggleTheme() {
root.classList.toggle('dark');
}
✨ نکات کاربردی:
• با CSS Variable فقط یکبار رنگها رو تعریف میکنی و هرجا لازم بود از
var(--bg) و var(--fg) استفاده میکنی.• اگر تعداد رنگها زیاد شد، هنوز هم فقط در دو بلاک
:root و html.dark ویرایش میشن و باقی کامپوننتها دست نمیخورن.• میشه این الگو رو با
prefers-color-scheme هم ترکیب کرد تا بر اساس تم سیستمعامل، کلاس dark رو ست کنی.📚 برای جزئیات بیشتر درباره CSS Custom Properties:
MDN - Using CSS custom properties
امتحان این الگو روی یک صفحهی ساده، سریعترین راه برای مرتب کردن تم پروژههای بعدی است و جلو کلی refactor دردناک رو میگیره.
🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web
👤 Developix
💎 Channel: @DevelopixWeb
❤5
Forwarded from ابر ویراک
زیرساختی مطمئن برای کسب و کارهای آنلاین
📞 همین حالا با ما تماس بگیرید و این فرصت فوقالعاده رو از دست ندید!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
👨💻 سوال کد برای توسعهدهندگان وب (JavaScript)
خروجی نهایی اجرای کد زیر در console چیست؟
به تفاوت execution context در arrow function و تابع معمولی، و همینطور رفتار
خروجی دقیق
🔖 #Web #وب #Frontend #Backend
👤 Developix
💎 Channel: @DevelopixWeb
خروجی نهایی اجرای کد زیر در console چیست؟
به تفاوت execution context در arrow function و تابع معمولی، و همینطور رفتار
this و arguments دقت کنید.function outer() {
const result = [];
const obj = {
value: 10,
normal: function (x) {
result.push("normal:" + this.value + "," + arguments.length);
(function () {
result.push("iife:" + (this.value ?? "undefined"));
})();
},
arrow: (y) => {
result.push("arrow:" + (this.value ?? "undefined") + "," + (typeof arguments));
}
};
obj.normal(1, 2);
obj.arrow(3);
return result.join(" | ");
}
console.log(outer());خروجی دقیق
console.log(outer()) را بنویسید (همان رشته کامل، با همان ترتیب و کاراکترها).🔖 #Web #وب #Frontend #Backend
👤 Developix
💎 Channel: @DevelopixWeb
👍2👎2
Forwarded from کانال رسمی تک نت | Taknet
⏰ تعداد محدود – برای استفاده از این تخفیف ویژه سریع اقدام کن!
برای اطلاعات بیشتر و سفارش، تماس بگیر:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Clean Architecture در یک سرویس ساده Node.js 🧱
یکی از مشکلهای همیشگی پروژههای وب این است که بعد از چند ماه، همهچیز توی یک فایل یا یک لایه قاطی میشود: route منطق بیزینسی دارد، مستقیم به DB وصل میشود و تست گرفتن هم کابوس میشود.
اینجا جایی است که ایدهٔ Clean Architecture بهدرد میخورد: جداکردن منطق بیزینسی از زیرساخت (مثل Express، DB، HTTP، و غیره) تا کد قابلتست و قابلتوسعه بماند. 🎯
در سادهترین حالت، فقط همین اصل را رعایت کنید:
Use Case / Domain لایهٔ مرکزی ➜ Framework و DB در لبهها
یعنی:
• Route فقط ورودی/خروجی HTTP را مدیریت کند ✅
• منطق اصلی در یک Service یا Use Case مستقل باشد ✅
• Service هیچ وابستگی مستقیم به Express یا driver خاص DB نداشته باشد ✅
یک نمونهٔ خیلی ساده در Node.js + Express:
حالا لایهٔ زیرساخت (Express + یک repo ساده):
چند نکتهٔ عملی از تجربهٔ پروژههای واقعی 🌱
• منطق اصلی را همیشه در Service / Use Case نگه دارید، نه داخل controller / route.
• وابستگیها را بهسمت لبهها ببرید؛ Domain نباید Express، HTTP status code یا driver خاص DB را بشناسد.
• این ساختار روی Next.js API Routes، Nest.js، Laravel و Django هم کاملاً قابلپیادهسازی است.
برای مطالعهٔ عمیقتر ایدهها:
Layered Architecture - Martin Fowler
Refactoring.Guru - Design Patterns
همانقدر که پروژه بزرگتر میشود، همین جداسازی ساده بین Domain و Infrastructure میتواند نجاتدهنده باشد. دفعهٔ بعدی که یک feature جدید مینویسید، از همین الگوی کوچک شروع کنید و قدمبهقدم کد را تمیزتر نگه دارید. 🚀
🔖 #Web #وب #Frontend #Backend #Clean_Architecture #Node_js #Express #Design_Patterns #Web_Development #Backend #Refactoring
👤 Developix
💎 Channel: @DevelopixWeb
یکی از مشکلهای همیشگی پروژههای وب این است که بعد از چند ماه، همهچیز توی یک فایل یا یک لایه قاطی میشود: route منطق بیزینسی دارد، مستقیم به DB وصل میشود و تست گرفتن هم کابوس میشود.
اینجا جایی است که ایدهٔ Clean Architecture بهدرد میخورد: جداکردن منطق بیزینسی از زیرساخت (مثل Express، DB، HTTP، و غیره) تا کد قابلتست و قابلتوسعه بماند. 🎯
در سادهترین حالت، فقط همین اصل را رعایت کنید:
Use Case / Domain لایهٔ مرکزی ➜ Framework و DB در لبهها
یعنی:
• Route فقط ورودی/خروجی HTTP را مدیریت کند ✅
• منطق اصلی در یک Service یا Use Case مستقل باشد ✅
• Service هیچ وابستگی مستقیم به Express یا driver خاص DB نداشته باشد ✅
یک نمونهٔ خیلی ساده در Node.js + Express:
// userService.js (لایه Domain / Use Case)
class UserService {
constructor(userRepo) {
this.userRepo = userRepo; // وابستگی به interface، نه به Express
}
async registerUser(data) {
const { email, password } = data;
if (!email || !password) {
throw new Error("Invalid data");
}
const exists = await this.userRepo.findByEmail(email);
if (exists) {
throw new Error("Email already used");
}
// اینجا میتوانید hashing، ruleها و ... را قرار دهید
return this.userRepo.create({ email, password });
}
}
module.exports = UserService;
حالا لایهٔ زیرساخت (Express + یک repo ساده):
// userRepo.js (لایه Infrastructure)
const users = [];
module.exports = {
async findByEmail(email) {
return users.find(u => u.email === email) || null;
},
async create(user) {
users.push(user);
return user;
}
};
// routes.js
const express = require("express");
const UserService = require("./userService");
const userRepo = require("./userRepo");
const router = express.Router();
const userService = new UserService(userRepo);
router.post("/register", async (req, res) => {
try {
const user = await userService.registerUser(req.body);
res.status(201).json(user);
} catch (err) {
res.status(400).json({ error: err.message });
}
});
module.exports = router;
چند نکتهٔ عملی از تجربهٔ پروژههای واقعی 🌱
• منطق اصلی را همیشه در Service / Use Case نگه دارید، نه داخل controller / route.
• وابستگیها را بهسمت لبهها ببرید؛ Domain نباید Express، HTTP status code یا driver خاص DB را بشناسد.
• این ساختار روی Next.js API Routes، Nest.js، Laravel و Django هم کاملاً قابلپیادهسازی است.
برای مطالعهٔ عمیقتر ایدهها:
Layered Architecture - Martin Fowler
Refactoring.Guru - Design Patterns
همانقدر که پروژه بزرگتر میشود، همین جداسازی ساده بین Domain و Infrastructure میتواند نجاتدهنده باشد. دفعهٔ بعدی که یک feature جدید مینویسید، از همین الگوی کوچک شروع کنید و قدمبهقدم کد را تمیزتر نگه دارید. 🚀
🔖 #Web #وب #Frontend #Backend #Clean_Architecture #Node_js #Express #Design_Patterns #Web_Development #Backend #Refactoring
👤 Developix
💎 Channel: @DevelopixWeb