قطعا همتون با Cdn ها آشنا هستید اما به صورت تخصصی چیه و چه کاری انجام میده؟🧐


در اصل CDN مخفف Content Delivery Network میباشد و وظیفه اون رسوندن و توزیع محتوا و اطلاعات شما به سرور بازدیدکننده سایت هست.
با استفاده از این سیستم، سرعت ارسال اطلاعات به بازدیدکنندگان سایت افزایش پیدا می‌کنه و زمان بارگذاری صفحات تا حد زیادی کاهش پیدا می‌کنه.


مزایای استفاده از CDN چیه ؟

1⃣ ارتباط و همخوانی راحت با مدیریت محتوای وردپرس

2⃣ بهبود وضعیت سئو سایت

3⃣ سرعت بیشتر سایت و افزایش رضایت بازدیدکنندگان

4⃣ افزایش تعداد صفحات بررسی شده در روز توسط ربات های گوگل

5⃣ کاهش مصرف پهنای باند و ترافیک هاست


تاثیر CDN بر روی عملکرد سایت چطوره ؟

◀️ شبکه توزیع محتوا یا همان CDN تمامی سرورهای شبکه جهانی اینترنت رو پوشش میده. بنابراین زمانیکه شما این سیستم رو برای سایتتون فعال میکنین، اطلاعات شما روی تمامی این سرورها کپی و ذخیره میشه و زمانیکه یک بازدیدکننده به سایت یا وبلاگ شما وارد میشه محتوای سایت شامل تصاویر و متون رو از نزدیک ترین سرور دریافت میکنه و مستقیما به هاست یا سرور شما وصل نمیشه. این کار موجب بهبودی قابل توجهی تو عملکرد سایت شما داره.

◀️ در اصل CDN تمام اطلاعات ثابت شما مثل تصاویر، کدهای CSS و javascript و فایلهای ویدئویی شمارو پشتیبانی میکنه و تنها اطلاعاتی که قابل تغییر و بروزرسانی هستن مثل متون و کدهای HTML از سرور اصلی شما کال میشن. با این کار مصرف پهنای باند هاست شما کاهش پیدا میکنه و هزینه ای که سالانه بابت اون میدید کاهش چشمگیری خواهد داشت.

◀️ تفاوت سرعت و عملکرد برای خودتون یا افرادی که در نزدیکی سرور اصلی شما هستند آنچنان تفاوت زیادی نداره، ولی برای کسایی که از خارج از کشور به سایت شما وارد میشن این افزایش سرعت ناشی از CDN کاملا محسوسه. با توجه به اینکه سایتهای ایرانی معمولا سرور و هاستشونو از خارج و کشورهایی مثل آلمان و آمریکا تهیه میکنند و عموم بازدیدکنندگان از داخل کشور هستن، استفاده از CDN میتونه خیلی موثر باشه.


#cdn #web #performance
@CodeModule

احراز هویت با jwt 🗝🔒

در واقع JSON Web Token یا JWT یک استاندارد وب هست که روشی فشرده و خود شمول (self-contained) رو جهت انتقال امن اطلاعات بین مقصد های مختلف رو توسط یک شی JSON تعریف می‌کنه. این اطلاعات قابل تصدیق و اطمینان هستن، از این‌ رو که به صورت دیجیتال امضا می‌شن. JWT ها توسط یک کلید خصوصی (با استفاده از الگوریتم HMAC) و یا یک جفت  private key یا public key (توسط الگوریتم RSA) قابل امضا شدن هستن.


دو روش کلی و پرکاربرد اعتبارسنجی سمت سرور، برای برنامه‌های سمت کاربر وب وجود داره⬇️


✅ روش اول Cookie-Based:

برای Authentication جزو پرکاربردترین روش ها هست و تو این حالت به ازای هر درخواست، یک کوکی برای اعتبارسنجی کاربر به سمت سرور ارسال میشه (و برعکس).

✅ روش دوم Token-Based:

برای Authentication که بر مبنای ارسال یک توکن امضا شده به سرور، به ازای هر درخواسته.


مزیت‌های استفاده‌ی از روش مبتنی بر توکن چیه؟

🔵وابستگی به domain صدورش نداره و اصالتش بر اساس روش‌های رمزنگاری تصدیق می‌شه

🔵در حین کار با توکن‌ها، نیازی به ذخیره‌ اطلاعات داخل session سمت سرور نیست چون توکن، خود شمول (self-contained) هست.

🔵امروزه همینقدر که استاندارد JSON Web Token رو پیاده سازی کرده باشید، امکان کار با انواع و اقسام پلتفرم‌ها و کتابخانه‌ها رو هم دارید.

🔵حین استفاده از روش مبتنی بر توکن، امکان توزیع تمام فایل‌های برنامه (جاوا اسکریپت، تصاویر و غیره) توسط CDN وجود داره.


پ.ن: خود شمول به معنای اینه که payload توکن، شامل تمام اطلاعات مورد نیاز جهت اعتبارسنجی یک کاربره تا دیگه نیازی به کوئری گرفتن هر باره‌ از دیتابیس نباشه ( تو این روش مرسومه که فقط یکبار از دیتابیس کوئری گرفته بشه و اطلاعات مرتبط با کاربر رو امضای دیجیتال، و بعد ارسال می‌کنه )


#jwt #web #token #json
@CodeModule

🔵وب سوکت چیه و چه کاربردی داره؟

وب سوکت یک پروتکل ارتباطیه که کانال های ارتباطی دو طرفه رو از طریق یک اتصال TCP برقرار می کنه. این امکان برقراری ارتباط بی‌ درنگ و رویداد محور بین یک کلاینت و یک سرور و فراهم می‌کنه.

در واقع به این معنیه که سرویس گیرنده و سرور می تونن داده هارو تو هر زمان بدون نظرسنجی مداوم برای همدیگه ارسال کنن. مثل بازی های آنلاین چندکاربره ، سیستم های چت آنلاین و ... . فشارتقاضا برای ایجاد اپلیکیشن‌هایی که بصورت هم زمان تعامل برقرار کنن از اثرات حضور Websocket هست.

✅مزایای وب سوکت:

◀️ارتباط دوطرفه
◀️کاهش تاخیر
◀️کاهش ترافیک شبکه
◀️افزایش سرعت و کارایی
◀️پشتیبانی از cross-domain

❌معایب وب سوکت:

◀️پشتیبانی از مرورگر : اگرچه اکثر مرورگرهای مدرن از WebSockets پشتیبانی میکنن، اما بعضی از مرورگرهای قدیمی اینطور نیستن. این میتونه دسترسی برنامه شما رو محدود کنه و به مکانیسم های بازگشتی اضافی برای مرورگر های قدیمی نیاز داشته باشه.

◀️محدودیت‌های پراکسی و فایروال : برخی از سرورهای پراکسی و فایروال‌ها ممکنه اتصالات WebSocket رو مسدود کرده یا در اون اختلال ایجاد کنن.

◀️مقیاس پذیری : سوکت های وب یک ارتباط دائمی بین مشتری و سرور برقرار میکنن، که می تونه منابع سرورو در هنگام برخورد با بسیاری از اتصالات همزمان تحت فشار قرار بده.

◀️حالت Stateful Nature : بر خلاف HTTP سنتی که بدون حالته، WebSocket ها حالت دارن. این به این معنیه که سرور باید وضعیت اتصالو برای هر مشتری حفظ کنه که منجر به افزایش استفاده از حافظه و چالش‌های بالقوه مقیاس‌ پذیری می‌شه.

◀️ملاحظات امنیتی : با اتصال مداوم ایجاد شده توسط WebSockets، نیاز به اقدامات امنیتی مناسب برای محافظت در برابر آسیب‌ پذیری‌ های احتمالی،  (XSS) و (CSRF) وجود داره.

برای یادگیری این تکنولوژی می‌تونید به Reference معتبر زیر مراجعه کنید. ⬇️


Document 🌕

#protocol #websocket #web 
@CodeModule

🌾 همه چیز راجب وب سرور Nginx

در واقع Nginx که به صورت engine-ex تلفظ میشه، یک وب سرور اوپن سورسه‌ که از زمان ارائه موفق و اولیه خود به عنوان وب سرور، کاربرد داشته و امروزه به عنوان پروکسی معکوس، حافظه کش HTTP و سیستم(Load Balancing) تو انواع سرور مجازی هم استفاده میشه.

تفاوتی نداره که شما سرور مجازی آلمان رو دارید یا سرور مجازی ایران، در همه موارد می‌تونید از Nginx استفاده کنید.

با پیشرفت تکنولوژی های در بستر وب، وب سرور NGINX هم همراه با اون رشد کرده و امروزه از تمام اجزای وب مدرن، از جمله WebSocket، HTTP / 2، gRPC و پخش چند فرمت ویدیویی (HDS، HLS، RTMP و سایر موارد) هم پشتیبانی میکنه. همچنین در صورت نیاز به خرید ssl هم می‌تونید به راحتی روی سرور nginx اونو نصب کنید.


✅چند تا از مزایای Nginx


🔢 تجربهٔ‌ کاربری بهتر

استفاده از انجین ایکس زمان انتظار کاربران برای بارگذاری وب‌سایت رو کاهش میده و اینجوری تجربۀ کاربری ارزشمندی برای اونا میسازه.

🔢 سرعت بالاتر

با هدایت ترافیک به سرورهای مختلف، علاوه‌بر افزایش سرعت وب‌سایت، عملکرد اون هم ارتقا پیدا می‌کنه. سرعت بالا به‌جز برای سئو سایت در ساختن تجربه کاربری بهتر هم موثره.

🔢 قیمت به‌صرفه و خوب

این وب‌سرور نسبت به سایر وب‌سرورها قیمت معقول تری داره.

🔢 مدیریت درخواست‌های زیاد

همونطور که بالاتر ذکر کردیم، یکی از مهم‌ترین مزیت‌های انجین ایکس رسیدگی همزمان به تعداد زیاد درخواست‌هاست.

🔢 ارتقا در زمان اجرا

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


❌چند تا از معایب Nginx


از nginx انتظار ندارید که گل بی‌خار باشه! انجین ایکس هم مثل همه وب‌سرورهای دیگه معایبی داره مثل:

🔢 به‌روزرسانی‌های کم و ویژگی‌های محدود

از آنجایی که افراد کمتری از این وب‌سرور استفاده می‌کنند، به‌روزرسانی‌هایی که این سازمان ارائه می‌کند نسبت به سایر رقبا کمتر است و ویژگی‌های کمتری روی وب‌سرور در اختیار کاربران قرار می‌گیرد.

🔢 نیاز به دانش فنی بالا

کار کردن با وب سرور انجین ایکس کار هر کسی نیست! تنها افرادی که اطلاعات فنی نسبتاً خوبی دارن می‌تونن از کار کردن با این وب‌سرور لذت ببرن.

⚡️به عنوان جانشین Nginx از چه وب سرور هایی میشه استفاده کرد؟

🔵وب سرور MS IIS
🔵وب سرور Apache
🔵وب سرور lite speed

اگر سایت بزرگ و پربازدیدی دارید، Nginx همون وب‌سروریه که به کار شما میاد؛ چرا که می‌تونه به‌طور هم‌زمان هزاران درخواست مخاطبان وب‌سایت شمارو پردازش کنه، بدون اینکه سرعت وب‌سایت کاهش پیدا کنه.


#nginx #webserver #web
@CodeModule

چرا باید از Vite.js استفاده کنیم؟ 💌

(ویت) Vite.js ابزاریه که بر اساس زبان برنامه نویسی جاوا اسکریپت ساخته شده و قصد داره تو توسعه سریع تر پروژه به توسعه دهندگان کمک کنه. 

در واقع Vite.js یک Build Tool و Local Development Server هست.

هدف از توسعه چنین ابزاری نیز ساده‌‌سازی فرایند توسعه وب اپلیکیشن‌ها و اجرای اوناست. اصلی‌ترین ویژگی که باعث می‌شه تا توسعه دهنده ها از این ابزار استفاده کنن اینه که می‌تونه به صورت داینامیک یک وب اپلیکیشنو اجرا بکنه، در این حالت در زمان Reload کردن برنامه، نیازی نیست که کل اونو از اول کامپایل یا Recompile کنید.

🗝ویژگی‌های کلیدی ViteJS

ابزارهایی مانند Webpack و Rollup کمک زیادی به جریان توسعه وب اپلیکیشن‌ها کردن. اما این موارد نسبتا قدیمین و با پیچیده تر شدن کدبیس اپلیکیشن‌ها، تو بعضی از سناریوها نمی‌تونن پاسخگوی نیازای ما باشن. برای مثال Rollup دیگه جوابگوی وب اپلیکیشن‌های پیچیده نیست و به همین دلیل ViteJS ایجاد شد تا این مشکلاتو حل کنه.

💙دلیل محبوبیت Vite.js چیه؟

یکی از اصلی‌ترین ويژگی‌هایی که باعث می‌شه ViteJS محبوب باشه سرعت بالای اون تو Reloading هست. Dev Server هایی که از Bundler استفاده می‌کنن معمولا برای اجرا کردن کد به زمان زیادی نیاز داشتن، اما حالا Vite.JS با داشتن پشتیبانی محلی از اکمااسکریپت یا ESM مستقیما اونارو تو مرورگر اجرا میکنه و زمان اجرا کدارو بالاتر برده.
در واقع ViteJS این میزان از سرعتو مدیون مدل HMR یا Hot Module Replacement هست.

‼️به این هم اشاره کنم که HMR به این معنیه که ماژول‌ها می‌تونن به صورت مستقل از المان‌های دیگه خودشانو جایگزین یا بروزرسانی کنن. البته ابزارهای دیگه ای هم هستن که از این مدل پشتیبانی میکنن اما Vite.JS با استفاده کردن از ESM به صورت محلی یا لوکال، سرعت این حالت رو بیش از پیش سرعت داده.

❓به صورت پیشفرض از چه قالب های جاوا اسکریپتی پشتیبانی می‌کنه؟

🔵 قالب Vanilla
🔵 قالب Vue.js
🔵 قالب React.js
🔵 قالب Preact.js
🔵 قالب Svelte.js
🔵 قالب Solid.js
🔵 قالب Qwik.js

در کل Vite.js یک ابزار باورنکردنیه که نسبتاً جدیده و ویژگی‌های منحصربه‌فرد خودشو داره. تجربه توسعه‌ سریع‌تر و پشتیبانی از قالب های مختلف دلیل محبوبیت و دوست داشتنی بودن این ابزاره.


Document 🌕

#js #web
@CodeModule

😎 چقدر راجب DNS اطلاعات دارید؟

سرویس DNS، یکی از پایه‌های اینترنته و بیشتر ما در طول روز بدون اینکه بدونیم، از DNS ها استفاده می‌کنیم. تو این پست، با هم به بررسی مفهوم و کارایی DNS می پردازیم و برخی از مزایا و معایبش رو شرح میدیم.

📶 سرویس DNS چیه و چجوری کار میکنه؟

سرویس DNS که مخفف Domain Name System هست، فهرست توزیع شده‌ ایه که اسم دامنه قابل خواندن توسط انسان، مثل www.CodeModule.com رو به اعداد خوانا برای کامپیوترا، یعنی IP آدرس تبدیل میکنه.

✅ در واقع DNS سیستمیه که اسم دامنه وب رو سازماندهی میکنه و اونها رو برای همه کسایی که میخوان به شبکه وصل بشن، قابل‌فهم‌تر میکنه.

❔ وقتی که از یک سایت بازدید میکنید، کامپیوتر شما یک سری مراحل رو برای تبدیل آدرس وب قابل‌خوندن انسان، به یک آدرس IP قابل‌خوندن ماشین دنبال میکنه. سرویس DNS از یک دیتابیس سلسله مراتبی استفاده میکنه که شامل اطلاعاتی در مورد نام دامنه هست. فرض کنید ک شما تو مرورگر خودتون اسم دامنه ی سایتیو وارد میکنید.
اولین کاری که کامپیوتر شما انجام خواهد داد، ارسال درخواست به سرور DNS محلی سیستم عامله تا بررسی کنه که ایا اصلا پاسخ مورد نیاز شما در حافظه نهان یا همون  (Cache) کامپیوتر ذخیره شده یا نه. اگر در حافظه پنهان پیدا نشد، درخواستتون از طریق اینترنت به یک یا چند سرور DNS فرستاده میشه، که به‌طور کلی توسط ارائه‌دهنده خدمات اینترنت شما با اونها ارتباط برقرار میشه.

اگر اطلاعات لازم تو این سرورهای DNS پیدا نشه، درخواست به سرورهای خارجی دیگه ای فرستاده میشه.

✅مزایای سرویس DNS چیه؟

🔵تسهیل استفاده از اینترنت

🔵ثبات و سرعت بالا

🔵مفید برای موتور های جستجو

❌معایب سرویس DNS چیه ؟

🔵 احتمال رو به رو شدن با DNS Attack

🔵آسیب پذیری های امنیتی مثل ویروس مخرب و ....


⚠️برای جلوگیری از مشکلات امنیتی میتونید از آنتی ویروس های مطمئن استفاده کنید

این سرویس نقش حیاتی تو ترجمه اسم دامنه‌های قابل خوندن توسط انسان، به آدرس‌های IP قابل خوندن توسط ماشین ایفا میکنه. این فرآیند، ناوبری و ارتباط بی‌وقفه بین دستگاه‌های موجود تو وب رو امکان‌ پذیر میکنه. همچنین یکی از دانش های پایه برنامه نویسان وب محسوب میشه که آشنایی باهاش براتون یک مزیت حساب میشه! 👨‍💻


#dns #web #basic
@CodeModule

✌️ در جاوا اسکریپت بدون استفاده از کتابخانه، متن رو به گفتار تبدیل کن !

✅با پراپرتی speechSynthesis این کار به راحتی امکان پذیره!

وظیفه speechSynthesis، ایجاد و کنترل صدای گفتاری (تبدیل متن به گفتار) هست.
برای استفاده از speechSynthesis، میتونید از متدهای مختلفی استفاده کنید تا متن مورد نظر و به گفتار تبدیل، و کنترل کنید (جلوتر ازشون نام میبریم).

برای شروع ابتدا باید یک آبجکت از جنس SpeechSynthesisUtterance بسازیم تا امکان استفاده از پراپرتی speechSynthesis رو داشته باشیم:

let to_speak = new SpeechSynthesisUtterance('this is a test'); 
 
speechSynthesis.speak(to_speak); 

🔵در خط اول کد بالا، یک شئ از جنس SpeechSynthesisUtterance ساختیم و نیازه که یک پارامتر بهش پاس بدیم که اون پارامتر، باید یک string باشه که بتونه اون string رو تلفظ کنه.

🔵در مرحله بعد ما برای اینکه بتونیم متن رو تلفظ کنیم، باید speechSynthesis رو صدا کنیم که خودش شامل چندین متد از جمله speak ، pause ، resume و ... میشه که جهت کنترل صدا هست. اینجا برای تبدیل متن به گفتار نیازه که از متد speak استفاده کنیم.

👨‍💻متد speak جهت تلفظ متن استفاده میشه، بنابراین این متد رو به speechSynthesis اضافه میکنیم و آبجکتی که اول ساختیم و به عنوان پارامتر بهش پاس میدیم و کار تمام.

⚠️این پراپرتی در تمام بروزر ها ساپورت میشه و با مشکل مواجه نخواهید شد.


#js #web
@CodeModule

⚡️پرفورمنس سایتت رو بسنج !

توی این پست یک سایت بهتون معرفی میکنم که با استفاده از اون، میتونید سایت مد نظرتون رو از بابت Performance ،Structure ،LCP و LBT بسنجید و انالیزشون کنید🏋️‍♀️

⚠️ جهت استفاده از این سایت، باید Vpn روشن کنید

🔵Website

#web #performance #tools
@CodeModule

🔐با SSO و کاربرد اون آشنا بشید

کاربران روزانه از تعداد زیادی از سامانه ها و برنامه های کاربردی استفاده میکنن و رمزهای عبور پیچیده، برای هر کدوم از این سیستم ها چالشیه که با اون روبه رو هستن. Single Sign-On راه حل مناسبی برای این مسئله هست.

🧐‏(Single Sign On (SSO چیه؟

‏(Single Sign On (SSO یک سرویس متمرکز تایید هویت هست که در اون کاربر تنها با استفاده از یک حساب کاربری (نام کاربری و رمز عبور)، میتونه به چندین برنامه یا سایت دسترسی داشته باشه. برای مثال وقتی که به یکی از سرویس های گوگل مثل Gmail وارد میشید، امکان دسترسی به سایر سرویس ها مثل YouTube، Google Drive، Google Docs و … رو هم خواهید داشت.

👌همچنین یکی از قابلیت های اصلی این سرویس ایجاد یک Security tunnel بین کامپیوتر کاربر و سرور مرکزی هست که باعث میشه، اطلاعات محرمانه کاربران، تحت پروتکل های امنیتی جابجا بشن.

❓سرویس SSO چجوری کار میکنه؟

🔢 سامانه یا برنامه مورد نظر رو ابتدا بررسی میکنه که آیا هویت شما قبلا از طریق SSO تایید شده یا نه. در صورت تایید امکان دسترسی به شما داده میشه و در غیر این صورت شمارو به درگاه ورود SSO میبره.

🔢 سپس شما باید نام کاربری و رمز عبوری که برای ورود به سامانه های سازمان استفاده میکنید رو وارد کنید.

🔢 سامانه Single Sign On درخواست تایید هویت کاربران رو به دایرکتوری کاربران سازمان ارسال می‌کنه و در صورت تایید، توکن کاربر در سامانه SSO ایجاد میشه.

🔢 بعد از ورود، سامانه سرویس گیرنده اطلاعات تایید هویت رو در قالب توکن به مرورگر شما منتقل میکنه تا با هر بار مراجعه به صفحات جدید، اعتبار شما حفظ بشه.

روش های تایید هویت با SSO⬇️

✅ کلمه عبور

✅ رمز یک بار مصرف

✅ توکن و کارت هوشمند

✅ بیومتریک و اثر انگشت


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

Document 🌕

#sso #web
@CodeModule