Perfect Motherfucking Website

https://perfectmotherfuckingwebsite.com/

by nafey • 5 years ago

236 236 5 years ago

bigtones• 5 years ago

Not quite perfect. Page links to "Don't be dumb with typography" which talks about using smart quotes instead of dumb quotes - then in the quote block further down the page uses dumb quotes :-(

jdsalaro• 5 years ago

"License, motherfucker"

I know the vulgarity of the statements is tongue in cheek, but this one has been reinforced lately by the "MIME Magic" debacle[1], mama mia.

[1] https://github.com/mimemagicrb/mimemagic/issues/98

echelon• 5 years ago

This reminds me of one of the early internet's most (in)famous bloggers, Maddox. It matches the tone exactly.

Maddox said some very inflammatory things, so I won't link him.

zedshawmotherfu• 5 years ago

Zed Shaw is better guess.

Karsteski2• 5 years ago

Maddox is now streaming on twitch as a banana so there's that too

zepolen• 5 years ago

Here is the link for people that understand satire: http://maddox.xmission.com/

GoblinSlayer16• 5 years ago

body{max-width:650px;margin:40px auto;padding:0 10px;font:18px

Ugh, this guy shouldn't touch web design with a 10 meter pole.

Trufa2• 5 years ago

Um, what's so bad about that?

xfour• 5 years ago

Yea, seems like it would center it without much fuss. That might be a bit too big for mobile browsers, so choosing that width might be a bit of an odd choice.

lhorie6• 5 years ago

Some people see `px` and assume it's physical pixels and because they know some devices have different pixel densities, they go complaining about how coding in terms of pixels instead of `em` doesn't account for density, unaware that `px` refers logical pixels[0]

[0] https://blogs.perficient.com/2014/12/24/css-pixel-ratio-or-h...

GoblinSlayer16• 5 years ago

Max width and font size are wrong. Text isn't measured in pixels.

jirvoel• 5 years ago

Best thing I’ve seen all day.

rkangel• 5 years ago

From "http://bettermotherfuckingwebsite.com/" which is one up the chain:

A little less contrast

WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values, rather than gone with something that was just about enough on an expensive graphic designer high-contrast monitor and then not tested it on anything else. Leaving the rest of us squinting to try and read text or manually overriding CSS.

Despite not being a complete idiot, they have still made the content harder to read. Contrast is good. It makes things easier to read. Why would you want less? Yes I know the art theory stuff about never using black because it doesn't appear naturally. You know what else doesn't appear naturally? TEXT. Black on white is a perfectly acceptable default, please don't change it for your body text without a really good reason.

(ranty style done in homage to the linked websites, but it felt good to get that out)

mrweasel• 5 years ago

Completely agree, the weird dark grey text makes the whole site look foggy. It actually one off the most annoying colours I’ve seen used for text.

chronogram• 5 years ago

Because they write the website on a high res Macbook and prefer their amazing artistic talents over the ability for people with cheaper computers or poorer eyesight to read their art.

smiley1437• 5 years ago

God I hate lowered contrast on sites, especially as I'm aging. Give me the crisp edges of black and white, if I want to lower the contrast I'll turn down my brightness settings.

camgunz4• 5 years ago

A fundamental design principle is that full black is unnatural. It's like, point three on "I don't know anything about design, give me a quick list" articles. And it's pretty true, frankly. Making text a little more navy or gray makes a big difference. Sure people have eyesight issues and not everyone has a great monitor, but most people prefer it this way.

hinkley2• 5 years ago

Very true, however better has chosen #444 whereas #333 seems to work a bit more consistently.

One thing you should always consider during the requirements phase of a web application is whether your app is likely to be used projected on a conference room wall. Things like contrast and fonts make huge differences in such hostile settings, and available screen real estate is also considerably limited.

not2b• 5 years ago

Slightly greyer is OK, but if you give up most the contrast and use a small font, a large fraction of the population will find your site hard to read. There are way too many low-contrast web sites out there.

ocdtrekkie2• 5 years ago

If you're within 10-15% or so of white or black, I am fine with the "slightly grey" look, assuming I don't have an AMOLED screen, where your dark grey is just wasting my phone battery.

I really only get annoyed with the "less contrast" meme when it's something like a Google website where the UI disappears if your monitor's contrast settings weren't tuned professionally. (I used to have to adjust my monitor settings around making the UI elements on Google+ visible.)

RandallBrown2• 5 years ago

WHY. WHY DO PEOPLE DO THIS.

Because too much contrast can be jarring and distracting, making it harder to read.

These kinds of things are subjective.

RedShift1• 5 years ago

Is there any research that proves this?

aidenn0• 5 years ago

If everyone could agree to not use black-on-white, we could set our monitor brightness to a sane value and have enough contrast to read. In order to read black on white text, I have to turn my backlight down to like 10%, and then turn it up to about 40% to watch a movie.

More contrast isn't always better, or you would read text by printing out foil stencils and aiming them directly at the sun to read.

Veen2• 5 years ago

WHY. WHY DO PEOPLE DO THIS

Because designers are taught that too much contrast causes eye strain. They're advised against putting pure black text on bright white backgrounds.

https://www.wired.com/2016/10/how-the-web-became-unreadable/

enraged_camel• 5 years ago

I hate Youtube on dark mode for that reason: it's white text on black background and I struggle to read comments!

dathinab5• 5 years ago

But to little contrast causes so much more eyestrain, and can't be fixed by changing your screens brightness.

Matumio2• 5 years ago

I never managed to read this article past its title. I always get distracted by the fact that, after one second, the text gets obscured behind a pop-up.

munchbunny• 5 years ago

Yes I know the art theory stuff about never using black because it doesn't appear naturally.

I think the underlying reasons for that are underappreciated.

When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.

So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.

kuschku20• 5 years ago

On a good monitor, the color contrast between #ffffff and #000000 is far beyond the contrast possible in nature. No reflective material can reach those colors or that contrast.

That color contrast is perfect for a game, a movie or an image. But you don't want the feeling of something as bright as looking into the fucking sun mixed with the darkness of the deepest starless night. That's just painful, both in light mode and dark mode.

Just calibrate your monitor correctly, increase your contrast if your monitor can't even display Rec.709 sRGB, instead of compensating for your shitty monitor by making your website painful for anyone with a good monitor.

EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285

Matumio2• 5 years ago

If you want to go into the "pure black" discussion, I liked that article: https://news.ycombinator.com/item?id=24303042

edoceo• 5 years ago

Put #101010 on #f0f0f0

new_here• 5 years ago

Lowering the contrast of text helps people with dyslexia (between 7.5% - 17.5% of users) to read the content more easily: https://www.w3.org/WAI/RD/2012/text-customization/r11

High contrast text can appear blurred for them while reading.

indigochill• 5 years ago

Also what's up with those side margins? A little margin is nice (HN's feel reasonable), but the margins on both PMFW and BMFW look like they follow the philosophy of maximizing scrolling and margins to cram a bunch of ads in the margins, only without the ads. One caveat might be that I'm viewing them on a desktop monitor and not on a cellphone.

(Edit: Okay, I should have read TFW. They mention the reason for the line width)

deergomoo2• 5 years ago

Apparently optimal reading width is approx. 65 characters wide.

There's definitely a sweet spot; I typically have my browser windows at 2/3 width on a 2560px wide monitor. 100% width lines are a chore to read honestly, there's definitely a higher cognitive load.

kuschku20• 5 years ago

WHY. WHY DO PEOPLE DO THIS.

Do you like 400 nits of #ffffff right into your eyeballs? No? Me neither.

The alternative is absolute darkness with extremely bright text, which in turn makes it unreadable (if you have astigmatism as I do) and literally causes pain due to the high contrast.

Nothing in nature has such an extreme contrast.

The only reason anyone would ever use full contrast is if they have a shitty 6-bit monitor panel that doesn't even reach the contrast ratio of a shitty 1990's monitor. And they don't even have a proper color profile, so their computer thinks their monitor has all the contrast ratio in the world, and doesn't tonemap fuckall.

The only way to resolve this is if either everyone finally switches on a color managed workflow, or we outright ban the shitty panels where #000000 on #ffffff is necessary for readability instead of being just painful.

#ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night. You need these colors for movies, for games, for images. But your text should never be the contrast between a starless night and looking directly into a star.

Increase the contrast of your monitor, calibrate your panel, but don't build a worse website to compensate for your shitty panel.

EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285

u801e• 5 years ago

Nothing in nature has such an extreme contrast.

What about black text on white pages in an actual hardback book? But since you referred to nature, what about zebras?

hoophoop• 5 years ago

#ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night

No. There's no definition of what they map to.

That's why we need USERS to be able to scale the ranges of brightness and contrast.

My environment changes during the day. I want to be the one in control of my screen, not some random website.

_jal• 5 years ago

This is a case study in why I override display on so many websites.

don't build a worse website to compensate for your shitty panel

Never change.

GoblinSlayer16• 5 years ago

Do you like 400 nits of #ffffff right into your eyeballs?

If you don't like what your display does, tweak its settings to do what you like.

stan_rogers• 5 years ago

If white on your monitor is brighter than a "bright white" sheet of paper viewed under the same lighting - or normal lighting if, for some reason, you've decided to work in the dark - you're doing it wrong.

lelandbatey• 5 years ago

Join the contrast rebellion and demand high-contrast text: https://contrastrebellion.com/

kstenerud2• 5 years ago

OMG that website is so easy to read! It's a breath of fresh air!

What would be really cool is if web browsers offered a mode that forced a contrast minimum when viewing websites. This would benefit devs and users alike: Users would have a pushbutton way to make bad websites readable, and devs would have a push button to show what their site would look like to users who get annoyed enough to push that button.

kuschku20• 5 years ago

I love that website. It has the perfect amount of contrast, not the harsh #000 on #fff half this comment section recommends.

https://i.k8r.eu/dw9JsA.png

marzell• 5 years ago

Maybe unexpected for you, but not everyone agrees that more contrast is always better. I specifically choose color schemes in application I use that have less contrast as that seems better for me. There is certainly a point where contrast is objectively too high, and increases in monitor contrast and the increased use of HDR monitors make this more of an issue these days.

UI_at_80x24• 5 years ago

https://contrastrebellion.com/

More high-contrast options exist then Black foreground on a White background.

I'm not disagreeing with your point, I loathe grey on grey sites. Being visually impaired nothing makes me rage-quit your site quicker if my DarkReader extension can't unfuck a site.

I'm posting https://contrastrebellion.com/ so all the replies and followup conversations can see it too.

codydh• 5 years ago

The scrolljacking on this site makes it literally unusable on my device.

reacharavindh• 5 years ago

That is one awful website to read on mobile safari. The scroll bar is hijacked to make the text unreadable - how ironic!? May be some should make scrollhijackrebellion.com ;-)

iso1631• 5 years ago

Purple on black is hardly "contrast"

https://imgur.com/Q52ZxwS.png

sxp• 5 years ago

From what I can tell, this is due to designers cargo culting low contrast UIs. Whenever I've asked designers for citations that grey-on-gray UIs are better than black/white or white/black, I haven't gotten any good responses beyond some subjective answers. It's considered "general knowledge" but I haven't found hard data supporting it.

There are good reasons to avoid bright white backgrounds in certain cases since it can be hard to read in dark environments as your eyes switch between the bright screen and dark world. But in this case, pure white on pure black is still the best option for contrast. And the correct solution is to dim the backlight of the display to reduce brightness.

lucideer• 5 years ago

WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values,

Dunno what the science says, but I really hate #000 on #fff, or vice-versa.

Yes, a lot of websites now go to the opposite extreme, but the reaction should simply be: so DON'T GO TO EXTREMES! Neither too much nor too little contrast are good.

And since you've pointed out they do go for sensible values here, why the outraged all caps???

kstenerud2• 5 years ago

This is one of my biggest pet peeves of "modern" websites. I've installed github.com/Fushko/font-contrast, and I've noticed myself clicking it on more and more in recent times.

You don't need a pure white background, but for gods sake PLEASE stop making the text light grey! Having to squint to read a website is headache-inducing.

cactus2093• 5 years ago

Obviously too little contrast is bad and makes text hard to read, but it doesn't at all follow that MORE CONTRAST is always better. In fact it's pretty clear that too much contrast (which is equivalent to too much brightness, since there's a floor on how black the dark parts can get) can be a negative thing, that's why we don't all leave our displays at maximal brightness in all lighting conditions.

Another commenter mentioned that all text should just be black on white and people can dim their screens as necessary. It's somewhat a matter of personal preference, but this seems like a bad solution to me. Most people are not looking at exclusively text when browsing the web, there are lots of pictures and videos as well. Users shouldn't have to be constantly fiddling with screen brightness. In photos and videos, contrast is often used for dramatic effect, where you want some parts to get brighter than others. If the text is too high contrast so you have to dim your screen further to view it comfortably, then the photos or videos you see alongside the text won't be as impactful and enjoyable. Why should every piece of text you read be as dramatic as the most intense rays of sunlight or something in a photo or movie?

tarsinge• 5 years ago

High contrast is harsh on the eyes. Black on white is very tiresome for me, and can become harder to read at the end of the day. I always set the background of my text editors to dark grey.

dorkwood• 5 years ago

I personally find dark mode with too much contrast to be harder to read. I experience real discomfort otherwise, so I don't think it's as simple as "more contrast is always better".

I think it comes down to what you're used to, what your vision is like, and how sensitive your eyes are. Some prefer high contrast, some don't.

coldtea2• 5 years ago

WHY. WHY DO PEOPLE DO THIS.

Because too much contrast on a monitor means white on black, which on average (that is, 99% of people's setups) brightness levels settings strains the eyes and people actively dislike it.

Its not some book reflecting ambient light, but a monitor with a led shining white (blue-ish) light on your eyes...

Contrast is good.

Water is good too. Too much water though, and you die: https://en.wikipedia.org/wiki/Water_intoxication

zozbot234• 5 years ago

Contrast is good. It makes things easier to read. Why would you want less?

One sensible reason for this is that it allows using higher contrast, or different hues w/ similar contrast, as a kind of emphasis that naturally stands out from the surrounding text. Same reasons why most terminal emulators display text as light-gray-on-black, while keeping pure white as a highlight color.

neogodless2• 5 years ago

I was a little confused when I clicked through, but then I remembered I installed the Firefox add-on "Font Contrast" which has absolutely vital over the past several years, with so many web site designers who think `#666666` text looks good against a `#CCCCCC` background!

progval3• 5 years ago

And did you let the browser choose the font? Don’t make me read such text with Times New Roman.

I don't understand this attitude. If you don't like Times New Roman, why don't you change your browser's default font?

What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.

(Off-topic, but something that really annoys me is websites that make text in <textarea> very dark grey without changing the background; as I configured a black background and white text)

nickelcitymario• 5 years ago

What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.

The web must be a very disappointing place for you.

progval3• 5 years ago

I block Google Font, so most of the time I end up with the default font anyway

falcolas2• 5 years ago

The web must be a very disappointing place for you.

Yes, yes it is.

And it ain't just the fonts…

tasogare• 5 years ago

Sometimes it’s necessary, as the number of code points and thus scripts supported by default fonts is low.

mr_cyborg• 5 years ago

Serifs can be a good thing for readability! I don’t know that the creator’s choice to force sans-serif was ideal here.

paulryanrogers• 5 years ago

When I was taught design in the early oughts they said serif for print and sans for screens. I think it had to do with rendering at lower resolutions and small screen sizes.

ocdtrekkie2• 5 years ago

I think ideally, your browser should have a default serif, sans-serif, and monospace font, and websites should default to using it. I think there are useful cases for each style, but we really need not download seven fonts every time we load a website.

Veen2• 5 years ago

Why is that? Do you also find it infuriating when magazines and books don't use your preferred font? Perhaps it annoys you when web pages don't use your favourite colour for every element too.

Web pages are designed and typography is part of the design.

progval3• 5 years ago

I use an ebook reader and it lets me configure the font, size, spacing, and margins.

I don't mind printed books and magazines because it's a constraint of the medium; but for websites it's a missed opportunity.

swiley• 5 years ago

Books are often typeset by competent people (or at least people who are enough to have opinions on typesetting) while the web is usually the result of middle management and marketing seeing you as the dumb thing keeping some metric too low.

Magazines are their own thing although typically this does apply to the actual articles themselves; Someone who knows what they're doing lays them out.

5424583• 5 years ago

Most websites are not designed for you, the 0.5% of users who are running some personalized style sheet override. They’re designed for the other 99.5% of people who don’t even realize that’s possible.

GoblinSlayer16• 5 years ago

It's not a stylesheet, it's good old font choice dialog.

skitter• 5 years ago

You have my full agreement. Disallowing website-chosen fonts (or enforcing minimum font size) can break some things slightly, but is worth it in my eyes. But with colors, there are way too many sites blindly assuming a black-on-white browser stylesheet not just for textarea, but for the entire website, making everything unreadable. And you can't win there: Turning of color overriding entirely makes for a calmer, more unified experience, but utterly breaks the usability of a number of interfaces (not the fault of the website).

jdmichal• 5 years ago

Firefox allows you to lock fonts based on serif, sans-serif, and monospace. I have done such, along with also setting a minimum font size. And honestly the only thing it ever seems to break are those stupid icon fonts.

ralmidani• 5 years ago

Was Zed Shaw involved in this website or its predecessor?

vinceguidry• 5 years ago

Zed Shaw did the original, if I recall correctly.

edit: nope! @thebarrytone did the original, the curious can find the author in the source.

bluefirebrand2• 5 years ago

How much longer until we see one of these that imports 100mb of Javascript to make a responsive, reactive, server-rendered SPA. Saying things like "Just npx create-react-app fucker, it gives a better fucking user experience out of the box than your shit fucking browser does" and still claims to somehow be satire?

a_t48• 5 years ago

That sounds like it would be satire to me.

joshmanders• 5 years ago

Alright so, I like these websites, because they are great. But a lot of people take their existence as a reason to shit on modern website development and say asinine shit like "all these websites are slow because they use react/vue/angular/whatever" so I registered modernfuckingwebsite.com to show that using modern build systems, modern tools, and all the hotness you can produce a fast, lightweight website that is just as "great" as these, completely negating their whole view of modern tools.

But I haven't had the time to put into it.

plzbo• 5 years ago

Why would you censor the word motherfucking?

sebastien_b• 5 years ago

Especially given that the shown URL isn’t.

juped• 5 years ago

No, your motherfucking website is not improved by jamming your pet design theories into it. This is why all these spinoffs are terrible, with the possible exception of https://bestmotherfucking.website/ which removed things from a different spinoff.

The low contrast meme in web design is especially harmful.

bluefirebrand2• 5 years ago

Yep, I agree. Jamming the design theory into it is absolutely missing the point of the original.

corobo• 5 years ago

I'm properly on board with getting rid of light grey on white but this is a little much. I don't even have that great a monitor and this is kinda burning my eyes out.

Take the background to a #111 and the text to a #ddd and you've hit my personal perfection

lucasmullens• 5 years ago

They just copied http://bettermotherfuckingwebsite.com/ and tweaked it slightly with a few opinionated changes. This is very lazy.

ChrisArchitect2• 5 years ago

too many of these no?

here's evenbettermotherfuckingwebsite from 10 months ago: https://news.ycombinator.com/item?id=23202336

Karsteski2• 5 years ago

This is now my favourite article. I'm glad more people are waking up to the beauty of simplicity. Too much of our society is focused on adding more and more onto complex systems, with no thought on how to maintain said systems. This is how I view politics btw...

ngokevin• 5 years ago

Alright, now try building a business on this.

falcolas2• 5 years ago

Liiiike craigslist? It'd also be perfect for a blog website. Or a news website. Or 90% of the content on the web that isn't an app.

blacktriangle• 5 years ago

Design is cyclical, and we're already seeing more leading-edge content types pushing back to leaner design. Medium is almost an example of a business that started out like this but has since exploded into shit. I've been seeing Gemini coming up more and more as well so people are becoming aware of the issues with modern web "best-practices."

So yes, maybe it is time for somebody to build a business on this.

ChrisArchitect2• 5 years ago

(2017) maybe?

kempbellt• 5 years ago

"Fuck" is used here almost as frequently as it is in the book, The Subtle Art of Not Giving a Fuck

I made it about two pages into that book before I stopped giving a fuck about reading it.

I made it to the first headline before I stop giving a fuck about reading this website.

If that was the goal, nailed it.

Swearing for effect can work sometimes, but YMMV. It lost me in this case.

nanis• 5 years ago

Swearing for effect can work sometimes

For effect, it needs to be used sparingly. Otherwise, turns into white noise.

12ian34• 5 years ago

Stopped giving a fuck about reading this comment after two occurrences of the word "fuck".

dylan604• 5 years ago

I get the push against overly stylized, heavy library downloads, etc. However, I'm leaning towards the Perfect MoFo version versus the MoFo version. A little CSS can do wonders. There's a lot of times my browser is full screen width or some size greater than 50% of width. To read the text on the MoFo version, I need to ever so slightly turn my head from line to line. It's right up there with coming late to the movie theater to have to sit in the very first row to watch Star Wars. Reading the scrolling text is a physical excersise.

belter• 5 years ago

View source and check :-) <meta name="description" content=....>

dustymcp• 5 years ago

Sure in the real World with stakeholders and bosses good luck

nomadiccoder• 5 years ago

I dislike websites that make all the text in a narrow column. might be perfect for some but not perfect for fuckers like me

5424583• 5 years ago

For what it’s worth, 95 characters per line seems to be about what’s optimal for reading speed, but most people aesthetically prefer shorter lines.

http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...

“ This study examined the effects of line length on reading performance. Reading rates were found to be fastest at 95 cpl. Readers reported either liking or disliking the extreme line lengths (35 cpl, 95 cpl). Those that liked the 35 cpl indicated that the short line length facilitated "faster" reading and was easier because it required less eye movement. Those that liked the 95 cpl stated that they liked having more information on a page at one time. Although some participants reported that they felt like they were reading faster at 35 cpl, this condition actually resulted in the slowest reading speed.”

hardwaregeek• 5 years ago

The overly curse happy programmer speak is so very stale. I'm not offended or anything but it's just not that great. It doesn't make the content more interesting. It doesn't make the author seem any cooler. It's just meh. It reminds me of Epic Meal Time; a facade of coolness based on cursing, alcohol and over the top food.

I love that instead of this style we're getting a new generation of programmers who are genuinely nice, calm and friendly. People such as Bob Nystrom or Andreas Kling, who don't feel the need to curse every few lines.

chapium• 5 years ago

Its called hyperbole. Also, this was inspired by https://motherfuckingwebsite.com/, so it make sense to follow the same format.

dfsegoat• 5 years ago

Agreed. It's very over the top and just feels super cheesy and 'keyboard warrior'-ish.

maedla• 5 years ago

Totally agree. I think most people stop thinking this vulgarity for the sake of itself type of humor is funny by the time they get to high school

bastardoperator• 5 years ago

Fuck this^, seriously though, I don't think I've worked with a lot of programmers or frontend folks that cursed regularly but instead have been nice, calm and friendly. I don't think the point here was to make it more interesting or to make the author seem cooler. This is just a continuance of an existing joke.

bob1029• 5 years ago

There is always a balance with these things. I try to be careful to use profanity as a tool rather than a literary crutch.

If you only use a phrase like "fucking bullshit" once across an entire blog post or book, you will find it has far greater impact on the reader. They will think "wow out of 400 pages of polite discourse, this is the one thing the author would really like to highlight as adverse".

SamuelAdams• 5 years ago

Agreed, this is what I liked about the book “The Martian”. The protagonist only curses a couple times in the book and they really carry weight given the circumstances.

eljimmy• 5 years ago

Glad to see others feel this way - I swear often enough myself but I find this type of writing very unattractive despite it being a joke. I had to stop reading.

I was wondering if I'm just getting old or if it's actually a bit tired. Perhaps a bit of both.

jolmg• 5 years ago

The overly curse happy programmer speak is so very stale.

Today, yes, but the site isn't new either.

It doesn't make the content more interesting. It doesn't make the author seem any cooler.

I don't think the point was either of those things. It's meant to express outrage at the overcomplication of websites with the excessive use of javascript, the needing to download megabytes of JS to render some text, etc.

Here's the context from the original:

You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow.

Being outraged at the state of the web has been lessening in popularity, I think. That's possibly because CSS has improved a lot and IE is finally obsolete.

redisman• 5 years ago

It’s so dated. Like early 2000s edgy Maddox et al. I still swear a lot but this “style” is obnoxious

JackFr• 5 years ago

Reminded me of Zed Shaw.

Feel the same way about the style.

dspillett2• 5 years ago

The overly curse happy programmer speak is so very stale.

This one isn't so bad in context. It is several down a chain of pages responding to each other that started with a sweary one. As well as each page adding more points (or arguing agaist previously stated ones) they have added a little extra profanity too.

On its own I'd agree with you assessment, but within the pattern if you have followed the story it fits less awkwardly.

ModernMech• 5 years ago

IMO the context makes this one worse. The first one was amusing. The second one was stale. This one is cringeworthy and played out.

ffhhj2• 5 years ago

<h2 id="seriously-some-minimal-fucking-things-are-needed-to-make-this-shit-perfect">Seriously, some minimal fucking things are needed to make this shit perfect.</h2>

What's with the long ID's that look auto-generated? Imagine a large site with this pattern. Does it has a purpose, or is it part of the byte-wasting satire?

Also, after developing large dynamic websites with jQuery I learned that using classes instead of ids is a better strategy.

5424583• 5 years ago

You can (debatably should) do this, as it allows you to deep link into a document. http://example.com#elementID links to that specific item.

ffhhj2• 5 years ago

I see, thanks!

ubavic• 5 years ago

Today, a lot of (commercial) web design is done just to compensate for the lack of (quality) content. That reminds me of that story about a blogger who spends more time designing a blog than writing articles. My advice to young web authors would be to spend more time on content than design. In the end, it doesn't really matter if you used system font (like Arial) or Google font, or if your background is #EEE or #FFF. Just don't make unaccessible sites

BTW: I am aware that average internet users don't think this way

danShumway10• 5 years ago

I want to hecking scream.

The point of the original website in this chain was not that you couldn't do media queries, or that all of your designs had to be unstyled. It was a gosh-darned satire that showed that even if you did literally nothing, your website would still be responsive and readable and load fast. The fact that it did nothing, that it was just a completely unstyled HTML page was the reason that the joke worked.

The point was to showcase that often when "native" web features break, those problems can be traced back to things we added to the page, things that are nice, but are not strictly required to view content online. It was not saying that we should get rid of CSS, it was saying that the web, by default, without any technical knowledge or design chops or engineering input, still works to deliver content.

So naturally, the first thing the web community does is set up a build chain, add some CSS, mess with the contrast a bit, and start some kind of childish competition about who can make the best minimalist stylesheet and get the best HTTP compression set up on whatever pointless server setup they have and to start arguing about what license they're using.

You are missing the point!

The point was never to say that you couldn't add media queries to your website. The web community looked at a brilliant satirical piece and instead of sitting down and thinking about it for even just 5 minutes they immediately proved it right by showing that there was literally no context anywhere, even in a joke page, where they wouldn't be overcome with the irresistible urge to fiddle with things.

booleandilemma• 5 years ago

This one has a dark theme though.

0xEFF• 5 years ago

And a license.

jrockway2• 5 years ago

I have stopped waiting for website authors to figure out how to make a dark theme. I just have my user agent do it with https://darkreader.org/

Like ad blockers, sometimes you have to adjust it, but it usually Just Works. The main innovation from this is that my display has much improved contrast, because I can set the brightness for text on a black background, instead of setting the brightness for an entire screen of white. It is amazing how good a screen looks when it's not running at 1% brightness. (Just don't open a non dark mode app at night, or you won't be sleeping for a week.)

dokem• 5 years ago

And HTTPS so I can sleep at night knowing noone MITM'd my stupid internet content.

fctorial2• 5 years ago

I beg to differ. The first website looks horrible on widescreen displays. A lot of old websites follow the style of first website and their readability could be improved 10 times by adding 10 lines of CSS.

danShumway10• 5 years ago

The first website looks horrible on widescreen displays

But you were able to read it, right? You didn't have to go find a separate computer to use to figure out what it was saying. The text didn't get cut off when you resized your browser window.

The first website looks horrible

I mean, yes? I'm not sure what you're saying by this though. Nobody (at least nobody worth taking seriously) is telling you that you should follow the style of the first website. You should have max-widths and throw some CSS on your page. To quote the original website:

I'm not actually saying your **** site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.

There's this argument in all of the followup websites that seems to boil down to "it's easier to make websites look better than the original." And yes? But who is arguing with you that we should deprecate CSS from the browser? Who is arguing that it's a hard task to make something that looks and reads nicer than a completely unstyled page? It's a weirdly oblivious misreading of the original joke.

npsimons• 5 years ago

I felt like the original was definitely taking the piss from websites that were 90% static textual content, but won't even load without Javascript. The sort of sites in search of a solution to a problem that does not exist.

perennate• 5 years ago

I agree that they might be missing the point, but I also feel that adding a one or two extra CSS lines is really needed to turn something that is very unpleasant to read (the biggest problem being the unlimited width) into something that is really basically perfect. Like, this one is actually pretty much perfect, while the original makes me want to manually add a max-width from the inspector.

bluetwo• 5 years ago

I agree. You could pour 80% of web content into this and it would work.

coldtea2• 5 years ago

>I want to hecking scream.

Overreacting much?

The point of the original website in this chain was not that you couldn't do media queries, or that all of your designs had to be unstyled. It was a gosh-darned satire that showed that even if you did literally nothing, your website would still be responsive and readable and load fast. The fact that it did nothing, that it was just a completely unstyled HTML page was the reason that the joke worked.

Yeah, so? Who cares about the point of the original website? As if it was some sacred ultimate truth, that only makes sense in the exact original wording and message?

The point of THIS website is that you can improve upon the original "do nothing" website by a lot, and still do almost nothing: just add 10 tiny CSS lines.

shoto_io• 5 years ago

This meme won’t die. Heck, I'm thinking how to build the next version of this site!

berniemadoff69• 5 years ago

'a perfecter motherfucking site' will 'improve' this site adding 10 more tiny CSS lines

'the most perfectest motherfucking site' will improve that site by adding just 6 teeny tiny more CSS lines and maybe like the most little tiny bit of javascript.

'the absolute final most perfectest motherfucking site'.. will improve THAT site, and the feature creep goes on.

they're all built off of the concept of the original, so it makes sense to 'care' about the 'point' of the original website. the only sacred ultimate truth was that nice things are possible with HTML only. i disagree that this particular website offers any improvement.

danShumway10• 5 years ago

Overreacting much?

Matching the poster's tone.

Yeah, so? Who cares about the point of the original website?

This website (and the rest of the extensive "betterwebsite" collection) is written as a direct response to the original website. That's why the title is what it is, that's why it talks about the original.

Death of the author is a thing, but people don't typically cite death of the author when they are directly responding to someone's point. We usually expect responses to have something to do with what they're responding to.

If the URL of this website was "howtomakeafastprettywebsite.com", we wouldn't be having this conversation right now, because "put a max-width on your columns" is not exactly a controversial or bold design statement.

andrewzah• 5 years ago

I don't agree with this conclusion. The original could have added ~7 lines of css and made it about 100x more readable, while still making the same point.

xnx• 5 years ago

Same. Websites are fast, accessible, readable, and decent looking by default. We'd be better off if (like operating systems) more of the presentation preferences were left to the user. I used to use an extension for Firefox that allowed me to disable all styles for a website by hotkey. 9/10 websites were more readable after turning off all styles.

lhorie6• 5 years ago

Good advice regarding `lang` and a11y aside, I think people are starting to kinda miss the point of the brutalist format. The format is meant to prioritize pragmatism and functional form instead of being statements in and of themselves (in fact it's meant to be a pushback against earlier styles that prioritized form over function). The original has a great effect because the usage of expletives gels well with the tone of its message ("wake up, you're doing it wrong!").

Here, the substance of the article is primarily about subtle incremental improvements, and it's quite clear that the expletives are being used to draw more effect to content that would be quite a bit more "boring" otherwise (though don't get me wrong, the advice is generally good)

To be fair, one could argue that appropriating a style in a way that is counter to its original intent is itself a form of art. But by the third or fourth me-too, it feels cliche and watered down to me IMHO.

Naac• 5 years ago

The stylesheet for this website is linked as such:

https://perfectmotherfuckingwebsite.com/fuckingstyle.css?v=0...

And is minified. So not very simple, which was the whole point of http://motherfuckingwebsite.com/

So I would say there is some room for improvement, and calling it `perfect' is premature.

lhorie6• 5 years ago

The delicious irony is that this adds an extra point of failure (the request to the CSS file may time out), which brings us right back to the message of the original...

hwc2• 5 years ago

All of those changes *should* be the *default*!

i.e.:

- dark mode should change default colors to white on black.

- viewport default should be "width=device-width, initial-scale=1"

- HTML's only supported charset should be UTF-8.

- Default CSS for body should be something like:

        body{
          max-width:40em;
          margin:0 auto;
          padding:1em;
        }

yoz-y3• 5 years ago

Default dark mode swap would break _a lot_ of websites. Anything that does not do a full CSS reset including Colors basically.

ryandrake2• 5 years ago

Re: max-width, please no. Stop making assumptions about my browser's width. If you must specify a max-width (you don't), please at least make it a percentage of the browser's width, and not a fixed pixel or em value. I'm so tired of web sites rendering as a tiny column centered on my nice 27" monitor with gobs of whitespace on either side of the vertical sliver of text.

lxe2• 5 years ago

I built an antithesis to this: https://lxe.github.io/everywebsite/

alex_c• 5 years ago

You missed a banner nagging me to download the mobile app, I can still see actual content on about 25% of my phone screen!

CivBase• 5 years ago

Also you have to click "I Agree"

No thanks. My preferred method for removing cookie banners is to just delete the node from the DOM. It works 99% of the time and I don't have to agree to anything. I suspect it's only a matter of time until someone makes uBlock Origin for cookie banners instead of ads.

EDIT: Nevermind. It's already part of uBlock Origin.

deergomoo2• 5 years ago

I've noticed an increasing number of sites that seem to break in weird ways, until I temporarily disable my ad blocker to agree/reject cookies, then it works again.

Frustrating really because they're supposed to be opt-in, so no response at all should == reject

ihuman• 5 years ago

What do you do when they say that by continuing to use the website, you agree to the use of cookies?

dekerta• 5 years ago

It just needs an auto-playing video that docks itself in to the corner as you try to scroll away from it

rakoo• 5 years ago

Your site still loads fast and doesn't hog my CPU

GoblinSlayer16• 5 years ago

The top banner should be transparent so that the scrolled text is visible through it (cf. stackoverflow). Also needs the second top red banner begging to enable javascript. The looking glass search button should be in a sticky position in the middle of the window obscuring the text (cf. wired.com).

neogodless2• 5 years ago

Please add some content so that I can start scrolling through it, and halfway into the content, have most of it blocked by a new modal!

lxe2• 5 years ago

That would make too much sense. Request denied.

peter_retief2• 5 years ago

Markdown is the way to go most of the time.

throwaway8238822• 5 years ago

Markdown is okay for a README, but it's pretty sucky if you want to make a document easier to read. It's the .ini file of text markup.

peter_retief2• 5 years ago

I was thinking more of this https://vitepress.vuejs.org/

Hard_Space• 5 years ago

So this is basically Sakura [1] copy and pasted. I know, because it looks exactly like my website, and that's how I did it.

[1] https://oxal.org/projects/sakura/demo/

https://github.com/oxalorg/sakura

yoz-y3• 5 years ago

My preferred classless css framework is Marx. https://mblode.github.io/marx/

redbar0n• 5 years ago

I like the direction this is going.

CodeHz• 5 years ago

It's not perfect, since the scrollbar is keep while while the content has dark background... maybe you need a <meta name="color-scheme" content="light dark" />

enriquto• 5 years ago

Considerably worse than the masterful original. I guess it is satire of the earlier (and also worse) "improvements"?

kyledrake• 5 years ago

Just going to leave this here https://elementcss.neocities.org/

cityzen• 5 years ago

2edgy4me

svat• 5 years ago

Related/I like this: https://jgthms.com/web-design-in-4-minutes/

(IMO someone ought to write, if one doesn't already exist, an interactive tool that suggests recommended styling for your site one by one, and you can accept or reject each of them, then save the CSS file when you're done.)

See also (it works fine in Firefox but the fonts don't seem to change in Chrome and I don't know why): https://mbarkhau.keybase.pub/readable-text/index.html

canada_dry• 5 years ago

If @itsJeffTiedrich had a website.

jancsika• 5 years ago

Serious question:

Why doesn't the Firefox "Reader Mode" icon show up for either this or the original website?

Edit: my reason for wanting Reader Mode on the original website is because I'm reading on a bog standard desktop monitor and the long-ass lines are hard to read.

adewinter• 5 years ago

I would love to know why using "smart" quotes is inherently better than "dumb" quotes. The OP site doesn't say why. The site it linked to doesn't say why. So... why?

throwaway8238822• 5 years ago

"What I’m saying is that it’s so, so simple to make sites easier to read."

If it was so simple, wouldn't everyone be doing it already?

"Websites are broken by default—they are functional, high-performing, and accessible, but they’re also fucking ugly. You and all the other web designers out there need to make them not total shit."

Or we could leave them total shit, and it would probably continue to work just fine. Focus on meeting your minimum requirements first, then add improvements over time.

Yes, it should be simpler, and we should make it easier for people to make things "work right" and "not be total shit". But until then, just make a shitty webpage and get on with life.

nindalf• 5 years ago

I'm fine with the gratuitous swearing, that's part of this genre of websites. I'm fine with the design choices including a11y and dark mode.

What I'm not enthused about is the DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE. FFS, just use MIT. That's what MIT is for.

ryandrake2• 5 years ago

There's nothing perfect or even good about constraining your text to a tiny 6" wide column on my 27" monitor. Web sites, please stop this max-width madness!

bandie91• 5 years ago

i don't understand the hassle around page width.

first: there is no such concept of "page" in HTML. a web page is a document without specified dimensions by the original design of the web, not a "page" in a sense like pages in press-related applications (pdf, word processors, A4). so if you force any width to a DOM box, it'll be either too big or too small for someone (except if you know your target audience uniformely watches fullscreen browser on a 1900×1200px display - or i don't know whatever is the most popular screen resolution nowadays), and you can not reliably force min/max width in px without knowing what are the font sizes in the box, which is often unknown because the font renderer does not disclose it to the DOM renderer, let alone to the css author: remember it must be the user's free choice to set preferred font size for paragraph/headline/emphasizes, because you neither can uniformize all display and viewport size, user's eyesight, nor is it sensible to design your site for all possible viewport when the layout can be more reliably computed by the presentation application when the user's preferences are available.

and secondly: can not users just resize the browser window to prevent long lines? it's one click-and-drag move.

my point is: content authors should only decide on semantic design, not details (not specific color or size, or texture) ; and the reader should fill the specifics and present the document to the user according to his preferences.

Perfect Motherfucking Website

Related Stories