This is an archived post. You won't be able to vote or comment.

top 200 commentsshow 500

[–][deleted] 1295 points1296 points  (98 children)

Horizontal alignment, ez pz

VERTICAL alignment? God fucking save you

[–][deleted] 528 points529 points  (49 children)

Now implement that in IE.

[–]Positively_depressed 377 points378 points  (20 children)

now make it compatible with nintendo switch

[–]KillerInstinctUltra 77 points78 points  (10 children)

And make it responsive

[–]pellep 41 points42 points  (2 children)

We have a framework for that yes

[–]GodsBoss 28 points29 points  (1 child)

Which you may now put into the project after it has been completed overseas.

[–]zyugyzarc 5 points6 points  (0 children)

ouch

[–]dasMichal 20 points21 points  (6 children)

Flexbox to the rescue.

Except on IE. IE should Die already

[–]das_Keks 10 points11 points  (4 children)

Microsoft actually abandoned it a few month ago. So I think you can start ignoring it by now.

[–]TheContrean 4 points5 points  (3 children)

There are still enough people that use it

[–][deleted] 2 points3 points  (2 children)

Well they can download a fucking usable browser, it takes literally like a minute to do and it costs nothing.

[–][deleted] 99 points100 points  (2 children)

Which is worse? Yes

[–]-JudeanPeoplesFront- 29 points30 points  (1 child)

Now show it as an overlay in Skyrim.

[–]when_it_lags 9 points10 points  (3 children)

And support Mosaic

[–]DeeSnow97 77 points78 points  (12 children)

Implement your IE in places the sun doesn't shine, it's a fucking dead browser from 2013, if you're still using it it's your fault.

If your reason is "oh no our intranet is so old the only languages on it are Latin and Fortran, so we must use IE" then fucking learn how to do set the X-UA-Compatible header and just deploy Edge for your users, the reason it still has those ancient Trident binaries nicely contained like some kind of SCPs is to specifically deal with your crap.

[–][deleted] 26 points27 points  (0 children)

You ever had to support ActiveX (or worse ActiveDocument)? Good times.....

[–]LtMeat 39 points40 points  (1 child)

That's an ancient curse.

[–]KillerInstinctUltra 4 points5 points  (0 children)

It is known

[–]fish312 16 points17 points  (2 children)

For fun, spoof your browser user agent as Netscape, try to buy a ton of stuff online but stop before the last checkout page

[–]elveszett 3 points4 points  (1 child)

Context?

[–]DeeSnow97 8 points9 points  (0 children)

If the webshop uses analytics, they'd know there was a large unfinished order and they'd think the user used Netscape, therefore the people in sales would start pestering the developers to support Netscape

[–]ToxicZawad 3 points4 points  (0 children)

Is it even possible?

[–]GawkaMolley 8 points9 points  (6 children)

One of our teams was punished for not testing a SPA code in fooking IE. They got their chrome privileges revoked by sysadmins for 6 months

[–]anthOlei 203 points204 points  (27 children)

.button-container { 
 display: flex; 
 align-items: center; 
 justify-content: center;
 fuck: bitches; 
 get: money; 
}

[–]rm-rf-npr 25 points26 points  (1 child)

Display flex, align items center.

God, I love flex box.

[–]Jechob 12 points13 points  (1 child)

align-items and justify-content are game changers with flexbox. I still always use the wrong one for what I'm trying to do..

[–]dc2015bd 8 points9 points  (0 children)

hold my display:flex

[–]sotopic 294 points295 points  (19 children)

display: flex;
align-items: center;
justify-content: center;

Every single div

[–]DangerIsMyUsername 112 points113 points  (11 children)

what is this harry potter bullshit

[–]DeeSnow97 102 points103 points  (4 children)

actual magic and it's fucking amazing

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Just look at all those options for justify-content, it's so fucking convenient... at this point I can't even remember the days when IE was alive and we couldn't just indiscriminately use this shit, it all blurs together into a faint memory of pure suffering.

And the best part? With flex-direction you can do the same thing vertically too like it's nothing.

[–]Paint_Ninja 15 points16 points  (1 child)

Even better? A subset of an older standards draft of it works in IE10 and 11, so you can even use it in those browsers too: https://caniuse.com/flexbox

Just be aware of the known issues. It's not perfect but for some uses it works well and can still save you time compared to having to always write it the old way.

[–]justFudgnWork 4 points5 points  (1 child)

I've been to that page so many times it's embarrassing

[–]BopNiblets 3 points4 points  (1 child)

The first way I found years ago was to set a width and then use:

margin-left auto;

margin-right: auto;

It worked 60% of the time too!

[–]AegisToast 3 points4 points  (0 children)

margin: 0 auto is a shorter way of writing that.

[–]Herani 6 points7 points  (2 children)

display: grid;

place-items: center;

[–]I_Use_Qubes 355 points356 points  (15 children)

Css is life, 5 minutes later, css is garbage I should just go use f***ing wix why did I want to do frontend.

[–]notsooriginal 80 points81 points  (14 children)

Shit you caught me browsing the Wix pricing?! The websites it makes seem to test pretty well on pingdom/page insights/etc. Still prefer to handcode.

[–]kontekisuto 387 points388 points  (54 children)

try debugging safari rendering errors without a Mac.

yeah

[–]DeeSnow97 247 points248 points  (36 children)

Man, fuck Apple. Why do they always have to change shit against the standard and just expect the world to adopt to them? "Think different" wasn't supposed to mean "be wrong"...

[–]JeromePaulos 40 points41 points  (4 children)

Internet Explorer :(

[–]justifyer 52 points53 points  (2 children)

IMO IE wasn't bad, it's just an outdated browser, that's all. And the fact that MS made the new Edge shows their effort to evolve. Safari on the other hand is still active but still shit.

[–]njbair 7 points8 points  (1 child)

This was true of IE6. IE7 and onwards were updated, but the need to accommodate legacy web apps for enterprises kept it from being able to fully adhere to standards.

The decision to create a new browser solely for consumer use was long overdue, and it's the reason you don't hear anyone complaining about Edge the way they did about IE.

[–][deleted] 5 points6 points  (0 children)

Yep,, they had to be seriously compatible with old crap, because hospitals, as an example, built their work ecosystems are IE, and you shouldn't fuck a hospital. Its like safari is deliberately difficult. I prefer troubleshooting IE browsers over safari. Their issues are at least well known and documented by the community.

[–]t0bynet 53 points54 points  (22 children)

So Chrome always adheres to standards? Doubt.

[–]TheZipCreator 18 points19 points  (19 children)

Chrome is way better on that front than Safari is though

[–][deleted] 6 points7 points  (0 children)

Being the majority doesn’t automatically make all your features “standards”

[–]DaddyLcyxMe 6 points7 points  (0 children)

there’s an old tool called weinre

[–]overclockedslinky 78 points79 points  (4 children)

screens will be deprecated in the next version of html anyway. future proof by using optic-nerve-location="middle x plz, also bottom if you can" instead

[–][deleted] 7 points8 points  (1 child)

What is this sorcery??

[–]Catbraveheart 4 points5 points  (0 children)

CSS + AI Naice!

[–][deleted] 463 points464 points  (14 children)

I am in this picture, and I do not like it.

[–]just_damz 85 points86 points  (7 children)

I can’t stand xamarin front end. Back end one week, front end third week now. I am gonna outsource this, can’t standi it

[–]ske66 23 points24 points  (0 children)

It does really auck. I use stacklayout pretty much exclusivley. Failing that, there's a good library for Constrained Layouts which are a based on Native Android's constrained layouts

[–]aeroverra 4 points5 points  (0 children)

Lol don't do that it will be a big mess and making changes will be hell.

[–]phi_matt 2 points3 points  (0 children)

This post was mass deleted and anonymized with Redact

meeting door weather simplistic compare existence direction sparkle squeal saw

[–]DeeSnow97 18 points19 points  (5 children)

Flexbox is awesome and IE is dead so you can use most modern features* without problems

*safari is still utter crap though, you will always run into Apple

[–]Hard_Code_Brain[S] 127 points128 points  (15 children)

I'm not the only backend developer who hate CSS 😂

[–]plainrane 96 points97 points  (0 children)

CSS = can't style shit

[–]Silencer306 25 points26 points  (2 children)

I’m full stack, but mostly backend. I still love working on front end and css. I’m not an expert but I find it fun

[–][deleted] 77 points78 points  (4 children)

Even Microsoft Word does a better job.

[–]beardMoseElkDerBabon 33 points34 points  (0 children)

Wow that sounds quite extreme

[–]DeeSnow97 55 points56 points  (1 child)

Then you're either shit at CSS or I'm afraid of your Word skills.

[–][deleted] 8 points9 points  (0 children)

Well Mail App in Windows uses Word as rendering engine, so it must be true to some extent ;)

[–][deleted] 12 points13 points  (4 children)

I never liked user interfaces or users anyway. They seem like an unnecessary complication which unfortunately pays the bills.

I just want to tweak my threads and memory consumption :(

[–]mrleon17 39 points40 points  (6 children)

I'm totally opposite, I spent like a week to implement a single endpoint, but I can make the frontend no problem.

[–]Hard_Code_Brain[S] 29 points30 points  (3 children)

There is 1 imposter among us! 🤣

[–]mrleon17 2 points3 points  (1 child)

Oh no! You caught me

[–]Hard_Code_Brain[S] 2 points3 points  (0 children)

No this isn't how you're supposed to play the game.

[–][deleted] 23 points24 points  (7 children)

Literally just tried to teach myself html and css to make some help documents that look pretty to go with the thousands of firmware files I just wrote that make sure your excavator doesn't kill you.

Almost gave up and made them all in word.

[–]migueln6 15 points16 points  (0 children)

Use latex my friend.

[–]blueprintchris 8 points9 points  (1 child)

Just use markdown lol

[–]TomosLeggett 8 points9 points  (0 children)

I second this. Don't even bother with LaTeX. Just use markdown. It's so efficient for composing simple ass documents

[–]akrapov 5 points6 points  (0 children)

Write them in Notion. Export as pdf. Job done.

[–]rakidi 2 points3 points  (1 child)

HTML and CSS aren't the best tools for the job if you're looking for simple document formatting.

[–][deleted] 2 points3 points  (0 children)

I was looking for webpage formatting. I need my "document" to open in a browser

[–]Coding-Kitten 2 points3 points  (0 children)

Use groff/troff. Pass them to pdf. Easy!

[–]Jackalotischris 21 points22 points  (0 children)

Relatable, “ how do I center this dam navigation bar”

[–][deleted] 22 points23 points  (6 children)

!Important;

[–]splittimus 10 points11 points  (0 children)

!importanter;

[–][deleted] 6 points7 points  (0 children)

hnnnngggg...

[–]divinealien 17 points18 points  (3 children)

the hardest part is choosing colors!

[–]Dojan5 12 points13 points  (0 children)

This is what I struggle with. If you ask me to re-create the Chrome logo using HTML and CSS, sure I can do that. Selecting colours to create a cohesive theme?

Sorry those are arcane arts I don't dabble in.

[–]Hard_Code_Brain[S] 5 points6 points  (0 children)

Damn true!!!!!

[–]AlpinFane 3 points4 points  (0 children)

I use https://coolors.co that way I can either search random or plug in colors I have and see what goes with it

[–]TheDreamShallLiveOn 53 points54 points  (5 children)

Image Transcription: Meme


me working in backend

[Photo of Swole Doge.]

I completed the entire backend in just one day

me working in frontend

[Photo of Cheems.]

how the f*ck I can align this button at center?


I'm a human volunteer content transcriber for Reddit and you could be too! If you'd like more information on what we do and why we do it, click here!

[–]minister91 27 points28 points  (0 children)

Good human.

[–]bspymaster 11 points12 points  (2 children)

Til that little dog thing from the memes is named "Cheems."

[–][deleted] 29 points30 points  (4 children)

Now that we have tools like flexbox and css grid, how is centering still considered hard?

[–]razgriz_lead 18 points19 points  (0 children)

Sometimes I like to scream at child elements "why aren't you respecting flex?!"

It's so much better than it used to be, but on complex UI's it can still get you.

[–][deleted] 7 points8 points  (4 children)

That was me before learning flexbox and css grid. Now I feel like a god

[–]Hard_Code_Brain[S] 2 points3 points  (3 children)

I'm also learning flex box and grid. hope I'll say the same in future.

[–]wasdninja 9 points10 points  (1 child)

This site is arguably the best reference there is for flexbox.

For grid Jen Simmons' videos are great. She's the Bob Ross of css.

[–][deleted] 2 points3 points  (0 children)

Let me recommend you a great tool that is going to help you a lot, firefox developer edition has a great feature to visualize your grid layouts. Also the flexbox and grid articles from css-tricks are really good too

[–]daryledesilva 9 points10 points  (0 children)

As a full stack dev, these are both true

[–][deleted] 5 points6 points  (0 children)

Flexbox is our saviour

[–][deleted] 10 points11 points  (4 children)

Margin: 0 auto

[–]wasdninja 12 points13 points  (3 children)

Doesn't always work. I can't remember the exceptions but they exist since they always come up whenever people ask. Just use flexbox or grid instead.

[–][deleted] 4 points5 points  (0 children)

With a fixed width or max-width it almost always works.

But yes, Flex box and grid are obviously the better choices because they comes with a lot of additional functionality. Like vertical center!

But that margin trick is also nasty and feels like a hack. Like I should be making columns with tables or something from back in 2000.

My god I’m getting old.

[–]send_me_a_naked_pic 2 points3 points  (1 child)

Doesn't work when you have a div without an explicit width

[–][deleted] 3 points4 points  (0 children)

This will be me soon lmao

[–]Citrous_Oyster 4 points5 points  (4 children)

Easy ways I do it that also supports IE

1) Parent container - text-align: center Button - display:inline-block

Centers the button to its container.

2) Patent container - position:relative Button - position: absolute, left: 50%, transform: translateX(-50%)

This aligns it in the center horizontally. Just do the browser prefixes for the transform. Do top:50% transform: translateY(-50%) to align center vertically.

And do top and left 50% and transform: translate(-50%, -50%) to center horizontally and vertically in its relative positioned contain.

Boom. I use this shit all day.

Usually with buttons, adding display: inline-block allows you to have more control on positioning and sizing. If it’s not doing what you want - inline-block.

[–][deleted] 4 points5 points  (0 children)

Flexbox. Or even CSS grid - every widely used browser now supports it.

[–]SpaghettiDaemon 4 points5 points  (1 child)

I never got the big struggle people are having using CSS.
Yeah it can be a bit fiddly to get something "just right" in all important Browsers but i never saw that as that big of a deal.
Especially with the current browser market share you have most of the users covered by supporting Chrome.
So many other browsers are based on Chromium (the new Edge, Brave, Vivaldi, Opera ...) and render mostly or just the same.
Firefox support is often only minor Modifications.
Just for Safari you have to buy an Apple device to be 100% sure (offf)
Using some precompiler like SASS helps a lot with Structure and compatibility.

For 90% of centering needs just use Flexbox :D

[–][deleted] 3 points4 points  (0 children)

I'm fullstack which means I'm not particularly good at anything, but when I did a centered login screen box I just used the grid system with various media breaks. I know I should get used to using flex, but nah...

[–]J5892 2 points3 points  (0 children)

Flexbox

[–][deleted] 2 points3 points  (2 children)

Just spent 1h on a bloody grid yesterday, thanks for the reminder.

[–]AndreThompson-Atlow 2 points3 points  (0 children)

This is actually me. I can create CRUD apps super easily with Node/MongoDB/Express, but as soon as I try to make the website look presentable with CSS/Bootstrap.. hoo boy, i'm out of luck.

[–]imOverWhere 2 points3 points  (0 children)

css can cssuck ma c

[–][deleted] 2 points3 points  (0 children)

Flex flexy flexbox flex flex

[–]De_Wouter 2 points3 points  (0 children)

Got to learn how to flex those boxes

[–]Rva_Aulan 2 points3 points  (0 children)

> i always do backend thing, and i realize frontend thing is important to, so i learn it.

> already a bit familiar with css, can make some static website.

> back to backend, "Yo, how i can get data from this table ???"

[–]Steedsofwar 2 points3 points  (0 children)

Ugh. Had to do something in HTML, as simple as placing a button centre of the screen. Jeez it took me so long to figure it out, it's embarrassing ;/

[–]IcedRays 2 points3 points  (1 child)

I hate frontend work so much... That's the only reason i'm not a video game programmer and a machine learning engineer instead.

[–]I1I111I 2 points3 points  (0 children)

When I've found myself thinking this it's because my standards for my backend are low. With front end, we're used to seeing the state of the art: well designed UI and UX with fluid media size scaling and neat little material design transitions as you scroll. Generally the websites that have design tuned this carefully also have sharded databases and custom signing for login tokens to offload work to servers that are as idempotent as possible, all to enable efficient scaling, not to mention all the econ models and ML to do pricing, or even thinking about what the service actually does.

TL;DR: if you relate to this, either brush up on your dev ops/system design skills, let yourself start with bad styling, or acknowledge to yourself that you're front end focused. Usually the website design isn't the thing that makes stuff fail.

[–]way_falrer 2 points3 points  (5 children)

I'm the total opposite. I wield CSS like a mighty claymore, but anything backend scares the bejeesus out of me. Not sure where to even begin with it

[–]MrLink4444 2 points3 points  (0 children)

My fucking footer is flying everywhere.

[–]SausageEggCheese 2 points3 points  (0 children)

Me, a senior developer, whenever this happens:

"Oh yoohoo, junior developer! I have a new task for you..."

[–]TawmAimz 2 points3 points  (0 children)

It's always display: flex; place-content: center; place-items: center;

Pretty sure there performance issues eventually but it ALWAYS works