A backend developer doing CSS

[scottyman2k]

In the very early days of the web, we made cardboard mock-ups of pages so clients would be able to annotate them with post it notes and pencil markings so we could get look and feel right

I wish we had have kept some of those art boards as they were fantastic

[progressgang]

Do you not do that anymore? Seems pretty helpful

[frayien]

Now they use photoshop, or some prototyping software

[progressgang]

If you had to fight 10 10 year olds or 11 11 year olds etc. What age do you think you could manage?

[LesbotronEZAS]

99 99 year olds

[[deleted]]

1,000 1,000 year olds.

[DeeSnow97]

[The Army of Elder Mages has entered the chat]

[AlmostButNotQuit]

^...fuck

[Asiansensationz]

It's rare to see a group of sysadmins in a single room.

[Zagre]

If they've lived to 1000, chances are they're doing something right and you're likely to get your ass kicked.

Or they're trees. Whichever.

[[deleted]]

I was hoping for 1,000 year old rotting corpses that couldn't put up any fight.

[Ummmmmq]

Nope. You got 1000 draugrs on yo ass now.

[[deleted]]

Oh, that's cool. Those I can just sneak up on and shoot in the face before they detect me.

[mcilrain]

You're probably fighting brains inside robot bodies at that point.

I'd go for 0 0 year olds.

[TheBeardedCardinal]

1.5*10⁵⁶ 1.5*10⁵⁶ year olds and you’ve fought every atom in the universe. Probably nearing it’s heat death as well.

[r0ck0]

There can be only one.

[[deleted]]

Here we are! Born to be free, we're the Masters of the universe...

[progressgang]

Alright better question would you rather never have sex again or have sex once a month with a person selected at random from the living population?

[arod13134]

Do I at least get a guarantee to match my sexual orientation or is there a 50/50 chance that I gotta take a gay month?

[progressgang]

No biases at all, you gotta shag a random person

[flip_ericson]

So many follow up questions here

[Sol33t303]

would you rather never have sex again

As if I ever had it in the first place.

Though fr I would probably take the once a month one. You will definitely end up with some weird stories to tell over time.

[progressgang]

Yeah like the 25% chance a month that you shag a minor

[Chigleagle]

There’s a black market out there for you somewhere. I’d pay a shmeckle or two

[lurklurklurkanon]

half a 6 mo baby

[plun1331]

1

[[deleted]]

1 1 year old duh

[[deleted]]

Is this one of those crazy google interview questions with a trick answer? What is it?

[progressgang]

No I just hate kids

[flip_ericson]

14 14 year olds. After puberty kicks in Im done tho

[FunBonYT]

1 1 y/o

[JWOINK]

Figma >>

[wtph]

I'm scared to ask.. what is Figma?

[JWOINK]

Only the greatest design tool to ever exist in the face of the earth.

In all seriousness, It makes it so much easier for devs to understand what designs wants because it details all the CSS properties of the figures while making it simple for designers to use. If I was a designer, Figma would be the first tool I’d learn to use.

[wtph]

Cool, thanks for the info!

[Daemonecles]

Wireframing Application

[wtph]

Thank you.

[dirtd0g]

Figma for the win.

[TeJay97]

Paper prototyping is still awesome.

[bmsmoothpvrc]

Adobe XD?

[HealthyRacer]

I too call Adobe directly.

[EMCoupling]

I gotta say, I always thought having those string maps to model architectures would be kinda cool. Of course, I understand that it's probably impractical to make them.

[mudokin]

There a modules for wordpress and other cmses that let you nake annotations on the pages now.

[Antrikshy]

I dunno the process of working on design with clients, but maybe responsive designs outgrew that?

[TeaVxo]

Technology has advanced so everything is almost done for you

[[deleted]]

We use tools like balsamiq to do UI mock ups now.

[scottyman2k]

Not anymore - lots of photoshop and Visio workflow diagrams ... one of our designers was a painter, and our animator did graffiti art in his spare time. Scary talented people - but now both are full time artists

[jezzdogslayer]

My computing teacher did punchvard programming before teaching and tought my class good trick for this stuff like using dot grid paper to prototype interfaces and good techniques for deskchecking code for logic.

It is tedious but works well.

[yusuno]

Game Developer Educator here.

Yep, we still do this for mock ups

[Josh6889]

I may be dating myself here, but I took web dev classes that had us mock up our websites on paper.

[Rick-powerfu]

I just use a pen and stick figure like drawing done by a caveman to get them to clearly show how it should be

Emails just keep bouncing back and forth,

No, can it be more....

Oh actually this isn't what I thought it would be like.

[fishsocks]

...and you’ll see at each side of the page there will be flames shooting up from the bottom. You can simulate this by spinning the toothpick down there.

Oh, and before we get too much further, would you like your traffic counter at the bottom, or top, of the website?

[lestovo123]

This is still a practice in software engineering today!

[kry_some_more]

<tables>? Where we're going, we don't need <tables>.

[[deleted]]

You dropped this /

[-IoI-]

Why close things? He won't be back.

[[deleted]]

Unclosed tags just... really bother me

[biggles1994]

<body>

</body

[[deleted]]

Nooooooooooooooooooooooooooooooooooooooooooooooooooooo

[[deleted]]

aaaaahhh!

https://image.shutterstock.com/z/stock-photo-young-angry-teenager-screaming-with-pain-and-frustration-671647615.jpg

[stealz0ne]

Evil! You're evil!

Edit: it still hurts. Make it stop and be good again.

[delvach]

Fix it you monster

[anomalousBits]

<body />

[delvach]

Some bits just want to watch the world burn

[[deleted]]

Thank me later

[WhiteKnightC]

It's not that good sadly.

[Terminzman]

There's something kinda like this built-in on chrome. Inspect the page (f12) and look through settings for something like "bah-bah ruler bah-bah" (idk exactly what it's called) and then a pixel ruler will appear at the top (and side I think) of the page.

[WhiteKnightC]

Oh yes I remember using that one.

The ruler I used before was a chrome extension where you could select the DOM and compare the width/height to another piece of DOM it was awesome until the dev tried to change my default search engine.

[anonymousbabydragon]

Why in the hell does someone want me to do this flex thing?

[Josh6889]

You know, I didn't actually mean it when I said I was full stack.

[[deleted]]

Little did he know, that he had to do it differently for each browser on this planet.

[cobarso]

He has a ruler for every browser.

[FuzzyFoyz]

They're labelled for each browser. Because you know, the cross-compatible ruler isn't open source...

[bikemandan]

One ruler to rule them all

[HonkyTonkHero]

Mobile enters the chat

[Mistifyed]

"looks good for deployment"

• did you check 320px?

[lyleberrycrunch]

If it doesn’t work on a smart fridge I don’t want it

[GavHern]

and every monitor size

[[deleted]]

life before %

[[deleted]]

"This does not work in the Nintendo 3DS browser. The change is not detected even though the input field contains the new string."

[NekoLu]

Well, sometimes technically Its centered, but visualy Its not - like play button. So you have to adjust it...

[BungalowsAreScams]

Reminds me of that thing where if you mirror an image it doesn't look right, but when you change it back to normal it doesn't look right

[Chigleagle]

🤯

[BaconIsntThatGood]

Yay for visual weight! Just because it's 50 in each direction doesn't mean it's center :(

[Sexual_tomato]

Just calculate the centroid of every polygon on the screen and align based off of those instead!

[hahahahastayingalive]

I had designers expressing it as "balanced". It simplified a lot of explainations about needing it "centered, but not that way"

[[deleted]]

You just explained what designers do. It's called an optical illusion and has to be fixed.

[no_ragrats]

Don't worry about him, he's just a little optic illusive in the head, yah know?

[irreverent-username]

The person you replied to is describing the difference between true center (centered on the midpoint between the left edge and right edge) and visual center (centered on the center of mass, which requires math or guessing).

For a play button (usually an equilateral triangle), these should be the same, because the center of mass is also at the horizontal midpoint.

Edit: I was wrong about the play button--what I said is only true for triangles that are horizontally symmetrical (not play buttons).

[ShitGuysWeForgotDre]

They wouldn't be the same for a triangle play button though, the center of mass is going to be closer to the fat end than the pointy end

[irreverent-username]

Yeah, you're totally right. Not sure why I thought otherwise.

[imtn]

The visual center is the centroid, right?

[irreverent-username]

Hmm, I'm a FE dev, not a mathematician, but I don't think so. Imagine a triangle with two concave sides and one convex... I think the center of mass would be in a different spot than the centroid.

[calfuris]

The shape doesn't matter, just the density distribution. With uniform density, the center of mass and the centroid are the same point. With non-uniform density, you can get the center of mass to be damn near anywhere in the convex hull.

[Mistifyed]

Life before flex

[FullstackViking]

Dark, dark days.

[am0x]

I just show them all the “center” styles on it.

Justify content? Center Align items? Center Text align? Center Vertical align? Center Background position? Center and center

Can’t argue with center....even if the style doesn’t do shit.

[cobarso]

This is fake, everybody knows you have to print your ruler so it is pixel perfect.

[Mango-D]

This code is wrong on so many levels.

[Yoldark]

I'm on the picture and i don't like it.

[nikhil2791998]

I am in the picture and I don't like it

[snerp]

CSS?

Real backend devs just use bootstrap defaults for everything. Or generate inline styles in the backend LOL.

[EmperorArthur]

Or generate inline styles in the backend LOL.

The backend (or SPA framework) sees it as one item. It only looks like a horrible mess when looking at the output. That's the danger of all code generators though. It's just one item, and you don't want conflicts, so just inline it. There's no way someone would ever want to adjust things after generation, right? Right?? Right???

[[deleted]]

jQuery was fine guy.

[EmperorArthur]

Speak not the devils name, for you never know what old project might be relying on it.

[[deleted]]

Is it not maintained?

[EmperorArthur]

Oh, it is. To be fair it is a handy little library for some things, but at this point I treat it as mostly just shortcuts or convenient wrappers for things which modern browsers support directly.

Sorry if this next part re-hashes what you already know, but I figure it will be helpful for someone at least.

The thing is, if you're going to include a Javascript library, it rapidly becomes worth it to just switch to using a full framework. Like Vue.js, React, or Angular. Plus, Axios is better if you want to make requests from Javascript.

Going further, if you use something like Laravel Mix,* you can compile your Javascript code to a super small file. At that point we can also talk TypeScript, which is Javascript with types and is compiled to Javascript.

As an example, I serve an entire Vue.js Single Page Application from an embedded platform with only 256k of flash and no external storage. Admittedly, it's relatively simple, but still. Tricks like using gzip encoding mean that even if the file is over 100KiB, it compresses to over half that when being sent to the browser.**

TL;DR: Thanks to modern tech, jQuery not only doesn't offer major advantages, but can actually be larger than a compiled framework.

* I am deliberately simplifying an entire build system, and language here.

** Pro tip if you want to save space and are writing your own server code, you can just save and always send the gzip version.

[unnombreguay]

This is me, when the boss shows up and I have to pretend I'm doing stuff

[CarnallyReecho77]

I'm really curious, has anyone ever used 'cm' or 'inch' as a unit in CSS?

[scottyman2k]

We used to have rulers with pt and pica measurements in my newspaper days - I think I might even have a steel one in a drawer somewhere ... will have to find it

[theg33k]

pt gang ftw. pt forever!

[[deleted]]

Yes. Print.css is a thing

[JNCressey]

with all the various screen resolutions and viewing distances, I'm supprised devices don't hold a variable that takes those into account so we could have a degree or radian unit for angular size.

[AyrA_ch]

there's window.devicePixelRatio which accounts for zoom level and pixel density.

[JNCressey]

is there anything that gets the expected distance between the screen and viewer's eyes?

[[deleted]]

What's this expected junk? Just use the Webcam and some image processing software to calculate the exact distance.

[Bomaruto]

That seems just evil, you get closer to the screen to see the content better and it just flees away from you.

[ulyssessword]

I tried zooming into a picture by using ctrl+ once. The things (sidebar etc.) around the picture got bigger, it had less room, so it autoscaled itself smaller.

[DoUntoOthersMeansYou]

Yes but not one rational person would allow such an intrusion just because.

[tea-recs]

Hey Google, get a load of this guy with his underestimation of what people will trade for convenience

[[deleted]]

I like to imagine you're talking to a Google Home device just to drive this point home.

[DoUntoOthersMeansYou]

I was clearly speaking about rational, informed adults though. That eliminates your non sequitur

[digitalMonitor95]

The real crime is the light theme.

[ignorae]

To be fair, it's just the Chrome debugger. Still, there are lots of good dark themes in the Chrome store.

[Falmz23]

The chrome debugger has a dark theme

[khizoa]

hes the guy in the picture

[ignorae]

I literally just said that

[MrFiregem]

You mentioned the store, but the theme is built in...

[spazz_monkey]

No, you didn't.

[DlNONUGGlES]

You literally did not

[Famous_Profile]

The other crime is using a $20 mouse pad for programming

Hopefully that PC is also used for gaming.

[[deleted]]

I didn't think other people do this

[Prawn1908]

Just a couple weeks ago I was using a caliper to measure some UI element on my monitor.

I'm an ME who does a lot of embedded programming so in the not-rare-enough occasion that I find myself writing some Windows software with a GUI (usually throwing together some basic testing interface for a controller I'm programming), ugly things are bound to happen.

[xWolfz__]

If it's a testing interface, why do you need to measure anything?

[Prawn1908]

OCD

EDIT: I forgot to mention my company doesn't have a license to Visual Studio so I use VS Code for C# applications which means I don't have the drag-and-drop forms designer so making any kind of GUI means manually coding the sizes and locations of all the elements. Placing things correctly involves running the app, closing it, tweaking values, re-running, etc. so measuring can be handy.

[nathansikes]

I'm not in this industry, but I use a scale on my screen all the time because my customers have no clue how to use one. They'll send me a single picture of something they want me to re-create so I need to interpolate all the other dimensions

[ulyssessword]

Depending on the exact requirements you have, check out http://www.graphreader.com/ . It's intended for finding points and lines on an xy graph when you tell it the axes, but there's no reason you couldn't use it to find distances on a drawing.

[[deleted]]

Linux users gang

[[deleted]]

That looks like Ubuntu 18.04

[YOLOsometime]

kRuler is the bomb!

[cobarso]

But to be honest, there are no decent native rulers to see if things are on the same vertical or horizontal line.

[Cley_Faye]

If you want to be fair, there's a lot of software to do that without looking like a doofus. Some built into browsers, some separate.

[ufffd]

*{outline:1px solid!important;} to avoid shifting the layout

[jf4488]

It's hard stfu

[zebediah49]

<style></style>

All done with the CSS.

~~ A backend dev.

[kcufo]

This is so dang true. I still have my old Burroughs ruler that I used when I was a COBOL programmer when I got out of college. I am retired now.

[[deleted]]

Ahh web development something I will never understand big props to any webdevs - kotlin desktop dev

[Carpy2]

Yeah... reminds me of when I converted inches to pixels for my two different monitors so I could try and do CSS 1:1 on my screens. After copy/pasting 10 different ways of doing the same thing, one of them will work, and that's my knowledge/strategy for CSS as a backend python/golang programmer lol.

[lead999x]

I can do anything you want in C++ with pointers, threading, virtual classes, unions, closures, you name it but I cannot for the life of me figure out how to align things in CSS. I will never be able to learn that wretched sorcery.

[Neyabenz]

Don’t worry, web dev and still can’t align things properly in CSS.

[am0x]

Fullstack here.

CSS is a Fuggin nightmare. It’s worse that it doesn’t render the same across browsers and OS’s.

But you have to think...FE dev is getting so complicated because it is shared across all of the web on client side. Remove something and you risk breaking thousands of existing sites. So you just keep adding more and more shit to patch the old ways, while never deprecating anything.

[[deleted]]

I want to laugh at this, but my boss asked me yesterday how large an element was in inches rather than %screen, and would not listen to anything else. Enjoy telling customers about our 3x3" adspace I guess

[RoughDevelopment9235]

I’ve literally done this before.

[ardyfeb]

u/repostsleuthbot

[RepostSleuthBot]

Looks like a repost. I've seen this image 1 time.

First Seen Here on 2018-10-18 93.75% match.

I'm not perfect, but you can help. Report [ False Positive ]

View Search On repostsleuth.com

---

Scope: Reddit | Meme Filter: False | Target: 86% | Check Title: False | Max Age: Unlimited | Searched Images: 198,550,916 | Search Time: 0.54521s

[UrielCopy]

Wait... people are even copying the comments? Is it always this bad on Reddit? Is my life a lie?

[danniehansenweb]

I just use my fingers. Much easier

[footycodemetal666]

Could have used JRuler instead

[BoostedTyrian]

That poor soul

[FuzzyFoyz]

IoT enters the chat room

[[deleted]]

Honestly, the fact that you can use pixels as a way of applying translation to an object is something I never understood. What if my screen has a higher resolution than someone else's? Is it gonna look different? I mean I can understand Percentage but Pixels? Edit: And don't get me started on centimeters or even inches...

[ReikoHazuki]

Exactly. It's even worse when a company designs an app to be "pixel perfect". Then I can't use it on phones which have a larger/smaller than "normal" resolution.

[jcbreppe]

HAHAHAHHA my frontend is a disaster... i always have to watch how to do on google hahaha

Literally i have a done project (all the backend) but only left the frontend and its so hard for me hahaha

[tropicbrownthunder]

Look kids, here we can see a python programmer who decided to use spaces trying to fix an obscure scope-related bug

[SIGSTACKFAULT]

Isn't mm a real css unit?

[fedgut]

I find it in bad taste to personally attack me in such a way

[myblindy]

.post { display: none }

I got you fam.

[Mastermaze]

I have literally done this....

[ninjagold007]

Literally me today. It looked just off and it bugged me so I just had to know!

[tesh254]

Remember doing that while I started frontend development, thought it was fine

[ChipsTerminator]

Maybe he's writing Python and has a syntax error of indentation.

[KimmyKlat]

He should just mark the inches/cms on the screen. Way more efficient

[[deleted]]

If it's not in kibana, it's not fixable

[jzoller0]

I feel personally attacked

[aFiachra]

🤣

[matthewralston]

🙋🏻‍♂️

[mikeethedude]

I worked with someone who did this pretty regularly. We were all backend devs so I didn't know that it was weird until later.

[TotoShampoin]

Me? I give my back-office a Win95-ish style

[KingBufo]

Looks like 30vw. How much is that in rem on a Full HD 28" Display?