Image Transcription: Meme
STOP USING CSS
* HTML WAS NOT SUPPOSED TO BE GIVEN CLASSES
* YEARS OF MARKUP yet NO REAL-WORLD USE FOUND for styling beyond <TABLE>
* Wanted to center content for a laugh? We had a tool for that: It was called “<CENTER>”
* “Yes please align that content exactly 32.89% left. Please align 59.0px down”
- Statements dreams up by the utterly derangedLOOK at what FRONT-END Devs have been demanding your Respect for all this time.
(This is REAL CSS. done by REAL Devs)[Three screenshots of CSS code, each one marked with a number of red question marks. The first screenshot has five question marks and reads as follows:]
h1 { font-size: .75em; position: absolute; bottom: 20px; width: 94%; left: 2%; }[The second screenshot has eight question marks and reads as follows:]
*{ font-size: 30px; } q::before { content: "«"; color: blue; ] q::after { content: "»"; color: red; }[The third screenshot has sixteen question marks and reads as follows:]
#header ul a:focus, #header ul a:active, #header ul a:hover { background-color: #5A5A5A; outline-color: -moz-use-text-color: outline-style: none; outline-width: medium; }[The screenshots end.]
“Hello center that div please”
They have played us for absolute fools
I am a human who transcribes posts to improve accessibility on Lemmy. Transcriptions help people who use screen readers or other assistive technology to use the site. For more information, see here.
This comment was formatted better than the image.
And not by a small margin.
Good human
deleted by creator
Flexbox
Flexbox everywhere
And grid if you’re feeling fancy
Grid is just flexbox but worse
both grid and flexbox are just
position: absolutebut worse.who needs mobile users anyways, fuck them
I like to draw my pages out on graph paper, then just use
position: absoluteand tons of media queries to place everything with x and y coordinates. It’s the ultimate grid system.
* {
display: flex;
}
This is the way.
I felt that 💔
The web is beyond bloated.
The heavy reliance on JavaScript has suck the joy out of browsing the web for me
May I introduce you to the Gemini project?
It’s a new(ish) protocol for sharing interlinked text documents. It’s intended to sit between Gopher and HTML in terms of complexity and is deliberately, aggressively simple (some might even say crippled) with the intention that it will be nearly impossible to extend the protocol for surveillance capitalism. It’s not trying to replace ye olde WWW, but to provide a human-focused place for text-first, 90’s-style sites to live. …just without the blink tags.
…just without the blink tags.
NOOO! IT IS BROKEN!
How am I build my cool website without a blinking “Thank You For Reading!”???
“This page best viewed while rapidly closing and opening your eyes”
I’d say the over exploitation of JavaScript to leverage tracking, interaction and marketing has helped create the poor experiences we now have on web. The underlying technology when used for creating interactive and helpful UIs is very beneficial
I rotate between 4 websites for content essentially.
Web pages are supposed to be hypertext documents, not “interactive… UIs!”
So I should download an app for everything beyond that?
You’re “downloading an app” anyway, even if it’s JavaScript running in a browser. How do you think the client-side code gets to the client‽
But yes, I think we need a new version of something like Java Web Start, except with the ability to steam parts of itself as-needed instead of having to download the entire
.jarbefore being able to run. If you’re going to have an app, have an app that has proper libraries for the UI etc. instead of hacking everything on top of a whole bunch of DOM cruft!I guess WebAssembly is a step in the right direction, but it’s still too tied to the document viewer known as a “web browser,” for no good reason.
Oh, got that layout looking all nice and modern?
Be a shame if somebody… tried to email it!
The future of HTML is classless, stateless and moneyless! 🏴
HTMLs of the world, unite!
you mock but as soon as these rounded corners are gone everything becomes so … pointy.
As an amateur web designer in the 90s and early 2000s, this speaks to me. I stopped web development when CSS became popular and I couldn’t wrap my head around it.
Is there a petition I can sign to scrap all this nonsense modern web progress and go back to that beautiful, dial-up friendly HTML?
I stopped doing frontend work when responsive design became important. Super unpleasant work. Now I’m happier at the backend where I don’t have to worry about how my shit looks on the 7 million possible screen sizes people are likely to use. Life is more peaceful here.
Alright hang on now - responsive design is about not excluding people based on the device they’re using. Many people do everything in their lives from a low end cell phone and cutting them out is a shit thing to do. Responsive design and progressive enhancement are objectively good things.
The tools have gotten better over the past several years, it’s not as hard as it used to be.
? Who said anything about excluding anything or anyone? I’m just saying I don’t like the work that has to go into making sure nobody’s excluded. In a way, I’m not excluding anyone by excluding everyone now. I quit frontend altogether, left other people to deal with it. At the backend I don’t have to worry about what kind of screen the other end might be using to view the JSON string I sent them. You don’t get “I just looked at your response headers on my 32:9 monitor that I divided into 9 randomly sized tiles and it looks like shit, please fix” calls when you work backend.
Better? Not really. My experience is that sites have gotten “better” for mobile at the cost of making them nearly or completely unusable for people using desktop browsers with non-default settings (especially additional security lockdown, but even forcing a specific colour scheme can break some sites because some idiot calling himself a designer used css background-image for images that are content). Which means a fair number of sites are broken to some degree for me.
The more things change, the more they stay the same.
Those things are completely unrelated? I said the tools for responsive design have gotten better, which they objectively have.
You’re not wrong that most css in the wild is trash, and I love dark mode as much as the next guy but you can’t complain that sites break when you’re fucking with styles. It’s the cost of tinkering.
Frontend developer here, please save me from my torment, thanks
Have you considered just forcing everyone to access your sites via Internet Explorer 5.5?
and netscape navigator. ah my glory days!
In 800x600 pixel resolution.
Ahh the old Nutscrape Aggrivator. Refused to update with Microsoft standards and spent the next 8 years being a pain in the ass for website compatibility.
Microsoft standards?
Sounds like we’re due for a history lesson.
As recently as 6 or 7 years ago I maintained some apps that forced 5.5 compatibility mode. Because they were poorly architected in a shitty framework and no one was willing to do or pay for or train for a rewritten version. They were finally migrating to .NET when I left. It was the govt so they are likely wrapping up that migration now.
Wanna play a modern front-end dev simulator? Check this https://artpolikarpov.github.io/garmoshka/
This is literal art
Modern frameworks make responsive design easier but yes it is still a lot to wrap your head around. I remember building my hs robotics team website in high school right as responsive design was becoming a thing. “WHAT DO YOU MEAN I HAVE TO NEST A CONTAINER IN A CONTAINER I ALREADY HAVE ONE!!!”
Bless those who came up with flexbox
I love to see the occasional flexbox appreciation, since at least for me (someone just getting into Design/Web dev) flexbox changed responsive design from being a totally unfeasible project to being genuinely fun to work on, and sometimes the most exciting part!
Check out Gemini!
It’s an alternative protocol to HTTP with a focus on simplicity and being much harder to abuse for user tracking.
It’s still a small community, but growing.
If you miss the internet of the nineties, there’s some echoes of it here.
Let’s just design every website using a table again. Or even better, frames!
Don’t forget image maps!
Laughs in frameset!
Kids nowdays try hard to do with divs what was already possible with framesets.
Also I feel bad every time I remember that <blink> was taken away from us!
deleted by creator
You’re insane if you think doing layouts with tables is easier than flexbox/grid.
deleted by creator
A table has semantic meaning: it’s for presenting tabulated data, not for building layouts. That’s why they behave the way they do and require the format they require. Table layouts have always been a hack, it’s just that for awhile there weren’t better options.
Again, you are insane if you’re still doing table layouts in 2023.
Sheriff? Yes, this commenter right here.
deleted by creator
“And so the Gods (also known as the W3C) spoke down to the Programmers and said: ‘You shall not use tables for non-tabular data.’ And so it was.”
Oooh I loved my inline frames.
I was so fucking proud of that. My links down the left side, two inline frames neatly in a box on the right, perfectly designed in two versions. One for 800x600, the other for 1024x768.
I did websites for bands from East Tennessee, one for a weird website for survivors of “satanic ritual abuse”. I thought it was nuts but I made a hundred bucks.
I wouldn’t even know where to start on the modern web. I’m fine with that too. I lost the passion for it when everyone under the sun wanted me to be their free tech support years ago.
I remember when I first started on homestead. Seeing my dangling skeleton gifs and my “under construction” banners made me feel like something. There it was, the World Wide Web, and I had my own place on it. Perpetually under construction.
I used to love browsing geocities and the log in name would be right there in the link. Something like geocities.com/cartman1988
I’d guess the password and change things around on their page to mess with them. “Hmmm, Cartman eh? Let’s try southpark. I’M IN. Time to photoshop dicks on this dude’s face!”
To be a kid again.
Y’all got me all old and nostalgic here. :p
Think my eye twitched from the thought of frames again 🫨
I stand by that iframes had their place, even if the backend devs absolutely hated them.
They still have their place; for example to embed Google Maps or a YouTube video. Generally, whenever you want to embed something from a different website you have no control over, that shouldn’t inherit your style sheets, and should be sandboxed to prevent cross site scripting attacks.
Are iframes really sandboxed in different processes than the main frame? On which browsers?
Iframes cannot access the main frame’s DOM if the iframe is from a different origin than the main frame, and they never share the same JavaScript execution context, so an iframe can’t access the main frame’s variables etc.
It’s not required that iframes run in a different process, but I think they do at least in Chrome and Firefox if they’re from a different origin. Also, iframes with the
sandboxattribute have a number of additional restrictions, which can be individually disabled when needed.
Running each app component in it’s own iframe is perfectly valid microservices architecture change my mind.
Technically correct.
Seems to me they were mostly used to put content inside a scrollable element. Their place has mostly been taken by overflow:auto hasn’t it? I think this is the better way.
Removed by mod
Only a few?
Lucky guy.
Really though it’s a shame that so many devs still try to treat the web like print where they have full control over the layout at any given time. Even after the death of Flash and the introduction of smartphones and their need for fluid layouts. Meanwhile concepts like progressive enhancement got left behind.
At least we’ve got flexbox and grid now.
My main issue isn’t even that CSS exists, or its current functionalities. It’s the expectation that, if you’re creating a web page, you must use CSS extensively, and ditch every single “pure” HTML feature that might solve your problem.
On a practical level, what’s intrinsically wrong with the center tag? Or tables for alignment? Those might be bad in some situations, but they’re rather succinct and simple ways to get what you want.
“But what if in the future…” - address future problems in the future. As soon as they appear - not before or after that.
Have you even made a production grade front end project?
You can’t use “pure” HTML solutions because every browser can display these differently. You have to use CSS to make a website look and behave modern. “Pure” center tag is clunky and doesn’t work everywhere and that’s “by design” (That behavior is defined in specification, and we can’t change specification to meet today’s standards because that would make it non backwards compatible). Additionaly you need to make your website scale to wide range of devices. And sometimes you need to even add JS to fix some of the issues if you don’t want the developer to implement a non-maintainable solution taking him 5 hours, if he could do that in JS in 5 minutes.
Look CSS is not perfect. It’s hacky solution to a problem, but news flash: most software engineering is. And it’s proved to be working.
“But what if in the future…” - address future problems in the future. As soon as they appear - not before or after that.
That’s the stupidest thing I’ve read today. I hope you’re not any kind of engineer. There are some situations where it might not be worth it to future-proof something, but if you apply that to everything you end up needing a full rewrite instead of just adding a feature.
Or tables for alignment?
Tables are for displaying data, not styling. They worked in the past because there was no alternative but they are the wrong tool for the job; like cutting a board with a hammer.
Any tool or resource is for whatever usage people make out of it.
The distinction between data and layout is not some inviolable dogma.
Tables still work in the present, even if there are alternatives nowadays.
like cutting a board with a hammer
Frankly, that is a short-sighted and really dumb analogy.
A hammer won’t be able to cut the board. A table will however be able to create the basic layout of a site.
A better analogy would be cutting some wood with a knife. Sure, if the chunk of wood is really thick you’ll waste a lot of time doing it, and you’ll probably want an axe or saw instead; but even the knife will do it. However, if it’s just some thin branch, the knife will do the trick.
And it’s the same deal here. If you’re making a huge site, full of SEO and machine-generated “content” and 4MiB of Javascript and lots of “marketing opportunities” (i.e. spam = advertisement) from your “associate partners” (i.e. spammers = advertisers), that’s going to be maintained by some intern, you’ll probably want to use CSS. But if you’re making some simple homepage,
<table><tbody><tr><td> side panel </td><td> main content </td></tr></tbody></table>will do the trick. For everything else, it depends.
A hammer won’t be able to cut the board.
Not with that attitude it won’t. I assure you that, with enough tenacity and/or a large enough hammer, one can absolutely cut a board.
Your analogy is definitely closer though. However, I’d say it’s closer to using a flathead screwdriver to chop a mortise. Possible, without too extreme of measures but results are unlikely to be optimal, to hold up well to a heavy load, or offer fine controls.
A simple site, like something that could work on Gopher or Gemini, or simple home page will absolutely do fine though. And, if that’s what’s required to avoid SEO trash, I’ll live.
Well, we have these devices with smaller screens these days. And people really want to use them for browsing the web as well.
It’s the easiest way to bloat up a web page, and turn 1kb of text into 5mb of download.
People whine about cryrocurrency wasting energy; it’s nothing compared to the petajoules wasted on bloated web pages, full of unneccessary Javascript and CSS.
To be fair most of that bloat comes from the Javascript; if your CSS stylesheet is above, say, 100Kb, odds are that you’re doing something wrong.
The major damage that I see is on another level: raising the bar for what you’re expected to know, just to make a site and publish some stuff. It’s the wrong way to go - the development of new tech should enable more people to do more stuff, not the opposite.
CSS stylesheet is above, say, 100Kb, odds are that you’re doing something wrong.
Hello, non minified bootstrap reporting
I would absolutely consider shipping non-minified bootstrap doing something wrong
Configuring your bundler properly has to be done once per app, and it can significantly cut down on your app’s size.
People expect to see apps, not web pages, but we can be smart about it. Tree shaking has been around for years now, if you build your app properly your bundle will only include the pieces of code that actually gets referenced, e.g. if you pull in a 2 megabytes large library but only use it for one function, only those few lines from the lib will end up in your bundle.
The problem is that HTML was not designed to be a layout description. Your browser was to decide.
So, to force HTML to be a layout description rather than simple markup, we have this mess.
HTML != TeX
I too look forward to all of our websites looking like they’re from the 90s upon the abolition of CSS.
This but unironically.
That was fantastic.
Exactly. Website is a medium to gain information, website is not art. Web designer is the person who makes the frame, not paints the canvas.
CSS isn’t the problem. Let people write their silly lil queries. JS is a hassle and a half though
As a frontend dev I hate frontend. CSS is not even the main issue.
Fuck Jest and having to mock libraries. I’m gonna go backend in Go or something like that ASAP.
You will still need to mock things for tests in Go
Yeah but the tool chain isn’t a poorly constructed house of toothpicks
i might have some bad news for you
😅
Oh shit…
That’s not a Jest problem, that’s your skill issue 😎. Mocking stuff is basic shit when you’re unit testing.
I just use Bootstrap and don’t worry about learning CSS. Probably because I suck as CSS.
But if I can use a few Bootstrap classes to make my app ‘presentable’ and ‘professional-looking’ and spend my time on what’s important…functionality and security…then I’m happy to.
Bootstrap is perfectly fine. I know there’s a lot of CSS snobs out there who rail on it but it’s a great framework and perfectly acceptable starting point.
Same. Bootstrap at work, tailwind at home.
deleted by creator
You’re never supposed to use pixels in CSS anyway; you should bare minimum use percentages to account for different screen sizes to make the designs responsive and not look terrible on different screen sizes.
Except margins of inner elements and paddings of course.
Use
emfor these!
The new unit of measure is EM. Which is related to font size somehow. Idk, I might be outdated already. I ran screaming from front end years ago and I won’t even cop to being a full stack developer these days. I’ll lead full stack projects, but I’m not doing the FE dev.
