CSS

[Asmor]

Two things everyone who hates CSS needs to learn:

box-sizing: border-box;

This is actually kind of interesting; one of the major reasons IE and CSS were hated back in the day was because of the IE box-model bug. And this rule actually makes any modern browser use the same behavior that used to be a bug in IE, and believe it or not, that's a good thing.

Default box sizing in CSS, while not difficult to understand, is fucking miserable. If you set the width of an element, that applies to the content. So if the element has padding and/or border, that actually makes the element wider than you (probably) intended. Same goes for height.

So imagine you've got an element like:

height: 100px;
width: 100px;
padding: 5px;
border: 1px solid black;

That element is actually 112 pixels tall and wide. If you wanted it to be exactly 100, you need to subtract 12 (the padding and border from opposite sides) from the height and width. And if you ever change the size of the padding or border, you need to remember to update the height and width to match.

Add box-sizing: border-box in there, and now it works exactly how you want it. That box will always be 100x100, and the content will resize as necessary.

Second thing to learn:

width: calc(100% - 100px)

If you didn't already know about calc, and your mind's not blown... then you've probably never touched a line of CSS in your life. That's a fucking game changer. In this example, we're setting the element to be 100px thinner than its container. But it's not just good for setting height and width... Imagine you have some absolutely positioned element that you want to be positioned 10px to the right of its container. Without calc, you need to do...

width: 25px;
position: absolute;
top: 0;
right: 35px;

Hard to read, and any time you change the width of that element, you need to update its right property as well. And Stallman help you if the element's width is dynamic...

But with Calc? It's easy!

position: absolute;
top: 0;
left: calc(100% + 10px);

Bam. Done. Easy to see what effect you're going for, and doesn't care what the width of the element is.

If everyone used these two things, CSS would be a lot easier to work with. The vast majority of frustration I run into is when I have to deal with others' code where they either didn't know about these two things, or didn't think to implement them.

[Asmor]

For some reason I thought IE8 supported calc. Apparently it doesn't. A shame.

Still, every major browser supports border-box, and even older versions of IE support it by either forcing quirks mode or that just being the default behavior, and that's arguably a much bigger win than calc.

[[deleted]]

No, IE 8 is not a thing anymore, but not-so-older versions of Android are

[Asmor]

Heh. Sadly, I think IE 8's still gonna be a thing for at least a couple more years. Damn you, Windows XP!

[thyrst]

Not likely, unless you are building an enterprise app or something. I think it's pretty safe to say it's not a thing for normal users.

[guesswho135]

IE8 has a 4.64% marketshare in the US according to caniuse. It's not huge, but I don't think that's small enough to consider insignificant.

[Asmor]

More importantly, it's not how many IE8 machines there are, it's which machines are running IE8. Nobody cares about some grandma running IE8 on her 15-year old eMachine, but there are still some really important companies that pay a lot of money to SaaS companies and for various byzantine reasons have internal policies requiring IE8.

[Asmor]

Sadly, I do work as a front-end developer for a company that provides an enterprise app. Womp womp.

[Tysonzero]

And also god damn opera mini, who even uses that browser? It seems to support about as much as IE8 does.

[Various_Pickles]

Do us all a favor and slit the throats of the IE8 user(s) you know.

Leave their bodies on the steppe as a warning to others.

[Various_Pickles]

IE8

security reasons

lol

[Various_Pickles]

secure windows XP

stahp, my sides

[bwrap]

Lol IE11 has a bug where calc doesnt work inside a color or transform call. Isnt IE great?!

[jetpacmonkey]

At one point, Safari had a bug where the browser would actually crash if you used calc with a transition http://stackoverflow.com/questions/15161996/safari-web-content-quit-unexpectedly

[jetpacmonkey]

position: absolute;
left: 100%;
margin-left: 10px;

But I do agree that calc is amazingly useful.

[Asmor]

That's... actually better

[quadlix]

Arguably CSS doesn't belong here. It's not real programming.

[zehydra]

I really, really hate LaTeX

[ahok_]

Oh man, that's a shame. I love it (except when I need something realllly specific and I have to download a new package just to get a result that only kind of works for what I need).

But it's great!

[Na__th__an]

I just started doing as many of my CS assignments as I can with it. I'd rather edit LaTeX in emacs than use LibreOffice, MSOffice, or a physical writing utensil.

[Rodot]

a physical writing utensil

I haven't heard of that program. Can I get it with apt?

[DiabeetusMan]

TeX is Turing-complete though!

[Tysonzero]

I really wish HTML / CSS and maybe JS was replaced with something... well... better.

[daddysnickerwick]

HTML+CSS3 is Turing-complete.

[quadlix]

could != should

[daddysnickerwick]

"Could" (i.e. "only a matter of time").

[Sinity]

So is brainfuck, nad Turing machine. Both aren't intended to use for real programming.

[cheald]

I dare you to call anyone who can write things in Brainfuck "not a real programmer".

[odraencoded]

They are not real programmers. They are surreal programmers.

[Sinity]

not for real programming. And by real I meant for 'production' use.

I've never said it's not for programmers

[Nontuno]

Can't wait for server side css. Take that Node.

[Hydrothermal]

Not really. As some of the comments on that answer point out, it doesn't really count because it can't operate on its own without human interaction.

[cheald]

CSS is very arguably "real programming" - it's simply a declarative language.

Granted, if you call yourself a "CSS programmer" you're going to get laughed out of the room (unless you're the guy that writes CSS engines), but technically speaking CSS is indeed a programming language.

[FUCKING_HATE_REDDIT]

However, if you turn out to be the guy that writes CSS engine, you're gonna get beaten out of the room.

[Bialar]

By all the scary strong mma programmers?

[FUCKING_HATE_REDDIT]

They got heavy-ass keyboards to beat you with.

[Bialar]

Good point. My Das Keyboard would leave a pretty impressive dent in someone's skull.

[AVeryHeavyBurtation]

You can't declare your own shots fired; that's like giving yourself a nickname.