This site was styled by YouTube comments | Hacker News Reader

This site was styled by YouTube comments

css-comments.vercel.app

148 pointsDanielBark61 comments

Off topic but I've wondered where colours like "hotpink" came from. Turns out hotpink was first recorded in 1889:

> Then, never was seen living woman so gratuitously ill-dressed! One might have believed she had a sworn antipathy to pure colours, or becoming “cuts.” Hot pink, mouldy blue, livid lilac, and diseased green: such were her preferences —Bentley’s Miscellany, 1849

https://www.merriam-webster.com/words-at-play/pink-fuschia-t...

Shocking diseasedgreen didn't make it into the CSS spec

Low-key bummed out that I can’t put

    background: mouldyblue;

in my css :smh:

Interesting, the other colours are all references to real things, I think. Blue mould; purple-faced (lilac) angry people; green of (say) a diseased limb, or as we describe someone's face when they're vomitous.

So, what is "hot pink": Hot metal before it's red hot? A blushed person's skin??

Maybe it's from 'haute pink'?

Aniline dyes were first synthesized around 1856. The first aniline dye, known as Perkin's Mauve (Tyrian Purple), was discovered by English chemist William Henry Perkin. This breakthrough in organic chemistry paved the way for the production of a wide range of synthetic dyes, which were cheaper and more colorfast than the natural dyes that were previously used.

Initially, aniline dyes were available in a limited range of colors but by 1859 "hotpink" (magenta and solferino/fuscia) was fashionable, and others "from 1860, and in the '60s by various shades of brown, violet, blue, green, yellow and black".

https://www.npg.org.uk/collections/search/portrait-list.php?....

Oh no. Tangentially related, but this reminded me of That One Subreddit[1] before The Big Redesign. I don't even use Reddit, and I don't remember how did I even find about that, but I will never forget it as the ugliest thing I've ever seen.

[1]: https://imgur.com/a/4mDW3Hx

Not pictured in the screenshot: an equally ugly mouse cursor in the shape of a pixelated sock.

I won't say the name because I don't even want to send traffic of any kind to Reddit, but I can confirm The Internet Archive has pages from before The Big Redesign.

The linked vercel app is nice and accessible in comparison.

Still better than reddit redesign

This takes me back to custom myspace layouts. Many people's first (and last) forays into coding!

This was the closest I ever got to getting physically injured by just looking at a website.

Weren't around for the '99-'05 timespan, eh?

I was. But I was younger then, and less prone to injury.

LOL, yeah, good point. I think most of us are also exposed to a lot less intentional jank these days. Used to be a whole somewhat-popular genre of website. Lack of exposure could lead to reduced immunity.

We didn't have access to the Grimdark CSS selectors in those happy times.

But we did have "DHTML" and Flash.

Incredibly, opening this link on Firefox on my iPhone crashes the phone. Happens every time - click the link, phone restarts.

Opening in safari, its a completely blank page

Edit: a couple people said that’s because someone set display: none, so likes unrelated?

Very common webkit behaviour.

Most powerful iPhone runs out of memory when it has to render too much.

This should never crash the phone, though. Especially in a heavily sandboxed OS like iOS

May be more directly related to the CPU/etc load and HW age rather than software. If the phone's battery is older, it may not be able to keep up with the bursty power draw, which can cause the phone to crash.

Anyone else have iOS Safari crash so hard on this it temporarily locks up your phone? To the point that open Safari again immediately crashes and I had to frantically spam the tab closed in order to recover my ability to browse the web.

that it only crashed Safari is surprising...something this cursed likely has the power to end marriages, kill house pets and void the very fabric of reality.

Blank page for me in Firefox. There's a few CORS request errors in console.

Same here. Blank page with both Chrome and Firefox.

Someone set display:none; on body. Open the inspector and remove it to see how the page looks

Classic

This is a wonderful experiment and I wish there was more content like this on the web. Props to you for letting the internet deface your site.

Yep. As advertised. Looks exactly like YouTube comments and burns the damn retina. Off to drip lemon juice in my eyes now...

Is it dead ? It's just a white screen right now. Or maybe that youtube decided to add CSS that breaks the website ?

No, someone posted a "body { display: none; }" comment. If you disable that in your devtools it comes back.

Edit: I posted a countermeasure comment, it should be up in a minute or so.

This has a Reddit place feel to it :)

Yeah, all good now, thanks ! I tried to add a little animation myself, don't know if it will be live soon or not

Someone set display:none; on body. Open the inspector and remove it to see how the page looks

This really drives home how "design by committee" often ends with awful results.

I understand that sentiment, but this as is if your committee was a bunch of pseudonymous script kiddies. Is any org that dysfunctional? Please share a story if so.

I found this really fun to learn some more CSS. I am currently battling in the comments. Come join!

This is beautiful and I hate it. This is an excellent creation.

Maybe not a good idea to link a page that runs source code created by random people. Well CSS is very safe, but still.

You can do quite a bit of tracking with CSS by conditionally loading third party resources. Tracking pixels, loading different images on hover, active, focus, etc can effectively track users

For example some controlled frameworks can even have CSS only keylogging https://css-tricks.com/css-keylogger/

The correct solution is enable a strict Content Security Policy (CSP) - so even when a user compromises your website with XSS/CSS they cannot extract any data they obtain. Note: this website has not configured a Content Security Policy :(

I wonder how big the CSS file is. It stands to reason that the longer the site is up the longer the CSS file gets and the longer it takes to load the page. I wouldn't be surprised if the size of the CSS file was ludicrous at this point.

Best thing I've seen all day. The design is glorious.

Surprised nobody did .body {visibility: none;}

Interesting way to fuzz web rendering engines

The new ACID test.

Anyone grab any screenshots while it was up?

I have a database containing all the styles with creation date so i can recreate every single snapshot of the site :D

I know this is mean to be an example of awful design, but I could totally see it becoming trendy

It used to be the trend 20+ years ago. At this point it's retro, so good chance for this to come back in some corners of the cyberspace..

I completely ruined all the fun with

* {all: unset !important;}

I'm sorry! (I'm not).

Surprisingly seems to work pretty well on mobile.

Does not work at all with iPhone.

Crashes before loading anything.

A problem repeatedly occurred on "https://..."

I instantly regretted clicking this

Doesn't load on Brave.

It didnt work for me at first but I refreshed a min later and it loaded in Chrome.

seizure warning. jeez

aaaand it’s down. Thanks vercel

I created a video where any comment that was valid CSS would be added to the site without moderation.

I suggest that you have a look at the site. Its a testament to programming joy.

Early on someone posted css that added a trollface that would zoom across the site. I realized that allowing images inside the css was simply to dangerous so whenever an image was included in the css i would have to approve the css before it being applied to the site.

This video explains how the technical setup was achieved.

https://youtu.be/z8b9WJ1oD8w

Hope you enjoyed this little experiment!

// Daniel

Interesting idea, but if you didn't filter the elements with URLs, you're creating a CSS injection attack that enables people who visit the website to work as bots in a botnet and attack some url.

I did :)

It's fun! Are there any security considerations when allowing random CSS?

Privacy ones by using URLs for images or imports that point to external domains, could leak who is visiting.

There is also a way to do a CSS keylogger for input elements, but I don't think the website has any or that users would type anything sensitive.

Beyond that, it's as safe as visiting any other website, especially if you don't use an ad blocker.

Not with content-security-policy set correctly(I think?)

Up again! I have a way of disabling the comments that are to destructive

Reply on news.ycombinator.com