├── index.html ├── .gitignore ├── docs ├── .vuepress │ ├── styles │ │ └── config.scss │ ├── sidebar │ │ ├── ui.json │ │ ├── react.json │ │ ├── react-quiz.json │ │ └── design.json │ └── public │ │ └── question │ │ └── implement-hacker-news │ │ └── hacker-news.png ├── blog │ └── about-us-fe.md ├── question │ ├── flex-1.md │ ├── base64.md │ ├── qrcode-to-login.md │ ├── truncate-text-with-ellipsis-in-one-line.md │ ├── esgenerator.md │ ├── explain-clear-in-css.md │ ├── how-to-turn-html-web-page-into-images.md │ ├── how-to-create-triangles-with-css.md │ ├── equal-iii.md │ ├── design-an-instagram.md │ ├── generator-itarables.md │ ├── how-to-create-a-square-with-css.md │ ├── explain-macrotask-and-microtask`.md │ ├── transform-translatez-0.md │ ├── 300ms.md │ ├── http-message-structure.md │ ├── if-ii.md │ ├── what-is-jwt-json-web-token.md │ ├── how-webpack-works.md │ ├── two-column-layout.md │ ├── use-strict.md │ ├── change-color-of-input-elements.md │ ├── let.md │ ├── push-unshift.md │ ├── function.md │ ├── gradient-text.md │ ├── how-to-login.md │ ├── const.md │ ├── object-freeze.md │ ├── unicode-utf-16.md │ ├── why-front-end.md │ ├── in-coercion.md │ ├── what-is-css-pixel-and-device-pixels.md │ ├── what-is-dns-how-does-it-work.md │ ├── git-merge-git-rebase.md │ ├── meaningless-calculation.md │ ├── prototype2.md │ ├── how-do-you-do-seo-in-your-project.md │ ├── how-responsiveness-work.md │ ├── var.md │ ├── what-is-keep-alive-in-vue-js-useful-for.md │ ├── what-is-decorator-pattern.md │ ├── what-is-factory-pattern.md │ ├── what-is-singleton-pattern.md │ ├── function-name.md │ ├── what-is-open-redirect-problem-how-to-solve-it.md │ ├── js-float-precision.md │ ├── truncate-text-in-multiple-lines-with-ellipsis.md │ ├── css-cross-button.md │ ├── increment-operator.md │ ├── array-prototype-sort.md │ ├── golden-ratio-rectangle.md │ ├── tell-me-about-your-current-role.md │ ├── what-is-observer-pattern.md │ ├── explain-tcp-way-handshake-process.md │ ├── min-max.md │ ├── settimeout-2.md │ ├── what-is-event-delegation.md │ ├── how-would-you-debug-a-web-page-and-find-the-bad-code.md │ ├── implicit-coersion-2.md │ ├── regexp.md │ ├── comma.md │ ├── explain-box-model.md │ ├── function-expression-vs-function-declaration.md │ ├── what-is-closure-and-how-does-it-work.md │ ├── what-is-the-best-gift-you-have-ever-given-or-received.md │ ├── how-to-center-an-element-vertically.md │ ├── what-is-array-like-objects-in-javascript.md │ ├── array-keys.md │ ├── explain-common-http-methods-what-are-they-used-for.md │ ├── hoisting-i.md │ ├── parseint.md │ ├── what-is-cdn-why-do-we-use-it.md │ ├── arguments.md │ ├── hairline.md │ ├── if.md │ ├── what-is-loader-and-plugin-in-webpack.md │ ├── design-facebook-web-app.md │ ├── parseint-2.md │ ├── block-scope-1.md │ ├── explain-common-http-response-status-code.md │ ├── how-do-you-create-retina-hairline-1px-line-in-css.md │ ├── what-is-block-formatting-context.md │ ├── when-do-we-need-to-use-non-strict-mode.md │ ├── function-call.md │ ├── how-to-improve-webpage-of-many-images.md │ ├── instanceof-2.md │ ├── precedence.md │ ├── settimeout-iii.md │ ├── what-are-you-learning-right-now.md │ ├── how-garbage-collection-in-javascript-works.md │ ├── regexp-prototype-test.md │ ├── what-is-the-pros-and-cons-of-node.js.md │ ├── difference-between-no-cache-and-no-store.md │ ├── how-to-build-an-npm-package.md │ ├── how-to-implement-pagination-in-front-end.md │ ├── operator-precedence.md │ ├── what-is-your-strength-and-weakness.md │ ├── offline-support.md │ ├── promise-then-callbacks.md │ ├── create-a-star-widget.md │ ├── logic.md │ ├── cross-origin.md │ ├── explain-event-loop-in-browser-and-in-nodejs.md │ ├── can-you-explain-what-react-fiber-is.md │ ├── explain-the-common-css-relative-length-units.md │ ├── hoisting-iv.md │ ├── please-explain-the-3rd-parameter-of-eventtarget-addeventlistener.md │ ├── hoisting-vi.md │ ├── how-to-create-a-box-with-fixed-aspect-ratio-in-css.md │ ├── what-is-promise-how-to-resolve-a-bunch-of-promises-in-order.md │ ├── which-environment-is-best-to-you-to-work.md │ ├── array-length.md │ ├── design-youtube-com.md │ ├── generator-way.md │ ├── hoisting-iii.md │ ├── reference-type.md │ ├── string-raw.md │ ├── fragment-style.md │ ├── hoisting-ii.md │ ├── how-do-you-target-your-web-app-to-different-screen-sizes.md │ ├── what-is-the-angle-between-the-hours-and-the-minutes-hands-at-15.md │ ├── design-a-carousel-widget.md │ ├── equal-1.md │ ├── promise-executor.md │ ├── explain-the-concept-of-promise-to-a-year-old.md │ ├── what-is-the-difference-between-modules-and-standard-scripts.md │ ├── what-were-the-best-things-you-have-ever-created.md │ ├── how-to-detect-crash-of-a-web-page.md │ ├── vue-vs-react.md │ ├── what-is-proxy-pattern.md │ ├── settimeout-0ms.md │ ├── true-or-false.md │ ├── why-us.md │ ├── center-an-element-vertically.md │ ├── how-coud-you-do-to-improve-performance-in-react.md │ ├── typed-array-length.md │ ├── what-is-micro-frontends.md │ ├── can-you-do-a-retrospective-on-your-current-project.md │ ├── grid-layout-2.md │ ├── what-does-header-connection-keep-alive-do.md │ ├── what-teams-you-want-to-be-working-in.md │ ├── reduce.md │ ├── what-does-a-http-request-look-like.md │ ├── explain-the-lifecycle-of-vue-instance.md │ ├── fluid-font-size.md │ ├── sparse-array.md │ ├── what-is-the-difference-between-reset-css-and-normalize-css.md │ ├── what-is-the-newest-web-technique-that-you-are-interested-in.md │ ├── how-does-https-work.md │ ├── how-does-import-works-in-css-what-is-the-pros-and-cons.md │ ├── principles-for-large-project.md │ ├── window-name.md │ ├── what-is-virtual-dom-how-does-it-work.md │ ├── explain-how-position-sticky-works.md │ ├── proxy-ii.md │ ├── what-are-pseudo-class-and-pseudo-element.md │ ├── what-is-the-difference-between-repaint-and-reflow.md │ ├── difference-between-strict-equal-and-equal.md │ ├── this-iii.md │ ├── what-is-hoc-higher-order-component.md │ ├── cookie-attributes.md │ ├── proxy-i.md │ ├── what-have-you-learned-from-past-professional-working-experiences.md │ ├── create-an-editor.md │ ├── foreach-versus-map.md │ ├── inherit-writable-flag.md │ ├── tell-me-a-time-you-handled-pressure.md │ ├── flex-layout-1.md │ ├── postmessage.md │ ├── what-is-the-pros-and-cons-of-redux.md │ ├── map-vs-object-vs-set-vs-array.md │ ├── what-are-weakset-and-weakmap.md │ ├── what-are-web-workers-and-service-workers.md │ ├── what-is-the-difference-between-for-in-and-object-keys.md │ ├── plus-plus.md │ ├── this-4.md │ ├── what-is-xss-how-to-prevent-it.md │ ├── what-is-the-pros-and-cons-of-react-hooks.md │ ├── implicit-conversion-iii.md │ ├── prototype.md │ ├── implicit-conversion-1.md │ ├── what-is-the-difference-between-express-and-koa.md │ ├── explain-how-different-css-position-property-works.md │ ├── explain-this-keyword-in-javascript.md │ ├── how-do-you-handle-a-challenge.md │ ├── tell-me-a-time-you-disagreed-with-your-supervisor.md │ ├── tell-us-a-time-you-acted-beyond-your-comfort-zone.md │ ├── what-is-process-and-what-is-thread.md │ ├── messsage-channel-is-async.md │ ├── override-setter.md │ ├── tell-me-a-time-you-acted-beyond-your-responsibility.md │ ├── what-are-you-proud-of-the-most.md │ ├── what-is-ssr-what-is-the-pros-and-cons.md │ ├── array-i.md │ ├── implicit-conversion-ii.md │ ├── name-for-function-expression.md │ ├── tell-me-a-goal-you-set-and-you-managed-to-achieve.md │ ├── what-s-the-most-challenging-thing-you-ve-done.md │ ├── design-a-messenger-app.md │ ├── design-an-api-progress-bar.md │ ├── explain-new-keyword-in-javascript.md │ ├── math.md │ ├── message-channel.md │ ├── promise-executor-ii.md │ ├── create-a-sum.md │ ├── doughnut-chart.md │ ├── how-does-hmr-hot-module-replacement-work-in-webpack.md │ ├── this-ii.md │ ├── what-is-the-best-advice-you-have-received.md │ ├── var-vs-let-vs-const.md │ ├── what-is-the-difference-between-block-and-inline.md │ ├── how-do-you-do-unit-test-e2e-test-in-your-web-projects.md │ ├── get-dom-tags.md │ ├── json-stringify.md │ ├── long-polling-vs-sever-sent-event-vs-websocket.md │ ├── what-is-http-cache-how-does-it-work.md │ ├── design-a-poll-widget.md │ ├── modal-with-max-height.md │ ├── try-catch.md │ ├── what-is-csrf-how-to-prevent-it.md │ ├── tell-about-most-important-decision-in-your-life.md │ ├── explain-async-and-await.md │ ├── explain-the-differences-between-amd-commonjs-and-es-modules.md │ ├── what-is-memory-leak.md │ ├── what-is-that-your-team-upset-you-the-most.md │ ├── how-do-you-track-errors-from-your-web-application.md │ ├── promise-prototype-finally.md │ ├── symmetric-cryptosystem-vs-asymmetric-cryptosystem.md │ ├── checkbox-style.md │ ├── design-bfe-dev.md │ ├── what-is-single-sign-on-how-to-implement-it.md │ ├── tell-me-about-a-time-that-you-failed.md │ ├── what-sorting-algorithm-does-array-prototype-sort-use-in-javascript.md │ ├── how-does-instanceof-work-difference-with-typeof.md │ ├── requestanimationframe.md │ ├── cookie-vs-localstorage-vs-sessionstorage.md │ ├── useprevious.md │ ├── what-is-skeleton-screen-how-to-implement-them.md │ ├── what-is-the-difference-between-settimeout-and-setinterval.md │ ├── async-await.md │ ├── design-twitter-web-app.md │ ├── promise-order.md │ ├── sticky-footer.md │ ├── your-decision-proved-to-be-wrong-how-do-you-receive-feedback.md │ ├── zero.md │ ├── grid-layout-1.md │ ├── what-happens-after-entering-a-url-in-browser-address-bar.md │ ├── what-is-the-difference-between-async-and-defer-on-script-tag.md │ ├── tell-us-about-css-keywords-initial-inherit-unset-revert.md │ ├── compress-a-string.md │ ├── what-are-the-time-and-space-complexity-for-main-sorting-algorithms.md │ ├── design-a-perfect-todo-app.md │ ├── method.md │ ├── remove-duplicates-from-an-array.md │ ├── nth-child.md │ ├── tell-me-a-time-you-handled-conflict.md │ ├── null-and-undefined.md │ ├── add-comma-to-number.md │ ├── equality-sameness.md │ ├── hoisting-iiii.md │ ├── inherit-getter-setter.md │ ├── traverse-dom-level-by-level.md │ ├── useeffectonce.md │ ├── fit-the-image.md │ ├── usetimeout.md │ ├── what-is-prototypal-inheritance-how-does-it-work.md │ ├── how-to-find-the-performance-bottleneck-of-a-web-app.md │ ├── promise-order-ii.md │ ├── responsiveness.md │ ├── multi-column-text.md │ ├── implement-string-prototype-trim.md │ ├── promise-all.md │ ├── useisfirstrender.md │ ├── how-to-implement-lazy-load-for-images.md │ ├── mvc-mvvm-flux.md │ ├── holy-grail-layout.md │ ├── tell-me-a-time-you-motivated-yourself-and-your-team-members.md │ ├── hoisting-v.md │ ├── equal-ii.md │ ├── count-function.md │ ├── isprime.md │ ├── usetoggle.md │ ├── designa-an-infinite-scroller.md │ ├── how-does-client-side-routing-work.md │ ├── tell-me-a-goal-you-set-but-couldn-t-manage-to-achieve.md │ ├── useeffect.md │ ├── what-is-difference-between-for-of-and-foreach.md │ ├── the-angle-between-hour-hand-and-minute-hand-of-a-clock.md │ ├── how-do-you-give-and-receive-feedback.md │ ├── promise-then-callbacks-ii.md │ ├── instanceof.md │ └── what-is-the-difference-between-esclass-and-es5-implementation.md ├── system-design │ └── 2-design-todo-app.md └── README.md └── README.md /index.html: -------------------------------------------------------------------------------- 1 |

US-FE

2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .temp 3 | .cache 4 | *.code-workspace 5 | *dist* -------------------------------------------------------------------------------- /docs/.vuepress/styles/config.scss: -------------------------------------------------------------------------------- 1 | .blogger-description { 2 | text-align: left !important; 3 | } 4 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar/ui.json: -------------------------------------------------------------------------------- 1 | { 2 | "text": "UI", 3 | "children": ["/question/implement-hacker-news"] 4 | } 5 | -------------------------------------------------------------------------------- /docs/.vuepress/public/question/implement-hacker-news/hacker-news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaoyu2er/fe-interview/HEAD/docs/.vuepress/public/question/implement-hacker-news/hacker-news.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 关于 US-FE 2 | 3 | [US-FE](https://github.com/us-fe) 是 [@xiaoyu2er](https://github.com/xiaoyu2er) 创建的北美最大的前端组织 4 | 5 | 通过网站 [US-FE.github.io](https://us-fe.github.io/) 来帮助北美的前端朋友解决前端面试的各个环节，帮助大家提升前端技术，拿到心仪 Offer！ 6 | 7 | 关注公众号 **前端小鱼二**，回复 **前端群** 获得加群方式 8 | 9 | 北美前端交流群聚集了北美各大公司的优秀前端，技术氛围浓厚，对于本网站发布的题目都会第一时间进行讨论，赶快加入吧！ -------------------------------------------------------------------------------- /docs/blog/about-us-fe.md: -------------------------------------------------------------------------------- 1 | # 关于 US-FE 2 | 3 | [US-FE](https://github.com/us-fe) 是 [@xiaoyu2er](https://github.com/xiaoyu2er) 创建的北美最大的前端组织 4 | 5 | 通过本网站 [US-FE.github.io](https://us-fe.github.io/) 来帮助北美的前端朋友解决前端面试的各个环节，帮助大家提升前端技术，拿到心仪 Offer！ 6 | 7 | 关注公众号 **前端小鱼二**，回复 **前端群** 获得加群方式 8 | 9 | 北美前端交流群聚集了北美各大公司的优秀前端，技术氛围浓厚，对于本网站发布的题目都会第一时间进行讨论，赶快加入吧！ -------------------------------------------------------------------------------- /docs/question/flex-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # What does`flex:1` mean? 9 | 10 | ## Question 11 | The definition is [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/flex-1) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/base64.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Network 5 | 6 | --- 7 | 8 | # what is base64 ? 9 | 10 | ## Question 11 | Easy question, if not clear yet you can refer to [wikipedia](https://en.wikipedia.org/wiki/Base64). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/base64) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/qrcode-to-login.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - SystemDesign 4 | 5 | --- 6 | 7 | # design a QR code based login system 8 | 9 | ## Question 10 | You often see websites supporting logining in with QR code. How to create one by yourself? 11 | 12 | 13 | 14 | 15 | ## Source 16 | [Source From](https://bigfrontend.dev/design/QRcode-to-login) 17 | 18 | -------------------------------------------------------------------------------- /docs/system-design/2-design-todo-app.md: -------------------------------------------------------------------------------- 1 | # 2. Design Todo App 2 | 3 | 题目来源： 小伙伴的面经 4 | 5 | ## 题目 6 | 7 | Design a todo app 8 | 1. Define API 9 | 1. Define API request interface and response data format 10 | 2. Define Frontend props and state data entity 11 | 2. Design a flow to enable sharing todo items/lists among multiple clients 12 | 3. How to scale up? -------------------------------------------------------------------------------- /docs/question/truncate-text-with-ellipsis-in-one-line.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # truncate text in one line(with ellipsis) 9 | 10 | ## Question 11 | Truncate text in one line, if needed add ellipsis. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/css/truncate-text-with-ellipsis-in-one-line) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/esgenerator.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is Generator and what is it useful for? 9 | 10 | ## Question 11 | [This article on JavaScript.info](https://javascript.info/generators) explains it very well. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/ES6-generator) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/explain-clear-in-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # how does `clear` in CSS work? 9 | 10 | ## Question 11 | If not sure, please refer to [MDN description](https://developer.mozilla.org/en-US/docs/Web/CSS/clear). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/explain-clear-in-CSS) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-to-turn-html-web-page-into-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - General 5 | 6 | --- 7 | 8 | # How to turn HTML web page in to an image? 9 | 10 | ## Question 11 | The question doesn't have restraint to environments. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/how-to-turn-html-web-page-into-images) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-to-create-triangles-with-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # How to create triangles with CSS? 9 | 10 | ## Question 11 | There are more than 1 way to create a triangle, what approaches can you think of ? 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/How-to-create-triangles-with-CSS) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/equal-iii.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Equal III 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(2.0 == "2" == new Boolean(true) == "1") 16 | ``` 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/quiz/equal-iii) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/design-an-instagram.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - SystemDesign 4 | - ProductDesign 5 | 6 | --- 7 | 8 | # Design an instagram 9 | 10 | ## Question 11 | This is a vague product design problem. 12 | 13 | And for Instagram, address more on the Timeline/Image performance stuff. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/design/design-an-instagram) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/generator-itarables.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # explain iterators and generators 9 | 10 | ## Question 11 | You can find the [answer on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/generator-itarables) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-to-create-a-square-with-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # how to create a responsive Square with CSS? 9 | 10 | ## Question 11 | Square means the aspect ratio is fixed to 1 no matter what size is ? how to achieve this in CSS? 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/how-to-create-a-Square-with-CSS) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/explain-macrotask-and-microtask`.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Explain `macrotask` and `microtask` 9 | 10 | ## Question 11 | In case you are not sure, please read about [Event loop](https://javascript.info/event-loop) first. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/Explain-macrotask-and-microtask`) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/transform-translatez-0.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # what is `transform:translateZ(0)` for? 9 | 10 | ## Question 11 | [This post](https://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0) explains it pretty well. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/transform-translateZ-0) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/300ms.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Mobile 5 | 6 | --- 7 | 8 | # What is 300ms tap delay for touch device? How to remove it 9 | 10 | ## Question 11 | It was a problem for many years, but [not a problem any more](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/300ms) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/http-message-structure.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - HTTP 5 | 6 | --- 7 | 8 | # Explain the structure of a HTTP message 9 | 10 | ## Question 11 | This is good-to-known knowledge, [MDN doc](https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages) explains it very well. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/http-message-structure) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/if-ii.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # if II 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | if (function foo(){ console.log('BFE') }) { 16 | console.log('dev') 17 | } 18 | foo() 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/if-II) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/what-is-jwt-json-web-token.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is JWT(JSON Web Token)? 9 | 10 | ## Question 11 | [JSON Web Token](https://jwt.io/introduction/) is commonly used in authorization, it is better you understand how it works. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/What-is-JWT-JSON-Web-Token) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-webpack-works.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - DevTool 5 | 6 | --- 7 | 8 | # Are you familiar with webpack? how does it work? 9 | 10 | ## Question 11 | You can find [the webpack core concepts here](https://webpack.js.org/concepts/), do explain a little bit about loaders and plugins. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/how-webpack-works) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/two-column-layout.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | - Layout 6 | 7 | --- 8 | 9 | # two-column layout 10 | 11 | ## Question 12 | Implement a basic two-column layout, in which left column takes up 25% width of the container with minimum width of 100px and right column fills up the rest. 13 | 14 | 15 | 16 | 17 | ## Source 18 | [Source From](https://bigfrontend.dev/css/two-column-layout) 19 | 20 | -------------------------------------------------------------------------------- /docs/question/use-strict.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # what is 'use strict' for? 9 | 10 | ## Question 11 | If you are not familiar with it, take a look at [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#strict_mode_for_scripts). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/use-strict) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/change-color-of-input-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # color of input elements 9 | 10 | ## Question 11 | We have a slider but we want to change the default color into `#F44336`. 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/css/change-color-of-input-elements) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/let.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # let 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | let a = 1; 16 | (function() { 17 | let foo = () => a 18 | let a = 2; 19 | console.log(foo()) 20 | }()) 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/let) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/push-unshift.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # push unshift 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const arr = [1,2] 16 | arr.push(3,4) 17 | arr.unshift(5,6) 18 | console.log(arr) 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/push-unshift) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/function.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # function 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function foo(){ console.log(1) } 16 | var foo = 2 17 | function foo(){ console.log(3) } 18 | foo() 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/function) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/gradient-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # color gradients on text 9 | 10 | ## Question 11 | Let's give text some color gradients, from `red` on the left to `yellow` on the right. 12 | 13 | ```html 14 | practice on BFE.dev, get an offer 15 | ``` 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/css/gradient-text) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/how-to-login.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Auth 5 | 6 | --- 7 | 8 | # how to implement user login? 9 | 10 | ## Question 11 | This [post](https://medium.com/@albert.kim/understanding-user-authentication-in-your-web-app-and-how-to-implement-it-part-1-the-high-level-ab91336ab77c) might be worthy of reading. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/how-to-login) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/const.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # const 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function func() { 16 | const a = b = c = 1 17 | } 18 | func() 19 | console.log(typeof a, typeof b, typeof c) 20 | ``` 21 | 22 | 23 | 24 | ## Source 25 | [Source From](https://bigfrontend.dev/quiz/const) 26 | 27 | -------------------------------------------------------------------------------- /docs/question/object-freeze.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What does Object.freeze() do? 9 | 10 | ## Question 11 | Read the [MDN description](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) and think about some cases where it is useful for. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/Object-freeze) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/unicode-utf-16.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - General 5 | 6 | --- 7 | 8 | # Tell me more about Unicode and UTF-8 9 | 10 | ## Question 11 | This [answer on stackoverflow](https://stackoverflow.com/questions/643694/what-is-the-difference-between-utf-8-and-unicode/46418175#46418175) explains it very well. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/unicode-UTF-8-16) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/why-front-end.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Behavioral 5 | 6 | --- 7 | 8 | # Why Front End? 9 | 10 | ## Question 11 | Yeah, why ? 12 | 13 | Ask yourself do you really love being a Front End Developer? What triggered you to write the first JavaScript/HTML/CSS code? What kind of engineer you plan to become? 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/Why-Front-End) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/in-coercion.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # in 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const obj = { 16 | foo: 'bar' 17 | } 18 | 19 | console.log('foo' in obj) 20 | console.log(['foo'] in obj) 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/in-coercion) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/what-is-css-pixel-and-device-pixels.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # What is CSS pixel and device pixel? 9 | 10 | ## Question 11 | Do you know the definition of [CSS pixel](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel)? What does `devicePixelRatio` mean? 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/What-is-CSS-pixel-and-device-pixels) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/what-is-dns-how-does-it-work.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Network 5 | 6 | --- 7 | 8 | # What is DNS? How does it work? 9 | 10 | ## Question 11 | This is a good-to-know question. 12 | 13 | I found [this article from CloudFlare](https://www.cloudflare.com/learning/dns/what-is-dns/) super helpful. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-DNS-How-does-it-work) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/git-merge-git-rebase.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - General 5 | 6 | --- 7 | 8 | # What is the difference between `git merge` and `git rebase`? 9 | 10 | ## Question 11 | This is a very basic question about git, if still unfamiliar, [read this post](https://www.atlassian.com/git/tutorials/merging-vs-rebasing). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/git-merge-git-rebase) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/meaningless-calculation.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # meaningless calculation 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const num = +((~~!+[])+(~~!+[])+[]+(~~!+[])) 16 | console.log(num) 17 | ``` 18 | 19 | 20 | 21 | ## Source 22 | [Source From](https://bigfrontend.dev/quiz/meaningless-calculation) 23 | 24 | -------------------------------------------------------------------------------- /docs/question/prototype2.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Prototype 2 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function F() { 16 | this.foo = 'bar' 17 | } 18 | 19 | const f = new F() 20 | console.log(f.prototype) 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/prototype2) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/how-do-you-do-seo-in-your-project.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - General 5 | 6 | --- 7 | 8 | # How do you do SEO in your project? 9 | 10 | ## Question 11 | for SEO 12 | 13 | 1. how would you organize your code 14 | 2. how to make it work for SPA 15 | 3. what general rules do you follow 16 | 4. .etc 17 | 18 | 19 | 20 | 21 | ## Source 22 | [Source From](https://bigfrontend.dev/question/How-do-you-do-SEO-in-your-project) 23 | 24 | -------------------------------------------------------------------------------- /docs/question/how-responsiveness-work.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # How does responsiveness work? 9 | 10 | ## Question 11 | Responsive design is only possible with [Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#media_queries), you should explain it. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/how-responsiveness-work) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/var.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # var 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function foo() { 16 | console.log(i) 17 | for (var i = 0; i < 3; i++) { 18 | console.log(i) 19 | } 20 | } 21 | 22 | foo() 23 | ``` 24 | 25 | 26 | 27 | ## Source 28 | [Source From](https://bigfrontend.dev/quiz/var) 29 | 30 | -------------------------------------------------------------------------------- /docs/question/what-is-keep-alive-in-vue-js-useful-for.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Vue.js 5 | 6 | --- 7 | 8 | # What is `keep-alive` in Vue.js useful for? 9 | 10 | ## Question 11 | Useful in some specific cases, need to understand it thoroughly. [Here is the document](https://vuejs.org/v2/api/#keep-alive) . 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/What-is-keep-alive-in-Vue-js-useful-for) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/what-is-decorator-pattern.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is Decorator Pattern 9 | 10 | ## Question 11 | Be familiar with the design patterns before interview. 12 | 13 | Here is a good article on [Decorator Pattern](https://www.dofactory.com/javascript/design-patterns/decorator). 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-Decorator-Pattern) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-factory-pattern.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is Factory Pattern? 9 | 10 | ## Question 11 | Be familiar with the design patterns before interview. 12 | 13 | Here is [a good article on Factory Pattern](https://www.dofactory.com/javascript/design-patterns/factory-method) 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-Factory-Pattern) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-singleton-pattern.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is Singleton Pattern? 9 | 10 | ## Question 11 | Be familiar with the design patterns before interview. 12 | 13 | Here is a good article on [Singleton Pattern](https://www.dofactory.com/javascript/design-patterns/singleton) 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-Singleton-Pattern) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/function-name.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Function name 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | var foo = function bar(){ 16 | return 'BFE'; 17 | }; 18 | 19 | console.log(foo()); 20 | console.log(bar()); 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/Function-name) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/what-is-open-redirect-problem-how-to-solve-it.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Security 5 | 6 | --- 7 | 8 | # what is Open Redirect problem? How to solve it? 9 | 10 | ## Question 11 | If your website has [open redirect](https://cwe.mitre.org/data/definitions/601.html), phishing should be your concern. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/what-is-Open-Redirect-problem-How-to-solve-it) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/js-float-precision.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # why 0.1 + 0.2 !== 0.3 ? How to deal with float precision in your apps? 9 | 10 | ## Question 11 | In case your are not familiar, [this web page](https://stackoverflow.com/questions/11695618/dealing-with-float-precision-in-javascript) explains it well. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/js-float-precision) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/truncate-text-in-multiple-lines-with-ellipsis.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # truncate text in multiple lines(with ellipsis) 9 | 10 | ## Question 11 | Just like [2\. truncate text in one line(with ellipsis)](/css/truncate-text-with-ellipsis-in-one-line), please do the same for max 3 lines. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/css/truncate-text-in-multiple-lines-with-ellipsis) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/css-cross-button.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # close button in CSS 9 | 10 | ## Question 11 | Create a close button in CSS. 12 | 13 | Lines for the cross should have 14 | 15 | 1. length : 3/4 of button width 16 | 2. thickness: 2px 17 | 3. color: `#aaa` 18 | 19 | ```html 20 | 21 | ``` 22 | 23 | 24 | 25 | 26 | ## Source 27 | [Source From](https://bigfrontend.dev/css/css-cross-button) 28 | 29 | -------------------------------------------------------------------------------- /docs/question/increment-operator.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Increment Operator 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | let a = 1 16 | const b = ++a 17 | const c = a++ 18 | console.log(a) 19 | console.log(b) 20 | console.log(c) 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/Increment-Operator) 27 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar/react.json: -------------------------------------------------------------------------------- 1 | { 2 | "text": "React", 3 | "collapsible": true, 4 | "collapsable": true, 5 | "children": [ 6 | "/question/the-react-counter", 7 | "/question/usetimeout", 8 | "/question/useisfirstrender", 9 | "/question/useswr-1", 10 | "/question/useprevious", 11 | "/question/usehover", 12 | "/question/usetoggle", 13 | "/question/usedebounce", 14 | "/question/useeffectonce", 15 | "/question/phone-number-input", 16 | "/question/usefocus" 17 | ] 18 | } -------------------------------------------------------------------------------- /docs/question/array-prototype-sort.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Array.prototype.sort() 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const a = [999, 1111, 111, 2, 0] 16 | const b = a.sort() 17 | 18 | console.log(a) 19 | console.log(b) 20 | ``` 21 | 22 | 23 | 24 | ## Source 25 | [Source From](https://bigfrontend.dev/quiz/Array-prototype-sort) 26 | 27 | -------------------------------------------------------------------------------- /docs/question/golden-ratio-rectangle.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # golden-ratio rectangle 9 | 10 | ## Question 11 | Let's create a golden-ratio rectangle, which means width/height = 1.618. 12 | 13 | This rectangle should have the fixed ratio even when width changes. 14 | 15 | ```html 16 |
17 | ``` 18 | 19 | 20 | 21 | 22 | ## Source 23 | [Source From](https://bigfrontend.dev/css/golden-ratio-rectangle) 24 | 25 | -------------------------------------------------------------------------------- /docs/question/tell-me-about-your-current-role.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Behavioral 5 | 6 | --- 7 | 8 | # Tell me about your current role. 9 | 10 | ## Question 11 | Do mention your team's effort, but also emphasize on the **unique contributions** made by you. 12 | 13 | Do leave something that lures the interviewers to ask for more details. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/Tell-me-about-your-current-role) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-observer-pattern.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is Observer Pattern? 9 | 10 | ## Question 11 | Be familiar with the design patterns before interview. 12 | 13 | Here is a good article on [Observer Pattern (also called pub-sub)](https://www.dofactory.com/javascript/design-patterns/observer) 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-Observer-Pattern) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/explain-tcp-way-handshake-process.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Network 5 | - ByteDance 6 | 7 | --- 8 | 9 | # Explain TCP Way Handshake process 10 | 11 | ## Question 12 | This is good-to-know topic. 13 | 14 | In case you are not familiar, [this article](https://www.geeksforgeeks.org/tcp-3-way-handshake-process/) might help. 15 | 16 | 17 | 18 | 19 | ## Source 20 | [Source From](https://bigfrontend.dev/question/Explain-TCP-3-Way-Handshake-process) 21 | 22 | -------------------------------------------------------------------------------- /docs/question/min-max.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # min max 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(Math.min()) 16 | console.log(Math.max()) 17 | console.log(Math.min(1)) 18 | console.log(Math.max(1,2)) 19 | console.log(Math.min([1,2,3])) 20 | ``` 21 | 22 | 23 | 24 | ## Source 25 | [Source From](https://bigfrontend.dev/quiz/min-max) 26 | 27 | -------------------------------------------------------------------------------- /docs/question/settimeout-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # setTimeout II 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | let num 16 | 17 | for (let i = 0; i < 5; i++) { 18 | num = i 19 | setTimeout(() => { 20 | console.log(num) 21 | }, 100) 22 | } 23 | ``` 24 | 25 | 26 | 27 | ## Source 28 | [Source From](https://bigfrontend.dev/quiz/setTimeout-2) 29 | 30 | -------------------------------------------------------------------------------- /docs/question/what-is-event-delegation.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - DOM 5 | 6 | --- 7 | 8 | # What is Event Delegation? 9 | 10 | ## Question 11 | [Event Delegation](https://javascript.info/event-delegation) is a common approach to avoid too many event listeners, which is used in jQuery and React. 12 | 13 | Could you explain how Event Delegation work? 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-Event-Delegation) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/how-would-you-debug-a-web-page-and-find-the-bad-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - General 5 | 6 | --- 7 | 8 | # How would you debug a web page and find the bad code? 9 | 10 | ## Question 11 | Just list up what you usually do for desktop browser, mobile browser and webviews, including errors or performance bottleneck. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/How-would-you-debug-a-web-page-and-find-the-bad-code) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/implicit-coersion-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Implicit Coercion IV 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const foo = [0] 16 | if (foo) { 17 | console.log(foo == true) 18 | } else { 19 | console.log(foo == false) 20 | } 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/implicit-coersion-2) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/regexp.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | - RegExp 6 | 7 | --- 8 | 9 | # RegExp 10 | 11 | ## Question 12 | What does the code snippet to the right output by `console.log`? 13 | 14 | ## Snippet 15 | ```js 16 | const arr = ['a', 'b', 'c', '1'] 17 | const regExp = /^[a-z]$/gi 18 | const chars = arr.filter(elem => regExp.test(elem)) 19 | console.log(chars) 20 | ``` 21 | 22 | 23 | 24 | ## Source 25 | [Source From](https://bigfrontend.dev/quiz/RegExp) 26 | 27 | -------------------------------------------------------------------------------- /docs/question/comma.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # comma 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | var obj = { 16 | a: "BFE", 17 | b: "dev", 18 | func: (function foo(){ return this.a; }, function bar(){ return this.b; }) 19 | } 20 | 21 | console.log(obj.func()) 22 | ``` 23 | 24 | 25 | 26 | ## Source 27 | [Source From](https://bigfrontend.dev/quiz/comma) 28 | 29 | -------------------------------------------------------------------------------- /docs/question/explain-box-model.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # Explain Box Model 9 | 10 | ## Question 11 | Well, it is about block/inline stuff, and margin/padding stuff. 12 | 13 | Not easy to explain it clearly. 14 | 15 | In case you forgot, [this MDN page](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) helps. 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/question/explain-Box-Model) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/function-expression-vs-function-declaration.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is the difference between function declaration and function expression? 9 | 10 | ## Question 11 | Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function) for detail explanation. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/function-expression-vs-function-declaration) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/what-is-closure-and-how-does-it-work.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # what is Closure and how does it work? 9 | 10 | ## Question 11 | Closure is a common term in JavaScript. 12 | 13 | The definition is easy, but you should explain well on details about [how closure works](https://javascript.info/closure). 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/what-is-closure-and-how-does-it-work) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-the-best-gift-you-have-ever-given-or-received.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Behavioral 5 | 6 | --- 7 | 8 | # What is the best gift you have ever given or received ? 9 | 10 | ## Question 11 | Think of a moment that changed your life and extend on that. Think of the person you love the most or feel grateful, etc. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/What-is-the-best-gift-you-have-ever-given-or-received) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-to-center-an-element-vertically.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # How to center an element vertically? 9 | 10 | ## Question 11 | There are a lot of ways of achieving this, like negative margin, position, transform, line-height, flex-box .etc. 12 | 13 | Do think difference situations where each approach is suitable. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/How-to-center-an-element-vertically) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-array-like-objects-in-javascript.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is Array-Like Objects in JavaScript? 9 | 10 | ## Question 11 | We meet a lot of Array-Like objects, like return value of `document.querySelectorAll()`. 12 | 13 | What exactly are Array-Like Objects? How can we loop through them? 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-Array-Like-Objects-in-JavaScript) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/array-keys.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # array keys 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(Reflect.ownKeys([])) 16 | console.log(Reflect.ownKeys([,])) 17 | console.log(Reflect.ownKeys([1,,2])) 18 | console.log(Reflect.ownKeys([...[1,,2]])) 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/array-keys) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/explain-common-http-methods-what-are-they-used-for.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Network 5 | 6 | --- 7 | 8 | # Explain common HTTP request methods? What are they used for? 9 | 10 | ## Question 11 | How many [HTTP request methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) do you know ? Do you know `put` and `options`? 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/Explain-common-HTTP-methods-What-are-they-used-for) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/hoisting-i.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Hoisting I 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const a = 1 16 | console.log(a) 17 | 18 | var b 19 | console.log(b) 20 | b = 2 21 | 22 | console.log(c) 23 | var c = 3 24 | 25 | console.log(d) 26 | let d = 2 27 | ``` 28 | 29 | 30 | 31 | ## Source 32 | [Source From](https://bigfrontend.dev/quiz/Hoisting-I) 33 | 34 | -------------------------------------------------------------------------------- /docs/question/parseint.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # parseInt 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(['0'].map(parseInt)) 16 | console.log(['0','1'].map(parseInt)) 17 | console.log(['0','1','1'].map(parseInt)) 18 | console.log(['0','1','1','1'].map(parseInt)) 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/parseInt) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/what-is-cdn-why-do-we-use-it.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Network 5 | 6 | --- 7 | 8 | # What is CDN? Why do we use it? 9 | 10 | ## Question 11 | For Front End engineers, usually our static resources are delivered by CDN. 12 | 13 | In case you don't know yet, [this article from CloudFlare](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) might help. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-CDN-Why-do-we-use-it) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/arguments.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # arguments 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function log(a,b,c,d) { 16 | console.log(a,b,c,d) 17 | arguments[0] = 'bfe' 18 | arguments[3] = 'dev' 19 | 20 | console.log(a,b,c,d) 21 | } 22 | 23 | log(1,2,3) 24 | ``` 25 | 26 | 27 | 28 | ## Source 29 | [Source From](https://bigfrontend.dev/quiz/arguments) 30 | 31 | -------------------------------------------------------------------------------- /docs/question/hairline.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # 0.5px border 9 | 10 | ## Question 11 | When we set 0.5px in CSS, usually it will be rounded by browsers. But with better and better display like Retina display, 1px would sometimes looks thick. 12 | 13 | Please add 0.5px top border of black for the following div. 14 | 15 | ```html 16 |
17 | ``` 18 | 19 | 20 | 21 | 22 | ## Source 23 | [Source From](https://bigfrontend.dev/css/hairline) 24 | 25 | -------------------------------------------------------------------------------- /docs/question/if.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # if 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | if (true) { 16 | function foo() { 17 | console.log('BFE') 18 | } 19 | } 20 | if (false) { 21 | function bar() { 22 | console.log('dev') 23 | } 24 | } 25 | 26 | foo() 27 | bar() 28 | ``` 29 | 30 | 31 | 32 | ## Source 33 | [Source From](https://bigfrontend.dev/quiz/if) 34 | 35 | -------------------------------------------------------------------------------- /docs/question/what-is-loader-and-plugin-in-webpack.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Webpack 5 | 6 | --- 7 | 8 | # What is loader and plugin in Webpack? 9 | 10 | ## Question 11 | Better try to create one [Webpack plugin](https://webpack.js.org/concepts/plugins/) and one [Webpack loader](https://webpack.js.org/concepts/loaders/), then you will know everything about them. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/What-is-loader-and-plugin-in-Webpack) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/design-facebook-web-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - SystemDesign 4 | - ProductDesign 5 | 6 | --- 7 | 8 | # Design facebook.com 9 | 10 | ## Question 11 | This is a vague product design problem. 12 | 13 | And for facebook.com, [this blog from facebook](https://engineering.fb.com/web/facebook-redesign/) is worth reading. 14 | 15 | Timeline performance issue might be a good shining point. 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/design/design-facebook-web-app) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/parseint-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # parseInt 2 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(parseInt(0.00001)) 16 | console.log(parseInt(0.000001)) 17 | console.log(parseInt(0.0000001)) 18 | console.log(parseInt("0x12")) 19 | console.log(parseInt("1e2")) 20 | ``` 21 | 22 | 23 | 24 | ## Source 25 | [Source From](https://bigfrontend.dev/quiz/parseInt-2) 26 | 27 | -------------------------------------------------------------------------------- /docs/question/block-scope-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # block scope 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | for (var i = 0; i < 5; i++) { 16 | setTimeout(() => console.log(i), 0) 17 | } 18 | 19 | for (let i = 0; i < 5; i++) { 20 | setTimeout(() => console.log(i), 0) 21 | } 22 | ``` 23 | 24 | 25 | 26 | ## Source 27 | [Source From](https://bigfrontend.dev/quiz/block-scope-1) 28 | 29 | -------------------------------------------------------------------------------- /docs/question/explain-common-http-response-status-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Network 5 | 6 | --- 7 | 8 | # Explain common HTTP response status code 9 | 10 | ## Question 11 | You need to understand meaning of common status code. 12 | 13 | In case you are not sure, refer to [this MDN article](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) and remember it. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/Explain-common-HTTP-response-status-code) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/how-do-you-create-retina-hairline-1px-line-in-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # How do you create retina hairline(0.5px line in CSS)? 9 | 10 | ## Question 11 | When you write 1px in CSS, you would find it seems to be thicker on Retina devices than you thought. 12 | 13 | How would create more thin borders (retina hairlines)? 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/How-do-you-create-retina-hairline-1px-line-in-CSS) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-block-formatting-context.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # What is Block Formatting Context? 9 | 10 | ## Question 11 | This [article](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/) seems more readable than [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/what-is-block-formatting-context) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/when-do-we-need-to-use-non-strict-mode.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # When do we need to use non-strict mode? 9 | 10 | ## Question 11 | First understand what is different in [Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode), then think of the cases in which we don't want this new feature. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/When-do-we-need-to-use-non-strict-mode) 18 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar/react-quiz.json: -------------------------------------------------------------------------------- 1 | { 2 | "text": "React Quiz", 3 | "collapsible": true, 4 | "collapsable": true, 5 | "children": [ 6 | "/question/react-re-render-1", 7 | "/question/react-re-render-2", 8 | "/question/react-re-render-3", 9 | "/question/react-re-render-4", 10 | "/question/react-re-render-5", 11 | "/question/suspense-1", 12 | "/question/suspense-2", 13 | "/question/react-rerender-context", 14 | "/question/uselayouteffect", 15 | "/question/callback-props", 16 | "/question/useeffect" 17 | ] 18 | } -------------------------------------------------------------------------------- /docs/question/function-call.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Function call 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function a() { 16 | console.log(1) 17 | return { 18 | a: function() { 19 | console.log(2) 20 | return a() 21 | } 22 | } 23 | } 24 | 25 | a().a() 26 | ``` 27 | 28 | 29 | 30 | ## Source 31 | [Source From](https://bigfrontend.dev/quiz/Function-call) 32 | 33 | -------------------------------------------------------------------------------- /docs/question/how-to-improve-webpage-of-many-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Performance 5 | 6 | --- 7 | 8 | # how to improve performance of a webpage of a lot of images? 9 | 10 | ## Question 11 | For loading, we can compress, choose right format, preload, lazyload or inline critical images. For perceptive performance, we could show skeleton or even show images progressively. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/how-to-improve-webpage-of-many-images) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/instanceof-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # instanceOf 2 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(Function instanceof Object) 16 | console.log(Object instanceof Function) 17 | console.log(Function instanceof Function) 18 | console.log(Object instanceof Object) 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/instanceOf-2) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/precedence.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # precedence 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | let a = 1 16 | console.log(a +++ a) 17 | 18 | let b = 1 19 | console.log(b + + + b) 20 | 21 | let c = 1 22 | console.log(c --- c) 23 | 24 | let d = 1 25 | console.log(d - - - d) 26 | ``` 27 | 28 | 29 | 30 | ## Source 31 | [Source From](https://bigfrontend.dev/quiz/precedence) 32 | 33 | -------------------------------------------------------------------------------- /docs/question/settimeout-iii.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # setTimeout III 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | let func = () => { 16 | console.log(1) 17 | } 18 | setTimeout(() => { 19 | func = () => { 20 | console.log(2) 21 | } 22 | }, 0) 23 | 24 | setTimeout(func, 100) 25 | ``` 26 | 27 | 28 | 29 | ## Source 30 | [Source From](https://bigfrontend.dev/quiz/setTimeout-III) 31 | 32 | -------------------------------------------------------------------------------- /docs/question/what-are-you-learning-right-now.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Behavior 5 | 6 | --- 7 | 8 | # What technologies are you learning right now? and what do you plan to learn? 9 | 10 | ## Question 11 | There is no right or wrong in this question. But please do have something on your list, show you are a learner, especially something related to the position you are applying for. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/what-are-you-learning-right-now) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-garbage-collection-in-javascript-works.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | - SmartNews 6 | 7 | --- 8 | 9 | # How Garbage collection in JavaScript works? 10 | 11 | ## Question 12 | There is [this article](https://javascript.info/garbage-collection) which explains clearly on this topic. 13 | 14 | Please notice `reachable` is different from `referenced`. 15 | 16 | 17 | 18 | 19 | ## Source 20 | [Source From](https://bigfrontend.dev/question/How-Garbage-collection-in-JavaScript-works) 21 | 22 | -------------------------------------------------------------------------------- /docs/question/regexp-prototype-test.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # RegExp.prototype.test 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(/^4\d\d$/.test('404')) 16 | console.log(/^4\d\d$/.test(404)) 17 | console.log(/^4\d\d$/.test(['404'])) 18 | console.log(/^4\d\d$/.test([404])) 19 | ``` 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/quiz/RegExp-prototype-test) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/what-is-the-pros-and-cons-of-node.js.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Node.js 5 | 6 | --- 7 | 8 | # What is the Pros and Cons of Node.js 9 | 10 | ## Question 11 | It is hard to answer if you don't have enough developing experiences of Node.js and other languages. 12 | 13 | I'd suggest you to remember the Pros and Cons from [here](http://voidcanvas.com/describing-node-js/) 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-the-Pros-and-Cons-of-Node.js) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/difference-between-no-cache-and-no-store.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - HTTP 5 | 6 | --- 7 | 8 | # what is the difference between cache-control:no-cache and cache-control:no-store? 9 | 10 | ## Question 11 | In case you are not sure yet, [the MDN document for HTTP Caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#Cache_validation) is a must-to-read material. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/difference-between-no-cache-and-no-store) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/how-to-build-an-npm-package.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | - Apple 6 | 7 | --- 8 | 9 | # How to publish an NPM package 10 | 11 | ## Question 12 | To understand the steps of publishing an NPM package, you should try to publish your own dummy package, following this [official guideline](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry). 13 | 14 | 15 | 16 | 17 | ## Source 18 | [Source From](https://bigfrontend.dev/question/ How-to-build-an-NPM-package) 19 | 20 | -------------------------------------------------------------------------------- /docs/question/how-to-implement-pagination-in-front-end.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Architecture 5 | 6 | --- 7 | 8 | # How to implement pagination in Front End? 9 | 10 | ## Question 11 | There are a few kinds of pagination, like infinite scroll, prev/next style or page number based interaction. 12 | 13 | Think about the pros and cons for each and talk about how the API should be like. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/How-to-implement-pagination-in-Front-End) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/operator-precedence.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Operator precedence 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(0 == 1 == 2) 16 | console.log(2 == 1 == 0) 17 | console.log(0 < 1 < 2) 18 | console.log(1 < 2 < 3) 19 | console.log(2 > 1 > 0) 20 | console.log(3 > 2 > 1) 21 | ``` 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/quiz/operator-precedence) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/what-is-your-strength-and-weakness.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Behavioral 5 | 6 | --- 7 | 8 | # What is your strength and weakness. 9 | 10 | ## Question 11 | Just be honest, everyone has weakness. 12 | 13 | Interviewers wants to believe that you are **clear about yourself** and **are always trying to improve**, so do mention the actions you are taking to improve your weakness. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/What-is-your-strength-and-weakness) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/offline-support.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # How would you add offline support to your web app? 9 | 10 | ## Question 11 | Possibly interviewer wants to hear about [PWA woking offline](https://developers.google.com/web/fundamentals/codelabs/offline), besides technical stuff, maybe you can talk about what kind of apps needs what sort of offline support at the beginning. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/offline-support) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/promise-then-callbacks.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | - Promise 6 | 7 | --- 8 | 9 | # Promise then callbacks 10 | 11 | ## Question 12 | What does the code snippet to the right output by `console.log`? 13 | 14 | ## Snippet 15 | ```js 16 | Promise.resolve(1) 17 | .then(() => 2) 18 | .then(3) 19 | .then((value) => value * 3) 20 | .then(Promise.resolve(4)) 21 | .then(console.log) 22 | ``` 23 | 24 | 25 | 26 | ## Source 27 | [Source From](https://bigfrontend.dev/quiz/3-promise-then-callbacks) 28 | 29 | -------------------------------------------------------------------------------- /docs/question/create-a-star-widget.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - SystemDesign 4 | - Airbnb 5 | 6 | --- 7 | 8 | # Create a Star Widget 9 | 10 | ## Question 11 | Following is a common start widget. 12 | 13 | ![](https://ewr1.vultrobjects.com/bfe/img/LdgwuDtAhZ2TGnZ64uL4qKjJEsiOeWRJ_104x28_1597596310185.jpg) 14 | 15 | How would create this widget? How to make it reusable ? How to make it also working as a common input field in a form? 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/design/create-a-star-widget) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/logic.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Fun 5 | 6 | --- 7 | 8 | # will the sheep be eaten? 9 | 10 | ## Question 11 | Suppose there are 100 wolves and 1 sheep. 12 | 13 | 1. wolf could eat grass but they prefer eating sheep 14 | 2. once a wolf eats a sheep, the wolf becomes the sheep 15 | 3. all wolves are rationale and first priority is to live 16 | 17 | Question: will this sheep be eaten? what if there are `n` wolves? 18 | 19 | 20 | 21 | 22 | ## Source 23 | [Source From](https://bigfrontend.dev/question/logic) 24 | 25 | -------------------------------------------------------------------------------- /docs/question/cross-origin.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - HTTP 5 | 6 | --- 7 | 8 | # What is Same-Origin policy ? How to share Cross-Origin resource? 9 | 10 | ## Question 11 | [Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) works as a crucial part in web apps, [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) header is a safe machanism to share resources across origins. 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/cross-origin) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/explain-event-loop-in-browser-and-in-nodejs.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Explain Event Loop in Browser and in Node.js 9 | 10 | ## Question 11 | Explain us the [Event Loop in Browser](https://javascript.info/event-loop) and [Event loop in Node.js](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/). 12 | 13 | There are some differences. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/Explain-Event-Loop-in-Browser-and-in-Nodejs) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/can-you-explain-what-react-fiber-is.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - React 5 | 6 | --- 7 | 8 | # Can you explain what React Fiber is? 9 | 10 | ## Question 11 | General knowledge of React Fiber is enough. 12 | 13 | What problems does it solve? How does it work? 14 | 15 | In case you are not familiar, [this article](https://blog.logrocket.com/deep-dive-into-react-fiber-internals/) might be helpful. 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/question/Can-you-explain-what-React-Fiber-is) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/explain-the-common-css-relative-length-units.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # Explain the common CSS Relative length units 9 | 10 | ## Question 11 | I believe you know `em` and `rem`, do you know `vw`,`vh` , `vmin` , `vmax`? 12 | 13 | The common ones could be found in [this MDN doc](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/Explain-the-common-CSS-Relative-length-units) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/hoisting-iv.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Hoisting IV 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | let foo = 10 16 | function func1() { 17 | console.log(foo) 18 | var foo = 1 19 | } 20 | func1 () 21 | 22 | 23 | function func2() { 24 | console.log(foo) 25 | let foo = 1 26 | } 27 | func2 () 28 | ``` 29 | 30 | 31 | 32 | ## Source 33 | [Source From](https://bigfrontend.dev/quiz/Hoisting-IV) 34 | 35 | -------------------------------------------------------------------------------- /docs/question/please-explain-the-3rd-parameter-of-eventtarget-addeventlistener.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - WebAPI 5 | 6 | --- 7 | 8 | # please explain the 3rd parameter of EventTarget.addEventListener() 9 | 10 | ## Question 11 | I could be a Boolean or an Object, for more details please read [MDN doc](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). 12 | 13 | 14 | 15 | 16 | ## Source 17 | [Source From](https://bigfrontend.dev/question/please-explain-the-3rd-parameter-of-EventTarget-addEventListener) 18 | 19 | -------------------------------------------------------------------------------- /docs/question/hoisting-vi.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Hoisting VI 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | var foo = 1; 16 | (function () { 17 | console.log(foo); 18 | foo = 2; 19 | console.log(window.foo); 20 | console.log(foo); 21 | var foo = 3; 22 | console.log(foo); 23 | console.log(window.foo) 24 | })() 25 | ``` 26 | 27 | 28 | 29 | ## Source 30 | [Source From](https://bigfrontend.dev/quiz/Hoisting-VI) 31 | 32 | -------------------------------------------------------------------------------- /docs/question/how-to-create-a-box-with-fixed-aspect-ratio-in-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - CSS 5 | 6 | --- 7 | 8 | # How to create a box with fixed Aspect Ratio in CSS? 9 | 10 | ## Question 11 | It is very common in responsive web apps to maintain fixed aspect ratio of an element to adapt to different window sizes. 12 | 13 | Actually there is more than 1 solution to this, what could you think of? 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/How-to-create-a-box-with-fixed-Aspect-Ratio-in-CSS) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/what-is-promise-how-to-resolve-a-bunch-of-promises-in-order.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | - Apple 6 | 7 | --- 8 | 9 | # What is Promise ? How to resolve a bunch of Promises in order? 10 | 11 | ## Question 12 | Seems like interviewer wants you to explain [Promise and Promise chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises). 13 | 14 | 15 | 16 | 17 | ## Source 18 | [Source From](https://bigfrontend.dev/question/What-is-Promise-How-to-resolve-a-bunch-of-Promises-in-order) 19 | 20 | -------------------------------------------------------------------------------- /docs/question/which-environment-is-best-to-you-to-work.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Behavioral 5 | 6 | --- 7 | 8 | # Which environment is best to you to work 9 | 10 | ## Question 11 | Talk about the **company culture** you've longed for. Let interviewers believe that you **are a team player**, **likes the challenge**. 12 | 13 | Better investigate the **core values of the company** and align your answer to it. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/Which-environment-is-best-to-you-to-work) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/array-length.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Array length 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | class MyArray extends Array { 16 | get length() { 17 | return 3 18 | } 19 | } 20 | 21 | const arr1 = new MyArray(10) 22 | console.log(arr1.length) 23 | 24 | const arr2 = new Array(10) 25 | console.log(arr2.length) 26 | ``` 27 | 28 | 29 | 30 | ## Source 31 | [Source From](https://bigfrontend.dev/quiz/array-length) 32 | 33 | -------------------------------------------------------------------------------- /docs/question/design-youtube-com.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - SystemDesign 4 | - ProductDesign 5 | 6 | --- 7 | 8 | # design youtube.com 9 | 10 | ## Question 11 | As an example for web apps of videos, please design youtube.com. 12 | 13 | Performance and UX are critical here, maybe you can talk about 14 | 15 | 1. video storage, multiple resolutions 16 | 2. thumbnail & preview 17 | 3. preload 18 | 4. multiple views 19 | 5. picture in picture 20 | 6. ... 21 | 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/design/design-youtube-com) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/generator-way.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # two-way generator 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | function* gen() { 16 | yield 2 * (yield 100) 17 | } 18 | 19 | const generator = gen() 20 | console.log(generator.next().value) 21 | console.log(generator.next(1).value) 22 | console.log(generator.next(1).value) 23 | ``` 24 | 25 | 26 | 27 | ## Source 28 | [Source From](https://bigfrontend.dev/quiz/generator-2-way) 29 | 30 | -------------------------------------------------------------------------------- /docs/question/hoisting-iii.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Hoisting III 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | var a = 1 16 | 17 | function func() { 18 | a = 2 19 | console.log(a) 20 | var a 21 | } 22 | 23 | func() 24 | 25 | console.log(a) 26 | 27 | if (!('b' in window)) { 28 | var b = 1 29 | } 30 | 31 | console.log(b) 32 | ``` 33 | 34 | 35 | 36 | ## Source 37 | [Source From](https://bigfrontend.dev/quiz/Hoisting-III) 38 | 39 | -------------------------------------------------------------------------------- /docs/question/reference-type.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # reference type 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const obj = { 16 | msg: 'BFE', 17 | foo() { 18 | console.log(this.msg) 19 | }, 20 | bar() { 21 | console.log('dev') 22 | } 23 | } 24 | 25 | obj.foo(); 26 | (obj.foo)(); 27 | (obj.foo || obj.bar)(); 28 | ``` 29 | 30 | 31 | 32 | ## Source 33 | [Source From](https://bigfrontend.dev/quiz/reference-type) 34 | 35 | -------------------------------------------------------------------------------- /docs/question/string-raw.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # String.raw() 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(String.raw`BFE\n.${'dev'}`) 16 | console.log(String.raw({raw: 'BFE'}, 'd', 'e','v')); 17 | 18 | // when you enter your input in text box below 19 | // keep in mind it is treated as raw string and will be escaped 20 | ``` 21 | 22 | 23 | 24 | ## Source 25 | [Source From](https://bigfrontend.dev/quiz/String-raw) 26 | 27 | -------------------------------------------------------------------------------- /docs/question/fragment-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Coding 4 | - CSS 5 | 6 | --- 7 | 8 | # fragment style 9 | 10 | ## Question 11 | Suppose we have an `` tag which is streched to multiple lines, add borders to all its fragments. 12 | 13 | 1. color `#7aa4f0` with `1px` thickness 14 | 2. add `5px` padding horizontally for each line 15 | 16 | ```html 17 | 18 | BFE.dev is a website to practice Front-End development skills. 19 | 20 | ``` 21 | 22 | 23 | 24 | 25 | ## Source 26 | [Source From](https://bigfrontend.dev/css/fragment-style) 27 | 28 | -------------------------------------------------------------------------------- /docs/question/hoisting-ii.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Hoisting II 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | const func1 = () => console.log(1) 16 | 17 | func1() 18 | 19 | func2() 20 | 21 | function func2() { 22 | console.log(2) 23 | } 24 | 25 | 26 | func3() 27 | 28 | var func3 = function func4() { 29 | console.log(3) 30 | } 31 | ``` 32 | 33 | 34 | 35 | ## Source 36 | [Source From](https://bigfrontend.dev/quiz/Hoisting-II) 37 | 38 | -------------------------------------------------------------------------------- /docs/question/how-do-you-target-your-web-app-to-different-screen-sizes.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Architecture 5 | 6 | --- 7 | 8 | # How do you target your web app to different screen sizes? 9 | 10 | ## Question 11 | 1. First you need determine the target screen size, are we going to target them all? 12 | 2. Mobile first or Desktop first 13 | 3. Full responsiveness or Totally different design 14 | 4. ... 15 | 16 | 17 | 18 | 19 | ## Source 20 | [Source From](https://bigfrontend.dev/question/How-do-you-target-your-web-app-to-different-screen-sizes) 21 | 22 | -------------------------------------------------------------------------------- /docs/question/what-is-the-angle-between-the-hours-and-the-minutes-hands-at-15.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - Fun 5 | 6 | --- 7 | 8 | # what is the angle between the hours and the minutes hands at 3:15 9 | 10 | ## Question 11 | what is the angle between the hours and the minutes hands at 3:15? 12 | 13 | Well this is not about programming but more of a brain teaser. Please answer it as fast as you can. 14 | 15 | 16 | 17 | 18 | ## Source 19 | [Source From](https://bigfrontend.dev/question/what-is-the-angle-between-the-hours-and-the-minutes-hands-at-3-15) 20 | 21 | -------------------------------------------------------------------------------- /docs/question/design-a-carousel-widget.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - SystemDesign 4 | 5 | --- 6 | 7 | # Design a Carousel Widget 8 | 9 | ## Question 10 | Carousel component is everywhere, how can you implement one ? 11 | 12 | 1. implementation overall picture (JavaScript/HTML/CSS .etc) 13 | 2. interaction (mobile + desktop) 14 | 3. transition (CSS or JS) 15 | 4. loop, indicator .etc 16 | 5. modularization, component interface 17 | 6. a11y 18 | 7. lazyload 19 | 20 | 21 | 22 | 23 | ## Source 24 | [Source From](https://bigfrontend.dev/design/Design-a-Carousel-Widget) 25 | 26 | -------------------------------------------------------------------------------- /docs/question/equal-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Equal 9 | 10 | ## Question 11 | What does the code snippet to the right output by `console.log`? 12 | 13 | ## Snippet 14 | ```js 15 | console.log(0 == false) 16 | console.log('' == false) 17 | console.log([] == false) 18 | console.log(undefined == false) 19 | console.log(null == false) 20 | console.log('1' == true) 21 | console.log(1n == true) 22 | console.log(' 1 ' == true) 23 | ``` 24 | 25 | 26 | 27 | ## Source 28 | [Source From](https://bigfrontend.dev/quiz/Equal-1) 29 | 30 | -------------------------------------------------------------------------------- /docs/question/promise-executor.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Quiz 4 | - JavaScript 5 | - Promise 6 | 7 | --- 8 | 9 | # Promise executor 10 | 11 | ## Question 12 | What does the code snippet to the right output by `console.log`? 13 | 14 | ## Snippet 15 | ```js 16 | new Promise((resolve, reject) => { 17 | resolve(1) 18 | resolve(2) 19 | reject('error') 20 | }).then((value) => { 21 | console.log(value) 22 | }, (error) => { 23 | console.log('error') 24 | }) 25 | ``` 26 | 27 | 28 | 29 | ## Source 30 | [Source From](https://bigfrontend.dev/quiz/2-promise-executor) 31 | 32 | -------------------------------------------------------------------------------- /docs/question/explain-the-concept-of-promise-to-a-year-old.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # Explain the concept of Promise to a year-old 9 | 10 | ## Question 11 | A not-that-easy question. 12 | 13 | Suppose you you a 5-year-old, what do you like the most and try to bind some Promise concept on that. 14 | 15 | Do mention all the good stuff on Promise, like thenable, resolve/reject, error catching .etc 16 | 17 | 18 | 19 | 20 | ## Source 21 | [Source From](https://bigfrontend.dev/question/Explain-the-concept-of-Promise-to-a-5-year-old) 22 | 23 | -------------------------------------------------------------------------------- /docs/question/what-is-the-difference-between-modules-and-standard-scripts.md: -------------------------------------------------------------------------------- 1 | --- 2 | tag: 3 | - Question 4 | - JavaScript 5 | 6 | --- 7 | 8 | # What is the difference between modules and standard scripts? 9 | 10 | ## Question 11 | What is the difference between `