The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I�ve just started messing with React, TypeScript and Material UI. Coming from a bit of traditional desktop app programming, trying to get simple things to work (e.g. right now changing a button text during runtime) makes me feel like someone took a poo poo into my brain.

Obviously all this stuff is somehow usable, given there�s plenty of apps using it, but it sure is pretty insanely structured. :psypop:

# ¿ Dec 14, 2020 14:50

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 18:12

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Inacio posted:

how much previous javascript/typescript experience did you have? that is not a very complex task, you might just be doing something a bit outside your comfort zone?

It's more of a thing, where on a traditional desktop UI framework, you go about button1.Text = "foo" whereas whatever I tried earlier, I either have to jump through weird design hoops as suggested by prom candy earlier, at least with React and Material UI, anyway, or just go "gently caress you" and bypass everything by setting innerHTML via DOM.

Dominoes posted:

The JS-framework ecosystem, and its orbit of supporting articles and tutorials, is a hot mess.

Yeah definitely. Even React's Getting Started examples doesn't really work out of the box. The typescript compiler was whining about missing props, that I had to eventually add myself to that drat example.

Combat Pretzel fucked around with this message at 20:35 on Dec 14, 2020

# ¿ Dec 14, 2020 20:32

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

prom candy posted:

"Weird design hoops?" Did you actually read my post or just glance at the code example and go "oh no i'm much too smart for this."

I�ve read it. I just find it weird on the first glance, because of years doing it differently/seemingly easier.

�edit: I guess it�s similar to data binding I�ve done in the past on WPF/UWP.

Combat Pretzel fucked around with this message at 09:17 on Dec 15, 2020

# ¿ Dec 15, 2020 09:12

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

In JSX/TSX, is it possible to give components, that are created globally, names to address them with later in JavaScript/TypeScript? �edit: Those are refs apparently?

Also, on the same notion, is it possible to make something like this work:

let x: SomeComponent = <SomeComponent />;

Typed variable to be able to access functions.

Combat Pretzel fucked around with this message at 14:22 on Dec 15, 2020

# ¿ Dec 15, 2020 14:09

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Whoops, by global I meant accessible within the page. It's mostly my olden ways trying to figure out a way to drop a new React component into a container element, e.g. press button, drop <MakeAList /> into some place. To have the ability to call a setContent function, you'd need to address the object. I've yet to understand all the state stuff and getting it to update.

Lumpy posted:

You can't "access functions" inside it though.

Oh, well then.

Combat Pretzel fucked around with this message at 17:15 on Dec 15, 2020

# ¿ Dec 15, 2020 17:10

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Can I do headers that repeat each page after a page break when using CSS grids? This is for generating printable reports. Or don't I get around regular old tables?

# ¿ Jun 21, 2021 00:14

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

How does everyone go about making things printable?

I'm trying to design the report pages to be reactive to screen and print, but every browser has its quirks in how it handles printing. What pissed me off yesterday was when I describe the page format in CSS, Microsoft ChrEdge for instance reacts to it in the print preview and adjusts parameters, whereas Chrome, which is almost the same browser, minus MS modifications, shits all over it (and looking for the cause of it leads to an "active" entry on Google's bugtracker that goes 9 years back). Means if I say the page is A4 portrait, ChrEdge selects said paper format (if the driver/printer supports it) and locks out the orientation setting, whereas Chrome picks the default letter format of the default print driver, last used orientation and also fucks up the layout royally. Firefox also ignores the page (and orientation) format, but at least they have the courtesy of rearranging the page layout to look proper.

I mean what in the gently caress.

When I look somewhat deeper into things, I keep running into PDF generators, that forcibly rerender all the HTML in background(?). How does that work? I want the pages to be printable out of the browser, not make users download a PDF instead. Will the generated PDF be opened directly in print preview?

# ¿ Aug 19, 2021 11:31

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Tei posted:

Using html to print is always going to run in problems, but theres things you can do to *influence* that the result is better. Things like hinting page changes.

HTML is not designed to be printer friendly, you have PDF for that. PDF have full control of the printing and can solve most egregious problems. You can render a PDF using PDF based primites, but you could have sections rendered from a HTML using a library that do the conversion from HTML to PDF, usually that saves time and don't break layouts. Generally doing so mean you can't use all the CSS, but a limited set the library can understand. And/or like in emails, rely on dumb DHTML 4.0 syntax or even HTML 3.0 syntax to get things trough.

What I'd typically want is a single chart, maybe with a small datagrid with detail values, on a single page, and it be minimally reactive to changes in the print preview, but none of that ever really works right. Except for Firefox. Probably doesn't help that I'm using display:flex for layout and to maximize space usage of the page.

(Nevermind I'm still stuck to that loving ECharts component resizing properly to the available layout surface, say in a flex box. :[ )

I'd really love for what's on screen (minus UI stuff) to translate mostly 1:1 to paper. I guess I'll look into the PDF stuff over the weekend.

Tabular reports using old school tables works just fine, tho.

Combat Pretzel fucked around with this message at 13:24 on Aug 19, 2021

# ¿ Aug 19, 2021 13:21

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I suppose if you can open a PDF into a new window via <a href>, I guess why not.

# ¿ Aug 19, 2021 15:29

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Thanks for all the printing tips, guess I have plenty of things to try come Monday.

Also, I start to notice not caring about anything web coding for the last decade. So much things. I was trying random things this weekend to ease my poo poo at work. Eventually I notice somewhere in the devtools a notice that my test pages run in quirks mode. I figure I shouldn't want that, so I add the doctype and everything goes to poo poo. More reading up about things ensued.

# ¿ Aug 22, 2021 00:56

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's the proper way to split pages in Chrome for printing, so that they layout correctly?

Say when I declare one <div> as a portrait page and the following one as a landscape one, Chrome shows it as such in the print preview. Except the viewport on the second page is as wide as on the first page. Means if the first page is in portrait mode, it'll leave tons of white space on the landscape one. If I force the elements on the second landscape page wider, it affects those on the portrait page and change all the scaling of that page. If the first page is landscape and the second portrait, elements in the portrait page overflow the page borders, unless I constrain them.

That seems a whole lot of loving stupid poo poo. If I can mix page orientations, I'd assume that layout would deal it. Or is the only way to deal with this to create a first but hidden landscape page and adjust page widths accordingly from there on out?

I spent all day today trying various things to get a feel for it, and it makes me want to hang myself. The best was probably Firefox ESR deciding that all my printers only support Letter and not A4 like they do, and therefore break layouts Paged.js spits out.

# ¿ Nov 15, 2021 18:08

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Fixins posted:

I just rewrite css for printing and it saves a million headaches. Not t sure if that will help you out though.

Thanks I will look into it.

barkbell posted:

You can do a media query selecting for print. Google �print stylesheets� for helpful tips and special css rules that apply for page breaks and stuff

My main issue is that the browser doesn't handle layouting on a per-page basis. As said, if I declare one page as portrait and the next as landscape, and simply just dare to use all available space on the landscape page, that'll affect the portrait pages, too, because it extends the viewport in width everywhere.

Primarily I'll probably just need landscape pages for full-page charts when mixing orientations, so I'm gonna attempt to see how much a pain in the rear end rotational transforms will be in regards to layout breakage (I'm using ECharts with the SVG renderer), so that I can just use one page format.

Also, I'm sure glad that the Firefox using the wrong paper format is an issue that goes back to 2005-2006 and still happens.

# ¿ Nov 16, 2021 18:42

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

barkbell posted:

what does your current css/markup look like?

I don't have a copy of the offending stuff at hand. But the issue is essentially this, consider this code:

code:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            @page {
                size: A4;
            }
            @page portrait {
                size: A4 portrait;
            }
            @page landscape {
                size: A4 landscape;
            }
            .portrait {
                page: portrait;
            }
            .landscape {
                page: landscape;
            }
            div { border: 1px solid black; width: 100%; }
        </style>

    </head>

    <body>
        <div class="portrait">
            Fooooooooooooooooo
        </div>
        <div class="landscape">
            Fooooooooooooooo
        </div>
    </body>
</html>

The result in the print preview is this, note how the DIV on the landscape page is the same width as the one on the portrait page (they're set to 100%), not utilizing the full space:

If I force the second DIV to use the full width of the page, the viewport of the first one extends to the same size and then everything gets scaled down accordingly.

If I flip the order of the two pages, the DIV on the portrait page suddenly overshoots the page width.

I managed to work out a (fudged?) solution now that involves forcing page sizes, a rotate transform and budging the rotated result around a bit: https://pastebin.com/b2TcyFb3

# ¿ Nov 17, 2021 16:48

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

What's some decent React component libraries that look much alike applications? For something that'll run as an application in Electron.

I've been looking at Fluent UI, given what the new Outlook beta looks like. But going from v8 to v9, they seem to be axing a lot of the CSS grid abstractions like that Stack component. And the documentation seems to suck.

What about ~~Maltine~~ Mantine? It looks visually pleasing and sort of in-between application and web in regard of looks. But I can't get a proper feel about popularity (and implied continued longevity).

--edit:
Also, ag-grid vs react-data-grid?

Combat Pretzel fucked around with this message at 19:50 on Dec 1, 2022

# ¿ Dec 1, 2022 19:42

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Whenever I have to deal with printing things (i.e. reports and poo poo), I want to burn down a building.

At least I finally integrated Paged.js into my project, making my life a smidge easier. Been a fun exercise dicking around with an additional root in React and then getting it to tell me when things have been done rendering, so that I can send everything to Paged.js.

What however still annoys me is that the first page generated is just the fitting chunk of HTML, while the second page and beyond, Paged.js wraps it into a <html><body>... structure, matching the original DOM tree up to the container element with the HTML to be chunked, picking up all style attributes along the way, too. So you can't just do visibility:hidden on the container React renders into, to hide away the transition, because then all pages but the first are blank.

Combat Pretzel fucked around with this message at 23:41 on Jun 2, 2023

# ¿ Jun 2, 2023 23:33

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

And today I learn that the content of innerHTML doesn't necessarily reflect the actual DOM tree 1:1.

I've been messing some more with pagination via paged.js, and eventually wanted it integrated with the rest of my existing printing things. Figured to transfer stuff via dangerouslySetInnerHTML in React. But the paginated output suddenly didn't match between the test code and this. Turns out when doing it this way, some spans that were supposed to be in table cells suddenly found themselves outside.
:thunk:

However in good news, it seems like the Chromium team is finally working on the layout engine issue that breaks mixed orientation printing.

Combat Pretzel fucked around with this message at 16:43 on Jun 8, 2023

# ¿ Jun 8, 2023 16:38

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

I have a web app that communicates with a web service frequently. Now I want a channel from server to client to push occasional session and user rights updates. And maybe notifications when other users are messing with the same data sets.

What are the pros and cons for either WebSockets and HTTP/2 SSEs?

The issue I see with HTTP/2 is that IT is dragging their balls all day every day. So if the TLS certificate expires and they lost my eventual ticket requesting a new one, HTTP/2 SSEs would break because no browser supports unencrypted HTTP/2 to fall back on.

The communication between the web app and web service is sufficiently abstracted on each end. Is indifferent as to whether it�s REST or something custom on WebSockets (I�d figure, if a socket is open, funnel everything over it).

# ¿ Aug 11, 2023 10:19

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

spiritual bypass posted:

If the cert fails, your users probably won't look at the site anyway

Probably. There's a small chance I'll wrap the front-end in Electron though.

# ¿ Aug 12, 2023 10:01

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

So what's exactly going on with React? I tried to figure out earlier as to why there weren't any releases since mid-2022. Turns out the core dev team hosed off from Facebook to go work at Next.js. What does that mean for React? I've seen they're working on server component support, but a) I don't care for that, and b) why does it take that long?

# ¿ Dec 7, 2023 19:46

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Looking up React Fiber, it�s already in React 16. :confused:

# ¿ Dec 8, 2023 08:07

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Is there a way I can tell vite, when it's in serving mode, to not mess around with loose CSS files? I have two of them with basic formatting instructions for Paged.js.

In dev mode everything works fine, because they're in the public dir marked folder. When I build everything, the file layout also looks as its supposed to be. But when I want to test said output by using vite serve, while it serves the CSS correctly, if it's the first thing I attempt to load in the browser (by addressing it directly from the address bar), as soon as the app runs, vite starts serving it wrapped in some Javascript HMR boilerplate stuff from what it looks like. So Paged.js kind of ignores it with what not being CSS anymore.

I will eventually attempt to see what happens if I override the @page attribute on the DOM node, but the feeding a CSS file to Paged.js has so far worked smoother, because I've had already to do enough horrible things for in-place rendering of print previews in this SPA.

# ¿ Mar 28, 2024 19:39

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 18:12

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

How do y'all deploy backend Typescript code to the production server? Just git pull a detached head and do tsc && node dist/main.js? Or do you run the stuff through a bundler on a build server and hot drop a bunch of JS chunks to prod? And if, with what bundler?

# ¿ Apr 22, 2024 19:25

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread