Shorter lines are easier to read because it’s easier to find the beginning of the next one. Rule of thumb is indeed a maximum of about 80 characters, go take a random printed book and see how long the lines are they’re like that for a reason. (Newspapers are shorter because smaller print, also, more opportunities for headlinest).
The contrast and line spacing stuff – debatable. But adjusting line-width is pretty much a must. Not doing anything somewhat worked on 4:3 monitors but it’s definitely awkward on 16:9 and on 21:9 your head is definitely on a swivel.
Oh and those large margins are very useful for things like footnotes, btw, or meta-information about the text (like those textbook “this is an exercise” stylings, just move the marking over to the margin). There’s also plenty of place for a hierarchical list of contents, always on screen, and various other nav stuff. None of that will degrade loading or runtime performance to any noticable degree.
Also of course note that that’s for text-heavy content, stuff you read as in reading an article or book, not stuff you look at in the sense of “reading” a poster. In this case you can e.g. turn those bullet-points into rectangular areas (also come up with a sixth one, then) and display them in a grid, each containing, well, what they contain now but also a link to further information. You see that pattern all over the place on the modern web and it’s a good one. Would need quite a bit more content than is present on those websites, though, otherwise you have more navigation shenanigans than content. You don’t need a fucking library index for a post-it note.
That is absolutely horrible UX: User interaction should not be required for your site to be legible. If you are one of the 0.000001% of people who wants all line breaks to vanish configure reader view yourself and hit that button, but don’t force 99.999999% of users to make that extra click.
…also, nothing whatsoever is stopping you from making line width adjustable within the page itself.
They actually made it worse in the latest version! They went from using the CSS2 standard, which was already like 20 years old, to using MS Word as the rendering engine. I would like to find whoever was in charge of that idea and slap them with a large trout. My guess is that they got a bonus by laying off whatever team was in charge of the CSS2 integration and saved a bunch of money by utilizing another program attached to some other team’s budget. MS employees are always trying to shift their costs onto other teams.
As a backend developer who occasionally has to work on the frontend, that top image is pretty accurate although it requires bootstrap smeared all over to pretty things up a bit. After that it will have the “Good Enough” seal of approval.
Pfft just go there and feel the air yourself. Knowing the weather in advance is bloat anyway. If medieval sailors could launch ships without weather info and survive 30% of the time, you can too.
Imagine having to rely on physical senses to determine the weather, how pathetic. Honestly if you can’t infer weather patterns from learned data then better get back to that CSS.
As far as I understand, they were offering free hosting and bad actors took advantage. They didn’t want to start charging so they closed down. Like giving out candies on Halloween and one asshole takes the whole bowl. No candies for you kid, sorry.
A proper backend developer would have the query be a URL using the GET method with a parameter that the user can fill-in directly in the address bar and the result be a text/plain page with just a bunch of numbers separated by pipe characters (or an application/json page with that info encoded as JSON if you wanna be fancy).
This has the added advantage of working both for humans and as an API for use in machine to machine communications via HTTP.
A highly compatible design with no ads, unnecessary images, videos, animations, scripts that goes straight to point delivering you exactly the information you need and nothing else? Something that’s easily accessible even with old feature phones allowing older people to get information easily?
Simply something that loads instantly and just works?
Those are very valid points, but the complete lack of UI and UX design doesn’t make it the best. Just some basic things will suffice.
less redundant wording
critical info formatted to be on the same visual line
some simple icons added which roughly represent the info
a basic design (header, centered box with info, easy on the eyes colors)
basic responsiveness to support most devices
bigger font sizes for the critical info could further help visually impaired people
That would make the info quickly and easily digestible, even at a glance, for most people on most devices.
I get the point, but I wanted to show that well designed frontends make using the web easier for people with human-tailored designs. Of course, over-the-top artsy visuals, dark patterns, defiant handling of cookie policies, invasive data collection and corporations doing corporate stuff make the web annoying, difficult and unsave to use for humans. I think we need to differentiate between those.
I’m currently working on a little project that’s interesting to me (a low-spoiler walkthrough system for adventure games) and after a lot of back and forth, I decided to cut all of JS out of the picture. Just get rid of all of it, and do good old 90s server-side rendered HTML with modern CSS placed on top of it.
And that’s, honestly, a joy. The first draft of a page looks like the first screenshot, then you add some semantic classes to the html and throw some simple CSS at it and it looks acceptably neat. And I could get rid of so much janky toolchain I just fail to understand.
yeah, just css is enough.
you don’t need js unless you need to fetch data dynamically.
you can do all of your animations, dropdowns and transitions in css.
like this menu i made. no js in sight.
You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: !programmerhumor@lemmy.ml
Post funny things about programming here! (Or just rant about your favourite programming language.)
Rules:
Posts must be relevant to programming, programmers, or computer science.
No NSFW content.
Jokes must be in good taste. No hate speech, bigotry, etc.
The page at the top looks perfectly fine. It’s useful, it gets the job done and it’s lightweight.
almost as good as the motherfucking website. :D
I like the better motherfucking website
Hate it, fuck that low contrast bullshit that makes me think my glasses are dirtier than they actually are.
That person must have his monitor in vertical orientation
Shorter lines are easier to read because it’s easier to find the beginning of the next one. Rule of thumb is indeed a maximum of about 80 characters, go take a random printed book and see how long the lines are they’re like that for a reason. (Newspapers are shorter because smaller print, also, more opportunities for headlinest).
The contrast and line spacing stuff – debatable. But adjusting line-width is pretty much a must. Not doing anything somewhat worked on 4:3 monitors but it’s definitely awkward on 16:9 and on 21:9 your head is definitely on a swivel.
Oh and those large margins are very useful for things like footnotes, btw, or meta-information about the text (like those textbook “this is an exercise” stylings, just move the marking over to the margin). There’s also plenty of place for a hierarchical list of contents, always on screen, and various other nav stuff. None of that will degrade loading or runtime performance to any noticable degree.
Also of course note that that’s for text-heavy content, stuff you read as in reading an article or book, not stuff you look at in the sense of “reading” a poster. In this case you can e.g. turn those bullet-points into rectangular areas (also come up with a sixth one, then) and display them in a grid, each containing, well, what they contain now but also a link to further information. You see that pattern all over the place on the modern web and it’s a good one. Would need quite a bit more content than is present on those websites, though, otherwise you have more navigation shenanigans than content. You don’t need a fucking library index for a post-it note.
Source: My HTML is rusty as fuck but I know TeX.
Counterargument: if you need narrower text, you can adjust the size of your browser window. If I want wider text, you’ve capped it.
That is absolutely horrible UX: User interaction should not be required for your site to be legible. If you are one of the 0.000001% of people who wants all line breaks to vanish configure reader view yourself and hit that button, but don’t force 99.999999% of users to make that extra click.
…also, nothing whatsoever is stopping you from making line width adjustable within the page itself.
the better motherfucking website is shit
I’m on mobile and the only difference i see is the lines of text on the “better” one are spaced more so I have to scroll farther.
Is it more legible? No, I’m not a fucking donkey and I can read a block of text like a normal person.
It’s mostly about line width on desktop, the rest is whimsical filler content. Compare the sites in landscape orientation.
also no https and grey text
mobile layout on desktop, grey text, no https, slow remote font
what about the best motherfucking website?
That’s pretty good too
It’s almost fine. It needs to include units for the measurements.
You sound like a backend developer.
maybe 🤣
Oh thank goodness my browser doesn’t have to download hundreds of js and assets just to use a damn calculator
what is wrong with this frontend? not enough ads? loads too quickly?
No designated time zone.
DID YOU SAY TIME ZONE
Man, hyperlinks need to be a different colour…
Honestly, no units
It’s the temperature in Paris so I assume it’s Celsius.
Well, even when visiting this Website from New York? Or if this website is hosted in New York? So many questions arise from assuming :)
just missing some flexbox basically
love me some flexbox
No cookie banner with the worst dark patterns of UX imaginable
I would hire you as my lawyer.
The frontend developer made the backend so inefficient that it runs out of memory
They have this cool hack where they emulate Edge within Node.js and then run their stuff as a webpage within Edge.
God I wish weather pages were more like that first one.
I like to use this one: https://wttr.in/
You can get info for a specific city by appending it like this: https://wttr.in/newyork
It seems to be down right now, but if i remember correctly this one also works when you are using a terminal and curl, i.E.
curl wttr.in/newyorkEdit: It works again, you can use the command as written above :D
Tysm
Nice thanks.
Akshwallyyyy those are both presentation problems, eg frontend
Edit: to those downvoting me please tell me why a frontend dev would end up showing a raw error like that on a page
I can make HTML look alright if I have to and it’s simple enough requirements.
The real hell is making it look good in an email. Oh, you used something from the last 20 years of HTML/CSS progress? Well fuck you.
But that’s mostly because Outlook is still holding us back. Come on, Microsoft, please let it die in peace already.
Never going to happen, same for Excel.
Whatever future iteration of ChatGPT that eventually enslaves the human race will be using Outlook and Excel to keep track of the genocide.
They actually made it worse in the latest version! They went from using the CSS2 standard, which was already like 20 years old, to using MS Word as the rendering engine. I would like to find whoever was in charge of that idea and slap them with a large trout. My guess is that they got a bonus by laying off whatever team was in charge of the CSS2 integration and saved a bunch of money by utilizing another program attached to some other team’s budget. MS employees are always trying to shift their costs onto other teams.
Front hand back hand?
Shots fired! Shots fired!
As a backend developer who occasionally has to work on the frontend, that top image is pretty accurate although it requires bootstrap smeared all over to pretty things up a bit. After that it will have the “Good Enough” seal of approval.
in Paris
in Paris
in Paris
in Paris
What is this bloat? Trash site.
Honestly you don’t even need to make the text field visible. If they can’t touch-type that’s on them.
I would prefer a dropdown list of all possible coordinate combinations.
Pfft just go there and feel the air yourself. Knowing the weather in advance is bloat anyway. If medieval sailors could launch ships without weather info and survive 30% of the time, you can too.
Imagine having to rely on physical senses to determine the weather, how pathetic. Honestly if you can’t infer weather patterns from learned data then better get back to that CSS.
Who was in Paris?
I mean maybe B’Ellana if Tom was into some kinky shit but we aren’t talking about Voyager right now.
Some fine gentlemen.
What’s a Paris?
You can see the programmer used Copilot, who in their right mind would want to type <?php echo htmlspecialchars($city); ?> four times
It’s meant to be used like this:
It will probably look more like this
After some time toying with CSS I have decided to fuck it and whenever I need to make a website I will just either:
I used to like bootstrap. Still do. But it has some faults… Depending on your needs you’re loading a lot of CSS you aren’t using.
Bootstrap 5.3 is 59kb before gzip. 6700 lines of code. That’s a lot to just apply some simple styles.
There are a ton of lighter weight alternatives nowadays.
it is a required subject at my school
The top one’s a motherfucking website, indeed.
RIP txti.es
What happened with it?
As far as I understand, they were offering free hosting and bad actors took advantage. They didn’t want to start charging so they closed down. Like giving out candies on Halloween and one asshole takes the whole bowl. No candies for you kid, sorry.
A collection of these.
One of my all time faves!
A proper backend developer would have the query be a URL using the GET method with a parameter that the user can fill-in directly in the address bar and the result be a text/plain page with just a bunch of numbers separated by pipe characters (or an application/json page with that info encoded as JSON if you wanna be fancy).
This has the added advantage of working both for humans and as an API for use in machine to machine communications via HTTP.
A highly compatible design with no ads, unnecessary images, videos, animations, scripts that goes straight to point delivering you exactly the information you need and nothing else? Something that’s easily accessible even with old feature phones allowing older people to get information easily?
Simply something that loads instantly and just works?
Who would want that?
Those are very valid points, but the complete lack of UI and UX design doesn’t make it the best. Just some basic things will suffice.
That would make the info quickly and easily digestible, even at a glance, for most people on most devices.
I get the point, but I wanted to show that well designed frontends make using the web easier for people with human-tailored designs. Of course, over-the-top artsy visuals, dark patterns, defiant handling of cookie policies, invasive data collection and corporations doing corporate stuff make the web annoying, difficult and unsave to use for humans. I think we need to differentiate between those.
Dude, that is the mother of responiveness. It literally supports all the devices.
https://motherfuckingwebsite.com/
Entirely true.
I’m currently working on a little project that’s interesting to me (a low-spoiler walkthrough system for adventure games) and after a lot of back and forth, I decided to cut all of JS out of the picture. Just get rid of all of it, and do good old 90s server-side rendered HTML with modern CSS placed on top of it.
And that’s, honestly, a joy. The first draft of a page looks like the first screenshot, then you add some semantic classes to the html and throw some simple CSS at it and it looks acceptably neat. And I could get rid of so much janky toolchain I just fail to understand.
Did not get the joke did you ?
No u
Are you trying to make a joke? Or did you not get that the comment you replied to is also a joke?
Do we use whoosh here on lemmy or that is something from the past?
c/whoosh ?
No one who is going to pay you wants that. All they care about is user engagement.
Found the backend dev. “CUT THIS AESTHETICS NONSENSE! GIMME THE VARIABLE CONTENTS ALREADY! WE’RE 3.54 NANOSECONDS BEHIND!”
Frontend: “Come on, this needs at least some flair. This isn’t the 90s.”
Throws React at it
Get outta of here !
/s
React ugh, everybody is using NextJs these da- …oh, what’s that? We’ve moved on already?
yeah, just css is enough.
you don’t need js unless you need to fetch data dynamically.
you can do all of your animations, dropdowns and transitions in css.
like this menu i made. no js in sight.
https://streamable.com/4ba0gg
also fully accessible and you can tab right into it without clicking enter or whatever
(and respects prefers-reduced-motion)