Охват к подписчикам
769,7%
ERR
Реакции к просмотрам
0,97%
342 на 20 постов
Пересылки к просмотрам
1,27%
446
Постов в день
0,0
всего 20
Где отзываются чаще
доля реакций к просмотрам- 7 июл. 2024 г.🔆 بعضی از این سامانه های آزمون آنلاین رو دیدین وقتی وسط آزمون میرین تو یه تب دیگه و بعد که بر میگردین میبینین همه جواب هاتون پاک شده ⁉️ خب اینم خلاصه فهمیدم جریانش چیه😁 ✅ در واقع میان تو کد جاوااسکریپت خودشون روی document یه ایونت visibilitychange میزارن و توش یه شرط مینویسی که اگه document.visibilityState برابر visible باشه یعنی کاربر تو سایته و اگه برابر hidden باشه یعنی از صفحه آزمون بیرون رفته. مثال : document.addEventListener("visibilitychange", () => { if (document.visibilityState === 'hidden') { console.log("کاربر خارج شده"); } else if (document.visibilityState === 'visible') { console.log("کاربر در صفحه است."); } });2,38%
- 30 июн. 2024 г.#This_is_javascript 🗿😁 🔆 اولویت اجرا شدن کد ها تو js در پشت صحنه و callstack اینجوریه که: ✅ اول کد های اسکوپ گلوبال اجرا میشن. ✅ بعد microtask queue که به عنوان مثال promise ها و داده هایی که fetch میشن در اون قرار میگیرن. ✅ و در نهایت callback queue که میشه به setTimeout اشاره کرد.1,96%
- 4 авг. 2024 г.🔆 دوستان یک نکته امنیتی مهم برای فرانت اند رو فهمیدم که میتونه باعث ایجاد باگ های xss بشه که گفتم بگم بهتون. ✅ حتما براتون پیش اومده که از خودتون پرسیده باشید چه فرقی میکنه که برای اضافه کردن محتوا به یه تگ از innerHtml استفاده کنیم یا textContent👌 💻 بیاید فرض بر این کنیم که یک input داریم که کاربر کامنتش رو مینویسه و بعد از زدن دکمه «ارسال» کامنتش به صفحه اضافه میشه... زمانی که از innerHtml استفاده کنیم کاربر میتونه توی اون input یک کد جاوااسکریپت مثل کد زیر وارد کنه که قابل اجرا هم هست و یک دکمه به سایت اضافه میکنه : <script><button>hack</button></script> حالا فکرشو کنید هکر میتونه چه کد های خطرناک تری تزریق کنه به سایت 🧨 حالا اگه از textContent استفاده کنیم دیگه اون کد جاوااسکریپتی که وارد میکنه قابل اجرا نیست و به صورت یک String یا رشته در میاد😉1,95%
- 22 июл. 2024 г.👆👆👆👆 🔸 میرسیم به ادامه مراحل راه اندازی. حالا بهتره یک فایل index.html و یک پوشه ای به اسم src ایجاد کنیم و درون آن یک پوشه مختص css درست کنیم تا فایل های مربوط به css رو درون اون قرار بدیم. اولین فایلی که باید بسازیم input.css هست و باید محتوای زیر رو درون اون قرار بدیم : @tailwind base; @tailwind components; @tailwind utilities; در واقع input.css نقطه ورود برای تیلویند است و شامل دستورات و قواعدی هست که میگن تیلویند css نهایی رو چجوری پیاده سازی کنه. ♦️ دستور اول : شامل استایل های پایه یا base تیلویند میشه مثل استایل های ابتدای عناصر html که بهمون کمک میکنه تا در همه مرورگر ها یک استایل ثابت و یکپارچه رو داشته باشیم. البته میتونیم چیز های جدیدی به این لایه اضافه کنیم مثل : @layer base { @font-face { font-family: Yekan; src: local(Yekan), url("./Yekan.woff") format("woff"); } } ♦️ دستور دوم : شامل استایل های کامپوننت هامون میشه که یکسری استایل های از پیش ساخته شدن هستن برای عناصر مختلف مثل دکمه ها و فرم ها و کارت ها و ... و برای اضافه کردن یک کامپوننت باید این کار رو بکنیم : @layer components { .btn { @apply bg-green-600 text-white text-2xl p-3 rounded-lg font-medium shadow-lg shadow-gray-700 active:bg-green-700 font-yekan; } } ♦️ دستور سوم : در این بخش ما دیگه کامپوننت نداریم بلکه دقیقا همون کلاس هایی که در کدمون استفاده میکنیم رو داریم مثل text-2xl که البته میتونیم مورد های دلخواهم هم بهش اصافه کنیم مثل : @layer utilities { .text-shadow { text-shadow: 2px 2px #ff0000; } } 🔸 حالا کافیه در کنار input.css یک فایل output.css که به عنوان خروجی کار استفاده میشه رو بسازیم و اون رو لینک کنیم به فایل html خودمون و بعد دستور زیر رو در ترمینال وارد میکنیم : npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch حالا برنامه ما آماده اجرا هست و کافیه فایل index.html خودمون رو در لایو سرور اجرا کنیم و حالا هر تغییری که در فایل html ایجاد کنیم به صورت آنلاین و خودکار رسد و اعمال میشه و اصلا به همین خاطر ما آخر دستورمون نوشتیم watch-- 🟢 نکته : ما میتونیم عوض اینکه هر بار دستور بالا رو در ترمینال وارد کنیم بیایم در فایل package.json یک کلید مختص همون درست کنیم به این صورت : "scripts": { "build": "npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch" } حالا کافیه هرموقع خواستیم کارو شروع کنیم عوض اون دستور طولانی فقط دستور زیر رو بنویسیم : npm run build1,83%
- 22 июл. 2024 г.🔆 راهنمای کار با Tailwind css : ✅ بر خلاف Bootstrap که شامل اجزای از پیش طراحی شده هست، تیلویند یک فرمورک css هست که به شما کلاس های سودمندی (utility classes) میده که با کنار هم قرار دادن این کلاس ها میتونید UI جذابی رو طراحی کنید. 🔸 در کل برای شروع یک پروژه با تیلویند 2 تا دستور مهم وجود داره : npm install -D tailwindcss این دستور تیلویند را به عنوان یک devDependency به پروژمون اضافی میکنه و دلیلی که از D- یا همون save-dev-- استفاده میکنیم اینه که ما از تیلویند فقط موقع توسعه سایتمون استفاده میکنیم و در محیط تولید مورد نیاز نیست. npx tailwindcss init با این دستور از ابزار npx استفاده میکنیم تا یک فایل تنظیمات پیشفرض به اسم tailwind.config.js رو ایجاد کنیم که برای سفارشی سازی تیلویند استفاده میشه. 🔸 وقتی دستورات بالا رو میزنیم یک پوشه با عنوان node_modules، یک فایل با عنوان package-lock.json، یک فایل با عنوان package.json و در نهایت فایل tailwind.config.js ساخته میشود که ساختار پیشفرض درون آن به این صورت است : /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { extend: {}, }, plugins: [], } 🔸 قبل از ادامه مراحل نصب بیاید بخش های مختلف فایل tailwind.config.js رو بررسی کنیم: 🔹 محتوای content : این بخش مشخص میکنه که تیلویند میتونه کدوم فایل های پروژه مارو بررسی کنه تا درون اونها بتونیم از کلاس های تیلویند استفاده کنیم که به طور معمول آدرس زیر رو بهش میدیم : content: ["./**/*.{html,js}"], یعنی تو همین پوشه اصلی و در واقع main برو تمام زیرپوشه ها و فایل های داخل این پوشه رو بدون در نظر گرفتن عمقشون جستجو کن و فایل هایی با پسوند html. و js. رو بررسی کن. حالا این یه چیزیه که معمولا استفاده میکنیم اما شما هر آدرسی میتونید بدید. 🔹 محتوای theme : در این بخش ما میتونیم ویژگی های پیشفرض تیلویند رو تغییر بدیم یا حتی ویژگی جدیدی رو هم اضافه کنیم که ساختار زیر رو داره: theme: { extend: {}, }, ⁉️ حالا سوال اینه که چه زمانی باید تغییرات رو مستقیم درون theme قرار دهیم و چه زمانی درون extend ؟؟؟ ♦️ زمانی که میخوایم ویژگی های جدیدی به ویژگی های موجود در تیلویند اضافه کنیم بدون تغییر ویژگی های پیشفرض اون هارو درون extend قرار میدیم ولی زمانی که میخوایم ویژگی از قبل تعریف شده ای رو در تیلویند تغییر بدیم اون هارو درون theme قرار میدیم مثل : theme: { screens: { xs: "475px", sm: '640px', md: '768px', lg: '1024px', xl: '1280px', }, fontFamily: { "yekan": "Yekan" }, extend: { colors: { "primary": { DEFAULT: "#041aa4", } }, spacing: { "34": "8.5rem" } }, }, در این مثال ما سایز های screen رو برای رسپانسیو سازی و font family رو کاملا تغییر دادیم و شخصی سازی کردیم. و همچنین یک رنگ جدید به اسم primary رو به رنگ های دیگه تیلویند و یک spacing با مقدار 34 به سایر spacing ها اضافه کردیم. 🔹 محتوای plugins : در این بخش افزونه های تیلویند رو میتونیم اضافه کنیم برای داشتن قابلیت های بیشتر مثل افزونه فرم : plugins: [ require('@tailwindcss/forms'), ],1,83%
- 6 июл. 2024 г.🔆 تجربه جالب امروزم‼️ داشتم به این فکر میکردم که فرض کنیم کاربر تو سایتمون هست یهو اینترنتش قطع میشه و خودش هم اون لحظه متوجهش نمیشه😵 خب قطعا محتوای سایتمون درست براش لود نمیشه و شاید فکر کنه مشکل از سایتمونه و سایتمون رو ترک کنه🤦♂ خلاصه که گشتم و گشتم رسیدم به کتابخونه Offline.js که هروقت اینترنت کاربر قطع یا وصل بشه بهش یه نوتیف جذاب میده ✅ لینکش : https://github.hubspot.com/offline/docs/welcome/1,74%
- 3 июл. 2024 г.🔆دوستان اگر اکانت لینکدین شما روزی به هر دلیلی suspend شد کاری که میگم رو بکنید👇 1⃣ وارد لینک زیر بشید : https://www.linkedin.com/help/linkedin/ask/ppq 2⃣ از توی تب اول گزینه Regain Access to My Account رو انتخاب کنید. 3⃣ در قسمت Your Question به انگلیسی بنویسین که اکانت شما مسدود شده و نیاز به کمک دارین و همچنین ذکر کنید که کاری خارج از قنوانین انجام ندادید و پایبند قوانین لینکدین خواهید بود. 4⃣ در قسمت Issue Type هم گزینه Account Restricted رو انتخاب کنید و در نهایت Submit کنید. واسه من یک روزه برگشت و پیشنهاد میکنم به هیچ عنوان وقتی از لینکدین استفاده میکنید vpn روشن نباشه هرچند برای من چند بار اتفاقی روشن بود و حواسم نبود😅❌1,51%
- 28 июл. 2024 г.اگه میخواید لیست کلمات رزرو شده توسط جاوااسکریپت رو بدونید برید تو سایت زیر : https://www.w3schools.com/js/js_reserved.asp1,32%
- 28 июл. 2024 г.🔆 چرا باید در جاوااسکریپت از use strict یا همون StrictMode استفاده کنیم؟🤔 ✅ ببینید، StrictMode یک حالت سخت گیرانه جاوااسکریپته که بهمون کمک میکنه کد هامون خطای کمتری داشته باشه بیاید همینو یه مثال بزنم : // "use strict"; let new = [4, 5, 6, 7]; 🔹 توی کد بالا حالت StrictMode غیرفعاله. نام new یک کلمه از پیش رزرو شده توسط جاوااسکریپته که یعنی نباید ازش استفاده کنیم و ممکنه تداخل ایجاد کنه ولی با این وجود وقتی کد رو اجرا میکنیم هیچ اروری دریافت نمیکنیم 🤯❌ حالا با فعال کردنش چه اتفاقی میوفته؟ "use strict"; let new = [4, 5, 6, 7]; 🔹 حالا StrictMode فعاله و جاوااسکریپت بهمون ارور میده که کلمه new از قبل توسط من رزرو شده و شما نمیتونی ازش استفاده کنی👌1,31%
- 28 июн. 2024 г. 🔆 این یکی از بهترین اکستنشن های vsCode هست که باهاش میشه کد های js رو بدون این که هیچ سند html بسازیم اجرا کنیم و نیاز به لایو سرور هم نباشه چون همزمان توی ۳ نقطه طبق عکسی که دادم خروجی رو به بهترین شکل بهمون نشون میده😁 🔹اسمش : Quokka.js 🔹روش استفاده : کافیه اکستنشن رو نصب کنیم و بعد از توی command palette که هم از تنظیمات هم با کلید ctrl+shift+p میشه بازش کرد عبارت زیر رو بنویسیم : Quokka.js: Start on Current File 🔹نکته : قبلش حتما باید توی فایلی جاوااسکریپتیمون باشیم.1,17%
- 8 авг. 2024 г.🔆 دیروز نیاز بود یه مرور خیلی سریع از jQuery داشته باشم برای یه کاری. واقعا بهتر از w3schools پیدا نکردم یعنی ✅ کامل... با مثال های خوب... توضیحات شفاف... مخصوصا بخش jQuery Refrences حتی خوراک کسیه که بخواد از صفر یادش بگیره، خلاصه اینم گفتم که داشته باشید شاید یه روز نیاز شد چیزی ازش یاد بگیرید🤌 1,04%
- 30 авг. 2024 г.🔆 از یک هفته پیش شروع کردم به خوندن این کتاب : 📚HTTP The Definitive Guide ✅ این کتاب توسط مهندس احسان نیک آور به دقت و زیبایی ترجمه شده پس با خیال راحت شروع کنید🤝 ⁉️ حالا چرا باید این کتابو بخونیم؟ در کل پشت هر تراکنشی توی وب پروتکل HTTP در حال اجراست و عملا برای اینکه یه لول سطحتون رو ارتقا بدید خوندن این کتاب توصیه میشه. حالا چرا؟ چون شما به مفاهیمی مثل مدیریت اتصال TCP، پروکسی ها، کشینگ، رباتهای وب و فایلهای robots.txt، احراز هویت Basic و Digest، تراکنشهای HTTP امن، هدایت مجدد ترافیک، میزبانی چند رسانه ای و... کاملا مسلط میشید. #HTTP #Programming #Frontend #Backend Documentham | داکیومنت هام1,03%