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