9 ms·

A new blog for 2024

156 points by ctnicholas 3y ago

ctnicholas 3y ago
My last interactive blog post, from a couple of years ago, went down really well, so thought you might like this one! Here's the last one: https://news.ycombinator.com/item?id=31987713 https://news.ycombinator.com/item?id=31987713
- samstave 3y ago
  This is great! thank you - it inspires me that I need to do same. What are your thoughts on HTMX, how would that play when your using the Tailwinds stuff? (sorry, I am not familiar enough to perhaps use precise nomenclature on these two - but just curious on your thought on HTMX as it would relate to your post?
  - ctnicholas 3y ago
    Thanks! I always enjoy playing with new tech, and HTMX looks fun, though I wouldn't use it for anything serious. If you're looking for something fun and simple, I'd 100% recommend using Svelte on Astro, they're both a joy to use. I built this with Next.js to learn, because I use it at work, and need to stay 100% up to date when I'm educating others. It also just has such a huge ecosystem which is hard to match. Tailwind's Catalyst UI kit only supports React, so it wouldn't work I'm afraid!
- ryanjshaw 3y ago
  It's a cool idea but it is laggy to the point of unusable on my Android phone running Firefox (it's a budget phone but I don't have this issue with any other sites).
  - DistractionRect 3y ago
    Also Firefox on mobile, and I have zero issues (on this blog or the last linked one) on a pixel 4a. Perhaps it's related to android version, Firefox version or constraints imparted by your budget phone, but it's not a mobile layout//Firefox specific problem as far as I can tell (and I have like a dozen add-ons installed now that we can install from the full Firefox catalog).
bubbleburster69 3y ago
[flagged]
ploppyploppy 3y ago
Blog post, not blog?
- distcs 3y ago
  But the OP is talking about creating a new blog (a website that has a collection of blog posts).
- cstrahan 3y ago
  It’s a blog post about rewriting/redesigning the foundation of his blog. It would be titled “A New Blog Post for 2024” if all he did was write a new blog post. But if you read the blog post, you’ll see that he overhauled the entirety of his blog. Maybe an analogy would help. If you’re a game developer and you replace the game engine of your game, you might update your in-game “about/credits” page to mention “in release x.y.z we switched from Unity to Unreal Engine” — what you wouldn’t do is say “in release x.y.z we updated this in-game ‘about’ page to, well… mention that we changed the about ‘about’ page to now state that we changed the ‘about’ page”.
djfobbz 3y ago
Nice blog but it is VERY LAGGY...I'm on latest Chrome on W10 x64 running on HP Z840 dual Xeon 64GB RAM Nvidia Quadro K4000.
- JoeOfTexas 3y ago
  Blur is dangerous on larger scales.
  - darknavi 3y ago
    Screen space effects scale poorly!
- deleted 3y ago
  [deleted]
Kharacternyk 3y ago
The background noise is a subtle detail I would have never noticed on my own, but it does subconsciously make the blog appeal to me. Content in front of something that looks like real paper appears more credible than the same content on a flat background.
- fouronnes3 3y ago
  I agree! Any tips on how to implement it?
  - rambambram 3y ago
    What about a background (pattern) that has the noise already in it? I use https://bg.siteorigin.com/ https://bg.siteorigin.com/ often to create subtle backgrounds like the one on https://www.winkeljustitia.nl/ https://www.winkeljustitia.nl/
    - fouronnes3 3y ago
      I was thinking maybe there's a pure CSS way to do it? That seems to be inline with the style of the author's blog.
      - rambambram 3y ago
        Pure CSS would be nice indeed.
        ctnicholas 3y ago
        I saved myself time by reusing a small noise image I'd used before, but you could do it with an SVG pretty easily! https://grainy-gradients.vercel.app/ https://grainy-gradients.vercel.app/
  - ChilledTonic 3y ago
    It appears his full CSS is as follows: background-image: url(/css/noise.png); background-repeat: repeat; background-size: 182px; filter: brightness(6); opacity: 0.018; In my experimentation with it, I can't quite figure out how he applies the effect to the whole page without it either dissapearing on adjustments to the viewport or affecting the pages text opacity.
voxmatt 3y ago
This is lovely. The whole thing. I may have to revive my own blog now...
4pkjai 3y ago
The author and I look at this very differently. He aimed to have his blog up in five days. Last time I created a blog I aimed to have it up that day. IMO the text is more important than the HTML and CSS
- deleted 3y ago
  [deleted]
- ljm 3y ago
  I think people with an eye for design are going to be much more interested in showcasing that through their blog. In that sense it's pretty neat (and I'm curious about the Tailwind stuff used because I could see myself using that at work in future). Plus, the author's other stated goal was to try out some new hotness. Of course, I'm not a designer myself so I would see all of this as overkill if I tried to do it. It's enough for me to write in org-mode and export my blog as HTML with a nice template. A static file server can handle a small bunch of HTML files at scale without breaking a sweat, so no need for the JS take on SSR or AWS Lambda functions or what have you.
warthog 3y ago
would love you to publish open-source as nextra.site blog theme is not cutting it in terms of customizations. Would be great to fork it and write from IDE
jwmoz 3y ago
The catalyst ui would be really useful WITHOUT react.
jakubmazanec 3y ago
Maybe this will show all the React/Next.js/Server components haters that you can use them to very quickly build pages that are very performant (though used stack isn't that important anyway, the result depends more on the user's effort and attention to details).
- deleted 3y ago
  [deleted]
- loloquwowndueo 3y ago
  And yet many of the HN comments complain about poor performance /shrug
  - jakubmazanec 3y ago
    Well, if you use CSS blur and load even the most simple HTML page on old Android phone or full-screen on 4K screen, lag happens, but that's orthogonal to what I meant.
Retr0id 3y ago
My favourite animated blog header of all time is that of acko.net: https://acko.net/blog/zero-to-sixty-in-one-second/ https://acko.net/blog/zero-to-sixty-in-one-second/ The design language is (understandably) feeling a bit 2013 these days, but objectively I think it's held up great. It's something I'd like to do for my blog, since I'm getting tired of looking at the same static header, but I've yet to come up with the perfect design.
- ctnicholas 3y ago
  Damn, that's crazy! Reminds me of the old Windows "pipes" screensaver, but far nicer.
- chrisweekly 3y ago
  Oh yeah! I remember being impressed by acko.net more than a decade ago. Thanks for the link!
dmje 3y ago
Again, because I'm boring like that: it's pretty hilarious to me that anyone would choose to make a new blog and not just use WordPress, especially when their stated aim contains this: "...that makes it as easy as possible to create posts". There are some moments when you shouldn't use WordPress. A blog is not one of those moments. Avoiding the obvious tool for the job is classic developer trendytool syndrome.
- skydhash 3y ago
  Not really, wordpress is a bit of nightmare to code upon and buying plugins and themes can result in incompatibility issues and vulnerabilities. I think Medium is easier, but it’s a walled platform.
  - slothtrop 3y ago
    Substack seems increasingly popular, though not among devs for some reason.
    - FalconSensei 3y ago
      Keep in mind that recently Substack said that they allow Nazis and wouldn't remove them
  - dmje 3y ago
    Sorry to be argumentative, but it just isn't. It's PHP, and you probably don't need to code anything at all. You also don't need many plugins. Incompatibility issues and vulnerabilities just aren't a thing - as long as you keep stuff up to date and don't install a thousand dodgy plugins, you'll be fine. And yes, this is what I do: maintaining 50+ sites for clients, so I have been round the block a few times, not just making this up.
    - joshmanders 3y ago
      "This is what I do and I am fine with all the trade-offs so doing it any other way is wrong and a waste of time" - classic developer do-as-i-say-ism.
jasonjmcghee 3y ago
Simply beautiful. I absolutely love it.
afefers 3y ago
[flagged]
- deleted 3y ago
  [deleted]
er777 3y ago
I'm a big fan of Ghost for new blogs https://github.com/tryghost/ghost https://github.com/tryghost/ghost
- deleted 3y ago
  [deleted]
swyx 3y ago
TIL about TWC from this post https://react-twc.vercel.app/ https://react-twc.vercel.app/ feels like something that could be baked into JSX 2.0 bc its such a common need
epiccoleman 3y ago
Catalyst looks pretty neat. I decided not to go with any kind of component system for the latest iteration of my blog / personal site, and overall I like that decision - I know how everything on the site works, and I just write articles in plain HTML. I really enjoy the flexibility I get from this approach, and it's allowed me to do some neat layout things on certain articles without having to figure out how to escape from the context of a SSG or whatever. I will say, though, that there's a bit more manual labor involved in setting up a page and writing content than I would prefer. In some of my articles it would have definitely saved time to just write the content in markdown, and there are a few repeated components on each page that would definitely be nice to extract out. So anyway, maybe some kind of minor refactor is in order - although every time I consider doing this, I try to remind myself that actually writing / making content is the more important thing to spend time on. Maybe if I ever get to the point where I'm writing multiple posts a week it would be worth optimizing the workflow more.
- ctnicholas 3y ago
  Right, the most important thing is getting your posts out there! I say do what works best for you, we all have knowledge and experience in different areas, and there isn't a single solution for everyone.
- johnchristopher 3y ago
  https://jade-lang.com/ https://jade-lang.com/ is close to html and not verbose.
porkbeer 3y ago
[flagged]
- deleted 3y ago
  [deleted]
magnio 3y ago
I like Next.js and have used it for a few projects. However, my previous two blog iterations (yes, I remake my blog as often as writing blog post) with Next.js (page router) were less than ideal. Even with full static generation, Next.js still makes your site a React application. A page might be pre-rendered completely on the server, but Next will still ship JS to the client for hydrating ... zero dynamic content. Here, speed is not a concern for me (I believe the performance impact (ab)using React for text content is negligible), but the fact that it is just ... not ideal?, irks me so much. Then I turn to Zola, a more traditional SSG, but then for any interactivity or demo in the posts, I need to add my own vanilla JS, which is a hassle to maintain, and I am not a very good developer. (Though Zola is excellent for completely static sites, much nicer than Hugo IMO.) I want the site to have zero JS except the sprinkle of React components in the middle of otherwisr semantic DOM nodes for content. The fact that this was seemingly impossible in Next.js is just mind-boggling to me. Then I discovered Astro, which does exactly what I want, no more, no less. Only write markdown? Slap in the official Markdown plugin. Want latex math? Slap in the official remark/rehype plugins and katex stylesheet. Want react components in the middle of the post? Just import it into MDX files. The result? Absolutely no JS if there are no React components, otherwise the only JS shipped is restricted to those components. (That should have been the logical way to build frontend, and now Next.js is following Remix and Astro with its fine-grained component approach using RSC. Too bad the last time I tried the app router, all markdown plugins broke, while Astro is building my site beautifully.)
- deleted 3y ago
  [deleted]
- maizeq 3y ago
  How much JS is being shipped in that case though, and if it’s loaded async and not being used would it ever even impact page paint time?
- ctnicholas 3y ago
  If you disable JavaScript in your browser and load my blog, you'll find the entire site works apart from the interactive components in the article! That's the only part that uses client-side JS.
digging 3y ago
Huh. I can't load the site on my work machine because it was flagged for "adult content".
paczki 3y ago
Love this! Love the design and font are fantastic choices as well. I actually just started last week building film grain into my current WIP and it really feels like it catches the eye so much more. Largely inspired by trying to make super high quality photos feel vintage by blurring + adding noise. Exciting to see what more comes whenever you post. Digging this cursor blog as well.
wiseowise 3y ago
> I’m applying a tiny amount of film grain to the body. To me, this makes the page feel like one consistent piece; as you scroll down, the noise sticks to the content, somewhat similar to seeing texture on paper. That’s a really nice touch. It does help me with reading, kudos.
- p4bl0 3y ago
  I did the same thing a few months ago on my web page https://pablo.rauzy.name/ https://pablo.rauzy.name/ (well, not on the home page but on all other pages), for the same reason :). The texture is not noised because it is just a CSS trick with background properties so it is quite regular, but I feel like it does the job.
  - SenHeng 3y ago
    Just letting you know that your site is broken when viewed on an iPad mini. The menu in particular flashes for an instant then disappears again.
    - p4bl0 3y ago
      Thanks. I'll try to get my hands on a portable Apple device to test and debug this behavior. I test my websites in WebKit using Epiphany (GNOME Web) but not directly on Apple devices.
- ctnicholas 3y ago
  Thanks, appreciate it!
Hissigh 3y ago
I have a 2017 macbook and your site made the fans spin up, i guess it's the animation
- tonymet 3y ago
  see my comment above about Chrome Profiler
- deleted 3y ago
  [deleted]
tonymet 3y ago
The animation seems to tax the CPU. I ran Chrome profiler and compared to hackernews (my performance gold standard) ... Hackernews = 99.9% idle , 0 rendering Your new blog = 94% idle, 4.7% rendering + painting Someone mentioned the fans / activity monitor showing cpu usage as well
- deleted 3y ago
  [deleted]
- kokanee 3y ago
  I'm not going to dive in and play with it, but often it can help to add the CSS rule "transform: translateZ(0)" in order to force rendering to the GPU instead of CPU.
brainzap 3y ago
yeah about that noise
personjerry 3y ago
Is Catalyst a Bootstrap replacement? I'm so tired of Bootstrap
deleted 3y ago
[deleted]
rednafi 3y ago
[dead]
gwern 3y ago
One part worth noting: this gets dark-mode right by making it a three-way toggle, not a binary toggle - it's automatic/system, prefers-dark, prefers-light. It's not 'opposite whatever'.
microflash 3y ago
This looks beautiful and I appreciate all the work that went into it. For me, it is overkill. I went in the opposite direction this year, putting more emphasis on my posts (and their readability) rather than visual flourish. I am planning to do further optimizations (such as font subsetting) to reduce the burden on my site's visitors later this year.

A new blog for 2024

156 points by ctnicholas 3y ago

My last interactive blog post, from a couple of years ago, went down really well, so thought you might like this one! Here's the last one: https://news.ycombinator.com/item?id=31987713 https://news.ycombinator.com/item?id=31987713

samstave 3y ago
This is great! thank you - it inspires me that I need to do same. What are your thoughts on HTMX, how would that play when your using the Tailwinds stuff? (sorry, I am not familiar enough to perhaps use precise nomenclature on these two - but just curious on your thought on HTMX as it would relate to your post?
- ctnicholas 3y ago
  Thanks! I always enjoy playing with new tech, and HTMX looks fun, though I wouldn't use it for anything serious. If you're looking for something fun and simple, I'd 100% recommend using Svelte on Astro, they're both a joy to use. I built this with Next.js to learn, because I use it at work, and need to stay 100% up to date when I'm educating others. It also just has such a huge ecosystem which is hard to match. Tailwind's Catalyst UI kit only supports React, so it wouldn't work I'm afraid!
ryanjshaw 3y ago
It's a cool idea but it is laggy to the point of unusable on my Android phone running Firefox (it's a budget phone but I don't have this issue with any other sites).
- DistractionRect 3y ago
  Also Firefox on mobile, and I have zero issues (on this blog or the last linked one) on a pixel 4a. Perhaps it's related to android version, Firefox version or constraints imparted by your budget phone, but it's not a mobile layout//Firefox specific problem as far as I can tell (and I have like a dozen add-ons installed now that we can install from the full Firefox catalog).

bubbleburster69 3y ago

[flagged]

ploppyploppy 3y ago

Blog post, not blog?

distcs 3y ago
But the OP is talking about creating a new blog (a website that has a collection of blog posts).
cstrahan 3y ago
It’s a blog post about rewriting/redesigning the foundation of his blog. It would be titled “A New Blog Post for 2024” if all he did was write a new blog post. But if you read the blog post, you’ll see that he overhauled the entirety of his blog. Maybe an analogy would help. If you’re a game developer and you replace the game engine of your game, you might update your in-game “about/credits” page to mention “in release x.y.z we switched from Unity to Unreal Engine” — what you wouldn’t do is say “in release x.y.z we updated this in-game ‘about’ page to, well… mention that we changed the about ‘about’ page to now state that we changed the ‘about’ page”.

djfobbz 3y ago

Nice blog but it is VERY LAGGY...I'm on latest Chrome on W10 x64 running on HP Z840 dual Xeon 64GB RAM Nvidia Quadro K4000.

JoeOfTexas 3y ago
Blur is dangerous on larger scales.
- darknavi 3y ago
  Screen space effects scale poorly!
deleted 3y ago
[deleted]

Kharacternyk 3y ago

The background noise is a subtle detail I would have never noticed on my own, but it does subconsciously make the blog appeal to me. Content in front of something that looks like real paper appears more credible than the same content on a flat background.

fouronnes3 3y ago
I agree! Any tips on how to implement it?
- rambambram 3y ago
  What about a background (pattern) that has the noise already in it? I use https://bg.siteorigin.com/ https://bg.siteorigin.com/ often to create subtle backgrounds like the one on https://www.winkeljustitia.nl/ https://www.winkeljustitia.nl/
  - fouronnes3 3y ago
    I was thinking maybe there's a pure CSS way to do it? That seems to be inline with the style of the author's blog.
    - rambambram 3y ago
      Pure CSS would be nice indeed.
      - ctnicholas 3y ago
        I saved myself time by reusing a small noise image I'd used before, but you could do it with an SVG pretty easily! https://grainy-gradients.vercel.app/ https://grainy-gradients.vercel.app/
- ChilledTonic 3y ago
  It appears his full CSS is as follows: background-image: url(/css/noise.png); background-repeat: repeat; background-size: 182px; filter: brightness(6); opacity: 0.018; In my experimentation with it, I can't quite figure out how he applies the effect to the whole page without it either dissapearing on adjustments to the viewport or affecting the pages text opacity.

voxmatt 3y ago

This is lovely. The whole thing. I may have to revive my own blog now...

4pkjai 3y ago

The author and I look at this very differently. He aimed to have his blog up in five days. Last time I created a blog I aimed to have it up that day. IMO the text is more important than the HTML and CSS

deleted 3y ago
[deleted]
ljm 3y ago
I think people with an eye for design are going to be much more interested in showcasing that through their blog. In that sense it's pretty neat (and I'm curious about the Tailwind stuff used because I could see myself using that at work in future). Plus, the author's other stated goal was to try out some new hotness. Of course, I'm not a designer myself so I would see all of this as overkill if I tried to do it. It's enough for me to write in org-mode and export my blog as HTML with a nice template. A static file server can handle a small bunch of HTML files at scale without breaking a sweat, so no need for the JS take on SSR or AWS Lambda functions or what have you.

warthog 3y ago

would love you to publish open-source as nextra.site blog theme is not cutting it in terms of customizations. Would be great to fork it and write from IDE

jwmoz 3y ago

The catalyst ui would be really useful WITHOUT react.

jakubmazanec 3y ago

Maybe this will show all the React/Next.js/Server components haters that you can use them to very quickly build pages that are very performant (though used stack isn't that important anyway, the result depends more on the user's effort and attention to details).

deleted 3y ago
[deleted]
loloquwowndueo 3y ago
And yet many of the HN comments complain about poor performance /shrug
- jakubmazanec 3y ago
  Well, if you use CSS blur and load even the most simple HTML page on old Android phone or full-screen on 4K screen, lag happens, but that's orthogonal to what I meant.

Retr0id 3y ago

My favourite animated blog header of all time is that of acko.net: https://acko.net/blog/zero-to-sixty-in-one-second/ https://acko.net/blog/zero-to-sixty-in-one-second/ The design language is (understandably) feeling a bit 2013 these days, but objectively I think it's held up great. It's something I'd like to do for my blog, since I'm getting tired of looking at the same static header, but I've yet to come up with the perfect design.

ctnicholas 3y ago
Damn, that's crazy! Reminds me of the old Windows "pipes" screensaver, but far nicer.
chrisweekly 3y ago
Oh yeah! I remember being impressed by acko.net more than a decade ago. Thanks for the link!

dmje 3y ago

Again, because I'm boring like that: it's pretty hilarious to me that anyone would choose to make a new blog and not just use WordPress, especially when their stated aim contains this: "...that makes it as easy as possible to create posts". There are some moments when you shouldn't use WordPress. A blog is not one of those moments. Avoiding the obvious tool for the job is classic developer trendytool syndrome.

skydhash 3y ago
Not really, wordpress is a bit of nightmare to code upon and buying plugins and themes can result in incompatibility issues and vulnerabilities. I think Medium is easier, but it’s a walled platform.
- slothtrop 3y ago
  Substack seems increasingly popular, though not among devs for some reason.
  - FalconSensei 3y ago
    Keep in mind that recently Substack said that they allow Nazis and wouldn't remove them
- dmje 3y ago
  Sorry to be argumentative, but it just isn't. It's PHP, and you probably don't need to code anything at all. You also don't need many plugins. Incompatibility issues and vulnerabilities just aren't a thing - as long as you keep stuff up to date and don't install a thousand dodgy plugins, you'll be fine. And yes, this is what I do: maintaining 50+ sites for clients, so I have been round the block a few times, not just making this up.
  - joshmanders 3y ago
    "This is what I do and I am fine with all the trade-offs so doing it any other way is wrong and a waste of time" - classic developer do-as-i-say-ism.

jasonjmcghee 3y ago

Simply beautiful. I absolutely love it.

afefers 3y ago

[flagged]

deleted 3y ago
[deleted]

er777 3y ago

I'm a big fan of Ghost for new blogs https://github.com/tryghost/ghost https://github.com/tryghost/ghost

deleted 3y ago
[deleted]

swyx 3y ago

TIL about TWC from this post https://react-twc.vercel.app/ https://react-twc.vercel.app/ feels like something that could be baked into JSX 2.0 bc its such a common need

epiccoleman 3y ago

Catalyst looks pretty neat. I decided not to go with any kind of component system for the latest iteration of my blog / personal site, and overall I like that decision - I know how everything on the site works, and I just write articles in plain HTML. I really enjoy the flexibility I get from this approach, and it's allowed me to do some neat layout things on certain articles without having to figure out how to escape from the context of a SSG or whatever. I will say, though, that there's a bit more manual labor involved in setting up a page and writing content than I would prefer. In some of my articles it would have definitely saved time to just write the content in markdown, and there are a few repeated components on each page that would definitely be nice to extract out. So anyway, maybe some kind of minor refactor is in order - although every time I consider doing this, I try to remind myself that actually writing / making content is the more important thing to spend time on. Maybe if I ever get to the point where I'm writing multiple posts a week it would be worth optimizing the workflow more.

ctnicholas 3y ago
Right, the most important thing is getting your posts out there! I say do what works best for you, we all have knowledge and experience in different areas, and there isn't a single solution for everyone.
johnchristopher 3y ago
https://jade-lang.com/ https://jade-lang.com/ is close to html and not verbose.

porkbeer 3y ago

[flagged]

deleted 3y ago
[deleted]

magnio 3y ago

I like Next.js and have used it for a few projects. However, my previous two blog iterations (yes, I remake my blog as often as writing blog post) with Next.js (page router) were less than ideal. Even with full static generation, Next.js still makes your site a React application. A page might be pre-rendered completely on the server, but Next will still ship JS to the client for hydrating ... zero dynamic content. Here, speed is not a concern for me (I believe the performance impact (ab)using React for text content is negligible), but the fact that it is just ... not ideal?, irks me so much. Then I turn to Zola, a more traditional SSG, but then for any interactivity or demo in the posts, I need to add my own vanilla JS, which is a hassle to maintain, and I am not a very good developer. (Though Zola is excellent for completely static sites, much nicer than Hugo IMO.) I want the site to have zero JS except the sprinkle of React components in the middle of otherwisr semantic DOM nodes for content. The fact that this was seemingly impossible in Next.js is just mind-boggling to me. Then I discovered Astro, which does exactly what I want, no more, no less. Only write markdown? Slap in the official Markdown plugin. Want latex math? Slap in the official remark/rehype plugins and katex stylesheet. Want react components in the middle of the post? Just import it into MDX files. The result? Absolutely no JS if there are no React components, otherwise the only JS shipped is restricted to those components. (That should have been the logical way to build frontend, and now Next.js is following Remix and Astro with its fine-grained component approach using RSC. Too bad the last time I tried the app router, all markdown plugins broke, while Astro is building my site beautifully.)

deleted 3y ago
[deleted]
maizeq 3y ago
How much JS is being shipped in that case though, and if it’s loaded async and not being used would it ever even impact page paint time?
ctnicholas 3y ago
If you disable JavaScript in your browser and load my blog, you'll find the entire site works apart from the interactive components in the article! That's the only part that uses client-side JS.

digging 3y ago

Huh. I can't load the site on my work machine because it was flagged for "adult content".

paczki 3y ago

Love this! Love the design and font are fantastic choices as well. I actually just started last week building film grain into my current WIP and it really feels like it catches the eye so much more. Largely inspired by trying to make super high quality photos feel vintage by blurring + adding noise. Exciting to see what more comes whenever you post. Digging this cursor blog as well.

wiseowise 3y ago

> I’m applying a tiny amount of film grain to the body. To me, this makes the page feel like one consistent piece; as you scroll down, the noise sticks to the content, somewhat similar to seeing texture on paper. That’s a really nice touch. It does help me with reading, kudos.

p4bl0 3y ago
I did the same thing a few months ago on my web page https://pablo.rauzy.name/ https://pablo.rauzy.name/ (well, not on the home page but on all other pages), for the same reason :). The texture is not noised because it is just a CSS trick with background properties so it is quite regular, but I feel like it does the job.
- SenHeng 3y ago
  Just letting you know that your site is broken when viewed on an iPad mini. The menu in particular flashes for an instant then disappears again.
  - p4bl0 3y ago
    Thanks. I'll try to get my hands on a portable Apple device to test and debug this behavior. I test my websites in WebKit using Epiphany (GNOME Web) but not directly on Apple devices.
ctnicholas 3y ago
Thanks, appreciate it!

Hissigh 3y ago

I have a 2017 macbook and your site made the fans spin up, i guess it's the animation

tonymet 3y ago
see my comment above about Chrome Profiler
deleted 3y ago
[deleted]

tonymet 3y ago

The animation seems to tax the CPU. I ran Chrome profiler and compared to hackernews (my performance gold standard) ... Hackernews = 99.9% idle , 0 rendering Your new blog = 94% idle, 4.7% rendering + painting Someone mentioned the fans / activity monitor showing cpu usage as well

deleted 3y ago
[deleted]
kokanee 3y ago
I'm not going to dive in and play with it, but often it can help to add the CSS rule "transform: translateZ(0)" in order to force rendering to the GPU instead of CPU.

brainzap 3y ago

yeah about that noise

personjerry 3y ago

Is Catalyst a Bootstrap replacement? I'm so tired of Bootstrap

deleted 3y ago

[deleted]

rednafi 3y ago

[dead]

gwern 3y ago

One part worth noting: this gets dark-mode right by making it a three-way toggle, not a binary toggle - it's automatic/system, prefers-dark, prefers-light. It's not 'opposite whatever'.

microflash 3y ago

This looks beautiful and I appreciate all the work that went into it. For me, it is overkill. I went in the opposite direction this year, putting more emphasis on my posts (and their readability) rather than visual flourish. I am planning to do further optimizations (such as font subsetting) to reduce the burden on my site's visitors later this year.