let’s put it like this: no (ui or ux other) designer was involved in the process of html4 and html5

this explains it was so hard (for a long time) to create layouts that scale well (across devices, div + style min-width=”50%” max-width=”100%” changes that)

so users and developers are finding ever new ways to overcome the (STILL) technical hurdles of displaying information in a nice and (hopefully) reliable fast interactive way,

the major difference between:

  • php -minus js
    • there is a complete page reload whenever the user clicks a button (interacts with the server)
  • php +plus js
    • there is a server request every time the user changes input of a <input (can be a number counter or something else)
    • the page does not reload
      • the js-form-input-widget itself sends a request to the server for this or that info and updates it’s value
      • smaller chunks of data are exchanged between server and client, THEORETICALLY improving speed (if there is not too much overhead around the data)

the server-side lang in this concept is exchangable could be python, could be nodejs could be java.

how to tell if a website is using react javascript framework

in firefox open the page, hit Ctrl+U (view src)

<input autocomplete="no" aria-autocomplete="list" aria-controls="react-autowhatever-f8612897-29ad-4efb-8d91-dkvfi129djf" placeholder="IPv4 Address" type="text" class="inline-edit-input bg-white border-white form-control" value="123.123.123.123"></div>

react.org is a highly popular js framework

developed by facebook in (of course) javascript, but does it add more complexity than absolutely needed? (does it follow or ignore the UNIX KISS concept?)

concept:

  • “Declarative: React makes it painless to create interactive UIs.”
    • Design simple views for each state in your application,
    • and React will efficiently update and render just the right components when your data changes.”
      • good, that’s what the use of JS should be limited to: nice front ends and animations
    • “Declarative views make your code more predictable, simpler to understand, and easier to debug.”
      • more code usually makes harder to debug but okay
  • “Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs.”
    • modularity: a UNIX KISS concept
    • “Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.”

there it was, the buzzword: “rich data”

      • what is “rich” data? is there also “poor” data? let’s call it just data? “a lot of data” or “a little bit of data” (data the android would agree)
        • tried to find a definition for “rich data” and the bst that was there was this:
        • “In its simplest form, rich data is used to predict consumer behaviour. It’s the process of compiling data to determine when and where a person is most likely to buy something, as opposed to relying on trend forecasts and gut-feelings.” (src)
        • so “rich data” is data that makes someone rich by providing detailed data on what a user might buy the next 5min X-D
        • asked the favorite ex-serving-the-public-now-sold-for-profit-to-M$ AI ChatGPT 3.5:
          • “what is your definition of “rich data”?”
          • ChatGPT 3.5:
            • “Rich data” refers to data that is comprehensive, diverse, and valuable for analysis or decision-making purposes.”
            • “It typically encompasses various types of information, including numerical, textual, visual, and contextual data, among others.”
            • “Rich data provides deep insights into the subject matter it represents and enables thorough analysis, exploration, and understanding of complex phenomena.”
            • “It often includes detailed attributes, metadata, and associated contextual information that enhances its usefulness and relevance for specific applications or domains. Rich data sets are often characterized by their depth, breadth, accuracy, and relevance to the problem or task at hand.”
          • so rich data, is just high quality data without the clutter?
            • but someone had to come up with a new word for already existing things (this time it was probably not M$)

possibly privacy problematic tracking data-message-id in ChatGPT output

  • BTW WARNING: when the user copy-and-pastes the text by selecting the text, the user will also copy a message-id that might uniquely identify 1. the user 2. the interaction with the AI etc.
    • <div class=”min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&amp;]:mt-5 overflow-x-auto” data-message-author-role=”assistant” data-message-id=”x83hdf789132-k5d7-o1023psdf-d98rhdf-do198df18″>
      <div class=”markdown prose w-full break-words dark:prose-invert light”>
    • ChatGPT is unaware of this? or lying X-D
      • so better copy-and-paste-the answer to a plain-text editor then copy-and-paste it into wordpress or the cms of choice)
  • “Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.” (src)

WAI-ARIA

The Web Accessibility Initiative – Accessible Rich Internet Applications document contains techniques for building fully accessible JavaScript widgets.

https://legacy.reactjs.org/docs/accessibility.html

https://react-spectrum.adobe.com/react-aria/getting-started.html <- adobe is also involved into this somehow

links:

liked this article?

  • only together we can create a truly free world
  • plz support dwaves to keep it up & running!
  • (yes the info on the internet is (mostly) free but beer is still not free (still have to work on that))
  • really really hate advertisement
  • contribute: whenever a solution was found, blog about it for others to find!
  • talk about, recommend & link to this blog and articles
  • thanks to all who contribute!
admin