Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danpoynor/randomuser-api-example-with-query-filters-and-response-search
An example demonstrating API accessing, filtering, and searching of the returned response.
https://github.com/danpoynor/randomuser-api-example-with-query-filters-and-response-search
css dart-sass html javascript pug randomuser-api
Last synced: 19 days ago
JSON representation
An example demonstrating API accessing, filtering, and searching of the returned response.
- Host: GitHub
- URL: https://github.com/danpoynor/randomuser-api-example-with-query-filters-and-response-search
- Owner: danpoynor
- Created: 2021-11-03T19:03:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-05T16:46:53.000Z (over 3 years ago)
- Last Synced: 2024-11-16T09:17:33.899Z (3 months ago)
- Topics: css, dart-sass, html, javascript, pug, randomuser-api
- Language: JavaScript
- Homepage: https://danpoynor.github.io/randomuser-api-example-with-query-filters-and-response-search/
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RandomUser.me API Example with Query Filters and Response Search
An example demonstrating API accessing, filtering, and searching of the returned response.
## Live Preview
[https://danpoynor.github.io/randomuser-api-example-with-query-filters-and-response-search/](https://danpoynor.github.io/randomuser-api-example-with-query-filters-and-response-search/)
## Responsive Layout Example Screenshots
Click to expand/collapse
## Code Validation
[W3C CSS Validation](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fdanpoynor.github.io%2Frandomuser-api-example-with-query-filters-and-response-search%2Fstyles.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en)
[W3C Markup Validation](https://validator.w3.org/nu/?doc=https%3A%2F%2Fdanpoynor.github.io%2Frandomuser-api-example-with-query-filters-and-response-search%2F)
## Tech Used Highlights
Click to expand/collapse
- Dart Sass / CSS
- Uses `@use` and `@forward` to manage imports
- `@media` queries for responsive design
- `:focus-visible` pseudo-selector for keyboard focus
- `:invalid` pseudo-selector for form validation
- svg `fill` and `stroke` attributes for button hover color effects
- `display: grid` layout for responsive design
- No use of `display: flex`
- Styling of newer `` element including `::backdrop` pseudo-element (requires latest Chrome or Safari Preview, Firefox Nightly browser versions)
- JavaScript ES7+
- Template Literals
- Object Destructuring
- Fetch API
- Promises
- Async/Await
- Classes
- Dynamically loaded modules
- Namespaced global variables
- Contextual explanitory code comments with tagging
- Dynamically updated page content with no reload needed
- Carousel with circular navigation, keyboard nav, and index tracking
- Architected for automated tree-shaking
- HTML
- Strict use of sematic elements
- No `
` tags
- Strict headline hierarchy
- Search input pattern checking for valid characters
- Newer `` element (requires latest Chrome or Safari Preview, Firefox Nightly browser versions)
## Development Toolchain
Click to expand/collapse
- [CodeKit](https://codekitapp.com/)
Used to:
- Streamline package.json NPM management
- Compile [Dart SASS](https://sass-lang.com/dart-sass) files into CSS
- Complile [Pug](https://pugjs.org/api/getting-started.html) file into HTML
- Provide UI for settings and processing management of:
- [Autoprefixer](https://github.com/postcss/autoprefixer)
- [PurgeCSS](https://purgecss.com/)
- [CSSO](https://github.com/css/csso)
- [ESLint](https://eslint.org/)
- [Terser](https://terser.org/)
- Provide live browser refreshing
- [MAMP Pro](https://www.mamp.info/en/mamp-pro/mac/)
Used to add a MIME type parameter as an [Apache](https://httpd.apache.org/) Virtual Hosts directive so [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) with filename extensions `.mjs` are interpreted as JavaScript:
```lang-plaintext
AddType application/javascript .mjs
```
- [Visual Studio Code](https://code.visualstudio.com/)
- IDE of choice
- [Git](https://git-scm.com/) version control
- [Apple iMac](https://www.apple.com/imac/) desktop computer