[HN Gopher] Clay - UI Layout Library
       ___________________________________________________________________
        
       Clay - UI Layout Library
        
       Author : ivmoreau
       Score  : 72 points
       Date   : 2024-12-19 16:36 UTC (6 hours ago)
        
 (HTM) web link (www.nicbarker.com)
 (TXT) w3m dump (www.nicbarker.com)
        
       | mega-tux wrote:
       | Looks very nice, I just watch a great YT video from the developer
       | here https://www.youtube.com/watch?v=DYWTw19_8r4
        
         | rubymamis wrote:
         | It's so rare to see such a clear and intuitive explanation.
         | This video is amazing.
        
         | riazrizvi wrote:
         | The developer is rediscovering the concept of a GUI library.
         | The modern variant is the mouse-driven GUI developed by Xerox
         | in the 1970s (and later commercialized by them as Xerox Star)
         | which Jobs famously copied to create Apple's Lisa, and Gates
         | famously mimicked to create MS Windows. Since they determine
         | the look and feel of a platform and their design determines the
         | ease with which developers can create apps for the platform,
         | GUI frameworks became pivotal to platform wars across all sorts
         | of products, from OSs to browsers, graphics engines and
         | anything else whose success was determined largely by the
         | interface developer experience.
        
       | chromanoid wrote:
       | cool stuff! selectable text is a MUST in the browser for me. In
       | clients and apps that do not need that or can provide it
       | themselves, this seems to be a very nice and tiny solution.
        
         | dannyobrien wrote:
         | it's weird to watch it break text selection/copy-and-paste :
         | feels like it might be fixable, though.
         | 
         | I'm a stuck record on this, but I really feel like the
         | regressions in clipboard universality are one of most
         | understated losses of UI shifts in the last few years (along
         | with linkability and embedding)
        
       | britannio wrote:
       | So cool. I wonder if it'd work for a Raspberry Pi Pico +
       | https://pimoroni.com/picodisplay or similar devices.
        
       | zibzob wrote:
       | This looks pretty cool, but from the page I can't tell if there's
       | any interactivity supported...there's a button example but it
       | seems to have no click handler?
       | 
       | Okay, from the examples there's something like this:
       | if (isMouseDown && !scrollbarData.mouseDown &&
       | Clay_PointerOver(Clay_GetElementId(CLAY_STRING("ScrollBar")))) {
        
       | jasonjmcghee wrote:
       | Just wanted to drop a note - everything following the animation
       | cannot be selected - seems focus is stolen somehow - whenever I
       | try to select text, it immediately deselects it.
        
         | rmac wrote:
         | this happens to me on mobile using all chromium and gecko based
         | browsers
         | 
         | what's also interesting is how much worse Firefox is at
         | rendering this page; example =>
         | 
         | https://imgur.com/a/DNYe2WN
        
         | Reubend wrote:
         | It's probably because it does it a full reset every frame, and
         | there's an animation playing.
        
       | ahmedfromtunis wrote:
       | Serious question: am I the only one who finds writing a webpage
       | like this to be a little too much (even if the concept is cool):
       | 
       | void LandingPageDesktop() { CLAY(CLAY_ID("LandingPage1Desktop"),
       | CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height =
       | CLAY_SIZING_FIT({ .min = windowHeight - 70 }) }, .childAlignment
       | = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { .x = 50 } })) {
       | CLAY(CLAY_ID("LandingPage1"), CLAY_LAYOUT({ .sizing = {
       | CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }, .childAlignment = {.y =
       | CLAY_ALIGN_Y_CENTER}, .padding = { 32, 32 }, .childGap = 32 }),
       | CLAY_BORDER({ .left = { 2, COLOR_RED }, .right = { 2, COLOR_RED }
       | })) { CLAY(CLAY_ID("LeftText"), CLAY_LAYOUT({ .sizing = { .width
       | = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection =
       | CLAY_TOP_TO_BOTTOM, .childGap = 8 })) {
       | CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout
       | library in C, with declarative syntax and microsecond
       | performance."), CLAY_TEXT_CONFIG({ .fontSize = 56, .fontId =
       | FONT_ID_TITLE_56, .textColor = COLOR_RED }));
       | CLAY(CLAY_ID("LandingPageSpacer"), CLAY_LAYOUT({ .sizing = {
       | .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) }
       | })) {} CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage
       | right now!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId =
       | FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); }
       | CLAY(CLAY_ID("HeroImageOuter"), CLAY_LAYOUT({ .layoutDirection =
       | CLAY_TOP_TO_BOTTOM, .sizing = { .width =
       | CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = {
       | CLAY_ALIGN_X_CENTER }, .childGap = 16 })) { LandingPageBlob(1,
       | 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"),
       | CLAY_STRING("/clay/images/check_5.png")); LandingPageBlob(2, 32,
       | COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive
       | layout"), CLAY_STRING("/clay/images/check_4.png"));
       | LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3,
       | CLAY_STRING("Declarative syntax"),
       | CLAY_STRING("/clay/images/check_3.png")); LandingPageBlob(4, 32,
       | COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"),
       | CLAY_STRING("/clay/images/check_2.png")); LandingPageBlob(5, 32,
       | COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"),
       | CLAY_STRING("/clay/images/check_1.png")); } } } }
       | 
       | Source:
       | https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15...
        
       ___________________________________________________________________
       (page generated 2024-12-19 23:00 UTC)