contents: removed unnecessary back-to-top button (#359)
* removed unnecessary back-to-top button from trivia questions page * removed btt-button from other language
This commit is contained in:
Asifur Rahaman
GitHub
parent
8d862301a4
commit
9074fbb10e
|
|
@ -29,7 +29,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe `float`s and how they work.
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ Alternatively, give `overflow: auto` or `overflow: hidden` property to the paren
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe `z-index` and how stacking context is formed.
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ _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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe Block Formatting Context (BFC) and how it works.
|
||||
|
||||
|
|
@ -114,7 +114,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the various clearing techniques and which is appropriate for what context?
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain CSS sprites, and how you would implement them on a page or site.
|
||||
|
||||
|
|
@ -143,7 +143,7 @@ CSS sprites combine multiple images into one single larger image. It is a common
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### How would you approach fixing browser-specific styling issues?
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ 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)
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the different ways to visually hide content (and make it available only for screen readers)?
|
||||
|
||||
|
|
@ -184,7 +184,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Have you ever used a grid system, and if so, what do you prefer?
|
||||
|
||||
|
|
@ -192,13 +192,13 @@ Before Flex became popular (around 2014), the `float`-based grid system was the
|
|||
|
||||
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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Are you familiar with styling SVG?
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Can you give an example of an @media property other than screen?
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ Here is an example of `print` media type's usage:
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are some of the "gotchas" for writing efficient CSS?
|
||||
|
||||
|
|
@ -265,7 +265,7 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep
|
|||
- https://developers.google.com/web/fundamentals/performance/rendering/
|
||||
- https://csstriggers.com/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the advantages/disadvantages of using CSS preprocessors?
|
||||
|
||||
|
|
@ -283,7 +283,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe what you like and dislike about the CSS preprocessors you have used.
|
||||
|
||||
|
|
@ -297,13 +297,13 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain how a browser determines what elements match a CSS selector.
|
||||
|
||||
|
|
@ -315,7 +315,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe pseudo-elements and discuss what they are used for.
|
||||
|
||||
|
|
@ -329,7 +329,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
|
||||
|
||||
|
|
@ -354,7 +354,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What does `* { box-sizing: border-box; }` do? What are its advantages?
|
||||
|
||||
|
|
@ -368,7 +368,7 @@ The box model has the following rules:
|
|||
|
||||
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is the CSS `display` property and can you give a few examples of its use?
|
||||
|
||||
|
|
@ -385,7 +385,7 @@ 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` |
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between `inline` and `inline-block`?
|
||||
|
||||
|
|
@ -400,7 +400,7 @@ 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. |
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?
|
||||
|
||||
|
|
@ -416,7 +416,7 @@ A positioned element is an element whose computed `position` property is either
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/CSS/position
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
|
||||
|
||||
|
|
@ -424,7 +424,7 @@ A positioned element is an element whose computed `position` property is either
|
|||
- **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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Have you played around with the new CSS Flexbox or Grid specs?
|
||||
|
||||
|
|
@ -438,7 +438,7 @@ Grid is by far the most intuitive approach for creating grid-based layouts (it b
|
|||
|
||||
- https://philipwalton.github.io/solved-by-flexbox/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
|
||||
|
||||
|
|
@ -479,7 +479,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### How is responsive design different from adaptive design?
|
||||
|
||||
|
|
@ -500,7 +500,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Have you ever worked with retina graphics? If so, when and what techniques did you use?
|
||||
|
||||
|
|
@ -539,7 +539,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
|
||||
|
||||
|
|
@ -551,7 +551,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Other Answers
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
|
|||
- https://html.spec.whatwg.org/multipage/xhtml.html
|
||||
- https://quirks.spec.whatwg.org/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### How do you serve a page with content in multiple languages?
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What kind of things must you be wary of when designing or developing for multilingual sites?
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are `data-` attributes good for?
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
|
||||
|
||||
|
|
@ -114,7 +114,7 @@ _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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
|
||||
|
||||
|
|
@ -130,7 +130,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is progressive rendering?
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
|
||||
|
||||
|
|
@ -192,13 +192,13 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Other Answers
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain how `this` works in JavaScript
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain how prototypal inheritance works
|
||||
|
||||
|
|
@ -128,7 +128,7 @@ child.constructor.name;
|
|||
- https://crockford.com/javascript/prototypal.html
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What do you think of AMD vs CommonJS?
|
||||
|
||||
|
|
@ -143,7 +143,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?
|
||||
|
||||
|
|
@ -166,7 +166,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
|
||||
|
||||
|
|
@ -213,7 +213,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is a closure, and how/why would you use one?
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
|
||||
|
||||
|
|
@ -270,7 +270,7 @@ The main difference between `.forEach` and `.map()` is that `.map()` returns a n
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's a typical use case for anonymous functions?
|
||||
|
||||
|
|
@ -305,7 +305,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### How do you organize your code? (module pattern, classical inheritance?)
|
||||
|
||||
|
|
@ -315,7 +315,7 @@ 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).
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between host objects and native objects?
|
||||
|
||||
|
|
@ -327,7 +327,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
|
||||
|
||||
|
|
@ -355,7 +355,7 @@ console.log(person.name); // "john"
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between `.call` and `.apply`?
|
||||
|
||||
|
|
@ -370,7 +370,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain `Function.prototype.bind`.
|
||||
|
||||
|
|
@ -384,7 +384,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### When would you use `document.write()`?
|
||||
|
||||
|
|
@ -397,7 +397,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between feature detection, feature inference, and using the UA string?
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain Ajax in as much detail as possible.
|
||||
|
||||
|
|
@ -450,7 +450,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the advantages and disadvantages of using Ajax?
|
||||
|
||||
|
|
@ -469,7 +469,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain how JSONP works (and how it's not really Ajax).
|
||||
|
||||
|
|
@ -503,7 +503,7 @@ These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) i
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Have you ever used JavaScript templating? If so, what libraries have you used?
|
||||
|
||||
|
|
@ -515,7 +515,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain "hoisting".
|
||||
|
||||
|
|
@ -564,13 +564,13 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What's the difference between an "attribute" and a "property"?
|
||||
|
||||
|
|
@ -593,7 +593,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Why is extending built-in JavaScript objects not a good idea?
|
||||
|
||||
|
|
@ -605,7 +605,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Difference between document `load` event and document `DOMContentLoaded` event?
|
||||
|
||||
|
|
@ -618,7 +618,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is the difference between `==` and `===`?
|
||||
|
||||
|
|
@ -645,7 +645,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain the same-origin policy with regards to JavaScript.
|
||||
|
||||
|
|
@ -655,7 +655,7 @@ The same-origin policy prevents JavaScript from making requests across domain bo
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Make this work:
|
||||
|
||||
|
|
@ -679,7 +679,7 @@ const duplicate = (arr) => [...arr, ...arr];
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Why is it called a Ternary expression, what does the word "Ternary" indicate?
|
||||
|
||||
|
|
@ -689,7 +689,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is `"use strict";`? What are the advantages and disadvantages to using it?
|
||||
|
||||
|
|
@ -718,7 +718,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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`.
|
||||
|
||||
|
|
@ -738,13 +738,13 @@ I would not advise you to write the above during interviews though. Just stick w
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -758,7 +758,7 @@ TODO.
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain what a single page app is and how to make one SEO-friendly.
|
||||
|
||||
|
|
@ -787,7 +787,7 @@ The downsides:
|
|||
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is the extent of your experience with Promises and/or their polyfills?
|
||||
|
||||
|
|
@ -799,7 +799,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the pros and cons of using Promises instead of callbacks?
|
||||
|
||||
|
|
@ -824,7 +824,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
|
||||
|
||||
|
|
@ -852,7 +852,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What tools and techniques do you use for debugging JavaScript code?
|
||||
|
||||
|
|
@ -871,7 +871,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What language constructions do you use for iterating over object properties and array items?
|
||||
|
||||
|
|
@ -904,7 +904,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain the difference between mutable and immutable objects.
|
||||
|
||||
|
|
@ -990,7 +990,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
#### How can you achieve immutability in your own code?
|
||||
|
||||
|
|
@ -1017,7 +1017,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain the difference between synchronous and asynchronous functions.
|
||||
|
||||
|
|
@ -1025,7 +1025,7 @@ Synchronous functions are blocking while asynchronous functions are not. In sync
|
|||
|
||||
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).
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is event loop? What is the difference between call stack and task queue?
|
||||
|
||||
|
|
@ -1037,7 +1037,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`
|
||||
|
||||
|
|
@ -1065,7 +1065,7 @@ var foo = function () {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the differences between variables created using `let`, `var` or `const`?
|
||||
|
||||
|
|
@ -1147,7 +1147,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the differences between ES6 class and ES5 function constructors?
|
||||
|
||||
|
|
@ -1200,13 +1200,13 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What advantage is there for using the arrow syntax for a method in a constructor?
|
||||
|
||||
|
|
@ -1255,7 +1255,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What is the definition of a higher-order function?
|
||||
|
||||
|
|
@ -1297,7 +1297,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Can you give an example for destructuring an object or an array?
|
||||
|
||||
|
|
@ -1341,7 +1341,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
|
||||
|
||||
|
|
@ -1408,7 +1408,7 @@ document.body.innerHTML = `
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Can you give an example of a curry function and why this syntax offers an advantage?
|
||||
|
||||
|
|
@ -1446,7 +1446,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
|
|||
|
||||
- https://hackernoon.com/currying-in-js-d9ddc64f162e
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### What are the benefits of using spread syntax and how is it different from rest syntax?
|
||||
|
||||
|
|
@ -1492,7 +1492,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### How can you share code between files?
|
||||
|
||||
|
|
@ -1504,7 +1504,7 @@ 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.
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
###### References
|
||||
|
||||
|
|
@ -1520,7 +1520,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#table-of-contents)
|
||||
|
||||
|
||||
### Other Answers
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Die DOCTYPE Spezifikation für den HTML5 Standard ist `<!DOCTYPE html>`.
|
|||
- https://html.spec.whatwg.org/multipage/xhtml.html
|
||||
- https://quirks.spec.whatwg.org/
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus?
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst?
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Wofür sind `data-` Attribute nützlich?
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5?
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Beschreibe die Unterschiede zwischen `Cookies`, `sessionStorage` und `localStorage`.
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ _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
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Beschreibe die Unterschiedie zwischen `<script>`, `<script async>` und `<script defer>`.
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Was ist progressives Rendern?
|
||||
|
||||
|
|
@ -174,7 +174,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
|
|
@ -195,13 +195,13 @@ 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/
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Back to top](#inhaltsverzeichnis)
|
||||
|
||||
|
||||
### Andere Antworten
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ 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/
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿Cómo desplegar una página con contenido en varios idiomas?
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ En el back-end, el HTML contendrá marcadores de posición `i18n` y contenido pa
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿Qué debes tener en cuenta al diseñar o desarrollar sitios en múltiples lenguajes?
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ 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
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿Para qué sirve el atributo `data-`?
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ 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
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿Consideras HTML5 como una plataforma web abierta. Cuáles son los componentes básicos de HTML5?
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ 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
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### Describe las diferenias entre `cookie`, `sessionStorage` y `localStorage`.
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ _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
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### Describe las diferencias entre `<script>`, `<script async>` y `<script defer>`.
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ 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/
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿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?
|
||||
|
||||
|
|
@ -145,7 +145,7 @@ 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/
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿Qué es el renderizado progresivo?
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ 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/
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿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.
|
||||
|
||||
|
|
@ -185,13 +185,13 @@ 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/
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### ¿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.
|
||||
|
||||
[[↑] Volver arriba](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### Otras Respuestas
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ La delegación de eventos es una técnica en la cual los escuchas de eventos se
|
|||
|
||||
- https://medium.com/@osmancea/delegaci%C3%B3n-de-eventos-del-dom-con-javascript-d28131d43686
|
||||
- https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Eventos
|
||||
- [[↑] Ir al principio](#tabla-de-contenidos)
|
||||
|
||||
### Explique como funciona this
|
||||
|
||||
|
|
@ -115,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 [[↑] Ir al principio](#tabla-de-contenidos)
|
||||
- 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?
|
||||
|
||||
|
|
@ -164,7 +163,7 @@ 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
|
||||
|
||||
[[↑] Ir al principio](#tabla-de-contenidos)
|
||||
|
||||
|
||||
### Que es una closure, y como/porque se utilizaria?
|
||||
|
||||
|
|
@ -180,4 +179,4 @@ 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
|
||||
|
||||
[[↑] Ir al principio](#tabla-de-contenidos)
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ 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 の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
|
||||
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `float` とは何ですか？どのようにはたらきますか？
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ CSS の `clear` プロパティは、`left`/`right`/`both` フロート要素の
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ 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）とその仕組みを教えてください。
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ BFC が崩壊したときに隣接するブロックレベルボックス間の
|
|||
- https://developer.mozilla.org/ja/docs/Web/CSS/Block_formatting_context (日本語)
|
||||
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ BFC が崩壊したときに隣接するブロックレベルボックス間の
|
|||
|
||||
大規模なプロジェクトでは、ユーティリティ `.clearfix` クラスを作成し、必要な場所で使用します。子供が親よりも背が高く、それほど理想的でない場合、`overflow: hidden` は子供をクリップするかもしれません。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### CSS スプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
|
|||
- ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。
|
||||
- Reset CSS または Normalize.css を使用してください。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
|
|||
- 自動ベンダー接頭辞挿入のための\*オートプレフィクサー。
|
||||
- [Modernizr](https://modernizr.com/) を使った機能の検出
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。
|
||||
|
||||
|
|
@ -180,25 +180,25 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
|
|||
- https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA (日本語)
|
||||
- http://a11yproject.com/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？
|
||||
|
||||
私は `float` ベースのグリッドシステムが好きです。なぜなら、既存の代替システム（フレックス、グリッド）の中でも最も多くのブラウザをサポートしているからです。ブートストラップで長年使用されており、動作することが証明されています。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### メディアクエリやモバイル固有のレイアウト/CSS を使用したり実装したことはありますか？
|
||||
|
||||
はい。一例は、ピル型ナビゲーションを、特定のブレークポイントを越えた固定底のタブ型ナビゲーションに変換することである。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### SVG のスタイリングについては詳しいですか？
|
||||
|
||||
いいえ...悲しいことに。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `screen` 以外の @media プロパティの例を挙げられますか？
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
|
|||
}
|
||||
```
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 効率的な CSS を書くにために避けるべき "落とし穴" にはどんなものがありますか？
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
|
|||
- https://developers.google.com/web/fundamentals/performance/rendering/
|
||||
- https://csstriggers.com/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### CSS プリプロセッサを使用するメリットとデメリットには何がありますか？
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
|
|||
|
||||
- 前処理のためのツールが必要です。再コンパイル時間が遅くなることがあります。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 使用したことのある CSS プリプロセッサについて好きなものと嫌いなものを教えてください。
|
||||
|
||||
|
|
@ -264,13 +264,13 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
|
|||
- C++ で書かれた LibSass のバインディングである `node-sass` を使って Sass を使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。
|
||||
- Less では、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブ CSS キーワードと混同することがあります。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 非標準フォントを使用する Web サイトを実装するにはどのようにしますか？
|
||||
|
||||
`font-face` を使って `font-weight` の `font-family` を定義してください。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### CSS セレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。
|
||||
|
||||
|
|
@ -282,7 +282,7 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute`
|
|||
|
||||
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ CSS 疑似要素はセレクタに追加されたキーワードで、選択し
|
|||
|
||||
- https://css-tricks.com/almanac/selectors/a/after-and-before/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### ボックスモデルがなんであるかのあなたの理解と、異なるボックスモデルでレイアウトをレンダリングするために CSS でブラウザに指示する方法を説明してください。
|
||||
|
||||
|
|
@ -321,7 +321,7 @@ CSS ボックスモデルは、次の計算を行います。
|
|||
|
||||
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ CSS ボックスモデルは、次の計算を行います。
|
|||
- 要素の `height` は、コンテンツの `height` + 垂直 `padding` + 垂直 `border` 幅によって計算されます。
|
||||
- 要素の `width` は、コンテンツの `width` + 水平 `padding` + 水平 `border` 幅によって計算されます。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？
|
||||
|
||||
|
|
@ -338,7 +338,7 @@ CSS ボックスモデルは、次の計算を行います。
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `inline` と `inline-block` の違いは何ですか？
|
||||
|
||||
|
|
@ -353,7 +353,7 @@ TODO
|
|||
| マージンとパディング | 上下左右に指定できる。 | 上下左右に指定できる。 | 左右のみ指定可能。上下に指定をしてもレイアウトに影響はない。 `border` と `padding` が要素の周りに視覚的に現れていても、上下のスペースは `line-height` によって決まる。 |
|
||||
| フロート | - | - | 上下の `margins` と `paddings` を設定できる `block` 要素のようになる。 |
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？
|
||||
|
||||
|
|
@ -370,7 +370,7 @@ TODO
|
|||
- https://developer.mozilla.org/en/docs/Web/CSS/position (英語)
|
||||
- https://developer.mozilla.org/ja/docs/Web/CSS/position (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？
|
||||
|
||||
|
|
@ -378,7 +378,7 @@ TODO
|
|||
- **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。
|
||||
- **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### CSS の Flexbox や Grid の仕様で遊んだことはありますか？
|
||||
|
||||
|
|
@ -392,13 +392,13 @@ Flexbox は、コンテナ内の要素の垂直方向のセンタリング、ス
|
|||
|
||||
- https://philipwalton.github.io/solved-by-flexbox/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？
|
||||
|
||||
TODO
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### レスポンシブデザインはアダプティブデザインと何が違いますか？
|
||||
|
||||
|
|
@ -415,7 +415,7 @@ TODO
|
|||
- http://mediumwell.com/responsive-adaptive-mobile/
|
||||
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？
|
||||
|
||||
|
|
@ -429,7 +429,7 @@ TODO
|
|||
|
||||
- https://www.sitepoint.com/css-techniques-for-retina-displays/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。
|
||||
|
||||
|
|
@ -441,7 +441,7 @@ TODO
|
|||
|
||||
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 他の方の回答集
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://www.w3.org/QA/Tips/Doctype
|
||||
- https://quirks.spec.whatwg.org/#history
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### どのようにすれば複数の言語のコンテンツを含むページを提供できますか？
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ HTTP リクエストがサーバに対して行われるとき、リクエスト
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ HTTP リクエストがサーバに対して行われるとき、リクエスト
|
|||
|
||||
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `data-` 属性は何のために使われるのですか？
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ 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,7 +82,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
|
|||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (英語)
|
||||
- https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `cookie`、`sessionStorage`、`localStorage` の違いを教えてください。
|
||||
|
||||
|
|
@ -103,7 +103,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
|
|||
- https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies (日本語)
|
||||
- http://tutorial.techaltum.com/local-and-session-storage.html
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `<script>`、`<script async>`、`<script defer>` の違いを教えてください。
|
||||
|
||||
|
|
@ -119,7 +119,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
|
|||
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
|
||||
- https://bitsofco.de/async-vs-defer/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### なぜ一般的に、CSS の `<link>` を `<head></head>` の間に、JS の `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？こうすべきでない例外を知っていますか？
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
|
|||
|
||||
- https://developer.yahoo.com/performance/rules.html#css_top
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### プログレッシブレンダリングとは何ですか？
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ 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` 属性を使用する理由は？この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。
|
||||
|
||||
|
|
@ -177,13 +177,13 @@ 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 を使ったことがあります。私の意見では、これらはおおよそ同じようなものであり、表示されるデータを操作するためのエスケープするコンテンツや役立つフィルタと同様の機能を提供します。ほとんどのテンプレートエンジンでは、表示前にカスタム処理が必要なイベントに独自のフィルタを挿入することもできます。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 他の方の回答集
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://davidwalsh.name/event-delegate
|
||||
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### JavaScript の `this` はどう機能するものなのか説明してください。
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
|
||||
- https://stackoverflow.com/a/3127440/1751946
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### プロトタイプ継承はどのように機能するか説明してください。
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
|
||||
- https://davidwalsh.name/javascript-objects
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### AMD と CommonJS は何が違いますか？
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ 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 として機能させるには何を変える必要がありますか？
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ IIFE は、Immediately Invoked Function Expressions の略です。JavaScript
|
|||
|
||||
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 変数が `null`、`undefined`、未定義だったときの違いはなんでしょう？どのようにして、これらの状態を調べますか？
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ 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,7 +141,7 @@ 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,7 +182,7 @@ const doubled = a.map((num) => {
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 無名関数の典型的な使い方を教えてください。
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ 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？)
|
||||
|
||||
|
|
@ -227,7 +227,7 @@ console.log(double); // [2, 4, 6]
|
|||
|
||||
私は可能な限り古典的な継承を避けます。私がそうすると、[これらの規則](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)に固執します。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### host objects と native objects は何が違いますか？
|
||||
|
||||
|
|
@ -239,7 +239,7 @@ 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()`
|
||||
|
||||
|
|
@ -268,7 +268,7 @@ 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` の違いはなんですか？
|
||||
|
||||
|
|
@ -283,7 +283,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `Function.prototype.bind` について説明してください。
|
||||
|
||||
|
|
@ -298,7 +298,7 @@ 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()` はいつ使いますか？
|
||||
|
||||
|
|
@ -311,7 +311,7 @@ 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 の違いはなんですか？
|
||||
|
||||
|
|
@ -353,7 +353,7 @@ 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 をできるだけ詳しく説明してください。
|
||||
|
||||
|
|
@ -367,7 +367,7 @@ Ajax（非同期 JavaScript と XML）は、クライアント側で多くの We
|
|||
- https://developer.mozilla.org/en-US/docs/AJAX (英語)
|
||||
- https://developer.mozilla.org/ja/docs/AJAX (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### Ajax を利用する利点と欠点はなんですか？
|
||||
|
||||
|
|
@ -385,7 +385,7 @@ Ajax（非同期 JavaScript と XML）は、クライアント側で多くの We
|
|||
- 一部の Webcrawler は JavaScript を実行しないため、JavaScript によって読み込まれたコンテンツは表示されません。
|
||||
- SPA の基本的な欠点。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### JSONP がどのように機能するか（またそれが Ajax とはどこが違うのか）を説明してください。
|
||||
|
||||
|
|
@ -419,7 +419,7 @@ JSONP は安全ではなく、セキュリティ上の問題もあります。JS
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### JavaScript templating を使ったことがありますか？ もしあれば、どのライブラリを使ったことがありますか？
|
||||
|
||||
|
|
@ -431,7 +431,7 @@ const template = `<div>My name is: ${name}</div>`;
|
|||
|
||||
ただし、上記のアプローチでは、テンプレートライブラリとは異なり、コンテンツがエスケープされない可能性があるため、潜在的な XSS に注意してください。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### "巻き上げ"について説明してください。
|
||||
|
||||
|
|
@ -469,13 +469,13 @@ var bar = function () {
|
|||
console.log(bar); // [Function: bar]
|
||||
```
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### event bubbling について教えてください。
|
||||
|
||||
DOM エレメントでイベントがトリガーされると、リスナーが接続されている場合にイベントを処理しようとすると、そのイベントは親に浮上(bubble up)され、同じことが起こります。この泡立ちは、要素の先祖を `document` までずっと上げています。イベントの浮上(bubble up)は、イベントの委任の背後にあるメカニズムです。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### "attribute" と "property" の違いを説明してください。
|
||||
|
||||
|
|
@ -498,7 +498,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか？
|
||||
|
||||
|
|
@ -510,7 +510,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### document `load` event と document `DOMContentLoaded` event の違いは？
|
||||
|
||||
|
|
@ -525,7 +525,7 @@ 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 (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### `==` と `===` の違いはなんですか？
|
||||
|
||||
|
|
@ -552,7 +552,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### JavaScript の同一オリジンポリシーについて説明してください。
|
||||
|
||||
|
|
@ -562,7 +562,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 以下のコードを動くようにしてください:
|
||||
|
||||
|
|
@ -578,7 +578,7 @@ function duplicate(arr) {
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### それが Ternary expression と呼ばれるのはなぜですか？ "Ternary" はどういう意味で使われているのでしょうか？
|
||||
|
||||
|
|
@ -589,7 +589,7 @@ 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";` とはなんですか？これを使う利点と欠点を教えてください。
|
||||
|
||||
|
|
@ -618,7 +618,7 @@ 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 ループを作成してください。
|
||||
|
||||
|
|
@ -638,13 +638,13 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### Web サイトのグローバルスコープをそのままの状態を保ち、決して触らないことが、一般的に良いとされているのはなぜですか？
|
||||
|
||||
すべてのスクリプトはグローバルスコープにアクセスできます。誰もが独自の変数を定義するためにグローバル名前空間を使用している場合、衝突が発生します。モジュールパターン（IIFE）を使用して、変数をローカル名前空間内にカプセル化します。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### なぜあなたは `load` イベントのようなものを使うのですか？このイベントには欠点がありますか？あなたは何か選択肢を知っていますか、なぜそれらを使うのですか？
|
||||
|
||||
|
|
@ -659,7 +659,7 @@ TODO.
|
|||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (英語)
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### シングルページアプリが何であるか、そして SEO に優しいアプリを作る方法を説明してください。
|
||||
|
||||
|
|
@ -688,7 +688,7 @@ TODO.
|
|||
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### プロミスおよび/またはそのポリフィルの経験はどの程度ですか？
|
||||
|
||||
|
|
@ -700,7 +700,7 @@ TODO.
|
|||
|
||||
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### コールバックの代わりにプロミスを使用することの長所と短所は何ですか？
|
||||
|
||||
|
|
@ -715,7 +715,7 @@ TODO.
|
|||
- やや複雑なコード（議論の余地がある）。
|
||||
- ES2015 がサポートされていない古いブラウザでは、使用するためにポリフィルをロードする必要があります。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### JavaScript にコンパイルしてくれる言語で JavaScript を書く利点と欠点をいくつか教えてください。
|
||||
|
||||
|
|
@ -743,7 +743,7 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
|
|||
|
||||
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？
|
||||
|
||||
|
|
@ -760,7 +760,7 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
|
|||
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
|
||||
- https://raygun.com/blog/javascript-debugging/
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### オブジェクトのプロパティや、配列の要素をイテレートする際にどの構文を使いますか？
|
||||
|
||||
|
|
@ -777,7 +777,7 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
|
|||
|
||||
ほとんどの場合、私は `.forEach` メソッドを好むでしょうが、本当にあなたがしようとしているものに依存します。`for` ループは、より柔軟性を持たせます。たとえば、`break` を使ってループを早期に終了するか、ループごとにイテレータを複数回インクリメントします。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### mutable と immutable オブジェクトの違いを説明してください
|
||||
|
||||
|
|
@ -787,7 +787,7 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### synchronous と asynchronous functions の違いを説明してください。
|
||||
|
||||
|
|
@ -795,7 +795,7 @@ TODO
|
|||
|
||||
非同期関数は、通常コールバックをパラメータとして受け取り、非同期関数が呼ばれた後、直ちに次の行を実行します。コールバックは、非同期処理が完了し呼び出しスタックが空の場合にのみ呼び出されます。Web サーバーからのデータのロードやデータベースのクエリなどとても重い処理は非同期で実行すべきで、そうすることで、メインスレッドは長い処理が完了するまでブロッキングすることなく(ブラウザの場合、UI がフリーズします)、他の処理を継続して実行出来ます。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### event loop とはなんですか？call stack や task queue との違いはなんですか？
|
||||
|
||||
|
|
@ -808,7 +808,7 @@ 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` の使い方の違いを説明してください。
|
||||
|
||||
|
|
@ -837,7 +837,7 @@ 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` で宣言した変数の違いはなんですか？
|
||||
|
||||
|
|
@ -922,7 +922,7 @@ 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,13 +976,13 @@ 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 コンポーネントでコールバックを呼び出すときに便利です。
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### コンストラクタにおいて、メソッドをアロー構文で定義する方法の利点はなんですか？
|
||||
|
||||
|
|
@ -1036,7 +1036,7 @@ 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
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 高階関数とはなんですか？
|
||||
|
||||
|
|
@ -1078,7 +1078,7 @@ 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
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### オブジェクトと配列について、「分割代入」の例を教えてください。
|
||||
|
||||
|
|
@ -1123,7 +1123,7 @@ 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 のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが、例を示すことはできますか？
|
||||
|
||||
|
|
@ -1191,7 +1191,7 @@ 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 (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### カリー化の例を説明してください。またカリー化がもたらす利点はどこにあるのでしょうか？
|
||||
|
||||
|
|
@ -1229,7 +1229,7 @@ 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 とは何が違っていますか？
|
||||
|
||||
|
|
@ -1278,7 +1278,7 @@ 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 (日本語)
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### ファイル間でコードを共有するにはどうすれば良いですか？
|
||||
|
||||
|
|
@ -1296,7 +1296,7 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
|
|||
- https://nodejs.org/docs/latest/api/modules.html
|
||||
- http://2ality.com/2014/09/es6-modules-final.html
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 静的クラスメンバーはどんな場面で使いますか？
|
||||
|
||||
|
|
@ -1306,7 +1306,7 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
|
|||
|
||||
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
|
||||
|
||||
[[↑] 先頭に戻る](#目次)
|
||||
|
||||
|
||||
### 他の方の回答集
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
|
||||
- https://www.sitepoint.com/web-foundations/specificity/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `Resetting`과 `Normalizing` CSS의 차이점은 무엇인가요? 당신은 무엇을 선택할 것이며, 그 이유는 무엇인가요?
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
|
||||
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `float`가 어떻게 작동하는지 설명하세요.
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ CSS `clear` 속성은 float 요소에 `left`/`right`/`both`에 위치하도록
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `z-index`와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명하세요.
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### BFC(Block Formatting Context)와 그 작동 방식을 설명하세요.
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### clear 하는 방법에는 어떤 것이 있으며, 각각 어떤 상황에 적합한가요?
|
||||
|
||||
|
|
@ -120,7 +120,7 @@ BFC collapse 시에 인접한 블록 레벨 박스 사이의 수직 마진. [col
|
|||
|
||||
대규모의 프로젝트에서는 유용하게 `.clearfix` 클래스를 만들어 필요한 곳에서 사용합니다. 자식이 부모보다 크기가 큰 경우 `overflow: hidden`은 자식을 모두 보여줄 수 없습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### CSS 스프라이트는 무엇인가요? 그리고 당신이 페이지나 사이트에 구현하는 방법도 설명해 주세요.
|
||||
|
||||
|
|
@ -139,7 +139,7 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?
|
||||
|
||||
|
|
@ -148,7 +148,7 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
|
|||
- `autoprefixer`를 사용하여 벤더 프리픽스를 코드에 자동으로 추가합니다.
|
||||
- Reset CSS 또는 Normalize.css를 사용합니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요?
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합
|
|||
- [Modernizr](https://modernizr.com/)를 사용하여 기능 감지.
|
||||
- CSS Feature 쿼리 [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) 사용.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 콘텐츠를 시각적으로 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는) 다양한 방법은 무엇인가요?
|
||||
|
||||
|
|
@ -179,19 +179,19 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
|
||||
- http://a11yproject.com/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 그리드 시스템을 사용해본적 있나요? 만약 그렇다면, 당신은 어떤 것을 선호하나요?
|
||||
|
||||
저는는 `float` 기반 그리드 시스템을 좋아합니다. 왜냐하면, 여전히 기존 대체할만한 시스템(flex, grid) 중에서도 가장 많은 브라우저를 지원하기 때문입니다. 이것은 `Bootstrap`에서 수 년동안 사용되었으며, 효과가 있다는 것이 입증되었습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 미디어 쿼리나 모바일만을 위한 layouts/CSS를 사용하거나 구현해본적 있나요?
|
||||
|
||||
네. 한가지 예를 들면, 여러 줄 형식의 네비게이션을 특정 breakpoint를 지나면 `fixed-bottom tab` 형태로 변환하였습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### SVG 스타일링에 익숙하신가요?
|
||||
|
||||
|
|
@ -216,7 +216,7 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### screen이 아닌 @media 속성의 예를 들어줄 수 있나요?
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 효율적인 CSS를 작성하는데 있어서 어려움은 무엇인가요?
|
||||
|
||||
|
|
@ -256,7 +256,7 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
- https://developers.google.com/web/fundamentals/performance/rendering/
|
||||
- https://csstriggers.com/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### CSS 전처리기를 사용하면 어떤 장단점이 있나요?
|
||||
|
||||
|
|
@ -272,7 +272,7 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
|
||||
- 전처리기를 위한 도구가 필요합니다. 다시 컴파일하는 시간이 느릴 수도 있습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 사용했던 CSS 전처리기에 대해 좋았던 점과 싫었던 점을 설명해주세요.
|
||||
|
||||
|
|
@ -286,13 +286,13 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
- 저는 C++로 작성된 LibSass 바인딩인 `node-sass`를 통해 Sass를 사용합니다. 노드 버전을 바꿀 때 자주 다시 컴파일해야 했습니다.
|
||||
- Less에서는 변수 이름의 접두어가 `@`이며, `@media`, `@import`, `@font-face` 규칙과 같은 고유 CSS 키워드와 혼동될 수 있습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 비표준 글꼴을 사용하는 웹 디자인 컴포넌트를 어떻게 구현하나요?
|
||||
|
||||
`font-face`를 사용하고 `font-weight`가 다른 경우 `font-family`를 정의합니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 브라우저가 CSS 선택자에 일치하는 요소를 어떻게 결정하는지 설명하세요.
|
||||
|
||||
|
|
@ -304,7 +304,7 @@ WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치
|
|||
|
||||
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### Pseudo-elements에 대해 설명하고 이 요소가 무엇을 위해 사용되는지 설명하세요.
|
||||
|
||||
|
|
@ -318,7 +318,7 @@ CSS Pseudo-element는 선택자에 추가되는 키워드로, 선택한 요소
|
|||
|
||||
- <https://css-tricks.com/almanac/selectors/a/after-and-before/>
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 박스 모델에 대한 당신의 이해와 CSS에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하세요.
|
||||
|
||||
|
|
@ -343,7 +343,7 @@ CSS 박스 모델은 다음을 계산합니다.
|
|||
|
||||
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `* { box-sizing: border-box; }`는 무엇을 하나요? 장점은 무엇인가요?
|
||||
|
||||
|
|
@ -357,7 +357,7 @@ CSS 박스 모델은 다음을 계산합니다.
|
|||
|
||||
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### CSS의 `display` 속성은 무엇이며 사용법에 대한 몇 가지 예를 들 수 있나요?
|
||||
|
||||
|
|
@ -365,7 +365,7 @@ CSS 박스 모델은 다음을 계산합니다.
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `inline` 과 `inline-block` 의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -380,7 +380,7 @@ TODO
|
|||
| margin 과 padding | 모든 방향에서 가능. | 모든 방향에서 가능. | 수평방향만 가능. 세로방향을 지정하면, 레이아웃에 영향을 주지 않습니다. `border`와 `padding`이 콘텐츠 주위에 시각적으로 나타나는 경우에도, 수직영역은 `line-height`에 의존합니다. |
|
||||
| Float | - | - | 수직 margin과 padding을 설정할 수 있는 `block` 요소와 같아집니다. |
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `relative`, `fixed`, `absolute`, `static` 요소의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -396,7 +396,7 @@ TODO
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/CSS/position
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 로컬이나 프로덕션 환경에서 사용했던 CSS 프레임워크는 무엇인가요? 어떻게 그들을 바꾸거나 개선할 수 있을까요?
|
||||
|
||||
|
|
@ -404,7 +404,7 @@ TODO
|
|||
- **Semantic UI** - 소스 코드 구조는 테마 커스터마이징을 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 벤더 라이브러리 내의 하드 코딩된 설정 경로. 부트스트랩과 달리 변수 오버라이드에 대해 잘 설계되지 않았습니다.
|
||||
- **Bulma** - 많은 의미없고 불필요한 클래스와 마크업을 필요로 합니다. 이전 버전과 호환되지 않습니다. 버전을 업그레이드하면 미묘한 방식으로 앱이 손상됩니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 새로운 CSS Flexbox나 Grid 스펙을 사용해본 적이 있나요?
|
||||
|
||||
|
|
@ -418,7 +418,7 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
|
|||
|
||||
- https://philipwalton.github.io/solved-by-flexbox/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하세요.
|
||||
|
||||
|
|
@ -459,7 +459,7 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
|
|||
- 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를 받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
|
||||
- 반응형 CSS 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 반응형 디자인은 적응형 디자인과 어떻게 다른가요?
|
||||
|
||||
|
|
@ -475,7 +475,7 @@ Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적
|
|||
- http://mediumwell.com/responsive-adaptive-mobile/
|
||||
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 레티나 그래픽으로 작업 해본 적이 있나요? 그렇다면, 언제, 어떤 기술을 사용하였나요?
|
||||
|
||||
|
|
@ -514,7 +514,7 @@ HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무
|
|||
- http://scottjehl.github.io/picturefill/
|
||||
- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `absolute` 포지셔닝 대신 `translate()`를 사용하는 이유가 무엇인가요? 또는 그 반대의 경우에 대해서는 어떻게 생각하시나요?, 그 이유는 무엇인가요?
|
||||
|
||||
|
|
@ -526,7 +526,7 @@ HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무
|
|||
|
||||
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다른 답변들
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ HTML5 표준에 대한 DOCTYPE 선언은 `<!DOCTYPE html>`입니다.
|
|||
- https://html.spec.whatwg.org/multipage/xhtml.html
|
||||
- https://quirks.spec.whatwg.org/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ HTTP 요청을 서버에 보내면, 대개 요청하는 유저 에이전트가 `
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다국어 사이트를 디자인하거나 개발할 때 주의해야할 사항은 무엇인가요?
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ HTTP 요청을 서버에 보내면, 대개 요청하는 유저 에이전트가 `
|
|||
|
||||
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `data-`속성은 무엇에 좋은가요?
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가요?
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `cookie`, `sessionStorage`, `localStorage` 사이의 차이점을 설명하세요.
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
|
|||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
|
||||
- http://tutorial.techaltum.com/local-and-session-storage.html
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `<script>`, `<script async>`, `<script defer>` 사이의 차이점을 설명하세요.
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는
|
|||
- https://stackoverflow.com/questions/10808109/script-tag-async-defer
|
||||
- https://bitsofco.de/async-vs-defer/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>` 태그를 `</body>` 직전에 위치시키는 것이 좋은 방법인가요? 다른 예외적인 상황을 알고있나요?
|
||||
|
||||
|
|
@ -143,7 +143,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 프로그레시브 렌더링이 무엇인가요?
|
||||
|
||||
|
|
@ -162,7 +162,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇인가요? 이 속성의 컨텐츠를 실행할 때 브라우저의 프로세스를 설명하세요.
|
||||
|
||||
|
|
@ -185,13 +185,13 @@ 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/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다른 HTML 템플릿 언어를 사용해본 적이 있나요?
|
||||
|
||||
네, Pug (구 Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 있습니다. 필자의 견해로, 이들은 다소 차이는 없으며, 보여줄 데이터를 조작하는 데 유용한 필터들과 내용을 escape하는 유사한 기능을 제공합니다. 대부분의 템플릿 엔진을 사용하면 표시하기 전에 처리가 필요한 이벤트에 자신의 필터를 삽입할 수 있습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다른 답변들
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://davidwalsh.name/event-delegate
|
||||
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `this`가 JavaScript에서 어떻게 작동하는지 설명하세요.
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
|
||||
- https://stackoverflow.com/a/3127440/1751946
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 프로토타입 상속이 어떻게 작동하는지 설명하세요.
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
|
||||
- https://davidwalsh.name/javascript-objects
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### AMD vs CommonJS에 대해 어떻게 생각하나요?
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ ES2015 모듈이 동기식 및 비동기식 로딩을 모두 지원하는 것이
|
|||
- https://auth0.com/blog/javascript-module-systems-showdown/
|
||||
- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다음이 IIFE로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE로 만들기 위해서는 무엇을 바꿔야하나요?
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `null`, `undefined`, `undeclared`의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요?
|
||||
|
||||
|
|
@ -136,7 +136,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 클로저는 무엇이며, 어떻게/왜 사용하나요?
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있나요? 왜 둘 중 하나를 선택할 것인가요?
|
||||
|
||||
|
|
@ -193,7 +193,7 @@ const doubled = a.map((num) => {
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 익명 함수의 일반적인 사용 사례는 무엇인가요?
|
||||
|
||||
|
|
@ -228,7 +228,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 코드를 어떻게 구성하나요? (모듈 패턴, 고전적인 상속?)
|
||||
|
||||
|
|
@ -238,7 +238,7 @@ console.log(double); // [2, 4, 6]
|
|||
|
||||
가능한 경우 고전적인 상속을 사용하지 않습니다. 저는 [이 규칙들](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)을 유지합니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 호스트 객체와 내장 객체의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ console.log(double); // [2, 4, 6]
|
|||
|
||||
- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `function Person(){}`, `var person = Person()`, `var person = new Person()`의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -278,7 +278,7 @@ console.log(person.name); // "john"
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `.call`과 `.apply`의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -293,7 +293,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `Function.prototype.bind`에 대해 설명하세요.
|
||||
|
||||
|
|
@ -307,7 +307,7 @@ console.log(add.apply(null, [1, 2])); // 3
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 언제 `document.write()`를 사용하나요?
|
||||
|
||||
|
|
@ -320,7 +320,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### Feature detection, Feature inference, UA String의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -360,7 +360,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### Ajax에 대해 가능한 한 자세히 설명하세요.
|
||||
|
||||
|
|
@ -373,7 +373,7 @@ Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을
|
|||
- https://en.wikipedia.org/wiki/Ajax_(programming)
|
||||
- https://developer.mozilla.org/en-US/docs/AJAX
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### Ajax를 사용하는 것의 장단점은 무엇인가요?
|
||||
|
||||
|
|
@ -391,7 +391,7 @@ Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을
|
|||
- 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.
|
||||
- SPA의 대부분의 단점과 같습니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ JSONP는 안전하지 않을 수 있으며, 보안 관련 이슈가 있습니다
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ const template = `<div>My name is: ${name}</div>`;
|
|||
|
||||
그러나 템플릿 라이브러리와 달리 컨텐츠가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야 합니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `호이스팅`에 대해 설명하세요.
|
||||
|
||||
|
|
@ -477,13 +477,13 @@ var bar = function () {
|
|||
console.log(bar); // [Function: bar]
|
||||
```
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### event bubbling에 대해 설명하세요.
|
||||
|
||||
DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음, 해당 이벤트가 부모에게 bubbling되고 부모에서 같은 이벤트가 발생합니다. 이 bubbling은 요소의 최상단 부모요소인 `document`까지 계속적으로 발생시킵니다. 이벤트 bubbling은 이벤트 위임의 작동 메커니즘입니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### "attribute"와 "property"의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -506,7 +506,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?
|
||||
|
||||
|
|
@ -518,7 +518,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -531,7 +531,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `==`와 `===`의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -558,7 +558,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### JavaScript와 관련하여 same-origin 정책을 설명하세요.
|
||||
|
||||
|
|
@ -568,7 +568,7 @@ same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다음이 작동하게 만들어보세요.
|
||||
|
||||
|
|
@ -584,7 +584,7 @@ function duplicate(arr) {
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 왜 Ternary expression이라고 부르고, "Ternary"라는 단어는 무엇을 나타내나요?
|
||||
|
||||
|
|
@ -594,7 +594,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `"use strict";` 이 무엇인가요? 사용시 장단점이 무엇인가요?
|
||||
|
||||
|
|
@ -623,7 +623,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 100까지 증가하면서 `3`의 배수에는 `fizz`를 출력하고, `5`의 배수에는 `buzz`를 출력하고, `3`과 `5`의 배수에는 `fizzbuzz`를 출력하는 for loop를 만드세요.
|
||||
|
||||
|
|
@ -643,13 +643,13 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요?
|
||||
|
||||
모든 스크립트는 전역 스코프에 접근할 수 있으며, 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하세요.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?
|
||||
|
||||
|
|
@ -663,7 +663,7 @@ TODO.
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.
|
||||
|
||||
|
|
@ -692,7 +692,7 @@ TODO.
|
|||
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### Promises와 그 Polyfill에 대한 당신의 경험은 어느 정도인가요?
|
||||
|
||||
|
|
@ -704,7 +704,7 @@ Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(
|
|||
|
||||
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?
|
||||
|
||||
|
|
@ -729,7 +729,7 @@ Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(
|
|||
|
||||
- https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?
|
||||
|
||||
|
|
@ -757,7 +757,7 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,
|
|||
|
||||
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?
|
||||
|
||||
|
|
@ -774,7 +774,7 @@ JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript,
|
|||
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
|
||||
- https://raygun.com/blog/javascript-debugging/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?
|
||||
|
||||
|
|
@ -807,7 +807,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.
|
||||
|
||||
|
|
@ -817,7 +817,7 @@ for (let [index, elem] of arr.entries()) {
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 동기, 비동기 함수의 차이점을 설명하세요.
|
||||
|
||||
|
|
@ -825,7 +825,7 @@ TODO
|
|||
|
||||
비동기 함수는 일반적으로 파라미터를 통해서 콜백을 받고, 비동기 함수가 호출된 후 즉시 다음 줄 실행이 계속됩니다. 콜백은 비동기 작업이 완료되고 호출 스택이 비어 있을 때만 호출됩니다. 웹 서버에서 데이터를 로드하거나 데이터베이스를 쿼리하는 등의 무거운 작업을 비동기식으로 수행하여, 메인 스레드가 긴 작업을 완료할 때까지 블로킹하지 않고 다른 작업을 계속할 수 있습니다(브라우저의 경우 UI가 중지됨).
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 이벤트 루프란 무엇인가요? 콜 스택과 태스크 큐의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -838,7 +838,7 @@ 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/
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용의 차이에 대해 설명하세요.
|
||||
|
||||
|
|
@ -866,7 +866,7 @@ var foo = function () {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### `let`, `var`, `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -948,7 +948,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?
|
||||
|
||||
|
|
@ -1001,7 +1001,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?
|
||||
|
||||
|
|
@ -1011,7 +1011,7 @@ ES5에서 상속을 사용하는 것이 훨씬 더 불편하며, ES6 버전이
|
|||
|
||||
렉시컬스코프 `this`는 특히 React 컴포넌트에서 콜백을 호출할 때 유용합니다.
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 생성자의 메서드에 화살표 문법을 사용하면 어떤 이점이 있나요?
|
||||
|
||||
|
|
@ -1068,7 +1068,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 고차 함수(higher-order function)의 정의는 무엇인가요?
|
||||
|
||||
|
|
@ -1110,7 +1110,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있나요?
|
||||
|
||||
|
|
@ -1154,7 +1154,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### ES6 템플릿 리터럴은 문자열을 생성하는데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있나요?
|
||||
|
||||
|
|
@ -1221,7 +1221,7 @@ document.body.innerHTML = `
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### curry 함수의 예를 들어 줄 수 있나요? 그리고 이 문법은 어떤 이점을 가지고 있나요?
|
||||
|
||||
|
|
@ -1259,7 +1259,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
|
|||
|
||||
- https://hackernoon.com/currying-in-js-d9ddc64f162e
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### spread 문법을 사용할 때의 이점은 무엇이며 rest 문법과 다른 점은 무엇인가요?
|
||||
|
||||
|
|
@ -1305,7 +1305,7 @@ 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
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 파일 간에 코드를 공유하려면 어떻게 해야하나요?
|
||||
|
||||
|
|
@ -1323,7 +1323,7 @@ ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 문법을
|
|||
- https://nodejs.org/docs/latest/api/modules.html
|
||||
- http://2ality.com/2014/09/es6-modules-final.html
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 정적 클래스 멤버를 만드는 이유는 무엇인가요?
|
||||
|
||||
|
|
@ -1333,7 +1333,7 @@ ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 문법을
|
|||
|
||||
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
|
||||
|
||||
[[↑] Back to top](#목차)
|
||||
|
||||
|
||||
### 다른 답변들
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica pomiędzy CSS "resetting" oraz "normalizing"? Które wybrałbyś, i dlaczego?
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Opisz `float`y i jak one działają.
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ Alternatywnie, nadaj właściwość `overflow: auto` lub `overflow: hidden` elem
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Opisz `z-index` i jak powstaje stacking context.
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ _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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Opisz Block Formatting Context (BFC) i jak działa.
|
||||
|
||||
|
|
@ -113,7 +113,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są różne techniki czyszczenia i które są odpowiednie w jakim kontekście?
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij CSS sprites, i jak zaimplementujesz je na stronie lub witrynie.
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ CSS sprites łączy wiele obrazów w jeden większy obraz. Jest to powszechnie s
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jak podchodziłbyś do rozwiązywania problemów związanych ze stylem specyficznym dla przeglądarki?
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ 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ś.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jak wyświetlasz swoje strony w przeglądarkach z ograniczeniami funkcji? Jakich technik/procesów używasz?
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ 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)
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są różne sposoby wizualnego ukrywania treści (i udostępniania jej tylko dla czytników ekranu)?
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy kiedykolwiek korzystałeś z systemu siatki (grid system), a jeśli tak, to co preferujesz?
|
||||
|
||||
|
|
@ -191,13 +191,13 @@ Przed tym jak Flex stał się popularny (około roku 2014), oparty na `float` gr
|
|||
|
||||
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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treś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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy znasz stylizację SVG?
|
||||
|
||||
|
|
@ -224,7 +224,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy możesz podać przykład właściwości @media innej niż screen?
|
||||
|
||||
|
|
@ -249,7 +249,7 @@ Tu jest przykład użycia typu `print` media:
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są "tricki" do pisania wydajnego CSS?
|
||||
|
||||
|
|
@ -264,7 +264,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są zalety/wady korzystania z preprocesorów CSS?
|
||||
|
||||
|
|
@ -282,7 +282,7 @@ 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Opisz, co lubisz, a czego nie w preprocesorach CSS, z których korzystałeś.
|
||||
|
||||
|
|
@ -296,13 +296,13 @@ 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`.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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`.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij, w jaki sposób przeglądarka określa, które elementy pasują do selektora CSS.
|
||||
|
||||
|
|
@ -314,7 +314,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Opisz pseudoelementy i omów, do czego służą.
|
||||
|
||||
|
|
@ -328,7 +328,7 @@ Pseudoelement CSS jest słowem kluczowym dodawanym do selektora, który pozwala
|
|||
|
||||
- https://css-tricks.com/almanac/selectors/a/after-and-before/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
|
|
@ -353,7 +353,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Co robi `* { box-sizing: border-box; }`? Jakie są tego zalety?
|
||||
|
||||
|
|
@ -367,7 +367,7 @@ Model pudełkowy ma następujące zasady:
|
|||
|
||||
- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czym jest właściwość `display` w CSS i czy możesz podać kilka przykładów jej użycia?
|
||||
|
||||
|
|
@ -384,7 +384,7 @@ 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` |
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica pomiędzy `inline`, a `inline-block`?
|
||||
|
||||
|
|
@ -399,7 +399,7 @@ 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. |
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica między pozycjonowaniem `relative`, `fixed`, `absolute` i `static` elementu?
|
||||
|
||||
|
|
@ -415,7 +415,7 @@ Element pozycjonowany to element, którego obliczona właściwość `position` j
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/CSS/position
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Z jakich istniejących frameworków CSS korzystałeś lokalnie lub na produkcji? Jak byś je zmienił/ulepszył?
|
||||
|
||||
|
|
@ -423,7 +423,7 @@ Element pozycjonowany to element, którego obliczona właściwość `position` j
|
|||
- **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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy robiłeś coś w nowej specyfikacji CSS Flexbox lub Grid?
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ Grid jest zdecydowanie najbardziej intuicyjnym podejściem do tworzenia układó
|
|||
|
||||
- https://philipwalton.github.io/solved-by-flexbox/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy potrafisz wyjaśnić różnicę między kodowaniem strony internetowej, aby była responsywna, a używaniem mobile-first strategy?
|
||||
|
||||
|
|
@ -478,7 +478,7 @@ 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czym różni się projektowanie responsywne od projektowania adaptacyjnego?
|
||||
|
||||
|
|
@ -499,7 +499,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy kiedykolwiek pracowałeś z grafiką Retina? Jeśli tak, kiedy i jakich technik użyłeś?
|
||||
|
||||
|
|
@ -538,7 +538,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy jest jakiś powód, dla którego chciałbyś użyć `translate ()` zamiast pozycjonowania `absolute` lub odwrotnie? I dlaczego?
|
||||
|
||||
|
|
@ -550,7 +550,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Inne odpowiedzi
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ Deklaracja DOCTYPE dla standardów HTML5 to `<!DOCTYPE html>`.
|
|||
- https://html.spec.whatwg.org/multipage/xhtml.html
|
||||
- https://quirks.spec.whatwg.org/
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### W jaki sposób wyświetlasz stronę z treścią w wielu językach?
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ W backendzie, HTML będzie zawierać symbole zastępcze `i18n` oraz treść dla
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Jakich rzeczy należy się wystrzegać podczas projektowania lub tworzenia witryn wielojęzycznych?
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ 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
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Do czego są dobre atrybuty `data-`?
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ 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
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Rozważ HTML5 jako Open Web Platform. Jakie są elementy składowe HTML5?
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ Jednakże, jednym całkowicie poprawnym zastosowaniem atrybutów danych jest dod
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Opisz różnicę pomiędzy `cookie`, `sessionStorage` oraz `localStorage`.
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ _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
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Opisz różnicę pomiędzy `<script>`, `<script async>` oraz `<script defer>`.
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ 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/
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -145,7 +145,7 @@ 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/
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Co to jest rendering progresywny?
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ 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/
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Dlaczego warto użyć atrybutu `srcset` w tagu obrazu? Wyjaśnij proces wykorzystywany przez przeglądarkę podczas oceny zawartości tego atrybutu.
|
||||
|
||||
|
|
@ -185,13 +185,13 @@ 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/
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Powrót do góry](#spis-treści)
|
||||
|
||||
|
||||
### Inne odpowiedzi
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij jak `this` działa w JavaScript
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij, jak działa dziedziczenie prototypowe
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ c.constructor.name;
|
|||
- https://crockford.com/javascript/prototypal.html
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Co sądzisz o AMD vs CommonJS?
|
||||
|
||||
|
|
@ -148,7 +148,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij, dlaczego następujące elementy nie działają jako IIFE: `function foo(){ }();`. Co należy zmienić, aby poprawnie uczynić to IIFE?
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica między zmienną: `null`, `undefined` lub niezadeklarowaną? Jak sprawdziłbyś którykolwiek z tych stanów?
|
||||
|
||||
|
|
@ -218,7 +218,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czym jest domknięcie i jak/dlaczego miałbyś je zastosować?
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy możesz opisać główną różnicę pomiędzy pętlą `.forEach`, a pętlą `.map()` i dlaczego wybrałbyś jeden albo drugi?
|
||||
|
||||
|
|
@ -275,7 +275,7 @@ Główna różnica między `.forEach` i `.map()` to to, że `.map()` zwraca now
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaki jest typowy przypadek użycia funkcji anonimowych?
|
||||
|
||||
|
|
@ -310,7 +310,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jak organizujesz swój kod? (wzorzec modułu, klasyczne dziedziczenie?)
|
||||
|
||||
|
|
@ -320,7 +320,7 @@ 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).
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica między obiektami hosta a obiektami macierzystymi?
|
||||
|
||||
|
|
@ -332,7 +332,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Różnica pomiędzy: `function Person(){}`, `var person = Person()`, i `var person = new Person()`?
|
||||
|
||||
|
|
@ -360,7 +360,7 @@ console.log(person.name); // "john"
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica pomiędzy `.call` i `.apply`?
|
||||
|
||||
|
|
@ -375,7 +375,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wytłumacz `Function.prototype.bind`.
|
||||
|
||||
|
|
@ -389,7 +389,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Kiedy użyłbyś `document.write()`?
|
||||
|
||||
|
|
@ -402,7 +402,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica między wykrywaniem funkcji, feature inference i używaniem UA string?
|
||||
|
||||
|
|
@ -442,7 +442,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij Ajax tak szczegółowo, jak to możliwe.
|
||||
|
||||
|
|
@ -455,7 +455,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są zalety i wady korzystania z Ajax?
|
||||
|
||||
|
|
@ -474,7 +474,7 @@ 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij, jak działa JSONP (i jak to naprawdę nie jest Ajax).
|
||||
|
||||
|
|
@ -508,7 +508,7 @@ Obecnie, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) jest
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy kiedykolwiek używałeś szablonów JavaScript? Jeśli tak, z jakich bibliotek korzystałeś?
|
||||
|
||||
|
|
@ -520,7 +520,7 @@ 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wytłumacz "hoisting".
|
||||
|
||||
|
|
@ -569,13 +569,13 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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ń.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica pomiędzy "attribute", a "property"?
|
||||
|
||||
|
|
@ -598,7 +598,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Dlaczego rozszerzenie wbudowanych obiektów JavaScript nie jest dobrym pomysłem?
|
||||
|
||||
|
|
@ -610,7 +610,7 @@ Jedynym momentem, w którym możesz chcieć rozszerzyć obiekt macierzysty, jest
|
|||
|
||||
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Różnica między document `load` event, a document `DOMContentLoaded` event?
|
||||
|
||||
|
|
@ -623,7 +623,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest różnica pomiędzy `==` i `===`?
|
||||
|
||||
|
|
@ -650,7 +650,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij same-origin policy w odniesieniu do JavaScript.
|
||||
|
||||
|
|
@ -660,7 +660,7 @@ Same-origin policy zapobiega przesyłaniu żądań JavaScript przez granice dome
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Spraw aby działało:
|
||||
|
||||
|
|
@ -684,7 +684,7 @@ const duplicate = (arr) => [...arr, ...arr];
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Dlaczego nazywa się to wyrażeniem trójargumentowym, co oznacza słowo "trójargumentowe"?
|
||||
|
||||
|
|
@ -694,7 +694,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czym jest `"use strict";`? Jakie są zalety i wady korzystania z tego?
|
||||
|
||||
|
|
@ -723,7 +723,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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`.
|
||||
|
||||
|
|
@ -743,13 +743,13 @@ Nie radzę jednak pisać wyżej podczas wywiadów. Trzymaj się długiego, ale w
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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ć?
|
||||
|
||||
|
|
@ -763,7 +763,7 @@ TODO.
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij, czym jest SAP i jak uczynić ją przyjazną SEO.
|
||||
|
||||
|
|
@ -792,7 +792,7 @@ Wady:
|
|||
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaki jest zakres twojego doświadczenia z Promises i/lub ich polyfills?
|
||||
|
||||
|
|
@ -804,7 +804,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są zalety i wady korzystania z obietnic zamiast callbacks?
|
||||
|
||||
|
|
@ -829,7 +829,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są zalety/wady pisania kodu JavaScript w języku kompilującym się w JavaScript?
|
||||
|
||||
|
|
@ -857,7 +857,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakich narzędzi i technik używasz do debugowania kodu JavaScript?
|
||||
|
||||
|
|
@ -876,7 +876,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakich konstrukcji językowych używasz do iteracji właściwości obiektów i elementów tablicy?
|
||||
|
||||
|
|
@ -909,7 +909,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij różnicę między obiektami mutable, a immutable.
|
||||
|
||||
|
|
@ -995,7 +995,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
#### Jak osiągnąć niezmienność we własnym kodzie?
|
||||
|
||||
|
|
@ -1022,7 +1022,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij różnicę między funkcjami synchronicznymi i asynchronicznymi.
|
||||
|
||||
|
|
@ -1030,7 +1030,7 @@ Funkcje synchroniczne blokują, a funkcje asynchroniczne nie. W funkcjach synchr
|
|||
|
||||
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ę).
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Co to jest pętla zdarzeń? Jaka jest różnica między stosem wywołań (call stack) a kolejką zadań (task queue)?
|
||||
|
||||
|
|
@ -1043,7 +1043,7 @@ 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/
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Wyjaśnij różnice w korzystaniu z `foo` pomiędzy `function foo() {}` i `var foo = function() {}`
|
||||
|
||||
|
|
@ -1071,7 +1071,7 @@ var foo = function () {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są różnice między zmiennymi utworzonymi za pomocą `let`, `var` lub `const`?
|
||||
|
||||
|
|
@ -1153,7 +1153,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są różnice między konstruktorami funkcji ES6 i ES5?
|
||||
|
||||
|
|
@ -1206,13 +1206,13 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest zaleta korzystania ze składni arrow syntax dla metody w konstruktorze?
|
||||
|
||||
|
|
@ -1261,7 +1261,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jaka jest definicja funkcji wyższego rzędu?
|
||||
|
||||
|
|
@ -1303,7 +1303,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy możesz podać przykład destrukturyzacji obiektu lub tablicy?
|
||||
|
||||
|
|
@ -1347,7 +1347,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### ES6 Template Literals oferują dużą elastyczność w generowaniu ciągów, czy możesz podać przykład?
|
||||
|
||||
|
|
@ -1414,7 +1414,7 @@ document.body.innerHTML = `
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Czy możesz podać przykład curry function i dlaczego ta składnia ma tę zaletę?
|
||||
|
||||
|
|
@ -1452,7 +1452,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
|
|||
|
||||
- https://hackernoon.com/currying-in-js-d9ddc64f162e
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jakie są zalety korzystania ze składni spread syntax i czym różni się od rest syntax?
|
||||
|
||||
|
|
@ -1498,7 +1498,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Jak współdzielić kod między plikami?
|
||||
|
||||
|
|
@ -1510,7 +1510,7 @@ 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.
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
###### Bibliografia
|
||||
|
||||
|
|
@ -1526,7 +1526,7 @@ 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
|
||||
|
||||
[[↑] Powrót na górę](#spis-treści)
|
||||
|
||||
|
||||
### Inne odpowiedzi
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ 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/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### <a id="02">Qual é a diferença entre "redefinir"/"resetting" e "normalizar"/"normalizing" o CSS? Qual você escolheria e porquê?</a>
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ 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
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### <a id="03">Descreva `float` e como eles funcionam.</a>
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Como alternativa, atribua a propriedade `overflow: auto` ou `overflow: hidden` a
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### <a id="04">Descreva o z-index e como o contexto de empilhamento é formado.</a>
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ _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
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### <a id="05">Descreva o BFC (Block Formatting Context) e como ele funciona.</a>
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ 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/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### <a id="06">Quais são as várias técnicas de limpeza e quais são apropriadas para qual contexto?</a>
|
||||
|
||||
|
|
@ -115,7 +115,7 @@ 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.
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### <a id="07">Explique os sprites CSS e como você os implementaria em uma página ou site.</a>
|
||||
|
||||
|
|
@ -132,6 +132,6 @@ Sprites CSS combinam várias imagens em uma única imagem maior. É uma técnica
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
Vamos traduzir esse conteúdo juntos para toda comunidade. Agradecemos a sua ajuda na tradução!
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ 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
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Como podemos servir uma página com conteúdo em vários idiomas?
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ No back end, o HTML irá conter marcadores de posição (_placeholders_) `i18n`
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### O que deve ser levado em conta ao projetar ou desenvolver sites multilíngues?
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ 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
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Para que servem os atributos `data-`?
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ 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
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Considere o HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ No entanto, um uso perfeitamente válido dos atributos `-data` é adicionar um g
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Descreva a diferença entre `cookie`,`sessionStorage` e `localStorage`.
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ _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
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`.
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ 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/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ Uma exceção para o posicionamento de `<script>`s na parte inferior é quando o
|
|||
|
||||
- https://developer.yahoo.com/performance/rules.html#css_top
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### O que é renderização progressiva?
|
||||
|
||||
|
|
@ -166,7 +166,7 @@ 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/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Por que usar um atributo `srcset` numa tag de imagem? Explique o processo que o navegador usa ao avaliar o conteúdo desse atributo.
|
||||
|
||||
|
|
@ -187,13 +187,13 @@ 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/
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] De volta ao topo](#Índice)
|
||||
|
||||
|
||||
### Outras respostas
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
|
|||
- https://html.spec.whatwg.org/multipage/xhtml.html
|
||||
- https://quirks.spec.whatwg.org/
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Как следует оформлять страницу, содержимое которой может быть на разных языках?
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### На что необходимо обратить внимание при разработке мультиязычных сайтов?
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
|
|||
|
||||
- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Для чего нужны `data-` атрибуты?
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ 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,7 +85,7 @@ DOCTYPE для стандарта HTML5 определяется как `<!DOCTY
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Объясните разницу между `cookie`, `sessionStorage` и `localStorage`.
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ 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>`.
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ 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>`? Знаете ли вы исключения?
|
||||
|
||||
|
|
@ -141,7 +141,7 @@ 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,7 +160,7 @@ 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` в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.
|
||||
|
||||
|
|
@ -181,13 +181,13 @@ 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 и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство шаблонизаторов позволяют вводить собственные фильтры, если вам необходима дополнительная обработка контента перед его отображением.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Другие ответы
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://davidwalsh.name/event-delegate
|
||||
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Объясните, как `this` работает в JavaScript
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
|
||||
- https://stackoverflow.com/a/3127440/1751946
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Расскажите, как работает прототипное наследование
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
|
||||
- https://davidwalsh.name/javascript-objects
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Что вы думаете о AMD против CommonJS?
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ 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??
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ 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` и не объявлено? Как бы вы проверили их на каждое из этих значений?
|
||||
|
||||
|
|
@ -136,7 +136,7 @@ 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,7 +152,7 @@ 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,7 +193,7 @@ const doubled = a.map((num) => {
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В каких случаях обычно используются анонимные функции?
|
||||
|
||||
|
|
@ -228,7 +228,7 @@ 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)
|
||||
|
||||
|
|
@ -238,7 +238,7 @@ console.log(double); // [2, 4, 6]
|
|||
|
||||
Я избегаю использования наследования классов, где это возможно. Если же мне это необходимо сделать, то я придерживаюсь [этих правил](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем разница между host-объектами и нативными объектами?
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ 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()`?
|
||||
|
||||
|
|
@ -278,7 +278,7 @@ console.log(person.name); // "john"
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем разница между `.call` и `.apply`?
|
||||
|
||||
|
|
@ -293,7 +293,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Что делает и для чего нужна функция `Function.prototype.bind`?
|
||||
|
||||
|
|
@ -307,7 +307,7 @@ console.log(add.apply(null, [1, 2])); // 3
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В каких случаях используется `document.write()`?
|
||||
|
||||
|
|
@ -320,7 +320,7 @@ 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?
|
||||
|
||||
|
|
@ -360,7 +360,7 @@ 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 как можно более подробно
|
||||
|
||||
|
|
@ -373,7 +373,7 @@ Ajax (асинхронный JavaScript и XML) - это набор методо
|
|||
- https://en.wikipedia.org/wiki/Ajax_(programming)
|
||||
- https://developer.mozilla.org/en-US/docs/AJAX
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Какие преимущества и недостатки в использовании Ajax?
|
||||
|
||||
|
|
@ -391,7 +391,7 @@ Ajax (асинхронный JavaScript и XML) - это набор методо
|
|||
- Некоторые поисковые роботы не выполняют JavaScript и не видят данные, загружаемые при помощи JavaScript.
|
||||
- Большая часть недостатков SPA.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Объясните, как работает JSONP (и почему это не совсем AJAX)
|
||||
|
||||
|
|
@ -425,7 +425,7 @@ JSONP может быть небезопасным и иметь повышен
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ const template = `<div>My name is: ${name}</div>`;
|
|||
|
||||
Однако следует помнить о возможном XSS в вышеприведенном подходе, поскольку содержимое не экранируется, в отличие от библиотек шаблонизации.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Расскажите, что такое поднятие (hoisting)
|
||||
|
||||
|
|
@ -477,13 +477,13 @@ var bar = function () {
|
|||
console.log(bar); // [Function: bar]
|
||||
```
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Объясните, что такое всплытие событий (event bubbling)
|
||||
|
||||
Когда событие срабатывает на элементе DOM, оно попытается обработать событие (если привязан обработчик), затем событие всплывет вверх к своему родителю и это повторится снова. Подобное всплытие проходит по всем предкам элемента вплоть до `document`. Всплытие событий является механизмом, на котором основано делегирование событий.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем разница между "атрибутом" (attribute) и "свойством" (property)?
|
||||
|
||||
|
|
@ -506,7 +506,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Почему не следует расширять нативные JavaScript-объекты?
|
||||
|
||||
|
|
@ -518,7 +518,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем разница между событием `load` и событием `DOMContentLoaded`?
|
||||
|
||||
|
|
@ -531,7 +531,7 @@ 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
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем разница между `==` и `===`?
|
||||
|
||||
|
|
@ -558,7 +558,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Объясните same-origin policy в контексте JavaScript
|
||||
|
||||
|
|
@ -568,7 +568,7 @@ Same-origin policy (принцип одинакового источника) н
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Сделайте так, чтобы этот код работал:
|
||||
|
||||
|
|
@ -584,7 +584,7 @@ function duplicate(arr) {
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Почему тернарный оператор так называется?
|
||||
|
||||
|
|
@ -594,7 +594,7 @@ 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";? Какие достоинства и недостатки от ее использования?
|
||||
|
||||
|
|
@ -623,7 +623,7 @@ 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`.
|
||||
|
||||
|
|
@ -643,13 +643,13 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
|
||||
|
||||
Каждый скрипт имеет доступ к глобальной области видимости, и если каждый будет использовать глобальное пространство имен для определения своих переменных, то могут возникнуть конфликты. Используйте модульный паттерн (используя IIFE) для инкапсуляции ваших переменных в локальное пространство имен.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Для чего используют событие `load`? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
|
||||
|
||||
|
|
@ -661,7 +661,7 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
|
||||
|
||||
|
|
@ -690,7 +690,7 @@ 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) и/или их полифилами?
|
||||
|
||||
|
|
@ -702,7 +702,7 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
|
||||
|
||||
|
|
@ -727,7 +727,7 @@ 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?
|
||||
|
||||
|
|
@ -755,7 +755,7 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Какие инструменты и методы вы используете при отладке кода?
|
||||
|
||||
|
|
@ -774,7 +774,7 @@ for (let i = 1; i <= 100; i++) {
|
|||
- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
|
||||
- https://raygun.com/blog/javascript-debugging/
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
|
||||
|
||||
|
|
@ -807,7 +807,7 @@ 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) объектами
|
||||
|
||||
|
|
@ -815,7 +815,7 @@ for (let [index, elem] of arr.entries()) {
|
|||
- Какие преимущества и недостатки у неизменяемости?
|
||||
- Как вы можете достигнуть неизменяемости в вашем коде?
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Объясните разницу между синхронными и асинхронными функциями
|
||||
|
||||
|
|
@ -823,7 +823,7 @@ for (let [index, elem] of arr.entries()) {
|
|||
|
||||
Асинхронные функции обычно принимают callback-функцию в качестве параметра, и выполнение продолжается на следующей строке сразу после вызова асинхронной функции. Callback-функция вызывается только тогда, когда асинхронная операция завершена и стек вызовов пуст. Ресурсоемкие операции, такие как загрузка данных с веб-сервера или запросы к базе данных, должны выполняться асинхронно, чтобы основной поток мог продолжать выполнять другие операции вместо блокировки до завершения этой долгой операции (в случае браузеров пользовательский интерфейс будет зависать).
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Что такое цикл событий (event loop)? В чем разница между стеком вызовов (call stack) и очередью событий (task queue)?
|
||||
|
||||
|
|
@ -836,7 +836,7 @@ 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() {}`
|
||||
|
||||
|
|
@ -864,7 +864,7 @@ var foo = function () {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем различие между переменными, созданными при помощи `let`, `var` и `const`?
|
||||
|
||||
|
|
@ -946,7 +946,7 @@ 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,13 +999,13 @@ 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.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### В чем преимущество использования стрелочных функций для метода в конструкторе?
|
||||
|
||||
|
|
@ -1054,7 +1054,7 @@ 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
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Дайте определение функции высшего порядка
|
||||
|
||||
|
|
@ -1096,7 +1096,7 @@ 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
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Можете ли вы привести пример деструктуризации объекта или массива?
|
||||
|
||||
|
|
@ -1140,7 +1140,7 @@ 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 намного упрощают создание строк, можете ли вы привести пример их использования?
|
||||
|
||||
|
|
@ -1207,7 +1207,7 @@ document.body.innerHTML = `
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Можете ли вы привести пример каррированной функции (curry function) и в чем их преимущество?
|
||||
|
||||
|
|
@ -1245,7 +1245,7 @@ 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 оператора?
|
||||
|
||||
|
|
@ -1291,7 +1291,7 @@ 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
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Каким образом можно обмениваться кодом между файлами?
|
||||
|
||||
|
|
@ -1303,7 +1303,7 @@ const {e, f, ...others} = {
|
|||
|
||||
ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
###### Ссылки
|
||||
|
||||
|
|
@ -1319,7 +1319,7 @@ ES2015 позволяет использовать модульный синта
|
|||
|
||||
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
|
||||
|
||||
[[↑] Наверх](#Содержание)
|
||||
|
||||
|
||||
### Другие ответы
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng "pag-reset" at "pag-normalize" ng CSS? saan sa dalawa ang iyong pipiliin, at bakit?
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan ang mga `float` at kung paano sila gumagana.
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ Bilang alternatibo, Ibigay ang `overflow: auto` o `overflow: hidden` na katangia
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan ang z-index at kung papaano nabuo ang konteksto.
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan ang BFK (Block Formatting na Konteksto) at papaaano ito gumagana.
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?
|
||||
|
||||
|
|
@ -119,7 +119,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang mga CSS na sprite, at papaano mo ipapatupad ang mga ito sa isang pahina o site.
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -157,7 +157,7 @@ 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/).
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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)?
|
||||
|
||||
|
|
@ -177,25 +177,25 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ikaw ba ay pamilyar sa estilong SVG?
|
||||
|
||||
Hindi... Sa kasamaang palad
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Makapagbibigay kaba ng halimbawa ng klase ng @media maliban sa iskrin?
|
||||
|
||||
|
|
@ -220,7 +220,7 @@ Narito ang isang halimbawa ng paggamit ng `print` na uri ng media:
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano-ano ang ilan sa mga "pasabog" para sa epektibong pagsusulat ng CSS?
|
||||
|
||||
|
|
@ -235,7 +235,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang mga pakinabang o di-pakinabang ng paggamit ng mga preprocessors ng CSS?
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan kung ano ang iyong gusto at di gusto tungkol sa CSS na mga preprocessor na iyong nagamit.
|
||||
|
||||
|
|
@ -265,13 +265,13 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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`.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag kung paano tinutukoy ng isang browser kung anu-anong mga elemento ang tumutugma sa tagapili ng CSS.
|
||||
|
||||
|
|
@ -283,7 +283,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan ang mga elementong pseudo at talakayin kung para saan ito gagamitin.
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ Ang CSS pseudo-element ay isang keyword na dinadagdag sa tagapili na nagbibigay-
|
|||
|
||||
- https://css-tricks.com/almanac/selectors/a/after-and-before/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
|
|
@ -321,7 +321,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ 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`.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?
|
||||
|
||||
|
|
@ -338,7 +338,7 @@ Ang modelo ng kahon ay may mga sumusunod na panuntunan:
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng `inline` at `inline-block`?
|
||||
|
||||
|
|
@ -353,7 +353,7 @@ 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. |
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng `relative`, `fixed`, `absolute` at elementong nakaposisyong panig sa `static`?
|
||||
|
||||
|
|
@ -369,7 +369,7 @@ Ang isang naka-posisyon na elemento ay isang elemento na ang na-compute na `posi
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/CSS/position
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -377,7 +377,7 @@ Ang isang naka-posisyon na elemento ay isang elemento na ang na-compute na `posi
|
|||
- ** 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ikaw ba ay nakapaglaro na sa paligid ng bagong CSS Flexbox o Grid na specs?
|
||||
|
||||
|
|
@ -391,13 +391,13 @@ Ang Grid sa ngayon ay ang pinaka-intuitive na diskarte para sa paglikha ng grid-
|
|||
|
||||
- https://philipwalton.github.io/solved-by-flexbox/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Sa anong paraan naiiba ang disenyo ng tumutugon mula sa disenyo ng umaangkop?
|
||||
|
||||
|
|
@ -413,7 +413,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ikaw ba ay nakagamit na ng mga grapikong retina? kung gayon, kelan at anu-anong mga teknik ang iyong ginamit?
|
||||
|
||||
|
|
@ -427,7 +427,7 @@ Ang isa pang paraan ay ang paggamit ng JavaScript upang palitan ang mga attribut
|
|||
|
||||
- https://www.sitepoint.com/css-techniques-for-retina-displays/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### May kadahilanan ba na nais mong gamitin ang `translate()` kesa sa `absolute` na pag-poposisyon, o kabaliktaran? at bakit?
|
||||
|
||||
|
|
@ -437,7 +437,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ang ibang mga Kasagutan
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Papaano mo ihahain ang pahinang may iba't-ibang lenggwaheng nilalaman?
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ Sa back end, ang HTML markup ay maglalaman ng mga `i18n` na placeholder at para
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Saan maganda ang mga `data-`na katangian?
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ These days, using `data-` attributes is not encouraged. One reason is that users
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan ang pagkakaiba sa pagitan ng isang `cookie`,`sessionStorage` at `localStorage`.
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ Ang isang pagbubukod para sa pagpoposisyon ng mga `<script>` sa baba ay kapag an
|
|||
|
||||
- https://developer.yahoo.com/performance/rules.html#css_top
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang progresibong pag-render?
|
||||
|
||||
|
|
@ -154,17 +154,17 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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. [[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag kung paano gumagana ang `this` na ito sa JavaScript
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag kung paano gumagana ang prototypal na pagmamana
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang iyong naiisip sa AMD laban sa CommonJS??
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag kung bakit ang mga sumusunod ay hindi gumagana bilang isang IIFE: `function foo(){ }();`. Ano ang kailangang baguhin upang gawing maayos itong IIFE?
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ Narito ang dalawang paraan upang ayusin ito na kinasasangkutan ng pagdaragdag ng
|
|||
|
||||
- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagsasara, at paano mo gagamitin ang isa sa mga ito?
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ Ang pangunahing pagkakaiba sa pagitan ng `.forEach` at `.map ()` ay ang `.map ()
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang isang tipikal na kaso ng paggamit para sa mga hindi kilalang punksyon?
|
||||
|
||||
|
|
@ -216,7 +216,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Paano mo inaayos ang iyong code? (modular na pattern, makalumang pagmamana?)
|
||||
|
||||
|
|
@ -226,7 +226,7 @@ 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).
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng mga host na bagay at mga likas na bagay?
|
||||
|
||||
|
|
@ -238,7 +238,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Kaibahan sa pagitan ng: punksyon na `Person(){}`, `var person = Person()`, at `var person = new Person()`?
|
||||
|
||||
|
|
@ -266,7 +266,7 @@ console.log(person.name); // "john"
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng `.call` at `.apply`?
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang `Function.prototype.bind`.
|
||||
|
||||
|
|
@ -295,7 +295,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Kelan ka gagamit ng `document.write()`?
|
||||
|
||||
|
|
@ -308,7 +308,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang kaibahan sa pagitan ng pagtukoy na tampok, tampok na pagkakilala, at paggamit ng UA na string?
|
||||
|
||||
|
|
@ -348,7 +348,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang Ajax sa mas detalyadong pamamaraan hangga't maaari.
|
||||
|
||||
|
|
@ -361,7 +361,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang mga kalamangan at di-kalamangan ng paggamit ng Ajax?
|
||||
|
||||
|
|
@ -378,7 +378,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag kung papaano gumagana ang JSONP (at kung bakit hindi talaga Ajax).
|
||||
|
||||
|
|
@ -412,7 +412,7 @@ Sa panahon ngayon, Ang [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ikaw ba ay nakagamit na ng JavaScript sa pag-template? Kung gayon, anong mga librerya ang ginamit mo?
|
||||
|
||||
|
|
@ -424,7 +424,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang "hoisting".
|
||||
|
||||
|
|
@ -462,13 +462,13 @@ var bar = function () {
|
|||
console.log(bar); // [Function: bar]
|
||||
```
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng isang "katangian" at isang "propyedad"?
|
||||
|
||||
|
|
@ -491,7 +491,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Bakit ang pagpapalawak ng mga built-in na JavaScript na mga bagay ay hindi isang magandang ideya?
|
||||
|
||||
|
|
@ -503,7 +503,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Pagkakaiba sa pagitan ng kaganapan ng `pag-load` ng dokumento at dokumento ng `DOMContentLoaded` na kaganapan?
|
||||
|
||||
|
|
@ -514,7 +514,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang pagkakaiba sa pagitan ng `==` at `===`
|
||||
|
||||
|
|
@ -541,7 +541,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang patakaran na pareho pareho dapat ang pinanggalingan tungkol sa JavaScript.
|
||||
|
||||
|
|
@ -551,7 +551,7 @@ Pinipigilan ng patakaran ng may parehong pinagmulan ang JavaScript mula sa pagga
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Paganahin ito:
|
||||
|
||||
|
|
@ -567,7 +567,7 @@ function duplicate(arr) {
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Bakit tinatawag itong isang ternary na ekspresyon, ano ang ibig sabihin ng salitang "Ternary"?
|
||||
|
||||
|
|
@ -577,7 +577,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang `"use strict";`? ano ang mga bentahe at di-bentahe sa paggamit nito?
|
||||
|
||||
|
|
@ -606,7 +606,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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`
|
||||
|
||||
|
|
@ -626,7 +626,7 @@ I would not advise you to write the above during interviews though. Just stick w
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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?
|
||||
|
||||
|
|
@ -646,7 +646,7 @@ TODO.
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag kung ano ang isang solong pahina na app at kung paano gumawa ng isang SEO-friendly.
|
||||
|
||||
|
|
@ -675,7 +675,7 @@ The downsides:
|
|||
- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
|
||||
- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang lawak ng iyong karanasan sa Mga Pangako at/o ang kanilang mga polyfill?
|
||||
|
||||
|
|
@ -687,7 +687,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang mga kalamangan at kahinaan ng paggamit ng mga pangako sa halip ng mga callback?
|
||||
|
||||
|
|
@ -702,7 +702,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang ilan sa mga pakinabang o di-pakinabang ng pagsulat ng JavaScript code sa isang wika na naka-compile sa JavaScript?
|
||||
|
||||
|
|
@ -730,7 +730,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na code?
|
||||
|
||||
|
|
@ -747,7 +747,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Anong mga pag-construct ng wika ang ginagamit mo para sa pag-ulit sa mga katangian ng bagay at mga item na array?
|
||||
|
||||
|
|
@ -764,7 +764,7 @@ 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.
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.
|
||||
|
||||
|
|
@ -774,7 +774,7 @@ Most of the time, I would prefer the `.forEach` method, but it really depends on
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang pagkakaiba sa pagitan ng sabay at hindi sabay na punksiyon.
|
||||
|
||||
|
|
@ -782,7 +782,7 @@ Synchronous functions are blocking while asynchronous functions are not. In sync
|
|||
|
||||
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).
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang loop na kaganapan? Ano ang pagkakaiba sa pagitan ng call na stack at queue ng gawain?
|
||||
|
||||
|
|
@ -795,7 +795,7 @@ 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/
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ipaliwanag ang mga pagkakaiba sa paggamit ng `foo` sa pagitan ng `function foo() {}` at `var foo = function() {}`
|
||||
|
||||
|
|
@ -823,7 +823,7 @@ var foo = function () {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang mga pagkakaiba sa pagitan ng mga variable na nilikha sa pamamagitan ng paggamit ng `let`,`var` o `const`?
|
||||
|
||||
|
|
@ -905,25 +905,25 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang mga pagkakaiba sa pagitan ng ES6 na class at mga ES5 na taga-construct na punksyon?
|
||||
|
||||
TODO
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang bentahe para sa paggamit ng sintaks na arrow para sa isang paraan sa isang taga-construct?
|
||||
|
||||
TODO
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang kahulugan ng isang mas mataas na hanay na punksyon?
|
||||
|
||||
|
|
@ -965,7 +965,7 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Makapagbibigaay kaba ng isang halimbawa para sa pag-destructure ng isang bagay o isang array?
|
||||
|
||||
|
|
@ -1009,13 +1009,13 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Makapagbibigay kaba ng isang halimbawa ng isang punksyon na curry at kung bakit ang sintaks na ito ay nag-aalok ng isang kalamangan?
|
||||
|
||||
|
|
@ -1053,7 +1053,7 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
|
|||
|
||||
- https://hackernoon.com/currying-in-js-d9ddc64f162e
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Ano ang mga pakinabang ng paggamit ng spread na sintaks at kung paano ito naiiba mula sa rest na sintaks?
|
||||
|
||||
|
|
@ -1099,19 +1099,19 @@ 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
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Paano ka makakabahagi ng code sa pagitan ng mga file?
|
||||
|
||||
TODO
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Bakit gusto mong lumikha ng mga statik na miyembro ng klase?
|
||||
|
||||
TODO
|
||||
|
||||
[[↑] Bumalik sa taas](#talaan-ng-nilalaman)
|
||||
|
||||
|
||||
### Mga Ibang Sagot
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ 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 的区别是什么？你会选择哪种方式，为什么？
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
|
||||
- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请阐述`Float`定位的工作原理。
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ CSS 的`clear`属性通过使用`left`、`right`、`both`，让该元素向下
|
|||
|
||||
- https://css-tricks.com/all-about-floats/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请阐述`z-index`属性，并说明如何形成层叠上下文（stacking context）。
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ 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）及其工作原理。
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ 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/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 有哪些清除浮动的技术，都适用哪些情况？
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
|
||||
在大型项目中，我会使用 Clearfix 方法，在需要的地方使用`.clearfix`。设置`overflow: hidden`的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释什么是精灵图（css sprites），以及如何实现？
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
|
||||
- https://css-tricks.com/css-sprites/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 如何解决不同浏览器的样式兼容性问题？
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
|
||||
- 使用 Reset CSS 或 Normalize.css。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？
|
||||
|
||||
|
|
@ -157,7 +157,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
|
||||
- 使用 [Modernizr](https://modernizr.com/)进行特性检测。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？
|
||||
|
||||
|
|
@ -177,19 +177,19 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
|
||||
- http://a11yproject.com/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你使用过栅格系统吗？偏爱哪一个？
|
||||
|
||||
我使用 `float`-based 栅格系统，因为它相比 flex、grid 系统，拥有更多浏览器的支持。它已经在 Bootstrap 中使用多年，并且已经被证明是可行的。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你是否使用过媒体查询或移动优先的布局？
|
||||
|
||||
是的，一个例子就是根据窗口的尺寸改变导航的样式。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你熟悉制作 SVG 吗？
|
||||
|
||||
|
|
@ -214,7 +214,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 除了`screen`，你还能说出一个 @media 属性的例子吗？
|
||||
|
||||
|
|
@ -227,7 +227,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
|
||||
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 编写高效的 CSS 应该注意什么？
|
||||
|
||||
|
|
@ -242,7 +242,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
- https://developers.google.com/web/fundamentals/performance/rendering/
|
||||
- https://csstriggers.com/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 使用 CSS 预处理的优缺点分别是什么？
|
||||
|
||||
|
|
@ -259,7 +259,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
- 需要预处理工具。
|
||||
- 重新编译的时间可能会很慢。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？
|
||||
|
||||
|
|
@ -273,13 +273,13 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
- 我通过`node-sass`使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。
|
||||
- Less 中，变量名称以`@`作为前缀，容易与 CSS 关键字混淆，如`@media`、`@import`和`@font-face`。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 如何实现一个使用非标准字体的网页设计？
|
||||
|
||||
使用`@font-face`并为不同的`font-weight`定义`font-family`。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 解释浏览器如何确定哪些元素与 CSS 选择器匹配。
|
||||
|
||||
|
|
@ -291,7 +291,7 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
|
|||
|
||||
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 描述伪元素及其用途。
|
||||
|
||||
|
|
@ -305,7 +305,7 @@ CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分
|
|||
|
||||
- https://css-tricks.com/almanac/selectors/a/after-and-before/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ CSS 盒模型负责计算：
|
|||
|
||||
- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `* { box-sizing: border-box; }`会产生怎样的效果？
|
||||
|
||||
|
|
@ -339,7 +339,7 @@ CSS 盒模型负责计算：
|
|||
- 元素的`height` = 内容（content）的高度 + 垂直方向的`padding` + 垂直方向`border`的宽度
|
||||
- 元素的`width` = 内容（content）的宽度 + 水平方向的`padding` + 水平方向`border`的宽度
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `display`的属性值都有哪些？
|
||||
|
||||
|
|
@ -347,7 +347,7 @@ CSS 盒模型负责计算：
|
|||
|
||||
TODO
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `inline`和`inline-block`有什么区别？
|
||||
|
||||
|
|
@ -362,7 +362,7 @@ TODO
|
|||
| 边距（margin）和填充（padding） | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管`border`和`padding`在`content`周围，但垂直方向上的空间取决于'line-height' |
|
||||
| 浮动（float） | - | - | 就像一个`block`元素，可以设置垂直边距和填充。 |
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `relative`、`fixed`、`absolute`和`static`四种定位有什么区别？
|
||||
|
||||
|
|
@ -378,7 +378,7 @@ TODO
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/CSS/position
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你使用过哪些现有的 CSS 框架？你是如何改进它们的？
|
||||
|
||||
|
|
@ -386,7 +386,7 @@ TODO
|
|||
- **Semantic UI**：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。
|
||||
- **Bulma**： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你了解 CSS Flexbox 和 Grid 吗？
|
||||
|
||||
|
|
@ -400,7 +400,7 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
|
|||
|
||||
- https://philipwalton.github.io/solved-by-flexbox/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释在编写网站时，响应式与移动优先的区别。
|
||||
|
||||
|
|
@ -441,7 +441,7 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
|
|||
- 在移动设备上有更好的性能，因为应用于它们的规则无需针对任何媒体查询的验证。
|
||||
- 它让你强制编写与响应 CSS 规则相关的更干净的代码。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 响应式设计与自适应设计有何不同？
|
||||
|
||||
|
|
@ -457,7 +457,7 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
|
|||
- http://mediumwell.com/responsive-adaptive-mobile/
|
||||
- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
|
||||
|
||||
|
|
@ -471,7 +471,7 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
|
|||
|
||||
- https://www.sitepoint.com/css-techniques-for-retina-displays/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。
|
||||
|
||||
|
|
@ -483,7 +483,7 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
|
|||
|
||||
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 其他答案
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://www.w3.org/QA/Tips/Doctype
|
||||
- https://quirks.spec.whatwg.org/#history
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 如何提供包含多种语言内容的页面？
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
|
||||
- https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 在设计开发多语言网站时，需要留心哪些事情？
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ 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-`属性？
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ 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,7 +81,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请描述`cookie`、`sessionStorage`和`localStorage`的区别。
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ 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>`的区别。
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ 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>`之前，有例外情况吗？
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
|
||||
- https://developer.yahoo.com/performance/rules.html#css_top
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 什么是渐进式渲染（progressive rendering）？
|
||||
|
||||
|
|
@ -154,7 +154,7 @@ 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`属性？请描述浏览器遇到该属性后的处理过程。
|
||||
|
||||
|
|
@ -175,13 +175,13 @@ 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 等等。在我看来，这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能。大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 其它答案
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
|
|||
- https://davidwalsh.name/event-delegate
|
||||
- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请简述`JavaScript`中的`this`。
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
|
|||
- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
|
||||
- https://stackoverflow.com/a/3127440/1751946
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释原型继承（prototypal inheritance）的工作原理。
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
|
|||
- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
|
||||
- https://davidwalsh.name/javascript-objects
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 说说你对 AMD 和 CommonJS 的了解。
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ 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？
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ 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`和未声明变量之间有什么区别？如何检查判断这些状态值？
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ 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,7 +151,7 @@ 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,7 +192,7 @@ const doubled = a.map((num) => {
|
|||
|
||||
- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 匿名函数的典型应用场景是什么？
|
||||
|
||||
|
|
@ -227,7 +227,7 @@ 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）？）
|
||||
|
||||
|
|
@ -237,7 +237,7 @@ console.log(double); // [2, 4, 6]
|
|||
|
||||
我尽可能避免使用经典继承。如果非要这么做，我会坚持[这些原则](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 宿主对象（host objects）和原生对象（native objects）的区别是什么？
|
||||
|
||||
|
|
@ -249,7 +249,7 @@ 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()`？
|
||||
|
||||
|
|
@ -277,7 +277,7 @@ console.log(person.name); // "john"
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `.call`和`.apply`有什么区别？
|
||||
|
||||
|
|
@ -292,7 +292,7 @@ console.log(add.call(null, 1, 2)); // 3
|
|||
console.log(add.apply(null, [1, 2])); // 3
|
||||
```
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请说明`Function.prototype.bind`的用法。
|
||||
|
||||
|
|
@ -306,7 +306,7 @@ console.log(add.apply(null, [1, 2])); // 3
|
|||
|
||||
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 什么时候会用到`document.write()`？
|
||||
|
||||
|
|
@ -319,7 +319,7 @@ 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 字符串之间有什么区别？
|
||||
|
||||
|
|
@ -359,7 +359,7 @@ 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。
|
||||
|
||||
|
|
@ -372,7 +372,7 @@ Ajax（asynchronous JavaScript and XML）是使用客户端上的许多 Web 技
|
|||
- https://en.wikipedia.org/wiki/Ajax_(programming)
|
||||
- https://developer.mozilla.org/en-US/docs/AJAX
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 使用 Ajax 的优缺点分别是什么？
|
||||
|
||||
|
|
@ -390,7 +390,7 @@ Ajax（asynchronous JavaScript and XML）是使用客户端上的许多 Web 技
|
|||
- 有些网络爬虫不执行 JavaScript，也不会看到 JavaScript 加载的内容。
|
||||
- 基本上包括大部分 SPA 的缺点。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请说明 JSONP 的工作原理，它为什么不是真正的 Ajax？
|
||||
|
||||
|
|
@ -424,7 +424,7 @@ JSONP 可能具有一些安全隐患。由于 JSONP 是纯 JavaScript 实现，
|
|||
|
||||
- https://stackoverflow.com/a/2067584/1751946
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你使用过 JavaScript 模板吗？用过什么相关的库？
|
||||
|
||||
|
|
@ -436,7 +436,7 @@ const template = `<div>My name is: ${name}</div>`;
|
|||
|
||||
但是，请注意上述方法中可能存在的 XSS，因为内容不会被转义，与模板库不同。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释变量提升（hoisting）。
|
||||
|
||||
|
|
@ -474,13 +474,13 @@ var bar = function () {
|
|||
console.log(bar); // [Function: bar]
|
||||
```
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请描述事件冒泡。
|
||||
|
||||
当一个事件在 DOM 元素上触发时，如果有事件监听器，它将尝试处理该事件，然后事件冒泡到其父级元素，并发生同样的事情。最后直到事件到达祖先元素。事件冒泡是实现事件委托的原理（event delegation）。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### “attribute” 和 “property” 之间有什么区别？
|
||||
|
||||
|
|
@ -503,7 +503,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 为什么扩展 JavaScript 内置对象是不好的做法？
|
||||
|
||||
|
|
@ -515,7 +515,7 @@ console.log(input.value); // Hello World!
|
|||
|
||||
- http://lucybain.com/blog/2014/js-extending-built-in-objects/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### document 中的`load`事件和`DOMContentLoaded`事件之间的区别是什么？
|
||||
|
||||
|
|
@ -528,7 +528,7 @@ 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
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `==`和`===`的区别是什么？
|
||||
|
||||
|
|
@ -555,7 +555,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释关于 JavaScript 的同源策略。
|
||||
|
||||
|
|
@ -565,7 +565,7 @@ console.log(a == undefined); // true
|
|||
|
||||
- https://en.wikipedia.org/wiki/Same-origin_policy
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请使下面的语句生效：
|
||||
|
||||
|
|
@ -581,7 +581,7 @@ function duplicate(arr) {
|
|||
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请说明三元表达式中“三元”这个词代表什么？
|
||||
|
||||
|
|
@ -591,7 +591,7 @@ 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";`？使用它有什么优缺点？
|
||||
|
||||
|
|
@ -620,7 +620,7 @@ 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"。
|
||||
|
||||
|
|
@ -640,13 +640,13 @@ for (let i = 1; i <= 100; i++) {
|
|||
|
||||
- https://gist.github.com/jaysonrowe/1592432
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 为什么不要使用全局作用域？
|
||||
|
||||
每个脚本都可以访问全局作用域，如果人人都使用全局命名空间来定义自己的变量，肯定会发生冲突。使用模块模式（IIFE）将变量封装在本地命名空间中。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 为什么要使用`load`事件？这个事件有什么缺点吗？你知道一些代替方案吗，为什么使用它们？
|
||||
|
||||
|
|
@ -660,7 +660,7 @@ TODO.
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释单页应用是什么，如何使其对 SEO 友好。
|
||||
|
||||
|
|
@ -689,7 +689,7 @@ 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 的掌握程度如何？
|
||||
|
||||
|
|
@ -701,7 +701,7 @@ TODO.
|
|||
|
||||
- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### `Promise`代替回调函数有什么优缺点？
|
||||
|
||||
|
|
@ -716,7 +716,7 @@ TODO.
|
|||
- 轻微地增加了代码的复杂度（这点存在争议）。
|
||||
- 在不支持 ES2015 的旧版浏览器中，需要引入 polyfill 才能使用。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 用转译成 JavaScript 的语言写 JavaScript 有什么优缺点？
|
||||
|
||||
|
|
@ -744,7 +744,7 @@ 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 代码？
|
||||
|
||||
|
|
@ -763,7 +763,7 @@ 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,7 +780,7 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
|
|||
|
||||
大多数情况下，我更喜欢`.forEach`方法，但这取决于你想要做什么。`for`循环有更强的灵活性，比如使用`break`提前终止循环，或者递增步数大于一。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释可变对象和不可变对象之间的区别。
|
||||
|
||||
|
|
@ -825,7 +825,7 @@ console.log(student1, student2);
|
|||
- https://www.interviewcake.com/concept/java/mutable
|
||||
- https://www.sitepoint.com/immutability-javascript/
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 请解释同步和异步函数之间的区别。
|
||||
|
||||
|
|
@ -833,7 +833,7 @@ console.log(student1, student2);
|
|||
|
||||
异步函数通常接受回调作为参数，在调用异步函数后立即继续执行下一行。回调函数仅在异步操作完成且调用堆栈为空时调用。诸如从 Web 服务器加载数据或查询数据库等重负载操作应该异步完成，以便主线程可以继续执行其他操作，而不会出现一直阻塞，直到费时操作完成的情况（在浏览器中，界面会卡住）。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 什么是事件循环？调用堆栈和任务队列之间有什么区别？
|
||||
|
||||
|
|
@ -846,7 +846,7 @@ 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`的用法上的区别。
|
||||
|
||||
|
|
@ -874,7 +874,7 @@ var foo = function () {
|
|||
|
||||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 使用`let`、`var`和`const`创建变量有什么区别？
|
||||
|
||||
|
|
@ -956,7 +956,7 @@ 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,13 +1009,13 @@ 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 组件而言。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 在构造函数中使用箭头函数有什么好处？
|
||||
|
||||
|
|
@ -1061,7 +1061,7 @@ sayNameFromWindow2(); // John
|
|||
|
||||
(想看更好的演示以及示例代码，可以打开这篇文章: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 高阶函数（higher-order）的定义是什么？
|
||||
|
||||
|
|
@ -1103,7 +1103,7 @@ 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）对象或数组的例子。
|
||||
|
||||
|
|
@ -1147,7 +1147,7 @@ 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 的模板字符串为生成字符串提供了很大的灵活性，你可以举个例子吗？
|
||||
|
||||
|
|
@ -1205,7 +1205,7 @@ message; //"我来给大家介绍:张三的年龄是20."
|
|||
|
||||
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 你能举出一个柯里化函数（curry function）的例子吗？它有哪些好处？
|
||||
|
||||
|
|
@ -1243,7 +1243,7 @@ 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）有什么区别？
|
||||
|
||||
|
|
@ -1289,7 +1289,7 @@ 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
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 如何在文件之间共用代码？
|
||||
|
||||
|
|
@ -1301,7 +1301,7 @@ const {e, f, ...others} = {
|
|||
|
||||
ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终将在浏览器和 Node 环境中得到支持。
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
###### 参考
|
||||
|
||||
|
|
@ -1317,7 +1317,7 @@ ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终
|
|||
|
||||
- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
|
||||
|
||||
[[↑] 回到顶部](#目录)
|
||||
|
||||
|
||||
### 其他答案
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue