Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

pentium166: Oct 15, 2012

kedo posted:

Totally off topic from this current conversation, but can anyone recommend tools to add issue size/weight to Github issues and/or projects? I'm hesitantly open to non-Github tools, but Github is so deeply ingrained in our existing process that I'd really rather not have to reinvent the wheel if I don't have to.

It looks like some of the GitHub Projects templates have a size field. Do you want to add that to an existing project or issues or something?

# ¿ Apr 9, 2024 04:29

Adbot: ADBOT LOVES YOU

# ¿ May 20, 2024 23:16

pentium166: Oct 15, 2012

I've been poking at React as a learning experience recently, rewriting a small Vue 3 app I built (itself a recreation of a small internal Rails app I made at my last job), and all I have learned is that I hate React and its routing/state management ecosystem and wish literally anything else had won the frontend wars

And then people decided to run this cursed abomination on the backend as well!

# ¿ Apr 9, 2024 19:15

pentium166: Oct 15, 2012

Ima Computer posted:

Do you have any substantive complaints? Which routing and state management solutions did you explore?

Yeah, it kind of sucks React doesn't prescribe a single way of doing global state management or routing and you're forced to make a choice from a multitude of satisfactory options. But "cursed"?

I don't mind investigating and choosing an option, but all the options had something weird going on (for state management the "weird" is that everyone still uses Redux/RTK when there are other, presumably more ergonomic, options).

I first looked at a minimal router, maybe https://github.com/molefrog/wouter and passed on it because I don't like the idea of defining routes inside components. I implementing TanStack Router with file-based routing and abandoned that because I didn't like how it dictated the app's organization, and it was a bit too magic. Now I'm on React Router with a createBrowserRouter config object and it almost works, except for not having a sane way of doing global navigation guards for login/auth state. Every example I saw involved redirecting the user inside a component after the point where the app had presumably made any additional network requests for that route. I ended up abusing a top level route with a check in the loader function (which doesn't provide access to route objects???) and a shouldRevalidate function to (maybe???) make it re-evaluate the loader on every child route change.

For reference, here's an entire Vue navigation guard implementation:

code:

let initialized = false

router.beforeEach(async (to, from) => {
  const userStore = useUserStore()
  if (!initialized) {
    // on first load, attempt to restore session from cookie using PocketBase's client SDK
    await userStore.restoreSession()
    initialized = true
  }
  if (!userStore.isLoggedIn && to.path !== '/login') {
    return '/login'
  } else if (userStore.isLoggedIn && to.path === '/login') {
    return '/thing-list'
  }
})

Redux doesn't allow async reducers, so I had to rethink how I was doing server requests and state management from the Vue app. This is kind of on me for not using a dedicated server state library, but my goal was to gently caress with Redux so that's what I did.

JSX on its own is fine I guess but doesn't seem to really provide much actual benefit over more HTML-styled components, and avoiding unnecessary re-renders is less of an issue in Vue.

# ¿ Apr 9, 2024 21:23

pentium166: Oct 15, 2012

Also I think rendering an SPA on the backend introduces a huge amount of complexity and foot guns (leaking closures?), and if that's something you felt you had to reach for to reach your SEO or time to first paint goals or whatever, is a sign that your application was not a good fit for an SPA to begin with. But in the real world I guess you can't just throw out your entire frontend and rebuild it in Java or whatever, so here we are.

# ¿ Apr 9, 2024 21:29

pentium166: Oct 15, 2012

ANYWAY, my problem is that the React ecosystem isn't doing anything better than the other options and in many cases is actually worse, because other framework/library authors have the benefit of seeing where the rough edges are and exploring different patterns. I'm also salty about the state of tech hiring currently because I clearly bet on the wrong horse in 2017 when I first Frankensteined Vue 2 into a Backbone app, and nearly every front end/full stack job posting wants 5+ years of professional experience with React and Redux specifically, as if the basic concepts of how to architect a modern JavaScript application aren't transferable.

# ¿ Apr 9, 2024 23:55

pentium166: Oct 15, 2012

zokie posted:

Are you saying you shouldn�t couple the i18n library to the application state of: the language being used by the user???

Is the functionality/layout of this one feature significantly different depending on whether it's in "easy mode" or not, or do you just have a simplified English toggle for one part of the application?

# ¿ May 14, 2024 22:20

Adbot: ADBOT LOVES YOU

# ¿ May 20, 2024 23:16

pentium166: Oct 15, 2012

go play outside Skyler posted:

I have never used an icon library that did not somehow shift icons up by a few pixels. I never understood why and it's driving me crazy. Any insight on this welcome.

This came up recently: https://tonsky.me/blog/centering/

There's a draft CSS property to (hopefully, maybe) eventually unfuck text vertical alignment! https://github.com/jantimon/text-box-trim-examples?tab=readme-ov-file#usage

Unfortunately, every single method of doing web icons is awful in its own way and better alignment control will only slightly improve one of them.

# ¿ May 15, 2024 23:32

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT