Modern web frontend is giving me a huge headache...

Gazillion frameworks, css preprocessors, transpilers, task runners, webpack, state management, templating, Rxjs, vector graphics,async,promises, es6,es7,babel,uglifying,minifying,beautifying,modules,dependecy injection....

All this for programming apps that happen to run inside browsers on a protocol which was designed to display simple text pages...

This is insanity. It cannot go on like this for long. I pray for webasm and elm to rescue me from this chaos.

I work now as a fullstack dev as my first job but my next job is definitely going to be backend/native stuff for desktop or mobile. It seems those areas are much less crazy.

back to devrant, yay!

closed my account when i entered a really nice company, but after a year it was taken over by another one that was not-so-good at all, started working for another startup and, BOY, i really didn't miss ranting about work, but now i NEED a place to let this all up, little by little, somewhere, before my brain melts

current startup is one of those founded by rich dudes who had an "amazing" idea that, as time passed, turned into a monster that not only eroded the team from inside, but also made us see how spoiled the bosses are

I shit you not. This this a job qualifications qualifications entry level on LinkedIn.

7+ years working as part of a development team and with the following technologies:
Node.js Typescript and Java-based, microservice-driven applications using Spring Boot or similar framework
RESTful API design / microservice architectures
MongoDB or any other NoSQL DB
Message queues e.g. RabbitMQ, Kafka etc.
Modern MV*(MVC, MVVM, etc..) frameworks e.g. React, Angular, Vue etc.
JavaScript and design patterns, CSS and HTML
Modern CSS and view libraries e.g. RxJS, Angular Material, Typescript, JS ES6 etc.
Unit and UI testing using third party tools e.g. Jest, Cucumber, Groovy & Spock, etc.
Bachelor's degree in computer science or related field

Be careful when you go down the rabbit hole of creating custom observables (rxJS).

I wasted half a day just to find out that there are hot and cold observables and that the whole time I tried to use the wrong one.

It finally works. 01:00 in the morning.
My boss will be proud when he pulls the changes and the code looks completely fucked up (clean, well structured code, but he doesn't really know observables).

Now something different: Sleep. Cya.

Why the shit is WebDev getting so complicated? It’s like everyone is just trying to show how smart they are instead of finding the simplest way to solve a problem. Or maybe I’m just too dumb to figure out what all this new shit does.

THE TALE OF THE CRAZED VISIONNAIRE

Once upon a time some masochist woke up and snorted a gallon of glue. "I NEED PAIN", he shouted, and then proceeded to hammer down his own cock over an iron anvil, in an effort to uncover the most intense pain a human could experience. And yet even such a punishment was not enough, for our pain-starved hero thirsted for even higher heights. "This hammering can't satisfy my spirit", he proclaimed; "I shall find ever greater pain than what little solace these tools can provide, but it's much too hard a task for a single mortal to complete in one lifetime. And lo, I will gather around me the bravest and uncover the intense sorrow no human has ever experienced before!". And for his journey he found himself a loyal fellowship, all striving to find the ultimate pain a mortal can experience.

"But who could be crazy enough to follow a glue-fueled schizo who hammers their own genitals?", you might stupidly ask. But why, the JS community of course.

The web is just a fucked up place. Anytime i have an idea and wanna slap together an mvp, i always feel like web standards are just made by people who have no professional training and once every year come up with some bullshit so they dont get fired.

Figure 1: cors
You wpuld think that setting "access-control-allow-origin" to * would let, well, * through, like in every other field of programming, but no, make sure all 97 other headers match or you will just get a cors error. The server expects application/json and you didnt specify that? Fuck you, have a cors error. Both express and flask have specific packages addressing this one problem so i guess im not the only one.

Figure 2: frameworks
Remember reactive programming? Remember rxjs? No you dont because all frameworks reimplement rx with shadow dom fuckery. Did you know you can have your fucking templates with 5 lines of rxjs code? Amazing huh?

Figure 3: php
It still exists for some reason.

typescript, I HATE you!

ME: Trying to extend Subject and override Subject.subscribe(PartialObserver<T>)

ME: export class MySubject<T> extends Subject<T> {
subscribe(obs?:PartialObserver<T>): Subscription {
return super.subscribe(obs);
}
}

ME: compile
TS: Compilation error! No such method to override!

ME: load the app -- ERROR

ME: recompile
TS: Compilation error! No such method to override!

ME: load the app -- works perfectly

:confusedjackie:

Make up your mind! So is that class compileable or not???
If not -- how the fuck does it work then???
If yes -- why the fuck do you yell in my face with all those errors???

It's been a year since I first entered the world of development.

Let's see what I have accomplished so far:

Learned:
Java, J2EE, Node.js, Python, Django, Android, Angular, html/css, Rxjs, RxJava, Linux, MySQL, Mongodb, Docker, Heroku, AWS

Projects:
All unfinished.

Job:
Still working in IT security goddammit.

Fucking hell. Why am I so good at learning but shit at working?

Every time I have to switch from backend development to frontend and deal with rxjs Observables, I feel like a spider crafting a web, so that no matter at which string the fly/event happens, the right other strings will be pulled and I will get a nice notification.

No wonder it's called WEB-development

It seems like I'm going on an assignment to a company working with Angular. Reading through the documentation I just want to ask all Java developers to get their greasy hands out of JavaScript. It feels like GWT all over again with Google reinventing core JS technologies just so that it looks like Java. Dependency injections? Observable wrappers? RxJS in general? WHAT IS THE POINT? Why can't I do this in a way adhering to web standards? Why can't I simply use fetch() or axios or whatever? Why can't you support reactivity without forcing me to write more boilerplate than I had on my central heating boiler? I just want to code and not be forced to discover what Google developers think web should be like.
Please, let me out of this hell.
Fortunately, it's not gonna be a long assignment.

Trying to learn Angular and reactjs, reading up the tutorial or documentation...

Why the hell are there ten million more shit I need to look at first? (such as rxjs, Babel, webpack... and whatever the fuck they are)

Now am I supposed to master those ten million tools/libraries before I can proceed?

Of course there is no ten million but mentally it's no difference. I'm just fed up with this.

seriously considering migrating from code to selling snacks, becoming a barista or whatever

some people just drain all my motivation to code even personal projects

feel like i'd be happier, and less stressed, selling t-shirts by the beach 🫠

Angular dosent work as well in Firefox somehow...
The navigation is choppy, observables are slow.
I think anything to do with rxjs dosent work as well.
Chrome works great even on cell phones.

I don't like React Redux. Big and lots of boilerplate code just to get working. I prefer RxJs and Context API.

But between Context and RxJs, I will choose RxJs for global state management

Fuck rxjs

at one point in time, i had to work with a really junior backend team, they used javascript and neo4j as the database for an in-house developed community forum because "graph databases made sense" in the eyes of their tech lead

turns out that the team struggled quite a bit with it, and had some "unexpected complexity" problems when i asked them to add filters and sorting on the post endpoints

in the end, the "solution" they gave me was an endpoint that spewed ALL the posts so i could sort it in the front end

had they kept the same relational database they were using for the rest of the whole project, i'm quite sure it wouldn't take much to implement that (and their architecture was really performatic)

as a side project i rebuilt the whole forum in a weekend, but using postgresql as database, and it worked nicely, i even added some unit tests just for fun

gave myself a really big slap in the face after that, though

Update in earlier rant about work.

So I've basically made an flux store using Rxjs. Using symbol's as tagret data and an action. I asked my boss and another work colleague to do code review on the new system as I'm not sure their like it or understand what i was doing.

Passed fined.

2 weeks later i get a comment in some code that implement in basically asking whats all this and what is it doing.

-_- it's called really tidy shorthand code aha

To anyone with good knowledge of RxJs:

Should I be careful how many subscriptions I have open at a time? I'm specifically thinking about memory usage.

While obviously it's more, does it make a huge impact on memory usage, if I have 20 subscriptions active, compared to 2?

Python is my wife, Elixir is my sexy girlfriend. While I love my life, the gf presents me what my wife cant. ReactJs/Rxjs is a lovely classic porn. The question is: what the fuck devRant is here???

When you finally upgrade to RxJS 6 and everything breaks coz everything has changed.

Why the heck is this rxjs so hard to understand.

So I was updating rxjs tonight .. now I can't sleep because I'm thinking why they changed observable.of() to of()
How this can make any sense

question to the web devs around. What is up with all these js frameworks these days ? backbonejs rxjs moustache js reactjs angular js knockout js ... do you guys wake up and decide to make another framework or is there a reason behind ALL of them ????

RxJS is so ducking weird. Its ducking my brains out 😒😒

Arghhh! Reactive programming took away all the fun, but oh well, we can be more lazy now. Functional programming just made a big come back this year.

Voice call with the whole dev team

Former team leader: Yeah, basically we stopped using RxJS because it ended up being too complicated, every minor problem required so much code to solve :(
IHateForALiving, extremely loudly: WELL WELL WELL, GOOD FUCKING MORNING, SUNSHINE

💧

There was a 1 second delay when loading images on home page with a bunch of hot model babes in a masonry grid

Why? 💧💧

Maybe pagination is fucked. Lets reduce it from 100 per page to 10.

Still same shit.

What do you think why this could be?

Comment below 👇 right now

(The images im loading are just dummy images from unsplash)

I tried using rxjs. Observables. Flatmaps. Custom array push. Array loop. Change detection to update UI. Chatgpt.

Nothing

Every time i switch tab and come back then theres another second of delay with blank page before content appears

Wtf???

Turns out -- unsplash api was returning me 6K to 8K Fucking images. HEAVY. HEAVY FUCKING IMAGES. and i was apparently displaying 6000x8000 px images, 20 times per page. Thats a lot of fucking pixels! I reduced it with ?w=500 in unsplash api at the end and magically there is no delay now and everything works in an instant.

Fuck off

Rant/question:
httpDoSmth1().subscribe(x =>
...then(y =>
httpDoSmth2(x).subscribe(z =>
//do smth with z
return z
)
)
)
Isn't this (not my code) callback hell all over again? The 2. http call expects results from the 1. http call. I feel like this could be solved cleaner using async await/switchMap/etc. ... but not like this.

So.. in the AngularJS we had Promises and Deferred objects and in Angular we have RxJS and Observables and Subjects... and I spent last few hours googling for something like "deferred equivalent in angular" with no useful result at all, because, well, "Subject" is not the first damn thing to come to mind when looking for "Deferred" synonyms.. who the hell is making up these names?
It's like "well, since this is a new framework, it should also have completely different(and unrelated) names, so that it does not resemble the old one at all".

"rxJs". Ok. But why? Why suffer?

Trying my hand on Angular with Ngrx. Wish me luck.

Angular and is best friend RxJs are too over engineering and far from the concept of 'keep it simple, stupid'

But just a moment they're both use typescript to design there interfaces ... maybe that is the fucking reason for that !

Finally got the data from my API and displaying in my app using RxJS, so I work on getting user data read in after passing through an SSO page. Now that works but the original stuff doesn't.

Angular test for a company: they are asking me to implement a filter on a table using rxjs. Me, no real rxjs experience, set up complete new page, new table with angular material and a working filter. Lol, ductape solution successful!

I'm having problems understanding ngrx (or simply rxjs...), once again.

I have a feature state called "World".
This state has three Actions: Init, InitSuccess and InitFailure.

Also I have other isolated feature states like "Mountains", "Streets", "Rivers".
They have actions like this and corresponding effects to fetch data: Load, LoadSuccess, LoadFailure.

Now I would like to add an effect to WorldActions.Init, which will dispatch Mountains.Load, Streets.Load, Rivers.Load one after another. So ideally an action log would look like this:

1. World.Init
2. Mountains.Load
3. Streets.Load
4. Rivers.Load
5. Mountains.LoadSuccess
6. Streets.LoadSuccess
7. Rivers.LoadSuccess
8. World.InitSuccess

Or when an error occurs:

1. World.Init
2. Mountains.Load
3. Mountains.LoadFailure
4. World.InitFailure

How could an effect pipeline for that look?
How can I dispatch World.InitSuccess only after all LoadSuccess-Actions have happened?
Or am I still trying to implement ngrx in a wrong/bad way?

PS: The reason I am putting everything into separate feature states is because "Mountains" etc. are standalone features on their own. Only in the context of a "World" they belong together. For this reason I can't create a monstrous effect "World.Load", without producing redundant code.

Modern Web Developer
(To the tune of "I Am the Very Model of a Modern Major-General" from Gilbert and Sullivan's "The Pirates of Penzance")

I am the very model of a modern web developer
I’m quite fluent with JavaScript; An HTML whisperer
My code is clean and elegant, I genuinely innovate
And even know my way around a Promise and async / await

I’m very well acquainted too with matters vector graphical
I understand why SVG coordinates seem magical
And even without Photoshop I elegantly can produce
A mockup or a logo in most any format that you choose

[Chorus]
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose
A mockup or a logo in most any format that you choose

I'm quite adept at ES6 expressions like destructuring
I know the ins and outs of functional reactive programming
In short, in matters browser-based or Node.js if you prefer
I am the very model of a modern web developer

[Chorus]
He is the very model of a modern web developer

I know our mythic history, the humble start, the browser wars
I know why Douglas Crockford fought the battle over ES4
The World Wide Web Consortium and Ecma International
My knowledge of our legacy is truly supernatural

With LESS and SASS and CSS, designing for mobility
I’ll perfectly apply the right amount of specificity
From custom fonts and parallax to grid and flex and border-box
I know most every tip and trick both common and unorthodox

[Chorus]
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox
He knows most every tip and trick both common and unorthodox

And when it comes to lazy loading, bundling up and splitting code
There’s nothing quite like Webpack, which of course is built on top of Node
Considering my resume, I’m certain that you will concur
I am the very model of a modern web developer

[Chorus]
He is the very model of a modern web developer

When new frameworks and libraries emerge I must be ravenous
And gobble up the hot new thing, my appetite is bottomless
React and Vue and Angular, Immutable, RxJS
The list will be outdated long before I'm finished singing this

My pull requests rely on multitudinous utilities
To help me lint and test and build, a deluge of analyses
And every single day there are a hundred thousand more to learn
The web is going through an irresponsible amount of churn

[Chorus]
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn
The web is going through an irresponsible amount of churn

This pace is agonizing! Code from yesterday is obsolete!
The speed of innovation is enough to knock me off my feet!
It's happening too fast! I can’t keep up! I’m tired! It’s all a blur!
I am the very model of a modern web developer!

[Chorus]
He is the very model of a modern web developer!

It's so frustrating to explain rxjs pitfalls to the manager.

To avoid the diamond problems and glitches caused by combineLatest and debounceTime(0), I decided to use single stream with nested reactivity.

Then the manager asked me to use withLatestFrom instead of combineLatest.

Sure withLatestFrom makes sense to the original author, when the original author is able to remember the reactive graph and put proper dependencies to combineLasted/withLatestFrom accordingly, but anyone else who touches the component later needs to retrace the reactive graph to avoid the glitch. Sometimes it's just impossible when many dependencies are derived from combineLatest+debounceTime(0). When no one is trained to code reactively, I don't expect people to know where to put a dependency. After many trials and errors, the only way to avoid the diamond problem is to use nested reactivity where child streams are created within root stream each time root stream emits.

The mentioned manager put all sorts of side effects in observable chains. The manager keeps saying the stream is too large when their subscription functions (sometimes nested) are way worse with litered mutations everywhere. Anything in observable can be traced by go to definition but tracing side effects usually requires global searches.

Recently, he put startWith to the end of a synced stream to fix a bug where button would collapse when there is no content (initial null emission). Rather than fixing the default height, he thinks using startWith(defaultLabel) is a good idea. Of course, he doesn't know that a synced stream should only emit 1 value on new subscription and that extra emitted value will cause rxjs glich down the pipe.

I hate corporate jobs

Anybody know how I could make an RxJS observable without RxJS?
I'm working on a library and I need it to be small (So including RxJS isn't really viable), run in the browser (IDK if Browserify will work for RxJS), and be fast. I need a way for a given element to 'listen' (or in RxJS terms, 'subscribe') to a value and update its text content whenever the value changes.
My current implementation is just a interval loop that checks if the previous value is the same as the current one, and if it isn't, it modifies the DOM.

Yo mama so fat, if one would create an observable from her it would cause backpressure

Why should I use Redux in React aside from its beautiful chrome extension? For job purposes only?

I think RxJs and React context API + hooks can do the same job with less codes.

Also, there are a lot of developers who don't like Redux.

Convince me to use Redux

Share your thoughts on the RxJS learning curve.

I'm learning RxJS and I'm overwhelmed by the number of operators.

Typescript is so fucking frustrating sometimes to deal with

The snippet above AND below do the EXACT SAME FUCKING THING. But because you double tap, it loses the fucking (not needed) type before the mapTo. If you aren't paying attention, you get this extremely fucking aggravating wall of red.

God damn it, can't this be better? RxJS is pretty fucking important, so why is this so god damned hard to just get some coherent fucking code highlighting!?

/rantover