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.

Well said, thank you. I like the mix of traits you mentioned, that's how I see it as well.

Thank you. Some of the comments were pretty helpful, they helped me improve performance by lazy loading a lot of the content, so it works a lot better now. I have seen the "critical HN comments" before on some other show HNs so I know what you're talking about though.

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.

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.

I saw a quote earlier today that said "Unsolicited feedback is criticism" meaning criticism in the negative sense.

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.

Thanks, I did some performance optimizations by using the library react-lazy-load-image-component, now it loads pretty quickly and will only load iframes when you scroll down.

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.

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.

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.

wait so now mouse scripting is industrial business AI ?

Before mouse scripting, the AI would be a data entry drone somewhere in a boiler room, so I guess that's an improvement.

Yes - It is VERY hard to beat a well made 3270 gui.

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.

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.

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

Hey, could you share more about the issues you hit? Would be happy to take a look.

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.

Hey Lee, I actually have your personal site as one of my examples, hope that's alright. Do you know if Next has iframe lazy loading as well? I'm using `loading="lazy"` which works but didn't work as well as the package I'm using that's on the React side, react-lazy-load-image-component, which works for iframes as well, and it actually doesn't even mount the component until it comes into view, which didn't seem to be the case for `loading="lazy"`.

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.

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

True, however don't discount some of the complexity that arose regarding CORS and iframes. Also, I was tweaking the styling for some time, to make it look good on all devices. The barebones functionality, yes, I did indeed do it within 30 minutes, but the other parts take more time.

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

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.

Thank you for this warning!

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.

I use an OLED as well (an LG C1 48 inch TV as a monitor actually lol) so I made the background black as, like you, I think #000000 looks good on an OLED. However, it can look quite a bit harsher than softer colors such as on the Linear or Radix examples. It's okay if you're making a brutalist site like mine is (with bold, big text) but it doesn't really look that good for other site designs.

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.

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?

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.

> Also, light themes are superior.

What did you just say to me ? /s

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

Thanks, hadn't heard of the comic challenge but it's interesting, not surprising many creative industries have similar challenges. I also know of NaNoWriMo, National Novel Writing Month, where people write an entire novel in one month. I think time-boxing effort is a great idea in order to ship stuff, like you said.

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!

That's a good idea about the color palette, I'll add that in there. Do you know of a way to automatically extract the palette or would you do it manually?

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.

> it seems like iframing other websites should be legal based on what I read

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.

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.

Yeah, I used to obsess over the best tool for the job too, but I realized I'm not actually getting anything done. I'd rather get something shipped and have it be somewhat shitty (like here where I'd initially not done any performance optimization but added it later) than to obsess over perfection and not have anything to show for it.

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?

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

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

Thanks for your take.

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

I think that Carmack is biased towards game development, which is different from request-response or click-action. Extensive game logs would scroll faster than framerate, rendering themselves useless (pun not intended), so stop the world and explore it is. If I had to develop a system with hundreds of parameters changing with time, depending on random() or seconds of continuous input events, then of course I’d use conditional breakpoints and live watches instead of grepping gigabytes of unstable state reports. But also, games have huds, special rendering modes (wireframe, coords, paths prediction, visibility areas to name a few), consoles, so in a sense they have some debug output that either runs at the frame rate or is just text.

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.

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.

Glad I could help. Best of luck!

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.

Bandwidth is probably like downloading a small video game

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.

Great execution and appreciate the thought process. I’m sure many of us here, find it useful.

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

I’m sure you know it, those artifacts might get outdated soon. They don’t need to be synced in real-time or maybe never. Cloudflare threads (or something like that) can be used for updates, in case you plan to go that route.

Please don’t stop here. It should go on.

Thanks for your kind words. Could you please explain more about Cloudflare threads? I didn't see any reference on them when I googled it. Are you saying to periodically run a function that automatically saves the website locally and the iframe can point to the new local versions? If so, yeah I might do that in the future soon.

> Could you please explain more about Cloudflare threads?

I read about threads sometime back and knew it’s not workers; but I can’t find that reference. So, for now, Workers seems to be the best bet.

> Are you saying to periodically run a function that automatically saves the website locally and the iframe can point to the new local versions?

Yes! Sorry for the late response

Thanks. I think I'll migrate over to images or videos instead of iframes actually, as my bandwidth is getting overloaded due to how heavy all the websites are, whereas I can optimize images and videos.

> as my bandwidth is getting overloaded due to how heavy all the websites are, whereas I can optimize images and videos.

how about using gifs instead?

GIFs are even worse, no? I use `<video autoplay loop muted playsinline>` now which basically act like GIFs in that they autoplay and loop but don't consume the storage space of GIFs.

https://web.dev/replace-gifs-with-videos/ has some good comparisons

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.

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/

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 some more performance optimizations including lazy loading. Let me know if it is still slow.

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.

Awesome! Yeah I didn't do any optimizations when I first posted here, but I added lazy loading on the iframe as well as React component lazy loading, so it looks like it's working pretty well.

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

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.

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 did something similar for accounting websites. Except I used Python/Selenium to screenshot at different screen sizes and wrote to a plain html file.

Very inspiring!

Site almost crashed my browser (it all went blank for a sec) but this is an awesome story - definitely bookmarking this as one of my goto-inspirations.

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.

You didn't build an app, you built a site, right? Or is there some CMS behind this?

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.

Did you really make this account just to write this comment lol

Anyway, I did some more performance optimizations, it should load lazily more efficiently and not be as laggy when it does.

Ignore that dude - nice job!

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!

Thank you Stefan, appreciate your kind words. Hopefully you can try doing a 24 hour challenge as well, it really helps cultivate the shipping muscle (my friend once told me shipping is like a muscle, you need to work it regularly and practice it to get good at it, I really liked their advice).

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

Were you exhausted at some point?

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.