[HN Gopher] A new blog for 2024
       ___________________________________________________________________
        
       A new blog for 2024
        
       Author : ctnicholas
       Score  : 143 points
       Date   : 2024-01-02 14:46 UTC (8 hours ago)
        
 (HTM) web link (chrisnicholas.dev)
 (TXT) w3m dump (chrisnicholas.dev)
        
       | ctnicholas wrote:
       | 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
        
         | samstave wrote:
         | 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?
        
         | ryanjshaw wrote:
         | 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 wrote:
           | 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).
        
       | ploppyploppy wrote:
       | Blog post, not blog?
        
         | distcs wrote:
         | But the OP is talking about creating a new blog (a website that
         | has a collection of blog posts).
        
         | cstrahan wrote:
         | 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 wrote:
       | 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 wrote:
         | Blur is dangerous on larger scales.
        
           | darknavi wrote:
           | Screen space effects scale poorly!
        
       | Kharacternyk wrote:
       | 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 wrote:
         | I agree! Any tips on how to implement it?
        
           | rambambram wrote:
           | What about a background (pattern) that has the noise already
           | in it? I use https://bg.siteorigin.com/ often to create
           | subtle backgrounds like the one on
           | https://www.winkeljustitia.nl/
        
             | fouronnes3 wrote:
             | 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 wrote:
               | Pure CSS would be nice indeed.
        
           | ChilledTonic wrote:
           | 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.
        
         | alberth wrote:
         | It dramatically reduces readability for me.
         | 
         | Not a fan, even though it might look "nice".
         | 
         | (As viewed on an iPhone)
        
           | bitvoid wrote:
           | I thought I was the only one considering the praise it's
           | getting throughout the thread and others saying that they
           | didn't even notice it until it was pointed out in the
           | article. I had to reduce the opacity by at least half for it
           | to not be so distracting.
           | 
           | Perhaps the noise doesn't "scale" on mobile as I'm also
           | viewing it on an iPhone and/or is just more apparent in dark
           | mode.
        
             | ctnicholas wrote:
             | I've just deployed a change to the noise as I saw a
             | screenshot from another user and it looked like an iPhone
             | bug! The noise shouldn't even be noticeable.
             | 
             | Is it looking better now?
        
               | stugrey wrote:
               | My timing was perfect, saw the site, saw the noise bug,
               | read the comments, checked again and it's fixed (on
               | iPhone at least)
        
               | alberth wrote:
               | On iPhone, it's more than just the grey background that
               | gets the noise.
               | 
               | The noise is being applied to _everything_ on the screen
               | (like buttons, sliders, etc).
               | 
               | It might be more readable if the noise was only on the
               | background grey.
               | 
               | Just my 2 cents.
        
         | erosenbe0 wrote:
         | True. Designer I worked with believes the eyes focus easier on
         | text if there is a small amount of low contrast fuzz
         | surrounding it. I don't know if that is based on science but it
         | seems plausible at least on white backgrounds.
        
         | sponaugle wrote:
         | I agree.. I was surprised that it made a difference, but on a
         | large screen it makes the text feel more anchored to an actual
         | page, not just sliding on the screen. It may be less effective
         | on a small phone screen where the screen is less of your total
         | view.
        
         | ctnicholas wrote:
         | 100%! I tried to set it at a level where it "feels" right, but
         | you don't realise why.
        
         | kokanee wrote:
         | I wonder if it looks different on different platforms. My first
         | reaction looking at the site was that it looked super grainy -
         | a lot of the embedded screenshots and interactive snippets are
         | almost too noisy to read. I played with the setting and found
         | that while I do like the aesthetic, it needs to be about half
         | as strong to my eye.
        
       | voxmatt wrote:
       | This is lovely. The whole thing.
       | 
       | I may have to revive my own blog now...
        
       | 4pkjai wrote:
       | 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
        
         | ljm wrote:
         | 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 wrote:
       | 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 wrote:
       | The catalyst ui would be really useful WITHOUT react.
        
       | jakubmazanec wrote:
       | 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).
        
         | loloquwowndueo wrote:
         | And yet many of the HN comments complain about poor performance
         | /shrug
        
           | jakubmazanec wrote:
           | 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 wrote:
       | My favourite animated blog header of all time is that of
       | acko.net: 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 wrote:
         | Damn, that's crazy! Reminds me of the old Windows "pipes"
         | screensaver, but far nicer.
        
         | chrisweekly wrote:
         | Oh yeah! I remember being impressed by acko.net more than a
         | decade ago. Thanks for the link!
        
       | dmje wrote:
       | 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 wrote:
         | 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 wrote:
           | Substack seems increasingly popular, though not among devs
           | for some reason.
        
             | FalconSensei wrote:
             | Keep in mind that recently Substack said that they allow
             | Nazis and wouldn't remove them
        
           | dmje wrote:
           | 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 wrote:
             | "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.
        
               | dmje wrote:
               | It's funny, I see it as entirely the other way round.
               | 
               | I see many on HN as being sort of "automatically
               | negative" about Wordpress and php and unable to see that
               | there are actually some times when they're totally the
               | right tools for the job.
               | 
               | I'd be the last person to suggest anyone use Wordpress
               | for everything - yes, I happen to have a niche that is
               | about this tool, and I like it and am passionate about
               | it, and for what we do it's highly relevant and very much
               | the right tool - but we're also very pragmatic about
               | decision making.
               | 
               | What I see so much in developer land is that certain
               | trends drive strategy. It's so often not the boring,
               | known, stayed tool which wins the day but the bleeding
               | edge one which actually isn't as good a fit.
               | 
               | As I say in a comment lower down here - the tradeoffs to
               | me here are: no feed, no comments, no categories, no OG
               | tags, no API - all of which are out of the box with
               | Wordpress.
        
         | brigadier132 wrote:
         | Ah, please tell me the easy way to include interactive js demos
         | in wordpress like the blog post author has. It's obvious that
         | the blogpost author wants a level of customization that
         | wordpress can't offer.
         | 
         | Also, trying new technologies was literally a goal of the
         | project.
        
           | dmje wrote:
           | I mean, write a simple plugin that enables you to embed these
           | using a shortcode, if there isn't an existing plugin that
           | does it already?
           | 
           | WordPress is insanely customisable - it's "just php". And
           | sure, maybe his new skill learning could be coding on
           | WordPress :-)
        
             | brigadier132 wrote:
             | > I mean, write a simple plugin that enables you to embed
             | these using a shortcode
             | 
             | Ok, so learn php when they could just use js which they
             | likely already know and likely get paid to know.
             | 
             | Wordpress and php are negative value skills, you do not
             | want to advertise that you know those things as a developer
             | because someone might try to hire you for them.
        
               | dmje wrote:
               | Failing to understand what "Wordpress and php are
               | negative value skills" even means. I'm pretty happy with
               | the work I get paid for ;-)
        
               | digging wrote:
               | It means I, for example, wish I didn't know how to use WP
               | and PHP so I didn't have to work on them in our legacy
               | apps. Because I don't want to write or read PHP. I'm much
               | happier when I don't have to. Get paid the same either
               | way.
        
               | joshmanders wrote:
               | > Wordpress and php are negative value skills, you do not
               | want to advertise that you know those things as a
               | developer because someone might try to hire you for them.
               | 
               | This was unnecessary.
        
               | brigadier132 wrote:
               | It's the truth, the jobs that use php are not the ones I
               | want to work in. People are saying php is actually good
               | nowadays but I have no reason or desire to learn it. I
               | don't want to learn or work with wordpress, I already
               | know as many scripting languages as I need to know, and
               | there are no companies I want to work for that use php.
               | 
               | I'm already in the part of my career where learning
               | another programming language is not what will take me to
               | the next level so unless there is something unique about
               | a programming language that makes it very useful I'm not
               | interested in learning it.
               | 
               | Learning how to use more tools is not necessarily better
               | when you are already proficient in other more flexible
               | tools.
        
               | joshmanders wrote:
               | Your personal view is not widespread though, your
               | original message would have been better left off with out
               | bashing PHP because YOU don't find a use for it.
               | 
               | There's billions of dollars in revenue generated yearly
               | from PHP sites. And not just "legacy" either, I'm talking
               | evergreen PHP apps being built and generating revenue.
               | 
               | It's just as alive and well if not even more alive than
               | some other languages people prefer over it.
        
             | Retr0id wrote:
             | I'm not sure I'd want to prioritize PHP development as a
             | new skill in 2023^H4.
        
               | dmje wrote:
               | Again, pretty hilarious given how full featured and fast
               | PHP is nowadays, but ok... I'm also gonna make a little
               | private bet that PHP will outlast a fair amount of the
               | currently trendy tooling...
        
               | joshmanders wrote:
               | I'm with you on the anti-PHP hate, but FWIW PHP and
               | JavaScript came out exactly 6 months apart from each
               | other, and one is the only way to code in the browser, so
               | I'd say both are pretty likely to last a long time.
        
               | xmprt wrote:
               | I don't know much about the PHP landscape but at least
               | with Javascript it seems like trendy frameworks change
               | every 5 years. JS -> JQuery -> AngularJS -> React ->
               | Angular 2 -> React Hooks -> Next -> ... Feels like the
               | "right" way to do things keeps changing.
        
               | joshmanders wrote:
               | The "right way" is subjective and the first mistake many
               | people make IMO. What I think is the right way isn't
               | always the right way for other people.
               | 
               | Tooling changing in JavaScript is unique to JavaScript
               | only because of the language constraints. PHP, Ruby, etc
               | are all controlled by the developer, whereas JavaScript
               | is controlled by the browser vendors and end users of
               | those browsers. You have more things to work around,
               | inconsistencies to smooth over, and more importantly
               | larger ambition on the frontend than most things can
               | currently support, so new paradigms and frameworks come
               | out to tackle that.
               | 
               | Also 5 years in internet time is a long time. So I'd
               | probably not say it "changes so fast"
        
         | Retr0id wrote:
         | Sometimes the medium is the message. A web developer's blog can
         | be a platform to show off their skills, and the blog itself is
         | one way to do that.
        
           | dmje wrote:
           | Yeh, I get that - but then at the same time we have a web
           | developers blog here with no RSS / feeds as far as I can see,
           | no comments, no API, no OG tags - all the things one would
           | expect from a blog. These seem to me a strange set of things
           | to sacrifice in this context.
        
         | pvg wrote:
         | _Please don 't post shallow dismissals, especially of other
         | people's work._
         | 
         | https://news.ycombinator.com/newsguidelines.html
        
           | dmje wrote:
           | Shallow because...?
           | 
           | I was making a point that the best tool for the job can
           | sometimes be the one which is widely used, hugely supported,
           | cheap to host, well understood - it may not be the trendy
           | choice, but "trendy" is not (in my humble opinion) a terribly
           | good criteria for tech stack decisions...
        
             | pvg wrote:
             | It's not an interesting point, especially if you intend it
             | as a tangential flamewar hook and, as you say yourself, you
             | post it repetitively. The submission is not about 'tech
             | stack decisions', it's somebody showing something they
             | made. You don't have to like it or have much to say about
             | it but a completely generic 'just use something else' is
             | well within the scope of the guideline and a bunch of other
             | ones.
        
           | FalconSensei wrote:
           | Author mentioned that the reason for the new blog is to be
           | easier to create posts. But doesn't mention much of what
           | changed in the workflow. Seems he's using md files. But then
           | what was he using before? If MD->MD, then what changed? Using
           | Obsidian to be easier to edit and sync between devices?
        
             | pvg wrote:
             | The author is in the thread so if these are your specific
             | questions or critiques, you should direct them there. 'It's
             | hilarious to me they don't use Wordpress' is not a specific
             | question or critique, it's a generic sneery putdown.
        
         | nkohari wrote:
         | Wordpress is incredibly complex when compared to a static site
         | that can be served ~entirely from a CDN. A database-backed blog
         | has been outmoded now for years.
         | 
         | If you don't want a pre-built theme, you don't need the plugin
         | ecosystem, and you don't need/want a WYSIWYG editor, there's no
         | reason to choose Wordpress.
        
           | dmje wrote:
           | Is a blog a blog when it hasn't got comments, feeds,
           | categories, tags? I'd say not.
           | 
           | So: sure, if your cdn and static files can do all of those
           | then yeh. But it can't.
        
             | nkohari wrote:
             | Eh, debating what's a "blog" and what's a "personal
             | website" is splitting hairs.
             | 
             | Most "blogs" nowadays don't have the features you're
             | talking about, because very few people actually care about
             | them anymore. If you really want comments, you can add them
             | via something like Disqus, but so few people are using RSS
             | today that it's not worth bothering with.
        
       | jasonjmcghee wrote:
       | Simply beautiful. I absolutely love it.
        
       | er777 wrote:
       | I'm a big fan of Ghost for new blogs
       | https://github.com/tryghost/ghost
        
       | swyx wrote:
       | TIL about TWC from this post https://react-twc.vercel.app/
       | 
       | feels like something that could be baked into JSX 2.0 bc its such
       | a common need
        
       | epiccoleman wrote:
       | 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.
        
       | magnio wrote:
       | 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.)
        
         | maizeq wrote:
         | 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?
        
       | digging wrote:
       | Huh. I can't load the site on my work machine because it was
       | flagged for "adult content".
        
       | paczki wrote:
       | 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 wrote:
       | > 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 wrote:
         | I did the same thing a few months ago on my web page
         | 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 wrote:
           | 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.
        
       | Hissigh wrote:
       | I have a 2017 macbook and your site made the fans spin up, i
       | guess it's the animation
        
         | tonymet wrote:
         | see my comment above about Chrome Profiler
        
       | tonymet wrote:
       | 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
        
         | kokanee wrote:
         | 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 wrote:
       | yeah about that noise
        
       | personjerry wrote:
       | Is Catalyst a Bootstrap replacement? I'm so tired of Bootstrap
        
       ___________________________________________________________________
       (page generated 2024-01-02 23:01 UTC)