I'd amassed around 20-30 and I told my friends about these cool sites yesterday. They mentioned that me linking to each one was kind of annoying and they wanted to see all of them at once, similar to how Awwwards and other web design inspiration directories worked. I thought a making a dark mode directory was a great idea as I could just link one site to my friends rather than bombarding them with links.
I'd previously worked on other projects but I always spent too long nitpicking every detail. It always took so long that I lost interest after a while and the project was abandoned, or I overengineered the site so much that I didn't even get to the actual app functionality. People say to build an MVP as soon as you can, but for certain people, it can be quite a challenge to constrain yourself.
This time I told myself I'd do everything in 24 hours, as it's not a super complex idea to create. I bought a domain off Google Domains, used Next.js to spin up a React site, and basically converted my bookmarks into a JSON file along with their titles and descriptions. In the React side, I read the JSON file and put the URLs in iframes with another container with the title and description.
One tricky part was that many sites block iframes, so what I had to do was save the entire website into its constituent HTML, CSS, and JS, and I displayed that instead in the iframe.
Overall, I'm happy that I was able to execute on an idea within only a day of working on it. It's not a monetized product or anything, simply a directory, but still, it was fun.
The site is: https://darkmodes.com (I was surprised that the .com domain was actually available!)
Edit: If the link doesn't work, try https://darkmodes.vercel.app, having some domain issues right now.
As someone who finds himself in a perpetual battle against the tendency to be perfectionistic: you are an inspiration.
I'm seeing the sentiment shared by other comments way to often regarding over engineering, stack preference, incorrect terminology and what not anytime someone shares something they made. Some feedback might be valid, but most of it is just unnecessary nitpicking. So keep doing what you're doing OP.
No project is ever perfect and getting things out the door is always messy.
Hope me being an inspiration helps fuel you to do a 24 hour type challenge as well! Maybe that could be a good idea to build a directory of people doing such a challenge, I only know of https://24hrstartup.com/ which was live a few years ago but that seems to have only been a one-time event.
HN comments often miss the context of a post and focus on nitpicking or giving unsolicited feedback.
Many of the HN members I met (makers/hackers/students) lurk but rarely post here for that reason.
I guess you wouldn't really call that an 'app', just a page. But it'd be pretty quick and simple. And if you really want to get away from over-engineering and getting lost in the code details, doing it without any code at all is a good exercise.
Perhaps from there a simple script to take a list of URLs and generate the page's HTML, but still no libraries or frameworks. Scripts like that can live for many years, just being run as needed, serving their purpose with no maintenance or dependency or deprecation issues. Some scripts that I wrote are still running perfectly fine on their own, untouched after 7+ years, while the main application requires a whole team of people constantly maintaining it.
It's good sometimes to get back to basics to put things in perspective.
Things like the leftpad debacle of 2016 should make us think about how we build complex, fragile ecosystems that are constantly changing, and need constant maintenance, often to just do something simple that doesn't need all that complexity in the first place. How simple and quick can you do it? Do you really need code to dynamically scroll down to thing X, or could you just put that thing at the top to start with and not need any code or dependencies?
You're on a good track. We over-complicate things a lot.
I've seen a COBOL+assembly team run rings around teams with more modern tooling, producing guis that, while ugly as hell, were more productive than a modern HTML based interface. They know their tooling and business inside out, and that more than offset the fact that their tech was 50years stale.
Ironically it's even easier to host an iframe than an image. I didn't want to really sit there and grab screenshots of every site, plus iframes are interactive which is interesting given that many of these sites use a lot of animations, for better or worse. I also don't have to do any upkeep really, as long as the site is live it will continue to be updated in the iframe since it's accessing the actual site. The only thing I had to do extra was download the site contents for a few of the sites, which block iframe hosting, but it's far fewer than getting screenshots for all of them.
I even thought more deeply about the screenshot approach, going so far as to look into using Puppeteer or Playwright, but I decided against it because that's even more work than doing <iframe src="site.com"/>.
I used Next.js because that's what I know, someone else on Reddit I believe asked if I could do the same in 12 hours with WordPress (or raw HTML, CSS and some scripts as you mention), which yes is possible but I don't know WordPress so I'd have to learn its quirks. The HTML/CSS/scripts version doesn't seem much easier, since that's basically what I'm doing in the React side as well, for-looping through the contents of a JSON file which Next.js handles generating HTML for automatically.
None of those survived even a year without bitrot.
Sure, once the site was deployed it would work forever regardless of the platform. But this is true with Next.js and Vercel (what the OP is using) as well.
Once I wanted to modify the site and reupload it, something would always break. Incompatible dependency versions. The deploy manifest (for Vercel) doesn't work anymore. Something happened with Bash (I don't remember what exactly was the culprit). Nix doesn't work on my new machine and I specified the deps (imagemagick etc) with Nix because "then it'll never break". Etc.
At least with Next.js you get a bunch of nice stuff out of the box. A Next.js site should in theory be faster than a fully 100% static site. Next.js automatically prefetches links in viewport/on hover, makes sure images are only loaded when they are in the viewport, and inlines Google Font links. Vercel automatically distributes your static files over a CDN.
This is just my experience, but personally I have learned that if I want to make a static site, I will not avoid bitrot no matter what. So at least I might enjoy free CDN-enabled hosting & out-of-the-box performance tricks & a good templating language.
To be fair that can already be done in pure HTML with the `loading="lazy"` attribute. And browsers will probably do the link preloading as well sooner or later, some already do in specific cases.
NextJS is nice but after all the issues with dependencies and npm I went through I'd hesitate to use it for personal projects.
It was originally written in PHP over 10 years ago with bits and pieces added.
Over the years it's gone between hosts, Linux distributions, and many PHP/Apache versions.
I think it only broke due to a PHP depreciation once.
So if you want longevity, I'd say PHP is the best option, even if you just use PHP to generate a static site.
Folks like it these days, nothing wrong with doing stuff for fun. Possible that it enabled them to complete the project in 24h this way.
Using a static site generator would be a single for loop.
The rest is a small amount of CSS.
Bonus points if you write the selector necessary to "display: none" all iframes except one at a time. Solves the excessive memory problem. :p
Deleted Comment
Nice work though! I'd suggest moving to screenshots that toggle to an iframe once they're clicked.
Deleted Comment
All that being said, I use the browser extension Dark Reader to crank up backgrounds to #000000, but I think most people would be annoyed at pure black.
I’m looong tired of setting up a scaffold, configuring configs, building builds, componentizing components, zealoting paradigms. If a way is correct, it must be built-in, no-overhead. Feed it to someone else if it takes half an hour only to set up.
A game engine is a good fit for what I'm doing (simulation and 2D visualization) so why bother assembling it out of a dozen hand picked fragile JS libraries just to shave off seconds on something that will be used for tens of minutes once it is started up?
Also, light themes are superior.
What did you just say to me ? /s
Did you know there is a similar challenge between comic-book creators called the ‘24h-comic challenge’? The idea is to produce a 24-pages-long comic book in 24 hours. Creators like Scott McCloud or Neil Gaiman have participated.
https://en.m.wikipedia.org/wiki/24-hour_comic
I hope this comment is not taken as a criticism, which you have received a lot already in this thread. I myself use Next.js (and Cloudflare stack) in almost all of my projects and I feel very productive with it.
Just throwing an idea here: since the viewer of your website may need to copy other website's design, it would be nice if you can save them a few clicks/keystrokes by providing a color palette. One thing I learned recently from creating a personal tools like yours (with additional types, elements, motion pattern, and tech stack) is that we can extract colors from any page easily using CSS Overview panel in Chromium Dev Tools.
Lastly, I just want to congratulate you on shipping!
Regarding the legality, I did look into it, it seems like iframing other websites should be legal based on what I read, but if anyone contacts me to take down their site, I'll do that.
I think embedding other websites in iframe may fall into a gray area. This is my reasoning: even though the target website can include X-Frame-Options: DENY in their header, a lot of them don't, and it opens their websites for abuse, whether intentional (from your POV, e.g. clickjacking), or unintentional (e.g. a DDOS attack on your website may also affect the target websites). Because of this, I have been careful not to embed cross-domain websites in iframe.
The issue that I was trying to bring up is actually not about iframes, but rather, other website code and assets that you copied and hosted in /sites/ directory. As you know, websites and their assets (logo, font, etc) are copyrighted materials - so we can't (directly) use it without the owner's permission. I don't know if this usage would fall under Fair Use though.
As previously mentioned, I'm not versed in legal stuff.
> Do you know of a way to automatically extract the palette or would you do it manually?
CSS Overview panel does the job. It groups colors by usage, such as by background and by text, and it also gives you the contrast level for each. I'm sure you can find other tools for extracting colors. Most recently, "HTML To Figma" by Builder.io is the one that gains a lot of hype. It basically converts any web page into figma layers that you can edit. From there, you can extract all of the design tokens, including colors.
I don't know any tools that can automatically extract and label a color palette with 100% precision. If you care about accuracy, I think you still need to do a bit of curation / manual work.