keenrivals / bestmotherfucking.website Goto Github PK
View Code? Open in Web Editor NEWThe Best Motherfucking Website
Home Page: https://bestmotherfucking.website/
License: Creative Commons Zero v1.0 Universal
The Best Motherfucking Website
Home Page: https://bestmotherfucking.website/
License: Creative Commons Zero v1.0 Universal
https://news.ycombinator.com/item?id=26740593 (I would say I agree with the top comment.)
https://perfectmotherfuckingwebsite.com
Additionally, I'd say contributing is better than forking… It's not better, if it doesn't include the previous points anyway.
https://drewdevault.com/2021/06/27/You-cant-capture-the-nuance.html (+ https://drewdevault.com/2021/10/17/Reliability.html)
kinda related dead-stale thing from me: https://github.com/jtagcat/middle-click-offenders
https://doesmysiteneedhttps.com probably has the same target audience.
Find a way to somehow magically link it?
So I'm not sure on the language, but:
Ever fucking noticed in Firefox's URL bar?
This is the button for reader view. Click it, it fucks websites to be better.
(Ironically this website doesn't support it, because it's already good enough.) (no idea why)
Don't recommend them
The link colors in dark mode are the defaults from the browser, and not very good. This is my reminder to fix them. There's discussion on this in #54
Unitful line-height (which includes percentages; isn't it nice when CSS makes sense?) has tricky behaviour with cascading, and is best avoided since unitless line-height Just Works. MDN has an example. This doesn't actually matter directly to such an awesome motherfucking website, which is too awesome to have complicated nesting and style interactions, but, in so far as it's the best motherfucking website on the goddamn interwebs, it'd be better if it was a showroom for relevant best practices.
Currently the website is hard to read due to the choice of background color. #111 or #222 would be a better choice for it to not hurt by eyes.
bestmotherfucking.website should recommend and use some meme headers:
Content-Security-Policy
can ensure that your webpage only contains approved content, and doesn't have any webshit. Relevant to the HTTPS section is the upgrade-insecure-requests
directive, or block-all-mixed-content
.referrer-policy
protects users' privacy when they click your linkscache-control
is already coveredstrict-transport-security
as part of "You have no excuse for using HTTP".There are others I'd recommend (x-content-type-options, cross-origin headers, and maybe permission-policy), but this isn't meant to be some comprehensive guide. Maybe link to another page that explains headers in more detail for those more inclined to learn more.
The site's A/AAAA/CAA DNS records seem missing, so the host cannot be resolved. This website is currently unreachable.
Cloudflare's brotli compression isn't the maximum brotli compression level. Compressing the website server side at max Brotli level can reduce the transfer size by ~20%. (~3.3kb to ~2.6kb)
Proof of concept: https://joshuawest.ca/bestwebsite/index.html
"Why the fuck are you loading 600 extra bytes?"
:p
(Love the initiative and style of the site!)
Templates for the lazy asses.
Seriously, how hard is to make your website _a_ good motherfucking website? Don't delay, use these templates today:
- Hugo
- Jekyll
- WP
- 11ty
- whatever you can think off
Getting people over the fence with 'So I have to redo my entire website? How do I apply this?' with click, click, click. As with everything, making it convenient gets people to actually incorporate/use the 'design' (piracy, security, privacy are quite examples).
Just letting you know that cloudflare throws Error 526: Invalid SSL certificate
when navigating to your website.
Caching. I have minimal idea on how it works.
Is a CSS file for only the things needed on each page or a common CSS file better? Does the CSS file get downloaded every time?
E
I prefer light theme myself, but I guess it would be nice.
This could be automatically done by: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme (and prehaps add ◐ and ◑ as a manual override).
..or the dark mode fans probably use an add-on anyways. Feel free to just close this issue.
What about keeping background color black & color white? Does it break the simplicity?
From #65 1.
I say: What if the link rots? Context is gone.
Important side note: Encourage archiving all links you link to. archive.org, archive.today (archive.ph is the main domain atm)
I have no idea if this is a good idea.
But Google seems to think it is: https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags
What do you think?
Yes, I am protesting max-width
here. It sucks.
I have a solution. It's here: optionalmargins.html. Click the big-ass margin. I know, it's genius.
I hope we can put the max-width debate to rest. My personal opinion is that users can resize their browser window if they want to, but I'm willing to compromise with the above solution.
In case this cannot be resolved peacefully, have my adblocker ready to filter all of them stinky max-width rules.
It’s also required for HTTP/2 support which allows browsers to fetch resources more efficiently.
Maybe mention, that it's (kind of) 'last gen'?
http://www.awayback.com/revised-font-stack/
Here's a random but functioning archive.org link to it:
https://web.archive.org/web/20150303130927/http://www.awayback.com/revised-font-stack
There's no fuck-yo-mother feature
When you pop open this hell of a page on Safari with dark mode on, the damn link colors are like a camouflaged ninja against the black backdrop. Eyes-strainingly unreadable, man.
Seriously, what the f*ck? A website ain't a damn Rorschach test. It's a communication tool, and guess what? The basic purpose of text on a site is to be visually consumed, not to give you a migraine. So don't screw it up with bad contrast.
I like web feeds: RSS, Atom, json, XML. I wish all sites had them natively. I wish often there was no limit (20 latest, I understand that you don't want me downloading all articles) so I could pull all articles to my reader.
Even the 'contrast rebellion' you linked to uses #1b1b1b text color on their off-white #f0efd1 background. Yes contrast is important, but to much of it is just painful.
How about adding overflow-wrap: break-word;
or overflow-wrap: anywhere;
to the body selector. It would prevent overscroll by breaking long words and URLs—particularly on small screens.
It would be wise to mention @media
attributes and typography practices like the last motherfucker did.
Right now, bestmotherfucking.website has a mixture of <section>
and numbered heading elements for hierarchy. It could be using <section>
elements within <section>
, which is the utopian HTML5 dream. If <section>
was really adding value, this would be preferable. But, browsers basically ignore <section>
and HTML5 outlining: apparently there are silly interactions with screenreaders which mean that they're probably never actually going to be used by browsers; there are probably other web-compat issues freezing this non-behaviour in place now too.
Since proper use of numbered heading elements will unambiguously structure the document and hence don't lose any semantic value, even if it's error-prone and obviously clunky, I would suggest giving up the pretence that HTML5 outlines are coming and removing the no-op and not-everywhere-they-could-be <section>
tags.
There is a small typo in the following sentence:
HTTPS improves your search ranking so people are more likely find your ramblings on the Google.
should be:
HTTPS improves your search ranking so people are more likely to find your ramblings on the Google.
Seriously. It sucks.
Nginx is wildly faster and can handle literally dozens more connections (ESPECIALLY for pure static HTML), while also being way easier to configure.
https://help.dreamhost.com/hc/en-us/articles/215945987-Web-server-performance-comparison
if i want print this site on A2 page format (because I can) i must use 2 sheet of paper
but if i add print css for disable max-width
@media print{body{max-width:none}}
(only 34 chars!)
its only fucking 1 sheet
Contrary to what the website mentions, only web browsers de facto require HTTPS in their HTTP/2 implementations, but HTTP/2 itself is unencrypted by default.
On the other hand, HTTP/3 does require encryption as TLS 1.3 was baked into the protocol itself.
See title. When you use the word "design", it gives an impression that design is only about how the website looks. This is not the case, or at least it shouldn't be - so we should be making that clear by either denoting deliberate misuse via scare-quotes, or changing the word used to one that does mean no more than "what the website looks like on the design computer".
Yes, this is about as satirical as the website itself.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.