README.md

Documentation

This is the place where I put all the resources that I find useful to build this project. This can be used for future reference or help anyone that is doing this challenge.

Web documentation

• XMLHttpRequest - Web APIs | MDN
• Ajax - Developer guides | MDN
• XMLHttpRequest.readyState - Web APIs | MDN
• HTTP response status codes - HTTP | MDN
• Using Promises - JavaScript | MDN
• Common mistakes when composing promise chains.
• How to make search form accessible (MDN)
• Labeling Controls | Web Accessibility Initiative (WAI) | W3C - this tutorial tells me different ways to give a label to an input.
• WAI-ARIA basics - Learn web development | MDN
• HTMLElement: change event - Web APIs | MDN
• HTMLElement: input event - Web APIs | MDN
• Error - JavaScript | MDN
• <a>: The Anchor element - HTML: HyperText Markup Language | MDN (Security and privacy)
• EventTarget.addEventListener() - Web APIs | MDN
• String.prototype.trim() - JavaScript | MDN
• The HTML5 input types - Learn web development | MDN - This MDN documentation clearly shows the benefit of using the right type of input.
• RegExp.prototype.exec() - JavaScript | MDN
• <time>: The (Date) Time element - HTML: HyperText Markup Language | MDN
• Date.prototype.toUTCString() - JavaScript | MDN
• Date - JavaScript | MDN
• Date and Time Formats | w3.org
• word-break - CSS: Cascading Style Sheets | MDN - I used this to fix the link issue. If the link is too long then it will break into two lines. You can see toggle the word-break styling on the 320px width to see the issue and how it fixes the issue.
• - HTML: HyperText Markup Language | MDN - it has an interesting example about the use case of <detalist> element.
• aria-labelledby - Accessibility | MDN - MDN documentation says, "The aria-labelledby property value can include content from elements that aren't even visible.".
• Accessible Rich Internet Applications (WAI-ARIA) 1.3 - aria-lablledby Specifications
• HTML attribute: rel - HTML: HyperText Markup Language | MDN
• ARIA live regions - Accessibility | MDN

Articles

• How to Disable Links | CSS-Tricks
• Error handling while using native fetch API in JavaScript | Learn with Param
• Accessibility Matters - Search Form - this article recommends to put the role="search" on the form element.
• Where to Put Your Search Role — Adrian Roselli - his article recommends to put the role="search" on the form element.
• WebAIM: Creating Accessible Forms - Advanced Form Labeling - this tutorial helps me understand different ways to give label to an input and some important information.
• Building a theme switch component | web.dev - it makes me know about the change event. This can help me make the site change the theme when the users change their them preferences through their browser or system setting.
• Contextually Marking up accessible images and SVGs | scottohara.me - it shows me how to take care decorative SVG.
• Optimizing resource loading with Priority Hints | web.dev - I don't use fetchpriority on the site but it is an interesting thing that I found when I building the project.
• Preconnect to required origins | web.dev
• Fast load times | web.dev - It contains a lot of resources about "fast website".
• A Theme Switcher | Inclusive Components
• Toggle Buttons | Inclusive Components
• Target="_blank" - the most underestimated vulnerability ever
• Pure CSS Custom Checkbox Style | Modern CSS Solutions
• CSS transitions and hover animations, an interactive guide - a nice blog post by Josh Comeau. It helps me learn more about animation and transition.
• prefers-color-scheme: Hello darkness, my old friend | web.dev - a complete guide to create dark mode. It includes everything you need to know to create a good dark mode.
• JavaScript naming conventions: do’s and don’ts
• Accessible Icon Buttons – Sara Soueidan, inclusive design engineer - I found a statement that aria-labelledby can be used to reference hidden elements.
• Inclusively Hidden | scottohara.me - I found the same statement that aria-labelledby can be used to reference hidden elements.
• Inclusively Hiding & Styling Checkboxes and Radio Buttons – Sara Soueidan, inclusive design engineer - This article helps me to hide the checkbox inclusively.
• WebAIM: Skip Navigation Links (#multiple) - This article says that, "For pages that have very few navigable items preceding the main content, a skip link may not be necessary at all." So, "Skip to main content" link for this challenge is not a necessary thing. But, I need to keep in mind that, "[...] the purpose of skip navigation links is to make keyboard navigation more efficient."
• I Used The Web For A Day With Just A Keyboard — Smashing Magazine - An incredible article that helps me understand how the keyboard's user interacts with websites. Also, I learn a new ARIA attribute, aria-keyshortcuts.
• Maybe Ignore type=search — Adrian Roselli

Tools

• RegExr - create RegEx
• Site-Shot - take screenshot of the website
• Squoosh - optimize images
• Canva - design the banner
• Chicago - Title Capitalization Tool - Capitalize My Title - Title Case Tool

Validations

• Meta Tags — Preview, Edit and Generate
• The W3C CSS Validation Service
• HTML Validator - The site has two warnings regarding the ul element has a role="list". The reason I added a role="list" because I set the list-style to none which will remove the semantic meaning of the ul element.
• Checklist - The A11Y Project
• Grammarly - it helps me fixing the grammar errors in the README.

Others

• Space Mono
• Useful GitHub gist to learn XMLHttpRequest()
• Search | U.S. Web Design System (USWDS)
• JSONPlaceholder - Free Fake REST API - I played around with this while learning promises and async/await.
• ipify - A Simple Public IP Address API - I used this API just in case the users fetch too much data from the GitHub API. With this API I can tell the users IP address and then tell them that they have exceeded the limit rate. (I follow the GitHub error message).
• Phishing by navigating browser tabs - Invalid Reports - Learn - Google Bug Hunters
• npm dependencies and devDependencies
• Visual Studio Code April 2022 - Update (markdown drop into editor to create link)
• GitHub Username Policy - GitHub Docsto-editor-to-create-link)
• javascript - Extract month, day and year from date regex - Stack Overflow
• shinnn/github-username-regex: A regular expression that only matches a currently valid Github username
• ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript - this is an amazing repository that I found when I refactored the JavaScript. It contained all guidelines to write good JavaScript.
• Async/await - Wikipedia
• Ajax (programming) - Wikipedia
• XMLHttpRequest - Wikipedia
• Title Capitalization Rules | Grammarly
• :focus-within CSS pseudo-class | Can I use... Support tables for HTML5, CSS3, etc