mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: format all files with Prettier

This commit is contained in:
Yangshun Tay 2022-09-07 08:16:59 +08:00
parent eb55e961f2
commit a2304c71b7
30 changed files with 25 additions and 1384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
.DS_Store
.vscode
node_modules

2
.prettierrc
View File

@ -1,6 +1,6 @@
{
"bracketSameLine": true,
"bracketSpacing": false,
"jsxBracketSameLine": true,
"printWidth": 80,
"proseWrap": "never",
"singleQuote": true,

68
contents/css-questions.md
View File

@ -29,8 +29,6 @@ I would write CSS rules with low specificity so that they can be easily overridd
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- **Resetting** - Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
@ -42,8 +40,6 @@ I would choose resetting when I have a very customized or unconventional site de
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### Describe `float`s and how they work.
Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike `position: absolute` elements, which are removed from the flow of the page.
@ -70,8 +66,6 @@ Alternatively, give `overflow: auto` or `overflow: hidden` property to the paren
- https://css-tricks.com/all-about-floats/
### Describe `z-index` and how stacking context is formed.
The `z-index` property in CSS controls the vertical stacking order of elements that overlap. `z-index` only affects elements that have a `position` value which is not `static`.
@ -90,8 +84,6 @@ _Note: What exactly qualifies an element to create a stacking context is listed
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
### Describe Block Formatting Context (BFC) and how it works.
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
@ -114,8 +106,6 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### What are the various clearing techniques and which is appropriate for what context?
- Empty `div` method - `<div style="clear:both;"></div>`.
@ -124,8 +114,6 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more
In large projects, I would write a utility `.clearfix` class and use them in places where I need it. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
### Explain CSS sprites, and how you would implement them on a page or site.
CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:
@ -143,8 +131,6 @@ CSS sprites combine multiple images into one single larger image. It is a common
- https://css-tricks.com/css-sprites/
### How would you approach fixing browser-specific styling issues?
- After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
@ -153,8 +139,6 @@ CSS sprites combine multiple images into one single larger image. It is a common
- Use Reset CSS or Normalize.css.
- If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.
### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
- Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
@ -164,8 +148,6 @@ CSS sprites combine multiple images into one single larger image. It is a common
- Feature detection using [Modernizr](https://modernizr.com/).
- Use CSS Feature queries [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
### What are the different ways to visually hide content (and make it available only for screen readers)?
These techniques are related to accessibility (a11y).
@ -184,22 +166,16 @@ Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioni
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
### Have you ever used a grid system, and if so, what do you prefer?
Before Flex became popular (around 2014), the `float`-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the `float` approach until Bootstrap 4 which switched to the `flex`-based approach. As of writing (2020), `flex` is the recommended approach for building grid systems and has [decent browser support](https://caniuse.com/#search=flex).
For the adventurous, they can look into [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), which uses the shiny new `grid` property; it is even better than `flex` for building grid layouts and will be the de facto way to do so in the future.
### Have you used or implemented media queries or mobile-specific layouts/CSS?
Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
### Are you familiar with styling SVG?
Yes, there are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.
@ -215,8 +191,7 @@ Basic coloring can be done by setting two attributes on the node: `fill` and `st
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
/>
stroke-opacity="0.8" />
```
The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overriden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. So, if you did something like `svg { fill: blue; }` it would override the purple fill we've defined.
@ -225,8 +200,6 @@ The above `fill="purple"` is an example of a _presentational attribute_. Interes
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
### Can you give an example of an @media property other than screen?
Yes, there are four types of @media properties (including _screen_):
@ -250,8 +223,6 @@ Here is an example of `print` media type's usage:
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
### What are some of the "gotchas" for writing efficient CSS?
Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
@ -265,8 +236,6 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
### What are the advantages/disadvantages of using CSS preprocessors?
**Advantages:**
@ -283,8 +252,6 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
- Requires tools for preprocessing. Re-compilation time can be slow.
- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/postcss/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
### Describe what you like and dislike about the CSS preprocessors you have used.
**Likes:**
@ -297,14 +264,10 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
- I use Sass via `node-sass`, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions.
- In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule.
### How would you implement a web design comp that uses non-standard fonts?
Use `@font-face` and define `font-family` for different `font-weight`s.
### Explain how a browser determines what elements match a CSS selector.
This part is related to the above about [writing efficient CSS](#what-are-some-of-the-gotchas-for-writing-efficient-css). Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
@ -315,8 +278,6 @@ For example with this selector `p span`, browsers firstly find all the `<span>`
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
### Describe pseudo-elements and discuss what they are used for.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (`:first-line`, `:first-letter`) or adding elements to the markup (combined with `content: ...`) without having to modify the markup (`:before`, `:after`).
@ -329,8 +290,6 @@ A CSS pseudo-element is a keyword added to a selector that lets you style a spec
- https://css-tricks.com/almanac/selectors/a/after-and-before/
### Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding `padding`, `border`, and `margin` areas.
@ -354,8 +313,6 @@ The box model has the following rules:
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
### What does `* { box-sizing: border-box; }` do? What are its advantages?
- By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for.
@ -368,8 +325,6 @@ The box model has the following rules:
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
### What is the CSS `display` property and can you give a few examples of its use?
- `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`.
@ -385,8 +340,6 @@ The box model has the following rules:
| `table-cell` | Behaves like the `<td>` element |
| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position` |
### What's the difference between `inline` and `inline-block`?
I shall throw in a comparison with `block` for good measure.
@ -400,8 +353,6 @@ I shall throw in a comparison with `block` for good measure.
| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
### What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?
A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`.
@ -416,16 +367,12 @@ A positioned element is an element whose computed `position` property is either
- https://developer.mozilla.org/en/docs/Web/CSS/position
### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
- **Bootstrap** - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.
- **Semantic UI** - Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
- **Bulma** - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.
### Have you played around with the new CSS Flexbox or Grid specs?
Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
@ -438,8 +385,6 @@ Grid is by far the most intuitive approach for creating grid-based layouts (it b
- https://philipwalton.github.io/solved-by-flexbox/
### Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
Note that these two 2 approaches are not exclusive.
@ -479,8 +424,6 @@ A mobile-first strategy has 2 main advantages:
- It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.
- It forces to write cleaner code in respect to responsive CSS rules.
### How is responsive design different from adaptive design?
Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
@ -500,8 +443,6 @@ Both have these methods have some issues that need to be weighed:
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
### Have you ever worked with retina graphics? If so, when and what techniques did you use?
_Retina_ is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices _retina_ defacto displays.
@ -524,8 +465,7 @@ To overcome this problem, we can use responsive images, as specified in HTML5. I
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w
"
/>
" />
</div>
```
@ -539,8 +479,6 @@ For icons, I would also opt to use SVGs and icon fonts where possible, as they r
- http://scottjehl.github.io/picturefill/
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
`translate()` is a value of CSS `transform`. Changing `transform` or `opacity` does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
@ -551,8 +489,6 @@ When using `translate()`, the element still occupies its original space (sort of
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
### Other Answers
- https://neal.codes/blog/front-end-interview-css-questions

22
contents/html-questions.md
View File

@ -25,8 +25,6 @@ The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
### How do you serve a page with content in multiple languages?
I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
@ -42,8 +40,6 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo
- https://www.w3.org/International/getting-started/language
- https://support.google.com/webmasters/answer/189077
### What kind of things must you be wary of when designing or developing for multilingual sites?
- Use `lang` attribute in your HTML.
@ -60,8 +56,6 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### What are `data-` attributes good for?
Before JavaScript frameworks became popular, front end developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
@ -75,8 +69,6 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- Semantics - Allowing you to describe more precisely what your content is.
@ -92,8 +84,6 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
@ -114,8 +104,6 @@ _Note: If the user decides to clear browsing data via whatever mechanism provide
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
- `<script>` - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
@ -130,8 +118,6 @@ Note: The `async` and `defer` attributes are ignored for scripts that have no `s
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
**Placing `<link>`s in the `<head>`**
@ -152,8 +138,6 @@ Keep in mind that putting scripts just before the closing `</body>` tag will cre
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
### What is progressive rendering?
Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
@ -171,8 +155,6 @@ Examples of such techniques:
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
You would use the `srcset` attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` tells the browser to display the small, medium or large `.jpg` graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
@ -192,14 +174,10 @@ If the resolution is retina (2x), the browser will use the closest resolution ab
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### Have you used different HTML templating languages before?
Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, and EJS just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
### Other Answers
- https://neal.codes/blog/front-end-interview-questions-html/

110
contents/javascript-questions.md
View File

@ -21,8 +21,6 @@ Event delegation is a technique involving adding event listeners to a parent ele
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### Explain how `this` works in JavaScript
There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. I have read many explanations on `this` online, and I found [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation to be the clearest. The following rules are applied:
@ -45,8 +43,6 @@ ES6 allows you to use [arrow functions](http://2ality.com/2017/12/alternate-this
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### Explain how prototypal inheritance works
This is an extremely common JavaScript interview question. All JavaScript objects have a `__proto__` property with the exception of objects created with `Object.create(null)`, that is a reference to another object, which is called the object's "prototype". When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `__proto__`, and the `__proto__`'s `__proto__` and so on, until it finds the property defined on one of the `__proto__`s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects).
@ -128,8 +124,6 @@ child.constructor.name;
- https://crockford.com/javascript/prototypal.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
### What do you think of AMD vs CommonJS?
Both are ways to implement a module system, which was not natively present in JavaScript until ES2015 came along. CommonJS is synchronous while AMD (Asynchronous Module Definition) is obviously asynchronous. CommonJS is designed with server-side development in mind while AMD, with its support for asynchronous loading of modules, is more intended for browsers.
@ -143,8 +137,6 @@ I'm glad that with ES2015 modules, that has support for both synchronous and asy
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?
IIFE stands for Immediately Invoked Function Expressions. The JavaScript parser reads `function foo(){ }();` as `function foo(){ }` and `();`, where the former is a _function declaration_ and the latter (a pair of parentheses) is an attempt at calling a function but there is no name specified, hence it throws `Uncaught SyntaxError: Unexpected token )`.
@ -166,8 +158,6 @@ console.log(foo); // undefined
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
**Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block.
@ -213,8 +203,6 @@ As a personal habit, I never leave my variables undeclared or unassigned. I will
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### What is a closure, and how/why would you use one?
A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned.
@ -229,8 +217,6 @@ A closure is the combination of a function and the lexical environment within wh
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
To understand the differences between the two, let's look at what each function does.
@ -270,8 +256,6 @@ The main difference between `.forEach` and `.map()` is that `.map()` returns a n
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### What's a typical use case for anonymous functions?
They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.
@ -305,8 +289,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### How do you organize your code? (module pattern, classical inheritance?)
In the past, I've used Backbone for my models which encourages a more OOP approach, creating Backbone models and attaching methods to them.
@ -315,8 +297,6 @@ The module pattern is still great, but these days, I use React/Redux which utili
I avoid using classical inheritance where possible. When and if I do, I stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
### What's the difference between host objects and native objects?
Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
@ -327,8 +307,6 @@ Host objects are provided by the runtime environment (browser or Node), such as
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
This question is pretty vague. My best guess at its intention is that it is asking about constructors in JavaScript. Technically speaking, `function Person(){}` is just a normal function declaration. The convention is to use PascalCase for functions that are intended to be used as constructors.
@ -355,8 +333,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
### What's the difference between `.call` and `.apply`?
Both `.call` and `.apply` are used to invoke functions and the first parameter will be used as the value of `this` within the function. However, `.call` takes in comma-separated arguments as the next arguments while `.apply` takes in an array of arguments as the next argument. An easy way to remember this is C for `call` and comma-separated and A for `apply` and an array of arguments.
@ -370,8 +346,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### Explain `Function.prototype.bind`.
Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
@ -384,8 +358,6 @@ In my experience, it is most useful for binding the value of `this` in methods o
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
### When would you use `document.write()`?
`document.write()` writes a string of text to a document stream opened by `document.open()`. When `document.write()` is executed after the page has loaded, it will call `document.open` which clears the whole document (`<head>` and `<body>` removed!) and replaces the contents with the given parameter value. Hence it is usually considered dangerous and prone to misuse.
@ -397,8 +369,6 @@ There are some answers online that explain `document.write()` is being used in a
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### What's the difference between feature detection, feature inference, and using the UA string?
**Feature Detection**
@ -437,8 +407,6 @@ This is a browser-reported string that allows the network protocol peers to iden
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
### Explain Ajax in as much detail as possible.
Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.
@ -450,8 +418,6 @@ The `XMLHttpRequest` API is frequently used for the asynchronous communication o
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
### What are the advantages and disadvantages of using Ajax?
**Advantages**
@ -469,8 +435,6 @@ The `XMLHttpRequest` API is frequently used for the asynchronous communication o
- Webpages using Ajax to fetch data will likely have to combine the fetched remote data with client-side templates to update the DOM. For this to happen, JavaScript will have to be parsed and executed on the browser, and low-end mobile devices might struggle with this.
- Basically most of the disadvantages of an SPA.
### Explain how JSONP works (and how it's not really Ajax).
JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers because Ajax requests from the current page to a cross-origin domain is not allowed.
@ -503,8 +467,6 @@ These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) i
- https://stackoverflow.com/a/2067584/1751946
### Have you ever used JavaScript templating? If so, what libraries have you used?
Yes. Handlebars, Underscore, Lodash, AngularJS, and JSX. I disliked templating in AngularJS because it made heavy use of strings in the directives and typos would go uncaught. JSX is my new favorite as it is closer to JavaScript and there is barely any syntax to learn. Nowadays, you can even use ES2015 template string literals as a quick way for creating templates without relying on third-party code.
@ -515,8 +477,6 @@ const template = `<div>My name is: ${name}</div>`;
However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries.
### Explain "hoisting".
Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the `var` keyword will have their declaration "moved" up to the top of their module/function-level scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is.
@ -564,14 +524,10 @@ let y = 'local';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_hoisting
- https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689
### Describe event bubbling.
When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the `document`. Event bubbling is the mechanism behind event delegation.
### What's the difference between an "attribute" and a "property"?
Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: `<input type="text" value="Hello">`.
@ -593,8 +549,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### Why is extending built-in JavaScript objects not a good idea?
Extending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same.
@ -605,8 +559,6 @@ The only time you may want to extend a native object is when you want to create
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### Difference between document `load` event and document `DOMContentLoaded` event?
The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
@ -618,8 +570,6 @@ The `DOMContentLoaded` event is fired when the initial HTML document has been co
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
### What is the difference between `==` and `===`?
`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`. When using `==`, funky things can happen, such as:
@ -645,8 +595,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### Explain the same-origin policy with regards to JavaScript.
The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
@ -655,8 +603,6 @@ The same-origin policy prevents JavaScript from making requests across domain bo
- https://en.wikipedia.org/wiki/Same-origin_policy
### Make this work:
```js
@ -679,8 +625,6 @@ const duplicate = (arr) => [...arr, ...arr];
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### Why is it called a Ternary expression, what does the word "Ternary" indicate?
"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
@ -689,8 +633,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
### What is `"use strict";`? What are the advantages and disadvantages to using it?
'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.
@ -718,8 +660,6 @@ Overall, I think the benefits outweigh the disadvantages, and I never had to rel
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`.
Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
@ -738,14 +678,10 @@ I would not advise you to write the above during interviews though. Just stick w
- https://gist.github.com/jaysonrowe/1592432
### Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
### Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
@ -758,8 +694,6 @@ TODO.
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
### Explain what a single page app is and how to make one SEO-friendly.
The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me!
@ -787,8 +721,6 @@ The downsides:
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### What is the extent of your experience with Promises and/or their polyfills?
Possess working knowledge of it. A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
@ -799,8 +731,6 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### What are the pros and cons of using Promises instead of callbacks?
**Pros**
@ -824,8 +754,6 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
- https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
### What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript.
@ -852,8 +780,6 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### What tools and techniques do you use for debugging JavaScript code?
- React and Redux
@ -871,8 +797,6 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### What language constructions do you use for iterating over object properties and array items?
For objects:
@ -904,8 +828,6 @@ for (let [index, elem] of arr.entries()) {
- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
### Explain the difference between mutable and immutable objects.
Immutability is a core principle in functional programming, and has lots to offer to object-oriented programs as well. A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created.
@ -990,8 +912,6 @@ Freezing an object does not allow new properties to be added to an object and pr
- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
#### How can you achieve immutability in your own code?
One way to achieve immutability is to use libraries like [immutable.js](http://facebook.github.io/immutable-js/), [mori](https://github.com/swannodette/mori) or [immer](https://github.com/immerjs/immer).
@ -1017,16 +937,12 @@ const alienJohn = {...john, race: 'alien'}; // {race: "alien", name: "John"}
- https://www.sitepoint.com/immutability-javascript/
- https://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/
### Explain the difference between synchronous and asynchronous functions.
Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
Asynchronous functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
### What is event loop? What is the difference between call stack and task queue?
The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
@ -1037,8 +953,6 @@ If you haven't already checked out Philip Robert's [talk on the Event Loop](http
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`
The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as variables). For more explanation on hoisting, refer to the question above [on hoisting](#explain-hoisting). If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error.
@ -1065,8 +979,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
### What are the differences between variables created using `let`, `var` or `const`?
Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
@ -1147,8 +1059,6 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
### What are the differences between ES6 class and ES5 function constructors?
Let's first look at example of each:
@ -1200,14 +1110,10 @@ It's much more verbose to use inheritance in ES5 and the ES6 version is easier t
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
### Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
One obvious benefit of arrow functions is to simplify the syntax needed to create functions, without a need for the `function` keyword. The `this` within arrow functions is also bound to the enclosing scope which is different compared to regular functions where the `this` is determined by the object calling it. Lexically-scoped `this` is useful when invoking callbacks especially in React components.
### What advantage is there for using the arrow syntax for a method in a constructor?
The main advantage of using an arrow function as a method inside a constructor is that the value of `this` gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, `this` will always refer to that object. For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log` that name, one as a regular function and one as an arrow function:
@ -1255,8 +1161,6 @@ This can be particularly helpful in React class components. If you define a clas
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
### What is the definition of a higher-order function?
A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind` is one such example in JavaScript.
@ -1297,8 +1201,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### Can you give an example for destructuring an object or an array?
Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays and place them into distinct variables.
@ -1341,8 +1243,6 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
Template literals help make it simple to do string interpolation, or to include variables in a string. Before ES2015, it was common to do something like this:
@ -1408,8 +1308,6 @@ document.body.innerHTML = `
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
### Can you give an example of a curry function and why this syntax offers an advantage?
Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each accepts one parameter.
@ -1446,8 +1344,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### What are the benefits of using spread syntax and how is it different from rest syntax?
ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and RxJS projects.
@ -1492,8 +1388,6 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
### How can you share code between files?
This depends on the JavaScript environment.
@ -1504,8 +1398,6 @@ On the server (Node.js), the common way has been to use CommonJS. Each file is t
ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments.
###### References
- http://requirejs.org/docs/whyamd.html
@ -1520,8 +1412,6 @@ Static class members (properties/methods) are not tied to a specific instance of
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
### Other Answers
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

5
package.json Normal file
View File

@ -0,0 +1,5 @@
{
"devDependencies": {
"prettier": "^2.7.1"
}
}

22
website/i18n/de/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -26,8 +26,6 @@ Die DOCTYPE Spezifikation für den HTML5 Standard ist `<!DOCTYPE html>`.
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
### Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus?
Ich gehe davon aus, dass es sich um den häufigsten Fall handelt: Wie kann eine Seite mit Inhalten bedient werden, die in mehreren Sprachen verfügbar ist. Dabei soll der Inhalt innerhalb der Seite nur in einer konsistenten Sprache angezeigt werden.
@ -45,8 +43,6 @@ Im Backend enthält das HTML-Markup `i18n'-Platzhalter und Inhalte für die jewe
- https://www.w3.org/International/getting-started/language
- https://support.google.com/webmasters/answer/189077
### Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst?
- Setze im HTML das `lang` Attribut.
@ -63,8 +59,6 @@ Im Backend enthält das HTML-Markup `i18n'-Platzhalter und Inhalte für die jewe
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### Wofür sind `data-` Attribute nützlich?
Bevor JavaScript-Frameworks populär wurden, benutzten Front-End-Entwickler `data-` Attribute, um zusätzliche Daten innerhalb des DOM selbst zu speichern. Sie dienen zum Speichern benutzerdefinierter Daten, für die es keine passenderen Attribute oder Elemente gibt.
@ -78,8 +72,6 @@ Das Hinzufügen eines Hooks für _end to end_ Testframeworks wie Selenium und Ca
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5?
- Semantik - Ermöglicht, Inhalte genauer zu beschreiben.
@ -95,8 +87,6 @@ Das Hinzufügen eines Hooks für _end to end_ Testframeworks wie Selenium und Ca
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Beschreibe die Unterschiede zwischen `Cookies`, `sessionStorage` und `localStorage`.
Alle oben genannten Technologien sind Schlüsselspeichermechanismen auf der Client-Seite. Sie sind nur in der Lage, Werte als Strings zu speichern.
@ -117,8 +107,6 @@ _Hinweis: Löscht der Nutzer seine Browser-Daten s zu löschen, löscht dies auc
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Beschreibe die Unterschiedie zwischen `<script>`, `<script async>` und `<script defer>`.
- `<script>` - Das HTML-Parsing wird blockiert, das Skript wird geholt (gefetcht) und sofort ausgeführt, das HTML-Parsing wird nach Ausführung des Scripts fortgesetzt.
@ -133,8 +121,6 @@ Hinweis: Die Attribute `async` und `defer` werden für Skripte ignoriert, die ke
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### Warum ist es eine gute Idee, die `<link>`s zum CSS-Stylesheet inneralb der `<head></head>` Tags zu platzieren und die JS `<script>`s direkt vorm `</body>` einzubinden? Würdest du Ausnahmen machen?
**Platzieren von `<link>`s im `<head>`**
@ -155,8 +141,6 @@ Denke daran, dass das Einfügen von Scripten vor dem schließenden `</body>`-Tag
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
### Was ist progressives Rendern?
"Progressive rendering" (progressive Wiedergabe) bezeichnet Techniken zur Verbesserung der Leistung einer Webseite (insbesondere zur Verbesserung der wahrgenommenen Ladezeit), da Inhalte so schnell wie möglich dargestellt werden können.
@ -174,8 +158,6 @@ Beispiele für diese Technologie:
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### Warum würdest du ein `srcset` Attribute in ein image tag einsetzen? Erkläre wie der Browser bei der Auswertung des Inhalts dieses Attributs vorgeht.
Das`srcset`-Attribut wird verwendet, um Benutzern abhängig von der Anzeigebreite ihrer Geräte unterschiedliche Bilder zur Verfügung zu stellen. Die Bereitstellung von Bildern höherer Qualität für Geräte mit Retina-Display verbessert das Nutzererlebnis, während die Bereitstellung von Bildern niedrigerer Auflösung für Geräte des unteren Marktsegments die Leistung erhöht und das Datenvolumen verringert (da die Bereitstellung eines größeren Bildes keinen sichtbaren Unterschied aufweist). Zum Beispiel: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` weist den Browser an, die kleine, mittlere oder große `.jpg` Grafik abhängig von der Auflösung des Kunden anzuzeigen. Der erste Wert ist der Bildname und der zweite ist die Breite des Bildes in Pixeln. Für eine Gerätebreite von 320px werden die folgenden Berechnungen durchgeführt:
@ -195,14 +177,10 @@ Durch `srcset`s lassen sich Bilddateien Geräte- und Auflösungsspezifisch ausli
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### Hast du Erfahrungen mit unterschiedlichen HTML templating languages gemacht?
Ja, Pug (früher Jade), ERB, Slim, Handlebars, Jinja, Liquid und EJS, um nur einige zu nennen. Meiner Meinung nach sind sie mehr oder weniger gleich und bieten eine ähnliche Funktionalität: Inhalte zu "escapen" und die anzuzeigenden Daten zu Filter um beispielsweise ihre Darstellung zu manipulieren. Die meisten Template-Engines erlauben es, eigene Filter einzufügen, falls eine benutzerdefinierte Verarbeitung benötigt wird.
### Andere Antworten
- https://neal.codes/blog/front-end-interview-questions-html/

22
website/i18n/es/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -24,8 +24,6 @@ La declaración DOCTYPE para los estándares HTML5 es `<!DOCTYPE html>`.
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
### ¿Cómo desplegar una página con contenido en varios idiomas?
La pregunta es un poco vaga, supondré que se trata del caso más común, que es cómo desplegar una página con contenido disponible en varios idiomas, pero el contenido dentro de la página debe mostrarse solo en un idioma coherente.
@ -38,8 +36,6 @@ En el back-end, el HTML contendrá marcadores de posición `i18n` y contenido pa
- https://www.w3.org/International/getting-started/language
### ¿Qué debes tener en cuenta al diseñar o desarrollar sitios en múltiples lenguajes?
- Usar el atributo `lang` en tu HTML.
@ -55,8 +51,6 @@ En el back-end, el HTML contendrá marcadores de posición `i18n` y contenido pa
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### ¿Para qué sirve el atributo `data-`?
Antes de que los frameworks de JavaScript se hicieran populares, los desarrolladores front-end usaban atributos `data-` para almacenar datos adicionales dentro del DOM, sin otros hacks como atributos no estándar, propiedades adicionales en el DOM. Está destinado a almacenar datos personalizados privados para la página o aplicación, para los cuales no hay más atributos o elementos apropiados.
@ -70,8 +64,6 @@ Sin embargo, un uso perfectamente válido de los atributos de datos es agregar u
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### ¿Consideras HTML5 como una plataforma web abierta. Cuáles son los componentes básicos de HTML5?
- Semántica: Permite describir con mayor precisión cuál es tu contenido.
@ -87,8 +79,6 @@ Sin embargo, un uso perfectamente válido de los atributos de datos es agregar u
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Describe las diferenias entre `cookie`, `sessionStorage` y `localStorage`.
Las tecnologías mencionadas anteriormente son mecanismos de almacenamiento de llave-valor en el lado del cliente. Solo pueden almacenar valores como cadenas.
@ -109,8 +99,6 @@ _Nota: Si el usuario decide borrar los datos de navegación a través de cualqui
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Describe las diferencias entre `<script>`, `<script async>` y `<script defer>`.
- `<script>` - El análisis del HTML es bloqueado, el script es extraído y ejecutado inmediatamente, el análisis del HTML se reanuda luego de ejecutado el script.
@ -125,8 +113,6 @@ Nota: Los atributos `async` y `defer` son ignorados por scripts que no tienen el
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### ¿Por qué generalmente es buena idea colocar los `<link>` de CSS entre `<head></head>` y `<script>` de JS justo antes del `</body>`? ¿Conoces alguna excepción?
**Colocar los `<link>` en el `<head>`**
@ -145,8 +131,6 @@ Una excepción para el posicionamiento de los `<script>` en la parte inferior es
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
### ¿Qué es el renderizado progresivo?
Renderizado progresivo es el nombre dado a las técnicas utilizadas para mejorar el rendimiento de una página web (en particular, mejorar el tiempo de carga percibido) para representar el contenido y su visualización lo más rápido posible.
@ -164,8 +148,6 @@ Ejemplos:
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### ¿Por qué usaría el atributo `srcset` en una etiqueta de imagen? Explica el proceso que usa el navegador al evaluar el contenido de este atributo.
El atributo `srcset` debiese ser usado cuando se desee mostrar diferentes imágenes a los usuarios en función del ancho de visualización de su dispositivo; mostrar imágenes de mayor calidad a los dispositivos con pantalla retina mejora la experiencia del usuario, mientras que mostrar imágenes de menor resolución a dispositivos de gama baja aumenta el rendimiento y disminuir el desperdicio de datos (porque mostrar una imagen más grande no tendrá ninguna diferencia visible). Por ejemplo: `<img srcset="pequeño.jpg 500w, mediano.jpg 1000w, grande.jpg 2000w "src="..." alt="">` le dice al navegador que muestre el gráfico `.jpg` pequeño, mediano o grande dependiendo de la resolución del cliente. El primer valor es el nombre de la imagen y el segundo es el ancho de la imagen en píxeles. Para un ancho de dispositivo de 320px, se realizan los siguientes cálculos:
@ -185,14 +167,10 @@ Si la resolución es retina (2x), el navegador usará la resolución más cercan
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### ¿Has utilizado otros lenguajes de plantillas HTML anteriormente?
Sí, Pug (anteriormente Jade), ERB, Slim, Handlebars, Jinja, Liquid, por nombrar algunos. En mi opinión, son más o menos lo mismo y proporcionan una funcionalidad similar de escape de contenido y filtros útiles para manipular los datos que se mostrarán. La mayoría de los motores de plantillas también permiten inyectar tus propios filtros en caso de que se necesite un procesamiento personalizado antes de mostrarlos.
### Otras Respuestas
- https://neal.codes/blog/front-end-interview-questions-html/

6
website/i18n/es/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -114,7 +114,7 @@ c.constructor.name;
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
- https://crockford.com/javascript/prototypal.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
### Explique la diferencia cuando una variable es: `null`, `undefined` o `undeclared`. Como chequearia cada uno de estos estados?
@ -163,8 +163,6 @@ Como recomendación personal, nunca dejar las variables no declaradas o no asign
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### Que es una closure, y como/porque se utilizaria?
Una **closure** es la combinación de una función con el entorno lexico en el cual se declara dicha función. La palabra `lexico` hace referencia al hecho de que el contexto lexico referencia donde se declara una variable dentro del código para determinar que parte del código puede acceder a dicha variable. Una closure es una función que tiene acceso a las variables declaradas en el contexto externo aún cuando la función externa ya haya finalizado su ejecución.
@ -178,5 +176,3 @@ Una **closure** es la combinación de una función con el entorno lexico en el c
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36

62
website/i18n/jp/docusaurus-plugin-content-docs/current/css-questions.md
View File

@ -28,8 +28,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### "リセット" と "ノーマライズ" CSS の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？
- **リセット** - リセットとは、要素のすべてのデフォルトブラウザスタイルを削除することを意味します。例えば、`margin`、`padding`、`font-size` は全て同じ要素にリセットされます。一般的なタイポグラフィー要素のためにスタイリングを再宣言しなければなりません。
@ -41,8 +39,6 @@ import TOCInline from '@theme/TOCInline';
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### `float` とは何ですか？どのようにはたらきますか？
Float は CSS の位置決めプロパティです。フロート要素はページの流れの一部として残り、ページのフローから削除される `position: absolute` 要素とは異なり、他の要素（たとえば、フロート要素の周りを流れるテキスト）の配置に影響します。
@ -69,8 +65,6 @@ CSS の `clear` プロパティは、`left`/`right`/`both` フロート要素の
- https://css-tricks.com/all-about-floats/
### `z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。
CSS の `z-index` プロパティは、重なっている要素の垂直方向の積み重ね順序を制御します。`z-index` は `static` ではない `position` 値を持つ要素にのみ影響します。
@ -88,8 +82,6 @@ CSS の `z-index` プロパティは、重なっている要素の垂直方向
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context (英語)
- https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context (日本語)
### ブロック整形文脈（Block Formatting Context: BFC）とその仕組みを教えてください。
ブロック整形文脈（Block Formatting Context: BFC）は、ブロックボックスが配置された Web ページのビジュアル CSS レンダリングの一部です。フロート、絶対配置要素、`inline-blocks`、`table-cells`、`table-caption`、`visible` 以外の `overflow` を持つ要素（その値がビューポートに伝播された時を除く）書式設定コンテキストをブロックします。
@ -111,8 +103,6 @@ BFC が崩壊したときに隣接するブロックレベルボックス間の
- https://developer.mozilla.org/ja/docs/Web/CSS/Block_formatting_context (日本語)
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？
- 空の `div` メソッド - `<div style="clear:both;"></div>`
@ -121,8 +111,6 @@ BFC が崩壊したときに隣接するブロックレベルボックス間の
大規模なプロジェクトでは、ユーティリティ `.clearfix` クラスを作成し、必要な場所で使用します。子供が親よりも背が高く、それほど理想的でない場合、`overflow: hidden` は子供をクリップするかもしれません。
### CSS スプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。
CSS スプライトは、複数のイメージを 1 つの大きなイメージに結合します。これは一般的にアイコン用の技術です（Gmail が使用しています）。それを実装する方法：
@ -140,8 +128,6 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
- https://css-tricks.com/css-sprites/
### ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？
- 問題を特定して問題のブラウザを特定したら、その特定のブラウザが使用されているときにのみロードする別のスタイルシートを使用します。この手法では、サーバー側のレンダリングが必要です。
@ -149,8 +135,6 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
- ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。
- Reset CSS または Normalize.css を使用してください。
### 機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？
- グレースフル・デグラデーション（Graceful degradation） - 最新のブラウザー用のアプリケーションを構築し、古いブラウザーでは機能し続けることを保証する習慣。
@ -159,8 +143,6 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
- 自動ベンダー接頭辞挿入のための\*オートプレフィクサー。
- [Modernizr](https://modernizr.com/) を使った機能の検出
### コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。
これらの技術はアクセシビリティ（a11y）に関連しています。
@ -180,26 +162,18 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
- https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA (日本語)
- http://a11yproject.com/
### グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？
私は `float` ベースのグリッドシステムが好きです。なぜなら、既存の代替システム（フレックス、グリッド）の中でも最も多くのブラウザをサポートしているからです。ブートストラップで長年使用されており、動作することが証明されています。
### メディアクエリやモバイル固有のレイアウト/CSS を使用したり実装したことはありますか？
はい。一例は、ピル型ナビゲーションを、特定のブレークポイントを越えた固定底のタブ型ナビゲーションに変換することである。
### SVG のスタイリングについては詳しいですか？
いいえ...悲しいことに。
### `screen` 以外の @media プロパティの例を挙げられますか？
はい、@media プロパティには `screen` も含めて４つの種類があります。:
@ -219,8 +193,6 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
}
```
### 効率的な CSS を書くにために避けるべき "落とし穴" にはどんなものがありますか？
まず、ブラウザがセレクタを右端（キーセレクタ）から左に一致させることを理解してください。ブラウザはキーセレクタに従って DOM 内の要素をフィルタリングし、親要素を走査して一致を判定します。セレクターチェーンの長さが短いほど、ブラウザーはそのエレメントがセレクターと一致するかどうかを判別することができます。したがって、タグセレクタとユニバーサルセレクタであるキーセレクタは避けてください。それらは多数の要素にマッチし、ブラウザは親がマッチするかどうかを判断するために多くの作業をする必要があります。
@ -234,8 +206,6 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
### CSS プリプロセッサを使用するメリットとデメリットには何がありますか？
**メリット:**
@ -250,8 +220,6 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
- 前処理のためのツールが必要です。再コンパイル時間が遅くなることがあります。
### 使用したことのある CSS プリプロセッサについて好きなものと嫌いなものを教えてください。
**好きなもの:**
@ -264,14 +232,10 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
- C++ で書かれた LibSass のバインディングである `node-sass` を使って Sass を使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。
- Less では、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブ CSS キーワードと混同することがあります。
### 非標準フォントを使用する Web サイトを実装するにはどのようにしますか？
`font-face` を使って `font-weight` の `font-family` を定義してください。
### CSS セレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。
この部分は上記の効率的な CSS の記述に関するものです。ブラウザはセレクタを右端（キーセレクタ）から左に一致させます。ブラウザはキーセレクタに従って DOM 内の要素をフィルタリングし、親要素を走査して一致を判定します。セレクタチェーンの長さが短ければ短いほど、ブラウザがその要素がセレクタに一致するかどうかを判断することができます。
@ -282,8 +246,6 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
### 疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。
CSS 疑似要素はセレクタに追加されたキーワードで、選択した要素の特定の部分をスタイルすることができます。マークアップ(`:before`, `:after`)を変更しなくても、マークアップ(combined with `content: ...`)への要素の追加やデコレーション(`:first-line`, `:first-letter`) に使用できます。
@ -296,8 +258,6 @@ CSS 疑似要素はセレクタに追加されたキーワードで、選択し
- https://css-tricks.com/almanac/selectors/a/after-and-before/
### ボックスモデルがなんであるかのあなたの理解と、異なるボックスモデルでレイアウトをレンダリングするために CSS でブラウザに指示する方法を説明してください。
CSS ボックスモデルは、ドキュメントツリー内の要素に対して生成され、視覚的な書式設定モデルに従ってレイアウトされた長方形のボックスを記述します。各ボックスは、内容領域（例えば、テキスト、画像など）および任意の周囲の「パディング」、「ボーダー」および「マージン」領域を有する。
@ -321,8 +281,6 @@ CSS ボックスモデルは、次の計算を行います。
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
### `* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？
- デフォルトでは、要素には `box-sizing: content-box` が適用され、コンテンツサイズのみが考慮されます。
@ -330,16 +288,12 @@ CSS ボックスモデルは、次の計算を行います。
- 要素の `height` は、コンテンツの `height` + 垂直 `padding` + 垂直 `border` 幅によって計算されます。
- 要素の `width` は、コンテンツの `width` + 水平 `padding` + 水平 `border` 幅によって計算されます。
### CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`
TODO
### `inline` と `inline-block` の違いは何ですか？
比較のために `block` も並べます。
@ -353,8 +307,6 @@ TODO
| マージンとパディング | 上下左右に指定できる。 | 上下左右に指定できる。 | 左右のみ指定可能。上下に指定をしてもレイアウトに影響はない。 `border` と `padding` が要素の周りに視覚的に現れていても、上下のスペースは `line-height` によって決まる。 |
| フロート | - | - | 上下の `margins` と `paddings` を設定できる `block` 要素のようになる。 |
### `position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？
配置された要素は、計算された `position` プロパティが `relative`、`absolute`、`fixed` または `sticky` のいずれかである要素です。
@ -370,16 +322,12 @@ TODO
- https://developer.mozilla.org/en/docs/Web/CSS/position (英語)
- https://developer.mozilla.org/ja/docs/Web/CSS/position (日本語)
### ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？
- **BootStrap** - 緩やかなリリースサイクル。BootStrap4 は、ほぼ 2 年間アルファになっています。広く使用されているように、スピナーボタンコンポーネントを追加します。
- **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。
- **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。
### CSS の Flexbox や Grid の仕様で遊んだことはありますか？
はい。Flexbox は主に 1 次元レイアウトを意味し、Grid は 2 次元レイアウトを意味します。
@ -392,14 +340,10 @@ Flexbox は、コンテナ内の要素の垂直方向のセンタリング、ス
- https://philipwalton.github.io/solved-by-flexbox/
### ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？
TODO
### レスポンシブデザインはアダプティブデザインと何が違いますか？
応答性と適応性の両方の設計では、さまざまなデバイス間でユーザーエクスペリエンスを最適化し、異なるビューポートサイズ、解像度、使用状況、制御メカニズムなどを調整します。
@ -415,8 +359,6 @@ TODO
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
### Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？
私は Retina ディスプレイを扱うために高解像度のグラフィックス（ディスプレイサイズの 2 倍）を使用する傾向があります。より良い方法は `@media only screen and (min-device-pixel-ratio: 2) { ... }` のようなメディアクエリを使用し、`background-image` を変更することです。
@ -429,8 +371,6 @@ TODO
- https://www.sitepoint.com/css-techniques-for-retina-displays/
### `position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。
`translate()` は CSS の `transform` の値です。`transform` や `opacity` を変更しても、ブラウザのリフローや再描画は行われず、コンポジションのみがトリガされます。`transform` はブラウザに要素の GPU 層を作成させますが、絶対配置プロパティを変更すると CPU を使用します。したがって、`translate()` はより効率的であり、より滑らかなアニメーションのためのペイント時間を短縮します。
@ -441,8 +381,6 @@ TODO
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
### 他の方の回答集
- https://neal.codes/blog/front-end-interview-css-questions

22
website/i18n/jp/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -20,8 +20,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
### どのようにすれば複数の言語のコンテンツを含むページを提供できますか？
この質問は少し曖昧なので、最も一般的なケース、つまり複数の言語で利用可能なコンテンツを提供する方法を聞かれているとします。1 つのページ内のコンテンツは 1 つの言語でのみ表示されるべきです。
@ -34,8 +32,6 @@ HTTP リクエストがサーバに対して行われるとき、リクエスト
- https://www.w3.org/International/getting-started/language
### 多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？
- HTML に `lang` 属性を使います。
@ -51,8 +47,6 @@ HTTP リクエストがサーバに対して行われるとき、リクエスト
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### `data-` 属性は何のために使われるのですか？
JavaScript フレームワークが普及する前に、フロントエンドの開発者は、非標準属性、DOM の余分なプロパティなどの他のハッキングなしで、DOM 内に余分なデータを格納する `data-` 属性を使用しました。カスタムデータをページやアプリケーションに格納する際に、適切な属性や要素が存在しない時のために利用するものです。
@ -64,8 +58,6 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか？
- セマンティクス - コンテンツを正確に記述できるようにします。
@ -82,8 +74,6 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (英語)
- https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 (日本語)
### `cookie`、`sessionStorage`、`localStorage` の違いを教えてください。
これらの技術は、クライアント側の key-value ストレージメカニズムです。彼らは文字列として値を格納することだけができます。
@ -103,8 +93,6 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies (日本語)
- http://tutorial.techaltum.com/local-and-session-storage.html
### `<script>`、`<script async>`、`<script defer>` の違いを教えてください。
- `<script>` - HTML 解析がブロックされ、スクリプトがフェッチされてすぐに実行され、スクリプトの実行後に HTML 解析が再開されます。
@ -119,8 +107,6 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### なぜ一般的に、CSS の `<link>` を `<head></head>` の間に、JS の `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？こうすべきでない例外を知っていますか？
**`<link>` を `<head>` に置く**
@ -137,8 +123,6 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- https://developer.yahoo.com/performance/rules.html#css_top
### プログレッシブレンダリングとは何ですか？
プログレッシブレンダリングは、ウェブページのパフォーマンスを向上させる（特に、感覚的な読み込み時間を改善する）ために使用される技術に与えられた名前であり、できるだけ早く表示するためにコンテンツをレンダリングします。
@ -156,8 +140,6 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### img タグに `srcset` 属性を使用する理由は？この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。
デバイスの表示幅に応じて異なるイメージをユーザーに提供したい場合は、`srcset` 属性を使用します。Retina ディスプレイに高品質のイメージを表示することでユーザー体験を向上させ、ローエンドのデバイスに低解像度のイメージを提供することでパフォーマンスとデータ量削減に貢献します（ローエンドでは高品質イメージを提供しても綺麗になりません）。例：`<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` はブラウザに小、中、大のいずれかを表示するように指示します。クライアントの解像度に応じて「jpg」グラフィックを表示します。最初の値はイメージ名で、2 番目の値はイメージのピクセル単位の幅です。320px のデバイス幅の場合、次の計算が行われます。
@ -177,14 +159,10 @@ JavaScript フレームワークが普及する前に、フロントエンドの
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### HTML テンプレート言語をいくつか使用した経験はありますか？
はい。例をあげると、Pug (旧 Jade)、ERB、Slim、Handlebars、Jinja、Liquid を使ったことがあります。私の意見では、これらはおおよそ同じようなものであり、表示されるデータを操作するためのエスケープするコンテンツや役立つフィルタと同様の機能を提供します。ほとんどのテンプレートエンジンでは、表示前にカスタム処理が必要なイベントに独自のフィルタを挿入することもできます。
### 他の方の回答集
- https://neal.codes/blog/front-end-interview-questions-html/

108
website/i18n/jp/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -20,8 +20,6 @@ import TOCInline from '@theme/TOCInline';
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### JavaScript の `this` はどう機能するものなのか説明してください。
`this` の簡単な説明はありません。それは JavaScript の最も混乱しやすい概念の 1 つです。手のひら波の説明は、`this` の値が関数の呼び出し方法に依存するということです。私はこのオンラインで多くの説明を読んでおり、[Arnav Aggrawal](https://medium.com/@arnav_aggarwal)の説明が最も明白であることがわかりました。次のルールが適用されます。
@ -40,8 +38,6 @@ import TOCInline from '@theme/TOCInline';
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### プロトタイプ継承はどのように機能するか説明してください。
これは非常によくある JavaScript インタビューの質問です。すべての JavaScript オブジェクトには、別のオブジェクトへの参照である `__proto__` プロパティがあります。プロパティがオブジェクト上でアクセスされ、プロパティがそのオブジェクトに見つからない場合、JavaScript エンジンはオブジェクトの `__proto__` と `__proto__` の `__proto__` などを調べて、プロパティが定義されるまで探します。プロトタイプチェーンの最後に到達するまで、この動作は古典的な継承をシミュレートしますが、実際は継承よりも委譲されています （[delegation than inheritance](https://davidwalsh.name/javascript-objects)）。
@ -51,8 +47,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
### AMD と CommonJS は何が違いますか？
どちらも、ES2015 が登場するまで JavaScript にネイティブに存在しなかったモジュールシステムを実装する方法です。CommonJS は同期ですが、AMD（Asynchronous Module Definition）は明らかに非同期です。CommonJS はサーバー側の開発を念頭に置いて設計されていますが、AMD はモジュールの非同期ロードをサポートしているため、ブラウザ向けのものです。
@ -66,8 +60,6 @@ import TOCInline from '@theme/TOCInline';
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### なぜ次のコードは IIFE として機能しないのでしょうか？:`function foo(){ }();` IIFE として機能させるには何を変える必要がありますか？
IIFE は、Immediately Invoked Function Expressions の略です。JavaScript のパーサーは、`function foo(){ }();` を `function foo(){ }` と `();` として読み込みます。前者は関数宣言で、後者（括弧のペア）は試行です 関数を呼び出すときに名前が指定されていないので、`Uncaught SyntaxError: Unexpected token )` をスローします）。
@ -78,8 +70,6 @@ IIFE は、Immediately Invoked Function Expressions の略です。JavaScript
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
### 変数が `null`、`undefined`、未定義だったときの違いはなんでしょう？どのようにして、これらの状態を調べますか？
**宣言されていない** 変数は、以前に `var`、`let` または `const` を使って作成されていない識別子に値を代入すると作成されます。宣言されていない変数は、現在のスコープの外部でグローバルに定義されます。strict モードでは、宣言されていない変数に代入しようとすると、`ReferenceError` がスローされます。宣言されていない変数は、グローバル変数がどのように悪いかと同じように悪いです。すべてのコストでそれらを避けてください！それらをチェックするには、その使用法を `try`/`catch` ブロックで囲みます。
@ -125,8 +115,6 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined (日本語)
### クロージャとはなんですか？また、なぜこれを使うのでしょうか？どのように使うのでしょうか？
クロージャは、関数とその関数が宣言されているレキシカル環境の組み合わせです。単語 "字句"は、語彙スコープがソースコード内で変数が宣言されている場所を使用して、その変数がどこで使用可能かを判断するという事実を指します。クロージャは、外側の関数が返った後でも、外側（囲む）関数の変数 - スコープチェーンにアクセスできる関数です。
@ -141,8 +129,6 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### `.forEach` と `.map()` の違いを説明できますか？これらをどのように使い分けますか？
両者の違いを理解するために、各機能が何をしているかを見てみましょう。
@ -182,8 +168,6 @@ const doubled = a.map((num) => {
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### 無名関数の典型的な使い方を教えてください。
IIFE では、ローカルスコープ内でコードをカプセル化して、その中で宣言された変数がグローバルスコープに漏れないようにすることができます。
@ -217,8 +201,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### どのようなことを意識してコードを組み立てていますか？ (モジュールパターン, classical inheritance？)
以前は、バックボーンモデルを作成し、そのモデルにメソッドを追加することで、OOP のアプローチを奨励するモデルに Backbone を使用しました。
@ -227,8 +209,6 @@ console.log(double); // [2, 4, 6]
私は可能な限り古典的な継承を避けます。私がそうすると、[これらの規則](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)に固執します。
### host objects と native objects は何が違いますか？
ネイティブオブジェクトは、`String`、`Math`、`RegExp`、`Object`、`Function` など、ECMAScript 仕様で定義された JavaScript 言語の一部であるオブジェクトです。
@ -239,8 +219,6 @@ console.log(double); // [2, 4, 6]
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### 次のコードの違いはなんですか？: `function Person(){}` 後、`var person = Person()` と `var person = new Person()`
この質問はかなり曖昧です。JavaScript のコンストラクタについて質問しているのが私の考えです。技術的に言えば、`function Person(){}` は通常の関数宣言にすぎません。コンベンションでは、コンストラクタとして使用するための関数に対して PascalCase を使用しています。
@ -268,8 +246,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new (日本語)
### `.call` と `.apply` の違いはなんですか？
`.call` と `.apply` は関数を呼び出すために使われ、最初のパラメータは関数内の `this` の値として使われます。しかし、`.call` は次の引数としてコンマ区切りの引数をとり、`.apply` は次の引数として引数の配列をとります。これを覚えやすい簡単な方法は、`call` ではカンマで区切り、`apply` とカンマで区切られた引数と引数の配列です。
@ -283,8 +259,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### `Function.prototype.bind` について説明してください。
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) から word-for-word を取り出しました：
@ -298,8 +272,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind (日本語)
### `document.write()` はいつ使いますか？
`document.write()` は `document.open()` によってオープンされた文書ストリームに文字列を書き込みます。ページがロードされた後 `document.write()` が実行されると、`document.open` が呼び出され、ドキュメント全体が消去されます（`<head>` と `<body>`）文字列に与えられたパラメータ値。したがって、通常は危険であり、誤用されやすいと考えられています。
@ -311,8 +283,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### feature detection, feature inference, and using the UA string の違いはなんですか？
**Feature Detection**
@ -353,8 +323,6 @@ if (document.getElementsByTagName) {
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent (英語)
- https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent (日本語)
### Ajax をできるだけ詳しく説明してください。
Ajax（非同期 JavaScript と XML）は、クライアント側で多くの Web テクノロジを使用して非同期 Web アプリケーションを作成する一連の Web 開発手法です。Ajax を使用すると、Web アプリケーションは、既存のページの表示や動作を妨げずに、バックグラウンドで非同期的にサーバーにデータを送信し、サーバーから取得することができます。Ajax は、データ交換レイヤーをプレゼンテーション・レイヤーから切り離すことにより、Web ページ、さらには Web アプリケーションに対して、ページ全体を再ロードせずにコンテンツを動的に変更できるようにします。実際には、現代の実装では、XML を JSON に置き換えるのが一般的です。これは、JavaScript 固有のメリットがあるからです。
@ -367,8 +335,6 @@ Ajax（非同期 JavaScript と XML）は、クライアント側で多くの We
- https://developer.mozilla.org/en-US/docs/AJAX (英語)
- https://developer.mozilla.org/ja/docs/AJAX (日本語)
### Ajax を利用する利点と欠点はなんですか？
**利点**
@ -385,8 +351,6 @@ Ajax（非同期 JavaScript と XML）は、クライアント側で多くの We
- 一部の Webcrawler は JavaScript を実行しないため、JavaScript によって読み込まれたコンテンツは表示されません。
- SPA の基本的な欠点。
### JSONP がどのように機能するか（またそれが Ajax とはどこが違うのか）を説明してください。
JSONP（パディング付き JSON）は、現在のページからクロスオリジンドメインへの Ajax リクエストが許可されていないため、Web ブラウザでクロスドメインポリシーをバイパスするためによく使用されるメソッドです。
@ -419,8 +383,6 @@ JSONP は安全ではなく、セキュリティ上の問題もあります。JS
- https://stackoverflow.com/a/2067584/1751946
### JavaScript templating を使ったことがありますか？ もしあれば、どのライブラリを使ったことがありますか？
はい。Handlebars、Underscore、Lodash、AngularJS、JSX。私は AngularJS でテンプレートを嫌っていました。ディレクティブで文字列を大量に使用したり、タイプミスが検出されなかったからです。JSX は JavaScript に近いため、学ぶための構文はほとんどありませんので、私の新しいお気に入りです。今日、サードパーティのコードに頼らずにテンプレートを作成するための素早い方法として、ES2015 のテンプレート文字列リテラルを使用することもできます。
@ -431,8 +393,6 @@ const template = `<div>My name is: ${name}</div>`;
ただし、上記のアプローチでは、テンプレートライブラリとは異なり、コンテンツがエスケープされない可能性があるため、潜在的な XSS に注意してください。
### "巻き上げ"について説明してください。
巻き上げは、コード内の変数宣言の動作を説明するために使用される用語です。`var` キーワードで宣言または初期化された変数の宣言は、現在のスコープの先頭まで "巻き上げ"されます。しかし、宣言だけが吊り上げられ、譲渡（存在する場合）がその場所にとどまります。いくつかの例をあげて説明しましょう。
@ -469,14 +429,10 @@ var bar = function () {
console.log(bar); // [Function: bar]
```
### event bubbling について教えてください。
DOM エレメントでイベントがトリガーされると、リスナーが接続されている場合にイベントを処理しようとすると、そのイベントは親に浮上(bubble up)され、同じことが起こります。この泡立ちは、要素の先祖を `document` までずっと上げています。イベントの浮上(bubble up)は、イベントの委任の背後にあるメカニズムです。
### "attribute" と "property" の違いを説明してください。
属性は HTML マークアップで定義されますが、プロパティは DOM で定義されます。違いを説明するために、HTML にこのテキストフィールドがあるとします：`<input type="text" value="Hello">`
@ -498,8 +454,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか？
ビルトイン/ネイティブの JavaScript オブジェクトを拡張することは、その `prototype` にプロパティ/関数を追加することを意味します。これは最初は良いアイデアのように思えるかもしれませんが、実際には危険です。あなたのコードが同じ `contains` メソッドを追加することによって `Array.prototype` を拡張し、実装がお互いを上書きし、これらの 2 つのメソッドの動作が同じでない場合、あなたのコードが壊れてしまういくつかのライブラリを使っているとしましょう。
@ -510,8 +464,6 @@ console.log(input.value); // Hello World!
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### document `load` event と document `DOMContentLoaded` event の違いは？
`DOMContentLoaded` イベントは、スタイルシート、イメージ、サブフレームの読み込みを待つことなく、最初の HTML ドキュメントが完全に読み込まれ、解析されたときに発生します。
@ -525,8 +477,6 @@ console.log(input.value); // Hello World!
- https://developer.mozilla.org/en-US/docs/Web/Events/load (英語)
- https://developer.mozilla.org/en-US/docs/Web/Events/load (日本語)
### `==` と `===` の違いはなんですか？
`==` は抽象的な等価演算子であり、`===` は厳密な等価演算子です。`==` 演算子は、必要な型変換を行った後、等しいかどうかを比較します。`===` 演算子は型変換を行いません。したがって、2 つの値が同じ型でない場合、`===` は単に `false` を返します。`==` を使用すると、次のような厄介なことが起こる可能性があります:
@ -552,8 +502,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### JavaScript の同一オリジンポリシーについて説明してください。
同じ起点ポリシーは、JavaScript がドメインの境界を越えて要求を作成するのを防ぎます。原点は、URI スキーム、ホスト名、およびポート番号の組み合わせとして定義されます。このポリシーは、あるページの悪意のあるスクリプトが、そのページのドキュメントオブジェクトモデルを介して別の Web ページの機密データにアクセスすることを防止します。
@ -562,8 +510,6 @@ console.log(a == undefined); // true
- https://en.wikipedia.org/wiki/Same-origin_policy
### 以下のコードを動くようにしてください:
```js
@ -578,8 +524,6 @@ function duplicate(arr) {
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### それが　 Ternary expression と呼ばれるのはなぜですか？ "Ternary" はどういう意味で使われているのでしょうか？
"Ternary" は 3 つを示し、3 つの式は 3 つのオペランド、テスト条件、"then" 式および "else" 式を受け入れます。三項式は JavaScript に固有のものではなく、なぜこのリスト内にあるのかわかりません。
@ -589,8 +533,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (英語)
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (日本語)
### `"use strict";` とはなんですか？これを使う利点と欠点を教えてください。
'use strict' は、スクリプトまたは個々の関数全体に厳密なモードを有効にするために使用されるステートメントです。厳密モードは、JavaScript の制限された変形にオプトインする方法です。
@ -618,8 +560,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### **"fizz"** を`3`の倍数で、**"buzz"** を`5`の倍数で、**"fizzbuzz"** を`3`と`5`の倍数で出力する`100`まで反復する for ループを作成してください。
[Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724) による FizzBuzz のこのバージョンを確認してください。
@ -638,14 +578,10 @@ for (let i = 1; i <= 100; i++) {
- https://gist.github.com/jaysonrowe/1592432
### Web サイトのグローバルスコープをそのままの状態を保ち、決して触らないことが、一般的に良いとされているのはなぜですか？
すべてのスクリプトはグローバルスコープにアクセスできます。誰もが独自の変数を定義するためにグローバル名前空間を使用している場合、衝突が発生します。モジュールパターン（IIFE）を使用して、変数をローカル名前空間内にカプセル化します。
### なぜあなたは `load` イベントのようなものを使うのですか？このイベントには欠点がありますか？あなたは何か選択肢を知っていますか、なぜそれらを使うのですか？
`load` イベントは、ドキュメント読み込みプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトが DOM 内にあり、すべてのイメージ、スクリプト、リンク、およびサブフレームの読み込みが完了しています。
@ -659,8 +595,6 @@ TODO.
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (英語)
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (日本語)
### シングルページアプリが何であるか、そして SEO に優しいアプリを作る方法を説明してください。
以下は素晴らしい [Grab Front End Guide](https://github.com/grab/front-end-guide) から取ったもので、偶然にも私によって書かれています！
@ -688,8 +622,6 @@ TODO.
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### プロミスおよび/またはそのポリフィルの経験はどの程度ですか？
それの働く知識を持っています。約束は、将来的に単一の値を生成するオブジェクトです。解決された値または解決されなかった理由（ネットワークエラーなど）です。約束は、実現可能、拒否、保留の 3 つの状態のうちの 1 つにある可能性があります。プロミスユーザーは、完了した値や却下理由を処理するコールバックを添付することができます。
@ -700,8 +632,6 @@ TODO.
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### コールバックの代わりにプロミスを使用することの長所と短所は何ですか？
**長所**
@ -715,8 +645,6 @@ TODO.
- やや複雑なコード（議論の余地がある）。
- ES2015 がサポートされていない古いブラウザでは、使用するためにポリフィルをロードする必要があります。
### JavaScript にコンパイルしてくれる言語で JavaScript を書く利点と欠点をいくつか教えてください。
JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureScript、PureScript、TypeScript などがあります。
@ -743,8 +671,6 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？
- React and Redux
@ -760,8 +686,6 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### オブジェクトのプロパティや、配列の要素をイテレートする際にどの構文を使いますか？
オブジェクトの場合：
@ -777,8 +701,6 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
ほとんどの場合、私は `.forEach` メソッドを好むでしょうが、本当にあなたがしようとしているものに依存します。`for` ループは、より柔軟性を持たせます。たとえば、`break` を使ってループを早期に終了するか、ループごとにイテレータを複数回インクリメントします。
### mutable と immutable オブジェクトの違いを説明してください
- JavaScript の不変オブジェクトの例は何ですか？
@ -787,16 +709,12 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
TODO
### synchronous と asynchronous functions の違いを説明してください。
同期関数はブロッキングし、非同期関数はブロッキングしません。同期関数では、前のステートメントが終わってから次のステートメントが実行されます。この場合、プログラムはステートメントの記載されている順どおりに正確に評価され、もしあるステートメントで時間がかかるとプログラムの実行は一時停止します。
非同期関数は、通常コールバックをパラメータとして受け取り、非同期関数が呼ばれた後、直ちに次の行を実行します。コールバックは、非同期処理が完了し呼び出しスタックが空の場合にのみ呼び出されます。Web サーバーからのデータのロードやデータベースのクエリなどとても重い処理は非同期で実行すべきで、そうすることで、メインスレッドは長い処理が完了するまでブロッキングすることなく(ブラウザの場合、UI がフリーズします)、他の処理を継続して実行出来ます。
### event loop とはなんですか？call stack や task queue との違いはなんですか？
イベントループは、コールスタックを監視し、タスクキューで実行する作業があるかどうかをチェックするシングルスレッドループです。コールスタックが空で、タスクキューにコールバック関数がある場合、関数はデキューされ、実行されるコールスタックにプッシュされます。
@ -808,8 +726,6 @@ TODO
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
### `function foo() {}` と `var foo = function() {}` をした場合の `foo` の使い方の違いを説明してください。
前者は関数宣言であり、後者は関数式です。主な相違点は、関数宣言は本体が巻き上げしているが、関数式の本体は（変数と同じ巻き上げの動作をしていない）ことである。巻き上げの詳細については、巻き上げのの質問を参照してください。関数式が定義される前に呼び出すと、`Uncaught TypeError：XXX is not function` エラーが出ます。
@ -837,8 +753,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function (日本語)
### `let` と `var` と `const` で宣言した変数の違いはなんですか？
`var` キーワードを使って宣言された変数は、それらが作成された関数、または関数の外で作成された場合はグローバルオブジェクトにスコープされます。`let` と `const` は _block scoped_ です。つまり、最も近い中括弧（関数、if-else ブロック、または for ループ）内でのみアクセス可能です。
@ -922,8 +836,6 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const (日本語)
### ES6 のクラス定義と、ES5 のコンストラクタ関数との違いには何がありますか？
まずはそれぞれの例を見てみましょう。
@ -976,14 +888,10 @@ ES5 で継承を使う方が冗長になりますし、ES6 版の方がわかり
- https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Inheritance (日本語)
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
### アロー構文の使い方を例示してください。この構文と他の方法による定義とは何が違いますか？
アロー関数の明白な利点の 1 つは、関数を作成するのに必要な構文を単純化し、`function` キーワードを必要としないことです。これは、通常の関数では `this` がそれを呼び出すオブジェクトによって決定されますが、これとは異なります。レキシカルスコープされた `this` は、とくに React コンポーネントでコールバックを呼び出すときに便利です。
### コンストラクタにおいて、メソッドをアロー構文で定義する方法の利点はなんですか？
コンストラクタ内のメソッドとしてアロー関数を使用する主な利点は、`this` の値が関数の作成時に設定され、それ以降は変更できないことです。
@ -1036,8 +944,6 @@ sayNameFromWindow2(); // John
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions (日本語)
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
### 高階関数とはなんですか？
高次関数とは、1 つまたは複数の関数を引数としてとり、いくつかのデータを操作するために使用する関数および/または結果として関数を返す関数のことです。高次関数は、繰り返し実行される操作を抽象化することを意図しています。これの古典的な例は配列と関数を引数として取る `map` です。`map` はこの関数を使って配列内の各項目を変換し、変換されたデータで新しい配列を返します。JavaScript の他のよく使われている例は `forEach`、`filter`、`reduce` です。高次関数は、配列を操作するだけでなく、別の関数から関数を返す多くのユースケースがあるためです。`Array.prototype.bind` は JavaScript のそのような例です。
@ -1078,8 +984,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### オブジェクトと配列について、「分割代入」の例を教えてください。
分割代入は、オブジェクトまたは配列の値を抽出して別の変数に配置する簡潔で便利な方法を可能にする ES6 で使用可能な式です。
@ -1123,8 +1027,6 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### ES6 のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが、例を示すことはできますか？
テンプレートリテラルは、文字列の補間や、文字列に変数を含めることを簡単にするのに役立ちます。ES2015 以前は、このようなことをするのが一般的でした。
@ -1191,8 +1093,6 @@ document.body.innerHTML = `
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals (日本語)
### カリー化の例を説明してください。またカリー化がもたらす利点はどこにあるのでしょうか？
カリングとは、複数のパラメータを持つ関数を複数の関数に分割し、直列に呼び出すと必要なすべてのパラメータを 1 つずつ累積するパターンです。このテクニックは、機能スタイルで書かれたコードを読みやすく、作成するのに便利です。カレイド関数を 1 つの関数として開始し、それぞれが 1 つのパラメータを取る一連の関数に分割する必要があることに注意することが重要です。
@ -1229,8 +1129,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### spread syntax を利用する利点はなんですか？また、rest syntax とは何が違っていますか？
ES6 の普及構文は、`Object.create`、`slice`、またはライブラリ関数に頼らずに配列やオブジェクトのコピーを簡単に作成できるので、機能的なパラダイムでコーディングするときに非常に便利です。この言語機能は、Redux および RxJS プロジェクトで頻繁に使用されます。
@ -1278,8 +1176,6 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
### ファイル間でコードを共有するにはどうすれば良いですか？
これは JavaScript の環境に依存します。
@ -1296,8 +1192,6 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
- https://nodejs.org/docs/latest/api/modules.html
- http://2ality.com/2014/09/es6-modules-final.html
### 静的クラスメンバーはどんな場面で使いますか？
静的クラスメンバー（プロパティ/メソッド）は、クラスの特定のインスタンスに結びついておらず、それを参照しているインスタンスに関係なく同じ値を持ちます。静的プロパティは通常は構成変数であり、静的メソッドは通常、インスタンスの状態に依存しない純粋なユーティリティ関数です。
@ -1306,8 +1200,6 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
### 他の方の回答集
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

68
website/i18n/kr/docusaurus-plugin-content-docs/current/css-questions.md
View File

@ -28,8 +28,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### `Resetting`과 `Normalizing` CSS의 차이점은 무엇인가요? 당신은 무엇을 선택할 것이며, 그 이유는 무엇인가요?
- **Resetting** - Resetting은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예: `margin`, `padding`, `font-size`는 같은 값으로 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 재 선언해야합니다.
@ -42,8 +40,6 @@ import TOCInline from '@theme/TOCInline';
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### `float`가 어떻게 작동하는지 설명하세요.
Float는 CSS 위치 지정 속성입니다. Float된 요소는 페이지의 흐름의 일부가 되며, 페이지의 흐름에서 제거되는 `position: absolute` 요소와 달리 다른 요소(예: 플로팅 요소 주위로 흐르는 텍스트)의 위치에 영향을 줍니다.
@ -70,8 +66,6 @@ CSS `clear` 속성은 float 요소에 `left`/`right`/`both`에 위치하도록
- https://css-tricks.com/all-about-floats/
### `z-index`와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명하세요.
CSS의 `z-index`속성은 겹치는 요소의 쌓임 순서를 제어합니다. `z-index`는 `position`에 `static`이 아닌 값을 갖는 요소에만 영향을 줍니다.
@ -88,8 +82,6 @@ CSS의 `z-index`속성은 겹치는 요소의 쌓임 순서를 제어합니다.
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
### BFC(Block Formatting Context)와 그 작동 방식을 설명하세요.
BFC(Block Formatting Context)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. float, absolute로 배치된 요소, `inline-blocks`, `table-cells`, `table-caption` 그리고 `visible`(그 값이 viewport에 전파되었을 때는 제외)이 아닌 `overflow`가 있는 요소들이 새로운 Block Formatting Context를 만듭니다.
@ -110,8 +102,6 @@ BFC collapse 시에 인접한 블록 레벨 박스 사이의 수직 마진. [col
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### clear 하는 방법에는 어떤 것이 있으며, 각각 어떤 상황에 적합한가요?
- 빈 `div` 방법 - `<div style="clear:both;"></div>`
@ -120,8 +110,6 @@ BFC collapse 시에 인접한 블록 레벨 박스 사이의 수직 마진. [col
대규모의 프로젝트에서는 유용하게 `.clearfix` 클래스를 만들어 필요한 곳에서 사용합니다. 자식이 부모보다 크기가 큰 경우 `overflow: hidden`은 자식을 모두 보여줄 수 없습니다.
### CSS 스프라이트는 무엇인가요? 그리고 당신이 페이지나 사이트에 구현하는 방법도 설명해 주세요.
CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합니다. 일반적으로 아이콘에 사용되는 기술(Gmail에서 사용)입니다. 구현 방법:
@ -139,8 +127,6 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
- https://css-tricks.com/css-sprites/
### 브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?
- 문제와 그 문제를 일으키는 브라우저를 식별한 후, 해당 브라우저가 사용 중일 때만 로드되는 별도의 스타일 시트를 사용합니다. 하지만 이 방식을 사용하려면 서버사이드 렌더링이 필요합니다.
@ -148,8 +134,6 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
- `autoprefixer`를 사용하여 벤더 프리픽스를 코드에 자동으로 추가합니다.
- Reset CSS 또는 Normalize.css를 사용합니다.
### 기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요?
- 우아한 퇴보 - 최신 브라우저를 위한 어플리케이션을 구축하는 동시에 그것이 구형 브라우저에서도 계속 작동하도록 하는 구축 방법.
@ -159,8 +143,6 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
- [Modernizr](https://modernizr.com/)를 사용하여 기능 감지.
- CSS Feature 쿼리 [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) 사용.
### 콘텐츠를 시각적으로 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는) 다양한 방법은 무엇인가요?
이러한 기술은 Accessibility(a11y)에 관련이 있습니다.
@ -179,20 +161,14 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
### 그리드 시스템을 사용해본적 있나요? 만약 그렇다면, 당신은 어떤 것을 선호하나요?
저는는 `float` 기반 그리드 시스템을 좋아합니다. 왜냐하면, 여전히 기존 대체할만한 시스템(flex, grid) 중에서도 가장 많은 브라우저를 지원하기 때문입니다. 이것은 `Bootstrap`에서 수 년동안 사용되었으며, 효과가 있다는 것이 입증되었습니다.
### 미디어 쿼리나 모바일만을 위한 layouts/CSS를 사용하거나 구현해본적 있나요?
네. 한가지 예를 들면, 여러 줄 형식의 네비게이션을 특정 breakpoint를 지나면 `fixed-bottom tab` 형태로 변환하였습니다.
### SVG 스타일링에 익숙하신가요?
네, 객체의 속성을 지정하는 방법을 포함해 inline CSS, CSS section 삽입, 외부 CSS file처럼 shape의 색상을 정하는 여러 방법이 있습니다. 웹에서 볼 수 있는 대부분의 SVG는 inline CSS를 사용하지만, 각각 장단점이 있습니다.
@ -208,16 +184,13 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
/>
stroke-opacity="0.8" />
```
###### 참고자료
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
### screen이 아닌 @media 속성의 예를 들어줄 수 있나요?
네, @media 속성은 _screen_ 을 포함하여 4가지 타입이 있습니다.
@ -241,8 +214,6 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
### 효율적인 CSS를 작성하는데 있어서 어려움은 무엇인가요?
먼저, 브라우저는 선택자가 맨 오른쪽(key 선택자)부터 왼쪽으로 일치하는지 확인합니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 해당 부모요소가 일치하는지 식별합니다. 선택자 체인의 길이가 짧을수록 브라우저는 해당 요소가 선택자와 일치하는지 여부를 빠르게 판별할 수 있습니다. 따라서 태그 선택자와 보편적인 선택자 사용을 피해야 합니다. 이들은 많은 요소가 매치되기 때문에 부모가 일치하는지 여부를 판단하기 위해 브라우저가 많은 작업을 해야합니다.
@ -256,8 +227,6 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
### CSS 전처리기를 사용하면 어떤 장단점이 있나요?
**장점:**
@ -272,8 +241,6 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
- 전처리기를 위한 도구가 필요합니다. 다시 컴파일하는 시간이 느릴 수도 있습니다.
### 사용했던 CSS 전처리기에 대해 좋았던 점과 싫었던 점을 설명해주세요.
**좋은 점:**
@ -286,14 +253,10 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
- 저는 C++로 작성된 LibSass 바인딩인 `node-sass`를 통해 Sass를 사용합니다. 노드 버전을 바꿀 때 자주 다시 컴파일해야 했습니다.
- Less에서는 변수 이름의 접두어가 `@`이며, `@media`, `@import`, `@font-face` 규칙과 같은 고유 CSS 키워드와 혼동될 수 있습니다.
### 비표준 글꼴을 사용하는 웹 디자인 컴포넌트를 어떻게 구현하나요?
`font-face`를 사용하고 `font-weight`가 다른 경우 `font-family`를 정의합니다.
### 브라우저가 CSS 선택자에 일치하는 요소를 어떻게 결정하는지 설명하세요.
이는 위의 효율적인 CSS 작성과 관련있습니다. 브라우저는 선택자를 오른쪽(선택자)에서부터 왼쪽으로 일치시킵니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 부모요소를 검사하여 일치를 판정합니다. 선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 일치하는지 여부를 더 빠르게 판단할 수 있습니다.
@ -304,8 +267,6 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
### Pseudo-elements에 대해 설명하고 이 요소가 무엇을 위해 사용되는지 설명하세요.
CSS Pseudo-element는 선택자에 추가되는 키워드로, 선택한 요소의 특정 부분을 스타일링 할 수 있습니다. 마크업을 수정하지 않고(`:before`, `:after`) 텍스트 데코레이션을 위해 사용하거나(`:first-line`, `:first-letter`) 마크업에 요소를 추가할 수 있습니다.(`content: ...`와 결합)
@ -318,8 +279,6 @@ CSS Pseudo-element는 선택자에 추가되는 키워드로, 선택한 요소
- <https://css-tricks.com/almanac/selectors/a/after-and-before/>
### 박스 모델에 대한 당신의 이해와 CSS에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하세요.
CSS 박스 모델은 문서 트리의 요소에 대해 생성되고 시각적 포매팅 모델에 따라 배치된 사각형 상자를 나타냅니다. 각 박스에는 content 영역(예: 텍스트, 이미지 등)과 `padding`, `border`, `margin` 영역을 선택적으로 사용할 수 있습니다.
@ -343,8 +302,6 @@ CSS 박스 모델은 다음을 계산합니다.
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
### `* { box-sizing: border-box; }`는 무엇을 하나요? 장점은 무엇인가요?
- 기본적으로, 요소들에 `box-sizing: content-box`가 적용되면, 내용의 크기만 고려됩니다.
@ -357,16 +314,12 @@ CSS 박스 모델은 다음을 계산합니다.
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
### CSS의 `display` 속성은 무엇이며 사용법에 대한 몇 가지 예를 들 수 있나요?
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
TODO
### `inline` 과 `inline-block` 의 차이점은 무엇인가요?
좋은 비교를 위해 `block` 과도 비교해 볼 것입니다.
@ -380,8 +333,6 @@ TODO
| margin 과 padding | 모든 방향에서 가능. | 모든 방향에서 가능. | 수평방향만 가능. 세로방향을 지정하면, 레이아웃에 영향을 주지 않습니다. `border`와 `padding`이 콘텐츠 주위에 시각적으로 나타나는 경우에도, 수직영역은 `line-height`에 의존합니다. |
| Float | - | - | 수직 margin과 padding을 설정할 수 있는 `block` 요소와 같아집니다. |
### `relative`, `fixed`, `absolute`, `static` 요소의 차이점은 무엇인가요?
위치가 정해진 요소는 계산된 `position` 속성이 `relative`, `absolute`, `fixed`, `sticky` 중 하나인 요소입니다.
@ -396,16 +347,12 @@ TODO
- https://developer.mozilla.org/en/docs/Web/CSS/position
### 로컬이나 프로덕션 환경에서 사용했던 CSS 프레임워크는 무엇인가요? 어떻게 그들을 바꾸거나 개선할 수 있을까요?
- **Bootstrap** - 느린 배포 주기. 부트스트랩 4는 거의 2년 동안 알파버전 상태였습니다. 널리 사용되는 Spinner 버튼 컴포넌트를 추가합니다.
- **Semantic UI** - 소스 코드 구조는 테마 커스터마이징을 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 벤더 라이브러리 내의 하드 코딩된 설정 경로. 부트스트랩과 달리 변수 오버라이드에 대해 잘 설계되지 않았습니다.
- **Bulma** - 많은 의미없고 불필요한 클래스와 마크업을 필요로 합니다. 이전 버전과 호환되지 않습니다. 버전을 업그레이드하면 미묘한 방식으로 앱이 손상됩니다.
### 새로운 CSS Flexbox나 Grid 스펙을 사용해본 적이 있나요?
네. Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다.
@ -418,8 +365,6 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
- https://philipwalton.github.io/solved-by-flexbox/
### 반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하세요.
이 두가지 접근법은 배타적이지 않습니다.
@ -459,8 +404,6 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
- 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를 받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
- 반응형 CSS 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.
### 반응형 디자인은 적응형 디자인과 어떻게 다른가요?
반응형과 적응형 디자인은 모두 서로 다른 뷰포트 사이즈, 해상도, 사용 컨텍스트, 제어 메커니즘 등을 조정하여 다양한 장치에서 사용자 경험을 최적화하려고 시도합니다.
@ -475,8 +418,6 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
### 레티나 그래픽으로 작업 해본 적이 있나요? 그렇다면, 언제, 어떤 기술을 사용하였나요?
_레티나_ 는 픽셀 비율이 1보다 큰 고해상도 화면을 나타내는 마케팅 용어 일뿐입니다. 중요하게 알아야할 것은 픽셀 비율을 사용하면 이러한 디스플레이가 동일한 크기의 요소를 표시하기 위해 더 저해상도의 화면으로 표현한다는 것입니다. 요즘에는 모든 모바일 디바이스를 _레티나_ 디스플레이로 간주합니다.
@ -499,8 +440,7 @@ _레티나_ 는 픽셀 비율이 1보다 큰 고해상도 화면을 나타내는
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w
"
/>
" />
</div>
```
@ -514,8 +454,6 @@ HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무
- http://scottjehl.github.io/picturefill/
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
### `absolute` 포지셔닝 대신 `translate()`를 사용하는 이유가 무엇인가요? 또는 그 반대의 경우에 대해서는 어떻게 생각하시나요?, 그 이유는 무엇인가요?
`translate()`은 CSS `transform`의 값입니다. `transform`이나 `opacity`를 변경해도 브라우저의 reflow나 repaint가 다시 발생하지 않고 컴포지션만 실행되는 반면, 절대 위치를 변경하면 `reflow`가 발생합니다. `transform`을 사용하면 브라우저에서 이 요소를 위한 GPU 레이어가 생성되지만, 절대 위치 속성을 변경하는 것은 CPU를 사용합니다. 그러므로 `translate()`가 더 효율적이며, 매끄러운 애니메이션을 위한 페인트 시간이 짧아집니다.
@ -526,8 +464,6 @@ HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
### 다른 답변들
- https://neal.codes/blog/front-end-interview-css-questions

22
website/i18n/kr/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -24,8 +24,6 @@ HTML5 표준에 대한 DOCTYPE 선언은 `<!DOCTYPE html>`입니다.
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
### 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?
이 질문은 다소 모호합니다. 여러 언어로 제공되는 내용의 페이지를 제공하는 방법에 대한, 가장 일반적인 경우에 대해 묻고 있다고 가정합니다. 하지만 페이지 내의 내용은 하나의 일관된 언어로만 표시되어야합니다.
@ -38,8 +36,6 @@ HTTP 요청을 서버에 보내면, 대개 요청하는 유저 에이전트가 `
- https://www.w3.org/International/getting-started/language
### 다국어 사이트를 디자인하거나 개발할 때 주의해야할 사항은 무엇인가요?
- HTML에 `lang` 속성을 사용합니다.
@ -55,8 +51,6 @@ HTTP 요청을 서버에 보내면, 대개 요청하는 유저 에이전트가 `
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### `data-`속성은 무엇에 좋은가요?
JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는 비표준 속성, DOM 추가 프로퍼티 등의 조작없이, DOM 자체에 추가적인 데이터를 저장하기 위해 `data-`속성을 사용했었습니다. 이는 적절한 속성이나 요소가 없는 페이지나 애플리케이션에 사용자정의 데이터를 비공개로 저장하기 위한 것입니다.
@ -68,8 +62,6 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가요?
- 의미 - 콘텐츠를 보다 더 정확하게 설명할 수 있도록 허용합니다.
@ -85,8 +77,6 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### `cookie`, `sessionStorage`, `localStorage` 사이의 차이점을 설명하세요.
위 세 가지 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 매커니즘입니다. 모두 문자열로만 값을 저장할 수 있습니다.
@ -105,8 +95,6 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### `<script>`, `<script async>`, `<script defer>` 사이의 차이점을 설명하세요.
- `<script>` - HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작됩니다.
@ -121,8 +109,6 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### 왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>` 태그를 `</body>` 직전에 위치시키는 것이 좋은 방법인가요? 다른 예외적인 상황을 알고있나요?
**`<head>` 안에 `<link>`를 넣는 이유**
@ -143,8 +129,6 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
### 프로그레시브 렌더링이 무엇인가요?
프로그레시브 렌더링이란 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술입니다. (특히, 인식되는 로딩 시간을 향상시킵니다)
@ -162,8 +146,6 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### 이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇인가요? 이 속성의 컨텐츠를 실행할 때 브라우저의 프로세스를 설명하세요.
기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 `srcset` 속성을 사용합니다 - 레티나 디스플레이를 통해 장치에 고품질 이미지를 제공하여 사용자 경험을 향상시키고, 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄입니다. (왜냐하면 더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문). 예를 들면: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">`는 클라이언트의 해상도에 따라 브라우저에 small, medium, large `.jpg` 그래픽을 표시하도록 지시합니다. 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다. 320px 너비의 경우, 다음과 같은 계산을 따릅니다
@ -185,14 +167,10 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### 다른 HTML 템플릿 언어를 사용해본 적이 있나요?
네, Pug (구 Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 있습니다. 필자의 견해로, 이들은 다소 차이는 없으며, 보여줄 데이터를 조작하는 데 유용한 필터들과 내용을 escape하는 유사한 기능을 제공합니다. 대부분의 템플릿 엔진을 사용하면 표시하기 전에 처리가 필요한 이벤트에 자신의 필터를 삽입할 수 있습니다.
### 다른 답변들
- https://neal.codes/blog/front-end-interview-questions-html/

108
website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -20,8 +20,6 @@ import TOCInline from '@theme/TOCInline';
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### `this`가 JavaScript에서 어떻게 작동하는지 설명하세요.
`this`는 간단하게 설명하기 어렵습니다. JavaScript에서 가장 혼란스러운 개념 중 하나입니다. 대략 설명하면 `this`의 값은 함수가 호출되는 방식에 따라 달라집니다. 온라인에 많은 설명을 읽었는데, [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)의 설명이 가장 명확했습니다. 다음 규칙과 같습니다.
@ -40,8 +38,6 @@ import TOCInline from '@theme/TOCInline';
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### 프로토타입 상속이 어떻게 작동하는지 설명하세요.
이는 매우 일반적인 JavaScript 인터뷰 질문입니다. 모든 JavaScript 객체는 다른 객체에 대한 참조인 `__proto__` 프로퍼티를 가지고 있습니다. 객체의 프로퍼티에 접근할 때, 해당 객체에 해당 프로퍼티가 없으면 JavaScript 엔진은 객체의 `__proto__`과 `__proto__`의 `__proto__`등을 보고 프로퍼티 정의가 있을 때까지 찾고, 만약 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 프로토타입 체인 중 하나에 있거나 프로토타입 체인의 끝에 도달할 때까지 찾습니다. 이 동작은 고전적인 상속을 흉내내지만, 실제로 [상속보다 위임](https://davidwalsh.name/javascript-objects)에 더 가깝습니다.
@ -51,8 +47,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
### AMD vs CommonJS에 대해 어떻게 생각하나요?
두 가지 모두 ES2015가 등장하기 전까지 JavaScript에 기본적으로 존재하지 않는 모듈 시스템을 구현하는 방법입니다. CommonJS는 동기식인 반면 AMD(Asynchronous Module Definition - 비동기식 모듈 정의)는 분명히 비동기식입니다. CommonJS는 서버사이드 개발을 염두에 두고 설계되었으며, AMD는 모듈의 비동기 로딩을 지원하므로 브라우저용으로 더 많이 사용됩니다.
@ -66,8 +60,6 @@ ES2015 모듈이 동기식 및 비동기식 로딩을 모두 지원하는 것이
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### 다음이 IIFE로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE로 만들기 위해서는 무엇을 바꿔야하나요?
IIFE는 즉시 함수 호출 표현식(Immediately Invoked Function Expressions)을 의미합니다. JavaScript parser는 `function foo(){ }();`을 `function foo(){ }`와 `();`로 읽습니다. 전자는 **함수 선언**이며 후자(한 쌍의 중괄호)는 함수를 호출하려고 시도했지만, 이름이 지정되지 않았기 때문에 `Uncaught SyntaxError : Unexpected token )`을 발생시킵니다.
@ -90,8 +82,6 @@ console.log(foo); // undefined
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
### `null`, `undefined`, `undeclared`의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요?
**Undeclared** 변수는 이전에 `var`, `let`, `const`를 사용하여 생성되지 않은 식별자에 값을 할당할 때 생성됩니다. `Undeclared` 변수는 현재 범위 외부에 전역으로 정의됩니다. strict 모드에서는 `Undeclared` 변수에 할당하려고 할 때, `ReferenceError`가 발생합니다. `Undeclared` 변수는 전역 변수처럼 좋지 않습니다. 이것들은 모두 사용을 피하세요! 이를 검사하려면, 사용할 때 `try`/`catch` 블록에 감싸세요.
@ -136,8 +126,6 @@ console.log(foo == undefined); // true. 옳지않습니다. 이렇게 사용하
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### 클로저는 무엇이며, 어떻게/왜 사용하나요?
클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. "렉시컬"은 렉시컬 범위 지정이 변수가 사용 가능한 위치를 결정하기 위해 소스 코드 내에서 변수가 선언된 위치를 사용한다는 사실을 나타냅니다. 클로저는 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다.
@ -152,8 +140,6 @@ console.log(foo == undefined); // true. 옳지않습니다. 이렇게 사용하
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### `.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있나요? 왜 둘 중 하나를 선택할 것인가요?
이 두 함수의 차이점을 이해하기 위해 각 함수가 무엇을 하는지 살펴보겠습니다.
@ -193,8 +179,6 @@ const doubled = a.map((num) => {
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### 익명 함수의 일반적인 사용 사례는 무엇인가요?
익명함수는 IIFE로 사용되어 지역 범위 내에서 일부 코드를 캡슐화하므로 선언된 변수가 전역 범위로 누출되지 않습니다.
@ -228,8 +212,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### 코드를 어떻게 구성하나요? (모듈 패턴, 고전적인 상속?)
과거에는 Backbone 모델을 만들고 그 모델에 메소드를 연결하는 등 OOP 접근 방식을 장려하는 모델에 Backbone 을 사용했습니다.
@ -238,8 +220,6 @@ console.log(double); // [2, 4, 6]
가능한 경우 고전적인 상속을 사용하지 않습니다. 저는 [이 규칙들](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)을 유지합니다.
### 호스트 객체와 내장 객체의 차이점은 무엇인가요?
내장 객체는 ECMAScript 사양에 정의된 JavaScript 언어의 일부인 객체입니다. (예: `String`, `Math`, `RegExp`, `Object`, `Function` 등)
@ -250,8 +230,6 @@ console.log(double); // [2, 4, 6]
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### `function Person(){}`, `var person = Person()`, `var person = new Person()`의 차이점은 무엇인가요?
이 질문은 굉장해 애매합니다. 질문의 의도에 대한 저의 최선의 추측은 JavaScript의 생성자에 대해 묻는 것입니다. 엄밀히 말하면, `function Person(){}`은 정상적인 함수 선언일 뿐입니다. 이 컨벤션은 함수생성자로 사용하기 위해 함수이름에 PascalCase를 사용합니다.
@ -278,8 +256,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
### `.call`과 `.apply`의 차이점은 무엇인가요?
`.call`과 `.apply`는 모두 함수를 호출하는데 사용되며, 첫 번째 매개변수는 함수 내에서 `this`의 값으로 사용됩니다. 그러나 `.call`은 쉼표로 구분된 인수를 두 번째 인수로 취하고 `.apply`는 인수의 배열을 두 번째 인수로 취합니다. `call`은 `C`: `Comma` 로 구분되며, `apply`는 인수 배열인 `A`: `arguments` 라고 기억하면 쉽습니다.
@ -293,8 +269,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### `Function.prototype.bind`에 대해 설명하세요.
[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)에서 인용:
@ -307,8 +281,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
### 언제 `document.write()`를 사용하나요?
`document.write()`는 `document.open()`에 의해 열린 문서 스트림에 텍스트 문자열을 씁니다. 페이지가 로드된 후에 `document.write()`가 실행되면 `document.open`을 호출하여 문서 전체를 지우고 (`<head>`와 `<body>`를 지웁니다!). 문자열로 주어진 매개 변수 값으로 대체합니다. 그러므로 일반적으로 위험하고 오용되기 쉽습니다.
@ -320,8 +292,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### Feature detection, Feature inference, UA String의 차이점은 무엇인가요?
**Feature Detection**
@ -360,8 +330,6 @@ if (document.getElementsByTagName) {
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
### Ajax에 대해 가능한 한 자세히 설명하세요.
Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써, 웹페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML대신 JSON을 사용합니다.
@ -373,8 +341,6 @@ Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
### Ajax를 사용하는 것의 장단점은 무엇인가요?
**장점**
@ -391,8 +357,6 @@ Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을
- 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.
- SPA의 대부분의 단점과 같습니다.
### JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.
JSONP(JSON with Padding)는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는 데 일반적으로 사용되는 방법입니다.
@ -425,8 +389,6 @@ JSONP는 안전하지 않을 수 있으며, 보안 관련 이슈가 있습니다
- https://stackoverflow.com/a/2067584/1751946
### JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?
네. Handlebars, Underscore, Lodash, AngularJS, JSX. 저는 AngularJS에서의 템플릿을 좋아하지 않았습니다. 지시자에서 문자열을 많이 사용하게 되며 오타가 감지되지 않기 때문입니다. JSX는 JavaScript에 가깝고 배워야 하는 새로운 문법이 거의 없기 때문에 더 좋아합니다. 요즘에는, Third-party 라이브러리에 의존하지 않고 템플릿을 만드는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수도 있습니다.
@ -437,8 +399,6 @@ const template = `<div>My name is: ${name}</div>`;
그러나 템플릿 라이브러리와 달리 컨텐츠가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야 합니다.
### `호이스팅`에 대해 설명하세요.
호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다. `var` 키워드로 선언되거나 초기화된 변수는 현재 스코프의 최상위까지 `옮겨`집니다. 이것을 호이스팅이라고 부릅니다. 그러나 선언문만 `호이스팅`되며 할당(있는 경우)은 그대로 있게 됩니다.
@ -477,14 +437,10 @@ var bar = function () {
console.log(bar); // [Function: bar]
```
### event bubbling에 대해 설명하세요.
DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음, 해당 이벤트가 부모에게 bubbling되고 부모에서 같은 이벤트가 발생합니다. 이 bubbling은 요소의 최상단 부모요소인 `document`까지 계속적으로 발생시킵니다. 이벤트 bubbling은 이벤트 위임의 작동 메커니즘입니다.
### "attribute"와 "property"의 차이점은 무엇인가요?
attribute는 HTML 마크업에 정의되지만 property는 DOM에 정의됩니다. 차이점을 설명하기 위해 HTML에 다음 텍스트 필드가 있다고 가정해 봅시다: `<input type="text" value="Hello">`.
@ -506,8 +462,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?
내장/네이티브 JavaScript 객체를 확장한다는 것은 prototype에 속성/함수를 추가한다는 것을 의미합니다. 이것은 처음에는 좋은 생각처럼 보일 수 있지만 실제로는 위험합니다. 여러분의 코드가 동일한 `contains` 메소드를 추가함으로써 `Array.prototype`을 확장하는 여러가지 라이브러리를 사용한다고 상상해보십시오. 이러한 구현은 메소드를 서로 덮어쓰게 되며, 이 두 메소드의 동작이 동일하지 않으면 코드가 망가질 것입니다.
@ -518,8 +472,6 @@ console.log(input.value); // Hello World!
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇인가요?
`DOMContentLoaded` 이벤트는 스타일시트, 이미지, 서브프레임 로딩을 기다리지 않고, 초기 HTML 문서가 완전히 로드되고 파싱되면 발생합니다.
@ -531,8 +483,6 @@ console.log(input.value); // Hello World!
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
### `==`와 `===`의 차이점은 무엇인가요?
`==`는 추상 동등 연산자이고 `===`는 완전 동등 연산자입니다. `==`연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한지 비교할 것입니다. `===`연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 `===`는 `false`를 반환합니다. `==`를 사용하면 다음과 같은 무서운 일이 발생할 수 있습니다.
@ -558,8 +508,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### JavaScript와 관련하여 same-origin 정책을 설명하세요.
same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다. origin은 URI 체계, 호스트 이름, 포트 번호의 조합으로 정의됩니다. 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 DOM을 통해 다른 웹 페이지의 중요한 데이터에 접근하는 것을 방지합니다.
@ -568,8 +516,6 @@ same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는
- https://en.wikipedia.org/wiki/Same-origin_policy
### 다음이 작동하게 만들어보세요.
```js
@ -584,8 +530,6 @@ function duplicate(arr) {
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### 왜 Ternary expression이라고 부르고, "Ternary"라는 단어는 무엇을 나타내나요?
"Ternary"는 "삼항"을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다. 삼항 표현식은 JavaScript에만 해당되는 것이 아니며 왜 이 목록에 있는지 잘 모르겠습니다.
@ -594,8 +538,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
### `"use strict";` 이 무엇인가요? 사용시 장단점이 무엇인가요?
'use strict'는 전체 스크립트나 개별 함수에 엄격 모드를 사용하는데 사용되는 명령문입니다. Strict 모드는 JavaScript 다양한 자바스크립트를 제한하는 방법입니다.
@ -623,8 +565,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### 100까지 증가하면서 `3`의 배수에는 `fizz`를 출력하고, `5`의 배수에는 `buzz`를 출력하고, `3`과 `5`의 배수에는 `fizzbuzz`를 출력하는 for loop를 만드세요.
[Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724)의 FizzBuzz를 확인해보세요.
@ -643,14 +583,10 @@ for (let i = 1; i <= 100; i++) {
- https://gist.github.com/jaysonrowe/1592432
### 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요?
모든 스크립트는 전역 스코프에 접근할 수 있으며, 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하세요.
### 왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?
`load` 이벤트는 문서로딩 프로세스가 끝날 때 발생됩니다. 이 시점에서 문서의 모든 객체가 DOM에 있고, 모든 이미지, 스크립트, 링크 및 하위 프레임로딩이 완료됩니다.
@ -663,8 +599,6 @@ TODO.
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
### single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.
아래는 [Grab Front End Guide](https://github.com/grab/front-end-guide)에서 가져온 것이며, 우연히도 제가 작성했습니다!
@ -692,8 +626,6 @@ TODO.
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### Promises와 그 Polyfill에 대한 당신의 경험은 어느 정도인가요?
Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성할 수 있는 객체입니다. promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다. promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 ​​있습니다.
@ -704,8 +636,6 @@ Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?
**장점**
@ -729,8 +659,6 @@ Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(
- https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
### JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?
JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript, PureScript, TypeScript가 있습니다.
@ -757,8 +685,6 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?
- React and Redux
@ -774,8 +700,6 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### 오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?
오브젝트의 경우:
@ -807,8 +731,6 @@ for (let [index, elem] of arr.entries()) {
- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
### mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.
- JavaScript에서 immutable 객체의 예는 무엇인가요?
@ -817,16 +739,12 @@ for (let [index, elem] of arr.entries()) {
TODO
### 동기, 비동기 함수의 차이점을 설명하세요.
동기 함수는 블로킹인 반면, 비동기 함수는 그렇지 않습니다. 동기 함수에서는 다음 명령문이 실행되기 전에 앞 명령문이 완료됩니다. 이 경우, 프로그램은 명령문의 순서대로 정확하게 평가되고 명령문 중 하나가 매우 오랜 시간이 걸리면 프로그램 실행이 일시중지됩니다.
비동기 함수는 일반적으로 파라미터를 통해서 콜백을 받고, 비동기 함수가 호출된 후 즉시 다음 줄 실행이 계속됩니다. 콜백은 비동기 작업이 완료되고 호출 스택이 비어 있을 때만 호출됩니다. 웹 서버에서 데이터를 로드하거나 데이터베이스를 쿼리하는 등의 무거운 작업을 비동기식으로 수행하여, 메인 스레드가 긴 작업을 완료할 때까지 블로킹하지 않고 다른 작업을 계속할 수 있습니다(브라우저의 경우 UI가 중지됨).
### 이벤트 루프란 무엇인가요? 콜 스택과 태스크 큐의 차이점은 무엇인가요?
이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제거되고 실행될 콜 스택으로 푸시됩니다.
@ -838,8 +756,6 @@ Philip Robert의 [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
### `function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용의 차이에 대해 설명하세요.
전자는 함수 선언인 반면, 후자는 함수 표현식입니다. 주요한 차이점은 함수 선언은 함수바디가 호이스트되지만, 함수 표현식의 바디는 호이스트되지 않습니다(변수와 동일한 호이스팅 동작을 가짐). 호이스팅에 대한 자세한 설명은 질문 위의 호이스팅을 참조하십시오. 함수 표현식을 정의하기 전에 호출하려고 하면 `Uncaught TypeError : XXX is not function` 에러가 발생합니다.
@ -866,8 +782,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
### `let`, `var`, `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?
`var` 키워드를 사용하여 선언된 변수는 함수가 생성된 함수나 함수 밖에서 생성된 함수에 전역 오브젝트로 적용됩니다. `let`과 `const`는 블록 스코프입니다. 즉, 가장 가까운 중괄호(function, if-else 블록, for-loop) 내에서만 접근할 수 있습니다.
@ -948,8 +862,6 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
### ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?
먼저 각각의 예를 살펴보겠습니다.
@ -1001,8 +913,6 @@ ES5에서 상속을 사용하는 것이 훨씬 더 불편하며, ES6 버전이
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
### 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?
화살표 함수의 한 가지 분명한 이점은 `function` 키워드를 사용하지 않고도 함수를 생성하는데 필요한 문법을 단순화하는 것입니다.
@ -1011,8 +921,6 @@ ES5에서 상속을 사용하는 것이 훨씬 더 불편하며, ES6 버전이
렉시컬스코프 `this`는 특히 React 컴포넌트에서 콜백을 호출할 때 유용합니다.
### 생성자의 메서드에 화살표 문법을 사용하면 어떤 이점이 있나요?
생성자 내부에서 화살표 함수를 메소드로 사용하는 주된 장점은, 함수 생성시 `this`의 값이 설정되고 그 이후에는 변경할 수 없다는 것입니다.
@ -1068,8 +976,6 @@ sayNameFromWindow2(); // John
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
### 고차 함수(higher-order function)의 정의는 무엇인가요?
고차 함수는 다른 함수를 매개 변수로 사용하여 어떤 데이터를 처리하거나, 결과로 함수를 반환하는 함수입니다. 고차 함수는 반복적으로 수행되는 어떤 연산을 추상화하기 위한 것입니다. 전형적인 예시는 배열과 함수를 인수로 취하는 `map`입니다. `map`은 고차 함수를 사용하여 배열의 각 항목을 변환하고, 변환된 데이터로 새로운 배열을 반환합니다. JavaScript에서 흔히 볼 수 있는 다른 예로 `forEach`, `filter`, `reduce`가 있습니다. 다른 함수에서 함수를 반환하는 많은 사용사례가 있기 때문에 고차 함수는 배열을 조작할 필요가 없습니다. `Array.prototype.bind`는 JavaScript에서 그러한 예시 중 하나입니다.
@ -1110,8 +1016,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있나요?
디스트럭쳐링은 ES6에서 사용할 수 있는 표현식으로 객체나 배열의 값을 추출하여 다른 변수에 배치하는 간결하고 편리한 방법을 제공합니다.
@ -1154,8 +1058,6 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### ES6 템플릿 리터럴은 문자열을 생성하는데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있나요?
템플릿 리터럴을 사용하면 문자열 보간을 하거나 문자열에 변수를 포함하는 작업을 간단하게 수행할 수 있습니다. ES2015 이전에는 아래와 같이하는 것이 일반적이었습니다.
@ -1221,8 +1123,6 @@ document.body.innerHTML = `
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
### curry 함수의 예를 들어 줄 수 있나요? 그리고 이 문법은 어떤 이점을 가지고 있나요?
currying은 둘 이상의 매개 변수가 있는 함수가 여러 함수로 분리된 패턴으로, 직렬로 호출하면, 필요한 모든 매개 변수가 한 번에 하나씩 누적됩니다. 이 기법은 함수형 스타일로 작성된 코드를 읽고, 합성하기 더 쉬워진 경우 유용할 수 있습니다. 함수를 currying하려면, 하나의 함수로 시작하여, 하나의 매개 변수를 취하는 일련의 함수로 분리해야 합니다.
@ -1259,8 +1159,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### spread 문법을 사용할 때의 이점은 무엇이며 rest 문법과 다른 점은 무엇인가요?
ES6의 spread 문법은 함수형 패러다임에서 코딩할 때 매우 유용합니다. 왜냐하면 `Object.create`, `slice`나 라이브러리 함수를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있기 때문입니다. 이 언어 기능은 Redux나 RxJS를 사용하는 프로젝트에서 많이 사용됩니다.
@ -1305,8 +1203,6 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
### 파일 간에 코드를 공유하려면 어떻게 해야하나요?
이것은 Javascript 환경에 따라 다릅니다.
@ -1323,8 +1219,6 @@ ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 문법을
- https://nodejs.org/docs/latest/api/modules.html
- http://2ality.com/2014/09/es6-modules-final.html
### 정적 클래스 멤버를 만드는 이유는 무엇인가요?
정적 클래스 멤버(속성/메서드)는 클래스의 특정 인스턴스와 묶이지 않으며, 어떤 인스턴스가 이를 참조하는지에 관계없이 동일한 값을 가집니다. 정적 속성은 일반적으로 설정(configuration) 변수이며 정적 메서드는 일반적으로 인스턴스의 상태에 의존하지 않는 순수 유틸리티 함수입니다.
@ -1333,8 +1227,6 @@ ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 문법을
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
### 다른 답변들
- <http://flowerszhong.github.io/2013/11/20/javascript-questions.html>

68
website/i18n/pl/docusaurus-plugin-content-docs/current/css-questions.md
View File

@ -28,8 +28,6 @@ Pisałbym reguły CSS o niskiej specyficzności, aby w razie potrzeby można je
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### Jaka jest różnica pomiędzy CSS "resetting" oraz "normalizing"? Które wybrałbyś, i dlaczego?
- **Resetting** - Resetowanie ma na celu usunięcie wszystkich domyślnych stylów przeglądarki z elementów. Na przykład `margin`, `padding`, `font-size` wszystkich elementów są resetowane, aby były takie same. Będziesz musiał zmienić styl dla wspólnych elementów typograficznych.
@ -41,8 +39,6 @@ Zdecydowałbym się zresetować, gdy mam bardzo niestandardowy lub niekonwencjon
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### Opisz `float`y i jak one działają.
Float to właściwość pozycjonowania CSS. Elementy pływające (floated elements) pozostają częścią przepływu strony i będą wpływać na położenie innych elementów (np. tekst będzie płynął wokół elementów pływających), w przeciwieństwie do elementów `position: absolute`, które są usuwane z przepływu strony.
@ -69,8 +65,6 @@ Alternatywnie, nadaj właściwość `overflow: auto` lub `overflow: hidden` elem
- https://css-tricks.com/all-about-floats/
### Opisz `z-index` i jak powstaje stacking context.
Właściwość `z-index` w CSS kontroluje pionową kolejność układania elementów, które się nakładają. `z-index` wpływa tylko na elementy, które mają wartość `position`, która nie jest `static`.
@ -89,8 +83,6 @@ _Uwaga: To, co dokładnie kwalifikuje element do utworzenia kontekstu stosu, zna
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
### Opisz Block Formatting Context (BFC) i jak działa.
Block Formatting Context (BFC) jest częścią wizualnego renderowania CSS strony internetowej, na której układane są pola bloków. Float'y, elementy absolutnie pozycjonowane, `inline-blocks`, `table-cells`, `table-caption`, i elementy z `overflow` inne niż `visible` (z wyjątkiem sytuacji, gdy ta wartość została propagowana do viewport), ustal nowe konteksty formatowania bloków.
@ -113,8 +105,6 @@ Pionowe marginesy między sąsiadującymi polami na poziomie bloku w zwinięciu
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### Jakie są różne techniki czyszczenia i które są odpowiednie w jakim kontekście?
- Pusta metoda `div` - `<div style="clear:both;"></div>`.
@ -123,8 +113,6 @@ Pionowe marginesy między sąsiadującymi polami na poziomie bloku w zwinięciu
W dużych projektach napisałbym klasę użyteczności `.clearfix` i używał ich w miejscach, w których tego potrzebuję. `overflow: hidden` może podcinać children, jeśli children jest wyższy od parent i nie jest zbyt idealny.
### Wyjaśnij CSS sprites, i jak zaimplementujesz je na stronie lub witrynie.
CSS sprites łączy wiele obrazów w jeden większy obraz. Jest to powszechnie stosowana technika ikon (Gmail ją używa). Jak ją zaimplementować:
@ -142,8 +130,6 @@ CSS sprites łączy wiele obrazów w jeden większy obraz. Jest to powszechnie s
- https://css-tricks.com/css-sprites/
### Jak podchodziłbyś do rozwiązywania problemów związanych ze stylem specyficznym dla przeglądarki?
- Po zidentyfikowaniu problemu i sprawiającej kłopoty przeglądarki użyj osobnego arkusza stylów, który ładuje się tylko wtedy, gdy używana jest konkretna przeglądarka. Ta technika wymaga jednak renderowania po stronie serwera.
@ -152,8 +138,6 @@ CSS sprites łączy wiele obrazów w jeden większy obraz. Jest to powszechnie s
- Użyj Reset CSS lub Normalize.css.
- Jeśli korzystasz z Postcss (lub podobnej biblioteki do transpilowania), mogą istnieć wtyczki, które pozwolą ci wybrać nowoczesną składnię CSS (a nawet propozycje W3C), które przekształcą te sekcje twojego kodu w odpowiedni bezpieczny kod, który będzie pracować w celach, dla których korzystałeś.
### Jak wyświetlasz swoje strony w przeglądarkach z ograniczeniami funkcji? Jakich technik/procesów używasz?
- Wdzięczna degradacja (graceful degradation) - praktyka polegająca na tworzeniu aplikacji dla nowoczesnych przeglądarek przy jednoczesnym zapewnieniu jej funkcjonalności w starszych przeglądarkach.
@ -163,8 +147,6 @@ CSS sprites łączy wiele obrazów w jeden większy obraz. Jest to powszechnie s
- Wykrywanie funkcji za pomocą [Modernizr](https://modernizr.com/).
- Używanie zapytań CSS Feature [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
### Jakie są różne sposoby wizualnego ukrywania treści (i udostępniania jej tylko dla czytników ekranu)?
Te techniki są związane z dostępnością (a11y).
@ -183,22 +165,16 @@ Nawet jeśli WAI-ARIA jest idealnym rozwiązaniem, wybrałbym podejście pozycjo
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
### Czy kiedykolwiek korzystałeś z systemu siatki (grid system), a jeśli tak, to co preferujesz?
Przed tym jak Flex stał się popularny (około roku 2014), oparty na `float` grid system był najbardziej niezawodny, ponieważ nadal ma największą obsługę przeglądarek wśród alternatywnych istniejących systemów (flex, grid). Bootstrap korzystał z podejścia `float` do chwili, gdy Bootstrap 4, przełączył się na podejście oparte na `flex`. W chwili pisania (2020r.), `flex` jest zalecanym podejściem do budowania systemów gridowych i ma [przyzwoitą obsługę przeglądarki](https://caniuse.com/#search=flex).
Dla odważnych, mogą zajrzeć w [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), który używa nowej błyszczącej właściwości `grid`; jest nawet lepszy niż `flex` do budowania układów siatki i będzie de facto sposobem na zrobienie tego w przyszłości.
### Czy używałeś lub implementowałeś media queries lub mobile-specific layouts/CSS?
Tak. Przykładem może być przekształcenie nawigacji stacked pill w nawigację fixed-bottom tab poza pewnym breakpointem.
### Czy znasz stylizację SVG?
Tak, istnieje kilka sposobów pokolorowania kształtów (w tym określenie atrybutów obiektu) za pomocą wbudowanego CSS, osadzonej sekcji CSS lub zewnętrznego pliku CSS. Większość plików SVG, które można znaleźć w Internecie, wykorzystuje wbudowany CSS, ale z każdym typem wiążą się wady i zalety.
@ -214,8 +190,7 @@ Podstawowe kolorowanie można wykonać, ustawiając dwa atrybuty w węźle: `fil
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
/>
stroke-opacity="0.8" />
```
Powyższe `fill="purple"` to przykład _presentational attribute_. Co ciekawe, w przeciwieństwie do stylów wbudowanych, takich jak `style="fill: purple"`, który również jest atrybutem, atrybuty prezentacji można [zastąpić stylami CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) zdefiniowanymi w arkuszu stylów. Więc, jeśli zrobić coś takiego jak `svg { fill: blue; }` zastąpiłoby to zdefiniowane przez nas fioletowe wypełnienie.
@ -224,8 +199,6 @@ Powyższe `fill="purple"` to przykład _presentational attribute_. Co ciekawe, w
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
### Czy możesz podać przykład właściwości @media innej niż screen?
Tak, są cztery typy właściwości @media (włączając w to _screen_):
@ -249,8 +222,6 @@ Tu jest przykład użycia typu `print` media:
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
### Jakie są "tricki" do pisania wydajnego CSS?
Po pierwsze, zrozum, że przeglądarki dopasowują selektory od skrajnie prawej (key selector) do lewej. Przeglądarki odfiltrowują elementy w DOM zgodnie z key selector'em i przesuwają w górę jego elementy nadrzędne, aby ustalić dopasowania. Im krótsza długość łańcucha selektora, tym szybciej przeglądarka może ustalić, czy ten element pasuje do selektora. Dlatego unikaj key selectorów, które są selektorami tagów i uniwersalnymi. Pasują do dużej liczby elementów, a przeglądarki będą musiały wykonać więcej pracy, aby ustalić, czy rodzice pasują.
@ -264,8 +235,6 @@ Należy pamiętać, które właściwości CSS wyzwalają [trigger](https://csstr
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
### Jakie są zalety/wady korzystania z preprocesorów CSS?
**Zalety:**
@ -282,8 +251,6 @@ Należy pamiętać, które właściwości CSS wyzwalają [trigger](https://csstr
- Wymaga narzędzi do wstępnego przetwarzania. Czas ponownej kompilacji może być długi.
- Brak pisania obecnego i potencjalnie użytecznego CSS. Na przykład, używając czegoś podobnego do [postcss-loader](https://github.com/postcss/postcss-loader) z [webpack](https://webpack.js.org/), możesz napisać potencjalnie kompatybilny CSS, pozwalając na używanie takich zmiennych jak CSS zamiast zmiennych Sass. W ten sposób uczysz się nowych umiejętności, które mogą się opłacić, jeśli/gdy zostaną ujednolicone.
### Opisz, co lubisz, a czego nie w preprocesorach CSS, z których korzystałeś.
**Polubione:**
@ -296,14 +263,10 @@ Należy pamiętać, które właściwości CSS wyzwalają [trigger](https://csstr
- Używam Sass przez `node-sass`, który jest powiązaniem dla LibSass napisanego w C++. Muszę często go przekompilować podczas przełączania między wersjami węzłów.
- W Less, nazwy zmiennych są poprzedzone znakiem `@`, które można pomylić z natywnymi słowami kluczowymi CSS, takimi jak `@media`, `@import` i reguła `@font-face`.
### Jak zaimplementowałbyś kompozycję do projektowania stron internetowych, która wykorzystuje niestandardowe czcionki?
Użycie `@font-face` i zdefiniowanie `font-family` dla różnych `font-weight`.
### Wyjaśnij, w jaki sposób przeglądarka określa, które elementy pasują do selektora CSS.
Ta część jest związana z powyższą na temat [pisania wydajnego CSS](#what-are-some-of-the-gotchas-for-writing-efficient-css). Przeglądarki dopasowują selektory od skrajnie prawej (key selector) do lewej. Przeglądarki odfiltrowują elementy w DOM zgodnie z key selector i przesuwają w górę jego elementy nadrzędne, aby ustalić dopasowania. Im krótsza długość łańcucha selektora, tym szybciej przeglądarka może ustalić, czy ten element pasuje do selektora.
@ -314,8 +277,6 @@ Na przykład ten selektor `p span`, przeglądarka najpierw znajduje wszystkie el
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
### Opisz pseudoelementy i omów, do czego służą.
Pseudoelement CSS jest słowem kluczowym dodawanym do selektora, który pozwala stylizować określoną część wybranych elementów. Mogą być używane do dekoracji (`:first-line`, `:first-letter`) lub dodawać elementy do znaczników (w połączeniu z `content: ...`) bez konieczności modyfikowania znaczników (`:before`, `:after`).
@ -328,8 +289,6 @@ Pseudoelement CSS jest słowem kluczowym dodawanym do selektora, który pozwala
- https://css-tricks.com/almanac/selectors/a/after-and-before/
### Wyjaśnij swoje zrozumienie box model i sposób, w jaki chcesz, aby przeglądarka w CSS renderowała układ w różnych modelach pudełkowych.
Model pola CSS opisuje prostokątne pola, które są generowane dla elementów w drzewie dokumentu i rozmieszczone zgodnie z wizualnym modelem formatowania. Każdy box ma pole zawartości (np. text, an image, etc.) i opcjonalne otoczenie polami `padding`, `border`, i `margin`.
@ -353,8 +312,6 @@ Model pudełkowy ma następujące zasady:
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
### Co robi `* { box-sizing: border-box; }`? Jakie są tego zalety?
- Domyślnie, elementy mają `box-sizing: content-box` zastosowane, i uwzględniany jest tylko rozmiar contentu.
@ -367,8 +324,6 @@ Model pudełkowy ma następujące zasady:
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
### Czym jest właściwość `display` w CSS i czy możesz podać kilka przykładów jej użycia?
- `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`.
@ -384,8 +339,6 @@ Model pudełkowy ma następujące zasady:
| `table-cell` | Behaves like the `<td>` element |
| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position` |
### Jaka jest różnica pomiędzy `inline`, a `inline-block`?
Dla dobrego porównania wrzucę porównanie z `block`.
@ -399,8 +352,6 @@ Dla dobrego porównania wrzucę porównanie z `block`.
| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
### Jaka jest różnica między pozycjonowaniem `relative`, `fixed`, `absolute` i `static` elementu?
Element pozycjonowany to element, którego obliczona właściwość `position` jest albo `relative`, `absolute`, `fixed` lub `sticky`.
@ -415,16 +366,12 @@ Element pozycjonowany to element, którego obliczona właściwość `position` j
- https://developer.mozilla.org/en/docs/Web/CSS/position
### Z jakich istniejących frameworków CSS korzystałeś lokalnie lub na produkcji? Jak byś je zmienił/ulepszył?
- **Bootstrap** - Cykl wolnego wydania. Bootstrap 4 jest w wersji alfa od prawie 2 lat. Dodać spinner button component, ponieważ jest on powszechnie używany.
- **Semantic UI** - Struktura kodu źródłowego sprawia, że dostosowanie motywu jest niezwykle trudne do zrozumienia. Niekonwencjonalny system tematyczny jest trudny do dostosowania. Zahardkodowana ścieżka konfiguracji w bibliotece dostawcy. Niezbyt dobrze zaprojektowany do nadpisywania zmiennych w przeciwieństwie do Bootstrap.
- **Bulma** - Wymaganych jest wiele niesemantycznych i zbędnych klas i znaczników. Niekompatybilny wstecz. Uaktualnianie wersji psuje aplikację w subtelny sposób.
### Czy robiłeś coś w nowej specyfikacji CSS Flexbox lub Grid?
Tak. Flexbox jest przeznaczony głównie do układów 1-wymiarowych, a Grid do układów 2-wymiarowych.
@ -437,8 +384,6 @@ Grid jest zdecydowanie najbardziej intuicyjnym podejściem do tworzenia układó
- https://philipwalton.github.io/solved-by-flexbox/
### Czy potrafisz wyjaśnić różnicę między kodowaniem strony internetowej, aby była responsywna, a używaniem mobile-first strategy?
Pamiętaj, że te dwa podejścia nie są wykluczające.
@ -478,8 +423,6 @@ Mobile-first strategy ma 2 główne zalety:
- Jest bardziej wydajna na urządzeniach mobilnych, ponieważ wszystkie zastosowane reguły nie muszą być sprawdzane pod kątem media queries.
- Wymusza pisanie czystszego kodu w odniesieniu do responsywnych reguł CSS.
### Czym różni się projektowanie responsywne od projektowania adaptacyjnego?
Zarówno responsywne, jak i adaptacyjne próbują zoptymalizować wrażenia użytkownika na różnych urządzeniach, dostosowując się do różnych rozmiarów viewport, rozdzielczości, kontekstów użytkowania, mechanizmów kontrolnych i tak dalej.
@ -499,8 +442,6 @@ Obie z tych metod mają pewne problemy, które warto ocenić:
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
### Czy kiedykolwiek pracowałeś z grafiką Retina? Jeśli tak, kiedy i jakich technik użyłeś?
_Retina_ jest po prostu marketingowym terminem odnoszącym się do ekranów o wysokiej rozdzielczości ze współczynnikiem pikseli większym niż 1. Kluczową rzeczą, o której należy wiedzieć, jest to, że użycie współczynnika pikseli oznacza, że wyświetlacze emulują ekran o niższej rozdzielczości w celu wyświetlenia elementów o tym samym rozmiarze. Obecnie rozważamy defacto wszystkie wyświetlacze urządzeń mobilnych _retina_.
@ -523,8 +464,7 @@ Aby rozwiązać ten problem, możemy użyć responsywnych obrazów, jak określo
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w
"
/>
" />
</div>
```
@ -538,8 +478,6 @@ W przypadku ikon wolałbym również używać plików SVG i czcionek ikon, jeśl
- http://scottjehl.github.io/picturefill/
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
### Czy jest jakiś powód, dla którego chciałbyś użyć `translate ()` zamiast pozycjonowania `absolute` lub odwrotnie? I dlaczego?
`translate()` jest wartością CSS `transform`. Zmieniając `transform` lub `opacity` nie powoduje ponownego wczytywania przeglądarki ani odmalowywania, ale powoduje kompozycje; podczas gdy zmiana bezwzględnych wyzwalaczy pozycjonowania `reflow`. `transform` powoduje, że przeglądarka tworzy warstwę GPU dla elementu, ale zmiana bezwzględnych właściwości pozycjonowania wykorzystuje procesor. W związku z tym `translate()` jest bardziej wydajny i spowoduje krótszy czas malowania dla płynniejszych animacji.
@ -550,8 +488,6 @@ Kiedy używasz `translate ()`, element nadal zajmuje swoją pierwotną przestrze
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
### Inne odpowiedzi
- https://neal.codes/blog/front-end-interview-css-questions

22
website/i18n/pl/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -24,8 +24,6 @@ Deklaracja DOCTYPE dla standardów HTML5 to `<!DOCTYPE html>`.
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
### W jaki sposób wyświetlasz stronę z treścią w wielu językach?
Pytanie jest trochę niejasne, założę się, że chodzi o najczęstszy przypadek, czyli sposób obsługi strony z treścią dostępną w wielu językach, ale treść na stronie powinna być wyświetlana tylko w jednym spójnym języku.
@ -38,8 +36,6 @@ W backendzie, HTML będzie zawierać symbole zastępcze `i18n` oraz treść dla
- https://www.w3.org/International/getting-started/language
### Jakich rzeczy należy się wystrzegać podczas projektowania lub tworzenia witryn wielojęzycznych?
- Używanie atrybutu `lang` w swoim HTML.
@ -55,8 +51,6 @@ W backendzie, HTML będzie zawierać symbole zastępcze `i18n` oraz treść dla
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### Do czego są dobre atrybuty `data-`?
Zanim frameworki JavaScript stały się popularne, programiści używali atrybutów `data-` do przechowywania dodatkowych danych w samym DOM, bez innych sztuczek, takich jak niestandardowe atrybuty, dodatkowe właściwości w DOM. Jest przeznaczony do przechowywania niestandardowych danych prywatnych na stronie lub w aplikacji, dla których nie ma już odpowiednich atrybutów ani elementów.
@ -70,8 +64,6 @@ Jednakże, jednym całkowicie poprawnym zastosowaniem atrybutów danych jest dod
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### Rozważ HTML5 jako Open Web Platform. Jakie są elementy składowe HTML5?
- Semantyka - pozwala precyzyjniej opisać treść.
@ -87,8 +79,6 @@ Jednakże, jednym całkowicie poprawnym zastosowaniem atrybutów danych jest dod
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Opisz różnicę pomiędzy `cookie`, `sessionStorage` oraz `localStorage`.
Wszystkie wyżej wymienione technologie są kluczowymi mechanizmami przechowywania po stronie klienta. Są w stanie przechowywać wartości tylko jako ciągi znaków (strings).
@ -109,8 +99,6 @@ _Uwaga: Jeśli użytkownik zdecyduje się wyczyścić dane przeglądania za pomo
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Opisz różnicę pomiędzy `<script>`, `<script async>` oraz `<script defer>`.
- `<script>` - Parsowanie HTML jest zablokowane, skrypt jest pobierany i wykonywany natychmiast, parsowanie HTML jest wznawiane po wykonaniu skryptu.
@ -125,8 +113,6 @@ Uwaga: Atrybuty `async` oraz `defer` są ignorowane przez skrypty, które nie za
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### Dlaczego ogólnie dobrym pomysłem jest pozycjonowanie CSS `<link>` pomiędzy `<head></head>` oraz JS `<script>` tuż przed `</body>`? Czy znasz jakieś wyjątki?
**Umieszczanie `<link>` w `<head>`**
@ -145,8 +131,6 @@ Wyjątkiem dla pozycjonowania `<script>` na dole jest gdy twój skrypt zawiera `
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
### Co to jest rendering progresywny?
Renderowanie progresywne to nazwa nadana technikom stosowanym w celu poprawy wydajności strony internetowej (w szczególności w celu poprawy postrzeganego czasu ładowania) w celu renderowania treści do wyświetlenia tak szybko, jak to możliwe.
@ -164,8 +148,6 @@ Przykłady takich technik:
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### Dlaczego warto użyć atrybutu `srcset` w tagu obrazu? Wyjaśnij proces wykorzystywany przez przeglądarkę podczas oceny zawartości tego atrybutu.
Możesz użyć atrybutu `srcset` gdy chcesz wyświetlać użytkownikom różne obrazy w zależności od szerokości ekranu ich urządzenia - wyświetlaj obrazy o wyższej jakości na urządzeniach z wyświetlaczem Retina, które poprawiają wrażenia użytkownika, a wyświetlanie obrazów o niższej rozdzielczości na mniejszych urządzeniach zwiększa wydajność i zmniejsza marnotrawstwo danych (ponieważ służy to większemu, obraz nie będzie miał widocznej różnicy). Na przykład: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` informuje przeglądarkę, aby wyświetlała małą, średnią lub dużą grafikę `.jpg` w zależności od rozdzielczości klienta. Pierwsza wartość to nazwa obrazu, a druga to szerokość obrazu w pikselach. W przypadku urządzenia o szerokości 320 pikseli wykonywane są następujące obliczenia:
@ -185,14 +167,10 @@ Jeśli rozdzielczość to retina (2x), przeglądarka użyje najbliższej rozdzie
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### Czy używałeś wcześniej różnych języków szablonów HTML?
Tak, Pug (formalnie Jade), ERB, Slim, Handlebars, Jinja, Liquid, żeby wymienić tylko kilka. Moim zdaniem są one mniej więcej takie same i zapewniają podobną funkcjonalność ucieczki treści oraz pomocne filtry do manipulowania wyświetlanymi danymi. Większość silników szablonów pozwala również wstrzykiwać własne filtry na wypadek, gdybyś potrzebował niestandardowego przetwarzania przed wyświetleniem.
### Inne odpowiedzi
- https://neal.codes/blog/front-end-interview-questions-html/

110
website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -20,8 +20,6 @@ Delegowanie zdarzeń to technika polegająca na dodawaniu event listenerów do e
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### Wyjaśnij jak `this` działa w JavaScript
Nie ma prostego wyjaśnienia dla `this`; jest to jedna z najbardziej mylących koncepcji w JavaScript. Wytłumaczeniem na szybko jest to, że wartość `this` zależy od tego, jak wywoływana jest funkcja. Przeczytałem wiele wyjaśnień na temat `this` w Internecie i znalazłem wytłumaczenie od [Arnav Aggrawal](https://medium.com/@arnav_aggarwal), jako najbardziej klarowne. Stosuje się następujące zasady:
@ -44,8 +42,6 @@ ES6 umożliwia korzystanie z [funkcji strzałkowych (arrow functions)](http://2a
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### Wyjaśnij, jak działa dziedziczenie prototypowe
To jest bardzo częste pytanie dotyczące rozmowy rekrutacyjnej w JavaScript. Wszystkie obiekty JavaScript mają właściwość `__proto__`, jest to odniesienie do innego obiektu, który nazywa się "prototypem" obiektu. Gdy właściwość jest udostępniana na obiekt i jeśli właściwość nie została znaleziona na tym obiekcie, silnik JavaScript sprawdza `__proto__` obiektu oraz `__proto__` z `__proto__` i tak dalej, dopóki nie znajdzie właściwości zdefiniowanej w jednym z `__proto__` lub dopóki nie osiągnie końca łańcucha prototypów. To zachowanie symuluje klasyczne dziedziczenie, ale tak naprawdę jest bardziej [delegowaniem niż dziedziczeniem](https://davidwalsh.name/javascript-objects).
@ -133,8 +129,6 @@ c.constructor.name;
- https://crockford.com/javascript/prototypal.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
### Co sądzisz o AMD vs CommonJS?
Oba sposoby implementacji systemu modułowego, który nie pojawił się natywnie w JavaScript przed pojawieniem się ES2015. CommonJS jest synchroniczny, podczas gdy AMD (definicja modułu asynchronicznego) jest oczywiście asynchroniczny. CommonJS został zaprojektowany z myślą o rozwoju po stronie serwera, podczas gdy AMD, ze wsparciem dla asynchronicznego ładowania modułów, jest bardziej przeznaczone dla przeglądarek.
@ -148,8 +142,6 @@ Cieszę się, że dzięki modułom ES2015, które obsługują zarówno ładowani
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### Wyjaśnij, dlaczego następujące elementy nie działają jako IIFE: `function foo(){ }();`. Co należy zmienić, aby poprawnie uczynić to IIFE?
IIFE oznacza Immediately Invoked Function Expressions. Parser JavaScript czyta `function foo(){ }();` jako `function foo(){ }` i `();`, gdzie ten pierwszy to _deklaracja funkcji_ i ten drugi (para nawiasów) jest próbą wywołania funkcji, ale nie ma określonej nazwy, dlatego rzuca `Uncaught SyntaxError: Unexpected token )`.
@ -171,8 +163,6 @@ console.log(foo); // undefined
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
### Jaka jest różnica między zmienną: `null`, `undefined` lub niezadeklarowaną? Jak sprawdziłbyś którykolwiek z tych stanów?
**Niezadeklarowane** zmienne są tworzone, gdy przypisujesz wartość do identyfikatora, który nie był wcześniej tworzony przy użyciu `var`, `let` lub `const`. Niezadeklarowane zmienne zostaną zdefiniowane globalnie, poza bieżącym zakresem. W trybie strict mode, `ReferenceError` zostanie rzucony, gdy spróbujesz przypisać do niezadeklarowanej zmiennej. Niezadeklarowane zmienne są złe, tak jak zmienne globalne są złe. Unikaj ich za wszelką cenę! Aby je sprawdzić, zawiń jego użycie w bloku `try`/`catch`.
@ -218,8 +208,6 @@ Jako osobisty nawyk nigdy nie pozostawiam moich zmiennych niezadeklarowanych ani
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### Czym jest domknięcie i jak/dlaczego miałbyś je zastosować?
Domknięcie (closure) jest kombinacją funkcji i środowiska leksykalnego, w którym zadeklarowano tę funkcję. Słowo "leksykalny" odnosi się do faktu, że zakres leksykalny wykorzystuje lokalizację, w której zmienna jest zadeklarowana w kodzie źródłowym, w celu ustalenia, gdzie ta zmienna jest dostępna. Domknięcia to funkcje, które mają dostęp do zmiennych funkcji zewnętrznej (obejmującej) - łańcuch zasięgu nawet po zwróceniu funkcji zewnętrznej.
@ -234,8 +222,6 @@ Domknięcie (closure) jest kombinacją funkcji i środowiska leksykalnego, w kt
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### Czy możesz opisać główną różnicę pomiędzy pętlą `.forEach`, a pętlą `.map()` i dlaczego wybrałbyś jeden albo drugi?
Aby zrozumieć różnice między nimi, spójrzmy na to, co robi każda funkcja.
@ -275,8 +261,6 @@ Główna różnica między `.forEach` i `.map()` to to, że `.map()` zwraca now
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### Jaki jest typowy przypadek użycia funkcji anonimowych?
Można ich użyć w IIFE do enkapsulacji części kodu w zakresie lokalnym, tak aby zmienne zadeklarowane w nim nie przenikały do zakresu globalnego.
@ -310,8 +294,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### Jak organizujesz swój kod? (wzorzec modułu, klasyczne dziedziczenie?)
W przeszłości używałem Backbone do moich modeli, co zachęca do bardziej otwartego podejścia, tworzenia modeli Backbone i dołączania do nich metod.
@ -320,8 +302,6 @@ Wzorzec modułu jest nadal świetny, ale obecnie używam React/Redux, które wyk
W miarę możliwości unikam dziedziczenia klasycznego. Kiedy już i jeśli to zrobię, trzymam się [tych reguł](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
### Jaka jest różnica między obiektami hosta a obiektami macierzystymi?
Obiekty macierzyste to obiekty, które są częścią języka JavaScript zdefiniowanego w specyfikacji ECMAScript, takie jak `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
@ -332,8 +312,6 @@ Obiekty hosta są dostarczane przez środowisko wykonawcze (przeglądarkę lub N
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### Różnica pomiędzy: `function Person(){}`, `var person = Person()`, i `var person = new Person()`?
To pytanie jest dość niejasne. Myślę, że jego intencją jest to, że pyta o konstruktory w JavaScript. Z technicznego punktu widzenia, `function Person(){}` jest zwykłą deklaracją funkcji. Konwencja polega na wykorzystaniu PascalCase do funkcji, które mają być używane jako konstruktory.
@ -360,8 +338,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
### Jaka jest różnica pomiędzy `.call` i `.apply`?
Zarówno `.call`, jak i `.apply` są używane do wywoływania funkcji, a pierwszy parametr zostanie użyty jako wartość `this` w funkcji. Jednak `.call` przyjmuje argumenty oddzielone przecinkami jako kolejne argumenty, podczas gdy `.apply` przyjmuje tablicę argumentów jako następny argument. Łatwym sposobem na zapamiętanie tego jest C dla `call` i oddzielone przecinkami, i A dla `apply` oraz tablica argumentów.
@ -375,8 +351,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### Wytłumacz `Function.prototype.bind`.
Wzięte słowo w słowo z[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
@ -389,8 +363,6 @@ Z mojego doświadczenia wynika, że jest to najbardziej przydatne do bindowania
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
### Kiedy użyłbyś `document.write()`?
`document.write()` zapisuje ciąg tekstu do strumienia dokumentów otwartego przez `document.open()`. Kiedy `document.write()` jest wykonywane po załadowaniu strony, wywoła `document.open`, który usuwa cały dokument (`<head>`i `<body>` usunięto!) i zamienia zawartość na podaną wartość parametru. Dlatego jest zwykle uważany za niebezpieczny i podatny na niewłaściwe użycie.
@ -402,8 +374,6 @@ Istnieje kilka odpowiedzi online, które wyjaśniają, że w kodzie analitycznym
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### Jaka jest różnica między wykrywaniem funkcji, feature inference i używaniem UA string?
**Feature Detection**
@ -442,8 +412,6 @@ Jest to string zgłaszany przez przeglądarkę, który umożliwia elementom prot
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
### Wyjaśnij Ajax tak szczegółowo, jak to możliwe.
Ajax (asynchronous JavaScript and XML - asynchroniczny JavaScript i XML) to zestaw technik tworzenia stron internetowych wykorzystujących wiele technologii sieciowych po stronie klienta do tworzenia asynchronicznych aplikacji internetowych. Dzięki Ajax aplikacje internetowe mogą wysyłać dane i pobierać je z serwera asynchronicznie (w tle) bez ingerencji w wyświetlanie i zachowanie istniejącej strony. Oddzielając warstwę wymiany danych od warstwy prezentacji, Ajax pozwala stronom internetowym, a poprzez rozszerzenia aplikacji internetowych, dynamicznie zmieniać treść bez konieczności ponownego ładowania całej strony. W praktyce nowoczesne implementacje często zastępują użycie JSON zamiast XML, ze względu na zalety natywnej obsługi JSON w JavaScript.
@ -455,8 +423,6 @@ API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
### Jakie są zalety i wady korzystania z Ajax?
**Zalety**
@ -474,8 +440,6 @@ API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w
- Strony internetowe wykorzystujące Ajax do pobierania danych prawdopodobnie będą musiały połączyć pobrane dane zdalne z szablonami po stronie klienta, aby zaktualizować DOM. Aby tak się stało, JavaScript musi zostać przeanalizowany i wykonany w przeglądarce, a urządzenia mobilne z niższej półki mogą mieć z tym problem.
- Zasadniczo większość wad SPA.
### Wyjaśnij, jak działa JSONP (i jak to naprawdę nie jest Ajax).
JSONP (JSON with Padding) jest metodą powszechnie używaną do omijania zasad międzydomenowych w przeglądarkach internetowych, ponieważ żądania Ajax z bieżącej strony do domeny międzydomenowej są niedozwolone.
@ -508,8 +472,6 @@ Obecnie, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) jest
- https://stackoverflow.com/a/2067584/1751946
### Czy kiedykolwiek używałeś szablonów JavaScript? Jeśli tak, z jakich bibliotek korzystałeś?
Tak. Handlebars, Underscore, Lodash, AngularJS, i JSX. Nie podobało mi się tworzenie szablonów w AngularJS, ponieważ często używało łańcuchów w dyrektywach, a literówki nie zostały złapane. JSX jest moim nowym ulubionym, ponieważ jest bliżej JavaScript i nie ma prawie żadnej składni do nauki. W dzisiejszych czasach możesz nawet używać literałów ciągów szablonów ES2015 jako szybkiego sposobu tworzenia szablonów bez konieczności korzystania z kodu innej firmy.
@ -520,8 +482,6 @@ const template = `<div>My name is: ${name}</div>`;
Należy jednak pamiętać o potencjalnym XSS w powyższym podejściu, ponieważ zawartość nie jest dla ciebie umykająca, w przeciwieństwie do bibliotek szablonów.
### Wytłumacz "hoisting".
Hoisting to termin używany do wyjaśnienia zachowania deklaracji zmiennych w kodzie. Zmienne zadeklarowane lub zainicjowane słowem kluczowym `var` będą miały swoją deklarację "przeniesioną" na górę zakresu na poziomie modułu/funkcji, który nazywamy windowaniem. Jednak tylko deklaracja jest windowana, przydział (jeśli taki istnieje) pozostanie tam, gdzie jest.
@ -569,14 +529,10 @@ let y = 'local';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_hoisting
- https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689
### Opisz event bubbling.
Kiedy zdarzenie zostanie wyzwolone na elemencie DOM, spróbuje obsłużyć to zdarzenie, jeśli dołączony jest detektor, a następnie zdarzenie zostanie przekazane do jego obiektu nadrzędnego i nastąpi to samo. To 'bubbling' występuje u przodków elementu aż do `document`. Event bubbling jest mechanizmem delegowania zdarzeń.
### Jaka jest różnica pomiędzy "attribute", a "property"?
Atrybuty są zdefiniowane w znacznikach HTML, ale właściwości są zdefiniowane w DOM. Aby zilustrować różnicę, wyobraź sobie, że mamy to pole tekstowe w naszym HTML: `<input type="text" value="Hello">`.
@ -598,8 +554,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### Dlaczego rozszerzenie wbudowanych obiektów JavaScript nie jest dobrym pomysłem?
Rozszerzenie wbudowanego/natywnego obiektu JavaScript oznacza dodanie właściwości/funkcji do jego `prototype`. Choć na początku może się to wydawać dobrym pomysłem, w praktyce jest niebezpieczne. Wyobraź sobie, że twój kod używa kilku bibliotek, które rozszerzają `Array.prototype` poprzez dodanie tej samej metody `contains`, implementacje się nadpisują, a twój kod się zepsuje, jeśli zachowanie tych dwóch metod nie będzie takie samo.
@ -610,8 +564,6 @@ Jedynym momentem, w którym możesz chcieć rozszerzyć obiekt macierzysty, jest
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### Różnica między document `load` event, a document `DOMContentLoaded` event?
Zdarzenie `DOMContentLoaded` jest uruchamiane, gdy początkowy dokument HTML został całkowicie załadowany i przeanalizowany, bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek.
@ -623,8 +575,6 @@ Zdarzenie `DOMContentLoaded` jest uruchamiane, gdy początkowy dokument HTML zos
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
### Jaka jest różnica pomiędzy `==` i `===`?
`==` jest abstrakcyjnym operatorem równości, podczas gdy `===` jest operatorem ścisłej równości. Operator `==` porówna pod kątem równości po wykonaniu niezbędnych konwersji typu. Operator `===` nie dokona konwersji typu, więc jeśli dwie wartości nie są tego samego typu, `===` po prostu zwróci `false`. Gdy używasz `==`, mogą się zdarzyć dziwne rzeczy, takie jak:
@ -650,8 +600,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### Wyjaśnij same-origin policy w odniesieniu do JavaScript.
Same-origin policy zapobiega przesyłaniu żądań JavaScript przez granice domen. Źródło jest zdefiniowane jako kombinacja schematu URI, nazwy hosta i numeru portu. Ta zasada uniemożliwia złośliwemu skryptowi na jednej stronie uzyskanie dostępu do poufnych danych na innej stronie internetowej za pomocą modelu obiektowego dokumentu (DOM) tej strony.
@ -660,8 +608,6 @@ Same-origin policy zapobiega przesyłaniu żądań JavaScript przez granice dome
- https://en.wikipedia.org/wiki/Same-origin_policy
### Spraw aby działało:
```js
@ -684,8 +630,6 @@ const duplicate = (arr) => [...arr, ...arr];
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### Dlaczego nazywa się to wyrażeniem trójargumentowym, co oznacza słowo "trójargumentowe"?
"Ternary" wskazuje trzy, a wyrażenie potrójne akceptuje trzy operandy, warunek testu, wyrażenie "then" i wyrażenie "else". Wyrażenia trójskładnikowe nie są specyficzne dla JavaScript i nie jestem pewien, dlaczego znajduje się nawet na tej liście.
@ -694,8 +638,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
### Czym jest `"use strict";`? Jakie są zalety i wady korzystania z tego?
'use strict' to instrukcja używana do włączenia trybu strict mode do całych skryptów lub poszczególnych funkcji. Tryb strict mode to sposób na włączenie ograniczonej wersji JavaScript.
@ -723,8 +665,6 @@ Ogólnie rzecz biorąc, uważam, że korzyści przeważają nad wadami i nigdy n
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### Utwórz pętlę for, która będzie się powtarzać do `100` podczas wysyłania **"fizz"** w wielokrotnościach `3`, **"buzz"** w wielokrotnościach `5` i **"fizzbuzz"** w wielokrotnościach `3` oraz `5`.
Sprawdź tę wersję FizzBuzz od [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
@ -743,14 +683,10 @@ Nie radzę jednak pisać wyżej podczas wywiadów. Trzymaj się długiego, ale w
- https://gist.github.com/jaysonrowe/1592432
### Dlaczego generalnie dobrym pomysłem jest pozostawienie globalnego zasięgu witryny takim, jakim jest, i nigdy go nie dotykać?
Każdy skrypt ma dostęp do zakresu globalnego, a jeśli wszyscy użyją globalnej przestrzeni nazw do zdefiniowania swoich zmiennych, prawdopodobnie dojdzie do kolizji. Wzorzec modułu (IIFE) służy do enkapsulacji zmiennych w lokalnej przestrzeni nazw.
### Dlaczego miałbyś używać czegoś takiego jak zdarzenie `load`? Czy to wydarzenie ma wady? Czy znasz jakieś alternatywy i dlaczego miałbyś je wykorzystać?
Zdarzenie `load` odpala po zakończeniu ładowania dokumentu. W tym momencie wszystkie obiekty w dokumencie znajdują się w DOM, a wszystkie obrazy, skrypty, łącza i podramki zostały załadowane.
@ -763,8 +699,6 @@ TODO.
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
### Wyjaśnij, czym jest SAP i jak uczynić ją przyjazną SEO.
Poniżej zaczerpnięto z niesamowitego [Grab Front End Guide](https://github.com/grab/front-end-guide), który przypadkiem jest napisany przeze mnie!
@ -792,8 +726,6 @@ Wady:
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### Jaki jest zakres twojego doświadczenia z Promises i/lub ich polyfills?
Posiadanie praktycznej wiedzy na ten temat. Obietnica (promise) to obiekt, który może kiedyś wygenerować jedną wartość: wartość rozwiązaną lub przyczynę, dla której nie została ona rozwiązana (np. wystąpił błąd sieci). Obietnica może być w jednym z 3 możliwych stanów: spełniona, odrzucona lub oczekująca (fulfilled, rejected, pending). Użytkownicy promise mogą dołączać callbacks, aby obsłużyć spełnioną wartość lub przyczynę odrzucenia.
@ -804,8 +736,6 @@ Niektóre wspólne polyfills są `$.deferred`, Q oraz Bluebird ale nie wszystkie
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### Jakie są zalety i wady korzystania z obietnic zamiast callbacks?
**Zalety**
@ -829,8 +759,6 @@ Niektóre wspólne polyfills są `$.deferred`, Q oraz Bluebird ale nie wszystkie
- https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
### Jakie są zalety/wady pisania kodu JavaScript w języku kompilującym się w JavaScript?
Niektóre przykłady języków, które kompilują się do JavaScript włączając CoffeeScript, Elm, ClojureScript, PureScript i TypeScript.
@ -857,8 +785,6 @@ W praktyce, ES2015 znacznie poprawił JavaScript i znacznie ułatwił pisanie. O
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### Jakich narzędzi i technik używasz do debugowania kodu JavaScript?
- React i Redux
@ -876,8 +802,6 @@ W praktyce, ES2015 znacznie poprawił JavaScript i znacznie ułatwił pisanie. O
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### Jakich konstrukcji językowych używasz do iteracji właściwości obiektów i elementów tablicy?
Dla obiektów:
@ -909,8 +833,6 @@ for (let [index, elem] of arr.entries()) {
- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
### Wyjaśnij różnicę między obiektami mutable, a immutable.
Niezmienność jest podstawową zasadą programowania funkcjonalnego i ma wiele do zaoferowania także programom obiektowym. Zmienny obiekt to obiekt, którego stan można zmodyfikować po utworzeniu. Niezmienny obiekt to obiekt, którego stanu nie można zmienić po jego utworzeniu.
@ -995,8 +917,6 @@ Zamrożenie obiektu nie pozwala na dodanie nowych właściwości do obiektu i un
- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
#### Jak osiągnąć niezmienność we własnym kodzie?
Jednym ze sposobów osiągnięcia niezmienności jest użycie bibliotek takich jak [immutable.js](http://facebook.github.io/immutable-js/), [mori](https://github.com/swannodette/mori) lub [immer](https://github.com/immerjs/immer).
@ -1022,16 +942,12 @@ const alienJohn = {...john, race: 'alien'}; // {race: "alien", name: "John"}
- https://www.sitepoint.com/immutability-javascript/
- https://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/
### Wyjaśnij różnicę między funkcjami synchronicznymi i asynchronicznymi.
Funkcje synchroniczne blokują, a funkcje asynchroniczne nie. W funkcjach synchronicznych instrukcje kończą się przed uruchomieniem następnej instrukcji. W takim przypadku program jest oceniany dokładnie w kolejności instrukcji, a wykonywanie programu jest wstrzymywane, jeśli jedna z instrukcji zajmuje bardzo dużo czasu.
Funkcje asynchroniczne zwykle akceptują wywołanie zwrotne (callback) jako parametr i wykonywanie jest kontynuowane w następnym wierszu natychmiast po wywołaniu funkcji asynchronicznej. Wywołanie zwrotne jest wywoływane tylko wtedy, gdy operacja asynchroniczna jest zakończona, a stos wywołań jest pusty. Intensywne operacje, takie jak ładowanie danych z serwera WWW lub wyszukiwanie w bazie danych, powinny być wykonywane asynchronicznie, aby główny wątek mógł kontynuować wykonywanie innych operacji zamiast blokować do czasu zakończenia tej długiej operacji (w przypadku przeglądarek interfejs użytkownika (UI) zawiesza się).
### Co to jest pętla zdarzeń? Jaka jest różnica między stosem wywołań (call stack) a kolejką zadań (task queue)?
Pętla zdarzeń jest pętlą jednowątkową, która monitoruje stos wywołań i sprawdza, czy w kolejce zadań jest jakaś praca do wykonania. Jeśli stos wywołań jest pusty, a w kolejce zadań znajdują się funkcje wywołania zwrotnego, funkcja jest usuwana z kolejki i przekazywana na stos wywołań, który ma zostać wykonany.
@ -1043,8 +959,6 @@ Jeśli jeszcze nie sprawdziłeś Philipa Roberta i jego [talk odnośnie Event Lo
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
### Wyjaśnij różnice w korzystaniu z `foo` pomiędzy `function foo() {}` i `var foo = function() {}`
Pierwsza jest deklaracją funkcji, a druga jest wyrażeniem funkcji. Kluczową różnicą jest to, że deklaracje funkcji mają swoje ciała windowane, ale ciała wyrażeń funkcji nie są (mają takie samo zachowanie podczas windowania jak zmienne). Więcej informacji na temat windowania znajduje się w powyższym pytaniu [na temat windowania](#wytłumacz-hoisting). Jeśli spróbujesz wywołać wyrażenie funkcyjne przed jego zdefiniowaniem, otrzymasz błąd `Uncaught TypeError: XXX is not a function`.
@ -1071,8 +985,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
### Jakie są różnice między zmiennymi utworzonymi za pomocą `let`, `var` lub `const`?
Zmienne zadeklarowane przy użyciu słowa kluczowego `var` mają zasięg do funkcji, w której zostały utworzone, lub jeśli zostały utworzone poza jakąkolwiek funkcją, do obiektu globalnego. Parametry `let` i `const` są _block scoped_, co oznacza, że są dostępne tylko w najbliższym zestawie nawiasów klamrowych (funkcja, blok if-else lub pętla for).
@ -1153,8 +1065,6 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
### Jakie są różnice między konstruktorami funkcji ES6 i ES5?
Najpierw spójrzmy na przykład każdego:
@ -1206,14 +1116,10 @@ Używanie dziedziczenia w ES5 jest znacznie bardziej szczegółowe, a wersja ES6
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
### Czy możesz podać przypadek użycia nowej składni funkcji arrow =>? Czym ta nowa składnia różni się od innych funkcji?
Jedną oczywistą zaletą funkcji strzałek jest uproszczenie składni potrzebnej do tworzenia funkcji, bez potrzeby stosowania słowa kluczowego `function`. Funkcja `this` w funkcjach strzałek jest również związana z otaczającym zakresem, który jest inny w porównaniu do zwykłych funkcji, w których `this` jest określane przez obiekt wywołujący go. Leksykonowalne `this` jest przydatne, gdy wywołuje się callbacki, szczególnie w komponentach React.
### Jaka jest zaleta korzystania ze składni arrow syntax dla metody w konstruktorze?
Główną zaletą używania funkcji strzałkowej jako metody w konstruktorze jest to, że wartość `this` jest ustawiana w momencie tworzenia funkcji i nie może się później zmienić. Tak więc, gdy konstruktor jest używany do utworzenia nowego obiektu, `this` zawsze będzie odnosić się do tego obiektu. Na przykład, powiedzmy, że mamy konstruktor `Person`, który bierze imię jako argument i ma dwie metody `console.log` o tej nazwie, jedną jako funkcję zwykłą, a drugą jako funkcję strzałkową:
@ -1261,8 +1167,6 @@ Może to być szczególnie pomocne w komponentach klasy React. Jeśli zdefiniuje
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
### Jaka jest definicja funkcji wyższego rzędu?
Funkcja wyższego rzędu to dowolna funkcja, która przyjmuje jedną lub więcej funkcji jako argumenty, których używa do działania na niektórych danych i / lub zwraca w rezultacie funkcję. Funkcje wyższego rzędu mają na celu wyodrębnienie niektórych operacji, które są wykonywane wielokrotnie. Klasycznym przykładem tego jest `map`, który przyjmuje tablicę i funkcję jako argumenty. `map` następnie używa tej funkcji do transformacji każdego elementu w tablicy, zwracając nową tablicę z transformowanymi danymi. Inne popularne przykłady w JavaScript to `forEach`, `filter` i `reduce`. Funkcja wyższego rzędu nie musi tylko manipulować tablicami, ponieważ istnieje wiele przypadków użycia do zwrócenia funkcji z innej funkcji. `Function.prototype.bind` jest jednym z takich przykładów w JavaScript.
@ -1303,8 +1207,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### Czy możesz podać przykład destrukturyzacji obiektu lub tablicy?
Destrukturyzacja to wyrażenie dostępne w ES6, które umożliwia zwięzły i wygodny sposób na wydobycie wartości Obiektów (Objects) lub Tablic (Arrays) i umieszczenie ich w odrębnych zmiennych.
@ -1347,8 +1249,6 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### ES6 Template Literals oferują dużą elastyczność w generowaniu ciągów, czy możesz podać przykład?
Literały szablonów ułatwiają interpolację stringów lub uwzględnianie zmiennych w stringach. Przed ES2015 było coś takiego:
@ -1414,8 +1314,6 @@ document.body.innerHTML = `
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
### Czy możesz podać przykład curry function i dlaczego ta składnia ma tę zaletę?
Currying to wzorzec, w którym funkcja z więcej niż jednym parametrem jest podzielona na wiele funkcji, które po wywołaniu szeregowym będą gromadzić wszystkie wymagane parametry pojedynczo. Ta technika może być użyteczna do ułatwienia czytania i komponowania kodu napisanego w funkcjonalnym stylu. Ważne jest, aby pamiętać, że aby funkcja była curry, musi zacząć od jednej funkcji, a następnie podzielić ją na sekwencję funkcji, z których każda akceptuje jeden parametr.
@ -1452,8 +1350,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### Jakie są zalety korzystania ze składni spread syntax i czym różni się od rest syntax?
Spread syntax z ES6 jest bardzo przydatna podczas kodowania w funkcjonalnym paradygmacie, ponieważ możemy łatwo tworzyć kopie tablic lub obiektów bez uciekania się do `Object.create`, `slice` lub funkcji bibliotecznej. Ta funkcja języka jest często używana w projektach Redux i RxJS.
@ -1498,8 +1394,6 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
### Jak współdzielić kod między plikami?
To zależy od środowiska JavaScript.
@ -1510,8 +1404,6 @@ Na serwerze (Node.js) powszechnym sposobem było użycie CommonJS. Każdy plik j
ES2015 definiuje składnię modułu, która ma zastąpić zarówno AMD, jak i CommonJS. To będzie ostatecznie obsługiwane zarówno w przeglądarce, jak i w środowisku Node.
###### Bibliografia
- http://requirejs.org/docs/whyamd.html
@ -1526,8 +1418,6 @@ Statyczne elementy klasy (właściwości / metody) nie są powiązane z konkretn
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
### Inne odpowiedzi
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

14
website/i18n/pr/docusaurus-plugin-content-docs/current/css-questions.md
View File

@ -28,8 +28,6 @@ Eu escreveria regras CSS com baixa especificidade para que possam ser facilmente
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### <a id="02">Qual é a diferença entre "redefinir"/"resetting" e "normalizar"/"normalizing" o CSS? Qual você escolheria e porquê?</a>
- <b>Redefinir</b> - Redefinir visa eliminar todos os estilos padrão do navegador nos elementos. Por exemplo: `margins, paddings, font-size` são todos redefinidos. Você terá que redeclarar o estilo dos elementos tipográficos comuns.
@ -41,8 +39,6 @@ Eu escolheria redefinir quando tenho um design de site muito personalizado ou n
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### <a id="03">Descreva `float` e como eles funcionam.</a>
Float é uma propriedade de posicionamento CSS. Os elementos flutuantes permanecem como parte do fluxo da página e afetarão o posicionamento de outros elementos (por exemplo, o texto fluirá em torno dos elementos flutuantes), ao contrário dos elementos `position: absolute`, que são removidos do fluxo da página.
@ -61,8 +57,6 @@ Como alternativa, atribua a propriedade `overflow: auto` ou `overflow: hidden` a
- https://css-tricks.com/all-about-floats/
### <a id="04">Descreva o z-index e como o contexto de empilhamento é formado.</a>
A propriedade `z-index` em CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. O `z-index` afeta apenas os elementos que possuem um valor `position` que não seja `static`.
@ -81,8 +75,6 @@ _Nota: O que exatamente qualifica um elemento para criar um contexto de empilham
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
### <a id="05">Descreva o BFC (Block Formatting Context) e como ele funciona.</a>
Um Block Formatting Context (BFC) é parte da renderização CSS visual de uma página da web na qual as caixas de bloco são dispostas. Floats, elementos com position absolute, `inline-block`, `table-cells`, `table-caption` e elementos com `overflow` diferente de `visible` (exceto quando esse valor foi propagado para a janela de visualização) estabelecem novos contextos de formatação de bloco.
@ -105,8 +97,6 @@ Margens verticais entre caixas de nível de bloco adjacentes em um colapso BFC.
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### <a id="06">Quais são as várias técnicas de limpeza e quais são apropriadas para qual contexto?</a>
- `div` vazia, método - `<div style="clear: both;"></div>`.
@ -115,8 +105,6 @@ Margens verticais entre caixas de nível de bloco adjacentes em um colapso BFC.
Em grandes projetos, eu escreveria uma classe utilitária `.clearfix` e a usaria nos lugares onde preciso. `overflow: hidden` pode cortar os filhos se os filhos forem mais altos do que os pais e não for muito ideal.
### <a id="07">Explique os sprites CSS e como você os implementaria em uma página ou site.</a>
Sprites CSS combinam várias imagens em uma única imagem maior. É uma técnica comumente usada para ícones (o Gmail usa). Como implementar:
@ -132,6 +120,4 @@ Sprites CSS combinam várias imagens em uma única imagem maior. É uma técnica
- https://css-tricks.com/css-sprites/
Vamos traduzir esse conteúdo juntos para toda comunidade. Agradecemos a sua ajuda na tradução!

22
website/i18n/pr/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -24,8 +24,6 @@ Moral da história - apenas adiciona `<!DOCTYPE html>` no início da sua página
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
### Como podemos servir uma página com conteúdo em vários idiomas?
A questão é um pouco vaga. Vou supor que quer saber sobre o caso mais comum: servir uma página com conteúdo disponível em vários idiomas, mas o conteúdo dentro da página deve ser exibido somente em um idioma coerente.
@ -40,8 +38,6 @@ No back end, o HTML irá conter marcadores de posição (_placeholders_) `i18n`
- https://www.w3.org/International/getting-started/language
### O que deve ser levado em conta ao projetar ou desenvolver sites multilíngues?
- Usar o atributo `lang` no HTML.
@ -58,8 +54,6 @@ No back end, o HTML irá conter marcadores de posição (_placeholders_) `i18n`
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### Para que servem os atributos `data-`?
Antes que os frameworks JavaScript se tornassem populares, os programadores front-end usavam atributos `data-` para armazenar dados extras dentro do próprio DOM, sem usar outros hacks como atributos fora do padrão, propriedades extras no DOM. Os atributos `data-` servem para armazenar dados personalizados privados de uma página ou aplicativo, para os quais não há mais atributos ou elementos apropriados.
@ -73,8 +67,6 @@ No entanto, um uso perfeitamente válido dos atributos `-data` é adicionar um g
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### Considere o HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?
- Semântica - Permite descrever o conteúdo mais precisamente.
@ -90,8 +82,6 @@ No entanto, um uso perfeitamente válido dos atributos `-data` é adicionar um g
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Descreva a diferença entre `cookie`,`sessionStorage` e `localStorage`.
Todas as tecnologias mencionadas são mecanismos de armazenamento de valor-chave do lado do cliente. Elas só podem armazenar valores como strings.
@ -112,8 +102,6 @@ _Nota: Se o usuário decide apagar os dados de navegação através de qualquer
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`.
- `<script>` - A análise do HTML é bloqueada, o script é obtido e executado imediatamente, a análise do HTML é retomada após o script ser executado.
@ -129,8 +117,6 @@ Nota: Os atributos `async` e` defer` são ignorados para scripts que não tenham
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### Por que geralmente é uma boa ideia posicionar os `<link>`s para CSS entre `<head></head>` e os `<script>`s de JS antes de `</body>`? Existe alguma exceção?
**Colocar `<link>`s no `<head>`**
@ -147,8 +133,6 @@ Uma exceção para o posicionamento de `<script>`s na parte inferior é quando o
- https://developer.yahoo.com/performance/rules.html#css_top
### O que é renderização progressiva?
A renderização progressiva é o nome dado às técnicas utilizadas para melhorar o desempenho de uma página web (em particular, melhorar a percepção do usuário sobre o tempo de carregamento) de forma a renderizar o conteúdo para exibição o mais rápido possível.
@ -166,8 +150,6 @@ Exemplos de tais técnicas:
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### Por que usar um atributo `srcset` numa tag de imagem? Explique o processo que o navegador usa ao avaliar o conteúdo desse atributo.
Tu usarias o atributo `srcset` quando quiseres exibir imagens diferentes para os utilizadores, dependendo da largura do ecrã (tela) do dispositivo - mostrar imagens de qualidade superior para dispositivos com display de retina melhora a experiência do utilizador, enquanto fornecer imagens de baixa resolução para dispositivos de baixo custo melhora o desempenho e diminui o desperdício de dados (porque mostrar uma imagem maior não terá nenhuma diferença visível). Por exemplo: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` diz ao navegador para mostrar o `.jpg` pequeno, médio ou grande dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para um dispositivo com 320px de largura, são feitos os seguintes cálculos:
@ -187,14 +169,10 @@ O `srcset` resolve o problema de querer servir arquivos de imagem menores para d
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### Já usou diferentes linguagens de modelos de HTML antes?
Sim, Pug (anteriormente Jade), ERB, Slim, Handlebars, Jinja, Liquid, para citar alguns. Na minha opinião, eles são mais ou menos o mesmo e oferecem funcionalidades semelhantes de escape de conteúdo e filtros úteis para manipular os dados a serem exibidos. A maioria motores de template também permitirá que injetes teus próprios filtros no caso de precisares de processamento personalizado antes da exibição.
### Outras respostas
- https://neal.codes/blog/front-end-interview-questions-html/

22
website/i18n/ru/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -24,8 +24,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://html.spec.whatwg.org/multipage/xhtml.html
- https://quirks.spec.whatwg.org/
### Как следует оформлять страницу, содержимое которой может быть на разных языках?
Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как показывать страницу, где содержимое доступно на нескольких языках, но отображается на одном определенном.
@ -38,8 +36,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://www.w3.org/International/getting-started/language
### На что необходимо обратить внимание при разработке мультиязычных сайтов?
- Используйте атрибут `lang` в HTML.
@ -55,8 +51,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### Для чего нужны `data-` атрибуты?
До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали `data-` атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов на странице или в приложении.
@ -68,8 +62,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
- Семантика. Позволяет более точно описать из чего состоит контент.
@ -85,8 +77,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Объясните разницу между `cookie`, `sessionStorage` и `localStorage`.
Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.
@ -105,8 +95,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Объясните разницу между `<script>`, `<script async>` и `<script defer>`.
- `<script>` - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
@ -121,8 +109,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед `</body>`? Знаете ли вы исключения?
**Размещение `<link>` внутри `<head>`**
@ -141,8 +127,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
### Что такое прогрессивный рендеринг
Прогрессивный рендеринг — это название технологий, используемых для ускорения отрисовки страниц (в частности, для уменьшения времени загрузки), чтобы показать пользователю контент как можно скорее.
@ -160,8 +144,6 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### Для чего используется атрибут `srcset` в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.
Вы должны использовать атрибут `srcset`, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:
@ -181,14 +163,10 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
### Приходилось ли вам работать с языками HTML-шаблонизации?
Да, Pug (ранее известный как Jade), ERB, Slim, Handlebars, Jinja, Liquid и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство шаблонизаторов позволяют вводить собственные фильтры, если вам необходима дополнительная обработка контента перед его отображением.
### Другие ответы
- https://neal.codes/blog/front-end-interview-questions-html/

108
website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -20,8 +20,6 @@ import TOCInline from '@theme/TOCInline';
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### Объясните, как `this` работает в JavaScript
Нельзя в двух словах объяснить работу ключевого слова `this`; это одно из самых запутанных понятий в JavaScript. Говоря максимально простым языком, значение `this` зависит от того, как вызывается функция. Я прочитал много объяснений о работе `this`, и считаю объяснение [Arnav Aggrawal](https://medium.com/@arnav_aggarwal) наиболее понятным. Применяются следующие правила:
@ -40,8 +38,6 @@ import TOCInline from '@theme/TOCInline';
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### Расскажите, как работает прототипное наследование
Этот вопрос очень часто задают на собеседованиях. Все объекты в JavaScript имеют свойство `__proto__`, которое является ссылкой на другой объект. Когда происходит обращение к свойству объекта, и если свойство не найдено в этом объекте, то механизм JavaScript просматривает прототип объекта, затем прототип прототипа и т.д. До тех пор, пока не найдет определенное свойство на одном из прототипов или до тех пор, пока он не достигнет конца цепочки прототипов. Такое поведение имитирует классическое наследование, но на самом деле это скорее [делегирование, чем наследование](https://davidwalsh.name/javascript-objects).
@ -51,8 +47,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
### Что вы думаете о AMD против CommonJS?
Оба являются способами реализации системы модулей, которая изначально не присутствовала в JavaScript до появления ES2015. CommonJS является синхронным, в то время как AMD (Asynchronous Module Definition, асинхронное определение модуля) - соответственно, асинхронным. CommonJS разработан с учетом разработки на стороне сервера, в то время как AMD с поддержкой асинхронной загрузки модулей больше предназначена для браузеров.
@ -66,8 +60,6 @@ import TOCInline from '@theme/TOCInline';
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### Объясните, почему это не является IIFE: `function foo(){ }();`. Что необходимо изменить, чтобы это стало IIFE??
IIFE расшифровывается как Immediately Invoked Function Expression - немедленно вызываемое функциональное выражение. Синтаксический анализатор JavaScript читает `function foo(){ } ();` как `function foo(){ }` и `();`, где первое выражение - это _объявление функции_, а второе (пара скобок) - попытка вызова функции, но так как имя не указано, он выдает ошибку `Uncaught SyntaxError: Unexpected token`.
@ -89,8 +81,6 @@ console.log(foo); // undefined
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
### В чем различие между переменными, значение которых: `null`, `undefined` и не объявлено? Как бы вы проверили их на каждое из этих значений?
**Необъявленные** переменные создаются, когда вы присваиваете значение идентификатору, который не был ранее создан при помощи `var`,`let` или `const`. Необъявленные переменные будут определены глобально, вне текущей области видимости. В строгом режиме, будет ошибка `ReferenceError`, когда вы попытаетесь назначить значение необъявленной переменной. Необъявленные переменные плохи так же, как и глобальные переменные. Избегайте их любой ценой! Чтобы проверить на их наличие, оберните код в блок `try`/`catch`.
@ -136,8 +126,6 @@ console.log(foo == undefined); // true. Неправильно, не испол
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### Что такое замыкание и как/для чего его используют?
Замыкание - это комбинация функции и лексического окружения, в которой эта функция была объявлена. Слово "лексический" относится к тому факту, что лексическая область видимости использует место, где переменная объявлена в исходном коде, чтобы определить, где эта переменная доступна. Замыкания - это функции, которые имеют доступ к переменным внешней (замыкающей) функции - цепочке областей видимости даже после того, как внешняя функция вернулась.
@ -152,8 +140,6 @@ console.log(foo == undefined); // true. Неправильно, не испол
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### Можете ли вы описать основное различие между циклом `.forEach` и циклом `.map()`? И в каких случаях каждый из них используется?
Чтобы понять разницу между ними, давайте посмотрим, что делает каждая функция.
@ -193,8 +179,6 @@ const doubled = a.map((num) => {
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### В каких случаях обычно используются анонимные функции?
Они могут использоваться в IIFE для инкапсуляции кода в локальную область видимости, чтобы объявленные в ней переменные не попадали в глобальную область видимости.
@ -228,8 +212,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### Как вы организуете свой код? (module pattern, classical inheritance)
В прошлом я использовал Backbone, который поощряет ООП подход, создавая Backbone модели и добавляя к ним методы.
@ -238,8 +220,6 @@ console.log(double); // [2, 4, 6]
Я избегаю использования наследования классов, где это возможно. Если же мне это необходимо сделать, то я придерживаюсь [этих правил](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
### В чем разница между host-объектами и нативными объектами?
Нативные объекты - это объекты, которые являются частью языка JavaScript, определенного в спецификации ECMAScript, такие как `String`,`Math`, `RegExp`,`Object`, `Function` и т.д.
@ -250,8 +230,6 @@ console.log(double); // [2, 4, 6]
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### В чем разница между: `function Person(){}`, `var person = Person()`, и `var person = new Person()`?
Этот вопрос не совсем понятен. Я полагаю, что суть вопроса о конструкторах в JavaScript. Строго говоря, `function Person(){}` - это обычное объявление функции. Принято называть с заглавной буквы функции, которые предназначены для использования в качестве конструкторов.
@ -278,8 +256,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
### В чем разница между `.call` и `.apply`?
Сходство заключается в том, что и `.call`, и `.apply` используются для вызова функций, а также первый параметр будет использоваться как значение `this` внутри функции. А разница в том, что `.call` в качестве следующих аргументов принимает аргументы, разделенные запятыми, в то время как`.apply` в качестве следующих аргументов принимает массив аргументов.
@ -293,8 +269,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### Что делает и для чего нужна функция `Function.prototype.bind`?
Взято дословно с [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
@ -307,8 +281,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
### В каких случаях используется `document.write()`?
`document.write()` записывает строку текста в поток документа, открытого при помощи `document.open()`. Когда `document.write()` выполняется после загрузки страницы, он вызывает `document.open`, который очищает весь документ (`<head>`и`<body>` будут удалены!) и заменяет содержимое на заданное значение параметра. Подобный подход считается опасным и не рекомендуется его использовать.
@ -320,8 +292,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
**Feature detection (определение возможностей браузера)**
@ -360,8 +330,6 @@ if (document.getElementsByTagName) {
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
### Расскажите об Ajax как можно более подробно
Ajax (асинхронный JavaScript и XML) - это набор методов веб-разработки, использующих множество веб-технологий на стороне клиента для создания асинхронных веб-приложений. С помощью Ajax веб-приложения могут отправлять данные на сервер и получать их с сервера асинхронно (в фоновом режиме), не влияя на отображение и поведение открытой страницы. Отделяя уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, в частности, веб-приложениям динамически изменять содержимое без необходимости перезагрузки всей страницы. На практике для получения/передачи данных используется формат данных JSON вместо XML из-за того, что JSON основан на JavaScript.
@ -373,8 +341,6 @@ Ajax (асинхронный JavaScript и XML) - это набор методо
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
### Какие преимущества и недостатки в использовании Ajax?
**Преимущества**
@ -391,8 +357,6 @@ Ajax (асинхронный JavaScript и XML) - это набор методо
- Некоторые поисковые роботы не выполняют JavaScript и не видят данные, загружаемые при помощи JavaScript.
- Большая часть недостатков SPA.
### Объясните, как работает JSONP (и почему это не совсем AJAX)
JSONP (JSON с набивкой) - это способ, часто используемый для обхода политики ограничения домена в браузерах, потому что Ajax-запросы с текущей страницы к серверу, находящемуся в другом домене, запрещены.
@ -425,8 +389,6 @@ JSONP может быть небезопасным и иметь повышен
- https://stackoverflow.com/a/2067584/1751946
### Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?
Да. Handlebars, Underscore, Lodash, AngularJS, и JSX. Мне не нравилась шаблонизация в AngularJS, потому что там активно использовались строки в директивах и легко допустить ошибку при опечатке. JSX - мой новый фаворит, так как он ближе к JavaScript и почти не имеет дополнительного синтаксиса. В настоящее время вы даже можете использовать строковые литералы шаблонов ES2015 в качестве быстрого способа создания шаблонов, не полагаясь на сторонний код.
@ -437,8 +399,6 @@ const template = `<div>My name is: ${name}</div>`;
Однако следует помнить о возможном XSS в вышеприведенном подходе, поскольку содержимое не экранируется, в отличие от библиотек шаблонизации.
### Расскажите, что такое поднятие (hoisting)
Поднятие (hoisting) - это термин, используемый для объяснения поведения объявлений переменных в вашем коде. Переменные, объявленные или инициализированные при помощи ключевого слова `var`, будут перемещены в верхнюю часть текущей области, что мы называем "поднятием". Однако, "поднимается" только объявление переменной, присвоение значения (если оно имеется) останется на прежнем месте.
@ -477,14 +437,10 @@ var bar = function () {
console.log(bar); // [Function: bar]
```
### Объясните, что такое всплытие событий (event bubbling)
Когда событие срабатывает на элементе DOM, оно попытается обработать событие (если привязан обработчик), затем событие всплывет вверх к своему родителю и это повторится снова. Подобное всплытие проходит по всем предкам элемента вплоть до `document`. Всплытие событий является механизмом, на котором основано делегирование событий.
### В чем разница между "атрибутом" (attribute) и "свойством" (property)?
Атрибуты определены в разметке HTML, а свойства определены в DOM. Чтобы проиллюстрировать разницу, представьте, что у нас есть это текстовое поле в HTML: `<input type="text" value="Hello">`.
@ -506,8 +462,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### Почему не следует расширять нативные JavaScript-объекты?
Расширение встроенного/нативног объекта JavaScript означает добавление свойств/функций к его прототипу. Хотя на первый взгляд это может показаться хорошей идеей, на практике это опасно. Представьте, что ваш код использует несколько библиотек, которые расширяют `Array.prototype`, добавляя один и тот же метод `contains`. В результате код будет работать неверно, если поведение этих двух методов не будет одинаковым.
@ -518,8 +472,6 @@ console.log(input.value); // Hello World!
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### В чем разница между событием `load` и событием `DOMContentLoaded`?
Событие `DOMContentLoaded` вызывается, когда исходный HTML-документ полностью загружен и обработан, не дожидаясь окончания загрузки таблиц стилей, изображений и скриптов.
@ -531,8 +483,6 @@ console.log(input.value); // Hello World!
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
### В чем разница между `==` и `===`?
`==` - это оператор абстрактного сравнения, а `===` - оператор строгого сравнения. Оператор `==` будет сравнивать на равенство после выполнения любых необходимых преобразований типов. Оператор `===` не будет выполнять преобразование типов, поэтому, если два значения не одного типа, `===` просто вернет `false`. При использовании `==` могут происходить такие странные вещи, как:
@ -558,8 +508,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### Объясните same-origin policy в контексте JavaScript
Same-origin policy (принцип одинакового источника) не позволяет JavaScript выполнять запросы за границы домена. Источник определяется как комбинация схемы URI, имени хоста и номера порта. Этот принцип не позволяет вредоносному сценарию на одной странице получить доступ к конфиденциальным данным на другой через объектную модель документа этой страницы.
@ -568,8 +516,6 @@ Same-origin policy (принцип одинакового источника) н
- https://en.wikipedia.org/wiki/Same-origin_policy
### Сделайте так, чтобы этот код работал:
```js
@ -584,8 +530,6 @@ function duplicate(arr) {
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### Почему тернарный оператор так называется?
"Тернарный" означает три. Троичное выражение принимает три операнда: условие, выражение "then" и выражение "else". Тернарные операторы не являются исключительными для JavaScript, и я не знаю, почему подобный вопрос был добавлен в этот список.
@ -594,8 +538,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
### Что делает строчка "use strict";? Какие достоинства и недостатки от ее использования?
'use strict' это директива, используемая для включения строгого режима во всем скрипте или отдельных функциях.
@ -623,8 +565,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### Напишите цикл, который перебирает числа до `100`, возвращая **"fizz"** на числа кратные `3`, **"buzz"** на числа кратные `5` и **"fizzbuzz"** на числа кратные `3` и `5`.
Взгляните на версию FizzBuzz от [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
@ -643,14 +583,10 @@ for (let i = 1; i <= 100; i++) {
- https://gist.github.com/jaysonrowe/1592432
### Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
Каждый скрипт имеет доступ к глобальной области видимости, и если каждый будет использовать глобальное пространство имен для определения своих переменных, то могут возникнуть конфликты. Используйте модульный паттерн (используя IIFE) для инкапсуляции ваших переменных в локальное пространство имен.
### Для чего используют событие `load`? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
Событие `load` происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
@ -661,8 +597,6 @@ for (let i = 1; i <= 100; i++) {
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
### Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
Текст ниже взят из замечательного [руководства по фронтенду от Grab](https://github.com/grab/front-end-guide), который по счастливой случайности тоже написан мной.
@ -690,8 +624,6 @@ for (let i = 1; i <= 100; i++) {
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### Насколько вы опытны в работе с промисами (promises) и/или их полифилами?
Обладаю практическими знаниями о них. Промис - это объект, который может вернуть одно значение в будущем: либо выполненное значение, либо причина, по которой оно не было выполнено (например, произошла ошибка сети). Промис может находиться в одном из 3 возможных состояний: выполнено, отклонено или ожидает выполнения. При использовании промисов можно добавлять callback-функции для обработки выполненного значения или причины отказа.
@ -702,8 +634,6 @@ for (let i = 1; i <= 100; i++) {
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
**Преимущества**
@ -727,8 +657,6 @@ for (let i = 1; i <= 100; i++) {
- https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
### Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?
Вот несколько языков, которые компилируются в JavaScript: CoffeeScript, Elm, ClojureScript, PureScript и TypeScript.
@ -755,8 +683,6 @@ for (let i = 1; i <= 100; i++) {
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### Какие инструменты и методы вы используете при отладке кода?
- React и Redux
@ -774,8 +700,6 @@ for (let i = 1; i <= 100; i++) {
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
Для объектов:
@ -807,24 +731,18 @@ for (let [index, elem] of arr.entries()) {
- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
### Объясните разницу между изменяемыми (mutable) и неизменяемыми (immutable) объектами
- Приведите пример неизменяемого объекта в JavaScript
- Какие преимущества и недостатки у неизменяемости?
- Как вы можете достигнуть неизменяемости в вашем коде?
### Объясните разницу между синхронными и асинхронными функциями
Синхронные функции являются блокирующими, а асинхронные - нет. В синхронных функциях одна операция должна завершиться, прежде чем будет запущена следующая операция. В этом случае скрипт выполняется строго по порядку операций, и выполнение скрипта приостанавливается, если одна из операций занимает очень много времени.
Асинхронные функции обычно принимают callback-функцию в качестве параметра, и выполнение продолжается на следующей строке сразу после вызова асинхронной функции. Callback-функция вызывается только тогда, когда асинхронная операция завершена и стек вызовов пуст. Ресурсоемкие операции, такие как загрузка данных с веб-сервера или запросы к базе данных, должны выполняться асинхронно, чтобы основной поток мог продолжать выполнять другие операции вместо блокировки до завершения этой долгой операции (в случае браузеров пользовательский интерфейс будет зависать).
### Что такое цикл событий (event loop)? В чем разница между стеком вызовов (call stack) и очередью событий (task queue)?
Цикл событий - это однопоточный цикл, который контролирует стек вызовов и проверяет, есть ли какая-либо работа, которую необходимо выполнить в очереди задач. Если стек вызовов пуст и в очереди задач есть callback-функции, то функция удаляется из очереди и помещается в стек вызовов для выполнения.
@ -836,8 +754,6 @@ for (let [index, elem] of arr.entries()) {
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
### Объясните разницу при использовании `foo` в `function foo() {}` и `var foo = function() {}`
Первое - объявление функции, а второе - функциональное выражение. Ключевое отличие состоит в том, что тело функции при объявлении поднимается наверх, а тело функциональных выражений - нет (они имеют такое же поведение поднятия, что и переменные). Для получения более подробной информации, обратитесь к вопросу выше [о поднятии](#расскажите-что-такое-поднятие-hoisting). Если вы попытаетесь вызвать выражение функции до того, как оно будет определено, вы получите ошибку `Uncaught TypeError: XXX is not a function`.
@ -864,8 +780,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
### В чем различие между переменными, созданными при помощи `let`, `var` и `const`?
Переменные, объявленные при помощи ключевого слова `var`, относятся к области видимости функции, в которой они созданы. Или, если они созданы вне какой-либо функции - к глобальному объекту. `let` и `const` относятся к блочной области видимости - это означает, что они доступны только в пределах ближайшего набора фигурных скобок (функция, блок if-else или цикл for).
@ -946,8 +860,6 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
### В чем разница между классом в ES6 и функцией-конструктором в ES5?
Для начала посмотрим на примеры:
@ -999,14 +911,10 @@ class Student extends Person {
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
### Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?
Одним очевидным преимуществом стрелочных функций является упрощение синтаксиса, необходимого для создания функций, без необходимости использования ключевого слова `function`. `This` внутри стрелочных функций также привязано к замыкающей области видимости, в отличие от обычных функций, где `this` определяется контекстом, в котором они вызываются. Лексически привязанное `this` полезно при вызове callback-функций, особенно в компонентах React.
### В чем преимущество использования стрелочных функций для метода в конструкторе?
Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение `this` устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, `this` всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной:
@ -1054,8 +962,6 @@ sayNameFromWindow2(); // John
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
### Дайте определение функции высшего порядка
Функция высшего порядка - это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными и/или возвращает функцию в качестве результата. Функции высшего порядка предназначены для абстрагирования некоторой операции, которая выполняется повторно. Классическим примером является метод `map`, который принимает массив и функцию в качестве аргументов. Затем `map` использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JavaScript являются `forEach`, `filter` и `reduce`. Функции высшего порядка используют не только для манипуляций с массивами, но также и для возврата функции из другой функции, например при использовании `Function.prototype.bind`.
@ -1096,8 +1002,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### Можете ли вы привести пример деструктуризации объекта или массива?
Деструктуризация - это выражение, доступное в ES6, которое предоставляет краткий и удобный способ извлекать значения из объектов или массивов и помещать их в отдельные переменные.
@ -1140,8 +1044,6 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
Шаблонные строки помогают упростить построение строк или включение переменных в строку. До ES2015 писали так:
@ -1207,8 +1109,6 @@ document.body.innerHTML = `
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
### Можете ли вы привести пример каррированной функции (curry function) и в чем их преимущество?
Каррирование - это паттерн, где функция с более чем одним параметром разбивается на несколько функций, которые при последовательном вызове будут накапливать все необходимые параметры по одному. Этот метод может быть полезен для облегчения чтения и написания кода, написанного в функциональном стиле. Важно отметить, что каррированная функция должна начинаться как одна функция, а затем разбиваться на последовательность функций, каждая из которых принимает один параметр.
@ -1245,8 +1145,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### В чем преимущества использования spread оператора и чем он отличается от rest оператора?
Spread оператор синтаксиса ES6 очень полезен при написании кода в функциональном стиле, поскольку мы можем легко создавать копии массивов или объектов, не прибегая к `Object.create`,`slice` или функции библиотеки. Эта языковая функция часто используется в проектах с Redux и RxJS.
@ -1291,8 +1189,6 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
### Каким образом можно обмениваться кодом между файлами?
Это зависит от среды выполнения JavaScript.
@ -1303,8 +1199,6 @@ const {e, f, ...others} = {
ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.
###### Ссылки
- http://requirejs.org/docs/whyamd.html
@ -1319,8 +1213,6 @@ ES2015 позволяет использовать модульный синта
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
### Другие ответы
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

62
website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md
View File

@ -28,8 +28,6 @@ Mas gusto kong magsulat ng mga CSS na panuntunan na may mababang pagtitiyak ng s
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### Ano ang pagkakaiba sa pagitan ng "pag-reset" at "pag-normalize" ng CSS? saan sa dalawa ang iyong pipiliin, at bakit?
- **Pag-reset** - Ang pag-reset ay sinadya upang i-strip ang lahat ng mga default na pag-istilo ng browser sa mga elemento. Halimbawa. mga `margin`,mga `padding`,mga `font-size` ng lahat ng mga elemento ay naka-set upang maging pareho. Kakailanganin mong ideklara ulit ang estilo para sa karaniwang mga elemento ng tipograpiya.
@ -41,8 +39,6 @@ Mas pipiliin ko ang pagreset kung meron man akong mas pinasadya o hindi tipikal
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### Ilarawan ang mga `float` at kung paano sila gumagana.
Ang Float ay isang katangian ng CSS sa pagpoposisyon. Ang mga floated na elemento ay mananatili na isang bahagi ng daloy ng pahina, at makakaapekto sa pagpoposisyon ng mga elemento (e.g. ang teksto ay dadaloy sa palibot ng mga floated na elemento), di kagaya ng mga `position: absolute` na elemento, na inalis mula sa daloy ng pahina.
@ -69,8 +65,6 @@ Bilang alternatibo, Ibigay ang `overflow: auto` o `overflow: hidden` na katangia
- https://css-tricks.com/all-about-floats/
### Ilarawan ang z-index at kung papaano nabuo ang konteksto.
Ang `z-index` na katangian sa CSS ay kumokontrol sa bertikal na pagkaka-ayos na pagkakasalansan ng mga elemento na sumasapaw. Ang `z-index` ay nakakaapekto lamang sa mga elemento na may `position` na may halagang hindi `static`.
@ -87,8 +81,6 @@ Ang bawat kontekstong nakasalansan ay nakatimpi - matapos ang mga nilalaman ng e
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
### Ilarawan ang BFK (Block Formatting na Konteksto) at papaaano ito gumagana.
Ang Block Formatting na Konteksto (BFK) ay parte ng biswal na pagrender ng css ng isang pahina ng web na kung saan ang mga bloke na kahon ay inilatag. Ang mga floats, ganap na mga nakaposisyon na mga elemento, `inline-blocks`, `table-cells`, mga `table-caption`, at mga elemento na may `overflow` maliban sa `visible` (maliban kung ang halaga na ito ay pinalaganap sa viewport) na magtatag ng mga bagong konteksto sa pag-format ng bloke .
@ -109,8 +101,6 @@ Ang mga bertikal na margin sa pagitan ng mga katabing kahon ng block-level sa is
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?
- Walang laman na `div` na paraaan- `<div style="clear:both;"></div>`.
@ -119,8 +109,6 @@ Ang mga bertikal na margin sa pagitan ng mga katabing kahon ng block-level sa is
Sa mga malaking proyekto, Gusto kong magsulat ng kagamitan na `.clearfix` na klase at gamitin ang mga ito sa mga lugar na kung saan ko kailangan. Ang `overflow: hidden` maaaring i-clip ang mga bata kung ang mga bata ay mas mataas kaysa sa magulang at hindi masyadong mainam.
### Ipaliwanag ang mga CSS na sprite, at papaano mo ipapatupad ang mga ito sa isang pahina o site.
Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong mas malaking imahe. Karaniwang ginagamit itong pamamaraan para sa mga icon (Ang Gmail ay gumagamit nito). Ito ang mga pamamaraan kung papaano ito ipatutupad:
@ -138,8 +126,6 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
- https://css-tricks.com/css-sprites/
### Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?
- Matapos malaman ang isyu at ang nakakasakit na browser, gumamit ng isang hiwalay na estilo ng sheet na naglo-load lamang kapag ginagamit ang partikular na browser na iyon. Bagaman ang pamamaraan na ito ay nangangailangan ng pagrender sa panig ng serber.
@ -147,8 +133,6 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
- Gumamit ng `autoprefixer` upang awtomatikong magdagdag ng mga prefix ng vendor sa iyong code.
- Gumamit ng pa-reset sa CSS o kaya naman ay Normalize.css.
### Papaano mo inahahanda ang iyong mga pahina para sa mga browser na kulang sa tampok? Ano-ano ang mga teknik or proseso ang iyong ginagamit?
- Kaaya-ayang pag-degrade - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa mga modernong browser habang tinitiyak na ito ay nananatiling punksyonal sa mas lumang mga browser.
@ -157,8 +141,6 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
- Autoprefixer para sa pagpapasok ng prefix ng awtomatikong vendor.
- Pag-detect ng mga tampok gamit ang [Modernizr](https://modernizr.com/).
### Ano-ano ang mga iba't ibang pamamaraan upang matago ang nakatagong nilalaman (at gawan ng paraan na ito ay magagamit lamang ng mga mambabasa ng iskrin)?
Ang mga pamamaraan na ito ay may kaugnayan sa pagkakarating (a11y).
@ -177,26 +159,18 @@ Kahit na ang WAI-ARIA ay ang angkop na solusyon, Ako ay pupunta parin sa `absolu
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
### Ikaw ba ay nakagamit kailanman ng sistemang grid?, at kung gayon, Ano ang iyong mas pipiliin?
Gusto ko ang `float`na batay sa sistemang grid dahil mayroon pa rin itong pinakamaraming suportado ng browser sa mga alternatibong umiiral na mga sistema (flex, grid). Ginamit na ito sa Bootstrap nang maraming taon at napatunayan na ito ay gumagana.
### Ikaw ba ay nakagamit oh nakapagpatupad na ng mga query sa mobile o mga layout na espisipik sa mobile/CSS?
OO. Ang isang halimbawa ay ang pagbabago ng isang nakasalansan na pag-navigate ng pill sa isang fixed-bottom na tab na navigation na lampas sa isang tiyak yugto ng pagpatlang.
### Ikaw ba ay pamilyar sa estilong SVG?
Hindi... Sa kasamaang palad
### Makapagbibigay kaba ng halimbawa ng klase ng @media maliban sa iskrin?
Oo, mayroong apat na uri ng @media na mga katangian (kabilang ang _screen_):
@ -220,8 +194,6 @@ Narito ang isang halimbawa ng paggamit ng `print` na uri ng media:
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
### Ano-ano ang ilan sa mga "pasabog" para sa epektibong pagsusulat ng CSS?
Una, unawain na ang mga browser ay tumutugma sa mga tagapili mula sa pinaka-kanang (tagapili ng key) papunta sa kaliwa. Sinasala ng mga browser ang mga elemento sa DOM ayon sa tagapili ng susi, at dumaan ang mga elemento ng magulang nito upang matukoy ang mga tugma. Sa pag-ikli chain ng tagapili, ay siyang pagbilis ng pagtukoy ng browser kung ang elementong iyon ay tumutugma sa tagapili. Kaya iwasan ang mga tagapili ng key na tag at mga pandaigdigang tagapili. Sila ay tugma sa isang malaking bilang ng mga elemento at ang mga browser ay kailangang gumawa ng mas maraming trabaho sa pagtukoy kung ang mga magulang ay tumutugma.
@ -235,8 +207,6 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
### Ano ang mga pakinabang o di-pakinabang ng paggamit ng mga preprocessors ng CSS?
**Mga Bentahe:**
@ -251,8 +221,6 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
- Nangangailangan ng mga gamit para sa pag-preprocess. Maaaring ang oras ng pag-compile ulit ay magiging.
### Ilarawan kung ano ang iyong gusto at di gusto tungkol sa CSS na mga preprocessor na iyong nagamit.
**Mga Gusto:**
@ -265,14 +233,10 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
- Gumagamit ako ng Sass sa pamamagitan ng `node-sass`, na kung saan ay naka-bisa para sa LibSass na nakasulat sa C++. Ako ay madalas na mag-recompile nito kapag ako ay lumilipat sa pagitan ng mga bersyon ng node.
- Sa maliit, ang mga variable na pangalan ay naka-prefix sa `@`, na maaaring malito sa katutubong mga keyword sa CSS tulad ng `@ media`,`@ import` at `@ font-face` na panuntunan.
### Papaano mo ipapatupad ang isang web design comp na gumagamit ng mga di pangkaraniwang font?
Gumamit ng `@font-face` at tukuyin ang `font-family` para sa ibang mga `font-weight`.
### Ipaliwanag kung paano tinutukoy ng isang browser kung anu-anong mga elemento ang tumutugma sa tagapili ng CSS.
Ang parteng ito ay may kaugnayan sa taas tungkol sa mahusay na pagsusulat ng CSS. Ang mga browser ay tumutugma sa mga tagapili mula sa pinaka-kanang bahagi (tagapili ng key) hanggang sa kaliwa. sinasala ng mga browser ang mga elemento sa DOM ayon sa tagapili ng, at tinatawid ang mga elemento ng magulang nito upang matukoy ang mga tugma. Kung mas maikli ang haba ng chain ng tagapili, mas mabilis na matutukoy ng browser kung tumutugma ang sangkap na ito sa tagapili.
@ -283,8 +247,6 @@ Halimbawa ay sa tagapiling `p span` na ito, unang hahanapin ng mga browser ang l
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
### Ilarawan ang mga elementong pseudo at talakayin kung para saan ito gagamitin.
Ang CSS pseudo-element ay isang keyword na dinadagdag sa tagapili na nagbibigay-daan sa iyo ng pag-eestilo ng isang tiyak na bahagi ng piniling elemento(s). Maaari silang magamit para sa dekorasyon (`:first-line`, `:first-letter`) o pagdaragdag ng mga elemento sa markup (kasama ng `content: ...`) na hindi na kailangang baguhin pa ang markup (`:before`, `:after`).
@ -296,8 +258,6 @@ Ang CSS pseudo-element ay isang keyword na dinadagdag sa tagapili na nagbibigay-
- https://css-tricks.com/almanac/selectors/a/after-and-before/
### Ipaliwanag ang iyong pagkakaintindi sa modelong kahon at papaano mo pagsasabihan ang browser sa CSS na mag-render ng iyong layout sa iba't ibang modelo ng kahon.
Ang CSS na modelo ng kahon ay naglalarawan ng mga hugis-parihaba na kahon na binuo para sa mga elemento sa puno ng dokumento at inilatag ayon sa visual na format ng modelo. Ang bawat kahon ay may lugar ng nilalaman (e.g. teksto, isang imahe, atbp.) at opsyonal na nakapalgid na `padding`, `border`, at `margin` na mgaa lugar.
@ -321,8 +281,6 @@ Ang modelo ng kahon ay may mga sumusunod na panuntunan:
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
### Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?
- Bilang default, ang mga elemento ay may `box-sizing: content-box` na naipapatupad, at tanging ang laki ng nilalaman lang ang siyang binibilang.
@ -330,16 +288,12 @@ Ang modelo ng kahon ay may mga sumusunod na panuntunan:
- Ang `taas` ng isang elemento ay kinalkula ngayon ng lapad ng`taas` + bertikal na `padding` + bertikal na `border`.
- Ang `lapad` ng isang elemento ay kinakalkula ngayon ng `lapad` ng nilalaman + pahalang na `padding` + pahalang na `border`.
### Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
TODO
### Ano ang pagkakaiba sa pagitan ng `inline` at `inline-block`?
Ako ay magbibigay ng isang paghahambing sa `block` para sa mahusay na panukalang.
@ -353,8 +307,6 @@ Ako ay magbibigay ng isang paghahambing sa `block` para sa mahusay na panukalang
| Mga margin at paddings | Iginagalang ang lahat ng panig. | Iginagalang ang lahat ng panig. | Iginagalang lamang ang mga pahalang na panig. Ang mga bertikal na gilid, kung tinukoy, ito ay hindi nakakaapekto sa layout. Ang bertikal na puwang na kinukuha ay depende sa `line-height`, kahit na ang`border` at `padding` ay mukhang biswal na nakikita sa paligid ng nilalaman. |
| Float | - | - | Nagiging katulad ng isang elemento ng 'block' kung saan maaari kang magtakda ng mga bertikal na margin at paddings. |
### Ano ang pagkakaiba sa pagitan ng `relative`, `fixed`, `absolute` at elementong nakaposisyong panig sa `static`?
Ang isang naka-posisyon na elemento ay isang elemento na ang na-compute na `posisyon` ay alinman sa`kamag-anak`, `absolute`,`fixed` o `malagkit`.
@ -369,16 +321,12 @@ Ang isang naka-posisyon na elemento ay isang elemento na ang na-compute na `posi
- https://developer.mozilla.org/en/docs/Web/CSS/position
### Ano ang mga umiiral na framework ng CSS na ginamit mo ng lokal, o kaya naman ay sa produksyon? Papaano mo babaguhin o mapapabuti ang mga ito?
- ** Bootstrap ** - Mabagal na ikot ng paglabas. Ang Bootstrap 4 ay nasa alpha sa halos dalawang taon. Magdagdag ng bahagi ng pindutan ng spinner, dahil malawak itong ginagamit.
- ** Semantikong UI ** - Ang istraktura ng pinagmulang code ay gumagawa ng pagsadya ng tema na napakahirap maunawaan. Masakit na ipasadya sa hindi pangkaraniwang sistema ng paggawa ng tema. Hardcoded na config na landas sa loob ng librerya ng vendor. Hindi mahusay na pag-disenyo para pag-override ng mga variable na hindi katulad sa Bootstrap.
- ** Bulma ** - Isang pulutong ng mga di-semantiko at labis na mga klase at markup ang kinakailangan. Hindi tugma ang pabalik. Ang pag-upgrade ng mga bersyon sa sumisira sa app sa banayad na asal.
### Ikaw ba ay nakapaglaro na sa paligid ng bagong CSS Flexbox o Grid na specs?
Oo. Ang Flexbox ay higit sa lahat para sa 1-dimensional na layout habang ang Grid ay nakatalaga para sa 2-dimensional na mga layout.
@ -391,14 +339,10 @@ Ang Grid sa ngayon ay ang pinaka-intuitive na diskarte para sa paglikha ng grid-
- https://philipwalton.github.io/solved-by-flexbox/
### Maipapaliwanag mo ba ang kaibahan sa pagitan ng Pag-code ng isang web site na tumutugon kumpara sa paggamit ng diskarteng mobile ang una?
TODO
### Sa anong paraan naiiba ang disenyo ng tumutugon mula sa disenyo ng umaangkop?
Sinusubukan ng parehong tumutugon at bumabagay na disenyo ang pag-optimize ng karanasan ng gumagamit sa iba't ibang mga device, pag-ayos para sa iba't ibang mga laki ng viewport, mga resolusyon, mga konteksto sa paggamit, mekanismo ng kontrol, at iba pa.
@ -413,8 +357,6 @@ Ang bumabagay na disenyo ay mas katulad ng modernong kahulugan ng progresibong p
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
### Ikaw ba ay nakagamit na ng mga grapikong retina? kung gayon, kelan at anu-anong mga teknik ang iyong ginamit?
May gusto kong gamitin ang mas mataas na resolusyon nga mga grapika (dalawang beses ang laki ng display) upang ma-handle ang retina display. Ang mas mahusay na paraan ay ang paggamit ng isang query sa media tulad ng `@media na iskrin lamang at (min-device-pixel-ratio: 2) {...}` at baguhin ang `background-image`.
@ -427,8 +369,6 @@ Ang isa pang paraan ay ang paggamit ng JavaScript upang palitan ang mga attribut
- https://www.sitepoint.com/css-techniques-for-retina-displays/
### May kadahilanan ba na nais mong gamitin ang `translate()` kesa sa `absolute` na pag-poposisyon, o kabaliktaran? at bakit?
Ang `translate ()` ay isang halaga ng CSS `transform`. Ang pagpapalit ng `transform` o `opacity` ay hindi nag-trigger ng browser reflow o repaint, mga komposisyon lamang, samantalang ang pagpapalit ng tiyak na pagpoposisyon ay nagpapalit ng `reflow`. Ang `transform` ay nagiging sanhi ng browser na lumikha ng isang GPU na layer para sa elemento ngunit ang pagpapalit ng mga tiyak na katangian sa pagpoposisyon ay gumagamit ng CPU. Kaya ang `isalin ()` ay mas mahusay at magreresulta sa mas maikling oras ng pintura para sa mas malinaw na mga animasyon. Kapag gumagamit ng `translate ()`, ang elemento ay kumakain pa rin ng orihinal na espasyo nito (sabihin nalang nating `posisyon: kamag-anak`), hindi katulad sa pagbabago ng tiyak na pagpoposisyon.
@ -437,8 +377,6 @@ Ang `translate ()` ay isang halaga ng CSS `transform`. Ang pagpapalit ng `transf
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
### Ang ibang mga Kasagutan
- https://neal.codes/blog/front-end-interview-css-questions

22
website/i18n/tl/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -20,8 +20,6 @@ Moral ng kuwento - idagdag lamang ang `<! DOCTYPE html>` sa simula ng iyong pahi
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
### Papaano mo ihahain ang pahinang may iba't-ibang lenggwaheng nilalaman?
Ang tanong ay medyo hindi malinaw, ipinapalagay ko na ito ay nagtatanong tungkol sa pinaka-karaniwang kaso, na kung paano maghain ng isang pahina na may nilalaman na magagamit sa maraming wika, ngunit ang nilalaman sa loob ng pahina ay dapat na ipakita lamang sa isang tuloy-tuloy na parehong wika.
@ -34,8 +32,6 @@ Sa back end, ang HTML markup ay maglalaman ng mga `i18n` na placeholder at para
- https://www.w3.org/International/getting-started/language
### Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?
- Gumamit ng `lang` na katangian sa iyong HTML.
@ -51,8 +47,6 @@ Sa back end, ang HTML markup ay maglalaman ng mga `i18n` na placeholder at para
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### Saan maganda ang mga `data-`na katangian?
Bago pa man naging sikat ang mga balangkas ng JavaScript, ginagamit na ng mga front-end developer ang mga katangian ng `data-` upang mag-imbak ng sobrang data sa loob mismo ng DOM, nang walang iba pang mga hack gaya ng mga di-karaniwang mga katangian, mga dagdag na katangian sa DOM. Ito ay inilaan upang mag-imbak ng pribadong pasadyang data sa pahina o aplikasyon, na kung saan walang mas naaangkop na mga katangian o mga elemento.
@ -64,8 +58,6 @@ These days, using `data-` attributes is not encouraged. One reason is that users
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?
- Mga semantika - Nagpapahintulot sa iyo na ilarawan nang mas tiyak kung ano ang nilalaman.
@ -81,8 +73,6 @@ These days, using `data-` attributes is not encouraged. One reason is that users
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### Ilarawan ang pagkakaiba sa pagitan ng isang `cookie`,`sessionStorage` at `localStorage`.
Ang lahat ng nabanggit na mga teknolohiya ay ang mahahalagang mekanismo ng imbakan sa parte ng kliyente. Ang mga ito ay maaari lamang mag-imbak ng mga halaga bilang mga string.
@ -101,8 +91,6 @@ Ang lahat ng nabanggit na mga teknolohiya ay ang mahahalagang mekanismo ng imbak
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.
- `<script>` - Ang pag-parse ng HTML ay naka-block, ang script ay kinuha at agad na pinaandar, ang pag-parse ng HTML ay ipagpapatuloy pagkatapos na maisagawa ang script.
@ -117,8 +105,6 @@ Tandaan: Ang mga katangian ng `async` at `defer` ay binabalewala para sa mga scr
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### Bakit karaniwang magandang ideya na ilagay ang mga CSS `<link>` sa pagitan ng `<head> </ head>` at JS `<script>` s bago ang `/ <body>`? May alam ka bang anumang mga pagbubukod?
** Paglalagay ng mga `<link>` sa `<head>` **
@ -135,8 +121,6 @@ Ang isang pagbubukod para sa pagpoposisyon ng mga `<script>` sa baba ay kapag an
- https://developer.yahoo.com/performance/rules.html#css_top
### Ano ang progresibong pag-render?
Ang progresibong pag-render ay ang pangalan na ibinigay sa mga teknik na ginagamit upang mapabuti ang pagganap ng isang webpage (lalo na, ipinagbubuti ang oras ng pag-load) upang mag-render ng nilalaman para ipakita nang mabilisan hangga't maaari.
@ -154,17 +138,13 @@ Mga halimbawa ng naturang pamamaraan:
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### Bakit ka gagamit ng isang `srcset` na katangian sa isang tag ng imahe? Ipaliwanag ang proseso na ginagamit ng browser sa pagsuri ng nilalaman ng katangiang ito.
TODO
### Nakagamit ka na ba ng ibang lenggwahe sa pag-template ng HTML?
Oo, Pug (dating Jade), ERB, Slim, Handlebars, Jinja, Liquid, upang pangalanan lamang ang ilan. Sa palagay ko, ang mga ito ay higit pa o mas mababa na parehong nagbibigay ng katulad na pag-andar ng nilalamang tumatakas at kapaki-pakinabang na mga pag-sala para sa pagmamanipula ng datos na ipapakita. Ang karamihan sa mga engine sa pag-template ay magpapahintulot din sa iyo na mag-inject ng iyong sariling mga pag-sala sa kaganapan na kailangan mo ng pasadyang pagproseso bago ipakita.
Oo, Pug (dating Jade), ERB, Slim, Handlebars, Jinja, Liquid, upang pangalanan lamang ang ilan. Sa palagay ko, ang mga ito ay higit pa o mas mababa na parehong nagbibigay ng katulad na pag-andar ng nilalamang tumatakas at kapaki-pakinabang na mga pag-sala para sa pagmamanipula ng datos na ipapakita. Ang karamihan sa mga engine sa pag-template ay magpapahintulot din sa iyo na mag-inject ng iyong sariling mga pag-sala sa kaganapan na kailangan mo ng pasadyang pagproseso bago ipakita.
### Mga Ibang Sagot

106
website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -20,8 +20,6 @@ Ang delegasyon ng kaganapan ay isang pamamaraan na kinasasangkutan ng pagdaragda
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### Ipaliwanag kung paano gumagana ang `this` na ito sa JavaScript
Walang simpleng paliwanag para sa `this`; ito ay isa sa mga pinaka-nakakalitong konsepto sa JavaScript. Ang isang paliwanag na hand-wavey na ang halaga ng `this` ay nakadepende sa kung paano tinawag ang punksyon. Nabasa ko ang maraming paliwanag sa `this` online, at natagpuan ko ang paliwanag ni [Arnav Aggrawal](https://medium.com/@arnav_aggarwal) para sa kalinawan. Ang mga sumusunod na alituntunin ay inilalapat:
@ -40,8 +38,6 @@ Para sa malalim na pagpapaliwanag, tingnan ang kanyang [artikulo sa Medium](http
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### Ipaliwanag kung paano gumagana ang prototypal na pagmamana
Ito ay isang pangkaraniwan na tanong sa pakikipanayam tungkol sa JavaScript. Ang lahat ng mga JavaScript na mga bagay ay may isang `__proto__` na propyedad, iyon ay isang reperensiya sa ibang bagay. Kapag ang isang propyedad ay na-akses sa isang bagay at kung ang propyedad ay hindi natagpuan sa bagay na iyon, tinitingnan ng engine ng JavaScript ang `__proto__` ng object, at ang`__proto__` ng `__proto__` at iba pa, hanggang sa matagpuan nito ang tinukoy ng propyedad sa isa sa `__proto__` o hanggang sa ito ay umabot sa dulo ng prototype na chain. Ang pag-uugali na ito ay gumagaya ng klasikal na pagpapamana, ngunit ito ay higit pa sa [delegasyon kaysa sa pamana](https://davidwalsh.name/javascript-objects).
@ -51,8 +47,6 @@ Ito ay isang pangkaraniwan na tanong sa pakikipanayam tungkol sa JavaScript. Ang
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
### Ano ang iyong naiisip sa AMD laban sa CommonJS??
Ang dalawa ay parehong mga paraan upang ipatupad ang isang sistema ng module, na hindi likas na nasa JavaScript hanggang sa dumating ang ES2015. Ang CommonJS ay sinkronisado habang ang AMD (Di sinkronisado na module na kahulugan) ay maliwanag na di sinkronisado. Ang CommonJS ay dinisenyo sa pagpapaunlad ng server-side habang ang AMD, kasama ang suporta nito para sa di sinkronisado na pagload ng modules, ay mas inilaan para sa mga browser.
@ -66,8 +60,6 @@ Natutuwa ako na may mga ES2015 na module, na may suporta para sa parehong kasaba
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### Ipaliwanag kung bakit ang mga sumusunod ay hindi gumagana bilang isang IIFE: `function foo(){ }();`. Ano ang kailangang baguhin upang gawing maayos itong IIFE?
IAng IFE ay nangangahulugan ng Immediately Invoked Function Expressions. Ang parser ng JavaScript binabasa ang `function foo () {} ();` bilang `function foo () {}` at `();`, kung saan ang dati ay isang deklarasyon ng punksyon at ang huli (isang pares ng mga braket) ay isang pagtatangka sa pagtawag sa isang punksyon ngunit walang pangalan na tinukoy, kaya ito ay tumatapon ng `Uncaught SyntaxError: Hindi inaasahang token)`.
@ -78,8 +70,6 @@ Narito ang dalawang paraan upang ayusin ito na kinasasangkutan ng pagdaragdag ng
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
### Ano ang kaibahan sa pagitan ng isang variable na: `null`, `undefined` o hindi naipahayag? Paano mo gagawin ang pag-check para sa alinman sa mga kalagayang ito?
Ang mga **di-deklarado ** na mga variable ay nalilikha kapag ikaw ay nagtatalaga ng isang halaga sa isang identifier na hindi pa nilikha noong una gamit ang `var`,`let` o `const`. Ang mga di-deklaradong variable ay tinutukoy sa pangkaalahatan, sa labas ng kasalukuyang saklaw. Sa mahigpit na mode, ang isang `ReferenceError` ay itatapon kapag susubukan mong italaga sa isang di-ipinahayag na variable. Ang mga di-deklaradong variable ay masama tulad ng kung papaano naging masama ang mga pandaigdigan na variable. Iwasan ang mga ito sa abot ng iyong makakaya! Upang suriin ang mga ito, balutin ang paggamit nito sa isang block ng `try` /`catch`.
@ -124,8 +114,6 @@ Bilang isang personal na nakaugalian, hindi ko kailanman iiwanan ang aking mga v
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### Ano ang pagsasara, at paano mo gagamitin ang isa sa mga ito?
Ang pagsasara ay ang kumbinasyon ng isang punksyon at ang leksikong environment sa loob kung saan ang punksyon ay ipinahayag. Ang salitang "leksikal" ay tumutukoy sa katotohanang ang paggamit ng leksiko ay paggamit ng lokasyon kung saan ang isang variable ay ipinahayag sa loob ng source code upang matukoy kung saan pwede pa ang variable na iyon. Ang mga pagsasara ay mga punksyon na may akses sa mga panlabas na (kalakip) na mga variable ng punkyon na saklaw kahit na matapos na bumalik ang panlabas na punksyon.
@ -140,8 +128,6 @@ Ang pagsasara ay ang kumbinasyon ng isang punksyon at ang leksikong environment
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### Mailalarawan mo ba ang pangunahing pagkakaiba sa pagitan ng isang `.forEach` na loop at isang `.Map()` na loop at bakit kailangan mo lang pumili ng isa mula sa dalawa?
Upang maunawaan ang mga pagkakaiba sa pagitan ng dalawa, tingnan natin kung ano ang ginagawa ng bawat punksyon.
@ -181,8 +167,6 @@ Ang pangunahing pagkakaiba sa pagitan ng `.forEach` at `.map ()` ay ang `.map ()
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### Ano ang isang tipikal na kaso ng paggamit para sa mga hindi kilalang punksyon?
Maaari silang gamitin sa mga IIFE upang ipaloob ang ilang mga code sa loob ng isang lokal na saklaw upang ang mga variable na ipinahayag dito ay hindi mag-leak sa pandaigdigang saklaw.
@ -216,8 +200,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### Paano mo inaayos ang iyong code? (modular na pattern, makalumang pagmamana?)
Sa nakaraan, ginamit ko ang Backbone para sa aking mga modelo na naghihikayat sa higit pang pamamaraan sa OOP, ang paglikha ng mga modelo ng Backbone at paglakip ng mga pamamaraan sa kanila.
@ -226,8 +208,6 @@ Mahusay pa rin ang module pattern, ngunit sa mga araw na ito, ginagamit ko ang a
Iniiwasan ko ang paggamit ng klasikal na pagmamana kung posible. Kapag at kung gagawin ko, mananatili ako sa [mga patakarang ito](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
### Ano ang pagkakaiba sa pagitan ng mga host na bagay at mga likas na bagay?
Ang mga likas na bagay ay mga bagay na bahagi ng wika ng JavaScript na tinutukoy ECMAScript na ispisipikasyon, kagaya ng `String`, `Math`, `RegExp`, `Object`, `Function`, atbp.
@ -238,8 +218,6 @@ Ang mga bagay na host ay ibinibigay ng runtime environment (browser o Node), kag
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### Kaibahan sa pagitan ng: punksyon na `Person(){}`, `var person = Person()`, at `var person = new Person()`?
Ang tanong na ito ay medyo hindi malinaw. Aking pinakamahusay na hula sa intensyon nito ay ito ay nagtatanong tungkol sa mga tagapagbuo sa JavaScript. Sa teknikal na pagkakasabi, ang `function Person () {}` ay isang normal na punksyon na deklarasyon. Ang kombensyon ay gumamit ng PascalCase para sa mga punksyon na nilalayon upang magamit bilang mga tagapagbuo.
@ -266,8 +244,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
### Ano ang pagkakaiba sa pagitan ng `.call` at `.apply`?
Ang parehong `.call` at `.apply` ay ginagamit upang tumawag ng mga punksyon at ang unang parameter ay gagamitin bilang halaga ng `ito` sa loob ng punksyon Gayunpaman, Ang `.call` ay tumatagal ng mga argumento na pinaghiwalay ng kuwit bilang mga susunod na argumento habang ang `.apply` tumatagal sa isang hanay ng mga argumento bilang susunod na argumento. Ang pinakamadaling paraaan upang matandaan ito ay ang C ay para sa `call` na pinaghihiwalay ng kuwit at A para sa `apply` at array ng mga argumento.
@ -281,8 +257,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### Ipaliwanag ang `Function.prototype.bind`.
Kinuha mula sa bawat salita ng [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
@ -295,8 +269,6 @@ Sa aking karanasan, ito ay pinaka-kapaki-pakinabang para sa pag-bind ng halaga n
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
### Kelan ka gagamit ng `document.write()`?
Ang `document.write()` ay sumusulat ng isang string ng teksto sa isang stream ng dokumento na binuksan ng `document.open()`. Kapag ang `document.write ()` ay naisakatuparan pagkatapos na mai-load ang pahina, tatawag itong `document.open` na nililimas ang buong dokumento (`<head>`at`<body>`removed!) At pinapalitan ang mga nilalaman sa binigay na halaga ng parameter sa string. Kaya nga naman ito ay karaniwang itinuturing na mapanganib at madaling kapitan ng sakit sa maling paggamit.
@ -308,8 +280,6 @@ Mayroong ilang mga sagot na makikita online na nagpapaliwanag na ang `document.w
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### Ano ang kaibahan sa pagitan ng pagtukoy na tampok, tampok na pagkakilala, at paggamit ng UA na string?
**Pagtuklas ng Tampok**
@ -348,8 +318,6 @@ Ito ay isang string na iniulat ng browser na nagbibigay-daan sa mga network prot
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
### Ipaliwanag ang Ajax sa mas detalyadong pamamaraan hangga't maaari.
Ang Ajax ay (sinkronisadong JavaScript at XML) ay isang set ng mga diskarte sa pag-develop ng web gamit ang maraming mga teknolohiya ng web sa panig ng kliyente upang lumikha ng mga aplikasyon ng web na sinkronisado. Sa Ajax, ang mga web na aplikasyon ay maaaring magpadala ng datos sa at kunin mula sa isang serber na di-sinkronisado (sa background) nang hindi nakakasagabal sa displey at pag-uugali ng umiiral na pahina. Sa pamamagitan ng pag-decoupling ng layer ng pagpapalit ng datos mula sa layer ng pagtatanghal, ang Ajax ay nagbibigay-daan para sa mga web na pahina, at sa pamamagitan ng extension ng mga aplikasyon sa web, upang baguhin ang nilalaman na dynamic na walang kailangang i-reload ang buong pahina. Sa pagsasagawa, ang mga modernong pagpapatupad ay kadalasang kapalit ng JSON para sa XML dahil sa mga pakinabang ng pagiging likas sa JavaScript.
@ -361,8 +329,6 @@ Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong ko
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
### Ano ang mga kalamangan at di-kalamangan ng paggamit ng Ajax?
**Mga Kalamangan**
@ -378,8 +344,6 @@ Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong ko
- Hindi gagana kung hindi pinagana ang JavaScript sa browser.\* Ang ilang mga webcrawlers ay hindi nagsasagawa ng JavaScript at hindi makikita ang nilalamang na-load ng JavaScript.
- Karaniwang karamihan sa mga di kalamangan ng isang SPA.
### Ipaliwanag kung papaano gumagana ang JSONP (at kung bakit hindi talaga Ajax).
Ang JSONP (JSON na may Padding) ay isang paraan na parating ginagamit para i-bypass ang mga cross-domain mga patakaran sa mga web browser dahil ang Ajax ay humihingi mula sa kasalukuyang pahina papunta sa isang cross-origin na domain ay hindi pinahihintulutan.
@ -412,8 +376,6 @@ Sa panahon ngayon, Ang [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource
- https://stackoverflow.com/a/2067584/1751946
### Ikaw ba ay nakagamit na ng JavaScript sa pag-template? Kung gayon, anong mga librerya ang ginamit mo?
Oo. mga Handlebar, Underscore, Lodash, AngularJS at JSX. Hindi ko nagustuhan ang pag-template sa AngularJS dahil sa mabigat na paggamit nito ng mga string sa mga direktiba at ang mga typo ay di agad nakikita. Ang JSX ay ang aking bagong paborito dahil ito ay mas malapit sa JavaScript at mayroong halos anumang sintaks na iyong matututunan. Sa mga araw na ito, maaari mo ring gamitin ang ES2015 na mga template string literal bilang isang mabilis na paraan para sa paglikha ng mga template nang hindi umaasa sa third-party na code.
@ -424,8 +386,6 @@ const template = `<div>My name is: ${name}</div>`;
Gayunpaman, maging maingat sa isang potensyal na XSS sa itaas na pamamaraan dahil ang mga nilalaman ay hindi ligtas para sa iyo, hindi katulad sa mga libreryang pang-template.
### Ipaliwanag ang "hoisting".
Ang pag-hoist ay isang terminong ginamit upang ipaliwanag ang pag-uugali ng mga variable na deklarasyon sa iyong code. Ang mga variable na ipinahayag o nasimulan sa keyword na `var` ay magkakaroon ng kanilang deklarasyon na "hoisted" hanggang sa tuktok ng kasalukuyangnasasakupan. Gayunpaman, ang pagpapahayag lamang ang na-hoist na, ang pagtatalaga (kung mayroong isa), ay mananatili kung saan ito. Ipaliwanag natin ang ilang mga halimbawa.
@ -462,14 +422,10 @@ var bar = function () {
console.log(bar); // [Function: bar]
```
### Ilarawan ang kaganapan ng pagbubwak.
Kapag ang isang kaganapan ay nag-trigger sa isang elemento ng DOM, susubukan nito na pangasiwaan ang kaganapan kung may nakakabit na tagapakinig, pagkatapos ay ang kaganapan ay bubula hanggang sa kanyang magulang at ang parehong bagay ang mangyayari. Ang pag-bula na ito ay nangyayari sa mga ninuno ng elemento sa lahat ng mga paraan sa `dokumento`. Ang kaganapan ng pagbubwak ng bula ay ang mekanismo sa likod ng delegasyon ng kaganapan.
### Ano ang pagkakaiba sa pagitan ng isang "katangian" at isang "propyedad"?
Ang mga katangian ay tinukoy sa markup ng HTML ngunit ang mga propyedad ay tinukoy sa DOM. Upang ilarawan ang pagkakaiba, isipin na mayroon kaming field na ito sa aming HTML: `<input type ="text"value ="Hello">`.
@ -491,8 +447,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### Bakit ang pagpapalawak ng mga built-in na JavaScript na mga bagay ay hindi isang magandang ideya?
Ang pagpapalawak ng isang built-in o likas na JavaScript na bagay ay nangangahulugan ng pagdaragdag ng mga katangian o mga punksyon sa `prototype` nito. Bagaman ito ay maaaring mukhang isang magandang ideya sa simula, ito ay mapanganib sa pagsasagawa. Isipin mo nalang na ang iyong code ay gumagamit ng ilang mga librerya na parehong nagpapahaba ng `Array.prototype` sa pamamagitan ng pagdaragdag ng parehong `contains` na paraan, ang mga pagpapatupad ay papatungan ang bawat isa at ang iyong code at masisira kung ang pag-uugali ng dalawang mga paraan ay hindi pareho.
@ -503,8 +457,6 @@ Ang tanging oras na maaari mong i-extend ang isang likas na bagay ay kung nais m
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### Pagkakaiba sa pagitan ng kaganapan ng `pag-load` ng dokumento at dokumento ng `DOMContentLoaded` na kaganapan?
Ang `DOMContentLoaded` na kaganapan ay pinapaputok kapag ang unang HTML na dokumento ay ganap na na-load at ma-parse, nang hindi naghihintay para sa mga stylesheet, mga larawan, at mga subframe upang tapusin ang paglo-load. Ang `window` ng `load` na kaganapan ay painapaputok pagkatapos lamang ng DOM at ang lahat ng mga mapagkukunang at asset na umaasa.
@ -514,8 +466,6 @@ Ang `DOMContentLoaded` na kaganapan ay pinapaputok kapag ang unang HTML na dokum
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
### Ano ang pagkakaiba sa pagitan ng `==` at `===`
Ang `==` ay ang abstraktong pagkakapantay-pantay na operator habang ang `===` ay ang mahigpit na pagkakapantay-pantay na operator. Ang `==` ay ang abstraktong pagkakapantay-pantay na operator habang ang `===` ay ang mahigpit na pagkakapantay-pantay na operator. Ang `== operator ay maghahambing para sa pagkakapantay-pantay matapos gawin ang anumang kinakailangang mga conversion na uri. Ang operator ng`===`ay hindi gagawin ang uri ng conversion, kaya kung ang dalawang halaga ay hindi magkatulad na uri`=== `ay babalik lamang` false`. Kapag gumagamit ng`==`, ang mga funky bagay ay maaaring mangyari, tulad ng: na operator ay maghahambing para sa pagkakapantay-pantay matapos gawin ang anumang kinakailangang mga pagpapalit na uri. Ang operator ng`===`ay hindi gagawin ang uri ng pagpapalit, kaya kung ang dalawang halaga ay hindi magkatulad na uri` === `ay babalik lamang sa`false`. Kapag gumagamit ng`==`, ang mga kaiba-ibang mga bagay ay maaaring mangyari, tulad ng:
@ -541,8 +491,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### Ipaliwanag ang patakaran na pareho pareho dapat ang pinanggalingan tungkol sa JavaScript.
Pinipigilan ng patakaran ng may parehong pinagmulan ang JavaScript mula sa paggawa ng mga kahilingan sa mga hangganan ng domain. Ang pinagmulan ay tinukoy bilang isang kumbinasyon ng scheme ng URI, hostname, at numero ng port. Pinipigilan ng patakarang ito ang isang nakakahamak na script sa isang pahina mula sa pagkuha ng akses sa mga sensitibong datos sa isa pang pahina ng web sa pamamagitan ng Document Object Model na pahina.
@ -551,8 +499,6 @@ Pinipigilan ng patakaran ng may parehong pinagmulan ang JavaScript mula sa pagga
- https://en.wikipedia.org/wiki/Same-origin_policy
### Paganahin ito:
```js
@ -567,8 +513,6 @@ function duplicate(arr) {
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### Bakit tinatawag itong isang ternary na ekspresyon, ano ang ibig sabihin ng salitang "Ternary"?
"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
@ -577,8 +521,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
### Ano ang `"use strict";`? ano ang mga bentahe at di-bentahe sa paggamit nito?
'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt in to a restricted variant of JavaScript.
@ -606,8 +548,6 @@ Overall, I think the benefits outweigh the disadvantages, and I never had to rel
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### Gumawa ng para sa loop na mag-iterate hanggang sa `100` habang mag-ouput ng **"fizz"** sa multiples ng `3`, **"buzz"** sa pagmultiplika ng `5` at **"fizzbuzz"** sa pagmultiplika ng `3` at `5`
Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
@ -626,8 +566,6 @@ I would not advise you to write the above during interviews though. Just stick w
- https://gist.github.com/jaysonrowe/1592432
### Bakit, sa pangkalahatan, isang magandang ideya na iwanan ang pandaigdigang saklaw ng isang website bilang kung ano man ito at hindi kailanman na galawin ito?
Every script has access to the global scope, and if everyone is using the global namespace to define their own variables, there will bound to be collisions. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
@ -646,8 +584,6 @@ TODO.
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
### Ipaliwanag kung ano ang isang solong pahina na app at kung paano gumawa ng isang SEO-friendly.
The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me!
@ -675,8 +611,6 @@ The downsides:
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### Ano ang lawak ng iyong karanasan sa Mga Pangako at/o ang kanilang mga polyfill?
Possess working knowledge of it. A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
@ -687,8 +621,6 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### Ano ang mga kalamangan at kahinaan ng paggamit ng mga pangako sa halip ng mga callback?
**Pros**
@ -702,8 +634,6 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
- Slightly more complex code (debatable).
- In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
### Ano ang ilan sa mga pakinabang o di-pakinabang ng pagsulat ng JavaScript code sa isang wika na naka-compile sa JavaScript?
Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript and TypeScript.
@ -730,8 +660,6 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na code?
- React and Redux
@ -747,8 +675,6 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### Anong mga pag-construct ng wika ang ginagamit mo para sa pag-ulit sa mga katangian ng bagay at mga item na array?
For objects:
@ -764,8 +690,6 @@ For arrays:
Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. `for` loops allow more flexibility, such as prematurely terminate the loop using `break` or incrementing the iterator more than once per loop.
### Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.
- What is an example of an immutable object in JavaScript?
@ -774,16 +698,12 @@ Most of the time, I would prefer the `.forEach` method, but it really depends on
TODO
### Ipaliwanag ang pagkakaiba sa pagitan ng sabay at hindi sabay na punksiyon.
Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
Asynchronous functions usually accept a callback as a parameter and execution continues on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
### Ano ang loop na kaganapan? Ano ang pagkakaiba sa pagitan ng call na stack at queue ng gawain?
The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
@ -795,8 +715,6 @@ If you haven't already checked out Philip Robert's [talk on the Event Loop](http
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
### Ipaliwanag ang mga pagkakaiba sa paggamit ng `foo` sa pagitan ng `function foo() {}` at `var foo = function() {}`
The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behaviour as variables). For more explanation on hoisting, refer to the question above on hoisting. If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error.
@ -823,8 +741,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
### Ano ang mga pagkakaiba sa pagitan ng mga variable na nilikha sa pamamagitan ng paggamit ng `let`,`var` o `const`?
Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
@ -905,26 +821,18 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
### Ano ang mga pagkakaiba sa pagitan ng ES6 na class at mga ES5 na taga-construct na punksyon?
TODO
### May maaalok ka bang isang kaso ng paggamit para sa bagong arrow => sintaks ng punksyon? Paano naiiba ang bagong sintaks na ito sa iba pang mga punksyon?
TODO
### Ano ang bentahe para sa paggamit ng sintaks na arrow para sa isang paraan sa isang taga-construct?
TODO
### Ano ang kahulugan ng isang mas mataas na hanay na punksyon?
A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Array.prototype.bind` is one such example in JavaScript.
@ -965,8 +873,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### Makapagbibigaay kaba ng isang halimbawa para sa pag-destructure ng isang bagay o isang array?
Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays, and place them into distinct variables.
@ -1009,14 +915,10 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### Ang literal na ES6 na template ay nag-aalok ng maraming kakayahan na umangkop sa pagbuo ng mga string, maaari ka bang makapagbigay ng isang halimbawa
TODO
### Makapagbibigay kaba ng isang halimbawa ng isang punksyon na curry at kung bakit ang sintaks na ito ay nag-aalok ng isang kalamangan?
Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each take one parameter.
@ -1053,8 +955,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### Ano ang mga pakinabang ng paggamit ng spread na sintaks at kung paano ito naiiba mula sa rest na sintaks?
ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and RxJS projects.
@ -1099,20 +999,14 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
### Paano ka makakabahagi ng code sa pagitan ng mga file?
TODO
### Bakit gusto mong lumikha ng mga statik na miyembro ng klase?
TODO
### Mga Ibang Sagot
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

65
website/i18n/zh/docusaurus-plugin-content-docs/current/css-questions.md
View File

@ -28,8 +28,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
### 重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？
- **重置（Resetting）**： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像`margin`、`padding`、`font-size`这些样式全部置成一样。你将必须重新定义各种元素的样式。
@ -41,8 +39,6 @@ import TOCInline from '@theme/TOCInline';
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
### 请阐述`Float`定位的工作原理。
浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。
@ -67,8 +63,6 @@ CSS 的`clear`属性通过使用`left`、`right`、`both`，让该元素向下
- https://css-tricks.com/all-about-floats/
### 请阐述`z-index`属性，并说明如何形成层叠上下文（stacking context）。
CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只能影响`position`值不是`static`的元素。
@ -85,8 +79,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
### 请阐述块格式化上下文（Block Formatting Context）及其工作原理。
块格式上下文（BFC）是 Web 页面的可视化 CSS 渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。
@ -107,8 +99,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
### 有哪些清除浮动的技术，都适用哪些情况？
- 空`div`方法：`<div style="clear:both;"></div>`。
@ -117,8 +107,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
在大型项目中，我会使用 Clearfix 方法，在需要的地方使用`.clearfix`。设置`overflow: hidden`的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。
### 请解释什么是精灵图（css sprites），以及如何实现？
精灵图，也称雪碧图。因常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。
@ -138,8 +126,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://css-tricks.com/css-sprites/
### 如何解决不同浏览器的样式兼容性问题？
- 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
@ -147,8 +133,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
- 使用 Reset CSS 或 Normalize.css。
### 如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？
- 优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
@ -157,8 +141,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
- 使用 [Modernizr](https://modernizr.com/)进行特性检测。
### 有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？
这些方法与可访问性（a11y）有关。
@ -177,20 +159,14 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
### 你使用过栅格系统吗？偏爱哪一个？
我使用 `float`-based 栅格系统，因为它相比 flex、grid 系统，拥有更多浏览器的支持。它已经在 Bootstrap 中使用多年，并且已经被证明是可行的。
### 你是否使用过媒体查询或移动优先的布局？
是的，一个例子就是根据窗口的尺寸改变导航的样式。
### 你熟悉制作 SVG 吗？
是的，你可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件对形状进行着色（包括指定对象上的属性）。在网上大部分 SVG 使用的是内联 CSS，不过每个类型都有优点和缺点。
@ -206,16 +182,13 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
/>
stroke-opacity="0.8" />
```
###### 参考
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
### 除了`screen`，你还能说出一个 @media 属性的例子吗？
- `all` 适用于所有设备。
@ -227,8 +200,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
### 编写高效的 CSS 应该注意什么？
首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。
@ -242,8 +213,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://csstriggers.com/
### 使用 CSS 预处理的优缺点分别是什么？
优点：
@ -259,8 +228,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- 需要预处理工具。
- 重新编译的时间可能会很慢。
### 对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？
喜欢：
@ -273,14 +240,10 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- 我通过`node-sass`使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。
- Less 中，变量名称以`@`作为前缀，容易与 CSS 关键字混淆，如`@media`、`@import`和`@font-face`。
### 如何实现一个使用非标准字体的网页设计？
使用`@font-face`并为不同的`font-weight`定义`font-family`。
### 解释浏览器如何确定哪些元素与 CSS 选择器匹配。
这部分与上面关于编写高效的 CSS 有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。
@ -291,8 +254,6 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
### 描述伪元素及其用途。
CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（`:first-line`，`:first-letter`）或将元素添加到标记中（与 content:...组合），而不必修改标记（`:before`，`:after`）。
@ -305,8 +266,6 @@ CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分
- https://css-tricks.com/almanac/selectors/a/after-and-before/
### 说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。
CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的`padding`、`border`和`margin`区域。
@ -330,8 +289,6 @@ CSS 盒模型负责计算：
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
### `* { box-sizing: border-box; }`会产生怎样的效果？
- 元素默认应用了`box-sizing: content-box`，元素的宽高只会决定内容（content）的大小。
@ -339,16 +296,12 @@ CSS 盒模型负责计算：
- 元素的`height` = 内容（content）的高度 + 垂直方向的`padding` + 垂直方向`border`的宽度
- 元素的`width` = 内容（content）的宽度 + 水平方向的`padding` + 水平方向`border`的宽度
### `display`的属性值都有哪些？
- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
TODO
### `inline`和`inline-block`有什么区别？
我把`block`也加入其中，为了获得更好的比较。
@ -362,8 +315,6 @@ TODO
| 边距（margin）和填充（padding） | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管`border`和`padding`在`content`周围，但垂直方向上的空间取决于'line-height' |
| 浮动（float） | - | - | 就像一个`block`元素，可以设置垂直边距和填充。 |
### `relative`、`fixed`、`absolute`和`static`四种定位有什么区别？
经过定位的元素，其`position`属性值必然是`relative`、`absolute`、`fixed`或`sticky`。
@ -378,16 +329,12 @@ TODO
- https://developer.mozilla.org/en/docs/Web/CSS/position
### 你使用过哪些现有的 CSS 框架？你是如何改进它们的？
- **Bootstrap**： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。
- **Semantic UI**：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。
- **Bulma**： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。
### 你了解 CSS Flexbox 和 Grid 吗？
了解。Flexbox 主要用于一维布局，而 Grid 则用于二维布局。
@ -400,8 +347,6 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
- https://philipwalton.github.io/solved-by-flexbox/
### 请解释在编写网站时，响应式与移动优先的区别。
请注意，这两种方法不是互斥的。
@ -441,8 +386,6 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
- 在移动设备上有更好的性能，因为应用于它们的规则无需针对任何媒体查询的验证。
- 它让你强制编写与响应 CSS 规则相关的更干净的代码。
### 响应式设计与自适应设计有何不同？
响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。
@ -457,8 +400,6 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
- http://mediumwell.com/responsive-adaptive-mobile/
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
### 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
我倾向于使用更高分辨率的图形（显示尺寸的两倍）来处理视网膜显示。更好的方法是使用媒体查询，像`@media only screen and (min-device-pixel-ratio: 2) { ... }`，然后改变`background-image`。
@ -471,8 +412,6 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
- https://www.sitepoint.com/css-techniques-for-retina-displays/
### 什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。
`translate()`是`transform`的一个值。改变`transform`或`opacity`不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。`transform`使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此`translate()`更高效，可以缩短平滑动画的绘制时间。
@ -483,8 +422,6 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
### 其他答案
- https://neal.codes/blog/front-end-interview-css-questions

22
website/i18n/zh/docusaurus-plugin-content-docs/current/html-questions.md
View File

@ -20,8 +20,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.w3.org/QA/Tips/Doctype
- https://quirks.spec.whatwg.org/#history
### 如何提供包含多种语言内容的页面？
这个问题有点问得含糊其辞，我认为这是在询问最常见的情况：如何提供包含多种语言内容的页面，并保证页面内容语言的一致性。
@ -34,8 +32,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.w3.org/International/getting-started/language
### 在设计开发多语言网站时，需要留心哪些事情？
- 在 HTML 中使用`lang`属性。
@ -51,8 +47,6 @@ import TOCInline from '@theme/TOCInline';
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
### 什么是`data-`属性？
在 JavaScript 框架变得流行之前，前端开发者经常使用`data-`属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。
@ -64,8 +58,6 @@ import TOCInline from '@theme/TOCInline';
- http://html5doctor.com/html5-custom-data-attributes/
- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
### 将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？
- 语义 - 提供更准确地描述内容。
@ -81,8 +73,6 @@ import TOCInline from '@theme/TOCInline';
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
### 请描述`cookie`、`sessionStorage`和`localStorage`的区别。
上面提到的技术名词，都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串。
@ -101,8 +91,6 @@ import TOCInline from '@theme/TOCInline';
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- http://tutorial.techaltum.com/local-and-session-storage.html
### 请描述`<script>`、`<script async>`和`<script defer>`的区别。
- `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
@ -117,8 +105,6 @@ import TOCInline from '@theme/TOCInline';
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
- https://bitsofco.de/async-vs-defer/
### 为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？
**把`<link>`放在`<head>`中**
@ -135,8 +121,6 @@ import TOCInline from '@theme/TOCInline';
- https://developer.yahoo.com/performance/rules.html#css_top
### 什么是渐进式渲染（progressive rendering）？
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
@ -154,8 +138,6 @@ import TOCInline from '@theme/TOCInline';
- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
### 为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。
因为需要设计响应式图片。我们可以使用两个新的属性——`srcset` 和 `sizes`——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
@ -175,14 +157,10 @@ import TOCInline from '@theme/TOCInline';
- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
### 你有过使用不同模版语言的经历吗？
有过，比如 Pug （以前叫 Jade）、 ERB、 Slim、 Handlebars、 Jinja、 Liquid 等等。在我看来，这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能。大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
### 其它答案
- https://neal.codes/blog/front-end-interview-questions-html/

108
website/i18n/zh/docusaurus-plugin-content-docs/current/javascript-questions.md
View File

@ -20,8 +20,6 @@ import TOCInline from '@theme/TOCInline';
- https://davidwalsh.name/event-delegate
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
### 请简述`JavaScript`中的`this`。
JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清楚的。粗略地讲，函数的调用方式决定了`this`的值。我阅读了网上很多关于`this`的文章，[Arnav Aggrawal](https://medium.com/@arnav_aggarwal) 写的比较清楚。`this`取值符合以下规则：
@ -40,8 +38,6 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
- https://stackoverflow.com/a/3127440/1751946
### 请解释原型继承（prototypal inheritance）的工作原理。
这是一个非常常见的 JavaScript 问题。所有 JS 对象都有一个`__proto__`属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。这种行为是在模拟经典的继承，[但是与其说是继承，不如说是委托（delegation）](https://davidwalsh.name/javascript-objects)。
@ -51,8 +47,6 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
- https://davidwalsh.name/javascript-objects
### 说说你对 AMD 和 CommonJS 的了解。
它们都是实现模块体系的方式，直到 ES2015 出现之前，JavaScript 一直没有模块体系。CommonJS 是同步的，而 AMD（Asynchronous Module Definition）从全称中可以明显看出是异步的。CommonJS 的设计是为服务器端开发考虑的，而 AMD 支持异步加载模块，更适合浏览器。
@ -66,8 +60,6 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
- https://auth0.com/blog/javascript-module-systems-showdown/
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
### 请解释下面代码为什么不能用作 IIFE：`function foo(){ }();`，需要作出哪些修改才能使其成为 IIFE？
IIFE（Immediately Invoked Function Expressions）代表立即执行函数。 JavaScript 解析器将 `function foo(){ }();`解析成`function foo(){ }`和`();`。其中，前者是函数声明；后者（一对括号）是试图调用一个函数，却没有指定名称，因此它会抛出`Uncaught SyntaxError: Unexpected token )`的错误。
@ -89,8 +81,6 @@ console.log(foo); // undefined
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
### `null`、`undefined`和未声明变量之间有什么区别？如何检查判断这些状态值？
当你没有提前使用`var`、`let`或`const`声明变量，就为一个变量赋值时，该变量是未声明变量（undeclared variables）。未声明变量会脱离当前作用域，成为全局作用域下定义的变量。在严格模式下，给未声明的变量赋值，会抛出`ReferenceError`错误。和使用全局变量一样，使用未声明变量也是非常不好的做法，应当尽可能避免。要检查判断它们，需要将用到它们的代码放在`try`/`catch`语句中。
@ -135,8 +125,6 @@ console.log(foo == undefined); // true. 错误，不要使用非严格相等！
- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
### 什么是闭包（closure），为什么使用闭包？
闭包是函数和声明该函数的词法环境的组合。词法作用域中使用的域，是变量在代码中声明的位置所决定的。闭包是即使被外部函数返回，依然可以访问到外部（封闭）函数作用域的函数。
@ -151,8 +139,6 @@ console.log(foo == undefined); // true. 错误，不要使用非严格相等！
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
### 请说明`.forEach`循环和`.map()`循环的主要区别，它们分别在什么情况下使用？
为了理解两者的区别，我们看看它们分别是做什么的。
@ -192,8 +178,6 @@ const doubled = a.map((num) => {
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
### 匿名函数的典型应用场景是什么？
匿名函数可以在 IIFE 中使用，来封装局部作用域内的代码，以便其声明的变量不会暴露到全局作用域。
@ -227,8 +211,6 @@ console.log(double); // [2, 4, 6]
- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
### 你如何组织自己的代码？（使用模块模式（module pattern）还是经典继承（classical inheritance）？）
我以前使用 Backbone 组织我的模型（model），Backbone 鼓励采用面向对象的方法——创建 Backbone 模型，并为其添加方法。
@ -237,8 +219,6 @@ console.log(double); // [2, 4, 6]
我尽可能避免使用经典继承。如果非要这么做，我会坚持[这些原则](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)。
### 宿主对象（host objects）和原生对象（native objects）的区别是什么？
原生对象是由 ECMAScript 规范定义的 JavaScript 内置对象，比如`String`、`Math`、`RegExp`、`Object`、`Function`等等。
@ -249,8 +229,6 @@ console.log(double); // [2, 4, 6]
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
### 下列语句有什么区别：`function Person(){}`、`var person = Person()`和`var person = new Person()`？
这个问题问得很含糊。我猜这是在考察 JavaScript 中的构造函数（constructor）。从技术上讲，`function Person(){}`只是一个普通的函数声明。使用 PascalCase 方式命名函数作为构造函数，是一个惯例。
@ -277,8 +255,6 @@ console.log(person.name); // "john"
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
### `.call`和`.apply`有什么区别？
`.call`和`.apply`都用于调用函数，第一个参数将用作函数内 this 的值。然而，`.call`接受逗号分隔的参数作为后面的参数，而`.apply`接受一个参数数组作为后面的参数。一个简单的记忆方法是，从`call`中的 C 联想到逗号分隔（comma-separated），从`apply`中的 A 联想到数组（array）。
@ -292,8 +268,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
### 请说明`Function.prototype.bind`的用法。
摘自[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)：
@ -306,8 +280,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
### 什么时候会用到`document.write()`？
`document.write()`用来将一串文本写入由`document.open()`打开的文档流中。当页面加载后执行`document.write()`时，它将调用`document.open`，会清除整个文档（`<head>`和`<body>`会被移除！），并将文档内容替换成给定的字符串参数。因此它通常被认为是危险的并且容易被误用。
@ -319,8 +291,6 @@ console.log(add.apply(null, [1, 2])); // 3
- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
### 功能检测（feature detection）、功能推断（feature inference）和使用 UA 字符串之间有什么区别？
**功能检测（feature detection）**
@ -359,8 +329,6 @@ if (document.getElementsByTagName) {
- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
### 请尽可能详细地解释 Ajax。
Ajax（asynchronous JavaScript and XML）是使用客户端上的许多 Web 技术，创建异步 Web 应用的一种 Web 开发技术。借助 Ajax，Web 应用可以异步（在后台）向服务器发送数据和从服务器检索数据，而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离，Ajax 允许网页和扩展 Web 应用程序动态更改内容，而无需重新加载整个页面。实际上，现在通常将 XML 替换为 JSON，因为 JavaScript 对 JSON 有原生支持优势。
@ -372,8 +340,6 @@ Ajax（asynchronous JavaScript and XML）是使用客户端上的许多 Web 技
- https://en.wikipedia.org/wiki/Ajax_(programming)
- https://developer.mozilla.org/en-US/docs/AJAX
### 使用 Ajax 的优缺点分别是什么？
**优点**
@ -390,8 +356,6 @@ Ajax（asynchronous JavaScript and XML）是使用客户端上的许多 Web 技
- 有些网络爬虫不执行 JavaScript，也不会看到 JavaScript 加载的内容。
- 基本上包括大部分 SPA 的缺点。
### 请说明 JSONP 的工作原理，它为什么不是真正的 Ajax？
JSONP（带填充的 JSON）是一种通常用于绕过 Web 浏览器中的跨域限制的方法，因为 Ajax 不允许跨域请求。
@ -424,8 +388,6 @@ JSONP 可能具有一些安全隐患。由于 JSONP 是纯 JavaScript 实现，
- https://stackoverflow.com/a/2067584/1751946
### 你使用过 JavaScript 模板吗？用过什么相关的库？
使用过。Handlebars、Underscore、Lodash、AngularJS 和 JSX。我不喜欢 AngularJS 中的模板，因为它在指令中大量使用了字符串，并且书写错误会被忽略。JSX 是我的新宠，因为它更接近 JavaScript，几乎没有什么学习成本。现在，可以使用 ES2015 模板字符串快速创建模板，而不需依赖第三方代码。
@ -436,8 +398,6 @@ const template = `<div>My name is: ${name}</div>`;
但是，请注意上述方法中可能存在的 XSS，因为内容不会被转义，与模板库不同。
### 请解释变量提升（hoisting）。
变量提升（hoisting）是用于解释代码中变量声明行为的术语。使用`var`关键字声明或初始化的变量，会将声明语句“提升”到当前作用域的顶部。 但是，只有声明才会触发提升，赋值语句（如果有的话）将保持原样。我们用几个例子来解释一下。
@ -474,14 +434,10 @@ var bar = function () {
console.log(bar); // [Function: bar]
```
### 请描述事件冒泡。
当一个事件在 DOM 元素上触发时，如果有事件监听器，它将尝试处理该事件，然后事件冒泡到其父级元素，并发生同样的事情。最后直到事件到达祖先元素。事件冒泡是实现事件委托的原理（event delegation）。
### “attribute” 和 “property” 之间有什么区别？
“Attribute” 是在 HTML 中定义的，而 “property” 是在 DOM 上定义的。为了说明区别，假设我们在 HTML 中有一个文本框：`<input type="text" value="Hello">`。
@ -503,8 +459,6 @@ console.log(input.value); // Hello World!
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
### 为什么扩展 JavaScript 内置对象是不好的做法？
扩展 JavaScript 内置（原生）对象意味着将属性或方法添加到其`prototype`中。虽然听起来很不错，但事实上这样做很危险。想象一下，你的代码使用了一些库，它们通过添加相同的 contains 方法来扩展`Array.prototype`，如果这两个方法的行为不相同，那么这些实现将会相互覆盖，你的代码将不能正常运行。
@ -515,8 +469,6 @@ console.log(input.value); // Hello World!
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
### document 中的`load`事件和`DOMContentLoaded`事件之间的区别是什么？
当初始的 HTML 文档被完全加载和解析完成之后，`DOMContentLoaded`事件被触发，而无需等待样式表、图像和子框架的完成加载。
@ -528,8 +480,6 @@ console.log(input.value); // Hello World!
- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
- https://developer.mozilla.org/en-US/docs/Web/Events/load
### `==`和`===`的区别是什么？
`==`是抽象相等运算符，而`===`是严格相等运算符。`==`运算符是在进行必要的类型转换后，再比较。`===`运算符不会进行类型转换，所以如果两个值不是相同的类型，会直接返回`false`。使用`==`时，可能发生一些特别的事情，例如：
@ -555,8 +505,6 @@ console.log(a == undefined); // true
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
### 请解释关于 JavaScript 的同源策略。
同源策略可防止 JavaScript 发起跨域请求。源被定义为 URI、主机名和端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型，访问另一个网页上的敏感数据。
@ -565,8 +513,6 @@ console.log(a == undefined); // true
- https://en.wikipedia.org/wiki/Same-origin_policy
### 请使下面的语句生效：
```js
@ -581,8 +527,6 @@ function duplicate(arr) {
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
### 请说明三元表达式中“三元”这个词代表什么？
“三元”表示接受三个操作数：判断条件，`then`表达式和`else`表达式。三元表达式不是 JavaScript 特有的，我不知道这个问题为什么会出现在这里。
@ -591,8 +535,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
### 什么是`"use strict";`？使用它有什么优缺点？
'use strict' 是用于对整个脚本或单个函数启用严格模式的语句。严格模式是可选择的一个限制 JavaScript 的变体一种方式 。
@ -620,8 +562,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
- http://2ality.com/2011/10/strict-mode-hatred.html
- http://lucybain.com/blog/2014/js-use-strict/
### 创建一个循环，从 1 迭代到 100，`3`的倍数时输出 "fizz"，`5`的倍数时输出 "buzz"，同时为`3`和`5`的倍数时输出 "fizzbuzz"。
来自 [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724)的 FizzBuzz。
@ -640,14 +580,10 @@ for (let i = 1; i <= 100; i++) {
- https://gist.github.com/jaysonrowe/1592432
### 为什么不要使用全局作用域？
每个脚本都可以访问全局作用域，如果人人都使用全局命名空间来定义自己的变量，肯定会发生冲突。使用模块模式（IIFE）将变量封装在本地命名空间中。
### 为什么要使用`load`事件？这个事件有什么缺点吗？你知道一些代替方案吗，为什么使用它们？
在文档装载完成后会触发`load`事件。此时，在文档中的所有对象都在 DOM 中，所有图像、脚本、链接和子框架都完成了加载。
@ -660,8 +596,6 @@ TODO.
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
### 请解释单页应用是什么，如何使其对 SEO 友好。
以下摘自 [Grab Front End Guide](https://github.com/grab/front-end-guide)，碰巧的是，这正是我自己写的！
@ -689,8 +623,6 @@ TODO.
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
### 你对 Promises 及其 polyfill 的掌握程度如何？
掌握它的工作原理。`Promise`是一个可能在未来某个时间产生结果的对象：操作成功的结果或失败的原因（例如发生网络错误）。 `Promise`可能处于以下三种状态之一：fulfilled、rejected 或 pending。 用户可以对`Promise`添加回调函数来处理操作成功的结果或失败的原因。
@ -701,8 +633,6 @@ TODO.
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
### `Promise`代替回调函数有什么优缺点？
**优点：**
@ -716,8 +646,6 @@ TODO.
- 轻微地增加了代码的复杂度（这点存在争议）。
- 在不支持 ES2015 的旧版浏览器中，需要引入 polyfill 才能使用。
### 用转译成 JavaScript 的语言写 JavaScript 有什么优缺点？
Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript and TypeScript. 这些是转译成 JavaScript 的语言，包括 CoffeeScript、Elm、ClojureScript、PureScript 和 TypeScript。
@ -744,8 +672,6 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
### 你使用什么工具和技巧调试 JavaScript 代码？
- React 和 Redux
@ -763,8 +689,6 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
- https://raygun.com/blog/javascript-debugging/
### 你使用什么语句遍历对象的属性和数组的元素？
**对象：**
@ -780,8 +704,6 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
大多数情况下，我更喜欢`.forEach`方法，但这取决于你想要做什么。`for`循环有更强的灵活性，比如使用`break`提前终止循环，或者递增步数大于一。
### 请解释可变对象和不可变对象之间的区别。
- 什么是 JavaScript 中的不可变对象的例子？
@ -825,16 +747,12 @@ console.log(student1, student2);
- https://www.interviewcake.com/concept/java/mutable
- https://www.sitepoint.com/immutability-javascript/
### 请解释同步和异步函数之间的区别。
同步函数阻塞，而异步函数不阻塞。在同步函数中，语句完成后，下一句才执行。在这种情况下，程序可以按照语句的顺序进行精确评估，如果其中一个语句需要很长时间，程序的执行会停滞很长时间。
异步函数通常接受回调作为参数，在调用异步函数后立即继续执行下一行。回调函数仅在异步操作完成且调用堆栈为空时调用。诸如从 Web 服务器加载数据或查询数据库等重负载操作应该异步完成，以便主线程可以继续执行其他操作，而不会出现一直阻塞，直到费时操作完成的情况（在浏览器中，界面会卡住）。
### 什么是事件循环？调用堆栈和任务队列之间有什么区别？
事件循环是一个单线程循环，用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数，则将回调函数出队并推送到调用堆栈中执行。
@ -846,8 +764,6 @@ console.log(student1, student2);
- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
### 请解释`function foo() {}`和`var foo = function() {}`之间`foo`的用法上的区别。
前者是函数声明，后者是函数表达式。关键的区别在于函数声明会使函数体提升（具有与变量相同的提升行为），但函数表达式的函数体不能。有关变量提升的更多解释，请参阅上面关于变量提升的问题。如果你试图在定义函数表达式之前调用它，你会得到一个`Uncaught TypeError: XXX is not a function`的错误。
@ -874,8 +790,6 @@ var foo = function () {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
### 使用`let`、`var`和`const`创建变量有什么区别？
用`var`声明的变量的作用域是它当前的执行上下文，它可以是嵌套的函数，也可以是声明在任何函数外的变量。`let`和`const`是块级作用域，意味着它们只能在最近的一组花括号（function、if-else 代码块或 for 循环中）中访问。
@ -956,8 +870,6 @@ baz = 'qux';
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
### ES6 的类和 ES5 的构造函数有什么区别？
让我们来看一个例子：
@ -1009,14 +921,10 @@ class Student extends Person {
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
### 你能给出一个使用箭头函数的例子吗，箭头函数与其他函数有什么不同？
一个很明显的优点就是箭头函数可以简化创建函数的语法，我们不需要在箭头函数前面加上 `function` 关键词。并且箭头函数的 `this` 会自动绑定到当前作用域的上下文中，这和普通的函数不一样。普通函数的 `this` 是在执行的时候才能确定的。箭头函数的这个特点对于回调函数来说特别有用，特别对于 React 组件而言。
### 在构造函数中使用箭头函数有什么好处？
在构造函数里使用箭头函数的主要优点是它的 `this` 只与箭头函数创建时的 `this` 保持一致，并且不会修改。所以，当用构造函数去创建一个新的对象的时候，箭头函数的 `this` 总是指向新创建的对象。比如，假设我们有一个 `Person` 构造函数，它接受一个 `firstName` 参数，并且它有两个方法去调用 `console.log` 这个 `firstName`，一个是正常的函数，而另一个则是箭头函数:
@ -1061,8 +969,6 @@ sayNameFromWindow2(); // John
(想看更好的演示以及示例代码，可以打开这篇文章: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
### 高阶函数（higher-order）的定义是什么？
高阶函数是将一个或多个函数作为参数的函数，它用于数据处理，也可能将函数作为返回结果。高阶函数是为了抽象一些重复执行的操作。一个典型的例子是`map`，它将一个数组和一个函数作为参数。`map`使用这个函数来转换数组中的每个元素，并返回一个包含转换后元素的新数组。JavaScript 中的其他常见示例是`forEach`、`filter`和`reduce`。高阶函数不仅需要操作数组的时候会用到，还有许多函数返回新函数的用例。`Function.prototype.bind`就是一个例子。
@ -1103,8 +1009,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
- https://eloquentjavascript.net/05_higher_order.html
### 请给出一个解构（destructuring）对象或数组的例子。
解构是 ES6 中新功能，它提供了一种简洁方便的方法来提取对象或数组的值，并将它们放入不同的变量中。
@ -1147,8 +1051,6 @@ console.log(q); // true
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://ponyfoo.com/articles/es6-destructuring-in-depth
### ES6 的模板字符串为生成字符串提供了很大的灵活性，你可以举个例子吗？
**_模板字面量_**（Template literals） 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。
@ -1205,8 +1107,6 @@ message; //"我来给大家介绍:张三的年龄是20."
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
### 你能举出一个柯里化函数（curry function）的例子吗？它有哪些好处？
柯里化（currying）是一种模式，其中具有多个参数的函数被分解为多个函数，当被串联调用时，将一次一个地累积所有需要的参数。这种技术帮助编写函数式风格的代码，使代码更易读、紧凑。值得注意的是，对于需要被 curry 的函数，它需要从一个函数开始，然后分解成一系列函数，每个函数都需要一个参数。
@ -1243,8 +1143,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
- https://hackernoon.com/currying-in-js-d9ddc64f162e
### 使用扩展运算符（spread）的好处是什么，它与使用剩余参数语句（rest）有什么区别？
在函数泛型编码时，ES6 的扩展运算符非常有用，因为我们可以轻松创建数组和对象的拷贝，而无需使用`Object.create`、`slice`或其他函数库。这个语言特性在 Redux 和 RxJS 的项目中经常用到。
@ -1289,8 +1187,6 @@ const {e, f, ...others} = {
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
### 如何在文件之间共用代码？
这取决于执行 JavaScript 的环境。
@ -1301,8 +1197,6 @@ const {e, f, ...others} = {
ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终将在浏览器和 Node 环境中得到支持。
###### 参考
- http://requirejs.org/docs/whyamd.html
@ -1317,8 +1211,6 @@ ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
### 其他答案
- http://flowerszhong.github.io/2013/11/20/javascript-questions.html

2
website/src/theme/DocSidebar/Mobile/index.d.ts vendored
View File

@ -1,5 +1,5 @@
import React from 'react';
import type { Props } from '@theme/DocSidebar/Mobile';
import type {Props} from '@theme/DocSidebar/Mobile';
declare function DocSidebarMobile(props: Props): JSX.Element;
declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
export default _default;

8
yarn.lock Normal file
View File

@ -0,0 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
prettier@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==