# Ryan UI series ## Part 1 The user must be able to map inputs to outputs, the machine must map inputs to outputs. Builder code vs Core code. Builder code is used way more often so it must remain small and simple. Core provides common codepaths. Escape hatches provide code for fastpaths and program specific needs. ## Part 2 Immediate mode removes a lot of (unecessary) code paths. Uniformity is more present in UIs that lots of different widgets. You can select a global variable that you use often to reduce the number of parameters a function takes. Layouts have behavior similar to widgets so they can be unified. Use the previous frame's information to do autolayout pass. Animation data can be kept on the core side. ## Part 3 Some widgets have overlapping features with others, so they shouldn't be exclusive. # Part 4 Design for the effects you want using composition (bottom-up). # Part 5 We cannot cache empty string nodes, since you could have multiple of them. -> Disable caching for them by mapping an empty string to a null id The keying mechanism is only used for interactions. The parent is usually the same so we can group styles per parent by using a stack of styles. # Part 7 The user interaction of the UI element dictates the builder code. The builder code will have the mapping with the state management requirements already, so it should not go into the core. Important state management actions can be deferred to a command list to avoid bugs. # Part 8 UI is cyclical, it is responsible for producing the data and transforming it. Disagreements on the data might arise from the order of the mutations. We are people and objectiveness is reductive. # Questions What bout DPI? (Part 2) What are self-correcting exponential animation curves It’s also possible to have rules that change the way the hash is seeded. In the above example, it may be interesting to try seeding the hash by the previous sibling’s seed. It’s also often desirable to seed the hash with the parent key’s hash as well. There’s a tradeoff to these tricks, however, which is that it becomes more difficult to generate a key “out-of-context”, but this may be mitigated by offering an explicit “opt-out-of-hash-seed-tricks” path in the API. How are nodes touched? (Part 3) Bypassing text-truncation with ellipses? (Part 4) Look at raddbg for tooltips and dropdown and how their hierarchies are prebuilt. (Part 5) Why would you not identify your spacers? -> Because that's the common case One alternative approach might be to systematically generate spacer IDs, but this has the familiar issues of uniquely identifying one particular call in a frame across multiple frames ## Misc The Design of Everyday Things by Don Norman What this means is that any given layout is nested within another (or, alternatively, it’s the root layout). Mathis was right that specifying pixel coordinates is cumbersome. Check out which skills ryan feels like are rotting. Check out all the code snippets against the raddbg codebase. Please ryan use videos instead of gifs. Try this out. For example, if I want to make a button appear embossed when it is hovered by the user, I can render a gradient that fades from semi-transparent white on the top vertices to full-transparency on the bottom vertices. To make the same button appear debossed, I can render gradients that fade from a semi-transparent black to full-transparency to emulate shadows on the edge of the button, to make it appear “pressed”: https://dqfft.github.io/DirectWrite-quick-start/ https://mr4th.com/blog/reference-dynamic-linking # Queues by Fabian Giesen at HSC https://www.youtube.com/watch?v=__Vvk027i4s&list=PL-IPpPzBYXBE10zoFwi5SKeYCMWTLgPCF Everything becomes serial in I/O because that ends up easier to speed up. Queues are used to counter interruptions. A "waiting area" can mitigate latency spikes caused by packets taking more time to being processed. Whenever customers are waiting we can choose to intepret this system as a queue and apply the insights to queues from there. Back pressure is when filled up queues stall other queues. E.g., You can make memory usage go down by processing faster since that will reduce the average amount of customers in the system. You want a mechanism for informing the queue is full. # Linux X11 Clipboard - super useful!: https://movq.de/blog/postings/2017-04-02/0/POSTING-en.html - https://stackoverflow.com/questions/79533533/access-the-clipboard-on-linux-x11-from-a-c-source-code - good to know: https://tronche.com/gui/x/icccm/sec-2.html#s-2 - source code: https://github.com/kfish/xsel/ - source code: https://github.com/astrand/xclip/ # Sources - linux clipboard: https://movq.de/blog/postings/2017-04-02/0/POSTING-en.html - text box editing: - https://www.dgtlgrove.com/p/ui-bonus-1-simple-single-line-text - https://rxi.github.io/textbox_behaviour.html