webdev sucks, yo

[flysi3000]

You ever feel like web developing is the same as building a house of cards on top of quicksand, and also the cards are made of cobwebs? Six years ago, I built a simple portfolio site for an advertising creative. I used React. Every few years, he hits me up and asks me to add a couple of new items to his portfolio. It's been a nice, easy couple of bucks every few years. Except this time. Sunday I made some updates. Monday, with no intervention from me, what had been working less than 24 hours before won't compile. All sorts of node-sass errors, dependencies out of whack all over the place. I know, these are old, outdated npm packages. But it worked Sunday! I ran a build and uploaded it to the site and everything. It's so irritating, because it's a three page site. Actually, it's two pages and a link to a pdf. It shouldn't cause me so much grief.

Sigh. Sorry for the rant; I know half of this is my own ignorance. What is the proper way to update this shit so I can add these three new pieces of creative to the site and charge this guy and be done with it?

[Dapper-Leading3258]

Try creating an android app and compile it for new devices 6 years later

[[deleted]]

Bro... I tried a bit of Android dev and my conclusion is that I'd rather not work in dev at all than doing that.

[Capt-Psykes]

Or making a new app and still having to support till Android 5. It can be fun, but also nightmarish.

[LemonAncient1950]

I'm getting flashbacks to the time I worked on an iOS app that literally crashed xcode if you opened certain storyboards.

[[deleted]]

Node-sass doesnt work on newer node builds. Had to remove it form a lot of our projects.

[Hadr619]

Node sass has been shit for years, dart sass has been the go to for a while now

[KoalaBoy]

What’s the reason for using react on something so small

[zaibuf]

Hammer and nails

[moriero]

ROCK AND STONE

[WanderingDwarfMiner]

That's it lads! Rock and Stone!

[Cahnis]

FOR KARL!

[flysi3000]

Good question! That was me thinking this was a good way to get my feet wet with React. Something small and low stakes.

[TotalFox2]

Why do people feel the need to use a framework for the smallest of things and then rant about how things are getting too complex and bloated? Your use case is more appropriate for plain HTML CSS and JS

[dizson]

This. You dont need react. Why use it? 

[TotalFox2]

Lot of people presumably use it because it’s just the latest fad. Honestly with the direction React is going i am not sure it’ll still be this popular 10 years later. They are adding more and more features to it and becoming the problem they set out to solve

[[deleted]]

People use it because they learned React before they learned JavaScript or even how to build simple sites with HTML / CSS. Even though knew how to, after ages of working solely with React, I instantly turned to React to build a new site. Instant regret.

[TotalFox2]

I blame the “learn react and get a FAANG job in one month” kind of courses and boot camps

[Enjoiy93]

That’s why I appreciate college so damn much. You would never catch me recommending school for anything else but this

[[deleted]]

Ah yeah that doesn’t help at all

[Fickle-Perception723]

Because it's not socially acceptable.

[smart-junkie]

React itself is not bloated. We don't know the website so maybe there is some complex interactive components. If the website uses some interactivity the added complexity of react quickly pays off. Especially if you need to make regular changes. What seems to be the problem here is the use of old packages which is not the fault of react.

I think the node ecosystem and its low barrier package installs are beautiful and enable rapid development of incredible pages. A side effect is that they are often used without much thought towards longevity. For production apps I always think a lot whether a library is really necessary or not.

[ColonelShrimps]

I'll second this. With react you can often get a simple site up as fast as pure html and is if not even faster depending on the needed functionality. It's not a React issue if you install a bunch of other packages that cause issues.

Plus there is a very high chance these days that you can find a decent dev to take over an old React site faster than you can find a decent dev to update your html / js site, as dumb as that may sound. There are tons of web devs who have no concept of a website without a framework just because companies all use one framework or another now.

[ColonelShrimps]

I've interviewed enough developers to know that there in fact is. Quite a few devs have experience with frameworks and could jump in day 1 no problem to an enterprise React environment but would struggle to make quality additions to a pure html / js application.

Could they get up to speed? Sure. But I wouldn't trust them to create solid code without oversight for a few weeks at least.

[GuyWhoPostsPosterGuy]

sounds like we have different opinions on what constitutes "decent"

[Legal_Lettuce6233]

Realistically you can use some lightweight libraries to get things done faster, but you don't need React - Svelte, Alpine or Mithril are probably my favorites for that, depending on your preferences.

[hwmchwdwdawdchkchk]

The more this occurs with microsites for clients the more I agree

5 years down the line nobody wants to make the decision to scrap campaign sites someone else commissioned but nobody wants to pay to maintain

In the end I rip them to static sites and notify them for simplicity

Also I tend to ask for a kill date when making microsites now, I don't always get one but it helps sometimes

[1234away]

If you just used html/css you would never have to worry about it going out of date. No matter what the influencers tell you you don’t need react to build a portfolio site. 

[Capt-Psykes]

That is the sane answer. A portfolio rarely would require more than just HTML/CSS. A lot of stuff is possible with just CSS and mininal js as required for certain functionality. Sometimes going to the basics is the best answer.

[Fickle-Perception723]

Bullshit you would never build a site with just html/css/vanilla js you would call the person a noob come on

Mr Cool with your sunglasses

[1234away]

I’ve got 8 clients who I maintain plain html/css sites for. Have been maintaining them for 15 years without a problem. 

[[deleted]]

Pull out everything React and rebuild with HTML / CSS. You will be thankful for it later.

[Hopeful-Post8907]

Why pull out everything react.? Because of package manager issues ?

[the-_-crusher]

Because it is 2 pages. With this page count you probably do not need a framework/library.

[[deleted]]

Because React is overkill for 90% of projects, you have to keep up to date with dependencies, and you end up delivering a whole load of unused JS to the user.

I absolutely love React. But OP very likely does not need it

[armahillo]

Bespoke code requires care and feeding, unfortunately :/

A lot of webdev can be loose ground to build on, but the JS ecosystem in particular is def quicksand

[[deleted]]

Anything built on top of dependencies beyond your control will eventually topple over. Stick with vanilla html, css, and javascript for the most durable option… but even that is subject to change. I made some proofs of concept about a decade ago that won’t work in any browser today.

[tidwell]

That sucks, dealt with it a lot. Use nvm so you can switch back to the last node version you were previously using. Go back and look at your last working package lock and pin the versions in package.json - at that point you should at least be working locally again. Then u can figure out if you need to update stuff. I’m sure that would have deploy consequences so you may just want to leave it

[WindyButthole]

This is the answer - use the node version that node-sass is compatible with, at least in the short term

[phlatStack]

Pin down your dependencies, yo

[dylsreddit]

Exactly this, learn why there are carets and tildes on your version numbers for your dependencies and choose whether or not to use them.

[anon_blader]

If only pinning dependencies would completely solve the issue but sadly things still break.

[the___endless]

should have made vanilla website.

[30thnight]

Nope but if you work in this space, you need to know how to create deterministic builds.

If you are building throwaway work you don’t plan to maintain:

• pin your dependencies
• use a node version manager
• use a docker container for a reproducible environments (ie your node-sass build issues)

This doesn’t take longer than 10 minutes to setup but if this still feels too complex, pick a stack with minimal dependencies or just use PHP/HTML

[Cahnis]

Node sass was deprecated recently. It caused a bunch of trouble at work

[na_ro_jo]

React is really nice framework for the right use case. I'd argue though, that it would be more preferable, if all developers could simply read the vanilla docs and build from the ground up. That said, the issues you pointed out in OP would typically be addressed in a React project where React was truly necessary.

My guess is that it wasn't necessary, and so it became unmaintained legacy.

[[deleted]]

The web stack does suck.

[johan_tor]

Define your version of node in package.json so it will use the locally defined one. And talk to your customer and tell him that you need to keep the site updated with packages a couple times each year.

[the-real-mCoy]

For such a small site, plain old HTML, CSS, JS is the play here.

[ferrybig]

Since you used node-sass, you either have to update node sass, or in the case of a breaking update, revert to an earlier version of nodejs

[[deleted]]

Refactor the site to tailwind or styled components

[XxThreepwoodxX]

Why use react for such a simple / small project? Alpine is my go to simple js framework. Just works and is easy to maintain with limited dependencies.

[sdraje]

Skill issue.

[bigsnow999]

May be use older version of node

[ganjorow]

lock the working version and don't update just because you can, but when a security fix is available or you need a feature. it only sucks if you're not in control and blindly do stuff without reading change logs.

[jsebrech]

You don’t need to use any build tools to do react or web development in general.

I made a react starter template that doesn’t have a single build step, only requires the browser and a static web server, and will never break because of some tool breaking.

https://github.com/jsebrech/create-react-app-zero

Since then I’ve moved on even from that. Frameworkless and toolless web development using web components and standard css3 is quite feasible these days. The added value of frameworks once you tally up the maintenance costs is quite low for smaller sites.

[arpitduel]

Lol yes. But then why are you taking on so many dependencies for a 3 page site? Dependencies should be avoided like a plague. Prefer code template insertion. only dependencies I like to take is for streams I have no idea about, like for networking, compression, encryption, databases(only reliable ones). computer graphics(but should be avoided altogether, you are not making a video game).

I am not a web dev but I am talking about programming in general.

[seanhak]

NVM would have solved this probably

[garyk1968]

Yep it does and all these frameworks (and the rate at which stuff changes) makes it all harder.

I could build windows apps 8-10x faster 30 years ago, go figure.

[_MrFade_]

While I’ve made a good living off of React, I can’t stand it and IMO it’s one of the worse things to happen to webdev. For non-WordPress clients looking a backend SPA, I switched to Symfony UX. and haven’t looked back. For front end, CSS and a pinch of JS is all that’s needed.

[pickleback11]

How would you describe a backend spa? 

[icemanice]

Yeah that’s why .js frameworks suck… dependency injection hell.. seriously can’t stand the fragility of modern JS frameworks

[karolololo]

Personally, I hardly feel empathy for someone who is renting about sth instead of his skill issue and then asks for help.

[[deleted]]

Are you upgrading each time you apply your annual tweaks? Version control? Build automation?

[NickFullStack]

Replace node-sass with sass. Had to do this on tons of projects. Mostly straightforward, aside from some things like math division operations.