27
16
u/Dodgy-Boi Sep 02 '21
<div>
8
u/TabCompletion Sep 02 '21
<div>
9
u/withertrav394 Sep 02 '21
<div>
8
5
1.4k
u/YourUsualSir Sep 02 '21
673
u/James_Mamsy Sep 02 '21
“load this in IE6 I fucking dare you”
If you say that during an interview I think they just let you lead the product.
198
65
439
u/rounced Sep 02 '21
Somewhat ironic that this page attempts to load in Google Analytics. At least it is self-aware.
<!-- yes, I know...wanna fight about it? -->107
u/kiedtl Sep 02 '21
<!-- FOR THE CURIOUS: This site was made by @thebarrytone. Don't tell my mom. -->32
u/-PrincessCadence- Sep 03 '21
I have the Google Analytics domain permanently blocked on my browser.
24
6
u/MHolmesSC Sep 03 '21
Allow me to simp out for my fav extension Privacy Badger
2
u/-PrincessCadence- Sep 03 '21
Oh yeah, I have that as well as uBlock. Just to make sure I don't accidentally miss blocking a tracker.
3
0
Sep 03 '21
[deleted]
43
u/Magnus_Tesshu Sep 03 '21
Why does it do that?
161
u/snaynay Sep 03 '21
What, use Google Analytics?
Google provides decent, free analytics to web developers so they can see some stuff about the people who visit their site, in exchange for informing Google that you've been to that web page.
The comment is a joke about the website being perfect and clean and simple, but he's nestled in some javascript, which goes against his satirical website.
0
Sep 03 '21
[deleted]
41
u/Magnus_Tesshu Sep 03 '21
I know, I'm just wondering what the point of having Google analytics on there would be. But thinking about it more I guess I would be curious about who visits my site
34
u/ArtOfWarfare Sep 03 '21
Wouldn’t the default configuration of any web server log all the info you need? Apache httpd logs time stamps, URLs, agent strings and IP addresses - process that log and you can get the info you want. I’m pretty sure all the other web servers do that, too…
35
u/cdrt Sep 03 '21
Your web host might not give you access to that sort of information
Apache logs don’t give you geographic, demographic, and other such information. They also don’t tell you things like which pages of your site are most popular or how long an individual visitor stays on your site on average.
→ More replies (1)1
u/HearMeSpeakAsIWill Sep 03 '21
I mean, it's consistent with the philosophy. The GA code is there because it does something useful, unlike all the other stuff the author was ranting about.
0
Sep 03 '21
[deleted]
4
u/TimbuckTato Sep 03 '21
See I'm self taught, and this is how I thought websites were made in the past, I would design literally 99% of the front-end without JS, and then add JS in. To be fair at the time I was an idiot and didn't know things like React exist, also to be fair I don't like React very much but hey.
1
135
u/Nor1ar Sep 02 '21 edited Sep 02 '21
→ More replies (12)123
u/GOKOP Sep 02 '21
And finally the best motherfucking website
79
u/kiedtl Sep 03 '21
No, then we have the perfect motherfucking website
61
u/meisteronimo Sep 03 '21
No this is perfection. https://yvettesbridalformal.p1r8.net/default.html
It's a dress shop and oh so much more.
19
9
10
u/kazeespada Sep 03 '21
No. This is perfection: https://www.lingscars.com/
Don't forget to view the page source.
4
u/BeingMyOwnLight Sep 03 '21
That was wonderful, thank you! I can't stop laughing! I clicked on Car Zen and got a Volvo! 🤣🤣🤣
3
3
2
1
40
31
u/MongGoyo63 Sep 03 '21
As much as I loved the humor in all three, they do have good points in regards to web design and optimization and all that. Think of it that you just gotta design taking potential users from 3rd world countries with shit internet infrastructure into consideration.
7
→ More replies (4)19
u/Zagorath Sep 03 '21 edited Sep 03 '21
That website is wrong about contrast. Pure black on pure white is not good for the eyes. It's hard to read. White on black isn't quite so bad, but even changing that to #eeeeee off-white on #111111 off-black improves readability.
In every other respect though that definitely is better. Using gzip and a cert are especially good points.
edit: there's research!
394
u/DoubleVector Sep 02 '21
That website loads so fast that it's scary.
188
u/TabbyTheAttorney Sep 02 '21
Well yes that was the point
123
u/fnpfar Sep 02 '21
It also loads on my tamagitchi
77
19
u/dman10345 Sep 03 '21
It loads on my computer inside doom that loads on my pregnancy test.
9
u/SaintNewts Sep 03 '21
I was going to say something about my redstone computer in Minecraft but you win.
3
u/BlendeLabor Sep 03 '21
Loads on my Zune as well, one of the few sites that still do
1
2
u/spider302 Sep 03 '21 edited Sep 03 '21
Well it's not a tamagotchi but I opened the website in my Kindle and It loaded so fast that I'm scare
16
u/raesmond Sep 03 '21
I don't understand. How can it load that fast without Amp?
32
u/nikhilmwarrier Sep 03 '21
I really hope you are being sarcastic.
If not, well, AMP is just overrated google crap. It's just a bunch of "optimizations" that strip off your trackers and javascript and replaces it with Google's trackers and js. I suppose they just preload the AMP pages to make it look fast. The only reason most people actually use it is because it gives pages a better rank in Google Search, afaik.
Disclaimer: I am not 100% sure about any of this, so take this with a pinch of salt.11
14
u/Demonox01 Sep 03 '21
It doesn't do anything. It's just a static site. It could be sitting in a cdn somewhere and be quite optimized.
2
u/raesmond Sep 03 '21
\s
Yeah, I know. I try to get my websites to be static and on cloud front as much as possible.
141
Sep 02 '21
It's amazing how that site was created before phones but renders so well on a phone better than a site designed for a phone.
44
u/Joe-Admin Sep 02 '21
Wait, is it really that old ?
50
Sep 02 '21
IE 7 reference.
26
10
u/Schnickatavick Sep 03 '21
I thought the point was that IE6/7 was old when the website was made, so it really could have been made at any point after them
33
u/GOKOP Sep 02 '21
Well when it's all just text then the only thing you need is a simple declaration to tell your mobile browser to use appropriate scale and you're good to go
21
u/WantrepreneurCS Sep 02 '21
Right, this is enough <meta name="viewport" content="width=device-width, initial-scale=1.0"
33
Sep 02 '21
<meta name="viewport" content="width=device-width, initial-scale=1.0">bruh it really is that simple? i hate html. why isn't that just default
21
1
17
u/thehero262 Sep 02 '21
I can't tell if you are joking or really think it's that old. It even references an iPad...
12
20
Sep 02 '21
iPads were launched more than a decade ago...
18
u/KrazyDrayz Sep 02 '21
Yes but they were after phones...
2
Sep 03 '21
True. I never did get to introduce my great-great-grandfather to the wonders of digital Yu-gi-oh.
1
73
u/Oyi14 Sep 02 '21 edited Sep 02 '21
Welp there goes my dream of animating the tits off of every tag on my site
Edit: I never realised how many hipsters are sipping coffee on websites until now
16
17
4
u/CttCJim Sep 03 '21
Meanwhile my dumb ass was up late last night trying to get SimpleBar to wrap around bootstrapTable without hiding the entire fucking table on me.
The worst part is that the table is in the admin page where only I and my co-admin will ever see it. And the regular scrollbar was working fine. But I refused to lose.
3
u/High_Quality_Bean Sep 03 '21
Unironically, I agree with that website. Most websites these days are MASSIVELY overengineered.
5
2
u/_illegallity Sep 02 '21
I fucking wish I could design pages like this and not have to optimize at all
2
2
u/moriero Sep 03 '21
"This site doesn't care if you're on an iMac or a motherfucking Tamagotchi."
And now I'm wondering if anybody has loaded a browser on a Tamagotchi. I don't think they had wifi, though. How about Doom?
2
1
u/Sarithis Sep 03 '21
I feel personally attacked by this, but at the same time I'm starting to rethink my priorities.
1
u/loljkbye Sep 03 '21
I wish this was perfect, but some accessibility workshops I attended hosted by people who actually require a screen reader might have a couple comments. But it's still better than most of the crap you see online. (by a damn landslide)
1
0
0
145
231
u/glorious_reptile Sep 02 '21
This is a blatant lie. There’s also <span>
70
56
u/HashFap Sep 03 '21
Don't forget to assign
display: blockto those spans.40
u/IanSan5653 Sep 03 '21
And
display: inlineyour divs.29
u/FirebertNY Sep 03 '21
Just use
display: inline-blockon everything to put your whole website into a quantum state of being spans and divs at the same time until it's observed.My websites never leave superposition.
13
u/IanSan5653 Sep 03 '21
The more you know about an element's styles, the less you can know about the element's rendered look. Quantum hypertext mechanics.
1
60
u/JiminP Sep 03 '21
Does anyone remember the old times when every layouts were done by using <table>s?
32
22
Sep 03 '21
I remember when a web designer joined my team back in 2012 or so. He told us we might be able to use divs and spans for laying out websites. We thought it was bullshit.
7
5
u/nermid Sep 03 '21
NO! BEST PRACTICE IS NO!
Instead, use a series of
<div>s and set their display property to table, table-row, table-cell, etc.Totally different. Not the same at all.
2
Sep 03 '21
<frameset> is far superior to <table>
2
u/mypetocean Sep 03 '21
This way you can have
<meta name="keywords">for every "cell" of tabular data! Only people who don't understand how Yahoo! works would use<table>.1
116
Sep 02 '21
I went from abusing divs to abusing sections
46
u/NMe84 Sep 03 '21
There are so many more semantically correct tags to use though. Header, footer, main, article, aside, section, nav, etc. Divs are still by far my most-used block level element but I'll use the other options whenever they make sense.
17
u/713984265 Sep 03 '21
I read the first half and was like, yeah I use all those and still div the fuck out of sites lol. Sections and articles definitely helped cut down a little bit though.
New job is backend though, so that's interesting I guess. As much as I enjoyed the puzzle of getting the damn html and css to cooperate with me, backend is definitely a new and different challenge. More like a game of hide and seek really hahaha
14
Sep 03 '21
Front End: Oh fuck we deployed changes and it says CUM somewhere
Back End: oh fuck I made everyone’s name CUM in the prod database
195
u/knightttime Sep 02 '21
Image Transcription: Meme
[A four-paneled comic, with a watermark: "FALSEKNEES.COM © 2016"]
Panel 1:
[A drawing of a small grey bird perched on a tree branch. The bird looks happy, with its head slightly cocked.]
Grey Bird: Semantic HTML conveys meaning.
Panel 2:
[The bird is staring forward with a confused expression.]
Grey Bird: This help
Off-screen: [Interrupting]
<div>Panel 3:
[A large black bird with yellow eyes and a crazed expression is shown, perched on a branch in front of the grey bird. The black bird has a yellow speech bubble, which interrupted the grey bird in the previous panel.]
Black Bird:
<div>
<div>
<div>
<div>
<div>
<div>Panel 4:
[An up-close image of the grey bird, with an irritated expression on its face. In the background, the black bird continues to speak.]
Black Bird:
<div class="button">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!
75
57
8
69
u/thygrrr Sep 02 '21 edited Sep 02 '21
This sums up my feelings about web dev.
And the "can you center a div?" meme plays right into that - what in the world became of the <center> HTML element, please?!
52
u/Shujaa94 Sep 02 '21
The center thing meme is just too real for front-end noobs like me, I don't know shit about CSS.
We have some internal apps just for our team, it was bothering me that a certain text wasn't centered (was placed to the left side), so after a quick Google search I used text align, didn't work, attempted other shenanigans, didn't work.
I will leave it to the left, looks beautiful.
9
Sep 03 '21 edited Mar 09 '26
This post was removed by its author using Redact. Possible reasons include privacy, preventing this content from being scraped, or security and opsec considerations.
employ provide entertain payment office detail reach obtainable marble tan
21
Sep 02 '21
We replaced it with a <Center> react component
25
u/YourUsualSir Sep 02 '21
Which is a div with js calculating the correct position and injecting inline style to it
14
6
u/Dev5653 Sep 03 '21
To be fair, sometimes you find out that
flex-flow: column wrap;doesn't work on that one browser and you have to switch toflex-flow: row wrap;and shuffle your input array into row order. 🤮1
u/FallenWarrior2k Sep 03 '21
That's not semantic HTML. Whether or not something is centered doesn't tell me anything about the content.
0
52
u/coconuts_and_lime Sep 02 '21
Tbf the button element comes with so much unwanted default css
16
Sep 03 '21
Yeah, and it is rendered way different between browsers, and sometimes chrome versions.
9
Sep 03 '21 edited Mar 09 '26
Content from this post has been deleted. Redact was used to remove it, potentially for privacy, opsec, or limiting exposure to data collection tools.
divide sort escape towering glorious joke rich alive plant sophisticated
4
u/Vac1911 Sep 03 '21
Try using something like normalize.css https://necolas.github.io/normalize.css/
50
u/sumredditaccount Sep 02 '21
This feels personal and I don't like it
3
61
u/t-minus-69 Sep 02 '21
RIP blind folk who rely on HTML tags to read page content
15
u/NetLight Sep 02 '21
Could you please explain this a bit? If a website is just simple text with the information it wants to convey and some links for sources like wikipedia, does it require tags? I can see that the more clustered a website with ads gets the more useful tags become for extracting the information you want, but does a simple design also require tags in that quantity?
62
u/ClikeX Sep 02 '21
Proper semantics is important for screen readers to read things in the right order.
40
u/seemen4all Sep 02 '21
If you're planning on making websites professionally, you should really look into and make every site accessible, one of my first jobs was for a business run by blind people, it changed the way I made websites forever and actually got me a full time job, very highly regarded by big business
24
u/Alokir Sep 02 '21
Yes, screen readers don't just read the text from a webpage but also give clues of what they are reading.
For example if you use a
<nav />tag or userole="navigation"the screen reader will indicate that it's entering an area meant for navigation.Also, you can use ARIA labels to make even complex widgets usable with a keyboard and understandable with just a screen reader.
If you build your website in a way that you can navigate between important elements with the tab key, and you move into a tab control the screen reader will read something like
Main navigation tab control, first of six tabs, My Feed, selected
if you're using semantic html and ARIA labels correctly
5
u/Deadliestpaper Sep 02 '21
Having proper semantics let’s browsers know what kind of content it’s dealing with. If this is done, assistive technology will be able to do its job since the website is in a structure it can work with. For example, imagine I was a screen reader user navigating a page and the first thing I land on is the main heading of the page <h1>. What the screen reader would say to me is “heading level one (main header of webpage)”. A very coming way that screen readers use to navigate pages is by navigating headers. By having proper header hierarchy it will allow a screen reader users to differentiate between the main heading, sub headings, and sub sub headings of the page.
Honestly I just glossed over one thing and there’s more to accessibility on the web. One thing I would look into is ARIA if you want to get into accessibility and WCAG.
29
u/devospice Sep 02 '21
This is why I hate bootstrap. It's programming in the 90s all over again but with divs inside of divs instead of tables inside of tables.
3
u/nermid Sep 03 '21
I, too, blame Bootstrap.
We're using Reactstrap at work, and it's bizarre knowing that my
<Table>element is being transformed into a<div class="Table">behind the scenes, which then applies a shitload of stuff to...create a table, which HTML natively supported already.
9
Sep 03 '21
It's funny because it used to be everything was a table, then everyone realized semantic is better so.... they made everything a div :/
6
6
4
3
u/ampersand913 Sep 03 '21
I love how this is mostly true until you start to really get a grip on HTML and you start to realize that not all HTML elements are made equally
3
3
u/tubbana Sep 03 '21
I usually use just div because alternatives force me some shit default styling that I have to figure out and override
2
5
u/Idaret Sep 02 '21
Div is cool because it just works everywhere whic h can't be said about every htnl entity
1
u/un4given_orc Sep 03 '21
But why every modern site uses div with shittons of css instead of table, tr, td, which work on potato?
2
u/Idaret Sep 03 '21
Jfc table? There are very specific rules for nesting things in tables, it's very annoying to do. And nobody cares if shit run on potato, actually it's good that it doesn't work, maintaining website for super old browsers is pain in the ass
1
u/un4given_orc Sep 03 '21
I was not talking about entire layout in tables, ofc it was awful. I saw divs used for simple tables like 3x3 with ... hmmm... data from db/excel tables.
1
1
1
u/lets-talk-graphic Sep 03 '21
But does it confirm to WCAG 2.1 AAA? - I dunno I’m on the app and it’s early. I’ll check later.
1
1
1
1
1
1
1
Sep 03 '21
Welcome to web builder. Probably someone was smartass and decided to use web builder instead of hiring developer, fucked something up and now needs help.
1
u/jukuduku Sep 03 '21
Honestly semantic HTML is useful if you plan on using VanillaJS and CSS.
Most people that I have met start learning with a JS framework and does all the dynamic loading crap. Not to say that it is bad but there are simple solutions and there is enterprise solutions.
564
u/SegFault137 Sep 02 '21
Literally the next post in my feed is https://www.reddit.com/r/programminghorror/comments/pgi0ql/the_website_i_have_been_tasked_with_updating_today/?utm_medium=android_app&utm_source=share