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

«‹›235 »

Chas McGill: Oct 29, 2010; loves Fat Philippe

I have a budget from work to spend on learning materials, courses etc. Anyone done any interesting courses on AI/ML or visual programming stuff?

# ? Feb 9, 2023 20:57

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 14:37

smackfu: Jun 7, 2004

TIL that Formik is apparently abandoned and everyone is using React Hook Form now.

How do people keep us with this stuff? I don�t do much greenfield development at work but it would be nice to have the stuff that is be current.

# ? Mar 4, 2023 14:41

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

I honestly just gave up remembering and I do research for every greenfield project.

# ? Mar 4, 2023 14:43

abraham linksys: Sep 6, 2010

in one codebase we're stuck on a bunch of old dependencies cuz we're stuck on redux form which is also more or less abandoned

after two years of discussing this problem and not being given time to solve it we're finally getting some stuff ported over to react hook form but we had to kind of get our security team to put the fear of god in our product team on our behalf to get this moving. it's relatively unlikely the dependencies we're stuck on would have major security issues but it's certainly possible, so we had the security guys go "if you don't update this in six months our automated systems will prevent further deploys until these dependencies are upgraded so you'll be forced to one way or the other"

# ? Mar 4, 2023 16:54

KillHour: Oct 28, 2007

Speaking of React Hooks, I'm going to quote my post from the programming questions thread because I was sick of context hooks needing so much boilerplate every time you want to make a new one. So I made a package to abstract it away and I finally got it working :toot:

KillHour posted:

I stepped away from this for a while and came back to it today and I think I cracked it.

By making the reducer a class that implements an interface instead of a function, I was able to split T away from the types I wanted to hardcode.
TypeScript code:
// Array Reducer
interface ArrayReducerMeta<T extends unknown[]> extends ReducerMeta<T> {
  actions: 'Replaced' | 'Set' | 'Added' | 'Removed' | 'Cleared'
  flatType: T extends Array<infer U> ? U : never
  indexType: number
}

export class ArrayReducer<T extends unknown[]>
  implements Reducer<T, ArrayReducerMeta<T>>
{
  reduce: ReduceFunction<T, ArrayReducerMeta<T>> = (data, action) => {
    switch (action.type) {
      case 'Replaced': {
        data = castDraft(action.data)
        return
      }
      ...
    }
  }
}
Using a built-in generic reducer works like I want it to now:
TypeScript code:
import ContextProvider, { MapReducer } from 'abstract-context'

export const NodesProvider = new ContextProvider(new Map<string, NodeData>, new MapReducer)

export default function FlowContext() {
  return (
    <NodesProvider.Component>
      //Stuff
    </NodesProvider.Component>
  )
}
So much easier now.

It's also simple to declare a custom reducer:
TypeScript code:
type ColumnStore = Map<string, [ number, Column ][]>

interface ColumnsReducerMeta extends ReducerMeta<ColumnStore> {
  actions: 'Replaced' | 'Set' | 'Removed' | 'Cleared'
  flatType: Column
  indexType: [string, number]
}

class ColumnsReducer implements Reducer<ColumnStore, ColumnsReducerMeta>
{
  reduce: ReduceFunction<ColumnStore, ColumnsReducerMeta> = (data, action) => {
    switch(action.type) {
      case 'Replaced': {
        data = castDraft(action.data)
        return
      }
      case 'Set': {
        //Complex logic
        return
      }
      ...
    }
  }
}

export const ColumnsProvider = new ContextProvider(new Map() as ColumnStore, new ColumnsReducer)
And typescript properly handles checking the reducer function to make sure it matches the meta type declaration.

Also, I added something new!

Let's say I want to make a composable component that I plan on reusing - such as a dialog box - and I know what reducer it needs, but I don't know what the datatype will be. I added a helper type called ReducerContext that lets you plug in a generic reducer and get the correct context item to pass as a property.
TypeScript code:
import React, { useContext } from 'react'
import { LiteralReducer, ReducerContext } from 'abstract-context';

interface ListProps<T> {
  context: ReducerContext<LiteralReducer<T>>
  values: Map<string, T>
}

export default function List<T>(props: ListProps<T>) {
  const { values, context } = props
  const selection = useContext(context)
  
  //Do stuff with selection
  ...
Then you can just call it like so
TypeScript code:
const NewFlowContext = new ContextProvider(undefined as Table | undefined, new LiteralReducer)
...

<SelectionList
  values={sources}
  context={NewFlowContext.context}
/>
I'll probably clean up the code a bit and upload it as an npm package, just in case it helps anyone else. It was a huge pain in the rear end but I feel a lot better about how much spaghetti it's going to cut out of my actual application. Also, it taught me a LOT about typescript.

Edit: I do wish there was a way to have the type declaration for `reduce` inferred since it's enforced by the implemented type. It's redundant to say `ReduceFunction<foo, bar>`. If anyone knows how, let me know.

# ? Mar 4, 2023 19:10

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Whether you use React, Vue, Angular, Svelte, Solid, etc, everything is just rendered on the Server anymore, right?
Otherwise I don't see how to make pages with dynamic content without Google bitching about CLS.

Oh, you broke stuff up into microservices? Great, wait until all dozen of them are done before rendering a single pixel because content might move afterwards.
Oh, now that's too long of a wait? Sorry have less content I guess :shrug:

# ? Mar 24, 2023 15:25

prom candy: Dec 16, 2005; Only I may dance

The popular thing is to server render and then "hydrate" on the client. Lots of apps are still client rendered SPAs though. If your whole app exists behind a login screen you don't need to think about SSR.

# ? Mar 24, 2023 16:47

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

prom candy posted:

The popular thing is to server render and then "hydrate" on the client. Lots of apps are still client rendered SPAs though. If your whole app exists behind a login screen you don't need to think about SSR.

It doesn't require a login, but there is a bigger and bigger push for personalized content. So I can't even do the thing where I block out space while the service gets called, because sometimes the content won't even be there.

# ? Mar 24, 2023 18:01

prom candy: Dec 16, 2005; Only I may dance

The Merkinman posted:

It doesn't require a login, but there is a bigger and bigger push for personalized content. So I can't even do the thing where I block out space while the service gets called, because sometimes the content won't even be there.

You can fully server render a site with personalized content though.

# ? Mar 24, 2023 20:38

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

prom candy posted:

You can fully server render a site with personalized content though.

Yeah that's what I was saying. Nowadays the new hotness is server side rendering. What's old is new again.

# ? Mar 24, 2023 23:30

prom candy: Dec 16, 2005; Only I may dance

The Merkinman posted:

Yeah that's what I was saying. Nowadays the new hotness is server side rendering. What's old is new again.

Yeah but it's a synthesis of old and new. It used to be a pain in the rear end if you had highly interactive sections in your server rendered app. Either you'd have a bunch of duplicate templates between your .erb/.php files and like Handlebars templates or whatever, or you'd be writing tons of imperative spaghetti jQuery, or some awful combination of both. It's why SPA caught on in the first place. Now your server-rendered template is also a React or Svelte component and once it's done rendering from the server you can go hog wild. I think people who are saying we're just back where we were ten years ago because SSR has gotten good have wildly missed the point.

# ? Mar 25, 2023 03:07

smackfu: Jun 7, 2004

I swear, a lot of it is old backend devs who never learned SPA and are just going �see, it was right to ignore modern stuff.�

# ? Mar 25, 2023 03:43

abraham linksys: Sep 6, 2010

smackfu posted:

I swear, a lot of it is old backend devs who never learned SPA and are just going �see, it was right to ignore modern stuff.�

i mean, to backend devs, the net win is it got everyone off the paradigm of having endpoints that returned html. now even if you have a server-rendered app it's probably not going to be a rails app with controllers using ERB templates, its gonna be a next.js app or something consuming service(s) returning json

memories of when i worked at an ecommerce company in 2015 that was a rails shop and the only divide between frontend and backend devs was that the backend devs refused to write css :allears:

e: just scrolled up and realized prom candy basically beat me to this point, lol

# ? Mar 25, 2023 03:53

prom candy: Dec 16, 2005; Only I may dance

smackfu posted:

I swear, a lot of it is old backend devs who never learned SPA and are just going �see, it was right to ignore modern stuff.�

Yeah whenever I see those takes I assume they're coming from people who have never worked directly with a designer.

# ? Mar 25, 2023 04:45

fsif: Jul 18, 2003

I've worked with a couple of old head devs that have been managers for so long they weren't really coding during the JAMstack takeover. Definitely enthusiastically agree with the overall sentiment of the last few posts, but there are certain pain points of 2023 web dev that have been awkward to try to explain.

"Oh yeah, uh, Vercel actually wants $100/mo to let us password protect this site."
"Yeah uh, kind of hard to make a good staging environment in Contentful, actually."
"Right, so, it's actually kind of tricky to pull nav elements from the CMS."
"So turns out we really can't do the user permissions we used to do in WordPress."
"Yeah I don't know, Prisma won't let us add anchor links."

# ? Mar 25, 2023 15:42

prom candy: Dec 16, 2005; Only I may dance

fsif posted:

I've worked with a couple of old head devs that have been managers for so long they weren't really coding during the JAMstack takeover. Definitely enthusiastically agree with the overall sentiment of the last few posts, but there are certain pain points of 2023 web dev that have been awkward to try to explain.

"Oh yeah, uh, Vercel actually wants $100/mo to let us password protect this site."
"Yeah uh, kind of hard to make a good staging environment in Contentful, actually."
"Right, so, it's actually kind of tricky to pull nav elements from the CMS."
"So turns out we really can't do the user permissions we used to do in WordPress."
"Yeah I don't know, Prisma won't let us add anchor links."

We definitely traded one set of headaches for another over the past ten years. There was a lot about Rails that was really, really good. It was just that after we firmly entered the smartphone era users' expectations for design and interaction went way way up and having apps that were still based 100% around full page refreshes didn't cut it anymore. None of the new metaframeworks are as comprehensive as Rails but I think that can also be a good thing as some of the surrounding tools move pretty fast and it means you're not locked into, for example, Prisma if a better ORM comes out.

The front-ends I was building with Rails and jQuery to satisfy the designers on my team right before React and the SPA era firmly started were spaghetti nightmares and writing code defensively to make impossible states impossible was a ton of work. I think anyone saying "lol we're going back to 2012" just never had to write anything like that.

# ? Mar 25, 2023 16:09

reversefungi: Nov 27, 2003; Master of the high hat!

Hey all! I'm looking to building out a full fledged parametric equalizer visualization in the browser as part of a work project. Think something like the "EQ Eight" in Ableton Live:

Ideally I'd be able to drag and drop points in the chart and have different types of filters (notch, band pass, high shelf, etc.). Is just using plain canvas the best option here? Are there alternative JS graphics/visualization libraries I should be considering? I wouldn't be implementing any actual audio processing/DSP, this would be just purely visual.

# ? Apr 3, 2023 20:04

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

The canvas element will give you most flexibility, though you could pull it off with SVG, or even HTML if you feel subjecting yourself to misery.

Considering that you are going to draw curves, probably Bezier ones, canvas and SVG have clean APIs for those.

There are some libraries out there that bridge those two so you don�t even have to commit to one. Raphael.js or P5.js for example.

gbut fucked around with this message at 12:19 on Apr 5, 2023

# ? Apr 3, 2023 23:43

reversefungi: Nov 27, 2003; Master of the high hat!

Thanks, I will definitely give those libraries a look! I know some of our other intensive visualizations are done with raw canvas, so that's the direction I'm leaning, but also want to make sure I don't rule out any alternatives. I considered something like d3.js or similar charting libraries, but I think that's going to more trouble than it's worth when it comes to things like combining curves (e.g. having a wide bump in the low end with a small notch for a specific frequency).

There's also tons of graphics libraries more suited to game applications, but am I right in assuming those might be overkill?

# ? Apr 4, 2023 19:07

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

It depends on what you're trying to achieve. I think it's going to be dealing with beziers mostly, so reading upon those, like polynomial orders/types of curves and how to achieve continuation are the most helpful subjects. Nothing too complicated, I assure you. The rest you can draw in a dedicated software and overlay as an image, translate, etc. to get that feel, so I wouldn't include a game-focused tiling library just for that, for example.

And, yeah, d3.js is overkill, to put it mildly. I love the hell out of it, but I'd guess that's not what you're looking for.

# ? Apr 4, 2023 21:49

reversefungi: Nov 27, 2003; Master of the high hat!

Thank you, you've given me a lot of topics/terms to research. Looks like I'll need to do a lot more digging into bézier curves. Appreciate the help!

# ? Apr 6, 2023 18:45

duck monster: Dec 15, 2004

Man, I *really* like Svelte, like, a lot. And as someone that generally, and perhaps irrationally, detests JS, thats high praise from me.

But its hard to escape the conclusion that the people that write these frameworks live in enclosed boxes. Most of the instructions on the net keep refering to sveletekit, ok so far so good, its got a few neat addons like routing that I like.

But sveltekit *really* wants you to write its backend in their weird backend framework, and yeah, I dont *do* backend JS. Our company has a significant investment in Python FastAPI and Django* (We do data science, Python is the way) and I just want to have this thing poo poo out a nugget of JS I can upload into cloudflare and *not* be backend. Apparently it can do it, as to how, I dont loving know.

* And an absolutely moronic piece of software written in PHP that acts as a TCP server that I protested *hard* about buuuuut the boss seemed to think the new guy was smart therefore..... The less said about that the better.

# ? May 3, 2023 03:10

prom candy: Dec 16, 2005; Only I may dance

SvelteKit is meant to be server rendered but they do have this escape-hatch https://kit.svelte.dev/docs/single-page-apps

But if you just want an SPA I'm not sure if you want SvelteKit. If you want routing there's probably a package you can use with plain Svelte (I haven't spent enough time with non-SvelteKit Svelte to know)

# ? May 3, 2023 05:41

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Is there a reason you can't use SvelteKit's static adapter? https://kit.svelte.dev/docs/adapter-static

# ? May 3, 2023 10:56

duck monster: Dec 15, 2004

ynohtna posted:

Is there a reason you can't use SvelteKit's static adapter? https://kit.svelte.dev/docs/adapter-static

I havent been able to get that thing to make its URLs work properly.

# ? May 4, 2023 03:19

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

duck monster posted:

I havent been able to get that thing to make its URLs work properly.

Ah, that's annoying.

I recall that I had to do ~10 minutes of jiggling the base path and trailing slash configuration early last year when I setup my projects to get them working. It's been reliable for me since then, producing a tidy static bundle of various pre-rendered, pre-rendered then hydrated, and fully SPA pages that can be hosted "server-less" on Github pages and captive portals.

I do know that a bunch of new work on SvelteKit's relative URL management has happened recently, such that Rich Harris now demonstrates static sites running on IPFS, where the bundle can't now it's deployment address ahead of time. But this post is already getting dangerously close to "works on my machine - maybe try again?" levels of unhelpful.

# ? May 5, 2023 13:24

prom candy: Dec 16, 2005; Only I may dance

Any early adopters of RSC watch your poo poo:

https://twitter.com/tomus_sherman/status/1654211227172716545

https://twitter.com/basst85/status/1654394279790346242

# ? May 5, 2023 23:12

fsif: Jul 18, 2003

Good lord.

I'm collaborating with a colleague on a Next project now and I was trying to argue we shouldn't use the app router because it was still in beta and then yesterday happened.

# ? May 6, 2023 00:44

prom candy: Dec 16, 2005; Only I may dance

fsif posted:

Good lord.

I'm collaborating with a colleague on a Next project now and I was trying to argue we shouldn't use the app router because it was still in beta and then yesterday happened.

I saw that but then I also saw Dan Abramov say server actions are still in alpha? So now NextJS with RSC is "ready for production" but server actions, which afaik are the only way to do mutations with the app router, are in alpha? I've been a big React dude for a long time and even a Dan Abramov fan but this poo poo is kind of insane.

Related:
https://youtu.be/Zt8mO_Aqzw8

# ? May 6, 2023 05:10

abraham linksys: Sep 6, 2010

I've been pretty unimpressed with RSC/app router stuff, we still haven't adopted it in anything.

Our site was rebuilt from a big React+Redux custom-SSR hellscape to a Next.js site that heavily utilizes getServerSideProps() and has very little client-side interactivity (other than, like, signup forms). I'm hopeful they'll figure this poo poo out in Next.js before deprecating the gSSP side of things, but I don't really know what else is out there in this space.

I'm not really sure how much of the server actions stuff we need, because we already have a backend API? I don't really see the point unless you really, truly want to write a PHP/Rails app again without a separate backend, and if you do that's great and I do think that is a missing piece in today's web app world, but I also think it's very far away from the problems I need to solve interacting with a big ol' microservice mesh. Maybe you can replace a backend-for-frontend layer with it, as long as you don't have any use case for that layer being available to another client app (like a mobile app).

I used to think there were enough React frameworks out there that even if Next.js became unusable we'd have some options (Remix, etc) but now it seems like everything is consolidating around React Server Components, and I'm just not sure they're going to work out long-term. But I can't figure out what competition is viable at this point, really.

# ? May 6, 2023 17:54

abraham linksys: Sep 6, 2010

prom candy posted:

The front-ends I was building with Rails and jQuery to satisfy the designers on my team right before React and the SPA era firmly started were spaghetti nightmares and writing code defensively to make impossible states impossible was a ton of work. I think anyone saying "lol we're going back to 2012" just never had to write anything like that.

we still use Optimizely Web at work (just a loving disaster of a product, jesus christ) and it's pretty hilarious because it is just like what writing 2011 frontend code was. rendered HTML (now coming from our React SSR app instead of Rails) and then apply a bunch of JavaScript on top. it's also written by contractors making zero money and constantly catches on fire and of course the engineers who are paid lots of money have to take time out of their days to fix it, because we are too cheap to just hire enough engineers to allow us to write a/b tests using actual productionized code instead of this garbage :negative:

# ? May 6, 2023 17:57

fsif: Jul 18, 2003

prom candy posted:

I saw that but then I also saw Dan Abramov say server actions are still in alpha? So now NextJS with RSC is "ready for production" but server actions, which afaik are the only way to do mutations with the app router, are in alpha? I've been a big React dude for a long time and even a Dan Abramov fan but this poo poo is kind of insane.

Related:
https://youtu.be/Zt8mO_Aqzw8

Yeah I sent that tweet to my colleague and he rightly clowned on me for not realizing that was a feature in alpha :v:

I'm in the exact same boat as you, though; I've been something of a React and Next fanboy for years and this is the first moment where I'm really starting to question how often I use it going forward.

I work for an agency that makes award bait websites/experiences and I don't currently see how server components is going to meaningfully improve our dev experience or our final products (outside of the admittedly not-so-small benefit of finally being able to easily pull in CMS data into layout components). We ordinarily have so many animation and page transition states that we're going to be writing "use client" at the top of drat near every component anyway.

# ? May 6, 2023 18:35

Roadie: Jun 30, 2013

At this point, the whole "server actions" thing just seems like an overcomplicated, more error-prone version of what Remix already had for a long time.

# ? May 6, 2023 21:50

prom candy: Dec 16, 2005; Only I may dance

fsif posted:

Yeah I sent that tweet to my colleague and he rightly clowned on me for not realizing that was a feature in alpha

I mean I can't blame you for not realizing seeing as it was all over Vercel promo materials this week.

# ? May 7, 2023 02:26

prom candy: Dec 16, 2005; Only I may dance

Roadie posted:

At this point, the whole "server actions" thing just seems like an overcomplicated, more error-prone version of what Remix already had for a long time.

I think there is some benefit to them. In remix you can't do server side data loading in a shared component. RSC addresses that. But I'm not sure if it's the best way forward.

# ? May 7, 2023 02:27

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Is anyone publishing two or more discreet packages from a single monorepo? If so what are you using, and do you regret doing things this way?

# ? May 12, 2023 16:39

novamute: Jul 5, 2006; o o o

Lumpy posted:

Is anyone publishing two or more discreet packages from a single monorepo? If so what are you using, and do you regret doing things this way?

Yes, nx, and no

# ? May 12, 2023 21:55

kedo: Nov 27, 2007

Anyone have a recommendation for an accessibility testing consultancy/freelancer/etc? In my freelancing days I worked with a couple of firms who had dedicated accessibility testers on staff and their knowledge and attention to detail when QAing sites was super helpful. I'm looking to achieve something similar with the company I'm at currently, but we don't have the budget to hire someone full-time in that role, so I'd like to shop it out if possible. Any suggestions? US based is preferable, but I'm not too picky.

Feel free to PM me if you have a freelancer and don't want to share their info publicly.

# ? Jun 21, 2023 17:30

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

kedo posted:

Anyone have a recommendation for an accessibility testing consultancy/freelancer/etc? In my freelancing days I worked with a couple of firms who had dedicated accessibility testers on staff and their knowledge and attention to detail when QAing sites was super helpful. I'm looking to achieve something similar with the company I'm at currently, but we don't have the budget to hire someone full-time in that role, so I'd like to shop it out if possible. Any suggestions? US based is preferable, but I'm not too picky.

Feel free to PM me if you have a freelancer and don't want to share their info publicly.

Where I'm at, we've used Level Access.

# ? Jun 21, 2023 18:07

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 14:37

kedo: Nov 27, 2007

Thanks! I'll take a look at that.

# ? Jun 21, 2023 18:15

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

«‹›235 »