🔆دوستان اگر اکانت لینکدین شما روزی به هر دلیلی 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 روشن نباشه هرچند برای من چند بار اتفاقی روشن بود و حواسم نبود😅❌

🔆 تجربه جالب امروزم‼️

داشتم به این فکر میکردم که فرض کنیم کاربر تو سایتمون هست یهو اینترنتش قطع میشه و خودش هم اون لحظه متوجهش نمیشه😵

خب قطعا محتوای سایتمون درست براش لود نمیشه و شاید فکر کنه مشکل از سایتمونه و سایتمون رو ترک کنه🤦‍♂

خلاصه که گشتم و گشتم رسیدم به کتابخونه Offline.js که هروقت اینترنت کاربر قطع یا وصل بشه بهش یه نوتیف جذاب میده ✅

لینکش :

https://github.hubspot.com/offline/docs/welcome/

البته بعدش هم تلاش کردم خودم کدی بنویسم که این کارو میکنه ✅

کافیه یک تابعی بسازیم که مثلا هر 1 ثانیه یک بار یک ریکوئستی به یک API فیک مثل jsonplaceholder بزنه و اگر response.status اون برابر 200 یا زیر 300 نبود به کاربر اطلاع بده که آفلاین شده.

مثال سادش :

const ajaxCall = async function () {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        if (!response.ok && response.status > 300) {
            throw new Error();
        }
        const data = await response.json();
        console.log("شما آنلاین هستید.");

    } catch (error) {
        console.error('مشکلی در عملیات دریافت داده بوجود آمده است:', error.message);
        console.log("شما آفلاین هستید.");
    }
};
setInterval(() => {
    ajaxCall();
}, 500);

🔆 بعضی از این سامانه های آزمون آنلاین رو دیدین وقتی وسط آزمون میرین تو یه تب دیگه و بعد که بر میگردین میبینین همه جواب هاتون پاک شده ⁉️

خب اینم خلاصه فهمیدم جریانش چیه😁

✅ در واقع میان تو کد جاوااسکریپت خودشون روی document یه ایونت visibilitychange میزارن و توش یه شرط مینویسی که اگه document.visibilityState  برابر visible باشه یعنی کاربر تو سایته و اگه برابر hidden باشه یعنی از صفحه آزمون بیرون رفته.

مثال :

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'hidden') {
    console.log("کاربر خارج شده");
  } else if (document.visibilityState === 'visible') {
    console.log("کاربر در صفحه است.");
  }
});

🔆 راهنمای کار با 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'),
  ],

👆👆👆👆

🔸 میرسیم به ادامه مراحل راه اندازی. حالا بهتره یک فایل 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 build

🔆 چرا باید در جاوااسکریپت از use strict یا همون StrictMode استفاده کنیم؟🤔

✅ ببینید، StrictMode یک حالت سخت گیرانه جاوااسکریپته که بهمون کمک میکنه کد هامون خطای کمتری داشته باشه بیاید همینو یه مثال بزنم :

// "use strict";
let new = [4, 5, 6, 7];

🔹 توی کد بالا حالت StrictMode غیرفعاله.
نام new یک کلمه از پیش رزرو شده توسط جاوااسکریپته که یعنی نباید ازش استفاده کنیم و ممکنه تداخل ایجاد کنه ولی با این وجود وقتی کد رو اجرا میکنیم هیچ اروری دریافت نمیکنیم 🤯❌

حالا با فعال کردنش چه اتفاقی میوفته؟

"use strict";
let new = [4, 5, 6, 7];

🔹 حالا StrictMode فعاله و جاوااسکریپت بهمون ارور میده که کلمه new از قبل توسط من رزرو شده و شما نمیتونی ازش استفاده کنی👌

اگه میخواید لیست کلمات رزرو شده توسط جاوااسکریپت رو بدونید برید تو سایت زیر :

https://www.w3schools.com/js/js_reserved.asp

🔆 دوستان یک نکته امنیتی مهم برای فرانت اند رو فهمیدم که میتونه باعث ایجاد باگ های xss بشه که گفتم بگم بهتون.

✅ حتما براتون پیش اومده که از خودتون پرسیده باشید چه فرقی میکنه که برای اضافه کردن محتوا به یه تگ از innerHtml استفاده کنیم یا textContent👌

💻 بیاید فرض بر این کنیم که یک input داریم که کاربر کامنتش رو مینویسه و بعد از زدن دکمه «ارسال» کامنتش به صفحه اضافه میشه...

زمانی که از innerHtml استفاده کنیم کاربر میتونه توی اون input یک کد جاوااسکریپت مثل کد زیر وارد کنه که قابل اجرا هم هست و یک دکمه به سایت اضافه میکنه :

<script><button>hack</button></script>

حالا فکرشو کنید هکر میتونه چه کد های خطرناک تری تزریق کنه به سایت 🧨

حالا اگه از textContent استفاده کنیم دیگه اون کد جاوااسکریپتی که وارد میکنه قابل اجرا نیست و به صورت یک String یا رشته در میاد😉

🔆 دیروز نیاز بود یه مرور خیلی سریع از jQuery داشته باشم برای یه کاری.

واقعا بهتر از w3schools پیدا نکردم یعنی ✅

کامل...
با مثال های خوب...
توضیحات شفاف...
مخصوصا بخش jQuery Refrences

حتی خوراک کسیه که بخواد از صفر یادش بگیره، خلاصه اینم گفتم که داشته باشید شاید یه روز نیاز شد چیزی ازش یاد بگیرید🤌
‌

🔆 معرفی Google IDX پروژه نو ظهور گوگل

⁉️ در واقع IDX یک محیط کدنویسی تحت وب هست که شما بدون این که نیاز به سخت افزار قدرتمندی داشته باشید میتونید هر پروژه ای رو روی سرور های ابری توسعه بدید.

✅ شما میتونید به راحتی با بیشتر زبان ها و فریمورک های محبوب دنیا توش پروژه خودتون رو توسعه بدید. تازه به هوش مصنوعی gemini هم دسترسی دارید میتونه کد هارو توضیح بده براتون.

📝 حتی به راحتی می تونید برنامه های خودتون رو به Firebase متصل کنید و از سرویس های اون مثل احراز هویت، پایگاه داده و ذخیره سازی ابری استفاده کنید.

⚠️ این IDE هنوز تو حالت Preview هست و کامل عرضه نشده.

#IDX #Programming #GoogleIDX #Firebase
@Documentham | داکیومنت هام

🔆 داده ها در localStorage با چه فرمتی ذخیره و با چه فرمتی دریافت میشوند؟ این سوالی بود که توی یکی از مصاحبه هام از من پرسیده شد.

اول از همه باید بگم که برای ذخیره داده ها توی loaclStorage باید از متد setItem و برای دریافتشون باید از متد getItem استفاده کنیم.

✅ به صورت کلی داده ها توی localStorage باید به صورت رشته (string) ذخیره بشن، پس برای تبدیل داده هامون به رشته باید از JSON.stringify استفاده کنیم. مثال :

const data = { name: "Mersad", age: 22 };
localStorage.setItem("user", JSON.stringify(data));

اینجا داریم میگیم که میخوام یک آبجکت رو با مشخصات بالا به عنوان یک رشته با مشخصه یا کلید "user" توی localStorage ذخیره کنم.

✅ حالا ما اگه بخوایم این داده ها رو از localStorage دریافت کنیم باز هم به صورت یک رشته به ما برمیگردونه ولی برای اینکه بتونیم از داده هاش استفاده کنیم باید به فرمت اولیه خودش (آبجکت / آرایه) تبدیلش کنیم که این کار با استفاده از JSON.parse امکان پذیره. مثال:

const localStorageData = localStorage.getItem("user");
const parsedData = JSON.parse(localStorageData);

#localStorage #Programming
@Documentham | داکیومنت هام

🔆 یکی از چیزایی که خیلی کم دیدم بهش پرداخته بشه AbortController هستش.

زمانی که ما یاد میگیریم چطور از Fetch و API ها استفاده کنیم برای ارسال یا دریافت دیتا از سمت سرور، یادمون میره که یه نگاه به تب Network بندازیم و تعداد ریکوئست هایی که ارسال میشه رو مدیریت کنیم.

✅ تو این ویدئو سعی کردم بهتون توضیح بدم چطور از فرستادن ریکوئست های زیاد و الکی به سمت سرور جلوگیری کنید.

#AbortController #Api #JavaScript
Documentham | داکیومنت هام

🔆 از یک هفته پیش شروع کردم به خوندن این کتاب :
📚HTTP The Definitive Guide

✅ این کتاب توسط مهندس احسان نیک آور به دقت و زیبایی ترجمه شده پس با خیال راحت شروع کنید🤝

⁉️ حالا چرا باید این کتابو بخونیم؟

در کل پشت هر تراکنشی توی وب پروتکل HTTP در حال اجراست و عملا برای اینکه یه لول سطحتون رو ارتقا بدید خوندن این کتاب توصیه میشه.
حالا چرا؟ چون شما به مفاهیمی مثل مدیریت اتصال TCP، پروکسی ها، کشینگ، ربات‌های وب و فایل‌های robots.txt، احراز هویت Basic و Digest، تراکنش‌های HTTP امن، هدایت مجدد ترافیک، میزبانی چند رسانه ای و... کاملا مسلط میشید.

‌
#HTTP #Programming #Frontend #Backend
Documentham | داکیومنت هام

🔆 وقتی شروع به یادگیری جاوااسکریپت کردم خیلی زبان عجیبی بود برام و عاشق منطقی که نداشت شده بودم:) حالا چرا؟

چرا حاصل اولی میشه 54 ولی دومی میشه 1 :

console.log("5" + 4); -> 54

console.log("5" - 4); -> 1

✅ کدوم درسته کدوم غلط⁉️ این سوالیه که از خودم میپرسیدم.

یکم که گذشت فهمیدم وقتی جاوااسکریپت بین دوتا مقدار عملگر + رو میبینه جفتش رو به رشته (string) تبدیل میکنه و وقتی عملگر - رو میبینه همه رو به عدد (number) تبدیل میکنه و گفتم اوکی لابد قانونش همینه دیگه. یه مدت همینجوری پیش رفتم که باز یه علامت سوال اومد بالا سرم که اقا اصلا چرا اینجوری باید باشه؟😂 چون سر خیلی چیزای دیگه باز نتایجی میگرفتم که مورد انتظارم نبودن.

📝 اینجا بود که با یکم تحقیق با دو مفهوم و رفتار توی جاوااسکریپت آشنا شدم به اسم Implicit و Explicit که توی وویس زیر خیلی ساده برداشت خودم رو ازشون گفتم بهتون که میتونید گوش بدید ❤️👇

#Implicit #Explicit #Programming #Frontend
Documentham | داکیومنت هام

‌
🔆 اگه شما هم مثل من توی استفاده از Redux کمی فراموشکاری دارید این دفترچه راهنما کارو در میاره براتون.

تو این فایل به صورت قدم به قدم همه کارای مربوط به Redux Toolkit رو گفتم از همون اولش که چطور باید نصبش کرد تا ساخت store و state ها و نحوه استفاده و بروزرسانی state ها تو ری اکت توسط redux.

روز برنامه نویس هم مبارک 💻❤️

#Redux #React #Programming #Frontend
Documentham | داکیومنت هام

🔆 2 تا نکته مهم اما تجربی:

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

🔻از اکستنشن هایی که کد رو خودش تکمیل میکنه یا بهت پیشنهاد میده استفاده نکن.
🔻کدای بقیه رو هم (غیر از کد های خیلی طولانی) دستی بنویس ولی copy و paste نکن.

🤔 حالا قضیه چیه؟
چند وقت پیش مجبور بودم برای توضیح یه سری کد به شخصی از ++Notpad استفاده کنم و خب همونطور که میدونید یک محیط کاملا خام واسه کد نویسیه.
هیچی دیگه چشتون روز بعد نبینه از لحاظ فنی همه چیو درست بهش توضیح دادم اما از لحاظ syntaxically و املا تا دلت بخواد به باگ و خطا خوردم😂

❌ مثلا داشتم بهش میگفتم یه کتابخونه رو باید چطور استفاده کرد در صورتی که حتی import هم نکرده بودمش چون اکستنشن های vscode همیشه به صورت خودکار خودش این کارو برام انجام میداد و کلی اشتباهای دیگه.

✅ انجام این کاری که گفتم 2 تا مزیت برام داشته تا الان:
🔸واقعا میزان یادگیریم و فهمیدن چیزایی که مینویسم بیشتر شده.
🔸نگرانی واسه اینکه تو یه مصاحبه فنی ازم بخوان توی یه IDE بدون هیچکدوم از این ابزار ها کدنویسی کنم ندارم.

❤️پس این کار هایی که گفتمو انجام بدین حتی واسه html,css ,... و اول یکم آشنا شین با نحوه نوشتارش و بعد از اونا استفاده کنین

#programming #Frontend
Documentham | داکیومنت هام