دو رویکرد اصلی برای احراز هویت کاربر

احراز هویت مبتنی بر نشست (Session)

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

فرض کنید یک مسافر فقط یک شماره بلیت برای پرواز خود دریافت می‌کند و تمام اطلاعات دیگر در پایگاه داده شرکت هواپیمایی ذخیره می‌شود.

این روش به شرح زیر کار می‌کند:

کاربر درخواست ورود به سیستم می‌دهد و این درخواست به سرور داخلی ارسال می‌شود.
بک‌اند یک نشست با استفاده از یک کلید مخفی ایجاد می‌کند و داده‌های آن را در مخزن نشست ذخیره می‌کند.
سرور یک کوکی با یک شناسه نشست منحصر به فرد به کلاینت ارسال می‌کند.
کاربر درخواست جدیدی می‌دهد و مرورگر شناسه نشست را همراه با درخواست ارسال می‌کند.
سرور با استفاده از شناسه نشست، کاربر را احراز هویت می‌کند.
احراز هویت مبتنی بر JWT

در این روش، اطلاعات نشست در مخزن نشست ذخیره نمی‌شود.

تمام اطلاعات در توکن (JWT) موجود است.

فرض کنید شما یک بلیت هواپیما همراه با تمام جزئیات موجود در بلیت، اما به صورت رمزگذاری شده، دریافت می‌کنید.

این روش به شرح زیر کار می‌کند:

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

اطلاعات کاربر در یک مکان جداگانه (مثل یک پایگاه داده) ذخیره می‌شود.
به کاربر یک شناسه (مثل شماره بلیت) داده می‌شود که به این اطلاعات اشاره می‌کند.
هر بار که کاربر درخواست می‌دهد، این شناسه را ارائه می‌دهد تا سرور اطلاعات او را پیدا کند.
احراز هویت مبتنی بر JWT:

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

هر دو روش مزایا و معایب خود را دارند و انتخاب بهترین روش به عوامل مختلفی مانند امنیت، مقیاس‌پذیری و پیچیدگی پیاده‌سازی بستگی دارد.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏Locomotive Scroll — یک پلاگین جذاب و آسان برای استفاده برای ایجاد جلوه‌های اسکرول

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

🔗https://github.com/locomotivemtl/locomotive-scroll
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Google Web Toolkit مخفف GWT یک فریم ورک به زبان جاوا است برای برنامه نویسانی که میخواهد براحتی برنامه هایی بر پایه تکنولوژی آجاکس بوجود آورند.این تولکیت محصول گوگل است و نمونه های برنامه های آجاکس معروف در وب Gmail و Google Maps می باشند.

امروزه یکی از مشکلات برنامه نویسان که وقت بسیاری از آنها در حین نوشتن یک پروژه تلف میکند ، نبود یک استاندارد کامل در زبان جاوا-اسکریپت است که تمام مرورگر ها آن را پشتیبانی کنند. این کمبود باعث میشود برنامه نویس مجبور به تست برنامه تحت وب خود در مرورگرهای مختلف باشد. Google web toolkit شمارا از این مشکل نجات میدهد.

با کمک GWT کافیست برنامه خود را در زبان برنامه نویسی Java بنویسید و از کامپایلر GWT برای تبدیل کلاس های جاوای خود به کدهای html و javaScript استفاده کنید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

آنلاین یا آفلاین

آیا تا به حال متوجه شده‌اید که هنگام آفلاین شدن یک وب‌سایت، تصاویر یا عناصر موجود در صفحه تغییر می‌کنند تا از دست رفتن اتصال را به شما اطلاع دهند؟ این ترفند ساده اما موثر به کاربران کمک می‌کند تا بلافاصله متوجه شوند که مشکلی در اتصال اینترنتی وجود دارد.

این رفتار را می‌توان با استفاده از دو رویداد که به شما امکان می‌دهد تغییرات در وضعیت شبکه را ردیابی کنید، پیاده‌سازی کرد: online و offline. این رویدادها زمانی رخ می‌دهند که دستگاه کاربر به ترتیب آنلاین یا آفلاین می‌شود. مثالی از کد در تصویر بالا آمده است

علاوه بر گوش دادن به رویدادها، می‌توانید وضعیت فعلی شبکه را هنگام بارگذاری صفحه یا هر زمان دیگری بررسی کنید. این کار با استفاده از ویژگی navigator.onLine انجام می‌شود.

if (navigator.onLine) {
    console.log('شما آنلاین هستید');
} else {
    console.log('شما آفلاین هستید');
}

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏CSS @property
قاعده ای که به شما اجازه می‌دهد خصوصیات سفارشی یا به عبارت دیگر متغیرهای CSS را تعریف کنید.

ساختار:

@property <نام_خاصیت> {
  syntax: <نوع_داده>;
  inherits: <درست | نادرست>;
  initial-value: <مقدار_اولیه>;
}

<نام_خاصیت>: نام خاصیت سفارشی که می‌خواهید تعریف کنید (مثلاً، --my-color).

‏syntax: نوع داده‌هایی که برای این خاصیت مجاز هستند. این می‌تواند یک نوع داده مانند <color>، <length>، <number> و غیره باشد.

‏inherits: مشخص می‌کند که آیا این خاصیت از عناصر والد به ارث می‌رسد یا خیر. مقادیر می‌تواند true (به ارث می‌رسد) یا false (به ارث نمی‌رسد) باشد.

‏initial-value: مقدار پیش‌فرض برای خاصیت، در صورتی که مقدار دیگری مشخص نشده باشد.
چرا باید از CSS @property استفاده کنیم؟

تعیین نوع داده: به شما امکان می‌دهد نوع داده‌های هر خاصیت را مشخص کنید که باعث می‌شود کد شما قابل پیش‌بینی‌تر و ایمن‌تر شود.
کنترل وراثت: می‌توانید مشخص کنید که آیا خواص سفارشی از عناصر والد به ارث می‌رسند یا خیر.
مقدار پیش‌فرض: می‌توانید یک مقدار پیش‌فرض برای هر خاصیت تعریف کنید.
اشکال‌زدایی آسان: ابزارهای توسعه‌دهنده مرورگر به شما امکان می‌دهند تا به راحتی این خصوصیات را اشکال‌زدایی کنید.
پشتیبانی گسترده: در اکثر مرورگرهای مدرن پشتیبانی می‌شود.
پس چرا متغیرها را داخل :root تعریف کنیم؟

با استفاده از @property می‌توانید از تعریف متغیرها داخل :root اجتناب کنید و ساختار CSS خود را منظم‌تر کنید.

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

‏Glider.js به عنوان یک جایگزین سبک و سریع برای کاروسل‌های سنتی ارائه شده است که به ویژه برای دستگاه‌های موبایل مناسب است. این کتابخانه با حفظ قابلیت اسکرول طبیعی، تجربه کاربری بهتری را ارائه می‌دهد. نکته مهم حجم آن است که < 2.8kb میباشد

🔗https://nickpiscitelli.github.io/Glider.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Particles.js

‏Particles.js یک کتابخانه سبک‌وزن جاوا اسکریپت است که به شما امکان می‌دهد ذرات را در یک صفحه وب ایجاد و انیمیت کنید. این کتابخانه اغلب برای ایجاد پس‌زمینه‌های متحرک از ذرات استفاده می‌شود که می‌توانند تعاملی باشند و به اقدامات کاربر مانند حرکت ماوس واکنش نشان دهند.


🔗https://github.com/VincentGarreau/particles.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Clusterize.js

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

🔗https://clusterize.js.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

چند روز پیش، یک مثال جالب با استفاده از تگ HTML <wbr> ایجاد کردم. اگرچه این تگ به تنهایی بسیار جالب است، ممکن است راه حل بهتری وجود داشته باشد.
می‌توانیم از &shy استفاده کنیم که یک خط فاصله نرم در HTML است.
این به این معنی است که اگر کلمه خیلی طولانی باشد، یک خط فاصله (-) اضافه می‌کند، در غیر این صورت کلمه را همانطور که هست رندر می‌کند.

<div>
  <h1>SHY</h1>
  super&shy;long&shy;word&shy;that&shy;needs&shy;to&shy;break&shy;better
</div>

<div>
  <h1>WBR</h1>
  super<wbr>long<wbr>word<wbr>that<wbr>needs<wbr>to<wbr>break<wbr>better
</div>

<div style="word-break: break-all">
  <h1>CSS</h1>superlongwordthatneedstobreakbetter
</div>

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

‏SWC‏چیست و کمی درباره Rust

‏SWC مخففی است که به طور فزاینده‌ای در دنیای فرانت‌اند دیده می‌شود. این مخفف Speedy Web Compiler است و کاملاً نام خود را توجیه می‌کند، زیرا SWC یک کامپایلر و بسته‌بند فوق‌العاده سریع است که با زبان برنامه‌نویسی Rust نوشته شده است. هدف آن تبدیل کدهای مدرن جاوا اسکریپت و تایپ اسکریپت به کدی است که توسط اکثر مرورگرها پشتیبانی می‌شود.

به عبارت ساده‌تر، SWC تمام کارهای Babel را انجام می‌دهد، اما بیش از ۲۰ برابر سریع‌تر روی یک هسته و بیش از ۷۰ برابر سریع‌تر روی ۴ هسته.

‌‏SWC در حال حاضر در محصولات Vercel (از جمله Next.js و Turbopack)، Tencent، Shopify و سایر شرکت‌ها استفاده می‌شود و از نسخه ۴ (اکنون نسخه ۵) به عنوان پایه Vite قرار گرفته است، بنابراین به زودی با ما خواهد بود.

در واقع، چیز زیادی برای گفتن در مورد SWC وجود ندارد. من در تمام این موارد، مشاهده تمرکز بسیار زیاد بر سرعت در فرانت‌اند بسیار جالب است. Rust به تدریج در حال تسخیر ابزارهای فرانت‌اند است: کامپایلرها، لینترها و غیره - تقریباً در هر بخش از ابزارها، یک راه‌حل مبتنی بر Rust وجود دارد و این اتفاقی نیست.

همچنین نباید فراموش کنیم که Rust مدت‌هاست از WebAssembly به طور کامل پشتیبانی می‌کند و یکی از زبان‌های اصلی این فناوری است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

🖤من دختر شاهم و دنیا واسه بابای منه 🖤

شهادت_حضرت_رقیه سلام‌الله‌علیها


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

چگونه یک فایل را از سایت دانلود کنیم

تگ لینک <a> یک ویژگی بسیار کاربردی به نام download دارد که به شما اجازه می‌دهد هر فایلی را از سایت دانلود کنید. استفاده از آن به این شکل است:

<a
    download
    href="https://.../files/example.zip"
>
    دانلود فایل
</a>

همچنین می‌توانید نام دلخواهی برای فایل دانلودی تعیین کنید، به این صورت:

<a
    download="نام_جدید_فایل.zip"
    href="https://.../files/example.zip"
>
    دانلود فایل
</a>

باید توجه داشته باشید که دانلود فایل‌ها فقط از سرورهایی امکان‌پذیر است که سیاست‌های CORS برای سایت ما را رعایت می‌کنند.

این ویژگی در حال حاضر بیش از ۹۷٪ پشتیبانی در مرورگرها دارد و تنها در مرورگر IE به طور کامل پشتیبانی نمی‌شود.

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

‏noopener و noreferrer در مرورگر

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Anchor text</a>

وقتی یک لینک را در یک تب جدید باز می‌کنیم (مثلاً https://t.me/prog_way_blog/317) با استفاده از ویژگی target="_blank"، مرورگر چند کار ناخواسته انجام می‌دهد که ویژگی‌های noopener و noreferrer از آن‌ها جلوگیری می‌کنند:

🟢 ویژگی noopener: مانع از دسترسی تب جدید به شیء window.opener می‌شود. چرا این مهم است؟ بدون این ویژگی، سایتی که در تب جدید باز می‌شود می‌تواند به تب اصلی دسترسی پیدا کند و احتمالاً کدهای مخرب اجرا کند که یک تهدید امنیتی است.

‏window.opener حاوی اطلاعاتی از تب اصلی است که از آنجا به سایت جدید آمده‌ایم. اگرچه اطلاعات این شیء محدود است، اما تب جدید می‌تواند در تب اصلی حرکت کند که این امکان را برای حملات فیشینگ فراهم می‌کند.

فرض کنید در سایت some-bank.com هستید و به سایتی دیگر با کد مخرب بدون noopener می‌روید. تب جدید می‌تواند به آدرس قبلی شما و API ناوبری تب اصلی دسترسی پیدا کند و بدون اینکه شما متوجه شوید، آدرس تب اصلی را از some-bank.com به some-bauk.com تغییر دهد. وقتی به تب اصلی برگردید، همان سایت را می‌بینید اما در واقع به یک صفحه فیشینگ هدایت شده‌اید. اگر اطلاعات خود را در این صفحه وارد کنید، اطلاعات شما به دست مهاجمان می‌افتد.

این نوع حمله به آن tabnabbing می‌گویند.

🟢 ویژگی noreferrer: دو کار انجام می‌دهد:

مانند noopener از دسترسی به window.opener جلوگیری می‌کند.
هدر HTTP Referer را هنگام کلیک روی لینک حذف می‌کند تا منبع درخواست پنهان شود.


این یک لایه امنیتی اضافی است که مانع از مشاهده آدرس قبلی شما می‌شود.

معمولاً این دو ویژگی با هم استفاده می‌شوند. noreferrer به نوعی شامل noopener می‌شود، اما در عمل همیشه هر دو استفاده می‌شوند. دلیل آن این است که هر مرورگر Referer-Policy را به روش خود پیاده‌سازی می‌کند و استفاده از هر دو ویژگی خیالمان را راحت‌تر می‌کند.


#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

‏RoughViz یک کتابخانه جاوا اسکریپت است که به شما امکان می‌دهد نمودارهایی با سبک "دست‌کشیده" ایجاد کنید. این سبک به داده‌های بصری شما ظاهری منحصر به فرد و خلاقانه می‌دهد و آن‌ها را جذاب‌تر و ماندگارتر می‌کند.

🔗https://www.jwilber.me/roughviz/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Dropzone.js یک کتابخانه سبک‌وزن جاوا اسکریپت است که برای ادغام آسان قابلیت کشیدن و رها کردن فایل‌ها در وب‌سایت‌ها طراحی شده است. این کتابخانه به کاربران اجازه می‌دهد تا فایل‌ها را به یک ناحیه مشخص بکشند و رها کنند.


🔗https://www.dropzone.dev/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏** Tabby**

یک دستیار هوش مصنوعی پیشرفته برای کدنویسی. Tabby به صورت محلی نصب می‌شود و دقیقاً همان کاری را انجام می‌دهد که GitHub Copilot انجام می‌دهد، اما کاملاً رایگان است!

از روش‌های مختلفی برای استقرار آن پشتیبانی می‌شود، از جمله Docker، Homebrew و Hugging Face Space، و این دستیار به راحتی با محیط‌های توسعه یکپارچه محبوب ادغام می‌شود.



#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

JS Nice

ابزاری برای رفع ابهام و مستندسازی اولیه کدهای جاوا اسکریپت. شما کد نامفهوم را وارد می‌کنید و این سرویس آن را تحلیل کرده و به فرمت قابل فهم‌تری تبدیل می‌کند. این کار شامل افزودن تورفتگی‌ها، نام‌گذاری معنادار متغیرها بر اساس زمینه، افزودن کامنت‌هایی با توضیح متغیرها و نوع آن‌ها و غیره می‌شود.

🔗http://jsnice.org/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏Solo — سازنده وبسایت مبتنی بر هوش مصنوعی

‏Mozilla به طور ناگهانی سازنده وبسایت خود را معرفی کرد. در اصل، این یک ابزار ساده برای ساخت صفحات فرود (لندینگ پیج) بدون نیاز به کدنویسی است، اما بسیار شیک و استفاده از آن بسیار آسان است. با یک کلیک روی دکمه Publish، می‌توانید وبسایت خود را به صورت آنلاین منتشر کنید.

🔗https://soloist.ai/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

"به دلیل سادگی بیش از حد، Google Tasks قبلاً برای من کاربردی نبود و برای یادآوری‌های کوچک، من از رویدادهای Google Calendar به همراه Google Keep یا TickTick (که در تلفن من دائماً از حافظه پاک می‌شد) استفاده می‌کردم. اما اخیراً متوجه شدم که Google Tasks تغییرات اساسی کرده و به شکل امروزی درآمده است. حتی یک تابلو کانبان هم به آن اضافه شده است."

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

chatgpt.js
چت‌جی‌پی‌تی.جی‌اس — کتابخانه جاوااسکریپت منبع باز قدرتمندی برای تعامل آسان با DOM چت‌جی‌پی‌تی .
کتابخانه چت‌جی‌پی‌تی.جی‌اس
چندکاره،
شی‌گرا،
آسان برای استفاده
و کارآمد است.

🔗https://chatgpt.js.org/#/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript