Tell HN: I was tired of being a perfectionist so I built an app within 24 hours

Love it! This might do well on Product Hunt.

If you had a mailing list, I'd sign up to get notified about new dark modes you add in the future.

OP: don't change a goddamn thing. Other commenters' suggestions are great, but that's the point: you built the thing and you released it. Doesn't matter if it's React, large, not static, whatever - it's done and it works.

As someone who finds himself in a perpetual battle against the tendency to be perfectionistic: you are an inspiration.

100% THIS.

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.

Agree completely. All the nit-picking is why the hardest part of what the OP did is putting themselves out there. Releasing a project requires a mix of traits that are often at odds, naivety to think you can, humbleness to listen to valid feedback and ego to push down the path you think correct.

No project is ever perfect and getting things out the door is always messy.

OP can ignore the cynicism from a lot of the commenters here, but can improve the app based on some of the suggestions, to improve the performance and learn some new skills.

There’s a difference between explicitly asking for feedback and saying “hey here’s the cool thing I made, check it out!”

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.

Nice, but, do you really need Next.js and React for that? What about just taking screenshots and linking them to the sites in simple HTML? Wouldn't that serve the purpose?

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.

Any builder is 10x as productive when working with known tooling. Meanwhile, tooling that even makes you 5% more efficient is very rare. So the OP is very right in his technology choices.

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've been looking for such teams for a long time. Can I interview them ? or work there ? if the company still exists.

FWIW, there are banks out there that still use Cobol.

Yeah I spent half my internship in a acquired COBOL shop, the thing is not all cobol is created equal and theirs was the sum of all evil (old debt, old code generators, less old 4GL transpilers, eclipse pluging glue code).

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.

Even the banks are starting to move on. I’m seeing local banks now listing mostly python and some rust positions.

It would be interesting to see how they planned their migration. Wrapping or gradual replacement..

RPA. Get a tool like UIPath or BluePrism that writes to the legacy UI, then build modern tools that communicate with UIPath's API.

This can be misleading. Most local banks aren’t using the type of technology the bigger banks are, because those smaller banks tend to run on banking-as-a-service platforms. So the smaller banks are often essentially just proxies to larger ones.

Yes, I'd call it a site as well, not an app, my mistake.

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.

> do you really need Next.js and React for that

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.

This is a project that could be done in less than 30 minutes as a webpage and maybe some JavaScript.

It could take me more to buy domain, transfer it to Cloudflare, set up DNS records, spin up VPS, set up the server, create project in IDE, create github repo and clone it on the server. All of this before I even write thr first line of code.

I'll bet you could speed run that plus the webpage with screenshots in 30 minutes if you felt like it

That said, I'd definitely tell my boss I need a week, just in case

The felt like it part is the hardest. I am wasting more than 30 minutes on a simple thing just because of analysis paralysis alone.

Knowing what to do is more important than doing it.

I agree. Mounting a "dist" directory and spinning up nginx is a one-liner command for Docker.

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

No need to run docker or nginx as it's hosted on vercel. Just push to a github repository

I have some experience with static sites — my personal site was a static Markdown-generated site for about six years. The generator went through several iterations, from a shell script to a Haskell app. My company site (also static) was generated with Haskell and later bits of it used Mustache. I've used a variety of hosts, too — GitHub Pages, Vercel, DigitalOcean.

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.

I’ve been tasked with maintaining our online stuff (some websites, some backend API for our app, a basic admin page for in-app feedback)

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.

> makes sure images are only loaded when they are in the viewport

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.

Dark Mode thought: As someone who uses an OLED screen, I want dark mode to feature true black. This makes a huge difference for me. I get quite annoyed with any dark mode that is mostly "dark grey" as opposed to just black. I want all of those dark pixels emitting no light at all. This is much easier on the eyes, and takes full advantages of the wonders of OLED. This is especially important for mobile, where many, many people now have OLED screens.

Bandwidth warning: opening this site downloads 87.9 MB in resources.

Nice work though! I'd suggest moving to screenshots that toggle to an iframe once they're clicked.

That's a good idea, maybe even a short gif/video of interacting with the site that turns into an iframe on click. I bet I could squeeze a video into only a few megabytes or fewer.

Last week I received a badly written, details-lacking requirement to create a site that would take an amount and present a page to pay a tip, either one of fixed %, or a custom sum (including url signing, design and actual backend that talks to a payment processor and a client registry). Two hours of express, querySelectors and a page of css later I deployed it to DO Apps (add half an hour if it were a vps with a certbot) and moved on.

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.

I did that, then I switched to godot and the godot project is further along despite the fact that the site now needs to download 20MB (18MB is the engine itself). Who cares? The only thing that matters is that it works and that people don't have to install it on their computer.

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 wonder the legality aspect of hosting someone's else code as preview. If this is a problem, I think you can use a video preview like any other award websites. godly.website is one example that comes to mind. IIRC, they have responsive videos and good information density.

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!

It’s really cool that you did this. It’s like a personal exercise to develop a particular aspect of yourself, in this case ‘focus’.

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 am an amateur dev and used to look for the MOFD (most optimal framework of the day).

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 am an amateur dev and used to look for the MOFD (most optimal framework of the day).

> 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.

Well done!

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/

Giving yourself, say, 20 hours to build a kind of an application seems like a good way to learn quick iteration techniques. Coding challenges like Advent of Code or game jams like Ludum Dare can really push one to take a whole new approach to coding.

Also, light themes are superior.

A full scroll through is downloading 135MB+ currently, even though it's a quickly made site it's super wasteful imo. The suggested preview gifs (and loading on click) could be a major improvement.

Bandwidth is probably like downloading a small video game

Looks nice but almost took down my browser on an M2 macbook pro with 16gb of ram. Ok, sure, I have a lot of stuff running and what feels like a thousand tabs open, but that's something else.

I thought you were going to say you built a tool for sharing any list of websites, although I guess that might take a little bit longer than a day. This is still cool though! Congrats on overcoming your perfectionism.

The true scrappy solution would be screenshots in a google doc. Not whatever you did here

That was something. My M1 Air doesn't have fans, but the fans came on when I tried to load that forkbomb.

Also I realize the site is very heavy since it's basically loading 20 other sites, if anyone knows how to make it load asynchronously or only what's in the viewport, as well as other ideas to keep the interactivity of iframes but reduce their size and loading speed, please let me know.

I recently did some optimizations on my personal website to make the images load “lazily.” In other words it only loads stuff once it hits the viewport. I think that’s what you’re looking for. I tried two techniques:

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!

Just added the lazy sizes library, performance seems a lot better. Do you know how to change the placeholder for an iframe though? The docs say to use data-src for the placeholder but I'm already using that for, well, the iframe source URL.

I also added the HTML attribute, not sure I can see any real change.

I just tested on M1 Pro with Safari, and it loaded great even on really lousy internet where I'm at. So not sure if your optimizations are already in effect, but I'm not having the challenges others mentioned with the current version of site.

That's a list that could be done in a markdown file with screen shots, render using a static site generator, not gonna classify as an app since it lacks input or automation.

Using IFrame is really bad ux too. You could generate scrolling page gif screenshot

This site crashed my ios safari. It seemed like you might be iframing other websites? Maybe just used too much memory.

iOS Safari at least used to limit the memory, particularly the WebGL GPU memory, to something like 15 MB after which it would hard crash. I think this might be what's happening here since all of the websites are iframed (there seems to be at least ten).

Fwiw, it's very slow on desktop Firefox with M1 until all of them finish loading.

I did something similar for accounting websites. Except I used Python/Selenium to screenshot at different screen sizes and wrote to a plain html file.

wouldn't call this an MVP. This is a notch above an MVP. I still like this, though. Resource-heavy but looks good.

I want to inquire something that I feel only I have this problem: it takes me forever to make anything with code. Like hours to do something simple. I don't get distract that much, but coding is difficult and I've come to appreciate those who can code faster than me. First of all, I spend a bunch of time looking up the best way to write something. That means stackoverflow, searching for libraries, etc. Then, I would write with the debugger on. Making sure what I wrote works, one baby step at a time. I never write the whole thing in one shot like so many other programmers do. They just write pages and pages of code without ever running it, they just know its going to work (for the most part). Thoughts? How do you make progress in programming?

> Like hours to do something simple.

> I spend a bunch of time looking up the best way to write something.

You made it not simple

This is normal to some extent for first few times when you try something new. You can reduce the devtime with the following:

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.

> First of all, I spend a bunch of time looking up the best way to write something. That means stackoverflow, searching for libraries, etc.

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.

Don't try to write tons and tons of code at once without ever running or testing it, it's not like being a great programmer is about being so smart that you don't need to run code to see if it works. Focus on streamlining your workflow so that you can do what you're already doing more efficiently.

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 appreciate the advice, especially reading other people’s code. I’ve never actively done that. You know, like actually seeking a good codebase and understanding how they solved problems. Really great advice.

Practise. Once you are building roughly the same thing for the tenth time it will be ten times faster than the first time.

Perhaps I'm bad at generalizing, but after four years I feel like I am building "roughly the same thing" approximately 10% of the time. Other than SQL queries and REST endpoints, it's always mostly new technologies, new situations, and new worries.

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 have a similar encounter but with coding competitions like topcoder and codejam.

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.

I didn't code for 24 hours straight haha, that would have been quite something. I did it more on-and-off over the course of that time.

> I'm kind of a perfectionist coder/creator.

Ok. Must be true if you are saying so. Perfect job with the website - downloading 88MB of data just because I accessed the site.

You could have put it in a less sarcastic way. I don't see 88MB upfront anymore, because it seems to be lazy loaded (but still very laggy when it does). But it's not wrong to point out that the current UX is not perfect.