Does anyone else read:
!important
as
"NOT important"???

RAGE. FUEL.

TABLE BASED WEB DESIGN

I was surprised there were no rants about this topic before I realized it was more than a decade back 😳

We've never had it better! So to help add a little perspective for all those ranting about what is unarguably the golden age for web developers... let me fill you in on web dev in the late 90's;

JavaScript was a joke. No seriously! - I once got laughed out of the room for suggesting we try use it for more than disabling a button - (I wanted to check out the new XHR request thingy [read AJAX]).

HTML was simple and purely a markup language (with the exception of the marquee tag). The tags were basically just p,ul,ol,h*,form inputs,img and table and html took 10 minutes to learn. Any style was inline and equally crude - anything that wasn't crude could not be trusted and probably wouldn't render at all in most browsers (never mind render correctly).

There were rumors of a style TAG and something called a cascading style sheet which were received with much skepticism since it went against the old ways and any time saved would be lost writing multiple [IE version specific] style sheets for each browser just to get it to work - so we simply didn't.

No CSS meant the only tags you had to work with to create a structured layout were br, hr and table... so naturally EVERYTHING was in nested tables! JS callback hell can't touch this! - it was not uncommon to have 50+ nested tables all with inline style in a single page which would be edited without any dev tools or linting.

You would spend 30 minutes scanning td tags until your eyes bled to find something, make a change, ftp the file to the server, reload the web page and then spend 10 minutes staring at the devastation on your screen convinced you broke
the internet before spotting an un-closed td tag with your bloodshot eyes.

Tables were not just a silver bullet - they were the ONLY bullet and were in the wild west!

Q: Want an inline form or to align your inputs left?
A: Duh table!

Q: Want a border with round-corners, a shadow or blur?
A: That's easy! Your gonna want to put that table in the center cell of another table then crop a image of the border into 6 smaller images to put in the surrounding cells... oh and then spend 10 minutes fucking with mystical attributes like cell-padding and valign to get them flush.

...But hey at least on the bright-side vertically & horizontally centering stuff was a breeze!

"We need the application working in Internet Explorer, fully responsive :)"

CSS is frustrating because nobody actually times time to learn it.

Aligning that one image.

Then comes the !important to mess everything.

Centering.

I'm a backender, Linuxer (servers + cli included) and security person.

For some projects I do need to write my own frontends and that, in general, IS my worst css experience.

HTML is quite manageable but CSS, except for the basics, is fucking Chinese to me.

So yeah, about every goddamn project that includes ME having to do frontend stuff is/has been the worst HTML/CSS experience.

Forget about Internet explorer compatibility, EMAIL TEMPLATES are the actual worst. Outlook uses the same html rendering engine as MS WORD. It's sooo painful. All the bad practices you had to do 15 years ago, you have to do when you write email templates.

YOU WILL NOT KNOW PAIN until you have to make an email template, that works in Gmail, Yahoo Mail, OUTLOOK, outlook.com, outlook for mac, MOBILE, Android, the gmail app, IOS, apple mail, and so on. And after you make an unholy abomination of table garbage, then having to make it responsive/mobile friendly after all that!

If something is broken in one client, fixing it will break something in a different client! And then having to take a stab in the dark to try to fix it and then sending yet another test email (which costs $ per test)

I must have slashed decades off my life having to build email templates. It really is horrendous. There are frameworks like Zurb for email that at least let you feel like you're using a modern workflow. But things break just as often.

Honestly if you have the option, use a wysiwyg editor for building emails. At least when it does break (and they all will) you can at least blame the software.

Which is better than spending 4 hours on why that table cell doesn't line up correctly in outlook.

Internet explorer is still a thing

Happy data privacy day!

Oldschool CSS was not much fun, but I never understood how this made it any better:

<div><div><div><div><div><div>Bootstrap</div></div></div></div></div></div>

I always forgot a row, had cols inside of cols, forgot how form-groups worked, or found other ways of messing up the whole layout.

Instead of complex CSS, there was now this new complex language entirely expressed through the nesting of layers upon layers of divs. It was like LISP's brackets, but more verbose.

That was the moment I realized that fullstack is bullshit, that there are intrinsic talent differences between frontend and backend devs, and that it's OK to focus on a narrower but deeper field.

Literally what I do 80% of the time at work.

I am the only one that:

Knows CSS properly
Knows SCSS
Understands how to set up a proper front end workflow
Etc
Etc
Fucking etc

I AM the css dude at work and I FUCKING HATE working with CSS, at the same time I take it upon myself to push through the projects because my team is shit at it and I would rather work with it than to have someone else do it and then fix their shitcode.

As a whole....i dislike design. Badly.

Every time some assholes decide to mix part of the business logic inside the presentation layer.

<body>
<?php
// Let's query the db here...
?>

<body>
<%
/* Hey, I'm a JSP! Why not defining some custom logic here, so nobody will able to debug it? */
%>

I don't write CSS
I have a guy for that

Ctrl+S
F5
F5
Shift+F5
Ctrl+F5
Ctrl+Shift+F5
Ctrl+S
Ctrl+S
F5
...

trying to use flexbox when you have to support IE. fuck IE. fuck it. fuck it in the ass with a rusty pipe.

That thing where 100% does not always mean 100% and you have to figure out why your freaking element overflows its parent container.

!important

Cross-browser compatibility.

<div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div>

Marquee and blink tags.

Spending half a day wondering why certain DIVs refused to appear in a custom theme I was building, only to find out the reason why was because AdBlock had blocked the IDs being used.

Have kept AdBlock turned off on my primary dev machine ever since.

First few times being made to make mobile responsive emails (from scratch, not generators) was an utter psychedelic mess I never wish to have the pleasure of returning too.

I since have had the pleasure of refusing this, as being able to maintain this chaotic mess created which has to be able to work across the major email clients is just a living nightmare.

There’s hell, then there’s a whole other level.

Hmm... If I click a wk141 tag on a rant I get to the wk140 page?

_this = this
that = this
myThis = this
theThis= this
outerThis = this
firstThis = this
rootThis = this

using dreamweaver hahaha

So I've got a few stories, but the first one goes like this:

>> Spring semester last year
>> Likely have the best grade in a front end web dev class
>> Has a file on a server that we used for this class.
>> Copies HTML file to desktop from server
>> Opens desktop file in VS (or VSCode, I forgot lol)
>> Opens server HTML file in chrome
>> Edits the file
>> Browser doesn't change.
>> "What to fuck?"
>> Clears cache
>> Doesn't change anything
>> Closes and reopens Chrome
>> Still no change
>> 'Yo what the fuck???"
>> Calls professor over to get help
>> Explains problem
>> Instantly realize I'm a dip shit and open the desktop HTML file in Chrome and see the changes I made

!important

And fuck whomever decided not to follow programming convention and put that exclamation mark there, may they burn in hell.

Cannot understand those who are frustrated with it.
Sure, one can feel frustration when some project is not going as they were supposed to go, but that is life for ya, boi.

Without wanting to offend anyone it feels like devs who complain so much either do not actively search for a solution and learn shit properly and cry their soul out afterwards or they do search, but cannot find anything.
Patience is the solution. Do not let yourself fall down and stay strong.
Even if it takes a lot of willpower, retries, inner pain, patience and non-sleepy nights, you will and can do it. I believe in you.

My whole life was basically a psychological disaster.
I have had and still have depression and a lot of short frustrations from time to time, too, but I do not cry it out loud.
My high school is fucked up. In every single aspect. I am doing all-nighters almost every day. With maybe half an hour of sleep to get school projects done on time.
I cannot just say "fuck you. I am not gonna do this shit" to school, because that would affect my grades in a negative way. Same thing applies to you, as an employee, too. But at least you do not need to be afraid of getting bad grades.
Bad grades->not getting the desired degree->bad chance of finding a job
In your case:
Bad communication with boss->bad connection->bad chance of finding a job

But is that really so?
I do not think so. Nonetheless, you still can have a good chance of finding a job, if you have proven yourself to others in a great way. Everyone has bad times. Even with their bosses. That's normal. Being bad with someone does not make yourself bad in general.

The job world will still accept you, but school won't accept you again. Whenever I feel like the burnout is about to catch me, I take an immediate break and go outside. Take a walk in the sunset. Go to the forest. Run with music playing loudly. Swim. And other things like watching the stars in the silence of the night.

To finally come to an end here...
Do not make yourself feel bad that quickly and try to endure the pain. This is going to make you a better and stronger person.
If you cannot do it anymore (hitting the borders of burnout), take your time and do whatever makes you happy and treat yourself.
Life is not all about work. Were you born to be a worker? No. Were you born to be a slave of others? No.
What is holding you then? Let go of all the stress (for a minute). You are free.

You are a great person.
Do not forget that.

I just remembered a weird fix in a bug, some old developer hide the error message using css, placing it in a div then just used display none. LOL

That one fucking time my text editor so damn high, that it choose to encode my file utf-8 BOM.
I was using Notepad++ because I thought it would just provide a good syntax highlighting, without stabbing me in the back

Seemingly nothing wrong with the code, but it took me, a friend and two teacher almost half an hour to figure out why the css simply wasn't work, even though it was clearly used and worker as intended when embeded in the file.

This was some years ago, so please don't judge me for my editor of choice at that time

Other than that, i simply suck at css and gladly use css frameworks 😅

NullPointerException

I'll just leave this here...

vertical-align:middle;

I am currently working on a project with a team of 5. I like working at night. After committing my code, I sleep at 6. My team on waking up decides to change the UI and I have to start over again. The irony is: None of them are working with me on the frontend! Feels like I am stuck on a while(true) loop.

float

Worst experience?

Dealing with CSS

I really don't like frontend

<iframe>

The ::before and ::after pseudo elements. I’ve spent an hour sometimes trying to figure out how to get some element to do something and not realizing it was because of those.

Outlook and word for html rendering.

I know it was a business decision but its been a pain since 2007 and still is.

All of my css experience has been repressed by my mind in order to protect itself. The trouble is, everytime I start a new project I end up thinking, "this will be easy to layout, I'll just need a bit of css". Then there are a shitload of new traumatic memories to repress 😵😱

"Why the fuck it doesn't take the rules I've just wrote?"

Ow..refreshing "production" instead of "develop"

Entirely my fault. I was getting frustrated that the CSS I had copied and pasted from an old project was not appearing properly. It just wouldn't work. Spent an hour before I lost my shit and closed the IDE, to discover that I was saving the old project repeatedly and hadn't even touched the new project which was serving.

While I don’t have pain typing normally, once key combo gets me. Control + Shift + R. Probably a repetitive motion injury at this point .

Trying to work on an existing application

I keep forgetting how to center text content

I had six items that I wanted to centre horizontally via CSS. Problem was that depending on the viewport width, the items could either take one, two, three or six lines. But the items broke to the next line like text so that e.g. the top line had five items and the second only one. What I wanted was three items each in this case.

Finally, I came up with a hack of media queries to make the parent container just so wide that six, three, two or one item would fit horizontally, and then centre the parent container with margin left/right auto.

My worst experience has actually been trying to fix someone else's code. One of my friends is in a graphic design class, and right now they have to do a basic site in DreamWeaver (a small nightmare on its own, I've found that the previews they show are never quite correct). I decided I'd at least pop in to help out a bit, cause they kinda have no clue what they're doing. They are graphic design students, NOT developers, and it's very easy to see that.

One of the first things I noticed was EXTREMELY unorganized code, but that's forgivable. But...I once saw probably 5 </body> tags in someone's code, a JavaScript function inside of the <body> tag, and a bunch of CSS statements in the <script> tag that they had one if the JS functions in.

I remember seeing this stuff, and I thought "what the actual fuck?". The dude was like "yeah it's unorganized as hell, I know"

...That's not the problem. CSS goes in either a <style> tag or a separate file (THEY HAD A SEPARATE CSS FILE). JAVASCRIPT GOES IN A <script> TAG OR A SEPARATE FILE

But, I get it. They're graphic design students. They can outdo me in probably everything in the Adobe suite (except DW as I learned). I once watched a girl in there do a project in Illustrator. I had no fucking clue what was going on. And when I was talking to her about it, she said "that's what I was thinking when we were watching you fix our code"

Kinda got a little sidetracked there. Basically, worst experience is non developers writing code for an assignment.

My whole workflow for HTML is frustrating. I rather write pug, because it has mixins, includes and isn't that fucking repetitive. But to write pug within Laravel blade views, I have to preprocess it too blade. Then sometimes the syntax gets crazy because of escaping blade loops like an insane guy ('| @foreach($foo as $bar)'), but you get used to it after time.

Happened to know this devRant app from a friend. And these community of developers are lit ƪ(˘⌣˘)ʃ

I'm living it.
I started an internship at this web store made of different pieces and following no apparent rule or convention. They asked me to do this landing page, but I can't access to the development environment, nor push, create a docker, kill myself, nothing. I have to build from the DOM and write with inline style a page copied and pasted, with 300 lines of CSS already in the tpl, overwritten bootstrap 3 and two main CSS files linked. And "they don't do !important".
I wish I could say I'm learning a lot, but not. My life has become a waste of hours trying to please a company stuck and aged.

Unpopular opinion: I actually enjoy writing HTML/CSS, the only frustration I have with the latter is lacking browser support

Flexing my box is !important, otherwise my body gets all floaty.

15 years back when I was in my highschool I was taught HTML. I created a 3x3 table of images with border without using any CSS while other kids were looking around confused what to do. Opened the same in IE and felt I was a professional web developer. Simpler times!

Most frustrating? Anything involving IE, but that's a safe answer. No, my most frustrating experience (to this day) is getting tables to behave responsively on mobile screens. Not easy when the tables in questions contain dozens of columns with hundreds of rows and mostly rely on fixed widths to render the text the way the client wants. So if you have a client who doesn't understand how hyphenation and word break work, I know how you feel.

To understand recursion, just click these links:

May IE burn in hell.

One time I was trying to get something positioned properly, and it worked on all browsers except IE. There was this little gap between two divs and I couldn't get rid of it. In desperation after hours of troubleshooting and lots of CSS attempts with no solution, I removed the whitespace from between the two divs in the HTML:

<div>...</div>
<div>...</div>

to:

<div>...</div><div>...</div>

And voila! No more gap when looking at the rendered page.

FML I hate you, IE.

1) clicking on the wk141 tag wouldnt show the wk140 rants
2) big titty mafia mommy gf
3) when i buy something i always have the exact price on my bank account

I think it was trying to learn how to make a CSS-only drop-down menu -- especially multi-tiered.

Even though that's when I was first learning, I'll admit I never totally conquered that one. As much experience as I've had with CSS over the last several years, I haven't had to build one of those menus in a while, which kind of means having to do it again will be frustrating again.

Or I can cheat and use whatever CSS framework I'm using at the time. 😏

Word Wrap!!!

Seriously this is a not easy one ☝️

Once I had to style comboboxes with only css so that they would look equal on all browsers... Equal meant they would look like the IE comboboxes with 2 pixel fugly borders, a gray focus state that felt more like a disabled state to me ... And it was horrible!

A certain custom template engine made by some bored developer who had too much free time and thought he could create something better than other widely used template engines. He somehow convinced the lead dev of the company at that time to use his wonderful creation and it is still there after many years.

Spoilers: it is not better than the template engines he copied the features from, and it somehow fucks up certain parts of the css and javascript which makes it a real pain in the ass to work with.

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.

i could tell you some stories but the truth is, it‘s actually Porn

Literally every time I use html and css

Most annoying part of frontend application development is testing 😐 Any others have a same problem as me?

display : inline-block;
AKA, voodoo magic for css

Making things sticky. Like actually properly working the way it should sticky.

This sort of CSS failure:

div { display: inline-block; width: 50%; }
span { display: inline-block; width: 50%; }

<div>go left</div>
<span>go right dammit</span>

The most frustrating part with css is like seeing people make animations on codepen where a fkin panda closes eyes or moves around,

And you are like how to Center align this box or this Dam image keeps rolling around the screen

Insufficient for Dynamic Pages, Unpredictable Behavior Across Browsers
If you attempt to view the same website using three different browsers, you may be surprised to find that pages are sometimes displayed differently depending on whether you use Internet Explorer, Google Chrome or Firefox.

Working with someone who made repetitive css code like this:

#home {
x
}
#blog {
y
}

where x and y exactly have same child classes structure with small differences, making css file somewhat large.

No universal standard or whatsoever.

// I can't explain it well, maybe someone with better English can.

Another one someone reminded me of when mentioning !important...

When I first started trying to figure out how to customize Wordpress and spent a week trying to figure out how to defeat its reformatting of my styling preferences when editing posts, only to throw it in the corner and ignore it for the next four years.

Just one more layer of wrappers.

I thought CSS supposed to style the document , but now I need to change the document to get styled properly

There are so many.. but probably my worst was when I was building this project and optimizing it for mobile but for some reason when in mobile view, there was a slight white line on the right side when swiping right or zooming out (shouldnt be able to zoom out either).. checked all the media queries and viewport code and everything was normal so it drove me crazy for a few hours. Turns out, I had 1 little element slightly wider than the viewport but you couldnt tell by looking at it xD fixed the css, but still so frustrating.

When developers have no idea what the fundamental concepts of semantic html is and a solid grasp of Accessibility Design Patterns and just stuff improperly used aria tags everywhere - aka - the output of every enterprise CMS I come across **cough** Sitecore **cough** but it's apparently WCAG 2.0 "friendly". 😪😪 Do you even aria tags bro?!

Trying to encode human readable XML text in a HTML doc.

Sometimes you just give up, wrap the whole thing with a string, and set the value of an disabled input to the string.

Anything I have to do with both.

CSS.... vertical centering back around 2000 before flexbox and frameworks

HTML- before we head css frameworks looked bootstrap. I am done make things pretty ..I make them functional

inline elements

Working with JSF + Primefaces. I was a junior and I remember it was hell. Maybe I'd do OK with those tools now. Who knows.

more like a combination with browser incompatibility. i designed a neat webapp with transitions and stuff only to find it didn't work in the desired browser.

XHTML, I had to work on an old project that was developed around it with IE 11 in mind, many bullshit limitations where a hassle, from all the tech, HTML, CSS and JavaScript. Developing with workarounds was the norm. Never gonna develop with it.

That's gotta be Internet Explorer comparability...

That would be the !important rule, when the client wants some ui change but the stupid library has !important rule applied.. and also the media queries in combination with width/height and percentages, trying to adapt the ui because the client ones ie8 support..

I just noticed exp. Rather than experience.

Was there a need to abbreviate? The first thing I thought of when I noticed was Pokemon games...

HTML: Tags. I fucking hate them. Yes, Emmet makes it fast and simple to create them, but when restructuring or deleting things it becomes a mess every time. And I cant use a templating engine (i think it's called) at work, also I havent found one that I like.

CSS: Trying to apply CSS to Angular Bootrap Components. Everything has a shadow dom + a lot of things are ! important for some fucking reason.

Well the most irritating css thing is a simple BLANK SPACE that we injected somehow and how it destroys the whole freaking css style of that damn page. So you go crazy finding why that damn thing is not aligning and breaking other stuff.
Makes you wanna cry.
P.S. When something like this happens, display: table to the rescue.

Trying to test this React app my team is working on with selenium. There were no classes or ids I could've used to find elements.
I ended up looking for elements by attributes and contained text using XPath.

Fustration? Every time, I'm not good at design, from choosing colors to aligment.
I always end with the try and error method to get something works.

HTML/CSS, as a person who strongly prefers strong languages which nearly guarantee only a single way to explain each possible command there is nothing more to say.

Having to implement my own component from scratch because none of the existing solutions fit my requirements and taste. Oh, and also being stuck with developing the "traditional way" because it seems to me that the learning curve of frontend technologies is quite steep, and I have other things to do!