12 ms·
Perfect Motherfucking Website
- bigtones 6y agoNot 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 6y 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 https://github.com/mimemagicrb/mimemagic/issues/98
- echelon 6y agoThis 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 6y agoZed Shaw is better guess.
- Karsteski 6y agoMaddox is now streaming on twitch as a banana so there's that too
- zepolen 6y agoHere is the link for people that understand satire: http://maddox.xmission.com/ http://maddox.xmission.com/
- GoblinSlayer 6y 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.
- Trufa 6y agoUm, what's so bad about that?
- xfour 6y agoYea, 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.
- lhorie 6y agoSome 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-how-big-is-my-phone https://blogs.perficient.com/2014/12/24/css-pixel-ratio-or-h...
- GoblinSlayer 6y agoFirst, that article is about smartphones. Second, even on smartphones, logical or physical, pixels are not related to text, they are related to the screen resolution.
- lhorie 6y agoNot sure what argument you're trying to make; can you clarify? This article is also partially about smartphones (dark mode, responsiveness, etc). Back when `em` was not a thing yet, text was measured in `px`, where 16px was considered to be the "default" size for readability purposes (and `em` sizes are a function of a base value in `px`). Saying that pixels are unrelated to text isn't really accurate, since text obviously occupies space and pixels are a unit of space, and back in the day, expressing layout relationships in terms of pixels was fairly standard.
- jirvoel 6y agoBest thing I’ve seen all day.
- rkangel 6y agoFrom "http://bettermotherfuckingwebsite.com/ 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 6y agoCompletely 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 6y agoBecause 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 6y agoGod 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.
- camgunz 6y agoA 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.
- progval 6y 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 6y 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.
- tasogare 6y agoSometimes it’s necessary, as the number of code points and thus scripts supported by default fonts is low.
- mr_cyborg 6y agoSerifs can be a good thing for readability! I don’t know that the creator’s choice to force sans-serif was ideal here.
- paulryanrogers 6y agoWhen 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.
- ralmidani 6y agoWas Zed Shaw involved in this website or its predecessor?
- vinceguidry 6y agoZed Shaw did the original, if I recall correctly. edit: nope! @thebarrytone did the original, the curious can find the author in the source.
- bluefirebrand 6y agoHow 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 6y agoThat sounds like it would be satire to me.
- joshmanders 6y agoAlright 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 6y agoWhy would you censor the word motherfucking?
- sebastien_b 6y agoEspecially given that the shown URL isn’t.
- juped 6y agoNo, 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/ https://bestmotherfucking.website/ which removed things from a different spinoff. The low contrast meme in web design is especially harmful.
- bluefirebrand 6y agoYep, I agree. Jamming the design theory into it is absolutely missing the point of the original.
- corobo 6y agoI'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 6y agoThey just copied http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ and tweaked it slightly with a few opinionated changes. This is very lazy.
- ChrisArchitect 6y agotoo many of these no? here's evenbettermotherfuckingwebsite from 10 months ago: https://news.ycombinator.com/item?id=23202336 https://news.ycombinator.com/item?id=23202336
- Karsteski 6y agoThis 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 6y agoAlright, now try building a business on this.
- falcolas 6y agoLiiiike 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 6y agoDesign 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.
- ChrisArchitect 6y ago(2017) maybe?
- kempbellt 6y 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.
- dylan604 6y agoI 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 6y agoView source and check :-) <meta name="description" content=....>
- ExcavateGrandMa 6y agomother fucking nice... renders properly without motherfuckingjavascript... muthafucking nice really.
- dustymcp 6y agoSure in the real World with stakeholders and bosses good luck
- nomadiccoder 6y agoI dislike websites that make all the text in a narrow column. might be perfect for some but not perfect for fuckers like me
- 542458 6y agoFor 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/LineLength.asp 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 6y agoThe 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 6y agoIts called hyperbole. Also, this was inspired by https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/, so it make sense to follow the same format.
- dfsegoat 6y agoAgreed. It's very over the top and just feels super cheesy and 'keyboard warrior'-ish.
- deleted 6y ago[deleted]
- maedla 6y agoTotally 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 6y agoFuck 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 6y agoThere 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".
- ffhhj 6y 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.
- ubavic 6y agoToday, 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
- danShumway 6y agoI 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 6y agoThis one has a dark theme though.
- deleted 6y ago[deleted]
- 0xEFF 6y agoAnd a license.
- DyslexicAtheist 6y agoand a lang= attribute
- lhorie 6y agoGood 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 6y agoThe stylesheet for this website is linked as such: https://perfectmotherfuckingwebsite.com/fuckingstyle.css?v=0279c1f1bba0bfb298dd2ac08b41065fc7516374 https://perfectmotherfuckingwebsite.com/fuckingstyle.css?v=0... And is minified. So not very simple, which was the whole point of http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ So I would say there is some room for improvement, and calling it `perfect' is premature.
- lhorie 6y agoThe 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...
- hwc 6y agoAll 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-y 6y agoDefault dark mode swap would break _a lot_ of websites. Anything that does not do a full CSS reset including Colors basically.
- ryandrake 6y agoRe: 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.
- lxe 6y agoI built an antithesis to this: https://lxe.github.io/everywebsite/ https://lxe.github.io/everywebsite/
- alex_c 6y agoYou missed a banner nagging me to download the mobile app, I can still see actual content on about 25% of my phone screen!
- CivBase 6y 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.
- deergomoo 6y agoI'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 6y agoWhat do you do when they say that by continuing to use the website, you agree to the use of cookies?
- dekerta 6y agoIt just needs an auto-playing video that docks itself in to the corner as you try to scroll away from it
- rakoo 6y agoYour site still loads fast and doesn't hog my CPU
- GoblinSlayer 6y ago
- peter_retief 6y agoMarkdown is the way to go most of the time.
- throwaway823882 6y agoMarkdown 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_retief 6y agoI was thinking more of this https://vitepress.vuejs.org/ https://vitepress.vuejs.org/
- Hard_Space 6y agoSo 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://oxal.org/projects/sakura/demo/ https://github.com/oxalorg/sakura https://github.com/oxalorg/sakura
- yoz-y 6y agoMy preferred classless css framework is Marx. https://mblode.github.io/marx/ https://mblode.github.io/marx/
- redbar0n 6y agoI like the direction this is going.
- CodeHz 6y agoIt'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 6y agoConsiderably worse than the masterful original. I guess it is satire of the earlier (and also worse) "improvements"?
- kyledrake 6y agoJust going to leave this here https://elementcss.neocities.org/ https://elementcss.neocities.org/
- cityzen 6y ago2edgy4me
- svat 6y agoRelated/I like this: https://jgthms.com/web-design-in-4-minutes/ 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 https://mbarkhau.keybase.pub/readable-text/index.html
- canada_dry 6y agoIf @itsJeffTiedrich had a website.
- jancsika 6y agoSerious 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 6y agoI 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?
- throwaway823882 6y 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 6y agoI'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.
- ryandrake 6y agoThere'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 6y agoi 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.
- h0ek 6y agoMore fucking websites like this motherfucker. Thanks.
- bionhoward 6y agoi feel like this is bound to eventually converge on tufte.css https://edwardtufte.github.io/tufte-css/ https://edwardtufte.github.io/tufte-css/