diff --git a/.wip/topics/javascript.md b/.wip/topics/javascript.md index 0b25213a8..f8184203e 100644 --- a/.wip/topics/javascript.md +++ b/.wip/topics/javascript.md @@ -43,7 +43,7 @@ WIP. - Prototype chain - `this` keyword - https://rainsoft.io/gentle-explanation-of-this-in-javascript/ - - https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3 + - https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4 - Classes - Methods - Use non-arrow functions for methods that will be called using the `object.method()` syntax because you need the value of `this` to point to the instance itself. diff --git a/.wip/topics/security.md b/.wip/topics/security.md index f607bee99..f26b3f002 100644 --- a/.wip/topics/security.md +++ b/.wip/topics/security.md @@ -96,7 +96,7 @@ http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/ ## Session hijacking -- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies +- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies - https://www.nczonline.net/blog/2009/05/12/cookies-and-security/ ## Framebusting diff --git a/README.md b/README.md index f15b5efde..c4c14f5f3 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Read on the website

- Join/follow us on LinkedIn | Discord | 𝕏 (Twitter) | Facebook + Join/follow us on LinkedIn | Discord | 𝕏 (Twitter) | Facebook

diff --git a/contents/companies/airbnb-front-end-interview-questions.md b/contents/companies/airbnb-front-end-interview-questions.md index f3c2f49d0..818d5742d 100644 --- a/contents/companies/airbnb-front-end-interview-questions.md +++ b/contents/companies/airbnb-front-end-interview-questions.md @@ -12,7 +12,7 @@ Find the latest version of this page on [GreatFrontEnd's Airbnb Front End Interv ## JavaScript coding questions - Write a simple promise. -- Implement a `StoreData` class that add key/value pairs and listen to value changes for keys. [Source](https://leetcode.com/discuss/interview-question/348436/Airbnb-or-Phone-Screen-or-Implement-StoreData-class) +- Implement a `StoreData` class that add key/value pairs and listen to value changes for keys. [Source](https://leetcode.com/discuss/post/348436/airbnb-phone-screen-implement-storedata-p3ypb/) ## User interface coding questions diff --git a/contents/companies/amazon-front-end-interview-questions.md b/contents/companies/amazon-front-end-interview-questions.md index 2c4395a8c..b3b6e549d 100644 --- a/contents/companies/amazon-front-end-interview-questions.md +++ b/contents/companies/amazon-front-end-interview-questions.md @@ -128,11 +128,11 @@ Questions sourced from the web and the [GreatFrontEnd](https://www.greatfrontend - Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting - [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid) - Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right -- Implement a Like button ([Source](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)) +- Implement a Like button ([Source](https://leetcode.com/discuss/post/1719943/amazon-phone-screen-fee-l5-like-button-b-0z2l/)) - [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid) - Given a JSON object generate a file directory UI - [Practice question](https://www.greatfrontend.com/questions/user-interface/file-explorer?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) -- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source]() +- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source]() - Implement a search bar using HTML, CSS and JavaScript - [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - Implement a star rating widget @@ -146,7 +146,7 @@ Questions sourced from the web and the [GreatFrontEnd](https://www.greatfrontend ### System design questions -- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source]() +- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source]() - Design an accordion component. - [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid) diff --git a/contents/companies/apple-front-end-interview-questions.md b/contents/companies/apple-front-end-interview-questions.md index 1b5090b20..e2422870b 100644 --- a/contents/companies/apple-front-end-interview-questions.md +++ b/contents/companies/apple-front-end-interview-questions.md @@ -14,7 +14,7 @@ Not much is known about Apple's front end interview process. ## JavaScript coding questions - Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript. - - [Practice questions](https://www.greatfrontend.com/questions/coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) + - [Practice questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) - How can you execute an array of promise in sequence? ## User interface coding questions diff --git a/contents/companies/dropbox-front-end-interview-questions.md b/contents/companies/dropbox-front-end-interview-questions.md index e6d4dabd8..d9053abf6 100644 --- a/contents/companies/dropbox-front-end-interview-questions.md +++ b/contents/companies/dropbox-front-end-interview-questions.md @@ -17,7 +17,7 @@ Refer to the [full official Dropbox Web Developer Interview Preparation Guide](/ ## JavaScript coding questions -- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy) +- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/post/427896/dropbox-phone-screen-implement-getbyclas-fxpl/) - [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - OOP-based class management system. diff --git a/contents/companies/google-front-end-interview-questions.md b/contents/companies/google-front-end-interview-questions.md index 7df907355..2685b4b67 100644 --- a/contents/companies/google-front-end-interview-questions.md +++ b/contents/companies/google-front-end-interview-questions.md @@ -73,7 +73,7 @@ Refer to Google's official interview preparation guides for: - You are given four numbers (type int), and have four basic math operators at your disposal (+, -, x, /). Given arbitrary ways to group the numbers and using any of the operators, determine if you can make the number 24 from the four numbers. The numbers must be processed in the order they appear. - Find k-nearest points. -_Source: [Glassdoor Google Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm), [Google | Front End engineer](https://leetcode.com/discuss/interview-question/271736/google-front-end-engineer-onsite-interview)_ +_Source: [Glassdoor Google Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm), [Google | Front End engineer](https://leetcode.com/discuss/post/271736/google-front-end-engineer-by-sithis-kvr1/)_ ## Insider tips from the GreatFrontEnd community diff --git a/contents/companies/lyft-front-end-interview-questions.md b/contents/companies/lyft-front-end-interview-questions.md index a38d5d1f9..062084787 100644 --- a/contents/companies/lyft-front-end-interview-questions.md +++ b/contents/companies/lyft-front-end-interview-questions.md @@ -32,7 +32,7 @@ These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_sou **18th Oct 2023**: -> I once had the [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) question for Lyft interview 😦 but I had an onsite to be scheduled but they didn't have my level so it seemed futile It was a technical phone interview, they were on the phone and I was live coding on something like a codepad I think it was about an hour, 10 minutes of intro and 10 minutes of questions 🫠 +> I once had the [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) question for Lyft interview 😦 but I had an onsite to be scheduled but they didn't have my level so it seemed futile It was a technical phone interview, they were on the phone and I was live coding on something like a codepad I think it was about an hour, 10 minutes of intro and 10 minutes of questions 🫠 **4th Mar 2023**: diff --git a/contents/companies/twitter-front-end-interview-questions.md b/contents/companies/twitter-front-end-interview-questions.md index b0562e769..9aaab96e0 100644 --- a/contents/companies/twitter-front-end-interview-questions.md +++ b/contents/companies/twitter-front-end-interview-questions.md @@ -11,7 +11,7 @@ Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interv ## User interface coding questions -- Implement a typeahead. [Source](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen) +- Implement a typeahead. [Source](https://leetcode.com/discuss/post/1220887/twitter-frontend-phone-screen-by-anonymo-k2xo/) - Add features to a tic-tac-toe game. - [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid) diff --git a/contents/companies/uber-front-end-interview-questions.md b/contents/companies/uber-front-end-interview-questions.md index a22b773fb..f7f922347 100644 --- a/contents/companies/uber-front-end-interview-questions.md +++ b/contents/companies/uber-front-end-interview-questions.md @@ -13,13 +13,13 @@ Not much is known about Uber's front end interview process. ## JavaScript coding questions -- Implement a rate limiter attribute/decoration/annotation on top of an API endpoint. Caps to N requests per minute with a rolling window. [Source A](https://leetcode.com/discuss/interview-question/2409192/Uber-or-Phone-Screen-or-Senior-Front-End-Engineer) and [Source B](https://leetcode.com/discuss/interview-question/124880/Rate-Limiter) +- Implement a rate limiter attribute/decoration/annotation on top of an API endpoint. Caps to N requests per minute with a rolling window. [Source A](https://leetcode.com/discuss/post/2409192/uber-phone-screen-senior-front-end-engin-xp4p/) and [Source B](https://leetcode.com/discuss/post/124880/rate-limiter-by-bhosdike-0euv/) ## User interface coding questions -- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject) +- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/post/1064199/uber-front-end-phone-screen-reject-by-an-16nz/) - [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid) -- Overlapping circles app. [Source](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject) +- Overlapping circles app. [Source](https://leetcode.com/discuss/post/1784074/uber-phone-overlapping-circles-app-rejec-ql4p/) ## Insider tips from the GreatFrontEnd community diff --git a/contents/css-questions.md b/contents/css-questions.md index 546f603bd..2e10d9ac9 100644 --- a/contents/css-questions.md +++ b/contents/css-questions.md @@ -33,7 +33,7 @@ I would write CSS rules with low specificity so that they can be easily overridd #### References - https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ -- https://www.sitepoint.com/web-foundations/specificity/ +- https://www.sitepoint.com/css-selectors-specificity/ ### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why? @@ -82,19 +82,19 @@ A stacking context is an element that contains a set of layers. Within a local s Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform` that is not`none`. -_Note: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._ +_Note: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context)._ #### References - https://css-tricks.com/almanac/properties/z/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 +- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/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. -Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways. +Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways. A BFC is an HTML box that satisfies at least one of the following conditions: @@ -105,11 +105,11 @@ A BFC is an HTML box that satisfies at least one of the following conditions: In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). -Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/). +Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/collapsing-margins/). #### References -- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context +- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/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? @@ -160,7 +160,7 @@ These techniques are related to accessibility (a11y). - `width: 0; height: 0`. Make the element not take up any space on the screen at all, resulting in not showing it. - `position: absolute; left: -99999px`. Position it outside of the screen. -- `text-indent: -9999px`. This only works on text within the `block` elements. This is a widely used and famous trick, but it comes with [some downsides](https://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) like causing performance issues, so you might want to consider using `text-indent: 100%` instead. +- `text-indent: -9999px`. This only works on text within the `block` elements. This is a widely used and famous trick, but it comes with [some downsides](https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) like causing performance issues, so you might want to consider using `text-indent: 100%` instead. - Meta tags. For example by using Schema.org, RDF, and JSON-LD. - WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages. @@ -170,8 +170,8 @@ Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioni - https://www.w3.org/TR/wai-aria-1.1/ - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA -- http://a11yproject.com/ -- https://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ +- https://www.a11yproject.com/ +- https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ### Have you ever used a grid system, and if so, what do you prefer? @@ -205,7 +205,7 @@ The above `fill="purple"` is an example of a _presentational attribute_. Interes #### References -- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes +- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Fills_and_strokes ### Can you give an example of an @media property other than screen? @@ -234,7 +234,7 @@ Here is an example of `print` media type's usage: 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. -[BEM (Block Element Modifier)](https://bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. +[BEM (Block Element Modifier)](https://en.bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible. @@ -257,7 +257,7 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep **Disadvantages:** - 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. +- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/webpack-contrib/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. @@ -372,7 +372,7 @@ A positioned element is an element whose computed `position` property is either #### References -- https://developer.mozilla.org/en/docs/Web/CSS/position +- https://developer.mozilla.org/en-US/docs/Web/CSS/position ### What existing CSS frameworks have you used locally, or in production? How would you change/improve them? @@ -446,8 +446,7 @@ Both have these methods have some issues that need to be weighed: #### References -- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design -- http://mediumwell.com/responsive-adaptive-mobile/ +- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design - 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? @@ -484,7 +483,6 @@ For icons, I would also opt to use SVGs and icon fonts where possible, as they r - https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ - 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? @@ -498,6 +496,6 @@ When using `translate()`, the element still occupies its original space (sort of ### Other Answers -- https://neal.codes/blog/front-end-interview-css-questions +- https://neal.codes/blog/front-end-interview-css-questions/ - https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/ - http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/ diff --git a/contents/front-end-system-design-ui-components.md b/contents/front-end-system-design-ui-components.md index 1797e78ef..11fbf18a1 100644 --- a/contents/front-end-system-design-ui-components.md +++ b/contents/front-end-system-design-ui-components.md @@ -121,7 +121,7 @@ In front end, performance typically refers to a few things - loading speed, how **Optimization tips** -- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/virtualize-long-lists-react-window/). +- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/articles/virtualize-long-lists-react-window). - **Lazy loading/load only necessary data**: For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that. - **Preloading/prefetching data ahead of time**: For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession. diff --git a/contents/html-questions.md b/contents/html-questions.md index 95b00f5bc..7616fd738 100644 --- a/contents/html-questions.md +++ b/contents/html-questions.md @@ -73,7 +73,7 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t #### References - http://html5doctor.com/html5-custom-data-attributes/ -- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes +- https://html.spec.whatwg.org/multipage/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? @@ -88,7 +88,7 @@ However, one perfectly valid use of data attributes, is to add a hook for _end t #### References -- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 +- https://developer.mozilla.org/en-US/docs/Glossary/HTML5 ### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`. @@ -107,7 +107,7 @@ _Note: If the user decides to clear browsing data via whatever mechanism provide #### References -- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies +- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies - http://tutorial.techaltum.com/local-and-session-storage.html ### Describe the difference between `