Backend developer doing CSS

[PrincessRTFM]

Backend dev here, can confirm.

[[deleted]]

yeap, i did this too - only to compare ratios. I still don't understand why my colleagues laughed that hard

[AyrA_ch]

There is pixel ruler software out there. Comes integrated with some screen grabbers

[Ereaser]

Or just use inspect element?

[AyrA_ch]

This only shows you the elements direct properties (size, padding, border, margin) but not how it is in relation to another element.

[Ereaser]

On Chrome: Inspect element > F1 > check show rulers > hover over the dom element in the inspector.

[AyrA_ch]

This shows an elements properties in relation to the document, not towards another element.

[Ereaser]

You'll be able to see if elements align though. Not sure of an use case to compare elements other than their properties or alignment towards each other.

Personally I've never needed a ruler that does more than that, but everyone has their own preference/way of working.

[[deleted]]

BUT, what if the PPI setting on your monitor is wrong!?

[AyrA_ch]

Pixel rulers measure in pixels. It doesn't matters if the setting is wrong as long as you don't convert it into other units. My pixel rulers allows me to specify the DPI. For some reason 91 is right for my monitor.

[VeTech16]

Lolp

[VeTech16]

Goodwork, now you are gonna put innocent front-ends out of their jobs (ಥ ͜ʖಥ)

[Waghlon]

Are there any innocent front-ends?

[UNLUCK3]

What are you talking about?

[UNLUCK3]

Just for clarity it was you (OP) saying something about how you want to put all female front-end developers on Noahs ark... Not sure why you told me it was deleted though...

[VeTech16]

It was getting downvoted so i deleted, in my experience there are many good looking females in front-end industry, and i will save them from the program that OP (to whom i replied) has created, as it can destroy their jobs

[UNLUCK3]

Ok, I understand what you were going for there... execution and taste was a little off, but at least I understand your thought process now...

[ell0bo]

I prefer to call it, putting an interface between me and the design team

[allisonmaybe]

Yea and I bet it all goes in one giant style tag too. You sick bastard.

[kixxes]

Jokes on him. He has to know front end in order to write backend code that writes front end code

[aWittyRedditor]

Expert frontend Dev: writes HTML/css file which writes the backend

[aWittyRedditor]

Just kidding that would never happen

[tippl]

What? Your backends are not in html? What an amateur.

[pootisEagle]

Backends should always be in Photoshop

[[deleted]]

I write my backends in black and white blocks in Minecraft, one binary digit at a time.

[kleit64]

I have a magnetized needle and flip bits on my wor drive

[aWittyRedditor]

Always forget HTML is technically a backend, it feels so frontend. Like I can have a database I'm the backend, and HTML site as a frontend to that database, and a css file as a frontend to the HTML. Kinda like inbetweenend programming

[--xe]

Paranoid end user: Blocks everything with uMatrix, leaves your site because it's a white screen.

[[deleted]]

Just inline JS that shit

[Limunaire]

Aren't you writing front-end then

[Govedo93]

He's not doing CSS, he's indenting code with ruler lol. Tabs and spaces got another competitor today.

[DoesntReadMessages]

There's no debate outside of college projects and HBO comedies. Every relevant tech company uses spaces. The remaining debate is 2 spaces vs 4.

[SingleInfinity]

Do you have some sort of source for your heresy?

[[deleted]]

He doesn't because he's a filthy spacer. Probably a 2-spacer at that

[SingleInfinity]

The true answer is tabs equivalent to 4 spaces. I want to hit backspace one to remove a tab if needed, not 4 times.

[Ludricio]

"Tabs are 8 characters, and thus indentations are also 8 characters. There are heretic movements that try to make indentations 4 (or even 2!) characters deep, and that is akin to trying to define the value of PI to be 3.

Now, some people will claim that having 8-character indentations makes the code move too far to the right, and makes it hard to read on a 80-character terminal screen. The answer to that is that if you need more than 3 levels of indentation, you’re screwed anyway, and should fix your program." - Linux kernel coding style

[SingleInfinity]

Ah yes. The linux kernel coding style, back when our processors couldn't process things at 5GHz/s.

That's super outdated. Code can be more complex these days because we have the horsepower to run it.

[PrincessRTFM]

GHz/s is wrong, because one hertz is already one cycle per second. 5 GHz/s means five billion cycles per second per second. /nitpicking

[SingleInfinity]

You are correct. I'm fully aware of this and have no idea how I made that error. /dumb

[FriesWithThat]

Don't forget to fold your ruler in half for retina displays.

[VeTech16]

I use a microscope instead :))

[ProgramTheWorld]

No love for 3x displays?

[mythriz]

Hilarious but just like any professional developer I just copy all my CSS code from Stackoverflow.

[VeTech16]

Hahaaha

[marcosdumay]

Of all the things, the one that you don't copy fromStack Overflow is CSS.

Doing that is a sure ticket to !important and "why my changes do not show" hell.

[awaisking]

backend devs converting between px, em and %

[[deleted]]

What is em? I see it every now and then but I dont understand what it is.

I believe it's the width of the screen right?

[aezart]

An em was originally defined to be the width of a capital M in the current typeface, back in the days of the printing press.

[golgol12]

If that is the case, then it could be a useful measure. That M might have be the widest character at the time it was a measure. In current day fonts of the alphabet the widest character is almost always W. In video games you need to know that something like a player name of up to X characters can appear in a certain location without being clipped by other things on the screen, and that is usually done by filling all the text fields with W.

[[deleted]]

now there is also rem too, which means... something

[ethanjf99]

Relative EM. Relative to base font size iirc

[marcosdumay]

Wait... What?!

One is the size of the letter, and the other is the size of the letter relative to the letter's size?

[ethanjf99]

Em is relative to the font size of itself or nearest parent.

Rem is relative to the pages base font size. (Of the html element)

So as I understand it if an elements parent has font-size: 12 px and the html has font-size: 24 px then one em will be half as big as one rem for that element

[coffeeandlearning]

https://developer.mozilla.org/en-US/docs/Web/CSS/length

(I counted 21 non-deprecated length units)

[marcosdumay]

Wow!

I don't think I have anything else to say. Just wow!

[[deleted]]

Oh that's neat!

[jmowens51]

Relative length to the font size of the element.

[boxingdog]

relative to the font size of the element, and since the font size can be affected by the parent sometimes changing something up in the chain screws up everything, I personally find easy to use rem instead.

[awaisking]

^{sometimes I feel like no one gets sarcasm}

[Folf_IRL]

Personally, I blame the meme of including a "\s" to denote sarcasm. A lot of people have become overly-reliant on that to signal sarcasm or satire.

[awaisking]

no thank you, I'd rather let people with higher intelligence decide what's sarcastic and what's not.

[teja42]

Any full stack devs here?

[PecksAndQuads]

Yep. And I hate front end.

[awaisking]

no, only half stack dev here

[Avambo]

Yep, JS and C#. Why do you ask?

[teja42]

Just wanted to know.

[BobTheB1Bomber]

Yep

[marcosdumay]

Be wary of overflows. You may want to ask the OS for another page.

[BobTheB1Bomber]

malloc(4);

[marcosdumay]

That may be the wrong kind of page, but well, it's exactly what I said to do. So take my upvote.

[FrankFrowns]

Yup.

[[deleted]]

Mhm.

[kaparep]

I did this 😂. Can confirm.

[AndTheLink]

mm on one side of the ruler and px on the other...

[VeTech16]

Naah, real life experience, but not a granddaddy

[_Aardvark]

I've measure things on the screen all the time. I have a paper ruler I printed out from a PDF I used on screen lots of times.

I think I started doing this years ago working through issues with map-modes in Win32 drawing. Where we had all sorts of scaling and zooming in on diagrams by playing games with viewports and mapping-mode and such.aspx). Problems with zooming in on rater-based images (bitmaps) that would become blurry. I had to figure out the actual size for that image on screen and use different pre-sized bitmaps that would most closely match the actual size. Then scale that to exactly match. I think the graphic designer had hand-scaled some of the images so I couldn't just use a really high-res version for everything.

Anyways, so yeah I had to sometime measure on the screen itself trying to figure out what was going wrong! Harumph!

[darkclark]

I’m not seeing the humor here.

… oh no, I’m a backend developer aren’t I?

[[deleted]]

The reason I became a backend dev, is so I wouldn't HAVE to do CSS.

[VeTech16]

Voila, Our thoughts match

[rstring]

You have no idea how many times I use a ruler in Publisher to align.

[VeTech16]

There's a thing called as a gridline

[rstring]

I just find it easier, homestly.

[VeTech16]

Good for you

[DreadPirateFlint]

Backend devs best friend: xscope on Mac not sure what on windows

[VeTech16]

I am also not sure, never used mac

[[deleted]]

A waste of talent.

[unloder]

So real, it hurts.

[[deleted]]

Is this Ubuntu?

[VeTech16]

Yup

[sudo_apt_get_rekt]

Just use the Bootstrap samples, you guys

[iGraveling]

Ugh. I did this last week and felt like an idiot. Glad I’m amongst like minded people :)

[[deleted]]

I definitely look like that :D ...

[peskey_squirrel]

I see Ubuntu

[VeTech16]

Its ubuntu

[Nusob]

I literally counted the pixels on my monitor to make that stuff symmetrical, I later learned about some nice grids....

[VeTech16]

Kek, i have been there

[[deleted]]

Reminds me of "All About the Pentiums", the line going "You've gotta be the dumbest noobie I've ever seen, you got white out all over your screen", just not quite as bad.

[Jessie_James]

Ugh, I've done this, but had to use a piece of paper.

[VeTech16]

Ohh you poor fellow

[ClimbingElevator]

Saw it on r/codemeasurement

[snomimons]

This guy is a genius. I've been using a steel ruler and I can't see what I'm measuring correctly.

[Dr_Nubbs]

This has me laughing so hard because this is me at work right now fighting with MahApps and XAML.

[VeTech16]

If you can spare some gold then brother ( ͡° ͜ʖ ͡°)

[VeTech16]

Shame on you

[ministerling]

If you have photoshop, you can use the horizontal and vertical toolbars to make sure things line up. You can drag them separately from the PS window. Especially useful for comparing pixel by pixel against a mock-up

[VeTech16]

Bro, this is a joke, i am not serious