Just reached 100+!!

Anyhow. I started coding prettymuch 365 days ago. My mate decided to launch his company and figured it was a good idea to start it with good friends who knew fuck all at coding.

Fyi, the dude can code 15 hours straight everyday for about a year (no shit thats what i saw).

Since he taught me html css javascript(even if i still suck abit at js). He made me remake the whole bootstrap in react by adding this new lib styled-components and test everything(95% coverage :)).

He also taught me webpack and rollup. Json schma forms，http requests redux， redux logic， and all the routing shit...he obliged me to i plement RR4 on release and is now making me overlook the merge requests of my other collegue (yes he made me a git pro，almost).

And now i have to work long distance by studying java， spring， oauth2 and start working on our api.

O yeah，and i went from microsoft to full on linux!!!

To be honest i thought i was gonna die this year. (Also have a kid on the way :)).

Devrant has been like going to the psychologist :) everytime shit hit the fan i realized every one has the same problems :)

Thanks to the community i can also now even give out nerd jokes :)

(L)Devrant

My company is looking for a new React FE.

Just got a response to the add...

"I have 10 years experience with react and styled components."

This is what you're in for when you go for THE state-of-the-art "React stack". What you see in the screenshot below is the hellofresh.be website (it's the same as .com). It uses Next.js, React, emotion & styled-components (2 CSS-in-JS libraries). It uses 140MB of RAM for a single tab with some product cards and a slider, logs 70 console errors in production, and fails to load 3/4 times on Firefox.

On mobile, opening a meal card to view its recipe literally takes up to 10 seconds (and I have good connection and performant devices) and you can't choose the last meal card because a f*ing overlay hides the "add" button. And this is a global company with millions in revenue.

All this bugginess has already resulted in incorrect or missed deliveries and they're not doing anything about it. F* you Next.js & F* you HelloFresh IT management

My boss started contemplating whether to start using styled-components for react.

I showed him Vue: "oh well, so we're basically recreating Vue within jsx?"

I'm not sure what problem we're solving anymore

Usually my workplace is pretty chill, but today something rantworthy happened!

During code review, I found this guy had styled each element inside his components using nth-child selectors. For instance, in a card the heading was styled by nth-child(1), the text was styled by nth-child(2) and so on... No use of actual fucking classnames.

When I pointed this out, he told me it was actually the better way of doing things because classnames increase the size of the HTML document!

He also claimed proudly that nth-child() is more efficient in performance (idk - anybody can confirm this?)

I'm the only "css guy" there so nobody could second my views. Posting it here so that I can show this to him tomorrow by demonstrating what opinion other css devs have on this and prove my concerns / convince him to change his code.

i was hired to join a team of old devs (40+) in an unnamed European country "yay goodbye 3rd world it's time to enjoy the quality of life" assist with enhancing already existing software and creating new solutions.
prior to my arrival most things were slow and super buggy, looking at the code base it shouldn't be a surprise, amateur hour everyone, logic implemented that is not needed, comment driven development, last time code review was done back in 1996. lots of anti patterns.
i swear there is a for loop that does nothing but it loops through a 100+ elements list, trunk based development with tfs since git is "not really needed"
test projects are not there.
>enter me an educated fool, with genuine passion for the craft and somehow a decent amount of knowledge.
>spent the last year fixing stuff educating people on principles and qualities.
> countless hours of training and explaining. team is showing cooperation, a new requirement comes in to develop with react.
> tear my ass creating reusable shit and self explanatory code with proper naming etc using git with feature branching, monday is first deployment day.
> today a colleague was working on an item submit a pull request and self approve it
> look at the code..... WTF the dumb fuck copied and pasted the whole code from different kendo components but somehow managed to refractor the name to test component, commented out all the code that he didn't use did the api call directly from the component, has 2 useeffects that depends on the a fucking text box changes for no reason, no redux implementation, the acceptance criteria is not achieved, and it doesn't work it just look right.
> first world country shit cannot scold, cannot complain, lead by example.
>asked him why you did this, the response was yeah probably i shouldn't have done that, i really didn't understand anything in the training but didn't want to waste time!!!!
> rest of the team created a different styled disaster with different flavors they don't even name their shit the same way.

fellow developers I'm stuck in a spaceship with a bunch of imposters, seriously i never cried in my entire life now I'm teary and on the verge of a break down.
talk with management "improving needs time" and offers me to join a yoga session to release the stress as if reaching nirvana would deliver shit on monday.
i really don't know what do is this a rant, is this a cry for help, I'm not sure, any advice is welcomed.

styled-components is the shit ❤️

Whoever came up with the idea of react styled components was obviously not loved as a child.

I’m working on a react codebase and company decided to add a new module.
Now im writing markup and css to ensure UX is smooth as designers thought of it.
Imagine my horror when I start to code and find out no matter what HTML tag i use, it’s been FUCKING OVERRIDDEN in the global stylesheet. AND STYLES HAVE BEEN OVERRIDDEN WITH !important

They’re also using Ant design as a component library. Guess what, default ant design classes have been overridden too. So i try to use ant design button or card, and bam, MAGICALLY SOME DESIGN FROM SOME SHITHOLE MODULE DECIDES TO FUCK WITH MY STYLES

On top of that, styles of parts of application has been written in SASS, some part of application uses bootstrap components some use third party components like tables and responsive grids to suit to their preferences. Some parts use handwritten css. Some parts use CSS IN JS and styled components. THE FUCK IS THIS GARBAGE!!!! THE FUCKING CODEBASE HAS A MIND OF ITS OWN!!!!!! YOU NAME A WAY TO ADD STYLES TO A COMPONENT, ITS THERE!!!
And the company’s management thought a “fractal” approach to maintain each individual view is “best” for SCALABILITY!!! HOW THE FUCK DID IT NOT CROSS YOUR DUMB MIND THAT FRACTAL APPROACH ALSO GUIDES TO HAVE ALL COMMON STUFF AT ONE PLACE!!!! THIS CODEBASE HAS DUPLICATE STYLES AND DUPLICATE CODE IN ALMOST EVERY MODULE!!!!

Not to mention every developer choosing to freely decide the way they should write their code without any guidelines.

HOW THE FUCK PEOPLE WRITE THEIR CODE WITHOUT THINKING ABOUT OTHER DEVS!!! SO BASICALLY I AM NOT ONLY CLEANING SOMEONE ELSE’S SHIT BUT ALSO TRY NOT TO SHIT IN THE PROCESS!! FML

Whoever came up with the idea of styled components and other idiotic css-in-js bullshit because they couldn't be arsed to understand fucking cascade deserved all the bullying they got in the highschool. And all those idiots who adopted it because they couldn't be arsed to understand fucking cascade should get waterboarded.

So I've received a link to Figma for the new mobile app from our designer. It looks great and all but...

Each fucking piece of text is styled independently. Half of the cards in the layout are simple rounded rectangles, the other half are some components with a gradient. Icons are a mix of vector graphics and line elements. Even buttons aren't components. Consistence anyone? Please?

And now comes the best part. How am I even supposed to reach half of the screens? There are four variants of a screen with very similar functionality, but only a single button in the main screen which would at least remotely correspond to one of them. The guy who invented the wirescreens just kept adding things which would be nice to have in the final app, without revising it and making clear use case flows out of it?

After a few days of implementing this clusterfuck of a design, I have finally settled on a consistent set of font and element themes. Just please use components in Figma. You are paid to work in this tool which can make it super easy for the developer AND for you as well to make the design come to life, so why don't you learn to use it?

At least the designer is a nice guy, but god, could he learn to use his single tool?

Anyone else having so much problems using create-react-app, typescript, styled-components and storybook?
It fells like im playing the lottery here and most of it doesnt reliable work.

Calling out to all frontend devs:
What's your opinion on CSS in JS (e.g. styled-components)?

I really like the encapsulation and the ease of use but I don't like how it makes debugging more difficult.