Dear senior developer with xx years of development experience, please, I BEG OF YOU hear my humble unprofessional opinion.

Not every junior is a inexperienced low life.

Even though I'm glad that I'm working with someone of your wide skill set and expertise, I'm not working with you by choice nor it is my intention to distract or "steal" your knowledge.

When I suggested using a newer version of jQuery for this new project that didn't mean I'm challenging you to work on something new for your domain, I'm merely suggesting this change because jQuery 1.2 is just old and a big portion of it is deprecated.

When I suggest some changes on your CSS selectors that doesn't mean I'm acting out of place, it is my genuine interest of having effecient css where possible.

I know you (in your opinion) are the best full stack developer in the industry, but maaaan you kill me when you use js and regex to validate input type=email (table filp) ... Haalllloooo it's 2017 this Sunday aren't we supposed to progress instead of remaining in the same old same ?

RANT!!!

Spent 6 hours today trying to figure out why the CSS got all jacked up on a site right before launch.

Turns out, the new college grad who went to school for front end development doesn't know how to specify elements at all.

They made all their edits using the broadest selectors possible, sometimes at the tag level.

Having never looked at the site or mock-ups I had no idea what it was supposed to look like so I spent a lot of time waiting for people to tell me whether things were fixed, and telling what else was broke.

Good thing their college degree means they make 20% more than me.

Why is it so important to some people to claim that "HTML and CSS are not programming languages"? I get it, you're a REAL programmer working with arrays, maybe tuples, objects and possibly direct memory management. Who the fuck has a right to call themselves a programmer for writing some brain dead markup or poorly designed selectors, right? Who fucking cares for semantic tags or nested selectors?

Just think for a few seconds about when you were taking your first baby steps to becoming the GOD ROCKING MEMORY HANDLER THAT WRITES _REAL_ CODE that you are today, and how good it felt to be able to create something that appeared on your screen. It felt pretty awesome, yeah?

Now imagine if someone much more experienced than you told you "You're not a real programmer, that is not real programming. You should see what I do, I do real programming".

I think you get it. Why spend your energy spreading bad vibes when you could spend it on something more productive. Like reading up on the new CSS4 specs ;)

Interviewed 6 candidates yesterday.

all of them had 2+ years of experience in web but none of them know how to use selectors in jQuery other than '#' and '.'

LEARN YOUR STUFF PROPERLY 😠😠😠😠

Spent an evening coding 100 line of JS front end functionality that I achieved in 5mins with 2 CSS selectors.
Bullshit.

You know you're a web dev when...

you consider not buying pizza just because the ordering website appears to use global jQuery selectors. 😣

Refactored and upgraded a web app from 2013 in a week. Long days and nights of changing horrible jquery selectors I'd written when I was new to coding into nice a nice MVVM structure. Finally shutting down my laptop, beer in hand and sat out in the sunshine.

Only people reading this will know the feeling of relief I am feeling now!

Rant on anti devs.

I helped my friend crack a fairly simple hackerank. The questionnaire was basic JavaScript questions and little on CSS selectors nth child. The test is finished in half hour instead of 75 mins.

5 months later. He calls again and ask if he can get the question solutions (code snippets). I didn't have those but curious why he needed it. He says he wants to put that solutions to Github. So would look on resume. This is not even a project just code snippet with a for loop. He just wants any codebase to upload to his profile.

My ears are bleeding. It makes me sad that some people had to do Masters in computer science purely out of societal pressure. Just because software development is booming field a lot of folks who are not genuinely interested in development are being forced into the industry.

Bootstrap's absurdly-explicit table selectors are pissing me off again.

It was when I saw that he was writing CSS in one huge file (couple of thousands of lines)
And I needed to change one thing (ctrl+f it) and saw it was copied and pasted 4 times ..

And no, not just the CSS properties, the whole thing including class/id selectors...

TLDR: Just had a "I am god" moment because something worked on the first try.

Been working on hooking into and modifying a plugin's central function and related output for almost two weeks now. The documentation is garbage and the source code is ... fine, I guess.

I had been working on getting the filter & display working on a form with sample data I'd put together. I finally got the desired result before I left on Friday, but had the sample selectors hardcoded in.

Within a couple of hours this morning, after fiddling around with pulling the needed data dynamically, I navigated to and checked out the function on the intended page for the very first time since starting the project and IT FUCKING WORKED RIGHT AWAY.

I let out a forceful "yussss" under my breath and stood up with my fists in the air. Nobody noticed. But at least I get to show my manager the fully functioning thing this afternoon instead of the hard-coded sample-only I had when he checked in with me this morning.

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.

As I already said on devrant, I'm a freelance web developer and I also often sell my services for teaching, loving that. Currently I'm teaching PHP with 30 students and it's going very well.

But yesterday, I received an offer for giving another course next month, this time on HTML and CSS, for a company I don't know yet. Almost every line of this email is wrong, outdated by 20 years, or just basically meaningless...

So I thought I could do my best to translate this as close as possible to the original, preserving the wrong formulations too, just for you devranters fellas.

"Hello,

I have an offer for a 2 days course for 5 people (level 1+ and/or 2), on HTML5 and CSS3. Below, the program :

1. XHTML AND CSS2 INTRODUCTION

Advantages and benefits of change

Understanding compatibility for different versions of browsers

HTML, XHTML, CSS edition tools : presentation of the different tools

The CSS language : different types of selectors : class of selector, identifier of selector, contextual selectors, grouped selectors

Blocks of text, boxes of text

The CSS1, CSSP, CSS2 properties

Relative and absolute measures units

2. LAYOUT TECHNIQUES

Full CSS, XHTML websites demo

Positioning with the position property, positioning with the float property

Columns creation

Layout for forms

Layout for data tables

Layout for menus

3. INTRODUCTION TO SVG (SCALABLE VECTOR GRAPHICS)

Role and importance of SVG

Using SVG on client side : basic shapes

SVG structure of document, tags examples

Using CSS styles with SVG

Different integration methods for SVG in a XHTML document

4. OPTIMISATION OF JAVASCRIPT CODE

Introduction to DOM and Javascript

Access to document objects : different access techniques, using this keyword, create elements dynamically

Positioning elements with the help of Javascript : positionning elements relatively to the mouse, move elements

Show/hide elements for creating hierarchical menus

Code optimisation techniques : using objects, objects litterals, loops optimisation

Can you please give me your availability ?"

Seriously...

CSS-fucking-1 ! Is it a course for dinosaurs ?

...And if only my rant was just about the program...

It's totally impossible to cover all these subjects in only 2 days with people of different levels and experience.

The guy exactly said to me : "don't worry about the program, it's an old text but they agreed to it anyway. They just want to learn HTML and CSS, some of them already know it but want to learn more, and the others are total beginers.".

And here is the meaning for the "(level 1+ and/or 2)" part in the email.

So... Surprizingly, I accepted the offer, but asked for at least a 3rd day. I'm waiting for their answer, but I'll do it anyway, adapting the course content to the actual students knowledge. I need the money, after all.

Wish me luck...

It's just sad that these formation companies are selling bullshit to clients that just want to learn something useful. It's too often like that, they sell shitty/useless programs and we have to catch up in real time with students that don't understand why they don't learn what was told to them.

Fiddling with the UiPath RPA tool. What the fuck is this monster?

So, you create apps by drawing a flowchart, like some kid using Scratch. Then, suddenly, you have to create a .NET object just to get a random number!

Who the fuck is the target audience that can create objects, call a directory read function, etc, but can't write a loop?! Show me that fucking person.

Then I have to debug the fucking selectors when they don't work correct. All this requires is understanding how UIs are structured under the hood. So, you know that a menu bar is a window, but you need to draw a fucking if statement?!

And how would you debug and manage this monstrosity?

It like we learned nothing from all the Excel apps we build for decades.

I mean, it's an impressive app. But, why does it exist?

Someone needs to stop this before it gets out into the wild or we'll all be debugging flowchart a created by business analysts.

You have been warned. Join the fight or accept the consequences.

Front-end hacking is pure dog shite.
Some banana fuckers changed a forms plugin for PukePress some odd years ago and now I am responsible, after installing 2 major releases, to make it behave and look the same as it did before.
I'd rather dangle in a noose than cleaning up their spaghettified CSS selectors and random jokeQuery code.

If you use ID selectors in a stylesheet for a component you reuse in the page multiple times you should be shot.

Around three months ago in a meeting regarding a new end2end test for a product :
PO: We have a full feature stop, only bug fixes are coming until we can unify all products.
Me : So I can use any selectors without worrying the whole thing breaks with the next update?
PO: Sure.

Last Thursday :
PO: Yeah, we gonna overhaul the entire UI with the next release to get better UX.

Why would any sane person reinvent an entire product thats already scheduled for discontinuation in 2018? And how is it possible that a few months ago nobody knew anything about it? Are they using fucking tatot cards for management decisions?

Pretty late for week 86, but I just remembered my first paid freelancing web dev work.

While not my worst experience, it was a pretty horrible task given to me...

I was helping someone implement a new design on a pretty outdated (visually and technically) PHP site.

I was getting paid crap. The guy wouldn’t even let me look at the HTML, let alone touch it, so definitely no PHP work, either...

Literally the only code I was allowed to write was CSS. So, I’m supposed to be restyling, but I can’t change the structure at all, or even ADD CSS SELECTORS.

Fine, I’ll just make your site fragile as fuck by using nested relative selectors.

#main:nth-child(3) > div > div > div > button

As if that wasn’t bad enough, there were some pages...I shit you not...that had A DOZEN LEVELS OF NESTED TABLES.

WHY. DEAR GOD WHY.

For a simple checkout page.

So, on some pages I was literally trying to access elements through relative selectors, nested within levels and levels of tables. FFS

Needless to say, I did not work for him for long. Even if I wanted to deal with that crap, my time is much more valuable than what I was being paid.

No, this is definitely not how to use CSS selectors

Redux is weird, and I don't like it because it violates the most basic principles of responsibility. The concept of expressing state changes as reducers is nice because it can be duplicated, saved and restored and compared for equality. So is creating isolated accessors and selectors. However, I really don't think a reducer should be aware of its own position in the hierarchy. When specifying an action you aren't addressing a reducer, you're addressing the tree. That the tree doesn't manage this addressing and expects reducers to identify themselves is a bit strange, especially considering that the whole point of having a tree is that reducers shouldn't be affected by their position in that tree because they're pure. Same goes for selectors, they should belong to the tree, not to any particular sub-reducer. Separating the slices is reasonable structure, but if you specify parts of the addressing in the slice and parts of it in the root you might as well just use separate reducers for each of your slices. It's functionally equivalent.

There is a fucking difference between the CSS selectors
".classA .classB"
and
"classA.classB"

an incorrect whitespace is way more fucked up then a missing semicolon.
duh...

Spend an hour talking to junior dev about not nesting multiple #ID selectors in sass. He is still convinced it's better for 'rendering performance' and refuses to change it. Should I ask him to add 200 elements with the same style on one page to illustrate the problem?

Why do people hate jQuery so much? 30KB is basically nothing in times of modern bandwidth and for me CSS selectors are mich more readable than the Vanilla JS functions.
Im not judging and would be happy if someone explains it to me or shows better alternatives.

Ok I love JavaScript but this is enough.
I know selectors like these shouldn't exist, but double escaping? Hell no! I didn't even know it was a thing! I wonder what's the highest level of n escaping there is out there.

The most annoying popup I hope to not see clicking on a link.

Other cookie [de]selectors seem to have proper "reject all" mechanism. This one not only doesn't have that, it also always has an annoyingly long vendor list.
Also, if I unselect cookies, my choice is only saved for several days. After a week or two it tends to expire and the clickfest starts again

They prolly hope to overwhelm me with the number of clicks required to unselect them all. Well joke's on them, it's a matter of principle. I know where I'll spend the next 15minutes of my life now...

I’m a full-stack Dev, but my job description restricts me to backend - app logic and databases - but the frontend Dev makes crappy markup templates and I have to keep closing unclosed tags and replacing ID css selectors with classes.

Not sure if junior dev is lying or just really bad at using the search function. He made sweeping changes in code he inherited from me and failed to find all the jQuery selectors that broke because of it. And he didn't think of clicking on all the other buttons on the page to check they are still doing their thing. Of course claiming that there is no time for testing when I pointed out his mistake. Wish he'd stop being such a bad, this is not the first time this has happened!

Yanno, when I pay $60 for a theme, I get what I get. That's fine. Invariably I end up having to mess with the css. That's fine too.

However, theme makers? Please don't mix hyphens and underscores in your selectors. Decide on a case style. Avoid div-itus.

And for the love of all a selector such as #Top_bar .logo #logo a.logo makes code a pain in the ass to test

That moment the client asks to add a single link to a header and you think: "easy enough". But then you notice their CSS.
Not a single f*cking class is used in the entire header, everything is done using :nth-child selectors etc... 🤬

Also, did I mention, the CSS is used for several headers, so adding an element to the header and modifying the CSS might break any other header in the application.

And this after they mentioned last week that they don't use a library like Bootstrap because it is too cumbersome.

I'm so mad right now, have been trying to fix this for half an hour. A task like this shouldn't take more than five minutes!

React Native testing is hair pulling.

Every test needs to have 100 different mocks in place and there are: 3 different methods to mock a function (mock, mockImplementation, and fn), 3 different types of query methods to get elements (get, find, and query), and 5 different selectors to query on (accessibility label, testId, accessibility hint, accessibility value, etc.)

And after reading all this, being diligent and learning the difference between stupid, synonymously-named functions which have wildly different side effects like "getByA11yHint" and "findByA11yHint" (ugh...), after all that, you write out a test with all the appropriate mocks and you want to do something simple and it beats you up all over again.

Button enabled or button disabled. Simple right? Logically the former is "expect(elem).toBeEnabled()" and the latter is "expect(elem).not.toBeEnabled()", right?

Wrong! You're an imbecile. Your tests will fail and never tell you that ".not.toBeEnabled()" and ".toBeDisabled()" don't do the same thing even though they look and sound exactly the same. Only the latter will work. The former makes all your tests fail. Where is this written in the docs? Nowhere?! Great!

👌😄🔫

CSS has no parent selectors... and the codebases' element I'm working on has no classes nor an id...
kill me

If somebody needs a project idea how about a really dumb JS Framework that allows you do basic DOM Manipulation, just like jQuery, directly in the elements class attribute.

For example this is how a document could look like:
<body class="init-hide-id-otherElement">
<button class="onclick-show-id-otherElement">
<h1 id="otherElement">Hello</h2>
</body>

What this does is first, at the body's init-* class, it hides the element with id otherElement at page load. Then, when you click the button, the element with id otherElement gets shown. Instead of *-id-* you could also use *-class-* which selects a class.
Basically the syntax is:
<event>-<action>-<id/class>-<the elements id/class>

Of course this has a lot of limitations, for example the selectors are very limited, but it would still be very cool!

Overly long/specific css selectors are just as bad or worse than making your styles !important.

Change my mind.

in this takehome challenge: let's see how much we can over-fucking-complicate every single thing. You want one selectors (that could just be one-liners) stacked on top of MORE one liner selectors? you got it!
you want sagas with fucking wierd ass syntax that can be replaced with i don't know, BUILT IN JAVASCRIPT??!!? you got it!

oh yeah, and with all this complexity, not a single line is written with TypeScript...

...i can't remember the last time i fucking had to write the characters 'propTypes' on a react project

what the hell is this, 2015?

it's absolutely mind exploding mind boggling how these orgs operate

double the work, double the time, double the cost

but what do i know? i'm just a 🤡

It is this time of the year that I get to work on a shitty project to add some new functionality to it, it is a front end part of the project which before was externally developed, so now I have to deal with this BS Marionette mess where nothing they wrote comply to standards, like the fucking router.js doesn't look anything like the Marionettes doc, the bootstrap they used they fking decided to override classes in custom css and turn the 12 col grid system into 5ths or shit, then they created some autmated tests with bunch of intricated selectors selecting by 'labels' instead of !!!!FUCKING WHAT ARE THIS FOR IDs!? - fuk me - so I better decide to procrastinate on this project since luckily enough we don't have a deadline and I wouldn't care if we had either! My job is java developer, and yes I feel good about learning new things and learning front end. BUT NOT THIS CRAP DEPRECATED MttehorseShit!

Dev goals for 2022? Best and worst DX in the past?

Wish to prioritize customers with useful business goals who are open to sustainable web dev, usability and accessibility.
Want to use even more CSS and find a way to use new features like parent selectors without sacrificing compatibility.

Continue learning and using Symfony, but also continue with my full-stack side project using JS or even better TypeScript for the backend also for the backend.

Best developer experience: getting new customers for my own business after leaving a company last winter.

Worst developer experiences:

Corporate customers with large budgets and design agencies seem to fancy all the antipatterns I thought bad and obsolete, like carousel content, animations everywhere, and autoplay videos on the home page. Poorly written, poorly thought, and sometimes contradictory, requirements. Customers and agencies changing their mind halfway through a project.

"Agile" daily meetings, not giving devops necessary repository permissions, and making Webpack mandatory for no real reason.

I hate hyphens in CSS selectors

ant.design selectors are bogus garbage.

The drop-down selector that replaces the browser's native one does not allow typing to select an entry, meaning to select a language from a long list, one needs to manually scroll to it. If the scroll wheel of the mouse does not work properly, one needs to use the scroll bar, which is far too short to be able to conveniently scroll a long language list.

Sure, ant.design might look pretty (as advertised), and has oh-so-fancy features like fade in/out animations, but from an interaction point of view, that's as useless as the skeleton screens popularly used by JavaScript-based websites (which are anyway inferior in performance and compatibility compared to static HTML pages with JavaScript on top).

Not only can I not type-to-select, but the date selector on Dailymotion, which uses this utter garbage, sends "[object Object]" to the server, so the user is forced to edit the HTTP request manually. Complete utter garbage.

Don't use that shit. Use the browser's native feature. Or use something progressively enhancing like the drop-down menus used by MediaWiki on pages such as Special:Contributions, where it actually is properly implemented.

Love it when a react module doesn't allow custom class names. /s
Now I'm stuck with both BEM like classnames and long ass selectors to style the module. x_x

He said there is new bunch of testing frameworks, better then the old ones. Cypress he said. Testcafé he said. Angular is not tied to protractor anymore he said.

Than he was torn to another project and Horus took over his tests. Guess what? The syntax is slightly differenr, but when I experienced you produce the very same problems as with every other framework: Bad selectors. Using sleep instead of expected conditions. Tests Interferon with each other. He is a newbie so ok he dies not know shit. But I have to repair this shit now and learn a new framework for that while very experienced with selenium. But at least we use the newest shit now. Fml.

Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4.

I think there is some value in grouping a bunch of specs into tidy version labels like "CSS4". It's much easier for me to ask "does this browser support CSS4?" than it is to ask "does this browser support CSS Color Level 3, CSS Namespaces, Selectors Level 3, etc."

Also, as a developer, if there were a group of specs known as CSS4 gaining traction on the web, I'd know that I need to be well-versed in each included spec, as opposed to just trying to become more fluent in different specs as I come across them in my daily work or research.

Your opinion?

Is there a site for design/ui/ux inspiration and ideas, like an index for ways to do things, cards, tags, selectors, etc?

Truly I want to murder whoever wrote those css selectors.

Guys is that the case, that it is such a hassle to work with forms in React-Redux application?! Hell, it takes a lot of time to just create a simple form with like 3 lines of inputs.

Everytime I need to setup bunch of those Actions that will fire on a field value change, than selectors to pick from the state and send to the backend with redux-saga. OMG OMG OMG.

Redux-forms kind a struggle to setup too at first, but I guess I have to go for it anyway?

If you think your css needs to be that !important, you probably need to rework your selectors.

I have never seen core coding questions here so this is one of my shots in the dark-- this time, because I have a phobia for stackoverflow, and specifically, discussing this objective among wider audience

Here it goes: Ever since elon musk overpriced twitter apis, the 3rd-party app I used to unfollow non-followers broke. So I wrote a nifty crawler that cycles through those following me and fish out traitors who found me unpleasant enough to unfollow. Script works fine, I suspect, because I have a small amount I'm following

The challenge lies in me preemptively trying to delete some of the elements before the dom can overflow. Realistically, you want to do this every 1000 rows or so. The problem is, tampering with the rows causes the page's lazy loader to break. Apparently, it has some indicator somewhere using information on one of the rows to determine details of the next fetch

I've tried doing many things when we reach that batch limit:

1) wiping either the first or last
2) wiping only even rows
3) logging read rows and wiping them when it reaches batch limit
4) Emptying or hiding them
5) Accessing siblings of the last element and wiping them

I've tried adding custom selectors to the incoming nodes but something funny occurs. During each iteration, at some point, their `.length` gets reset, implying those selectors were removed or the contents were transferred to another element. I set the MutationObserver to track changes but it fetches nothing

I hope there are no twitter devs here cuz I went great pains to decipher their classes. I don't want them throwing another cog that would disrupt the crawler. So you can post any suggestions you have that could work and I will try it out. Or if it's impossible to assist without running the code, I will have no choice but to post it here