misc: update submodules

apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/en-US.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},r=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(c=f(e,t))||c.enumerable});return o};var w=(o,e,i)=>(i=o!=null?g(b(o)):{},r(e||!o||!o.__esModule?l(i,\"default\",{value:o,enumerable:!0}):i,o)),_=o=>r(l({},\"__esModule\",{value:!0}),o);var d=u((F,a)=>{a.exports=_jsx_runtime});var C={};x(C,{default:()=>h,frontmatter:()=>v});var n=w(d()),v={title:\"Describe Block Formatting Context (BFC) and how it works.\"};function s(o){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, \",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,n.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"s, and elements with \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" other than \",(0,n.jsx)(e.code,{children:\"visible\"}),\" (except when that value has been propagated to the viewport) establish new block formatting contexts.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Knowing how to establish a block formatting context is important, because without doing so, the containing box will not \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"contain floated children\"}),\". This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A BFC is an HTML box that satisfies at least one of the following conditions:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"float\"}),\" is not \",(0,n.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"position\"}),\" is neither \",(0,n.jsx)(e.code,{children:\"static\"}),\" nor \",(0,n.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"display\"}),\" is \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,n.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,n.jsx)(e.code,{children:\"flex\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,n.jsx)(e.code,{children:\"grid\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" is not \",(0,n.jsx)(e.code,{children:\"visible\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"collapsing margins\"}),\".\"]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return _(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},a=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(c=f(e,t))||c.enumerable});return o};var _=(o,e,i)=>(i=o!=null?g(b(o)):{},a(e||!o||!o.__esModule?l(i,\"default\",{value:o,enumerable:!0}):i,o)),w=o=>a(l({},\"__esModule\",{value:!0}),o);var d=u((S,r)=>{r.exports=_jsx_runtime});var C={};x(C,{default:()=>h,frontmatter:()=>v});var n=_(d()),v={title:\"Describe Block Formatting Context (BFC) and how it works.\"};function s(o){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, \",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,n.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"s, and elements with \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" other than \",(0,n.jsx)(e.code,{children:\"visible\"}),\" (except when that value has been propagated to the viewport) establish new block formatting contexts.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Knowing how to establish a block formatting context is important, because without doing so, the containing box will not \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"contain floated children\"}),\". This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A BFC is an HTML box that satisfies at least one of the following conditions:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"float\"}),\" is not \",(0,n.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"position\"}),\" is neither \",(0,n.jsx)(e.code,{children:\"static\"}),\" nor \",(0,n.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"display\"}),\" is \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,n.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,n.jsx)(e.code,{children:\"flex\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,n.jsx)(e.code,{children:\"grid\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" is not \",(0,n.jsx)(e.code,{children:\"visible\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"collapsing margins\"}),\".\"]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return w(C);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var _=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var x=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var c in e)d(l,c,{get:e[c],enumerable:!0})},r=(l,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!C.call(l,i)&&i!==c&&d(l,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return l};var u=(l,e,c)=>(c=l!=null?_(m(l)):{},r(e||!l||!l.__esModule?d(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>r(d({},\"__esModule\",{value:!0}),l);var h=x((v,t)=>{t.exports=_jsx_runtime});var F={};g(F,{default:()=>s,frontmatter:()=>B});var n=u(h()),B={title:\"\\u63CF\\u8FF0\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(l){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u662F\\u7F51\\u9875\\u89C6\\u89C9 CSS \\u6E32\\u67D3\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5176\\u4E2D\\u4F1A\\u5E03\\u5C40\\u5757\\u7EA7\\u76D2\\u5B50\\u3002\\u6D6E\\u52A8\\u3001\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u3001\",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-cells\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\" \\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\" \\u7684\\u5143\\u7D20\\uFF08\\u9664\\u975E\\u8BE5\\u503C\\u5DF2\\u4F20\\u64AD\\u5230\\u89C6\\u53E3\\uFF09\\u4F1A\\u5EFA\\u7ACB\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E86\\u89E3\\u5982\\u4F55\\u5EFA\\u7ACB\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u4E0D\\u8FD9\\u6837\\u505A\\uFF0C\\u5305\\u542B\\u6846\\u5C06\\u65E0\\u6CD5\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"\\u5305\\u542B\\u6D6E\\u52A8\\u5B50\\u5143\\u7D20\"}),\"\\u3002\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u6298\\u53E0\\u5916\\u8FB9\\u8DDD\\uFF0C\\u4F46\\u66F4\\u9690\\u853D\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4F1A\\u53D1\\u73B0\\u6574\\u4E2A\\u76D2\\u5B50\\u4EE5\\u5947\\u602A\\u7684\\u65B9\\u5F0F\\u6298\\u53E0\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"BFC \\u662F\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u81F3\\u5C11\\u4E00\\u4E2A\\u6761\\u4EF6\\u7684 HTML \\u76D2\\u5B50\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"none\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"position\"}),\" \\u7684\\u503C\\u65E2\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u4E5F\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"relative\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"display\"}),\" \\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 BFC \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u76D2\\u5B50\\u7684\\u5DE6\\u5916\\u8FB9\\u7F18\\u90FD\\u4E0E\\u5305\\u542B\\u5757\\u7684\\u5DE6\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF08\\u5BF9\\u4E8E\\u4ECE\\u53F3\\u5230\\u5DE6\\u7684\\u683C\\u5F0F\\uFF0C\\u53F3\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540C\\u4E00\\u4E2A BFC \\u5185\\u7684\\u76F8\\u90BB\\u5757\\u7EA7\\u76D2\\u5B50\\u4E4B\\u95F4\\u7684\\u5782\\u76F4\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\\uFF0C\\u4F46\\u662F BFC \\u963B\\u6B62\\u4E86\\u5B83\\u4E0E\\u5916\\u90E8\\u5143\\u7D20\\u7684\\u8FB9\\u8DDD\\u6298\\u53E0\\u3002 \\u8FDB\\u4E00\\u6B65\\u9605\\u8BFB \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"\\u5916\\u8FB9\\u8DDD\\u6298\\u53E0\"}),\"\\u3002\"]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return b(F);})();\n;return Component;"
+  "solution": "var Component=(()=>{var _=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var x=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var c in e)d(l,c,{get:e[c],enumerable:!0})},r=(l,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!C.call(l,i)&&i!==c&&d(l,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return l};var S=(l,e,c)=>(c=l!=null?_(m(l)):{},r(e||!l||!l.__esModule?d(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>r(d({},\"__esModule\",{value:!0}),l);var h=x((v,t)=>{t.exports=_jsx_runtime});var B={};g(B,{default:()=>s,frontmatter:()=>u});var n=S(h()),u={title:\"\\u63CF\\u8FF0\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(l){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u662F\\u7F51\\u9875\\u89C6\\u89C9 CSS \\u6E32\\u67D3\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5176\\u4E2D\\u4F1A\\u5E03\\u5C40\\u5757\\u7EA7\\u76D2\\u5B50\\u3002\\u6D6E\\u52A8\\u3001\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u3001\",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-cells\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\" \\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\" \\u7684\\u5143\\u7D20\\uFF08\\u9664\\u975E\\u8BE5\\u503C\\u5DF2\\u4F20\\u64AD\\u5230\\u89C6\\u53E3\\uFF09\\u4F1A\\u5EFA\\u7ACB\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E86\\u89E3\\u5982\\u4F55\\u5EFA\\u7ACB\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u4E0D\\u8FD9\\u6837\\u505A\\uFF0C\\u5305\\u542B\\u6846\\u5C06\\u4E0D\\u4F1A\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"\\u5305\\u542B\\u6D6E\\u52A8\\u5B50\\u5143\\u7D20\"}),\"\\u3002\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u6298\\u53E0\\u8FB9\\u8DDD\\uFF0C\\u4F46\\u66F4\\u9690\\u853D\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4F1A\\u53D1\\u73B0\\u6574\\u4E2A\\u6846\\u4EE5\\u5947\\u602A\\u7684\\u65B9\\u5F0F\\u6298\\u53E0\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"BFC \\u662F\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u81F3\\u5C11\\u4E00\\u4E2A\\u6761\\u4EF6\\u7684 HTML \\u76D2\\u5B50\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"none\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"position\"}),\" \\u7684\\u503C\\u65E2\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u4E5F\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"relative\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"display\"}),\" \\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 BFC \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u76D2\\u5B50\\u7684\\u5DE6\\u5916\\u8FB9\\u7F18\\u90FD\\u4E0E\\u5305\\u542B\\u5757\\u7684\\u5DE6\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF08\\u5BF9\\u4E8E\\u4ECE\\u53F3\\u5230\\u5DE6\\u7684\\u683C\\u5F0F\\uFF0C\\u53F3\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540C\\u4E00\\u4E2A BFC \\u5185\\u7684\\u76F8\\u90BB\\u5757\\u7EA7\\u76D2\\u5B50\\u4E4B\\u95F4\\u7684\\u5782\\u76F4\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\\uFF0C\\u4F46\\u662F BFC \\u963B\\u6B62\\u4E86\\u5B83\\u4E0E\\u5916\\u90E8\\u5143\\u7D20\\u7684\\u8FB9\\u8DDD\\u6298\\u53E0\\u3002 \\u8FDB\\u4E00\\u6B65\\u9605\\u8BFB \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"\\u5916\\u8FB9\\u8DDD\\u6298\\u53E0\"}),\"\\u3002\"]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return b(B);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/en-US.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!x.call(n,o)&&o!==i&&a(n,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return n};var w=(n,e,i)=>(i=n!=null?m(g(n)):{},s(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>s(a({},\"__esModule\",{value:!0}),n);var l=u((z,r)=>{r.exports=_jsx_runtime});var v={};k(v,{default:()=>d,frontmatter:()=>y});var t=w(l()),y={title:\"Describe `z-index` and how stacking context is formed.\"};function h(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" property in CSS controls the vertical stacking order of elements that overlap. \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" only affects positioned elements (elements which have a \",(0,t.jsx)(e.code,{children:\"position\"}),\" value which is not \",(0,t.jsx)(e.code,{children:\"static\"}),\") and its descendants or flex items.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Without any \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A stacking context is an element that contains a set of layers. Within a local stacking context, the \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" values of its children are set relative to that element rather than to the document root. Layers outside of that context \\u2014 i.e. sibling elements of a local stacking context \\u2014 can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" than element B.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" less than 1, \",(0,t.jsx)(e.code,{children:\"filter\"}),\" that is not \",(0,t.jsx)(e.code,{children:\"none\"}),\", and \",(0,t.jsx)(e.code,{children:\"transform\"}),\" that is not\",(0,t.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsxs)(e.em,{children:[(0,t.jsx)(e.strong,{children:\"Note\"}),\": What exactly qualifies an element to create a stacking context is listed in this long set of \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return _(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var o in e)a(n,o,{get:e[o],enumerable:!0})},s=(n,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!g.call(n,i)&&i!==o&&a(n,i,{get:()=>e[i],enumerable:!(c=p(e,i))||c.enumerable});return n};var w=(n,e,o)=>(o=n!=null?m(x(n)):{},s(e||!n||!n.__esModule?a(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>s(a({},\"__esModule\",{value:!0}),n);var l=u((C,r)=>{r.exports=_jsx_runtime});var v={};k(v,{default:()=>d,frontmatter:()=>_});var t=w(l()),_={title:\"Describe `z-index` and how stacking context is formed.\"};function h(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" property in CSS controls the vertical stacking order of elements that overlap. \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" only affects positioned elements (elements which have a \",(0,t.jsx)(e.code,{children:\"position\"}),\" value which is not \",(0,t.jsx)(e.code,{children:\"static\"}),\") and its descendants or flex items.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Without any \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A stacking context is an element that contains a set of layers. Within a local stacking context, the \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" values of its children are set relative to that element rather than to the document root. Layers outside of that context \\u2014 i.e. sibling elements of a local stacking context \\u2014 can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" than element B.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" less than 1, \",(0,t.jsx)(e.code,{children:\"filter\"}),\" that is not \",(0,t.jsx)(e.code,{children:\"none\"}),\", and \",(0,t.jsx)(e.code,{children:\"transform\"}),\" that is not\",(0,t.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsxs)(e.em,{children:[(0,t.jsx)(e.strong,{children:\"Note\"}),\": What exactly qualifies an element to create a stacking context is listed in this long set of \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return y(v);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/describe-z-index-and-how-stacking-context-is-formed/zh-CN.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var x=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},r=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!g.call(c,d)&&d!==t&&o(c,d,{get:()=>e[d],enumerable:!(i=m(e,d))||i.enumerable});return c};var z=(c,e,t)=>(t=c!=null?x(_(c)):{},r(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),C=c=>r(o({},\"__esModule\",{value:!0}),c);var h=f((B,l)=>{l.exports=_jsx_runtime});var j={};S(j,{default:()=>a,frontmatter:()=>u});var n=z(h()),u={title:\"\\u63CF\\u8FF0 `z-index` \\u4EE5\\u53CA\\u5982\\u4F55\\u5F62\\u6210\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u3002\"};function s(c){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u63A7\\u5236\\u91CD\\u53E0\\u5143\\u7D20\\u7684\\u5782\\u76F4\\u5806\\u53E0\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u4EC5\\u5F71\\u54CD\\u5DF2\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u5177\\u6709 \",(0,n.jsx)(e.code,{children:\"position\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u7684\\u5143\\u7D20\\uFF09\\u53CA\\u5176\\u540E\\u4EE3\\u6216 flex \\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u6309\\u7167\\u5B83\\u4EEC\\u5728 DOM \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u5806\\u53E0\\uFF08\\u5728\\u540C\\u4E00\\u5C42\\u7EA7\\u4E2D\\uFF0C\\u6700\\u4E0B\\u9762\\u7684\\u5143\\u7D20\\u51FA\\u73B0\\u5728\\u6700\\u4E0A\\u9762\\uFF09\\u3002\\u5177\\u6709\\u975E\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u53CA\\u5176\\u5B50\\u5143\\u7D20\\uFF09\\u5C06\\u59CB\\u7EC8\\u51FA\\u73B0\\u5728\\u5177\\u6709\\u9ED8\\u8BA4\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u4E4B\\u4E0A\\uFF0C\\u800C\\u4E0D\\u7BA1 HTML \\u5C42\\u6B21\\u7ED3\\u6784\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u662F\\u5305\\u542B\\u4E00\\u7EC4\\u5C42\\u7684\\u5143\\u7D20\\u3002\\u5728\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u662F\\u76F8\\u5BF9\\u4E8E\\u8BE5\\u5143\\u7D20\\u8BBE\\u7F6E\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u76F8\\u5BF9\\u4E8E\\u6587\\u6863\\u6839\\u5143\\u7D20\\u3002\\u8BE5\\u4E0A\\u4E0B\\u6587\\u4E4B\\u5916\\u7684\\u5C42\\u2014\\u2014\\u5373\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u540C\\u7EA7\\u5143\\u7D20\\u2014\\u2014\\u4E0D\\u80FD\\u4F4D\\u4E8E\\u5176\\u5185\\u7684\\u5C42\\u4E4B\\u95F4\\u3002\\u5982\\u679C\\u5143\\u7D20 B \\u4F4D\\u4E8E\\u5143\\u7D20 A \\u7684\\u9876\\u90E8\\uFF0C\\u800C\\u5143\\u7D20 A \\u7684\\u5B50\\u5143\\u7D20 C \\u6C38\\u8FDC\\u4E0D\\u80FD\\u9AD8\\u4E8E\\u5143\\u7D20 B\\uFF0C\\u5373\\u4F7F\\u5143\\u7D20 C \\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u6BD4\\u5143\\u7D20 B \\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6BCF\\u4E2A\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u90FD\\u662F\\u81EA\\u5305\\u542B\\u7684 - \\u5728\\u5143\\u7D20\\u7684content\\u5806\\u53E0\\u540E\\uFF0C\\u6574\\u4E2A\\u5143\\u7D20\\u88AB\\u8BA4\\u4E3A\\u5728\\u7236\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u5806\\u53E0\\u987A\\u5E8F\\u4E2D\\u3002\\u5C11\\u6570 CSS \\u5C5E\\u6027\\u4F1A\\u89E6\\u53D1\\u65B0\\u7684\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" \\u5C0F\\u4E8E 1\\u3001\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u4EE5\\u53CA\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"transform\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u786E\\u5207\\u5730\\u8BF4\\uFF0C\\u4EC0\\u4E48\\u4F7F\\u4E00\\u4E2A\\u5143\\u7D20\\u80FD\\u591F\\u521B\\u5EFA\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u5217\\u5728\\u8FD9\\u4E2A\\u957F\\u957F\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"\\u89C4\\u5219\"}),\" \\u96C6\\u4E2D\\u3002\"]})})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(s,{...c})}):s(c)}return C(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var x=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),g=(c,e)=>{for(var o in e)d(c,o,{get:e[o],enumerable:!0})},i=(c,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!S.call(c,t)&&t!==o&&d(c,t,{get:()=>e[t],enumerable:!(r=p(e,t))||r.enumerable});return c};var u=(c,e,o)=>(o=c!=null?x(_(c)):{},i(e||!c||!c.__esModule?d(o,\"default\",{value:c,enumerable:!0}):o,c)),C=c=>i(d({},\"__esModule\",{value:!0}),c);var h=f((y,l)=>{l.exports=_jsx_runtime});var j={};g(j,{default:()=>a,frontmatter:()=>z});var n=u(h()),z={title:\"\\u63CF\\u8FF0 `z-index` \\u4EE5\\u53CA\\u5982\\u4F55\\u5F62\\u6210\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u3002\"};function s(c){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u63A7\\u5236\\u91CD\\u53E0\\u5143\\u7D20\\u7684\\u5782\\u76F4\\u5806\\u53E0\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u4EC5\\u5F71\\u54CD\\u5DF2\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u5177\\u6709 \",(0,n.jsx)(e.code,{children:\"position\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u7684\\u5143\\u7D20\\uFF09\\u53CA\\u5176\\u540E\\u4EE3\\u6216 flex \\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u6309\\u7167\\u5B83\\u4EEC\\u5728 DOM \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u5806\\u53E0\\uFF08\\u5728\\u540C\\u4E00\\u5C42\\u7EA7\\u4E2D\\uFF0C\\u6700\\u4E0B\\u9762\\u7684\\u5143\\u7D20\\u51FA\\u73B0\\u5728\\u6700\\u4E0A\\u9762\\uFF09\\u3002\\u5177\\u6709\\u975E\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u53CA\\u5176\\u5B50\\u5143\\u7D20\\uFF09\\u5C06\\u59CB\\u7EC8\\u51FA\\u73B0\\u5728\\u5177\\u6709\\u9ED8\\u8BA4\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u4E4B\\u4E0A\\uFF0C\\u800C\\u4E0D\\u7BA1 HTML \\u5C42\\u6B21\\u7ED3\\u6784\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u662F\\u5305\\u542B\\u4E00\\u7EC4\\u5C42\\u7684\\u5143\\u7D20\\u3002\\u5728\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u662F\\u76F8\\u5BF9\\u4E8E\\u8BE5\\u5143\\u7D20\\u8BBE\\u7F6E\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u76F8\\u5BF9\\u4E8E\\u6587\\u6863\\u6839\\u5143\\u7D20\\u3002\\u8BE5\\u4E0A\\u4E0B\\u6587\\u4E4B\\u5916\\u7684\\u5C42\\u2014\\u2014\\u5373\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u540C\\u7EA7\\u5143\\u7D20\\u2014\\u2014\\u4E0D\\u80FD\\u4F4D\\u4E8E\\u5176\\u5185\\u7684\\u5C42\\u4E4B\\u95F4\\u3002\\u5982\\u679C\\u5143\\u7D20 B \\u4F4D\\u4E8E\\u5143\\u7D20 A \\u7684\\u9876\\u90E8\\uFF0C\\u800C\\u5143\\u7D20 A \\u7684\\u5B50\\u5143\\u7D20 C \\u6C38\\u8FDC\\u4E0D\\u80FD\\u9AD8\\u4E8E\\u5143\\u7D20 B\\uFF0C\\u5373\\u4F7F\\u5143\\u7D20 C \\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u6BD4\\u5143\\u7D20 B \\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6BCF\\u4E2A\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u90FD\\u662F\\u81EA\\u5305\\u542B\\u7684 - \\u5728\\u5143\\u7D20\\u7684content\\u5806\\u53E0\\u540E\\uFF0C\\u6574\\u4E2A\\u5143\\u7D20\\u88AB\\u8BA4\\u4E3A\\u5728\\u7236\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u5806\\u53E0\\u987A\\u5E8F\\u4E2D\\u3002\\u5C11\\u6570 CSS \\u5C5E\\u6027\\u4F1A\\u89E6\\u53D1\\u65B0\\u7684\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" \\u5C0F\\u4E8E 1\\u3001\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u4EE5\\u53CA\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"transform\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.em,{children:(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"})}),\"\\uFF1A\\u786E\\u5207\\u5730\\u8BF4\\uFF0C\\u4EC0\\u4E48\\u5143\\u7D20\\u6709\\u8D44\\u683C\\u521B\\u5EFA\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5217\\u5728\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context\",children:\"\\u89C4\\u5219\"}),\"\\u7684\\u8FD9\\u4E00\\u957F\\u4E32\\u4E2D\\u3002\"]})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(s,{...c})}):s(c)}return C(j);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),F=(o,n)=>{for(var i in n)r(o,i,{get:n[i],enumerable:!0})},c=(o,n,i,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!m.call(o,t)&&t!==i&&r(o,t,{get:()=>n[t],enumerable:!(s=f(n,t))||s.enumerable});return o};var w=(o,n,i)=>(i=o!=null?u(g(o)):{},c(n||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),x=o=>c(r({},\"__esModule\",{value:!0}),o);var h=v((H,a)=>{a.exports=_jsx_runtime});var y={};F(y,{default:()=>d,frontmatter:()=>T});var e=w(h()),T={title:\"Explain the concept of hoisting with regards to functions\"};function l(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is hoisting?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This allows functions to be called before they are defined in the code.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Function declarations\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function declarations are fully hoisted. This means you can call a function before its declaration in the code.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`hoistedFunction(); // Works fine\n\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Function expressions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function\n\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Arrow functions behave similarly to function expressions in terms of hoisting.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function\n\nvar arrowFunction = () => {\n  console.log('This arrow function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/hoisting\",children:\"JavaScript.info on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(l,{...o})}):l(o)}return x(y);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var F=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var i in n)r(o,i,{get:n[i],enumerable:!0})},c=(o,n,i,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of p(n))!m.call(o,t)&&t!==i&&r(o,t,{get:()=>n[t],enumerable:!(s=f(n,t))||s.enumerable});return o};var w=(o,n,i)=>(i=o!=null?u(g(o)):{},c(n||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),x=o=>c(r({},\"__esModule\",{value:!0}),o);var h=F((D,a)=>{a.exports=_jsx_runtime});var y={};v(y,{default:()=>d,frontmatter:()=>T});var e=w(h()),T={title:\"Explain the concept of hoisting with regards to functions\"};function l(o){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"What is hoisting?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This allows functions to be called before they are defined in the code.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Function declarations\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function declarations are fully hoisted. This means you can call a function before its declaration in the code.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`hoistedFunction(); // Works fine\n\nfunction hoistedFunction() {\n  console.log('This function is hoisted');\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Function expressions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function\n\nvar nonHoistedFunction = function () {\n  console.log('This function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Arrow functions\"}),`\n`,(0,e.jsx)(n.p,{children:\"Arrow functions behave similarly to function expressions in terms of hoisting.\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function\n\nvar arrowFunction = () => {\n  console.log('This arrow function is not hoisted');\n};\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Hoisting\",children:\"MDN Web Docs on Hoisting\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"MDN Web Docs on Function Declarations\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"MDN Web Docs on Function Expressions\"})}),`\n`]})]})}function d(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,{...o,children:(0,e.jsx)(l,{...o})}):l(o)}return x(y);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/en-US.json

@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),y=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},c=(r,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of p(n))!g.call(r,a)&&a!==i&&t(r,a,{get:()=>n[a],enumerable:!(o=f(n,a))||o.enumerable});return r};var w=(r,n,i)=>(i=r!=null?u(m(r)):{},c(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>c(t({},\"__esModule\",{value:!0}),r);var s=x((v,l)=>{l.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>C});var e=w(s()),C={title:\"How do currying and partial application differ from each other?\"};function d(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. For example, a function \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\". Partial application, on the other hand, fixes a few arguments of a function and produces another function with a smaller number of arguments. For example, if you partially apply \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" with \",(0,e.jsx)(n.code,{children:\"a\"}),\", you get a new function \",(0,e.jsx)(n.code,{children:\"f'(b, c)\"}),\".\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying vs partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst result = add(1)(2)(3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"add\"}),\" is a curried function that takes three arguments one at a time.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b, c) {\n  return a + b + c;\n}\n\nconst addOne = add.bind(null, 1);\nconst result = addOne(2, 3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"addOne\"}),\" is a partially applied function that fixes the first argument of \",(0,e.jsx)(n.code,{children:\"add\"}),\" to \",(0,e.jsx)(n.code,{children:\"1\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Key differences\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Currying\"}),\": Transforms a function with multiple arguments into a sequence of functions, each taking a single argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": Fixes a few arguments of a function and produces another function with a smaller number of arguments.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"Currying on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"Partial application on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript.info on currying and partial application\"})}),`\n`]})]})}function h(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(d,{...r})}):d(r)}return b(j);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports),w=(r,n)=>{for(var i in n)t(r,i,{get:n[i],enumerable:!0})},o=(r,n,i,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let a of p(n))!g.call(r,a)&&a!==i&&t(r,a,{get:()=>n[a],enumerable:!(c=f(n,a))||c.enumerable});return r};var y=(r,n,i)=>(i=r!=null?h(m(r)):{},o(n||!r||!r.__esModule?t(i,\"default\",{value:r,enumerable:!0}):i,r)),b=r=>o(t({},\"__esModule\",{value:!0}),r);var s=x((F,l)=>{l.exports=_jsx_runtime});var C={};w(C,{default:()=>d,frontmatter:()=>j});var e=y(s()),j={title:\"How do currying and partial application differ from each other?\"};function u(r){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...r.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. For example, a function \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"f(a)(b)(c)\"}),\". Partial application, on the other hand, fixes a few arguments of a function and produces another function with a smaller number of arguments. For example, if you partially apply \",(0,e.jsx)(n.code,{children:\"f(a, b, c)\"}),\" with \",(0,e.jsx)(n.code,{children:\"a\"}),\", you get a new function \",(0,e.jsx)(n.code,{children:\"f'(b, c)\"}),\".\"]}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying vs partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a) {\n  return function (b) {\n    return function (c) {\n      return a + b + c;\n    };\n  };\n}\n\nconst result = add(1)(2)(3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"add\"}),\" is a curried function that takes three arguments one at a time.\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`function add(a, b, c) {\n  return a + b + c;\n}\n\nconst addOne = add.bind(null, 1);\nconst result = addOne(2, 3);\nconsole.log(result); // 6\n`})}),`\n`,(0,e.jsxs)(n.p,{children:[\"In this example, \",(0,e.jsx)(n.code,{children:\"addOne\"}),\" is a partially applied function that fixes the first argument of \",(0,e.jsx)(n.code,{children:\"add\"}),\" to \",(0,e.jsx)(n.code,{children:\"1\"}),\".\"]}),`\n`,(0,e.jsx)(n.h3,{children:\"Key differences\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Currying\"}),\": Transforms a function with multiple arguments into a sequence of functions, each taking a single argument.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Partial application\"}),\": Fixes a few arguments of a function and produces another function with a smaller number of arguments.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"JavaScript.info on currying and partial application\"})}),`\n`]})]})}function d(r={}){let{wrapper:n}=r.components||{};return n?(0,e.jsx)(n,{...r,children:(0,e.jsx)(u,{...r})}):u(r)}return b(C);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.json

@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),x=(a,n)=>{for(var i in n)t(a,i,{get:n[i],enumerable:!0})},l=(a,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of f(n))!g.call(a,r)&&r!==i&&t(a,r,{get:()=>n[r],enumerable:!(o=p(n,r))||o.enumerable});return a};var b=(a,n,i)=>(i=a!=null?h(m(a)):{},l(n||!a||!a.__esModule?t(i,\"default\",{value:a,enumerable:!0}):i,a)),y=a=>l(t({},\"__esModule\",{value:!0}),a);var d=w((v,c)=>{c.exports=_jsx_runtime});var C={};x(C,{default:()=>u,frontmatter:()=>T});var e=b(d()),T={title:\"Provide some examples of how currying and partial application can be used\"};function s(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\" would look like \",(0,e.jsx)(n.code,{children:\"add(a)(b)\"}),\", while partial application of \",(0,e.jsx)(n.code,{children:\"add(2, b)\"}),\" would fix the first argument to 2, resulting in a function that only needs the second argument.\"]}),`\n`,(0,e.jsx)(n.p,{children:\"Currying example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a) => (b) => a + b;\nconst addTwo = add(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a, b) => a + b;\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying and partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider a simple function that adds two numbers:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To curry this function, we transform it into a series of functions,\n// each taking one argument:\nconst curriedAdd = (a) => (b) => a + b;\n\n// Now, you can use the curried function like this:\nconst addTwo = curriedAdd(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider the same add function:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To partially apply this function\n// you can use the \\`bind\\` method to fix the first argument:\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n\n// Alternatively, you can create a custom partial application function:\nfunction partial(fn, ...fixedArgs) {\n  return function (...remainingArgs) {\n    return fn(...fixedArgs, ...remainingArgs);\n  };\n}\n\nconst addTwoCustom = partial(add, 2);\nconsole.log(addTwoCustom(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Currying\",children:\"Currying on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/Partial_application\",children:\"Partial application on MDN\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/1st_edition/chapter6.html\",children:\"Functional programming in JavaScript\"})}),`\n`]})]})}function u(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(s,{...a})}):s(a)}return y(C);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),x=(a,n)=>{for(var i in n)t(a,i,{get:n[i],enumerable:!0})},c=(a,n,i,o)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of f(n))!g.call(a,r)&&r!==i&&t(a,r,{get:()=>n[r],enumerable:!(o=p(n,r))||o.enumerable});return a};var b=(a,n,i)=>(i=a!=null?h(m(a)):{},c(n||!a||!a.__esModule?t(i,\"default\",{value:a,enumerable:!0}):i,a)),y=a=>c(t({},\"__esModule\",{value:!0}),a);var d=w((v,l)=>{l.exports=_jsx_runtime});var C={};x(C,{default:()=>u,frontmatter:()=>T});var e=b(d()),T={title:\"Provide some examples of how currying and partial application can be used\"};function s(a){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsxs)(n.p,{children:[\"Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function \",(0,e.jsx)(n.code,{children:\"add(a, b)\"}),\" would look like \",(0,e.jsx)(n.code,{children:\"add(a)(b)\"}),\", while partial application of \",(0,e.jsx)(n.code,{children:\"add(2, b)\"}),\" would fix the first argument to 2, resulting in a function that only needs the second argument.\"]}),`\n`,(0,e.jsx)(n.p,{children:\"Currying example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a) => (b) => a + b;\nconst addTwo = add(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application example:\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`const add = (a, b) => a + b;\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Currying and partial application\"}),`\n`,(0,e.jsx)(n.h3,{children:\"Currying\"}),`\n`,(0,e.jsx)(n.p,{children:\"Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible function composition and reuse.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider a simple function that adds two numbers:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To curry this function, we transform it into a series of functions,\n// each taking one argument:\nconst curriedAdd = (a) => (b) => a + b;\n\n// Now, you can use the curried function like this:\nconst addTwo = curriedAdd(2);\nconsole.log(addTwo(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Partial application\"}),`\n`,(0,e.jsx)(n.p,{children:\"Partial application is a technique where you fix a few arguments of a function, producing another function with a smaller number of arguments. This is useful for creating specialized functions from more general ones.\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Example\"}),`\n`,(0,e.jsx)(n.pre,{live:!0,children:(0,e.jsx)(n.code,{className:\"language-js\",children:`// Consider the same add function:\nfunction add(a, b) {\n  return a + b;\n}\n\n// To partially apply this function\n// you can use the \\`bind\\` method to fix the first argument:\nconst addTwo = add.bind(null, 2);\nconsole.log(addTwo(3)); // 5\n\n// Alternatively, you can create a custom partial application function:\nfunction partial(fn, ...fixedArgs) {\n  return function (...remainingArgs) {\n    return fn(...fixedArgs, ...remainingArgs);\n  };\n}\n\nconst addTwoCustom = partial(add, 2);\nconsole.log(addTwoCustom(3)); // 5\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://javascript.info/currying-partials\",children:\"Javascript.info: Currying\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://eloquentjavascript.net/1st_edition/chapter6.html\",children:\"Functional programming in JavaScript\"})}),`\n`]})]})}function u(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(s,{...a})}):s(a)}return y(C);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.json

@@ -28,5 +28,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},i=(t,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var k=(t,e,s)=>(s=t!=null?u(g(t)):{},i(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),y=t=>i(r({},\"__esModule\",{value:!0}),t);var h=b((S,c)=>{c.exports=_jsx_runtime});var D={};w(D,{default:()=>l,frontmatter:()=>x});var n=k(h()),x={title:\"What are mocks and stubs and how are they used in testing?\"};function d(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks and stubs are tools used in testing to simulate the behavior of real objects. Stubs provide predefined responses to function calls, while mocks are more complex and can verify interactions, such as whether a function was called and with what arguments. Stubs are used to isolate the code being tested from external dependencies, and mocks are used to ensure that the code interacts correctly with those dependencies.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are mocks and stubs and how are they used in testing?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Stubs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Stubs are simple objects that provide predefined responses to function calls made during tests. They are used to isolate the code being tested from external dependencies, such as databases or APIs, by providing controlled responses.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple stub for a function that fetches user data\nconst fetchUserDataStub = sinon.stub();\nfetchUserDataStub.returns({ id: 1, name: 'John Doe' });\n\n// Using the stub in a test\nconst userData = fetchUserDataStub();\nconsole.log(userData); // { id: 1, name: 'John Doe' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks are more complex than stubs. They not only provide predefined responses but also record information about how they were called. This allows you to verify interactions, such as whether a function was called, how many times it was called, and with what arguments.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple mock for a function that logs user data\nconst logUserDataMock = sinon.mock();\nlogUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });\n\n// Using the mock in a test\nlogUserDataMock.log({ id: 1, name: 'John Doe' });\nlogUserDataMock.verify(); // Verifies that the log method was called once with the specified arguments\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"When to use stubs and mocks\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stubs\"}),\": Use stubs when you need to isolate the code being tested from external dependencies and control the responses those dependencies provide.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocks\"}),\": Use mocks when you need to verify that the code interacts correctly with external dependencies, such as ensuring that a function is called with the correct arguments.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sinonjs.org/releases/latest/\",children:\"Sinon.js documentation\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://martinfowler.com/articles/mocksArentStubs.html\",children:\"Mocks Aren't Stubs\"}),\" by Martin Fowler\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/testing-javascript-mocks-stubs/\",children:\"Testing JavaScript with Mocks and Stubs\"}),\" on SitePoint\"]}),`\n`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return y(D);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},i=(t,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!f.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var k=(t,e,s)=>(s=t!=null?u(g(t)):{},i(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),y=t=>i(r({},\"__esModule\",{value:!0}),t);var h=b((M,c)=>{c.exports=_jsx_runtime});var D={};w(D,{default:()=>d,frontmatter:()=>x});var n=k(h()),x={title:\"What are mocks and stubs and how are they used in testing?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks and stubs are tools used in testing to simulate the behavior of real objects. Stubs provide predefined responses to function calls, while mocks are more complex and can verify interactions, such as whether a function was called and with what arguments. Stubs are used to isolate the code being tested from external dependencies, and mocks are used to ensure that the code interacts correctly with those dependencies.\"}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"What are mocks and stubs and how are they used in testing?\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Stubs\"}),`\n`,(0,n.jsx)(e.p,{children:\"Stubs are simple objects that provide predefined responses to function calls made during tests. They are used to isolate the code being tested from external dependencies, such as databases or APIs, by providing controlled responses.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple stub for a function that fetches user data\nconst fetchUserDataStub = sinon.stub();\nfetchUserDataStub.returns({ id: 1, name: 'John Doe' });\n\n// Using the stub in a test\nconst userData = fetchUserDataStub();\nconsole.log(userData); // { id: 1, name: 'John Doe' }\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Mocks\"}),`\n`,(0,n.jsx)(e.p,{children:\"Mocks are more complex than stubs. They not only provide predefined responses but also record information about how they were called. This allows you to verify interactions, such as whether a function was called, how many times it was called, and with what arguments.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"Example\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// A simple mock for a function that logs user data\nconst logUserDataMock = sinon.mock();\nlogUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });\n\n// Using the mock in a test\nlogUserDataMock.log({ id: 1, name: 'John Doe' });\nlogUserDataMock.verify(); // Verifies that the log method was called once with the specified arguments\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"When to use stubs and mocks\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Stubs\"}),\": Use stubs when you need to isolate the code being tested from external dependencies and control the responses those dependencies provide.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Mocks\"}),\": Use mocks when you need to verify that the code interacts correctly with external dependencies, such as ensuring that a function is called with the correct arguments.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://sinonjs.org/releases/latest/\",children:\"Sinon.js documentation\"})}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://martinfowler.com/articles/mocksArentStubs.html\",children:\"Mocks Aren't Stubs\"}),\" by Martin Fowler\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://www.sitepoint.com/sinon-tutorial-javascript-testing-mocks-spies-stubs/\",children:\"Sinon Tutorial: JavaScript Testing with Mocks, Spies & Stubs\"}),\" on SitePoint\"]}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return y(D);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!w.call(t,o)&&o!==n&&s(t,o,{get:()=>e[o],enumerable:!(a=f(e,o))||a.enumerable});return t};var x=(t,e,n)=>(n=t!=null?d(p(t)):{},i(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>i(s({},\"__esModule\",{value:!0}),t);var c=u((M,h)=>{h.exports=_jsx_runtime});var v={};y(v,{default:()=>m,frontmatter:()=>k});var r=x(c()),k={title:'What are some of the \"gotchas\" for writing efficient CSS?'};function l(t){let e={a:\"a\",p:\"p\",...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:\"Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Be aware of which CSS properties \",(0,r.jsx)(e.a,{href:\"https://csstriggers.com/\",children:\"trigger\"}),\" reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.\"]})]})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}return b(v);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of g(e))!w.call(t,o)&&o!==n&&s(t,o,{get:()=>e[o],enumerable:!(a=f(e,o))||a.enumerable});return t};var x=(t,e,n)=>(n=t!=null?d(p(t)):{},i(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>i(s({},\"__esModule\",{value:!0}),t);var c=u((M,h)=>{h.exports=_jsx_runtime});var v={};y(v,{default:()=>m,frontmatter:()=>k});var r=x(c()),k={title:'What are some of the \"gotchas\" for writing efficient CSS?'};function l(t){let e={a:\"a\",p:\"p\",...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:\"Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.\"}),`\n`,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:\"https://en.bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Be aware of which CSS properties \",(0,r.jsx)(e.a,{href:\"https://csstriggers.com/\",children:\"trigger\"}),\" reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.\"]})]})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}return b(v);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var _=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),M=(n,t)=>{for(var r in t)c(n,r,{get:t[r],enumerable:!0})},i=(n,t,r,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!u.call(n,o)&&o!==r&&c(n,o,{get:()=>t[o],enumerable:!(s=p(t,o))||s.enumerable});return n};var j=(n,t,r)=>(r=n!=null?d(x(n)):{},i(t||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>i(c({},\"__esModule\",{value:!0}),n);var m=_((B,a)=>{a.exports=_jsx_runtime});var S={};M(S,{default:()=>l,frontmatter:()=>C});var e=j(m()),C={title:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS \\u65F6\\u9700\\u8981\\u6CE8\\u610F\\u54EA\\u4E9B\\u201C\\u9677\\u9631\\u201D\\uFF1F\"};function h(n){let t={a:\"a\",p:\"p\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.p,{children:\"\\u9996\\u5148\\uFF0C\\u4E86\\u89E3\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002 \\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002 \\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002 \\u56E0\\u6B64\\uFF0C\\u907F\\u514D\\u4F7F\\u7528\\u6807\\u7B7E\\u548C\\u901A\\u7528\\u9009\\u62E9\\u5668\\u4F5C\\u4E3A\\u5173\\u952E\\u9009\\u62E9\\u5668\\u3002 \\u5B83\\u4EEC\\u5339\\u914D\\u5927\\u91CF\\u5143\\u7D20\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u4E0D\\u5F97\\u4E0D\\u505A\\u66F4\\u591A\\u7684\\u5DE5\\u4F5C\\u6765\\u786E\\u5B9A\\u7236\\u5143\\u7D20\\u662F\\u5426\\u5339\\u914D\\u3002\"}),`\n`,(0,e.jsxs)(t.p,{children:[(0,e.jsx)(t.a,{href:\"https://bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" \\u65B9\\u6CD5\\u5EFA\\u8BAE\\u6240\\u6709\\u5185\\u5BB9\\u90FD\\u4F7F\\u7528\\u5355\\u4E2A\\u7C7B\\uFF0C\\u5E76\\u4E14\\u5728\\u9700\\u8981\\u5C42\\u6B21\\u7ED3\\u6784\\u65F6\\uFF0C\\u5C06\\u5176\\u4E5F\\u878D\\u5165\\u5230\\u7C7B\\u7684\\u540D\\u79F0\\u4E2D\\uFF0C\\u8FD9\\u81EA\\u7136\\u4F7F\\u9009\\u62E9\\u5668\\u9AD8\\u6548\\u4E14\\u6613\\u4E8E\\u8986\\u76D6\\u3002\"]}),`\n`,(0,e.jsxs)(t.p,{children:[\"\\u6CE8\\u610F\\u54EA\\u4E9B CSS \\u5C5E\\u6027\\u4F1A\",(0,e.jsx)(t.a,{href:\"https://csstriggers.com/\",children:\"\\u89E6\\u53D1\"}),\"\\u56DE\\u6D41\\u3001\\u91CD\\u7ED8\\u548C\\u5408\\u6210\\u3002 \\u5C3D\\u53EF\\u80FD\\u907F\\u514D\\u7F16\\u5199\\u66F4\\u6539\\u5E03\\u5C40\\uFF08\\u89E6\\u53D1\\u56DE\\u6D41\\uFF09\\u7684\\u6837\\u5F0F\\u3002\"]})]})}function l(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(h,{...n})}):h(n)}return g(S);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var _=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),M=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},i=(t,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!u.call(t,o)&&o!==r&&c(t,o,{get:()=>n[o],enumerable:!(s=p(n,o))||s.enumerable});return t};var j=(t,n,r)=>(r=t!=null?d(x(t)):{},i(n||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),g=t=>i(c({},\"__esModule\",{value:!0}),t);var m=_((B,a)=>{a.exports=_jsx_runtime});var S={};M(S,{default:()=>l,frontmatter:()=>C});var e=j(m()),C={title:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS \\u65F6\\u9700\\u8981\\u6CE8\\u610F\\u54EA\\u4E9B\\u201C\\u9677\\u9631\\u201D\\uFF1F\"};function h(t){let n={a:\"a\",p:\"p\",...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\"\\u9996\\u5148\\uFF0C\\u4E86\\u89E3\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002 \\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002 \\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002 \\u56E0\\u6B64\\uFF0C\\u907F\\u514D\\u4F7F\\u7528\\u6807\\u7B7E\\u548C\\u901A\\u7528\\u9009\\u62E9\\u5668\\u4F5C\\u4E3A\\u5173\\u952E\\u9009\\u62E9\\u5668\\u3002 \\u5B83\\u4EEC\\u5339\\u914D\\u5927\\u91CF\\u5143\\u7D20\\uFF0C\\u6D4F\\u89C8\\u5668\\u5C06\\u4E0D\\u5F97\\u4E0D\\u505A\\u66F4\\u591A\\u7684\\u5DE5\\u4F5C\\u6765\\u786E\\u5B9A\\u7236\\u5143\\u7D20\\u662F\\u5426\\u5339\\u914D\\u3002\"}),`\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:\"https://en.bem.info/\",children:\"BEM (Block Element Modifier)\"}),\" \\u65B9\\u6CD5\\u5EFA\\u8BAE\\u6240\\u6709\\u5185\\u5BB9\\u90FD\\u4F7F\\u7528\\u5355\\u4E2A\\u7C7B\\uFF0C\\u5E76\\u4E14\\u5728\\u9700\\u8981\\u5C42\\u7EA7\\u7ED3\\u6784\\u65F6\\uFF0C\\u5C06\\u5176\\u4E5F\\u878D\\u5165\\u5230\\u7C7B\\u7684\\u540D\\u79F0\\u4E2D\\uFF0C\\u8FD9\\u81EA\\u7136\\u4F7F\\u9009\\u62E9\\u5668\\u9AD8\\u6548\\u4E14\\u6613\\u4E8E\\u8986\\u76D6\\u3002\"]}),`\n`,(0,e.jsxs)(n.p,{children:[\"\\u6CE8\\u610F\\u54EA\\u4E9B CSS \\u5C5E\\u6027\\u4F1A\",(0,e.jsx)(n.a,{href:\"https://csstriggers.com/\",children:\"\\u89E6\\u53D1\"}),\"\\u56DE\\u6D41\\u3001\\u91CD\\u7ED8\\u548C\\u5408\\u6210\\u3002 \\u5C3D\\u53EF\\u80FD\\u907F\\u514D\\u7F16\\u5199\\u66F4\\u6539\\u5E03\\u5C40\\uFF08\\u89E6\\u53D1\\u56DE\\u6D41\\uFF09\\u7684\\u6837\\u5F0F\\u3002\"]})]})}function l(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,{...t,children:(0,e.jsx)(h,{...t})}):h(t)}return g(S);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.json

@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},l=(n,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!S.call(n,s)&&s!==i&&a(n,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return n};var w=(n,e,i)=>(i=n!=null?u(f(n)):{},l(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),y=n=>l(a({},\"__esModule\",{value:!0}),n);var c=g((j,o)=>{o.exports=_jsx_runtime});var x={};b(x,{default:()=>h,frontmatter:()=>C});var t=w(c()),C={title:\"What are the advantages/disadvantages of using CSS preprocessors?\"};function d(n){let e={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"CSS is made more maintainable.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Easier to write nested selectors.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Variables for consistent theming. Can share theme files across different projects. This is not necessarily useful with CSS custom properties (frequently called CSS variables).\"}),`\n`,(0,t.jsx)(e.li,{children:\"Mixins to generate repeated CSS.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Sass and Less have features like loops, lists, and maps can make configuration easier and less verbose.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Splitting your code into multiple files during development. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Disadvantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Requires tools for preprocessing. Re-compilation time can be slow.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Not writing currently and potentially usable CSS. For example, by using something like \",(0,t.jsx)(e.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" with \",(0,t.jsx)(e.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\", you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.\"]}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return y(x);})();\n;return Component;"
+  "solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},l=(n,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!S.call(n,s)&&s!==i&&a(n,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return n};var w=(n,e,i)=>(i=n!=null?u(f(n)):{},l(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),y=n=>l(a({},\"__esModule\",{value:!0}),n);var c=g((j,o)=>{o.exports=_jsx_runtime});var x={};b(x,{default:()=>h,frontmatter:()=>C});var t=w(c()),C={title:\"What are the advantages/disadvantages of using CSS preprocessors?\"};function d(n){let e={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"CSS is made more maintainable.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Easier to write nested selectors.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Variables for consistent theming. Can share theme files across different projects. This is not necessarily useful with CSS custom properties (frequently called CSS variables).\"}),`\n`,(0,t.jsx)(e.li,{children:\"Mixins to generate repeated CSS.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Sass and Less have features like loops, lists, and maps can make configuration easier and less verbose.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Splitting your code into multiple files during development. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Disadvantages\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Requires tools for preprocessing. Re-compilation time can be slow.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Not writing currently and potentially usable CSS. For example, by using something like \",(0,t.jsx)(e.a,{href:\"https://github.com/webpack-contrib/postcss-loader\",children:\"postcss-loader\"}),\" with \",(0,t.jsx)(e.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\", you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.\"]}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return y(x);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.json

@@ -29,5 +29,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx"
   },
-  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),f=(e,n)=>{for(var r in n)l(e,r,{get:n[r],enumerable:!0})},c=(e,n,r,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of C(n))!p.call(e,i)&&i!==r&&l(e,i,{get:()=>n[i],enumerable:!(s=u(n,i))||s.enumerable});return e};var _=(e,n,r)=>(r=e!=null?d(m(e)):{},c(n||!e||!e.__esModule?l(r,\"default\",{value:e,enumerable:!0}):r,e)),j=e=>c(l({},\"__esModule\",{value:!0}),e);var o=x((w,h)=>{h.exports=_jsx_runtime});var M={};f(M,{default:()=>a,frontmatter:()=>g});var t=_(o()),g={title:\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"};function S(e){let n={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"CSS \\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u5D4C\\u5957\\u9009\\u62E9\\u5668\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u7528\\u4E8E\\u4E00\\u81F4\\u4E3B\\u9898\\u7684\\u53D8\\u91CF\\u3002\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u4E4B\\u95F4\\u5171\\u4EAB\\u4E3B\\u9898\\u6587\\u4EF6\\u3002\\u8FD9\\u4E0D\\u4E00\\u5B9A\\u5BF9 CSS \\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF08\\u901A\\u5E38\\u79F0\\u4E3A CSS \\u53D8\\u91CF\\uFF09\\u6709\\u7528\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Mixins \\u7528\\u4E8E\\u751F\\u6210\\u91CD\\u590D\\u7684 CSS\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Sass \\u548C Less \\u5177\\u6709\\u5FAA\\u73AF\\u3001\\u5217\\u8868\\u548C\\u6620\\u5C04\\u7B49\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u914D\\u7F6E\\u66F4\\u5BB9\\u6613\\u4E14\\u66F4\\u7B80\\u6D01\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u6587\\u4EF6\\u3002CSS \\u6587\\u4EF6\\u4E5F\\u53EF\\u4EE5\\u62C6\\u5206\\uFF0C\\u4F46\\u8FD9\\u6837\\u505A\\u9700\\u8981 HTTP \\u8BF7\\u6C42\\u6765\\u4E0B\\u8F7D\\u6BCF\\u4E2A CSS \\u6587\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u9700\\u8981\\u7528\\u4E8E\\u9884\\u5904\\u7406\\u7684\\u5DE5\\u5177\\u3002\\u91CD\\u65B0\\u7F16\\u8BD1\\u65F6\\u95F4\\u53EF\\u80FD\\u5F88\\u6162\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u6CA1\\u6709\\u7F16\\u5199\\u5F53\\u524D\\u548C\\u6F5C\\u5728\\u53EF\\u7528\\u7684 CSS\\u3002\\u4F8B\\u5982\\uFF0C\\u901A\\u8FC7\\u5C06 \",(0,t.jsx)(n.a,{href:\"https://github.com/postcss/postcss-loader\",children:\"postcss-loader\"}),\" \\u4E0E \",(0,t.jsx)(n.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7F16\\u5199\\u6F5C\\u5728\\u7684\\u672A\\u6765\\u517C\\u5BB9\\u7684 CSS\\uFF0C\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u800C\\u4E0D\\u662F Sass \\u53D8\\u91CF\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u6B63\\u5728\\u5B66\\u4E60\\u65B0\\u7684\\u8BED\\u6CD5\\uFF0C\\u5982\\u679C/\\u5F53\\u5B83\\u4EEC\\u6807\\u51C6\\u5316\\u65F6\\uFF0C\\u53EF\\u80FD\\u4F1A\\u6709\\u6240\\u56DE\\u62A5\\u3002\"]}),`\n`]})]})}function a(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(S,{...e})}):S(e)}return j(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),f=(e,n)=>{for(var r in n)l(e,r,{get:n[r],enumerable:!0})},s=(e,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let i of C(n))!p.call(e,i)&&i!==r&&l(e,i,{get:()=>n[i],enumerable:!(c=u(n,i))||c.enumerable});return e};var _=(e,n,r)=>(r=e!=null?d(m(e)):{},s(n||!e||!e.__esModule?l(r,\"default\",{value:e,enumerable:!0}):r,e)),j=e=>s(l({},\"__esModule\",{value:!0}),e);var o=x((M,h)=>{h.exports=_jsx_runtime});var g={};f(g,{default:()=>a,frontmatter:()=>b});var t=_(o()),b={title:\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"};function S(e){let n={a:\"a\",h2:\"h2\",li:\"li\",ul:\"ul\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"CSS \\u66F4\\u6613\\u4E8E\\u7EF4\\u62A4\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u66F4\\u5BB9\\u6613\\u7F16\\u5199\\u5D4C\\u5957\\u9009\\u62E9\\u5668\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u7528\\u4E8E\\u4E00\\u81F4\\u4E3B\\u9898\\u7684\\u53D8\\u91CF\\u3002\\u53EF\\u4EE5\\u5728\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u4E4B\\u95F4\\u5171\\u4EAB\\u4E3B\\u9898\\u6587\\u4EF6\\u3002\\u8FD9\\u4E0D\\u4E00\\u5B9A\\u5BF9 CSS \\u81EA\\u5B9A\\u4E49\\u5C5E\\u6027\\uFF08\\u901A\\u5E38\\u79F0\\u4E3A CSS \\u53D8\\u91CF\\uFF09\\u6709\\u7528\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Mixins \\u7528\\u4E8E\\u751F\\u6210\\u91CD\\u590D\\u7684 CSS\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"Sass \\u548C Less \\u5177\\u6709\\u5FAA\\u73AF\\u3001\\u5217\\u8868\\u548C\\u6620\\u5C04\\u7B49\\u529F\\u80FD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u914D\\u7F6E\\u66F4\\u5BB9\\u6613\\u4E14\\u66F4\\u7B80\\u6D01\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u5728\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u5C06\\u4EE3\\u7801\\u62C6\\u5206\\u4E3A\\u591A\\u4E2A\\u6587\\u4EF6\\u3002CSS \\u6587\\u4EF6\\u4E5F\\u53EF\\u4EE5\\u62C6\\u5206\\uFF0C\\u4F46\\u8FD9\\u6837\\u505A\\u9700\\u8981 HTTP \\u8BF7\\u6C42\\u6765\\u4E0B\\u8F7D\\u6BCF\\u4E2A CSS \\u6587\\u4EF6\\u3002\"}),`\n`]}),`\n`,(0,t.jsx)(n.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u9700\\u8981\\u9884\\u5904\\u7406\\u5DE5\\u5177\\u3002\\u91CD\\u65B0\\u7F16\\u8BD1\\u65F6\\u95F4\\u53EF\\u80FD\\u8F83\\u6162\\u3002\"}),`\n`,(0,t.jsxs)(n.li,{children:[\"\\u6CA1\\u6709\\u7F16\\u5199\\u5F53\\u524D\\u548C\\u6F5C\\u5728\\u53EF\\u7528\\u7684 CSS\\u3002\\u4F8B\\u5982\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528\\u7C7B\\u4F3C \",(0,t.jsx)(n.a,{href:\"https://github.com/webpack-contrib/postcss-loader\",children:\"postcss-loader\"}),\" \\u4E0E \",(0,t.jsx)(n.a,{href:\"https://webpack.js.org/\",children:\"webpack\"}),\"\\uFF0C\\u60A8\\u53EF\\u4EE5\\u7F16\\u5199\\u6F5C\\u5728\\u7684\\u672A\\u6765\\u517C\\u5BB9 CSS\\uFF0C\\u5141\\u8BB8\\u60A8\\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u800C\\u4E0D\\u662F Sass \\u53D8\\u91CF\\u3002\\u56E0\\u6B64\\uFF0C\\u60A8\\u6B63\\u5728\\u5B66\\u4E60\\u65B0\\u7684\\u8BED\\u6CD5\\uFF0C\\u5982\\u679C/\\u5F53\\u5B83\\u4EEC\\u6807\\u51C6\\u5316\\u65F6\\uFF0C\\u53EF\\u80FD\\u4F1A\\u6709\\u6240\\u56DE\\u62A5\\u3002\"]}),`\n`]})]})}function a(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(S,{...e})}):S(e)}return j(g);})();\n;return Component;"
 }

apps/web/src/__generated__/questions/quiz/what-is-progressive-rendering/en-US.json

@@ -27,5 +27,5 @@
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-is-progressive-rendering/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!f.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(s=m(e,i))||s.enumerable});return t};var v=(t,e,r)=>(r=t!=null?p(u(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),y=t=>a(o({},\"__esModule\",{value:!0}),t);var h=w((j,d)=>{d.exports=_jsx_runtime});var M={};b(M,{default:()=>c,frontmatter:()=>x});var n=v(h()),x={title:\"What is progressive rendering?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.\"}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Lazy loading of images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position).\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Prioritizing visible content (or above-the-fold rendering)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,n.jsx)(e.code,{children:\"load\"}),\" event to load in other resources and content.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Async HTML fragments\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found \",(0,n.jsx)(e.a,{href:\"http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"here\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Other modern techniques\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"Progressive hydration\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"Streaming server-side rendering\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"Selective hydration\"})}),`\n`]})]})}function c(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return y(M);})();\n;return Component;"
+  "solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!f.call(t,i)&&i!==r&&o(t,i,{get:()=>e[i],enumerable:!(s=m(e,i))||s.enumerable});return t};var b=(t,e,r)=>(r=t!=null?p(g(t)):{},a(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),w=t=>a(o({},\"__esModule\",{value:!0}),t);var h=v((j,d)=>{d.exports=_jsx_runtime});var M={};y(M,{default:()=>c,frontmatter:()=>x});var n=b(h()),x={title:\"What is progressive rendering?\"};function l(t){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.\"}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Lazy loading of images\"}),`\n`,(0,n.jsx)(e.p,{children:\"Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:'<img loading=\"lazy\">'}),\" is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position).\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Prioritizing visible content (or above-the-fold rendering)\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\"/\",(0,n.jsx)(e.code,{children:\"load\"}),\" event to load in other resources and content.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Async HTML fragments\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found \",(0,n.jsx)(e.a,{href:\"https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/\",children:\"here\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Other modern techniques\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/progressive-hydration/\",children:\"Progressive hydration\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/server-side-rendering/\",children:\"Streaming server-side rendering\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.patterns.dev/posts/react-selective-hydration/\",children:\"Selective hydration\"})}),`\n`]})]})}function c(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return w(M);})();\n;return Component;"
 }

submodules/front-end-interview-handbook

@@ -1 +1 @@
-Subproject commit 3dd43732636fcfb331133e8bed10f094f76d5b25
+Subproject commit 40338166e4b6a172c5aeecc1f5dda0ab5a1db96c

submodules/top-javascript-interview-questions

@@ -1 +1 @@
-Subproject commit 40e51eca288c29cbff54bc62c27b0ef790d9eef7
+Subproject commit b8e16564f3ff07da8480c33a68b20f1df387484b

submodules/top-reactjs-interview-questions

@@ -1 +1 @@
-Subproject commit f7695f24cf24cc9cde24ebc4860e4b3bfc246670
+Subproject commit 4a931894578e96d2ac4aef0242e8cd6cf195f783