Tell HN: I was tired of being a perfectionist so I built an app within 24 hours
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.
102 comments
[ 5.1 ms ] story [ 169 ms ] threadFwiw, it's very slow on desktop Firefox with M1 until all of them finish loading.
Nice work though! I'd suggest moving to screenshots that toggle to an iframe once they're clicked.
I think the personality type that reads a lot before starting the first time reads a lot before starting the tenth time, because you come back to it having learned so much and having new things you want to try. My advice for people like me is try to find a firm where you can be slow, because despite learning 1000 shortcuts you'll never be fast.
I frequently create small experimental scripts to iterate on one aspect of a larger program, and then file that example away. I'll likely come back to it to copy code for months or years. Unit tests are your friend as well.
The other thing is, read more code. Read some legendary projects in your preferred language. Read the source of your favorite framework. You don't have to read the entire codebase if you don't want, but try to understand enough of it to see where the most critical parts of the design are, and then understand how that was put together.
If there are specific aspects to your programming you'd like to improve upon, and it's an area I'm knowledgeable in, I'd be happy to recommend specific resources.
> I spend a bunch of time looking up the best way to write something.
You made it not simple
This is what I do normally and it's what I was tired of. I always had to search for the "best" way of doing something, and in the end I had more "shiny object syndrome" than actually shipping anything substantial.
This led me to this current project. I didn't look anything up, really. I got distracted once or twice by second guessing myself, to which I had this train of thought, as an example:
"Should I use iframes or screenshots? If it's screenshots I don't want to sit there and screenshot every single site. How could I automate it? I could use Puppeteer or Playwright, let me look at their docs. [30 min later, I'd realize I wasted my time and wasn't focused on the project]. Ok, iframes it is then. I know it'll make the site slow since it has to load a bunch of data, but iframes have advantages such as showing the interactivity of a site in its dark theme that screenshots don't."
And on and on. So I gave myself a time limit and just started coding. The debugger/type checker in my case was TypeScript but even still there is barely any logic to the site at all (and thus no errors), the only major part was parsing JSON (which is predictably easy in JS/TS) and for-looping through it. Next.js also has hot reloading so I can see a live preview of the page on the left side of my screen with VSCode on the right, so I wouldn't say I'm one of the coders you're talking about, but maybe those people also do something like what I do and you perhaps just thinking they're coding without ever running it.
I had thought I was good. For some difficult problems, I couldn't even solve it after looking at the solution.. then, there were some people solving them within 20 minutes (including reading the question and coding up the correct solution).
That's when I've learned that there are people who are that good.
If it worked, generalize it a little (in a sense of factoring out constants and special cases) and add to easily-accessible snippets. You created a login form or middleware? A build config? A function that does some generic-y X? A set of useful imports? Great, save it for the next time right into your editor, right now. 99% of code is just that - modified snippets. Let this set grow unbounded and brush it up timely. Think of it as your own battle-tested SO.
Making sure what I wrote works, one baby step at a time
When you’re developing with logging and restart-on-save, it is a matter of ctrl-s. Sometimes it’s hard to get to the point of failure, e.g. you have to make a couple of requests (or clicks if there is ui) only to get to the point. This has to be reduced. Put a temporary “cut to the chase” code which does that. If it is a server, send these requests to yourself at the start. If it is UI, wait for some selectors to appear and click them programmatically. If it is a function, move it to tmp.<langext> and restart-on-save it there. Disable all tedious signing/cookie/role/etc checks until production. Your goal is a very hot (ctrl-s -> look -> refine) loop. It takes forever to complete and breaks cadence if it contains “blocking calls”.
I seriously advise you to not use a debugger unless you’re debugging a complex algorithm or feeling a need to use it. There is no value in stepping over a mostly laminar flow, just print it.
They just write pages and pages of code without ever running it
Maybe they test later, or rely on a type system, or accumulate edge cases and hard to find bugs, or they mastered these parts and write from memory. Perhaps some combination of it.
What do you think of John Carmack's[1] suggestion that using a debugger is the best way to program? I am by no means comparing myself to Carmack :-)
I find debugger a good way to "see" what the program is doing. But that leads to a lot of time wasted.
[1] https://youtu.be/tzr7hRXcwkw?t=138
That said, many developers find debuggers superior to logs in any situation, and if you do so, then use it. My advice is not universal. The key point is to explore development “modes” and choose what’s suits best the “write code faster” goal in your own domain.
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.
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
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.
That said, I'd definitely tell my boss I need a week, just in case
Knowing what to do is more important than doing it.
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.
Also FWIW the new version of the Next.js image component has been refactored onto native browser lazy loading. When it was first created, cross browser support wasn’t there so it had to polyfill support. Not only does it do lazy loading, but it also can optimize your images for you.
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.
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.
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.
I'm more interested into people from that era doing lean and mean apps. I've seen a few instances of AS400 and COBOL programs that gave me more joy than anything the web ever produced. And I assume Parent was talking about people doing similar things.
Also, light themes are superior.
What did you just say to me ? /s
Ok. Must be true if you are saying so. Perfect job with the website - downloading 88MB of data just because I accessed the site.
Anyway, I did some more performance optimizations, it should load lazily more efficiently and not be as laggy when it does.
I find it difficult to finish anything I start due to being a (self-proclaimed) perfectionist. It's nice to see someone with a similar problem going out of their comfort zone.
Kudos!
1. There is an HTML attribute to do just this and it seems to work for iframes too: https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
2. There is a simple library called “lazy sizes” (https://github.com/aFarkas/lazysizes)
I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!
I also added the HTML attribute, not sure I can see any real change.
Using IFrame is really bad ux too. You could generate scrolling page gif screenshot
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.
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.
If you're someone's close friend, or a close family member, you probably know when and how you can provide unsolicited feedback in a way that it is received well. If you're not (e.g. everyone on this thread) you're just offering criticism - in the negative sense - that was not asked for.
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.
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?
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.
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
As someone who teaches prototyping but then ends up spending 3 months on a “1-day indie game project” I think this is quite impressive!
Here’s my approach in case you find it interesting: https://sonnet.io/posts/reactive-hole/
I realized that I spent more time perfectionning my work than actually do the work.
I settled for two languages for the back (go and python and a fixed nr of libs) and one framework for the front (quasar, vue3, vite), and PWA to have an "app" on desktop and mobile.
This is heavy, not optimized, ebery problem looks like a nail to my only tool (a hammer).
But I write mostly for myself and managed to write over an evening the app which would track chores at home for the kids, display it on the home dashboard and disconnect their phones until they are not done (just kidding for the last one, my children are way stronger than me and I do not take risks, and stay with the "because I said so").
I have many similar apps, some I throw away, some I use, some I open source.
Perfectionism is painful.
> I realized that I spent more time perfecting my work than actually do the work.
> Perfectionism is painful.
This mirrors my own experience, I actually wrote a bit more about it on my blog, albeit perhaps in the context of writing software that's actually maintainable "How boring or novel should your technology choices be": https://blog.kronis.dev/articles/how-boring-or-novel-should-...
There are options out there that are kind of not very exciting, but have good documentation, tutorials to do most of the typical stuff, answers to most of the common problems and decent performance as well as the ability to scale.
I also recently wrote a system to process millions of documents on a single node based on PostgreSQL, Java and MinIO as an exploratory project (to also explore things like database partitioning), it worked pretty well and I did that in a few evenings "Pidgeot: a system for millions of documents": https://blog.kronis.dev/tutorials/1-4-pidgeot-a-system-for-m...
I guess at the end of the day you just have to pick something that works, maybe a bit on the boring side and stick with it as long as it's the right tool for the job.
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.
If you had a mailing list, I'd sign up to get notified about new dark modes you add in the future.