{"id":25837,"date":"2026-06-25T09:46:18","date_gmt":"2026-06-25T09:46:18","guid":{"rendered":"https:\/\/umang.pk\/2026\/06\/25\/ai-%da%a9%d9%88%da%88%d9%86%da%af-%d8%a7%db%8c%d8%ac%d9%86%d9%b9%d9%88%da%ba-%da%a9%d9%88-%d8%ac%d8%af%db%8c%d8%af-%d9%88%db%8c%d8%a8-%da%af%d8%a7%d8%a6%db%8c%da%88%d9%86%d8%b3-%da%a9%db%92-%d8%b3\/"},"modified":"2026-06-25T09:46:18","modified_gmt":"2026-06-25T09:46:18","slug":"ai-%da%a9%d9%88%da%88%d9%86%da%af-%d8%a7%db%8c%d8%ac%d9%86%d9%b9%d9%88%da%ba-%da%a9%d9%88-%d8%ac%d8%af%db%8c%d8%af-%d9%88%db%8c%d8%a8-%da%af%d8%a7%d8%a6%db%8c%da%88%d9%86%d8%b3-%da%a9%db%92-%d8%b3","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/06\/25\/ai-%da%a9%d9%88%da%88%d9%86%da%af-%d8%a7%db%8c%d8%ac%d9%86%d9%b9%d9%88%da%ba-%da%a9%d9%88-%d8%ac%d8%af%db%8c%d8%af-%d9%88%db%8c%d8%a8-%da%af%d8%a7%d8%a6%db%8c%da%88%d9%86%d8%b3-%da%a9%db%92-%d8%b3\/","title":{"rendered":"AI \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u0648 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u0631\u0633\u0648\u062f\u06c1 \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u06a9\u06cc\u0633\u06d2 \u0631\u0648\u06a9\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>AI \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u06a9\u0627 \u06a9\u0627\u0641\u06cc \u0648\u0642\u062a \u0628\u0686\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u0639\u0646\u06cc\u060c \u062c\u0628 \u062a\u06a9 \u0622\u067e \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0648 \u0646\u06c1\u06cc\u06ba \u06a9\u06be\u0648\u0644\u062a\u06d2 \u0627\u0648\u0631 \u0645\u062d\u0633\u0648\u0633 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06a9\u06c1 \u0627\u0646\u06c1\u0648\u06ba \u0646\u06d2 \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0627 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 \u06cc\u06c1 2019 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0627\u067e\u0646\u06d2 \u0627\u06cc\u062c\u0646\u0679 \u0633\u06d2 \u0679\u0648\u0644 \u0679\u067e \u0628\u0646\u0627\u0646\u06d2 \u06a9\u0648 \u06a9\u06c1\u06cc\u06ba\u06d4 HTML \u067e\u0627\u0644\u0634 \u0644\u06af \u0631\u06c1\u0627 \u06c1\u06d2 \u0627\u0648\u0631 CSS \u0679\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u06c1\u0645\u0648\u0627\u0631 \u06c1\u06cc\u06ba\u06d4 <code>aria-describedby<\/code> \u0648\u0627\u0626\u0631\u0646\u06af \u062f\u0631\u0633\u062a \u06c1\u06d2\u06d4 \u067e\u06be\u0631 \u06c1\u0645 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u0637\u0631\u0641 \u0628\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>js-hidden<\/code> \u06a9\u0644\u0627\u0633 \u0679\u0648\u06af\u0644 \u0633\u0633\u0679\u0645\u060c <code>dismissAllTooltips()<\/code> \u0641\u0646\u06a9\u0634\u0646\u0632\u060c \u0679\u0686 \u0627\u06cc\u0648\u0646\u0679 \u06c1\u06cc\u0646\u0688\u0644\u0631\u0632\u060c \u0622\u0641 \u06a9\u0644\u06a9 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0646\u0627\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u0646\u062c\u0645\u0646\u0679 \u0644\u06cc\u0626\u0631 \u0622\u067e \u06a9\u0648 \u0627\u0633 \u06a9\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u06a9\u06cc\u0644\u0627 CSS \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627\u06d4<\/p>\n<p>\u0627\u06cc\u062c\u0646\u0679 \u06a9\u0631\u067e\u0679 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u06af\u0631\u0686\u06c1 \u0628\u0631\u0633\u0648\u06ba \u0633\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u06a9\u06d2 \u067e\u0627\u0633 \u0628\u06c1\u062a\u0631 \u062c\u0648\u0627\u0628\u0627\u062a \u06c1\u06cc\u06ba\u060c \u06cc\u06c1 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u06d2 \u0646\u0645\u0648\u0646\u06d2 \u067e\u0631 \u067e\u06c1\u0646\u0686\u0646\u06d2 \u06a9\u06cc \u0628\u0627\u062a \u06c1\u06d2 \u062c\u0648 \u062a\u0631\u0628\u06cc\u062a\u06cc \u0688\u06cc\u0679\u0627 \u067e\u0631 \u062d\u0627\u0648\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 (MWG) \u06af\u0648\u06af\u0644 \u06a9\u0631\u0648\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0641\u06a9\u0633 \u06c1\u06d2\u06d4 \u0645\u0627\u06c1\u0631 \u06a9\u06cc \u062a\u0648\u062b\u06cc\u0642 \u0634\u062f\u06c1\u060c \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u0633\u06d2 \u0622\u06af\u0627\u06c1 \u06c1\u062f\u0627\u06cc\u0627\u062a \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u067e\u0646\u06d2 AI \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u06d2 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0645\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0646\u06c1\u06cc\u06ba \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646\u060c \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc\u060c \u0627\u0648\u0631 \u067e\u0631\u0641\u0627\u0631\u0645\u0646\u0633 \u0648\u06cc\u0628 \u0645\u0639\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633 \u0622\u0631\u0679\u06cc\u06a9\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e \u062c\u0627\u0646\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 &quot;\u0644\u06cc\u06af\u06cc\u0633\u06cc \u06a9\u0648\u0688&#8221; \u06a9\u0627 \u0645\u0633\u0626\u0644\u06c1 \u06a9\u06cc\u0648\u06ba \u062d\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u0636\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0645\u0633\u0644\u0633\u0644 \u062c\u062f\u06cc\u062f \u0646\u062a\u0627\u0626\u062c \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-table-of-contents\">\u0627\u0634\u0627\u0631\u06cc\u06c1:<\/h3>\n<h2 id=\"heading-why-do-ai-agents-default-to-legacy-patterns\">AI \u0627\u06cc\u062c\u0646\u0679\u0633 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0645\u06cc\u0631\u0627\u062b\u06cc \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06cc\u0648\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u061f<\/h2>\n<p>\u062a\u0645\u0627\u0645 \u0628\u0691\u06d2 \u0644\u06cc\u0646\u06af\u0648\u0626\u062c \u0645\u0627\u0688\u0644\u0632 (LLMs) \u06a9\u0648 \u0648\u06cc\u0628 \u067e\u0631 \u062a\u0631\u0628\u06cc\u062a \u062f\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0648 \u0648\u0627\u0642\u0639\u06cc \u062a\u06cc\u0632 \u0631\u0641\u062a\u0627\u0631\u06cc \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06d2\u06d4 \u0646\u0626\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 APIs \u06a9\u0648 \u062a\u0631\u0628\u06cc\u062a\u06cc \u0688\u06cc\u0679\u0627 \u0645\u06cc\u06ba \u0645\u0639\u0646\u06cc \u062e\u06cc\u0632 \u0637\u0648\u0631 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0641\u06cc \u0633\u0628\u0642\u060c \u0627\u0633\u0679\u06cc\u06a9 \u0627\u0648\u0648\u0631 \u0641\u0644\u0648 \u062c\u0648\u0627\u0628\u0627\u062a\u060c \u0627\u0648\u0631 \u062d\u0642\u06cc\u0642\u06cc \u06a9\u0648\u0688 \u0628\u06cc\u0633\u0632 \u06c1\u0648\u0646\u06d2 \u0633\u06d2 \u0628\u0631\u0633\u0648\u06ba \u067e\u06c1\u0644\u06d2 \u062c\u0627\u0631\u06cc \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 \u0646\u062a\u0627\u0626\u062c: \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u0627\u06af\u0631 \u0645\u0627\u0688\u0644 \u06a9\u0648 \u06cc\u06c1 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u0631\u0628\u06cc\u062a \u062f\u06cc \u06af\u0626\u06cc \u06c1\u06d2 \u06a9\u06c1 \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 API \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u060c \u0627\u0633 \u0646\u06d2 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0628\u0627\u0631 \u067e\u0631\u0627\u0646\u06d2 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0686\u0646\u062f \u0628\u0627\u0631 \u0646\u06cc\u0627 \u0637\u0631\u06cc\u0642\u06c1\u06d4 \u0646\u062a\u06cc\u062c\u06d2 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u06a9\u0648\u0688 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0645\u06cc\u0631\u0627\u062b\u06cc \u0646\u0645\u0648\u0646\u06d2 \u062c\u06cc\u062a \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u0633 \u0644\u06cc\u06d2 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u0645\u0627\u0688\u0644 \u062c\u0627\u06c1\u0644 \u06c1\u06d2\u060c \u0628\u0644\u06a9\u06c1 \u0627\u0633 \u0644\u06cc\u06d2 \u06a9\u06c1 \u067e\u0631\u0627\u0646\u06d2 \u0637\u0631\u06cc\u0642\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u0631\u0628\u06cc\u062a\u06cc \u0627\u0634\u0627\u0631\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0636\u0628\u0648\u0637 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u06cc\u06c1 \u0645\u0633\u0626\u0644\u06c1 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u062d\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u062c\u0646\u0679 \u06a9\u0648 &quot;\u062c\u062f\u06cc\u062f API \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba&#8221; \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u062a\u0627\u0646\u06d2 \u0633\u06d2 \u0686\u06cc\u0632\u06cc\u06ba \u0642\u062f\u0631\u06d2 \u0628\u06c1\u062a\u0631 \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u0633\u06d2 \u0645\u0627\u0688\u0644 \u06a9\u0648 \u0648\u06c1 \u06af\u06be\u0646\u06d2\u060c \u0645\u0627\u06c1\u0631 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062c\u0627\u0646\u0686\u06d2 \u06af\u0626\u06d2 \u0646\u0641\u0627\u0630 \u06a9\u06d2 \u0646\u0645\u0648\u0646\u06d2 \u0646\u06c1\u06cc\u06ba \u0645\u0644\u062a\u06d2 \u062c\u0646 \u06a9\u06cc \u0622\u067e \u06a9\u0648 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u062f\u06cc\u062f\u060c \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u06c1\u0631 \u0633\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u06c1\u0631 \u0641\u06cc\u0686\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0648 \u063a\u06cc\u0631 \u0645\u0639\u06cc\u0646\u06c1 \u0645\u062f\u062a \u062a\u06a9 \u067e\u06cc\u0633\u0679 \u06a9\u06cc\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<p>\u0627\u0635\u0644 \u0645\u0633\u0626\u0644\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1: \u0679\u06cc\u0633\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062d\u0642\u06cc\u0642\u06cc \u0622\u0624\u0679 \u067e\u0679 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u06cc\u06ba \u0646\u06d2 Antigravity IDE \u0633\u06d2 \u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u062f\u0648 \u0627\u0644\u06af \u0627\u0644\u06af \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u0648 \u06a9\u06c1\u0627\u06d4<\/p>\n<h3 id=\"heading-before-tooltip-component\">\u067e\u0686\u06be\u0644\u0627: \u0679\u0648\u0644 \u0679\u067e \u062c\u0632\u0648<\/h3>\n<p><strong>\u0641\u0648\u0631\u06cc:<\/strong> &quot;\u0627\u06cc\u06a9 \u0679\u0648\u0644 \u0679\u067e \u062c\u0632\u0648 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0648 \u0628\u0679\u0646 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0622\u067e \u0627\u0633 \u067e\u0631 \u06c1\u0648\u0648\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4&#8221;<\/p>\n<p>\u0627\u06cc\u0686 \u0679\u06cc \u0627\u06cc\u0645 \u0627\u06cc\u0644 \u0645\u0639\u0642\u0648\u0644 \u06c1\u06d2\u06d4 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>position: absolute<\/code>\u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646 \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u062a\u0627\u0631\u0648\u06ba \u06a9\u0648 \u062c\u0648\u0691\u06cc\u06ba\u06d4 <code>role=\"tooltip\"<\/code> \u0627\u0648\u0631 <code>aria-describedby<\/code> \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u067e\u06be\u0631 \u06c1\u0645 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u0637\u0631\u0641 \u0628\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">\/\/ &#x274c; Before MWG \u2014 a full interaction management layer built in JS\ndocument.addEventListener('DOMContentLoaded', () => {\n  const containers = document.querySelectorAll('.tooltip-container');\n\n  containers.forEach(container => {\n    const trigger = container.querySelector('.tooltip-trigger');\n    const tooltip = container.querySelector('.tooltip-content');\n\n    const forceHide = () => tooltip.classList.add('js-hidden');\n    const resetVisibility = () => tooltip.classList.remove('js-hidden');\n\n    \/\/ Escape key to dismiss\n    trigger.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') { forceHide(); e.preventDefault(); }\n    });\n\n    trigger.addEventListener('blur', resetVisibility);\n    container.addEventListener('mouseleave', resetVisibility);\n    container.addEventListener('mouseenter', resetVisibility);\n\n    \/\/ Touch handling\n    trigger.addEventListener('touchstart', (e) => {\n      const isVisible = !tooltip.classList.contains('js-hidden') &&\n        getComputedStyle(tooltip).visibility === 'visible';\n      if (isVisible) { forceHide(); } else { dismissAllTooltips(); resetVisibility(); }\n    }, { passive: true });\n  });\n\n  function dismissAllTooltips() {\n    document.querySelectorAll('.tooltip-content').forEach(t => t.classList.add('js-hidden'));\n  }\n\n  document.addEventListener('click', (e) => {\n    if (!e.target.closest('.tooltip-container')) {\n      document.querySelectorAll('.tooltip-content').forEach(t => t.classList.remove('js-hidden'));\n    }\n  });\n});\n<\/code><\/pre>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06cc\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u0627\u0648\u067e\u0631 \u06a9\u0627 \u06a9\u0648\u0688 \u063a\u0644\u0637 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0628\u0627\u0644\u06a9\u0644 \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627\u06d4 \u0645\u0633\u0626\u0644\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0627 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 <code>:hover<\/code> \u0627\u0648\u0631 <code>:focus-within<\/code> \u0633\u0644\u06cc\u06a9\u0679\u0631\u0632 \u0641\u0631\u0627\u0631 \u0633\u06d2 \u0628\u0631\u062e\u0627\u0633\u062a\u060c \u0679\u0686 \u0679\u0648\u06af\u0644\u0632\u060c \u06cc\u0627 \u06a9\u0644\u06a9 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u0648 \u0646\u06c1\u06cc\u06ba \u0633\u0646\u0628\u06be\u0627\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u0648 \u0679\u0648\u0644 \u0679\u067e \u06a9\u06cc \u062d\u0627\u0644\u062a \u06a9\u0648 \u0645\u0646\u0638\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u062a\u0648\u0627\u0632\u06cc JavaScript \u0633\u0633\u0679\u0645 \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0645\u0631\u0626\u06cc\u062a \u06a9\u0648 \u0627\u0628 \u062f\u0648 \u0633\u0633\u0679\u0645\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u062c\u0646\u06c1\u06cc\u06ba \u06c1\u0645 \u0622\u06c1\u0646\u06af\u06cc \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <code>js-hidden<\/code> \u06a9\u0644\u0627\u0633\u0632 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u0628\u06be\u06cc \u0645\u062a\u062c\u0633\u0633 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062f\u06c1 \u0679\u0648\u0644 \u0679\u0650\u067e \u062c\u0632\u0648 \u06a9\u0648\u0688 \u06a9\u0648 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0644\u0627\u060c \u0622\u0626\u06cc\u06d2 \u062f\u06cc\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u06cc\u062c\u0646\u0679 \u06a9\u0633 \u0637\u0631\u062d \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u06c1\u062f\u0627\u06cc\u0627\u062a \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0637\u0644\u0627\u0639\u06cc \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-before-toast-notification-with-exit-animation\">\u067e\u0686\u06be\u0644\u0627: \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0679\u0648\u0633\u0679 \u0646\u0648\u0679\u06cc\u0641\u06a9\u06cc\u0634\u0646<\/h3>\n<p><strong>\u0641\u0648\u0631\u06cc:<\/strong> &quot;\u0627\u06cc\u06a9 \u0679\u0648\u0633\u0679 \u0646\u0648\u0679\u06cc\u0641\u06a9\u06cc\u0634\u0646 \u0633\u0633\u0679\u0645 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0648 \u0627\u0637\u0644\u0627\u0639 \u06c1\u0679\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u063a\u0627\u0626\u0628 \u06c1\u0648 \u062c\u0627\u0626\u06d2\u06d4&#8221;<\/p>\n<pre><code class=\"language-javascript\">\/\/ &#x274c; Before MWG \u2014 JavaScript owns the entire animation lifecycle\nconst dismissToast = (toast) => {\n  if (toast.classList.contains('toast-fade-out')) return;\n\n  \/\/ 1. Apply fade-out class to trigger CSS transition\n  toast.classList.add('toast-fade-out');\n\n  \/\/ 2. Wait for transition, then remove from DOM\n  const handleUnmount = (e) => {\n    if (e.propertyName === 'opacity' || e.propertyName === 'transform') {\n      toast.removeEventListener('transitionend', handleUnmount);\n      toast.remove();\n    }\n  };\n  toast.addEventListener('transitionend', handleUnmount);\n\n  \/\/ 3. Fallback in case transitionend doesn't fire\n  setTimeout(() => {\n    if (toast.parentNode) toast.remove();\n  }, 400);\n};\n\n\/\/ Auto-dismiss after 4 seconds\nautoDismissTimer = setTimeout(() => {\n  dismissToast(toast);\n}, 4000);\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u0648\u067e\u0631 \u0648\u0627\u0644\u06d2 \u06a9\u0648\u0688 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u067e\u06cc\u0679\u0631\u0646 \u0628\u06c1\u062a \u0639\u0627\u0645 \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0646\u0648\u0679 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0679\u0627\u0626\u0645\u0646\u06af \u0633\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u062a\u0639\u0644\u0642 \u0645\u0633\u0627\u0626\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u062a\u0646\u0627 \u0648\u0642\u0641 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u062c\u0646\u0679 \u0627\u06cc\u06a9 CSS \u06a9\u0644\u0627\u0633 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06a9\u06d2 \u0645\u0646\u062a\u0642\u0644\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>transitionend<\/code> \u06cc\u06c1 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u06a9\u0633\u06cc \u0639\u0646\u0635\u0631 \u06a9\u0648 \u06a9\u0628 \u06c1\u0679\u0627\u0646\u0627 \u06c1\u06d2\u060c \u06c1\u0645 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: <code>setTimeout<\/code> \u0635\u0631\u0641 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba <code>transitionend<\/code> \u0641\u0627\u0626\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627\u060c \u067e\u06be\u0631 \u062f\u0648\u0633\u0631\u0627 <code>setTimeout<\/code> \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631\u0637\u0631\u0641\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n<p>JavaScript \u0627\u0648\u0631 CSS \u06af\u06c1\u0631\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062c\u0691\u06d2 \u06c1\u0648\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 CSS \u0645\u06cc\u06ba \u0645\u0646\u062a\u0642\u0644\u06cc \u06a9\u06cc \u0645\u062f\u062a \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 JavaScript \u06a9\u06d2 \u0679\u0627\u0626\u0645 \u0622\u0624\u0679 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u0628\u06be\u06cc \u0645\u062a\u062c\u0633\u0633 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062f\u06c1 \u0679\u0648\u0633\u0679 \u0646\u0648\u0679\u06cc\u0641\u06a9\u06cc\u0634\u0646 \u06a9\u0648\u0688 \u0686\u06cc\u06a9 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062f\u0648\u0646\u0648\u06ba \u0645\u062b\u0627\u0644\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0645\u0648\u0631\u0641\u0648\u0644\u0648\u062c\u06cc \u06a9\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u062c\u0646\u0679 \u0627\u0646 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06cc \u062a\u0644\u0627\u0641\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0628\u0631\u0627\u0624\u0632\u0631 \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u062a\u0627 \u06a9\u06c1 \u0648\u06c1 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-what-is-modern-web-guidance-mwg\">\u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 (MWG) \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/h2>\n<p>\u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0644\u0627\u0626\u0646\u0632 \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06c1\u06d2 \u062c\u0633\u06d2 \u06af\u0648\u06af\u0644 \u06a9\u0631\u0648\u0645 \u0679\u06cc\u0645 \u0627\u0648\u0631 \u0645\u0627\u0626\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u0679 \u0627\u06cc\u062c \u0679\u06cc\u0645 \u0646\u06d2 \u0633\u067e\u0648\u0631\u0679 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633 \u06a9\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u0645\u0627\u0688\u0644 \u06cc\u06c1 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u062a\u0648\u0642\u0639 \u06a9\u0631\u06d2 \u06a9\u06c1 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06cc\u0627 \u067e\u06cc\u0634 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u060c \u06c1\u0645 \u0622\u067e \u06a9\u06d2 \u0645\u0627\u0688\u0644 \u06a9\u0648 \u0633\u0627\u062e\u062a\u06cc\u060c \u0645\u0627\u06c1\u0631 \u06a9\u06cc \u062a\u0648\u062b\u06cc\u0642 \u0634\u062f\u06c1 \u062d\u0648\u0627\u0644\u06c1 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0639\u0627\u0645 \u062a\u0631\u0642\u06cc\u0627\u062a\u06cc \u0645\u0646\u0638\u0631\u0646\u0627\u0645\u0648\u06ba \u06a9\u0648 \u062f\u0631\u0633\u062a \u062d\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u0642\u0634\u06c1 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627: <strong>\u0627\u06cc\u062c\u0646\u0679 \u06a9\u06cc \u0645\u06c1\u0627\u0631\u062a<\/strong>, <code>SKILL.md<\/code> \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u062c\u0648 \u06a9\u0633\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0648\u0688 \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u067e\u0691\u06be\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u067e\u0631\u0627\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u0635\u0648\u0635 \u06c1\u062f\u0627\u06cc\u0627\u062a \u06a9\u06d2 \u062f\u0633\u062a\u06cc \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0648\u0686\u06cc\u06ba \u062c\u0648 \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u0648 \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 APIs \u06a9\u06cc\u0627 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646\u06c1\u06cc\u06ba \u06a9\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062a\u06a9\u0646\u06cc\u06a9 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u06a9\u06cc \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0648 \u062c\u062f\u06cc\u062f \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06d2 \u062d\u0644 \u0645\u06cc\u06ba \u0627\u0633 \u0637\u0631\u062d \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0648\u0646 \u0644\u0627\u0626\u0646 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0645\u0627\u0646\u0688\u0632 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u0645\u06cc\u06a9\u0627\u0646\u0632\u0645 \u062a\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<ol>\n<li>\n<p>\u0686\u0648\u0646\u06a9\u06c1 \u06a9\u0627\u0645 \u0648\u06cc\u0628 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u06c1\u06d2\u060c \u0627\u06cc\u062c\u0646\u0679 \u0645\u06c1\u0627\u0631\u062a \u06a9\u0648 \u0686\u0627\u0644\u0648 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u062c\u0646\u0679 \u0628\u06be\u0627\u06af\u062a\u0627 \u06c1\u06d2\u06d4 <code>modern-web-guidance search \"<query>\"<\/query><\/code>\u0622\u0641 \u0644\u0627\u0626\u0646 TensorFlow.js \u0645\u0627\u0688\u0644 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0645\u0642\u0627\u0645\u06cc \u0633\u06cc\u0645\u0646\u0679\u06a9 \u062a\u0644\u0627\u0634\u06d4 \u06a9\u0648\u0626\u06cc API \u06a9\u06cc\u0632\u060c \u06a9\u0648\u0626\u06cc \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u0627\u0644\u0632 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u062c\u0646\u0679 \u0645\u0645\u0627\u062b\u0644 \u06af\u0627\u0626\u06cc\u0688\u0632 \u062a\u0644\u0627\u0634 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0628\u0630\u0631\u06cc\u0639\u06c1: <code>modern-web-guidance retrieve <guide-id\/><\/code>\u06c1\u062f\u0641 \u06a9\u06d2 \u0646\u0645\u0648\u0646\u0648\u06ba\u060c \u0645\u0633\u0627\u0626\u0644\u060c \u0627\u0648\u0631 \u0645\u062a\u0628\u0627\u062f\u0644 \u062d\u06a9\u0645\u062a \u0639\u0645\u0644\u06cc\u0648\u06ba \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u06cc \u06a9\u06be\u0691\u06a9\u06cc \u0645\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n<p>\u0645\u06c1\u0627\u0631\u062a \u06a9\u06d2 \u062f\u0648 \u067e\u06cc\u06a9 \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06cc\u06ba\u06d4 <code>modern-web-guidance<\/code> \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u0624\u0632\u0631 APIs\u060c CSS \u0644\u06d2 \u0622\u0624\u0679 \u0633\u0633\u0679\u0645\u0632\u060c \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc\u060c \u0631\u0633\u0627\u0626\u06cc\u060c \u0627\u0648\u0631 \u0628\u0644\u0679 \u0627\u0646 AI APIs \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u06cc\u06c1\u06cc \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><code>chrome-extensions<\/code>    \u0645\u06cc\u0646\u06cc \u0641\u06cc\u0633\u0679 V3\u060c \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0648\u0631\u06a9\u0631\u0632\u060c \u0627\u0648\u0631 \u06a9\u0631\u0648\u0645 \u0648\u06cc\u0628 \u0627\u0633\u0679\u0648\u0631 \u067e\u0628\u0644\u0634\u0646\u06af \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u062a\u0634\u062e\u06cc\u0635 \u0646\u06d2 \u0627\u06cc\u062c\u0646\u0679 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0645\u0648\u062c\u0648\u062f\u06c1 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0637\u0631\u06cc\u0642\u0648\u06ba \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0644 \u0645\u06cc\u06ba 37 \u0641\u06cc\u0635\u062f \u067e\u0648\u0627\u0626\u0646\u0679 \u06a9\u06cc \u0628\u06c1\u062a\u0631\u06cc \u062f\u06a9\u06be\u0627\u0626\u06cc\u06d4<\/p>\n<h2 id=\"heading-how-to-install-modern-web-guidance\">\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u06c1\u062f\u0627\u06cc\u0627\u062a \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u06cc\u0648\u0646\u06cc\u0648\u0631\u0633\u0644 \u067e\u0627\u062a\u06be (\u062a\u0645\u0627\u0645 \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2):<\/p>\n<pre><code class=\"language-shell\">npx modern-web-guidance@latest install\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0648\u0632\u0631\u0688 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06d2 \u06af\u0627 \u062c\u0648 \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0626\u06d2 \u06af\u0627\u060c \u0622\u067e \u0633\u06d2 \u067e\u0648\u0686\u06be\u06d2 \u06af\u0627 \u06a9\u06c1 \u0622\u067e \u06a9\u0648\u0646 \u0633\u0627 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u067e\u06cc\u06a9 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u0633 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u067e\u06cc\u06a9 \u06a9\u0648 \u062d\u0630\u0641 \u06a9\u0631 \u062f\u06cc\u06ba \u06af\u06d2\u06d4 <code>SKILL.md<\/code> \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0635\u062d\u06cc\u062d \u062c\u06af\u06c1 \u067e\u0631 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4 CLI \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0622\u0641 \u0644\u0627\u0626\u0646 \u0627\u0648\u0631 \u062e\u0648\u062f\u0645\u062e\u062a\u0627\u0631 \u06c1\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0628\u06cc\u0631\u0648\u0646\u06cc \u0627\u0646\u062d\u0635\u0627\u0631 \u0627\u0648\u0631 API \u06a9\u06cc\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06a9\u0644\u0627\u0688 \u06a9\u0648\u0688:<\/p>\n<pre><code class=\"language-shell\">#1. Add the marketplace \/plugin marketplace add GoogleChrome\/modern-web-guidance\n\n#2. Install the plugin\n\/plugin install modern-web-guidance@googlechrome\n\n#3. Reload plugins\n\/reload-plugins\n<\/code><\/pre>\n<p>\u062a\u0646\u0635\u06cc\u0628 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 .claude\/skills\/ \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062c\u0691 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0645\u06c1\u0627\u0631\u062a \u06a9\u06cc \u0641\u0627\u0626\u0644\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0648\u06c1 \u062c\u06af\u06c1 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u06a9\u0644\u0627\u0688 \u06a9\u0648\u0688 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u06a9\u0648 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u0631\u0633\u0631:<\/p>\n<p>\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc \u0627\u0633\u06a9\u0644 \u0645\u0627\u0631\u06a9\u06cc\u0679 \u067e\u0644\u06cc\u0633 \u0645\u06cc\u06ba \u062f\u0631\u062c \u06c1\u06d2\u06d4<\/p>\n<p><code>Search for modern-web-guidance and click Install, no CLI step required.<\/code><\/p>\n<p>GitHub \u0634\u0631\u06cc\u06a9 \u067e\u0627\u0626\u0644\u0679 CLI:<\/p>\n<pre><code class=\"language-shell\"># 1. Add the marketplace \/plugin marketplace add GoogleChrome\/modern-web-guidance\n\n# 2. Install the plugin\n\/plugin install modern-web-guidance@googlechrome\n<\/code><\/pre>\n<p>\u0648\u0631\u0633\u0644 \u0627\u06cc\u062c\u0646\u0679 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc:<\/p>\n<pre><code class=\"language-shell\">npx skills add GoogleChrome\/modern-web-guidance\n<\/code><\/pre>\n<p>\u06af\u0648\u06af\u0644 \u0627\u06cc\u0646\u0679\u06cc \u06af\u0631\u06cc\u0648\u0679\u06cc:<\/p>\n<p>\u0627\u06cc\u06a9 \u06a9\u0644\u06a9 \u06a9\u06cc \u062a\u0646\u0635\u06cc\u0628 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u06cc\u067e \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0633\u06d2 \u0645\u0645\u06a9\u0646 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-after-installing-modern-web-guidance-what-actually-changes\">\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f: \u0627\u0635\u0644 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u0622\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u0627\u0646\u0633\u0679\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u0646\u06d2 \u0679\u0648\u0644 \u0679\u0650\u067e \u0627\u0648\u0631 \u0646\u0648\u0679\u06cc\u0641\u06a9\u06cc\u0634\u0646 \u0645\u06cc\u0633\u062c \u062f\u0648\u0646\u0648\u06ba \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u067e\u0631\u0627\u0645\u067e\u0679 \u0622\u0624\u0679 \u067e\u0679 \u062f\u06cc\u06a9\u06be\u0627\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06c1\u06cc \u067e\u0631\u0627\u0645\u067e\u0679 \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u06cc\u062c\u0646\u0679 \u0628\u0627\u0644\u06a9\u0644 \u0645\u062e\u062a\u0644\u0641 \u0679\u0648\u0644 \u062a\u06a9 \u067e\u06c1\u0646\u0686 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<h3 id=\"heading-after-tooltip-component\">\u06a9\u06d2 \u0628\u0639\u062f: \u0679\u0648\u0644 \u0679\u067e \u062c\u0632\u0648<\/h3>\n<p>\u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688 \u0644\u0627\u0626\u0646\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u0648\u06c1\u06cc \u0679\u0648\u0644 \u0679\u0650\u067e \u067e\u0631\u0627\u0645\u067e\u0679 \u0628\u0627\u0644\u06a9\u0644 \u0628\u06be\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u06cc\u062c\u0646\u0679 \u062f\u0648 APIs \u062a\u06a9 \u067e\u06c1\u0646\u0686\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0645\u0644 \u06a9\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>popover=\"hint\"<\/code> \u0688\u06cc\u0641\u0627\u0644\u0679 \u06c1\u0648\u0648\u0631\/\u0641\u0648\u06a9\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u0645\u0631\u0626\u06cc\u062a <code>interestfor<\/code> HTML \u0645\u06cc\u06ba \u0627\u0639\u0644\u0627\u0646\u06cc\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06c1\u062f\u0627\u0641 \u0633\u06d2 \u0645\u062d\u0631\u06a9\u0627\u062a \u0645\u0646\u0633\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 (Interest Invokers API) \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-html\"><!-- &#x2705; After MWG \u2014 declarative HTML, zero JavaScript -->\n\n<\/code><\/pre>\n<pre><code class=\"language-css\">\/* Anchor positioning wires layout to the trigger *\/\n#btn-deploy {\n  anchor-name: --tooltip-deploy;\n}\n\n#tooltip-deploy {\n  position-anchor: --tooltip-deploy;\n}\n\n.tooltip-content[popover] {\n  position: absolute;\n  bottom: anchor(top);\n  left: anchor(center);\n  transform: translateX(-50%) translateY(8px);\n\n  opacity: 0;\n  transition: opacity 0.2s ease,\n              display 0.2s allow-discrete,\n              overlay 0.2s allow-discrete;\n}\n\n.tooltip-content[popover]:popover-open {\n  opacity: 1;\n  transform: translateX(-50%) translateY(-12px);\n}\n\n@starting-style {\n  .tooltip-content[popover]:popover-open {\n    opacity: 0;\n    transform: translateX(-50%) translateY(8px);\n  }\n}\n<\/code><\/pre>\n<p>\u06a9\u06c1 <code>js-hidden<\/code> \u06a9\u0644\u0627\u0633\u0632 \u062e\u062a\u0645 \u06c1\u0648 \u0686\u06a9\u06cc \u06c1\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>dismissAllTooltips()<\/code> \u062e\u0635\u0648\u0635\u06cc\u062a \u062e\u062a\u0645 \u06c1\u0648\u06af\u0626\u06cc\u06d4 \u06a9\u06c1 <code>touchstart<\/code> \u06c1\u06cc\u0646\u0688\u0644\u0631 \u0686\u0644\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u06a9\u0644\u06a9 \u0628\u06cc\u0631\u0648\u0646\u06cc \u067e\u062a\u06c1 \u0686\u0644\u0627 \u06af\u06cc\u0627 \u06c1\u06d2.<\/p>\n<p><code>popover=\"hint\"<\/code>    \u06cc\u06c1 \u0688\u06cc\u0641\u0627\u0644\u0679 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u0627\u06cc\u06a9 \u0646\u0631\u0645 \u0642\u0631\u06cc\u0628\u06cc \u0631\u0648\u06cc\u06c1 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0628\u0631\u0627\u0624\u0632\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u06c1\u0648\u0648\u0631 \u0627\u0646\u0679\u06cc\u0646\u0679\u0633\u060c \u0641\u0648\u06a9\u0633 \u0645\u06cc\u0646\u062c\u0645\u0646\u0679\u060c \u0641\u0631\u0627\u0631 \u0633\u06d2 \u0628\u0631\u062e\u0627\u0633\u062a\u060c \u0627\u0648\u0631 \u0679\u0686 \u0633\u06cc\u0645\u0646\u0679\u06a9\u0633 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>@starting-style<\/code> \u0627\u0646\u062f\u0631\u0627\u062c \u06a9\u06cc \u062d\u0631\u06a9\u062a \u06a9\u06cc \u062d\u0627\u0644\u062a \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba\u060c <code>allow-discrete<\/code> \u0686\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0628\u0627\u06c1\u0631 \u0646\u06a9\u0644\u0646\u06d2 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u0646\u062a\u0642\u0644\u06cc \u06a9\u06cc \u062f\u0648\u0646\u0648\u06ba \u0633\u0645\u062a\u06cc\u06ba \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 CSS \u06a9\u06cc \u0645\u0644\u06a9\u06cc\u062a \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>\u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u06a9\u06d2 \u0646\u0648\u0679:<\/strong> \u062f\u0644\u0686\u0633\u067e\u06cc \u06a9\u0627\u0644\u0631 API (<code>interestfor<\/code>) \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u062c\u06be\u0646\u0688\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u067e\u0648\u0644\u06cc \u0641\u0644 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2: <code>unpkg.com\/interestfor<\/code>. CSS \u0627\u06cc\u0646\u06a9\u0631 \u06a9\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u0628\u06cc\u0633 \u0644\u0627\u0626\u0646 2025 \u06c1\u06d2\u06d4 \u0627\u06cc\u062c\u0646\u0679 \u0646\u06d2 \u0627\u067e\u0646\u06d2 \u0622\u0624\u0679 \u067e\u0679 \u0645\u06cc\u06ba \u067e\u0648\u0644\u06cc \u0641\u0644 \u0644\u0648\u0688 \u0628\u06be\u06cc \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627\u06d4 caniuse.com\/css-anchor-positioning \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0634\u067e\u0646\u06af \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u067e\u0646\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc \u0645\u0639\u0627\u0648\u0646\u062a \u06a9\u06cc \u0636\u0631\u0648\u0631\u06cc\u0627\u062a \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2: \u06cc\u06c1\u0627\u06ba \u062f\u0648 APIs \u0645\u06cc\u06ba \u0633\u06d2\u060c CSS \u0627\u06cc\u0646\u06a9\u0631 \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0645\u0633\u062a\u062d\u06a9\u0645 \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u0645\u06cc\u06ba \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u06d4 <code>interestfor<\/code> \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u062c\u0631\u0628\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u067e\u0648\u0644\u06cc \u0641\u0644\u0632 \u0627\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0648\u0686\u06cc\u06ba \u06a9\u06c1 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06c1\u0627\u06ba \u062c\u0627 \u0631\u06c1\u0627 \u06c1\u06d2\u060c \u0627\u06cc\u0633\u06cc \u0686\u06cc\u0632 \u0646\u06c1\u06cc\u06ba \u062c\u0633\u06d2 \u0622\u067e \u0622\u062c \u0628\u063a\u06cc\u0631 \u062c\u0627\u0646\u0686 \u06a9\u06d2 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0645\u06cc\u06ba \u062c\u0627\u0631\u06cc \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h3 id=\"heading-after-toast-notification-with-exit-animation\">\u0628\u0639\u062f: \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0679\u0648\u0633\u0679 \u0646\u0648\u0679\u06cc\u0641\u06a9\u06cc\u0634\u0646<\/h3>\n<p>\u0645\u0627\u0688\u0631\u0646 \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0648\u06c1\u06cc \u0679\u0648\u0633\u0679 \u067e\u0631\u0627\u0645\u067e\u0679 \u06c1\u0648\u06af\u0627\u06d4 <code>popover=\"manual\"<\/code> \u06a9\u0644\u0627\u0633 \u06a9\u06cc \u0645\u0646\u062a\u0642\u0644\u06cc \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0639\u0646\u0635\u0631 <code><\/p>\n<div>. The browser's Top Layer handles rendering and stacking context natively.<\/p>\n<pre><code class=\"language-javascript\">\/\/ &#x2705; After MWG \u2014 the browser handles show\/hide; JS handles auto-dismiss timing only\nconst createToast = (type) => {\n  const toast = document.createElement('div');\n  toast.setAttribute('popover', 'manual');\n  toast.className = `toast toast-${type}`;\n\n  toast.innerHTML = `\n    <p>...<\/p>\n    <p>...<\/p>\n    <button popovertarget=\"${toastId}\" popovertargetaction=\"hide\" class=\"toast-close\" aria-label=\"Dismiss notification\">\u00d7<\/button>\n  `;\n\n  container.appendChild(toast);\n  toast.showPopover(); \/\/ triggers @starting-style entry animation natively\n\n  \/\/ Auto-dismiss\n  const autoDismissTimer = setTimeout(() => {\n    if (toast.matches(':popover-open')) toast.hidePopover();\n  }, 4000);\n\n  \/\/ Remove from DOM after exit transition completes\n  toast.addEventListener('beforetoggle', (event) => {\n    if (event.newState === 'closed') {\n      clearTimeout(autoDismissTimer);\n      toast.addEventListener('transitionend', () => toast.remove(), { once: true });\n      setTimeout(() => { if (toast.parentNode) toast.remove(); }, 500); \/\/ fallback\n    }\n  });\n};\n<\/code><\/pre>\n<pre><code class=\"language-css\">\/* &#x2705; CSS owns both entry and exit animation *\/\n.toast[popover] {\n  opacity: 0;\n  transform: translateX(60px) scale(0.95);\n  transition: opacity 0.3s ease,\n              transform 0.3s ease,\n              display 0.3s allow-discrete,\n              overlay 0.3s allow-discrete;\n}\n\n.toast[popover]:popover-open {\n  opacity: 1;\n  transform: translateX(0) scale(1);\n}\n\n@starting-style {\n  .toast[popover]:popover-open {\n    opacity: 0;\n    transform: translateX(60px) scale(0.95);\n  }\n}\n<\/code><\/pre>\n<p>\u062f\u0633\u062a\u06cc \u0628\u0646\u062f \u0628\u0679\u0646 \u0627\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>popovertarget<\/code> \u0627\u0648\u0631 <code>popovertargetaction=\"hide\"<\/code>\u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646\u06cc\u06c1 HTML \u0628\u0627\u0626\u0646\u0688\u0646\u06af \u06c1\u06d2 \u062c\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0644\u06a9 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 <code>showPopover()<\/code> \u0645\u062d\u0631\u06a9 <code>@starting-style<\/code> \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0622\u0626\u0679\u0645 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646\u06d4 <code>hidePopover()<\/code> CSS \u0627\u06cc\u06af\u0632\u0679 \u0679\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u06a9\u0648 \u0679\u0631\u06af\u0631 \u06a9\u0631\u06cc\u06ba \u0628\u0630\u0631\u06cc\u0639\u06c1: <code>allow-discrete<\/code>.<\/p>\n<p>\u0627\u0628 JavaScript \u0635\u0631\u0641 \u062f\u0648 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0630\u0645\u06c1 \u062f\u0627\u0631 \u06c1\u06d2: \u0627\u06cc\u06a9 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u06cc\u0644\u06cc\u0632 \u0679\u0627\u0626\u0645 \u0622\u0624\u0679 \u06a9\u0648 \u0634\u06cc\u0688\u0648\u0644 \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u0627\u06cc\u06af\u0632\u0679 \u0679\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f DOM \u0633\u06d2 \u0639\u0646\u0635\u0631 \u06a9\u0648 \u06c1\u0679\u0627\u0646\u0627\u06d4 \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u06a9\u06cc \u0627\u06cc\u0688\u062c\u0633\u0679\u0645\u0646\u0679 \u067e\u06c1\u0644\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u062a\u06be\u06cc\u06d4 <code>transitionend<\/code> \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u06d2\u060c CSS \u06a9\u0644\u0627\u0633 \u0679\u0648\u06af\u0644\u0632\u060c \u0627\u0648\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u0679\u0627\u0626\u0645\u0646\u06af \u062e\u062a\u0645 \u06c1\u0648 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0648\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc \u0645\u0644\u06a9\u06cc\u062a \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-what-modern-web-guidance-does-not-handle-for-you\">\u062c\u0648 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0644\u0627\u0626\u0646\u0632 \u0633\u0646\u0628\u06be\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u0633\u06a9\u062a\u06d2<\/h2>\n<p>\u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u0631\u06c1\u0646\u0645\u0627 \u062e\u0637\u0648\u0637 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u06cc\u062c\u0646\u0679 \u0627\u067e\u0646\u06cc \u067e\u06c1\u0644\u06cc \u06a9\u0648\u0634\u0634 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0648\u0688 \u06a9\u06d2 \u062c\u0627\u0626\u0632\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062f\u0631\u062d\u0642\u06cc\u0642\u062a\u060c \u062f\u0648 \u0631\u06af\u0691 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u06c1\u06cc\u06ba \u062c\u0648 \u0645\u0633\u062a\u0642\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0627\u0645\u0646\u06d2 \u0622\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-1-the-bleeding-edge-cliff\">1. \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 \u0686\u0679\u0627\u0646\u06cc\u06ba\u06d4<\/h3>\n<p>\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u06c1\u062f\u0627\u06cc\u0627\u062a \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u067e\u0631 \u0645\u0628\u0646\u06cc \u06c1\u06cc\u06ba\u06d4 <code>@starting-style<\/code>, <code>transition-behavior: allow-discrete<\/code>CSS \u0627\u06cc\u0646\u06a9\u0631 \u067e\u0648\u0632\u06cc\u0634\u0646\u0646\u06af \u0627\u0648\u0631 Interest Invokers APIs \u062f\u0648\u0646\u0648\u06ba \u062f\u0631\u0633\u062a \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u06a9\u0686\u06be \u0627\u0633 \u062d\u062f \u062a\u06a9 \u0646\u0626\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u0646\u06c1\u06cc\u06ba \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0648\u0644\u06cc \u0641\u0644\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0627\u06cc\u062c\u0646\u0679 \u0627\u067e\u0646\u06d2 \u0622\u0624\u0679 \u067e\u0679 \u0645\u06cc\u06ba \u0645\u062a\u0639\u0644\u0642\u06c1 \u067e\u0648\u0644\u06cc \u0641\u0644 \u06a9\u06cc \u062f\u0631\u0622\u0645\u062f\u0627\u062a \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc \u0645\u062f\u062f \u06a9\u06cc \u0627\u0635\u0644 \u0636\u0631\u0648\u0631\u06cc\u0627\u062a \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u06a9\u0648\u0646 \u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u062c\u0648\u0646\u06cc\u0626\u0631 \u0688\u0648\u06cc\u0644\u067e\u0631 \u067e\u0691\u06be\u0646\u0627 <code>interestfor<\/code> \u06cc\u0627 <code>position-anchor<\/code> \u0622\u067e \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u0627\u0646 \u06a9\u0648 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u06af\u0627\u0626\u06cc\u0688\u0646\u0633 \u06cc\u06c1 \u0645\u0627\u0646\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 \u062c\u0648\u0627\u0628 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0646\u06c1 \u06a9\u06c1 \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0627\u0646\u0648\u0633 \u062c\u0648\u0627\u0628\u06d4<\/p>\n<h3 id=\"heading-2-the-css-encapsulation-trade-off\">2. CSS \u0627\u0646\u06a9\u06cc\u067e\u0633\u0648\u0644\u06cc\u0634\u0646 \u0679\u0631\u06cc\u0688 \u0622\u0641<\/h3>\n<p>\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc \u0622\u067e \u06a9\u0648 \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u0648 \u0627\u0646 \u0644\u0627\u0626\u0646 \u0627\u0633\u0679\u0627\u0626\u0644 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 <code>dangerouslySetInnerHTML<\/code> \u0633\u06cc\u06a9\u06cc\u0648\u0631\u0679\u06cc \u0627\u0648\u0631 \u06a9\u0648\u0688 \u06a9\u06cc \u0648\u062c\u0648\u06c1\u0627\u062a \u06a9\u06cc \u0628\u0646\u0627 \u067e\u0631\u060c \u06a9\u0644\u06cc\u062f\u06cc \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 \u0639\u0627\u0644\u0645\u06cc \u0627\u0633\u0679\u0627\u0626\u0644 \u0634\u06cc\u0679 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0633\u0637\u062d \u06a9\u06cc \u0627\u0646\u06a9\u06cc\u067e\u0633\u0648\u0644\u06cc\u0634\u0646 \u0679\u0648\u0679 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0628\u0639\u062f \u0645\u06cc\u06ba \u062c\u0632\u0648 \u06a9\u0648 \u062d\u0630\u0641 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 CSS \u06a9\u0648 \u0627\u06cc\u06a9 \u0639\u0627\u0644\u0645\u06cc \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0627\u0644\u06af \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 \u06a9\u0627\u0644 \u0633\u0627\u062e\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062f\u0631\u0633\u062a \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u067e\u06be\u0631 \u0628\u06be\u06cc \u0627\u0633 \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u06a9\u06cc \u062c\u06af\u06c1 \u0627\u0648\u0631 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0648 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631\u0686\u06c1 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0639\u0645\u0644 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0644 \u0645\u06cc\u06ba 37 \u0646\u06a9\u0627\u062a\u06cc \u0628\u06c1\u062a\u0631\u06cc \u062d\u0642\u06cc\u0642\u06cc \u06c1\u06d2\u060c \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u0631\u06c1\u0646\u0645\u0627 \u062e\u0637\u0648\u0637 \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0628\u0627\u0644\u0627\u0626\u06cc \u062d\u062f \u06a9\u0648 \u0628\u0691\u06be\u0627\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0646\u0633\u0627\u0646\u06cc \u0641\u06cc\u0635\u0644\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u0648 \u062e\u062a\u0645 \u0646\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u06c1\u062a\u0631 \u0633\u0645\u062c\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u062f\u0631\u062d\u0642\u06cc\u0642\u062a\u060c \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0633\u0648\u0686\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u0648 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0648 \u067e\u0691\u06be \u06a9\u0631 \u0627\u067e \u0679\u0648 \u0688\u06cc\u0679 \u0631\u06c1\u0646\u06d2 \u06a9\u06cc \u0688\u06cc\u0648\u0644\u067e\u0631 \u06a9\u06cc \u0639\u0627\u062f\u062a \u0688\u0627\u0644\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u06cc\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 AI \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u0648\u06cc\u0628 \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0645\u06cc\u06ba \u0627\u0686\u06be\u06d2 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u0645\u0633\u0626\u0644\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06c1 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u067e\u0631\u0627\u0646\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u062a\u0631\u0628\u06cc\u062a\u06cc \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062a\u0634\u06a9\u06cc\u0644 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u062c\u0648 2020 \u06a9\u06cc \u062f\u06c1\u0627\u0626\u06cc \u06a9\u06d2 \u0627\u0648\u0627\u0626\u0644 \u06a9\u06d2 \u0648\u06cc\u0628 \u06a9\u0648 \u0622\u062c \u062f\u0633\u062a\u06cc\u0627\u0628 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0628 \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u067e\u06c1\u0644\u06d2\/\u0628\u0639\u062f \u06a9\u06d2 \u0679\u0648\u0644 \u0679\u067e\u0633 \u06c1\u06cc \u0622\u067e \u06a9\u0648 \u067e\u0648\u0631\u06cc \u06a9\u06c1\u0627\u0646\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>js-hidden<\/code> \u062f\u0648 HTML \u0635\u0641\u0627\u062a \u0627\u0648\u0631 \u0627\u06cc\u06a9 CSS \u0628\u0644\u0627\u06a9 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0686 \u06c1\u06cc\u0646\u0688\u0644\u0631\u0632 \u0627\u0648\u0631 \u0628\u06cc\u0631\u0648\u0646\u06cc \u06a9\u0644\u06a9 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0631\u06cc\u0627\u0633\u062a\u06cc \u0645\u0634\u06cc\u0646\u06d4 JavaScript \u06a9\u06d2 \u062a\u0639\u0627\u0645\u0644 \u06a9\u06cc \u067e\u0631\u062a \u06a9\u0648 \u0631\u06cc \u0641\u06cc\u06a9\u0679\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0627\u06cc\u062c\u0646\u0679 \u062c\u0648 \u06a9\u0648\u0688 \u0644\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0648\u06c1 \u0627\u062a\u0646\u0627 \u06c1\u06cc \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u062a\u0646\u0627 \u06a9\u06c1 \u0627\u0633 \u06a9\u0648\u0688 \u067e\u0631 \u062a\u0631\u0628\u06cc\u062a \u062f\u06cc \u06af\u0626\u06cc \u062a\u06be\u06cc\u06d4 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u0631\u06c1\u0646\u0645\u0627 \u062e\u0637\u0648\u0637 \u0627\u0633 \u0641\u0631\u0642 \u06a9\u0648 \u067e\u064f\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u06cc\u06ba \u0646\u06d2 \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u06cc\u06c1 \u0639\u06cc\u0646 \u062a\u062c\u0631\u0628\u06c1 \u06a9\u06cc\u0627\u06d4 \u0622\u067e opyboamah.com\/blog \u067e\u0631 \u062e\u0627\u0645 \u0627\u062e\u062a\u0644\u0627\u0641\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u06a9\u0645\u0644 \u06a9\u06cc\u0633 \u0627\u0633\u0679\u0688\u06cc \u067e\u0691\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u06a9\u0686\u06be \u0645\u0641\u06cc\u062f \u0648\u0633\u0627\u0626\u0644 \u06c1\u06cc\u06ba:<\/p>\n<\/p><\/div>\n<hr\/>\n<hr\/>\n<p data-test-label=\"social-row-cta\" class=\"social-row\">\n<p>    \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u0628 \u062a\u06a9 \u067e\u0691\u06be\u0627 \u06c1\u06d2 \u062a\u0648 \u0645\u0635\u0646\u0641 \u0645\u06cc\u06ba \u062f\u0644\u0686\u0633\u067e\u06cc \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1\u06d4 <button id=\"tweet-btn\" class=\"cta-button\" data-test-label=\"tweet-button\">\u0634\u06a9\u0631\u06cc\u06c1<\/button>\n<\/p>\n<div class=\"learn-cta-row\" data-test-label=\"learn-cta-row\">\n<p>        \u0645\u0641\u062a \u0645\u06cc\u06ba \u06a9\u0648\u0688 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\u06d4 freeCodeCamp \u06a9\u06d2 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0646\u0635\u0627\u0628 \u0646\u06d2 40,000 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0644\u0648\u06af\u0648\u06ba \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0648\u0644\u067e\u0631 \u0645\u0644\u0627\u0632\u0645\u062a\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u06cc \u06c1\u06d2\u06d4 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627\n    <\/p>\n<\/div>\n<p>                <\/code><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>AI \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u06a9\u0627 \u06a9\u0627\u0641\u06cc \u0648\u0642\u062a \u0628\u0686\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u0639\u0646\u06cc\u060c \u062c\u0628 \u062a\u06a9 \u0622\u067e \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0648 \u0646\u06c1\u06cc\u06ba \u06a9\u06be\u0648\u0644\u062a\u06d2 \u0627\u0648\u0631 \u0645\u062d\u0633\u0648\u0633 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06a9\u06c1 \u0627\u0646\u06c1\u0648\u06ba \u0646\u06d2 \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0627 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 \u06cc\u06c1 2019 \u06c1\u06d2\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0627\u067e\u0646\u06d2 \u0627\u06cc\u062c\u0646\u0679 \u0633\u06d2 \u0679\u0648\u0644 \u0679\u067e \u0628\u0646\u0627\u0646\u06d2 \u06a9\u0648 \u06a9\u06c1\u06cc\u06ba\u06d4 HTML \u067e\u0627\u0644\u0634 \u0644\u06af \u0631\u06c1\u0627 \u06c1\u06d2 \u0627\u0648\u0631 CSS \u0679\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u06c1\u0645\u0648\u0627\u0631 \u06c1\u06cc\u06ba\u06d4 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-25837","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=25837"}],"version-history":[{"count":0,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25837\/revisions"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=25837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=25837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=25837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}