Ask HN: How can I improve UI dev skills? Looking for real-world examples • Hacker News Board

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#11

Post by im_lince » Wed, Sep 18, 2024, 3:59 PM UTC

Adrig wrote: post #10

im_lince wrote: post #9

Earlier quoted context omitted.

Cool, i will check out the notion list. Plus, I have one more question: how can I structure the code properly? For example, if I have custom UI components, state management, page layout, types, etc., how do I organize this in a proper structure? for example, checkout folder structure of this project: https://github.com/firecamp-dev/firecamp/tree/main/packages

This is where my expertise ends as a designer, sorry! What I meant about small design system is also true on the code side, since a proper design system is this design / code mirroring. This is where js frameworks help a lot since you can create components with properties and nest them, but that's about all I know about FE-eng

Yeah, got it. Can you recommend some good real projects or web apps to check out for design inspiration? I want to see how design principles are executed in real applications. If they are open source, that's even better—I’d like to check out the code as well

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#12

Post by austin-cheney » Thu, Sep 19, 2024, 9:22 AM UTC

Try looking at my prior personal project: https://github.com/prettydiff/share-file-systems

Imagine loading a large dynamically populated page in the browser with state restoration fully executed as faster than 80ms. I describe that in great detail here: https://github.com/prettydiff/wisdom

I built an original test automation engine for that application because I needed something that supported command and control across multiple computers in the browser for a peer-to-peer environment. On just a single computer it achieved 300 points of evaluation in less that 8 seconds with full file system execution from the browser.

The application also demonstrated an OS-like GUI in the browser that achieved accessibility with full file system display.

Here are the key insights I employed:

* Less is more. Focus on architecture with an obsession on simplicity and reuse even if greatly inconvenient. That often required an irrationally high level of refactoring.

* Speed is an understanding of tree models and transmission and nothing more. Always navigate tree models where they are available, such as the file system and the DOM, in preference to string parsing. String parsing, in any form, is a performance killer. Binary payloads and bidirectional communication are vastly superior to HTTP in every conceivable scenario.

* Other UI developers are cowardly. Don’t let that limit your ambition. Don’t listen to a bunch of bullshit cliches. Measure things and execute according to evidence. Reinvent absolute everything you see fit, and yes it will make other UI developers cry. Real world users don’t care about the sad tears of your peers.

Re: Ask HN: How can I improve UI dev skills? Looking for real-world examples

#13

Post by austin-cheney » Thu, Sep 19, 2024, 1:31 PM UTC

austin-cheney wrote: post #12

Try looking at my prior personal project: https://github.com/prettydiff/share-file-systems Imagine loading a large dynamically populated page in the browser with state restoration fully executed as faster than 80ms. I describe that in great detail here: https://github.com/prettydiff/wisdom I built an original test automation engine for that application because I needed something that supported command and control acr…

EDIT: The performance link should be https://github.com/prettydiff/wisdom/blob/master/performance...

Screwed by the iphone.