Forem: Elian Van Cutsem

Elians Astro Startkit

Elian Van Cutsem — Thu, 08 Feb 2024 22:29:32 +0000

Releasing my Astro default setup

Every time I set up a new project for myself (using Astro), I find myself installing the same plugins, setting the same settings, and even copy pasting some parts. So I decided to throw it into a template repo on GitHub and eventually open up the repository to the public, which is what I did today. Not really to get contributed to, but rather to show others how I develop my personal projects.

Link to repo: elians-astro-startkit

What does the project contain

You can read the full list of all the technologies I use in the project and why in the README of the repo. But to save you time, here is a TLDR;

Intentions

I quickly wanted to write down some intentions I have for the repo.

I will update / change it, depending on me changing my "go to" technologies. For instance, at any time in the future, I might change my TypeScript settings or change the design system. Maybe there is an ideal technology that I really want / need but isn't released yet? (Yes, I'm totally talking about Astro Studio).

Feel free to use the template!

I'm joining Astro full time!

Elian Van Cutsem — Mon, 07 Aug 2023 17:43:01 +0000

After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge as a software engineer eversince I graduated.

I had an amazing time there and learned a lot from each and every colleague. Thanks guys! For everything.

Now, it's time for a new adventure! I'm joining the DX-team at Astro full-time! I'm so excited to be able to work on Astro full-time and help shape the future of web development!

After being nominated and selected as a maintainer for the project, this always felt like one of the next steps. You can read the blogpost about becoming a maintainer here

After being invited and flying out to Copenhagen to attend the first ever Astro meetup, where I met so many faces behind Astro, I knew that I wanted to stay involved with the project and help out where I could.

Team DX - Astro

The DX-team at Astro is something I've always resonated with. They are responsible for communication, welcoming new people and help them get started with Astro, keeping documentation updated and so much more!

One of my major tasks, will be the community! (In other words, you guys!)

Ranging from the weekly community calls, helping the support squad and reviewing and helping you guys make PRs!

(If you're interested in joining the Astro community, join us on Discord)

Astro has given me so much, ranging from opportunities to travel the world, making new friends and learning so much about open source!

Let's change the future of web applications!

Interested to see what I'm doing? Follow me here:

GitHub: @ElianCodes
Twitter: @eliancodes
Mastodon: @eliancodes

Becoming an Astro maintainer

Elian Van Cutsem — Thu, 13 Apr 2023 08:46:00 +0000

A week ago, I got a DM from Dan (@jutanium). The DM simply said: "hey, I heard some news came out, any idea what it is?". I was at a family gathering, so I missed the DM by a couple of hours.

Turned out, I completely missed a DM from Fred (co-founder of Astro and CEO of HTML), saying that I was nominated and voted as a new maintainer on Astro and asking if I would accept. Of course I couldn't be happier 🥳!

Astro's maintainer and core programs are based on a nomination and voting system, there is no application process. So I wasn't expecting this, but I made a little jump when I read the message!

It's a real honour and I'm so privileged to be able to work next to so many outstanding people and learn from them!

👇 Image Astro tweeted a couple hours after I accepted!

Getting started in open source

Since I get a lot of questions on how to get started into open source. It's a good time to shine a some light on that topic.

This is different for everyone, so don't take it as a recipe for success. There was also a lot of luck involved.

My open source story started somewhere around 2021. I was still studying and working on an essay about frameworks (specifically JAMStack focused) for school and came across Astro. When I read through the documentation for the first time, the concept instantly made something click. It reminded me a lot of PHP, which I used to do a lot. The island architecture looked so simple and useful that I wanted to give it a spin. My first experience with using Astro felt so natural. The onboarding and DX was so awesome!

Don't take the following as a guide, but if it worked for me, it can work for you too!

Astro's Discord

After playing around with Astro for a couple of weeks, I joined their Discord server. I remember looking at Astro's website sourcecode and seeing a Discord link show up in the browser's console. I simply had to take a look what was going on there.

I felt so welcome in the server! Everyone was so friendly and helping each other out. There were a lot of interesting conversations going on about a lot of different topics, which enabled me to learn a lot.

At that time, the Astro Discord was a small community and because of that, it was easy to talk to core members and ask them questions, which I totally did all the time while I was rebuilding my personal website.

My first PR at Astro

While learning Astro, I noticed that the Astro website didn't have a 404 page. I instantly thought; "Hey, I know how to do that!". So I asked in Discord if it was okay to build one and open up a PR.

I opened my first PR on 6 October 2021: link to PR

Back then, I was completely new to open source and had totally no idea what I was doing, so yeah, look at me now! I know my mom is proud of me!

First talk about Astro

Because I talked a lot to maintainers and core at that time & felt like this was such a new and fresh direction at web development, I decided to try and give a talk about it at a meetup in my city about it. From there, the ball started rolling!

☝️ My first time talking about Astro

Since then, I've given about a dozen talks about Astro. Most of them were very beginner friendly and -oriented. I hope that I introduced some people to their first steps in the magical universe of Astro.

Becoming an Astronaut

After my first talk and some little PRs, I felt like a part of the Astro team! A big boost in that, was Fuzzy helping me prepare talks, guide me through PR's and awarding me with the unofficial official "Astro Ambassador" title.

It still baffles me how friendly the whole open source community is. I made a lot of friends among the contributors and core members of Astro and open source in general.

Another shifting point for me was React Brussels. This was my first ever experience at a JS-focused conference. I met so many people that I still talk to, such as Dan and Josh. It motivated me so much to spend more time in open source and Astro in specific.

You can also check this interview with Taz from Guild recorded at React Brussels

☝️ Me, talking to people at React Brussels. (Yup, this is where I met Dan and Josh for the first time)

What's next?

There is a lot I want to accomplish as a maintainer at Astro.

1. The ambassador program at Astro

I want to introduce some kind of ambassador program into Astro! A program where we (as maintainers or core members) help people speaking about Astro, get involved into the community. Not every contribution to open source, has to be code.. This can contain a couple of things, technical writing, blogposts, doing support, giving talks, ... . With this program, I think we could improve the knowledge about Astro.

2. Astro: Explain It Like I'm Five (ELI5)

A new series where I (or someone else) explains Astro (or maybe even general web) concepts on a very easy-to-understand level! This to increase the general knowledge about Astro and make it accessible to all levels of engineers.

3. Improve docs

Since I tend to do talks about Astro from time to time, I also see myself as an entrypoint into the Astro ecosystem. Because of that, I get a lot of questions from newcomers to the Astro ecosystem. I try to use those to improve Astro's documentation and examples to make it as easy and accessible for everyone from every skill level as possible.

4. Get the best DX possible!

One of the reasons I was drawn to Astro was the developer experience. I'm always betting on it and I think Astro still could improve on it. So I'm going to make it one of my goals to keep increasing and learning about developer experience!

The future is bright

I'm so happy and excited to be part of Astro's community. I hope to make a positive impact not only in the Astro eco-system, but also in the wider open-source space.

Don't hesitate to reach out to me! I'm easiest to reach on Discord or Twitter.

Building Blog tag index pages in Astro

Elian Van Cutsem — Wed, 29 Mar 2023 18:03:56 +0000

When I was rebuilding my website with the 2023 redesign. I wanted to add blog tag collection pages as well. This way, people could 'filter' on tags I used in my blog posts. I wanted to do this in a way that was easy to maintain and didn't require me to write a lot of code. So I got hacking on it and found a very neat solution to do this. Here's a little guide on how I implemented it.

The goal

The idea is to generate dynamic pages based on the tags put on the frontmatter of my blogposts. So that the user can search or filter on a tag and get a list of all related blogposts to that tag.

The blogpost frontmatter validation:

import { z, defineCollection } from "astro:content";

const blogCollection = defineCollection({
    schema: z.object({
        title: z.string(),
        author: z.string(),
        tags: z.array(z.string()),
        description: z.string(),
        pubDate: z.string().transform((str) => new Date(str)),
        imgUrl: z.string(),
        draft: z.boolean().optional().default(false),
    }),
});

As you can see in the codeblock above, the tags are an array of strings. Which means one blogpost can contain multiple tags and one tag can have multiple blogposts.

Building the dynamic page

Of course, tags are dynamic, so the first thing is to build a page with the getStaticPaths() method in Astro. In my case, that dynamic page is /blog/tags/:tag. The getStaticPaths() in Astro should always return a an object that looks like this:

return {
  params: { /* ... */ },
  props: { /* ... */ },
};

In my case, that means that the params object should return the tag string itself and the prop should return an array with all blogposts related to that tag.

Let's start with getting all tags and build the static pages:

---
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const allPosts = await getCollection('blog');

  const tags: string[] = [];

  // using .toLowerCase() here to get rid of case sensitivity
  allPosts.forEach((post) => {
    post.data.tags.forEach((tag) => {
      tags.push(tag.toLowerCase());
    });
  });

  // using a new array from a set, we can get rid of duplicate tags 
  return Array.from(new Set(tags)).map((tag) => {
    return {
      params: { tag },
      // only keep the blogposts that contain the tag itself
      props: {
        blogposts: allPosts.filter((post) => post.data.tags.map(tag => tag.toLowerCase()).includes(tag)),
      }
    };
  });
}
---

Now, when we build the project, all of the tags get specific pages generated for them. with one prop called blogposts. I'm using the Astro v2.0 Content Collection API, but you can use Astro.glob() as well.

Adding the page layout and markup

Now that are pages get generated, we want to display something when the user enters that page. We can define what the dynamic page should look like below the frontmatter.

Also don't forget to add your Astro.props object for the page itself.

---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';

import Layout from '../../../layouts/YourLayout.astro';

export async function getStaticPaths() {
  const allPosts = await getCollection('blog');

  const tags: string[] = [];

  allPosts.forEach((post) => {
    post.data.tags.forEach((tag) => {
      tags.push(tag.toLowerCase());
    });
  });

  return Array.from(new Set(tags)).map((tag) => {
    return {
      params: { tag },
      props: {
        blogposts: allPosts.filter((post) => post.data.tags.map(tag => tag.toLowerCase()).includes(tag)),
      },
    };
  });
}

interface Props {
  tag: string;
  blogposts: CollectionEntry<'blog'>[];
}

const { blogposts } = Astro.props;
---
<Layout>
  <main>
    <ul>
      { blogposts.map(post => (
        <li>
          <a href={`/blog/${post.slug}`}>{post.data.title}</a>
        </li>
      ))}
    </ul>
  </main>
</Layout>

This should now display your layout with a list of all blogposts related to the tag!

Keep in mind you should still customize this page to fit your needs, otherwise it's kinda ugly.

If you're interested on how I implemented this on my own website, you can always take a peek into the source code.

Using Tailwind CLI with Blazor

Elian Van Cutsem — Thu, 16 Dec 2021 00:00:00 +0000

Last year I wrote an article about using TailwindCSS with Blazor. It was a struggle, since Blazor had to be tricked to install and compile TailwindCSS via PostCSS using NodeJS. Yesterday, TailwindCSS launched a new tool called Tailwind CLI. So it's time to revisit trying a combination of TailwindCSS with Blazor!

Bootstrapping a new Blazor project

Installing dotnet

First of all, you should install a dotnet version on your local system. Since I use windows, I use choco to install my dotnet SDK.

You can also install it from their website.

choco install dotnetcore-sdk -y

Note: I used version dotnet-core 5 for this 'project'

Making the project

Starting a new project is easy, just put the follow command in your terminal:

dotnet new blazorserver -o YourAppName

now when you enter the YourAppName directory, you should be able to start the project in dev mode with dotnet watch run.

You should be sent to localhost:5001 which is the default for dotnet apps. Here you'll see an example welcome page built with bootstrap.

Switching from Bootstrap to Tailwind

Get rid of Bootstrap

While Bootstrap still is a widely used and good CSS framework, we'll be using TailwindCSS (duh!), so let's delete all files in the css directory.

Also delete the <link> elements refering to them in Pages/_host.cshtml

Tailwind all the way

Now let's try out Tailwind. First of all we need an executable. The executables can be found on their GitHub repo here. Be sure to grab the exact one for your OS.

Once the file is downloaded, move it to the current project directory.

Now we can make a new config file by running the following command in the project root

./tailwind init

We can now see that a file called tailwind.config.js is made in the project root! Yay!

Now let's make a tailwind.css file in the wwwroot/css directory with the standard Tailwind imports

@tailwind base;
@tailwind components;
@tailwind utilities;

Let's compile tailwind into usable CSS

The only thing we need to do now, is build our Tailwind config into browser ready CSS and link it from our HTML.

The TailwindCLI has a command for building and watching the css file. At the moment, we still need to give the entire path to the input and output path, but you can build a seperate script to take care of this ofcourse!

./tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/output.css

If you're working on the CSS, you can add the --watch flag to the command above, the CSS wil then recompile on edits.

Note: add your output.css file to the .gitignore if you're using git, so the file won't get uploaded.

Now let's add the file to Pages/_host.cshtml by adding

<link rel="stylesheet" href="css/output.css" />

You can now use TailwindCSS as usual!

How I automated SEO to fit my needs

Elian Van Cutsem — Fri, 10 Dec 2021 00:00:00 +0000

It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that.

The following is more of a theoretical explanation rather than real code samples. It will include them, but they can differ depending on frameworks or languages you are using in your projects.

Meta tags

Meta tags are the start of everything for a crawler. That's why I implemented a "frontmatter" to the markdown pages I use to write my blogposts. The frontmatter contains a couple of things:

---
title: 🔍 How I automated SEO to work for me
createdAt: 12/11/2021 18:27
author: "Elian Van Cutsem"
tags:
  - SEO
  - Astro
  - Webdevelopment
description: How I automated SEO to work for me
imgUrl: http://marketingupdate.nl/wp-content/uploads/2020/05/SEO-Pillar-Post-Art-.png
longDescription: It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that.
layout: '../../layouts/BlogPost.astro'
permalink: '12-06-21-how-i-automated-seo-to-work-for-me'
---

Yes, this is the exact frontmatter of this very page!

here follows a guide on what the exact properties in the frontmatter are used for:

title: is used as the <title> element in the HTML output and RSS feed
createdAt: used to fix the order on the blog overview and order in the RSS feed
author: used in the RSS feed, but also handy if I wanted to quote or invite other writers to use my blog
tags: a list of relevant tags, put in the meta of the HTML output and added to the RSS feed
description: same as the title property, but without the emoji
imgUrl: used as a social image when my article is shared or previewed in an RSS reader
longDescription: a relevant short description of the article, mostly the first paragraph
layout: defines the (astro) layout the blogpost should use, so I can change it when needed
permalink: used to fix and create a useful (sometimes shorter) link to the article

When these are converted to HTML at build-time, the <head> element will look something like this:

<!-- Primary Meta Tags -->
<title>🔍 How I automated SEO to work for me</title>
<meta name="title" content="🔍 How I automated SEO to work for me" />
<meta name="description" content="It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.elian.codes/blog/12-06-21-how-i-automated-seo-to-work-for-me" />
<meta property="og:title" content="🔍 How I automated SEO to work for me" />
<meta property="og:description" content="It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that." />

<!-- Twitter -->
<meta property="twitter:url" content="https://www.elian.codes/blog/12-06-21-how-i-automated-seo-to-work-for-me" />
<meta property="twitter:title" content="🔍 How I automated SEO to work for me" />
<meta property="twitter:description" content="It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that." />

RSS

An RSS feed might seem like an outdated technology for some, but let me tell you that it isn't. It still commonly used to track different blog and is way handier than having 20 bookmarks in your browser!

Using an RSS generator is the most easy way to achieve this, there are several RSS-generators available for almost every framework, so you should be able to realise this without to much of a hassle.

An RSS generator and feed can be broken down into fetching your posts or pages and transfering the raw content into RSS-readable content by the generator.

Here an example of an RSS feed:

<rss version="2.0">
  <channel>
    <title>
      <![CDATA[ Elian Van Cutsem ]]>
    </title>
    <description>
      <![CDATA[ Programming and Frontend related articles ]]>
    </description>
    <link>https://www.elian.codes/blog.xml</link>
    <language>en-us</language>
    <item>
      <title>
        <![CDATA[ 💄 Use TailwindCSS with Sveltekit (2021) ]]>
      </title>
      <link>https://www.elian.codes/blog/12-05-21-use-tailwindcss-with-sveltekit-2021/</link>
      <description>
        <![CDATA[ Earlier this week, Sveltekit beta got released, ofcourse I wanted to fiddle with it. ]]>
      </description>
      <pubDate>Sun, 05 Dec 2021 22:45:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ 🔧 Set your NodeJS version in Netlify ]]>
      </title>
      <link>https://www.elian.codes/blog/12-03-21-set-your-node-version-in-netlify/</link>
      <description>
        <![CDATA[ A couple of times I needed to fix the NodeJS version on a Netlify site, I found myself googling it a couple of times, so this little how-to is basically a note-to-self. ]]>
      </description>
      <pubDate>Fri, 03 Dec 2021 08:25:00 GMT</pubDate>
    </item>
  </channel>
</rss>

RSS is mostly in XML, but can also be JSON or ATOM

Images & Icons

Icons

A recognizable favicon is an important step when building or designing a website. These days, most browsers automatically search for /favicon.ico to set as a favicon, but different formats are also possible (png's, svg's, ...). To set these, I mostly tend to use the following template:

<!-- icon Metadata -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">

<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="theme-color" content="#6ee7b7">

There are a lot of helpful icon generators online that will output your given icon in the right formats.

Images

Images are nice on the eyes, choosing an image that fits your post and will appear everywhere when your post is shared is hard, but really important! People are always more tempted to click on your links when they appear (cfr: Twitter) as images! To do this, just set some simple meta tags in your <head> element of the page.

<!-- Open Graph / Facebook -->
<meta property="og:url" content="https://www.elian.codes/blog/12-06-21-how-i-automated-seo-to-work-for-me" />
<meta property="og:image" content="https://www.elian.codes/assets/img/social.jpg" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://www.elian.codes/assets/img/social.jpg" />

Currently I'm building/writing my own social image generator in Go to adjust the title and color dynamically based on the HTML-page title and such! Once that's finished and published, I'll share a post on how it works!

This will result in something like this:

Google Search Console & sitemap

Ofcourse, analytics and insights into your site performance are very useful. To track those, I mostly use the Google ecosystem of SEO-tools.

Sitemap

One of the easiest things to implement is a sitemap. A sitemap allows Google and other search engines to see what pages your website has. When the sitemap gets updated, Google (or another search engine) will try to index and crawl the new pages (except when disallowed by robots.txt).

(Oh yeah, your RSS feed can serve extra as a sitemap too (but never should replace one)!)

Search Console

Google Search Console is a very handy tool which can gove you a better understanding on how your website performs. Not only does it work very well together with Google Analytics, but also gives more insights into who searched what terms when a page of your website was shown in their search results.

In Google Search Console, you also have access to a tool called "Links", where they show you what pages on the internet contains links to yours. This is very helpful to track who's interested in your content or refering to it.

Not that long ago, they also launched a new tool called "Search Console Insights", which is a tool designed for content creators to follow up on new content. In the UI of Insights, you'll see how many traffic you got and where they came from, which is great for a quick follow up on your article during a toilet visit.

`robots.txt`

A robots.txt file is a simple representation of what pages a search engine or crawler is allowed to index.

Its a very small and simple representation where you disallow certain directories or pages from a specific or all search engines. It also can include your hostname and sitemap so every crawler knows what to look for en where to find it.

Here's the robots.txt of elian.codes

User-agent: *
Disallow: 
Host: https://www.elian.codes/
Sitemap: https://www.elian.codes/sitemap.xml

Since I first started writing posts on this website, I always invested in SEO and I feel that it does it's job well!

In the last three months, 92% of my website traffic came from organic search

Use TailwindCSS with Sveltekit (2021)

Elian Van Cutsem — Sun, 05 Dec 2021 00:00:00 +0000

Since my previous blogpost on using TailwindCSS (JIT) with Sveltekit, a lot has changed. That's why I've updated the article to a newer (and better) method.

Setting up Sveltekit

Setting up a new Sveltekit project is not that hard anymore. Just run the following set of commands:

npm init svelte@next tailwind-sveltekit-app

You can always search the official documentation for more info

Adding an adapter

In most cases, I tend to use Sveltekit as a static site generator. To tell Sveltekit to create static pages, add the static-adapter with following command:

npm i @sveltejs/adapter-static@next

Also add the following to the svelte.config.cjs

const adapter = require('@sveltejs/adapter-static');

module.exports = {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: null
        })
    }
};

This tells Sveltekit to put the output in the build folder and dont use a fallback (so generate a index.html, 404.html, contact.html, ...)

more info on the adapter here

Adding TailwindCSS

Previously I described some additional steps to install Tailwind, like installing autoprefixer and PostCSS. I also setup some extra NPM scripts.

Since TailwindCSS is used a lot across the web these days, it got way easier. Just use the following command:

npx svelte-add@latest tailwindcss

This will install TailwindCSS, PostCSS and other dependencies. It will also add the configuration and a basic app.css file with Tailwind imported.

Set your NodeJS version in Netlify

Elian Van Cutsem — Fri, 03 Dec 2021 00:00:00 +0000

A couple of times I needed to fix the NodeJS version on a Netlify site, I found myself googling it a couple of times, so this little how-to is basically a note-to-self.

The solution to setting a fixed NodeJS version is actually quite easy:

go to your desired website
go to Site Settings
under Build & deploy
scroll down to Environment
add a new environment variable named NODE_VERSION
set it to your desired version (major or minor)

When you set it to 16, it will automatically use the latest 16.xx.xx.

More information over on the Netlify documentation

Write less code by using CSS Houdini

Elian Van Cutsem — Wed, 13 Oct 2021 00:00:00 +0000

Some time ago I started looking into CSS Houdini. It was awesome already, you could do a lot of cool things with it, but I didn't really see a use of the available things at the time. Today was the day that I looked back at CSS Houdini and refactored some of my code to use CSS Houdini.

Writing the package

The thing I wanted to create in Houdini is my background gradient. This isn't hard to do in CSS or anything, but 1. it was a good practice to learn CSS Houdini 2. required less code 3. now supports CSS custom properties out of the box.

Writing a package for Houdini isn't that hard (at least, this was a simple one, I imagine some are way harder).

You start by defining what your package should do:

class ElianCodesBg {
    static get inputProperties() { return ['--color-for-bg']; }
    static get inputArguments() { return ['<color>']; }

    paint(ctx, size, props) {
        ctx.fillStyle = props.get('--color-for-bg');
        ctx.fillRect(size.width / 2, 0, size.width, size.height);
    }
}
registerPaint('eliancodes-bg', ElianCodesBg)

here we defined that the Worklet should use one input property called --color-for-bg, which is a color type. Next we define that it should draw a rectangle with half of the width of the element and the same height.

At last, the Paint get registered as eliancodes-bg so you can use that in your CSS like:

background-image: paint(eliancodes-bg);

That's basically it!

The package is available on NPM, although it should be fine to load it over CDN.

Using the package

add this code to your html as a <script> or add it in an already linked JS-file.

CSS.paintWorklet.addModule('https://unpkg.com/eliancodes-bg@0.0.1/index.js')

using that javascript, we could just set a custom color in the CSS file

.bg {
  --color-for-bg: lightgreen;
  background-image: paint(eliancodes-bg);
}

depending on the element you set the class="bg" on, half of the background will be filled with the --color-for-bg color.

Check the codepen here: https://codepen.io/elianvancutsem/pen/wvqaXQV

Refactoring the old code

Now that the package was published I only needed to rewrite some of my older Astro & TypeScript code to use regular CSS and Houdini instead of a lot of TypeScript code.

The index background

If you look at my website, one of the first things people notice, is that the background on the homepage has a 50% white, 50% random color gradient. Prevously, the background was generated by a lot of shitty TypeScript code that looked at the class in the <html> element and would add style="background: linear-gradient(90deg, #FFF 50%, ${color.code} 50%)" to the element in the case that the dark (TailwindCSS darkmode) class wasn't there. This was the code before:

const setBgColor = (color) => {
    if (document.querySelector('html').getAttribute('class') != undefined && !document.querySelector('html').getAttribute('class').includes('dark') && document.querySelector('html').getAttribute('class').includes('index-bg')){
        document.querySelector('html').setAttribute('style', `background: linear-gradient(90deg, #FFF 50%, ${color.code} 50%)`)
    } else if (document.querySelector('html').getAttribute('class').includes('dark')) {
        document.querySelector('html').setAttribute('style', `background: linear-gradient(90deg, #000 50%, #000 50%)`)
} else {
    document.querySelector('html').setAttribute('style', '')
}
}

after upgrading to houdini, it got replaced by:

document.documentElement.style.setProperty('--color-for-bg', document.documentElement.classList.contains('dark') ? 'black' : color.code)

The --color-for-bg custom property gets used by the Houdini package and will make the background work without any other code!

Adding a polyfill

One of the things you notice when playing around with CSS Houdini, is that it's not supported (yet) in all browsers. The Paint API already shipped in chrome, but is still under review in Firefox for example. Luckilly, the guys at Houdini created a polyfill that will make it work with all browsers and it's very easy to add.

Just add this line in your body to use the polyfill on not-supported browsers:

<script src="https://unpkg.com/css-paint-polyfill"></script>

The use-color class

The use-color class is the class I custom set to change the textcolor of different elements to the active accent-color. Also this got extremely refactored! Before I would manually find all elements with the use-color class and add a tailwind text-color-${color.class} class, so that Tailwind would render it correctly.

To do this, I wrote some code:

const color = getNewColor();
document.querySelectorAll('.use-color').forEach(element => {
    colors.forEach(color => element.classList.remove(`text-${color.class}`));
    element.classList.add(`text-${color.class}`)
});

The getNewColor() in above example would return a random color from an array with the tailwind class and color code as values.

const color = { class: 'primary-green', code: '#86EFAC' }

This got refactored to a very simple method where a CSS custom property would get changed from TypeScript:

:root {
    --random-color: lightgreen;
}

.use-color {
    color: var(--random-color);
}

const color = getNewColor();
document.documentElement.style.setProperty('--random-color', color.code)

This way a lot of code is replaced by way better lines!

Use API magic to show your most visited pages

Elian Van Cutsem — Mon, 04 Oct 2021 00:00:00 +0000

A while ago I had an idea for a feature which would show the most frequent visited pages upon a 404 (page not found) error. After I let it sit for a while, I realized that this might be possible by using the Google Analytics Data API (which I only discovered in research for this feature).

Prerequisites

To follow along, you'll need at least some knowledge about building a backend server (could be in any language or framework, but I used TypeScript in combination with NestJS) and some general API knowledge.

You'll also need to integrate Google Analytics into your website, but you probably guessed that already. (I also won't show that part here)

The code that I used to get the feature working, you can find in this repository. Feel free to fork or re-use in your own projects!

Using @elianvancutsem/mostvisitedpages

To fit my personal needs, I built a package on NPM to do everything I explain here. This package is ofcourse based on the Google Analytics Data API, but simplifies the API by a lot. If you're looking to customize the Google Analytics Data API a lot, go with that, but if you're like me and just want some simple metrics, take a look at @elianvancutsem/mostvisitedpages on NPM

How to talk with Google Analytics API

Google Analytics Data API has great documentation on how to reference and work with the API, so if this article doesn't fill your needs, be sure to checkout the official documentation and reference.

If you're like me and want to figur things out yourself, I mainly built the feature using the Client quickstart guide and searching on from there.

Enabling the API

First of all, you'll need to enable the API on google's side. If you're using Google Cloud, this can be done by going to the quickstart and clicking on 'enable the Google Analytics API' button. You'll then get a dialog asking you to download a JSON file with the credentials looking like the following:

{
  "type": "service_account",
  "project_id": "project-xxxxxxxxxx",
  "private_key_id": "xxxxx",
  "private_key": "xxx",
  "client_email": "xxxxxxxx-xxxxxxxxx@project-xxxxxxxx.iam.gserviceaccount.com",
  "client_id": "xxxxxxxxxxxxxx",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/xxxxxxxxx-xxxxxxxxxx%project-xxxxxxxxx.iam.gserviceaccount.com"
}

As you probably guessed, this file contains all the nessecary info to connect to the API as a service account. When you check the IAM policies in Google Cloud Console, you'll also see this service account registered there.

Adding Credentials to GA

Now we need to grant this service account access to your Google Analytics property. You can do this by going to [Google Analytics] and adding the client_email to the property with reading and analyzing access.

Install the library

yarn add @google-analytics/data

Do a testrun

(if you're using the simplified @elianvancutsem/mostvisitedpages version, there is a full example in the README.md of the package)

import { BetaAnalyticsDataClient } from '@google-analytics/data';

export class testRun {
  propertyId: string = process.env.GA_PROPERTY
  analytics: BetaAnalyticsDataClient

  constructor(){
    this.analytics = new BetaAnalyticsDataClient({ credentials: {
      client_email: process.env.GA_EMAIL,
      private_key: process.env.GA_KEY
    }})
  }

  async runReport(): Promise<any[]> {
    const response: AnalyticsPage[] = [];
    const [report] = await this.analyticsDataClient.runReport({
      property: `properties/${this.propertyId}`,
      dateRanges: [{ startDate: '90daysAgo', endDate: 'today' }],
      dimensions: [{ name: 'fullPageUrl' }, { name: 'pageTitle' }],
      metrics: [{ name: 'engagedSessions' }],
      limit: 4
    });
    report.rows.forEach(row => {
      const record: AnalyticsPage = {
        type: this.defineTypeForPage(row.dimensionValues[0].value),
        title: this.morphTitleForOldHeading(row.dimensionValues[1].value),
        link: row.dimensionValues[0].value,
        views: Number.parseInt(row.metricValues[0].value)
      }
      response.push(record)
    });
    return response
  }
}

you could always take a look at this GitHub file for inspiration.

Add your correct metrics for your report

You can find a list of all possible metrics here

What's new in TailwindCSS v3

Elian Van Cutsem — Sun, 03 Oct 2021 00:00:00 +0000

TailwindCSSv3.0.0-alpha-1 was released yesterday! It's not a full release of v3 yet, but might already give us an insight on what is to come with TailwindCSS v3.

I went through the release notes and summed up some things that I found importand below.

New

In TailwindCSS v3, JIT will be the default compiler mode. If you want to learn more about the Just-In-Time compiler, check this blogpost.

All colors are enabled by default. Before you had to import them via the tailwind.config.js.

new utilities:

aspect-ratio
scroll-snap
scroll-behavior
text-indent
column
touch-action
will-change
border-x & border-y

new variants:

file: -> for the native file upload button styling
open: -> for styling native <details> & <dialog> elements

Using JIT in CDN mode

Before, when using the TailwindCSS CDN, you had to give up on a lot of configuration functionality. Well, that isn't the case anymore since TailwindCSS v3. But TailwindLabs noted: TailwindCSS CDN JIT is intended for development only, do not use in production!. So there is probably still something in the works there.

Using the TailwindCSS CDN JIT isn't that hard:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <!-- add base TailwindCSS -->
      <script src="https://cdn-tailwindcss.vercel.app/"></script>

      <!-- add Plugins -->
      <script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>

      <!-- customize config -->
      <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              tomato: 'tomato',
            },
          },
        },
      }
    </script>

    <!-- add custom styling -->
    <style type="text/tailwindcss">
      body {
        @apply bg-pink-500;
      }
    </style>
    </head>
    <body>
      <!-- -->
    </body>
  </html>

Breaking

PostCSS 7 won't be supported any longer
purge option in tailwind.config.js has changed to content
overflow-clip utility was changed to text-clip

Notes

If you decide on trying TailwindCSS v3 early, be sure to update the @tailwindcss dependencies to like @tailwindcss/typography and @tailwindcss/forms

You can install or upgrade both tailwindcss and its dependencies by adding @next as a release:

npm i -D tailwindcss@next
npm i -D @tailwindcss/typography@next

All official releasenotes can be found on the TailwindCSS GitHub repo.
Check out the official TailwindCSS Documentation

Using PNPM on Netlify

Elian Van Cutsem — Mon, 27 Sep 2021 00:00:00 +0000

Using PNPM on Netlify

When I first switched my website over to PNPM instead of Yarn, I noticed that my Netlify build were failing, although I set the build command to pnpm build. Here's a solution for everyone having the same issue, since I couldn't find any relevant information out there.

Switching to PNPM

Switching to PNPM locally is almost instant. it's as easy as removing the older package-lock.json or yarn.lock file and then installing PNPM. (you can install it using a number of different ways, more information here)

(Invoke-WebRequest 'https://get.pnpm.io/v6.14.js' -UseBasicParsing).Content | node - add --global pnpm

PNPM uses a very familiar syntax, so I won't explain further. You just have to track the package.json and newly generated pnpm-lock.yaml file to install dependencies on Netlify

Telling Netlify to build using PNPM

Netlify offers a few different ways to interact with the build-environment. The easiest (and the one I use), is using the Netlify UI on their website. I will explain further how to use PNPM via the UI, but if you use a netlify.toml file, the approach should be roughly the same.

Actually, the approach is easy. Netlify doesn't have PNPM installed on their buildenvironment, but they do have NPM & Yarn installed. So we can mis-use them to install PNPM and go on from there. Just add the following as a buildcommand:

pnpm build || ( npm install pnpm && pnpm build )

The script will try to run pnpm build at first. If it fails, because PNPM is not installed, it will install PNPM using NPM and then proceed to run pnpm build.

Clever right.