Single-Page Application

3 years ago by Ephera to c/programmerhumor

dan 107 points 3 years ago

Anyone that builds a SPA and breaks opening in new tab or history caching and back/forward nav isn't a good frontend developer (or lacks experience, which is something that's fixable!). These have been solved problems for a long time.

save

path: 0 7243965, hotness: undefined, score: 107, children: 26

Ephera 31 points 3 years ago

I mean, for sure, and this meme isn't trying to say that all SPAs are bad. But defaults matter, even for experts.

This meme was inspired after I had to use an SPA, which among those points in the meme, also broke using Alt+Left to navigate back. The normal back-button worked (even if it then had to load for ten seconds to re-display static content).

Which is just a typical example to me. You don't even need much expertise to figure out why Alt+Left is broken. But you have to think of testing Alt+Left, because it's broken by default.

save

path: 0 7243965 7249702, hotness: undefined, score: 31, children: 15

TheOctonaut 8 points 3 years ago

My friend I've been using the Internet for 27 years and developing for it for most of that time and I can promise you I've never once hit Alt+Left

save

path: 0 7243965 7249702 7250306, hotness: undefined, score: 8, children: 12

Feathercrown 24 points 3 years ago

As your younger and more modern replacement, I use it regularly

save

path: 0 7243965 7249702 7250306 7250459, hotness: undefined, score: 24, children: 2

TheOctonaut 12 points 3 years ago

You don't sound like ChatGPT

save

path: 0 7243965 7249702 7250306 7250459 7253263, hotness: undefined, score: 12, children: 1

NotJustForMe 9 points 3 years ago

I have never heard of alt+left, and I've been using the Internet since Mosaic was all the rage. Shame on me, it seems to be implemented in all browsers. How could I have missed it?

save

path: 0 7243965 7249702 7250306 7251152, hotness: undefined, score: 9, children: 1

Ephera 13 points 3 years ago

It's even implemented in many file managers and text editors and such. Pretty much the standard shortcut for navigating history. But yeah, hilariously it's somehow also a rather well-kept secret.

save

path: 0 7243965 7249702 7250306 7251152 7251855, hotness: undefined, score: 13, children: 0

Ephera 8 points 3 years ago

Yeah, I have no trouble believing that. It took quite a while before I learned of this shortcut and when I did, I was wondering why I would ever want to use it.

But I generally work from my laptop these days, without an external mouse connected, so reaching from my touchpad, the Left key is right there.

save

path: 0 7243965 7249702 7250306 7251653, hotness: undefined, score: 8, children: 5

Halosheep 6 points 3 years ago

Your reason for using it was exactly my question. "I have a mouse with a built in back button, why would I want to remove my hand from my mouse and navigate with the arrow key?"

But your reason simply makes sense.

save

path: 0 7243965 7249702 7250306 7251653 7256237, hotness: undefined, score: 6, children: 0

llii 5 points 3 years ago

You can probably go back by swiping two fingers to the right on the touchpad. Maybe it depends on the OS and browser.

save

path: 0 7243965 7249702 7250306 7251653 7267851, hotness: undefined, score: 5, children: 3

joyjoy 6 points 3 years ago

I started using alt+left when browsers started removing backspace. It was for the best.

save

path: 0 7243965 7249702 7250306 7266449, hotness: undefined, score: 6, children: 0

shootwhatsmyname 6 points 3 years ago

Just here representing the Cmd+[ gang

save

path: 0 7243965 7249702 7261160, hotness: undefined, score: 6, children: 1

docAvid 2 points 3 years ago

Ctrl+[ here

save

path: 0 7243965 7249702 7261160 7287257, hotness: undefined, score: 2, children: 0

tsonfeir 20 points 3 years ago

I’m guessing they aren’t using Vue, React, or similar, and they’re rolling their own for some reason.

save

path: 0 7243965 7246434, hotness: undefined, score: 20, children: 3

dan 19 points 3 years ago

React doesn't handle any of this stuff out-of-the-box; it's just a UI library.

save

path: 0 7243965 7246434 7249072, hotness: undefined, score: 19, children: 2

joyjoy 3 points 3 years ago

Neither does vue. You need vue-router, which is required anyway to make an spa with multiple pages.

The only thing that breaks is any component state isn't saved. But this can be fixed by rendering with. How to do this is mentioned in the documentation.

I assume it's similar with react and react-router-dom.

save

path: 0 7243965 7246434 7249072 7266602, hotness: undefined, score: 3, children: 0

tsonfeir -4 points 3 years ago

It’s one install line ffs, how is this a conversation in 2024? It’s EASY.

save

path: 0 7243965 7246434 7249072 7250097, hotness: undefined, score: -4, children: 0

toastal 4 points 3 years ago

Conversly a lot of static websites break new tab by incorrectly slapping target="_blank" on anchors. Luckily Lemmy doesn’t mess this up.

save

path: 0 7243965 7271407, hotness: undefined, score: 4, children: 4

Trarmp 1 point 3 years ago

I maintain a couple of Wordpress installations for clients, where new link targets are the same page, as you'd expect.

They still, somehow, manually check "link opens in new tab". I don't know why some of these boomers are allowed to use computers, I swear.

save

path: 0 7243965 7271407 7272158, hotness: undefined, score: 1, children: 3

toastal 2 points 3 years ago

If you manage the WordPress installation, can’t you disable the ability or create/install a plugin that removes that ability? This hurts usability.

save

path: 0 7243965 7271407 7272158 7275925, hotness: undefined, score: 2, children: 2

Trarmp 2 points 3 years ago

I could, good point. I do disable plugins for clients so they can't beat up their own website too much.

Still, there are legitimate uses for opening a site in a new tab; e.g. when it's an external website. I don't think I should automate that, since there's a granularity in there.

save

path: 0 7243965 7271407 7272158 7275925 7476127, hotness: undefined, score: 2, children: 1

Chenzo 3 points 3 years ago

If your SPA website is done correctly the end user won't even notice and none of the bad things listed in this meme happen.

save

path: 0 7243965 7273202, hotness: undefined, score: 3, children: 0

trucy 81 points 3 years ago

I FUCKING LOVE STATIC HTML PAGES

I LOVE NOT HAVING TO RELY ON SCRIPTS TO DISPLAY CONTENT

save

path: 0 7249646, hotness: undefined, score: 81, children: 3

xthexder 61 points 3 years ago

Welcome to our homepage! We have implemented the navigation menu in Adobe Flash Player to maximize your audio visual experience.

save

path: 0 7249646 7250209, hotness: undefined, score: 61, children: 2

veganpizza69 7 points 3 years ago

that's some PTSD comment right there, I'm getting flashbacks.

save

path: 0 7249646 7250209 7270450, hotness: undefined, score: 7, children: 1

Thcdenton 3 points 3 years ago

Ayyyy

save

path: 0 7249646 7250209 7270450 7270593, hotness: undefined, score: 3, children: 0

andrew 67 points 3 years ago

These things are true if you build a SPA wrong. Believe it or not there are lots of ways to build server side rendered pages wrong too.

save

path: 0 7240904, hotness: undefined, score: 67, children: 12

tsonfeir 7 points 3 years ago

Yeah this meme and the OP have no idea how to build an SPA.

save

path: 0 7240904 7242840, hotness: undefined, score: 7, children: 2

Ephera 27 points 3 years ago

I don't know what the hell you're interpreting into this 15-word-meme, but I do. I'm not saying all SPAs are shit, I'm saying far too many are. And "far too many" being more than one that I can think of. Even the Lemmy webpage breaks history caching.

save

path: 0 7240904 7242840 7249459, hotness: undefined, score: 27, children: 0

intensely_human 2 points 3 years ago

I know what an SPA is, but I would be laughing so hard at this thread if I didn’t know what it meant.

“Yeah man. Dude doesn’t know his SPAs!”

Reminds me of that Saturday Night Live skit with the woodworkers comparing everything to working on the lathe.

save

path: 0 7240904 7242840 7275828, hotness: undefined, score: 2, children: 0

grue -4 points 3 years ago

> implying there's a "right way" to build an SPA.

save

path: 0 7240904 7246164, hotness: undefined, score: -4, children: 8

tsonfeir 13 points 3 years ago

There are a lot of standard practices like… using a router to load the content of your SPA according to the url.

save

path: 0 7240904 7246164 7246409, hotness: undefined, score: 13, children: 6

grue -1 points 3 years ago

What I'm saying is, there's no right way to build a thing that is inherently wrong.

save

path: 0 7240904 7246164 7246409 7246592, hotness: undefined, score: -1, children: 5

tsonfeir 6 points 3 years ago

You could build it with no input sanitation. That’s wrong.

save

path: 0 7240904 7246164 7246409 7246592 7247871, hotness: undefined, score: 6, children: 4

andrew 4 points 3 years ago

There's no one right way. Saying there are wrong ways doesn't imply the existence of one right way, though.

save

path: 0 7240904 7246164 7246736, hotness: undefined, score: 4, children: 0

astrsk 41 points 3 years ago

https://motherfuckingwebsite.com/

save

path: 0 7241783, hotness: undefined, score: 41, children: 4

edb_fyr 27 points 3 years ago

http://bettermotherfuckingwebsite.com/

save

path: 0 7241783 7244135, hotness: undefined, score: 27, children: 0

sbv 10 points 3 years ago

You think your 13 megabyte parallax-ative home page

Is parallax still a thing? I feel like ginormous hero images are more popular atm.

save

path: 0 7241783 7241840, hotness: undefined, score: 10, children: 2

micka190 19 points 3 years ago

motherfuckingwebsite is pretty old at this point. I remember seeing it on Reddit like 10 years ago. Parallax was all the rage back then, when we called "hero" images "jumbotrons" (because Bootstrap called it that, I think?)

save

path: 0 7241783 7241840 7245220, hotness: undefined, score: 19, children: 1

DmMacniel 9 points 3 years ago

Which was derived from those big as screens in sport stadiums or sport arenas. As it was over shadowing the actual stuff below.

save

path: 0 7241783 7241840 7245220 7245473, hotness: undefined, score: 9, children: 0

xmunk 41 points 3 years ago

As an elder developer... yea, we could use react to render complex web pages that erode expected functionality.

Or, like, I'm happy to just go back to server-side rendering... it's surprisingly cheap to build and dead fucking simple.

save

path: 0 7242195, hotness: undefined, score: 41, children: 9

tsonfeir 29 points 3 years ago

Elder developer here too, correctly making my SPAs has made my work significantly more efficient and maintainable now that my back end is basically a rest api and my front end requires very little network interaction after the initial load, which has been made pretty minimal.

save

path: 0 7242195 7242883, hotness: undefined, score: 29, children: 2

Chenzo 1 point 3 years ago

I too have been doing this for years and I whole hearty agree with this comment.

For large complex sites, I ain't never going back.

Actually even for simple sites I'm not sure I'll go back.

save

path: 0 7242195 7242883 7273257, hotness: undefined, score: 1, children: 1

tsonfeir 1 point 3 years ago

If I ever have to do this again, I’ll scream.

”>

save

path: 0 7242195 7242883 7273257 7273721, hotness: undefined, score: 1, children: 0

fidodo 6 points 3 years ago

Elder developer too, you can easily render react server side and statically. Once you remove state, react simply becomes pure functions that output jsx nodes, it's also dead fucking simple, but gives the the possibility to add hydration and state later if you need it.

save

path: 0 7242195 7252076, hotness: undefined, score: 6, children: 1

xmunk 3 points 3 years ago

This is actually excellent advice for performance - you can bake the initial page data in!

save

path: 0 7242195 7252076 7252313, hotness: undefined, score: 3, children: 0

pixxelkick 2 points 3 years ago

I prefer just writing my html, js, css, as is, and then transpiling to pack it down, treeshake, hash, cache bust, CSP, etc etc.

The amount if headache, overhead, inversion of control, mess, and bloat involved in frameworks tends to make me spend way too much time on writing boilerplate.

template and slot exist now, and modern js can do most of the shit fancy libs used to.

There's very little need for frameworks unless you meed a SUPER dynamic website that has tonnes of mutability.

The amount if times i see people load in like 3 frameworks and 10mb of bullshit and ten js files to make a fucking static form that doesn't even do anything fancy is insane.

Just fucking write the like... 8 lines of normal code to populate the form, wtf? Why are we using routers at all, HTTP already exists and does that, why did we re-invent http?

Front-end devs need to spend less time installing npm packages to try and magically solve their issues and just learn how to actually write code, SMH.

save

path: 0 7242195 7291130, hotness: undefined, score: 2, children: 0

ris -1 points 3 years ago

More Server side logic means more vulnerabilities on your end.

save

path: 0 7242195 7251046, hotness: undefined, score: -1, children: 2

xmunk 5 points 3 years ago

I've seen front ends that build queries that are blindly executed by the backend - I've seen GraphQL that allows the client to read arbitrary users' passwords from the database - I've seen attack ships on fire off the shoulder of ori- whoops, wrong memory.

Anyways, you can create vulnerabilities anywhere using anything - imo more server side logic might mean more vulnerabilities on the server but it means less vulnerabilities overall.

save

path: 0 7242195 7251046 7252142, hotness: undefined, score: 5, children: 1

ris 1 point 3 years ago

Why does it mean less vulnerabilities overall?

save

path: 0 7242195 7251046 7252142 7252862, hotness: undefined, score: 1, children: 0

TootSweet 36 points 3 years ago

I was kindof chief architect for a project where I worked. I decided on (and got my team on board with the idea of) making it an SPA. Open-in-new-tab worked perfectly.

(One really nice thing about it was that we just made the backend a RESTful API that would be usable by both the JS front-end and any automated processes that needed to communicate with it. We developed a two-pronged permissions system that supported human-using-browser-logs-in-on-login-page-and-gets-cookie-with-session-id authentication and shared-secret-hashing-strategy authentication. We had role-based permissions on all the endpoints. And most of the API endpoints were used by both the JS front-end and other clients. Pretty nice.)

I quit that job and went somewhere else. And then 5 years later I reapplied and came back to basically the exact same position in charge of the same application. And when I came back, open-in-new-tab was broken. A couple of years later, it's not fixed yet, but Imma start pushing harder for getting it fixed.

save

path: 0 7241459, hotness: undefined, score: 36, children: 0

toastal 31 points 3 years ago

What some folks are missing is that SPAs are great for web applications & unsuitable for web pages. There is more nuance than “SPA bad”.

Then dealing with a lot of dynamic content, piping thru a virtual DOM DSL is 100× nicer for a developer than having to manually manipulate the DOM or hand write XML where it’s easy to forget all the closing tags (XML is better as a interchange format IMO & amazing when you need extensibility… also JSX just makes it worse). That developer experience (DX) often can lead to faster iteration & less bugs even with a cost to the user experience (UX). But it’s not always a negative impact to the UX--SPAs can be used to keep things like a video or music player on while still browser & using the URL bar as a state reference to easy send links to others or remember your own state.

It’s equally silly that a landing page whose primary purpose is to inform users of content takes 40s to load & shows “This applications requires JavaScript” to the TUI browser users & web crawlers/search indexers that don’t have the scale of Google to be executing JavaScript in headless browser just to see what a site has to say.

The trick is knowing how & when to draw these lines as there’s even a spectrum within the two extremes for progressive enhancement. React isn’t the solution to everything. Neither is static sites. Nor HTMX. Nor LiveView. Nor Next/Nuxt/Náxt/Nüxt/Nœxt/Nอxt.

save

path: 0 7270296, hotness: undefined, score: 31, children: 5

foobaz 3 points 3 years ago

I don't agree with this hard split between SPAs and MPAs anymore (ie. SPAs for apps, MPAs for websites/content). In my opinion SPAs are simply a progressive enhancement for MPAs which allow even faster page navigation. All frameworks now come with SSR solutions and if a website still requires JS to show content that's a skill issue.

Looking at Astro the line between SPA/MPA is getting really blurry. Just slap a View Transition element on your page and you got a MPA which acts like a SPA when JS is enabled.

save

path: 0 7270296 7275528, hotness: undefined, score: 3, children: 1

toastal 3 points 3 years ago

In my opinion SPAs are simply a progressive enhancement for MPAs which allow even faster page navigation.

While I agree that there is a spectrum (hinting at that with the last paragraph), this is where I hard disagree. To construct something like this, you are making an application massively complex by trying to re-implement everything on both ends. Using something like Astro is only hiding that complexity but it’s still there, & probably full of bugs & tons of JavaScript that most developers wouldn’t even understand their stack or know how to jump into the Astro code. The amount of time saved is largely minuscule in most cases with the assets cached when navigating to a new page. In fact, I just tested two of their showcased sites which loaded slower with JavaScript enabled & the content was pretty obviously 95% static. There’s probably some niche use cases for this, but it’s not a good default IMO.

save

path: 0 7270296 7275528 7276177, hotness: undefined, score: 3, children: 0

madcaesar 2 points 3 years ago

What is a web page vs web application? The web is so complex with features these days that pretty much everything is an application.

save

path: 0 7270296 7272379, hotness: undefined, score: 2, children: 2

expr 9 points 3 years ago

Gmail is a (bad) web application. A marketing website or even an ecommerce store are not.

save

path: 0 7270296 7272379 7272926, hotness: undefined, score: 9, children: 0

toastal 3 points 3 years ago

I admitted it was a spectrum, but this recent article in particular does a good job explaining the axes of static vs. dynamic : online vs. offline. I think you will appreciate it. :)

save

path: 0 7270296 7272379 7274789, hotness: undefined, score: 3, children: 0

okamiueru 26 points 3 years ago

It's fascinating how some SPAs come about. Often consultancies who win some bid to implement X features. Since "good user experience" is hard to quantify/specify, it ends up being a horrible end result.

Zalaris is one such that I'm in complete awe of. Set up user flows that are expected to take 30 minutes to complete. Yet, don't keep track of that state/progress withing your own SPA. Click the wrong tab within that SPA, and state is reset.

It's, just fascinating.

save

path: 0 7250397, hotness: undefined, score: 26, children: 1

EnderMB 2 points 3 years ago

save

path: 0 7250397 7252507, hotness: undefined, score: 2, children: 0

DmMacniel 17 points 3 years ago

Remember when websites had a built-in loading indicator, and you didn't have to implement it yourself via JavaScript?

save

path: 0 7241306, hotness: undefined, score: 17, children: 11

riskable 24 points 3 years ago

I remember when the web didn't have JavaScript.

Honestly, though it was much worse back then. I prefer the variety and features of modern browsing over (mostly) plain text.

What I wish we could do away with on the web is videos. Let's go back to just images and text, thanks. Animations are fine though 👍

save

path: 0 7241306 7241676, hotness: undefined, score: 24, children: 10

sbv 11 points 3 years ago

What I wish we could do away with on the web is videos. Let's go back to just images and text

Seconded. I really enjoyed pre-video Internet.

save

path: 0 7241306 7241676 7241875, hotness: undefined, score: 11, children: 9

DmMacniel 20 points 3 years ago

I third that. Videos are so incredible inaccessible. Want an easy-to-follow tutorial or heck a searchable document? nah mate video is all you get, and ads with it!

save

path: 0 7241306 7241676 7241875 7242543, hotness: undefined, score: 20, children: 8

sbv 4 points 3 years ago

The ads make it even worse. I totally get the Gemini folks for wanting to simplify. But I do enjoy me a good webapp.

save

path: 0 7241306 7241676 7241875 7242543 7242656, hotness: undefined, score: 4, children: 6

NotJustForMe 3 points 3 years ago

You do get searchable auto-transcripts of videos now, so that's a good thing. Some people work better with videos and find them more accessible. Best of both worlds. As long as they are not auto-playing and pre-caching, I'm fine with them existing.

save

path: 0 7241306 7241676 7241875 7242543 7251207, hotness: undefined, score: 3, children: 0

grue 16 points 3 years ago

Building "applications" out of HTML documents -- a single one or otherwise -- is the sort of thing that belongs in one of those "stop doing X" memes, unironically.

save

path: 0 7246126, hotness: undefined, score: 16, children: 2

ris 4 points 3 years ago

Why? I like that the Webplatform gives more Freedom to the Users.

save

path: 0 7246126 7251019, hotness: undefined, score: 4, children: 1

veganpizza69 3 points 3 years ago

No. Users should be forced to install hundreds of apps, with two thirds of apps running simultaneously. And if they don't have memory left on the device for that, they should uninstall apps and reinstall them when necessary.

^/s^

save

path: 0 7246126 7251019 7270525, hotness: undefined, score: 3, children: 0

rwhitisissle 15 points 3 years ago

HTMX is great and is the only frontend development tool I don't absolutely loathe. It enables lightweight SPA development, and provides a very simple and efficient mechanism for doing HTML over the wire.

save

path: 0 7248153, hotness: undefined, score: 15, children: 26

BedSharkPal 2 points 3 years ago

Not sure I would call HTMX a SPA framework though? Like it all's easy async content fetching for sure, but it's usually done across a MPA?

save

path: 0 7248153 7253909, hotness: undefined, score: 2, children: 5

rwhitisissle -1 points 3 years ago

Where did I call it a framework?

save

path: 0 7248153 7253909 7263796, hotness: undefined, score: -1, children: 4

BedSharkPal 0 points 3 years ago

Sure, wrong term. I think my point still stands though. A SPA is *generally *"rehydrated" DOM elements from JSON data pulled from an API though. Where as HTMX is more akin to classic AJAX style page dynamism.

save

path: 0 7248153 7253909 7263796 7265205, hotness: undefined, score: 0, children: 3

rwhitisissle 0 points 3 years ago

A SPA is *generally *“rehydrated” DOM elements from JSON data pulled from an API though. Where as HTMX is more akin to classic AJAX style page dynamism.

You'll forgive me if I say this is an instance of splitting hairs and having a particular definition for something that includes extra qualities separate from what those terms are actually describing for most people. Also, things like, I dunno, React, are going to extensively use ajax to accomplish what they do. It's literally just asynchronous javascript. It's like someone saying "my vehicle of choice is a motorcycle" and then someone else saying "A motorcycle isn't really a vehicle. It's a transportation device with wheels. A car is a vehicle." They are both vehicles. They both have wheels. The wheels are ajax. A page made with htmx and a page made with React are both SPAs.

save

path: 0 7248153 7253909 7263796 7265205 7265519, hotness: undefined, score: 0, children: 2

pixxelkick -7 points 3 years ago

Unfortunately it also kicks Content Security Policy square in the nuts and shoots a giant hole right through your website security, so if anyone on my team brings up using it I inform them it's an instant security fail if we so much as touch it.

It's a cute idea but horribly implemented. If your website has any security requirements, do not use htmx

Edit: the fact so many people have no idea about this and are downvoting is sad. People need to learn how CSP headers work, and why inherently HTMX completely bypasses this as it currently is designed.

save

path: 0 7248153 7255970, hotness: undefined, score: -7, children: 19

fuzzzerd 7 points 3 years ago

Can you elaborate on that? I haven't used it, but just assume if you host it on your own domain you can have it play nicely with csp, there are docs in their site about it. Where did it fall short for your use case?

save

path: 0 7248153 7255970 7264791, hotness: undefined, score: 7, children: 6

pixxelkick -1 points 3 years ago

CSP allows you to whitelist/blacklist arbitrary Javascript, and ideally you completely blacklist online js from being executed at all, such that only .js files of same domain can be invoked by your website.

This serves the role of locking down injection attacks, only your explicitly approved Javascript can be invoked.

HTMX enables invoking of logic via HTML attributes on HTML elements... which CSP can't cover

Which means you re-open yourself to injection attacks via HTML. Attackers can inject an HTML element with HTMX attributes and no amount of CSP will stop HTMX from going "Okey doke!" And invoking whatever the attributes say to do.

This effectively shoots even a completely locked down CSP config square in the nuts, totally defeating the entire point of using it.

It's a cute idea but what is needed is a way to pre-emptively treat HTMX as a template file that transpiles everything out so the ajax happens in a separate .js file

If we had that, then it'd be safe and secure, as the whole "htmx attributes on elements" thing would just be a templating syntax, but when transpiled it wouldn't be supported anymore so attackers can no longer inject html as an attack vector

save

path: 0 7248153 7255970 7264791 7282160, hotness: undefined, score: -1, children: 5

rwhitisissle 1 point 3 years ago

This demonstrates a profound misunderstanding of HTMX, and how websites in general operate. So much so that I would not hesitate to describe this as somewhere between a baldfaced lie and just malicious incompetence. You can't "invoke logic via HTML attributes," but you can describe it. HTMX is a client side javascript library that parses custom elements you define in your HTML and uses the data described by them to initiate AJAX calls via the fetch() or XMLHttpRequest browser APIs, which CSP explicitly covers via the connect-src directive: https://developer.mozilla.org/.... It's literally just a javascript library that parses HTML and uses it to parameterize AJAX calls. If HTMX were somehow able to bypass CSP, then every single piece of clientside JavaScript in the world could violate it.

save

path: 0 7248153 7255970 7264791 7282160 7299041, hotness: undefined, score: 1, children: 4

rwhitisissle 5 points 3 years ago

HTMX comes with a variety of CSP options, though...

save

path: 0 7248153 7255970 7263823, hotness: undefined, score: 5, children: 11

pixxelkick -1 points 3 years ago

Doesn't matter, the entire implementation principle of how HTMX works and what it does inherently bypasses CSP. There's no getting around that.

You fundamentally are invoking logic via HTML attributes, which bypasses CSP

save

path: 0 7248153 7255970 7263823 7282016, hotness: undefined, score: -1, children: 10

rwhitisissle 2 points 3 years ago

how HTMX works and what it does inherently bypasses CSP

Well, no, not really. All HTMX really does are AJAX requests to remote resources, which are performed by interpreting attributes in HTML. You specify the type of request and the target for updating. Those requests can sometimes contain parameters, of course, but any API that accepts any kind of conditional or user generated input has to sanitize that input before doing anything meaningful with it. This requirement isn't something particular to HTMX.

You fundamentally are invoking logic via HTML attributes, which bypasses CSP

This is not true, though. You are manipulating the DOM via HTMX, but CSP has nothing to do with dynamic content manipulation. CSP is more concerned with preventing the injection of malicious code. If what you're referring to, however, is the possibility of someone maliciously injecting HTML with HTMX that performs some nefarious action, then I have to ask (again) why you didn't properly sanitize user input or limit the possible connection sources in your CSP.

If you have a specific example, however, of a way in which HTMX by design violates CSP that can't be dismissed with "you coded your website poorly," I would love to know.

save

path: 0 7248153 7255970 7263823 7282016 7284230, hotness: undefined, score: 2, children: 9

EpicVision 12 points 3 years ago

I understand the point of static websites, but Vue Router is pretty nice

save

path: 0 7256948, hotness: undefined, score: 12, children: 2

intensely_human 1 point 3 years ago

If you’re using a router you can still support opening in new tab, history, etc.

save

path: 0 7256948 7275773, hotness: undefined, score: 1, children: 1

EpicVision 1 point 3 years ago

Sure, but I don't want to. SPAs are nice, but I also try to include a JS-free fallback solution that is loaded when the client doesn't support Javascript. I think this is the best approach to web development. A good example for this is LocalMonero's No-JS mode. You can use the toggle in the upper-left corner to disable all Javascript on the website, and it will still have most features. I love it.

save

path: 0 7256948 7275773 7276062, hotness: undefined, score: 1, children: 0

Armand1 11 points 3 years ago

For React, you can use React Router. That doesn't mean you'll do it well though.

It's tough.

save

path: 0 7253180, hotness: undefined, score: 11, children: 0

Lulzagna 8 points 3 years ago

Skill issue

save

path: 0 7246297, hotness: undefined, score: 8, children: 0

intensely_human 7 points 3 years ago