diff --git a/contents/css-questions.md b/contents/css-questions.md index 4863c7d9c..649908727 100644 --- a/contents/css-questions.md +++ b/contents/css-questions.md @@ -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 `` - 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 `` element | | `list-item` | Behaves like a `
  • ` 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 diff --git a/contents/html-questions.md b/contents/html-questions.md index 66576d6db..58d30a962 100644 --- a/contents/html-questions.md +++ b/contents/html-questions.md @@ -25,7 +25,7 @@ The DOCTYPE declaration for the HTML5 standards is ``. - 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 `