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.
- 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 theword-break
styling on the320px
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
- 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 theform
element. - Where to Put Your Search Role — Adrian Roselli - his article recommends to put the
role="search"
on theform
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
- 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
- Meta Tags — Preview, Edit and Generate
- The W3C CSS Validation Service
- HTML Validator - The site has two warnings regarding the
ul
element has arole="list"
. The reason I added arole="list"
because I set thelist-style
tonone
which will remove the semantic meaning of theul
element. - Checklist - The A11Y Project
- Grammarly - it helps me fixing the grammar errors in the
README
.
- 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