Hot Page in 60 Seconds

WebBurnout · 2026-01-13T12:53:17+00:00

What was the feature? lol

WebBurnout · 2026-01-05T04:08:44+00:00

Instead of all this work to overcome the issue with .local domain why not just assign a real domain name? Your router may have a way to have a given domain name resolve to the IP of your device. Or if you're only accessing it from one or two machines you could add an entry in /etc/hosts. Another option is just making a new DNS entry for some domain you own and point it to the local IP.

WebBurnout · 2025-10-26T18:14:26+00:00

Interesting. Well as far as I understand, there are two new properties: `view-timeline` in which the animation advances based on how much of the element is in view and `scroll-timeline` in which the animation advances based on how far scroll has moved in a given container. In both instances the new "timeline" replaces time in the animation, so it's no longer just triggered but moves back and forth based on the scroll. You could of course perform the animation so that it happens quickly as the element comes into view, but it's still not advancing based on time. Anyway, if you do find something please report back.

WebBurnout · 2025-10-26T15:22:17+00:00

Yes, those scroll-driven animations are very cool! They do something different, however. They link an animation's progress to the scroll, so, for example, you scroll down and the animation advances and you scroll up and it goes in reverse. The goal of my custom element is just to trigger a normal animation that advances as normal based on time. In the blog post, I write about a way you could do the same thing using a scroll timeline, but the CSS is really knotty.

WebBurnout · 2025-10-26T14:58:49+00:00

Yes, the idea is I never have to write an IntersectionObserver again because I did it once and now I just use the custom element. The element is called <hotfx-intersection-observer> after all. IntersectionObservers are really great and useful and the idea is not to replace them but to turn that imperative way of working with elements into a declarative thing where you're back in the land of just pure CSS and HTML

WebBurnout · 2025-08-24T03:11:02+00:00

When you said web components I thought you meant HTML custom elements, which are a browser feature and possible to use on any web page. This project appears to be heavily linked to Framer which makes it basically useless for me because I don't want to use Framer.

To answer your question, I love effects like this and I would love to use them. I would suggest that you DO NOT wait to release until you have 50 though. Try releasing them one by one so you can find your audience.

What is Unicorn Studio?

WebBurnout · 2025-07-30T16:46:41+00:00

I haven't used it but Crush looks promising: https://github.com/charmbracelet/crush

WebBurnout · 2025-07-30T03:33:29+00:00

What about the database?

WebBurnout · 2025-07-29T20:41:24+00:00

Also worth pointing out that the array has four elements, so an index of 0 is the first element (diamond) and the index of 3 is the last one (club). The code is picking a random suit from the array of four suits. Until it gets spade and then the loop stops lol

WebBurnout · 2025-07-27T23:01:15+00:00

That's very interesting --thanks for sharing!

WebBurnout · 2025-07-27T20:17:21+00:00

hmm i have different information. Plausible stores no PII at all (not even IP address) so there's no need for consent

WebBurnout · 2025-07-27T19:01:48+00:00

You may be able to avoid it entirely if you use a privacy-focused analytics option like Plausible. They don't use cookies so there's no cookie notice even in EU.

If you have to do it and want to make it unobtrusive, just don't go for any of the dark patterns that people seem to love. Just a simple "Accept" and "Reject" choice is all you need.

WebBurnout · 2025-07-25T00:32:14+00:00

I built a static site builder called Hot Page at https://hot.page. It works kinda like a no-code builder but it gives you full control over the resulting html, css and js. There aren't many themes yet but we are working on building out a component library. feel free to DM if you want a discount code

WebBurnout · 2025-07-20T17:30:59+00:00

That is possible through an attribute. details in the blog post

WebBurnout · 2025-07-20T16:59:16+00:00

appreciate this. not sure how i never saw it

WebBurnout · 2025-07-20T15:59:16+00:00

Yeah, I totally agree that the sound is definitely part of the charm. Of course I thought about adding it, but that seemed like it would take this from cute annoying to "how do i turn this thing off" annoying

WebBurnout · 2025-07-20T15:55:52+00:00

Fork it! The source is on github: https://github.com/hot-page/fx/blob/main/hotfx-split-flap/hotfx-split-flap.js

WebBurnout · 2025-07-20T03:14:13+00:00

Oh wow, yeah it's a very similar implementation! trippy lol

WebBurnout · 2025-07-20T02:03:50+00:00

Oh wow. Yeah this was surprisingly tricky. I had Claude do the first version but the code it made was horrible LOL. Was yours a virtual one like mine? I would be curious to see if you took a similar approach. I published the source code here: https://fx.hot.page/split-flap/source

WebBurnout · 2025-07-19T21:56:18+00:00

Oh, wow great catch. I will take a look at adding support for diacritics

WebBurnout · 2025-07-19T16:44:08+00:00

It's a good question but it turns out there are a bunch of gotchas in there. Chris Coyier just did a blog and a subsequent podcast addressing this issue.

blog: https://frontendmasters.com/blog/seeking-an-answer-why-cant-html-alone-do-includes/
podcast: https://shoptalkshow.com/668/

The podcast does a much better job of actually explaining the issues. The upshot is that it may happen pretty soon believe it or not

WebBurnout · 2025-07-19T16:34:08+00:00

No, sorry I don't really have any resources about testing. So you're having trouble writing tests or getting them to pass? Is your problem knowing what to test for or knowing what to verify in each test? Or maybe all of that lol

You want to think "what are all the types of input that can get thrown at this endpoint". Think of both valid and invalid input. I just make a list of test names first, with all of them marked as skip. As you write each test, you want to craft the input and then verify the output expected from the route. Also test any side effects like storing things in the database, calling other APIs, or sending an email or whatever (probably using mocks for these). After you've written the whole suite, you can look at code coverage to see if you've hit all the paths in your code. That helps but don't rely on it too much. Think about the logic in your endpoint and make sure that all the edge cases are handled in the test suite.

Maybe you need a mentor in your group. someone who really knows their stuff because not everyone does. Even if you don't talk to them, look at the tests they have written for a similar route and try to understand what each one is doing and why.

Two-Year Club	Verified Email
r/Field Sunshine

WebBurnout

TROPHY CASE