Skip to main content

UI ↔ Interaction between human and app/Hardware

aka UI, User-Interface, User-Interaction

GUI​

Graphic User Interface

Layout

Logic

Personalization

Performance

Internationalization

ARIA Attribute

WCAG

Accessibility​

to design App for max usability vs devices/cognitive impairment

Responsive UI

Mobile Device Compatibility

use storybook to keep track of UI as isolated designs to separate business logic, API endpoints

Common UI Types

Common UI Component Types & Storybook UI Showcase/library for each​

badly labelled UI components - some of which are really crap even from major companies?!

References​

  1. CLI ↔ Text-based UI to provide cmd Statements to Terminal

  2. return(...JSX) ↔ to return some UI from FC (typically described using JSX)

  3. UI state ↔ current state of UI Component; intermittent data to help render app that's not persisted

  4. Commit Phase ↔ (process) to apply UI change to DOM API (in one Sync shot)

  5. CC ↔ React class Instance extends React.Component, provides render() Method to return UI, manage state & perform side effects on Lifecycle Methods

  6. FC ↔ function to return UI via JSX. Pass propsfor dynamic input. add state via Hook

  7. useLayoutEffect() ↔ Hook variant of useEffect(), to call Effect as soon as DOM API generated BEFORE UI repaints to DOM API

  8. <input> ↔ Form Input Inline Element to accept user input via form UI

  9. Controller ↔ MVC component to RVP (Respond Validate Pass ) UI input to Model

  10. React ↔ Minimalist Lib to build App UI via Declarative Component Based Architecture

  11. Page ↔ export default FC to display unique UI for next File System Router

  12. layout.tsx ↔ ( Next 13 ) Page to export default layout UI to share with children

  13. page.tsx ↔ Page export default UI for Next Route vs dirpath, default Server Component - else "use client" opt-in

  14. not-found.tsx ↔ ( Next 13 ) Page to export default UI for Catch All Route

  15. error.tsx ↔ ( Next 13 ) Page to export default UI on Trigger Error Boundary

  16. Shared Layout ↔ UI to share mutliple Pages via children, to preserve state & not trigger re-render

  17. Mount ↔ (process) to add UI to DOM API

  18. Unmount ↔ (process) to remove UI from DOM API

  19. render() ↔ CC Method inhert from React.Component to return UI as JSX

  20. Minimalist ↔ React focus to UI Primitives , defer other design concerns to React Ecosystem

  21. Component Based Architecture ↔ (Paradigm) to visualize UI as Component to architect (DOS (Design Organize Structure )) Apps

  22. react-mosaic ↔ React Lib to show split window UI

  23. react-credit-cards ↔ React Lib with CSS animated card payment UI form. 3Y abandonware 👎

  24. instantsearch ↔ UI lib for Algolia - vanilla/Framework variants - compat with typesense!

  25. loading.tsx ↔ ( Next 13 ) Page to export default loading UI on Trigger Suspense Boundary

  26. react-split ↔ React Lib to render 1-D split panel UI; react-wrapper for split.js

  27. Accordion ↔ UI to collapse/expand vertical stack list of interactive items

  28. Alert ↔ UI to prompt short message & require user input/dismiss

  29. Spinner ↔ UI to animate ongoing process/loading

  30. Avatar ↔ UI img to rep user/entity

  31. Badge ↔ compact UI to label status/metadata

  32. Banner ↔ UI to promo content to inform/annoy user about news/change/donations/ads

  33. Breadcrumb ↔ UI to show link trail to current page in Routing hierachy

  34. Calendar ↔ UI to show/select date

  35. Card ↔ UI to group related content/action

  36. Carousel ↔ UI to slideshow/cycle image/text with controls, optional autoplay

  37. Chat ↔ UI to display chat log between users

  38. Toggle ↔ UI button to toggle on/off

  39. Tooltip ↔ UI to appear on hover/active as extra info for element

  40. storybook ↔ popular Frontend Dev tool to isolate UI to doc/showcase/test, detangle Business Logic/state/Context

  41. Virtual Assistant ↔ Chatbot UI to converse with humans & answer questions

  42. File Picker ↔ UI input file, to replace default browser prompt window, as drag-drop, etc

  43. Modal ↔ UI to overlay fullscreen & obscure content, to focus attention user attention & req dismiss

  44. Pagination ↔ UI to nav multiple pages

  45. Toast ↔ UI to display short text message over content to inform user of update/change

  46. Icon ↔ small UI symbol to rep concept/content/action. sh!t examples

  47. Checkbox ↔ UI to input user toggle as tickbox

  48. Social Card ↔ UI Card graphic to to show in link previews on social media platforms, for visual branding/outline

  49. Component-Driven ↔ Paradigm to build UI bottom up from basic to assembly