fontaine VS astro

An alternative to Capsize for reducing font swap layout shift is Fontaine. It has a Vite plugin, and is able automatically to update font face CSS (like we will do, using Capsize metrics). We do something a little more manual here with Capsize, just to help get a grounding in the issue and solution approach.

Fonts are one of the biggest pain points in the context of performance optimization. I have decided to not use any CDN like Google Fonts but instead, I'm serving them myself. Also, I have used a cool package called Fontaine which reduces CLS by using local font fallbacks with crafted font metrics.

I started using fontaine on my blog. If you haven't tried it out, you can find it here. It helps reduce Cumulative Layout Shift. The flash of unstyled content jank that you can see when you first land on a site, before fonts have loaded. I can't see why that would be an issue. It should improve my blogs Core Web Vitals and help stuff rank better, not worse. I think this is a red herring.

Custom font usage can introduce cumulative layout shift (or "jank") to your website. This post shows how to use fontaine to reduce this with Docusaurus sites.

This component leverages Astro to dynamically generate a resume in HTML format based on the user's information. A subsequent automated process within GitHub Actions converts the HTML to PDF and ensures its deployment to both GitHub artifacts and Cloudflare.

If you are using this project for learning you may want to consider something like Astro: https://astro.build/

It will enable you to dabble in building different pages/routes in different frameworks very easily.

Astro [0] a relatively new static site generator. It solves all of the issues I've had with SSG's that feel heavy, like Gatsby.

Astro only as complex as you make it. It lets you write JSX-like syntax that compiles to static HTML. I use it for my personal site.

[0]: https://astro.build/

> Links to Other Sites

I used openring-rs for my Astro [1] site, but eventually replaced it with a TypeScript-native solution [0].

If you're looking for an easy way to pull RSS feeds from TypeScript and show the N most recent posts, take a look at my library.

PS: I'm currently unemployed, so if you have any feature requests I will quickly oblige :)

PPS: if you haven't heard of Astro [1], do yourself a favor and check it out. You write JSX syntax and get static HTML/CSS out, with the option for JS only as needed.

[0]: https://github.com/shepherdjerred/webring

[1]: https://astro.build/

I'm currently building a project using Astro, to which I've added basic authentication via Twitch so users can log in to view their inventory for my new stream game by calling an API on the back end (my Twitch bot). I'm using Astro in SSR mode, and authentication is provided by Auth.js via auth-astro. When using Auth.js to authenticate, it saves three cookies in the browser to remember that you've logged in to this website via Twitch.

I rebuilt my personal website[1] (static site) using Astro[2], and it was a pleasant experience.

[1]: https://ivylee.github.io/

[2]: https://astro.build/

or Astro; if you’d like to integrate React, VueJS etc. code as well. use their themes page here to get a starting point.

I have spent today learning the new Astro SSG. You can read about it at https://astro.build/ or better yet you can get started with it at https://docs.astro.build/en/install/auto/. While Visual Studio isn't exactly a SSG, they way you code with it can make static web pages. VS has so much more power than that.

We'll use several interesting technologies to achieve this: Strapi CMS to take care of the content management and backend, Astro which is a great new technology for quickly creating blazing fast frontend apps, and ChatGPT to provide the article summaries.

Astro