What I Learned from Refreshing My Blog Page with Qwik
Hello, I'm @silverbirder. Recently, I refreshed my blog page with the Qwik framework. The link below is the refreshed page.
https://silverbirder.github.io/blog/
This is the fourth time I've refreshed my blog page. In this article, I will share the knowledge and experiences I gained in the process.
By the way, you can check out the articles about the previous refreshes from the link below, so please take a look if you like.
https://silverbirder.github.io/blog/tags/portfolio/
I also use GitHub's release tags, so you can refer to the past source code from the link below.
https://github.com/silverbirder/silverbirder.github.io/tags
I also publish the source code, so please refer to it if you like.
https://github.com/silverbirder/silverbirder.github.io
Why I refreshed
The main motivation for the refresh is curiosity. Followed by that, it's also to broaden my technical knowledge. In the past, I've tried static site generators like Hugo, AMP recommended by Google, and Rocket that can utilize WebComponents. Each technology reflected the trends and interests of the time. This time too, I chose mainly based on the current trends and technologies I'm interested in.
Choosing the Qwik Framework
Qwik is a web framework that emphasizes performance, but I didn't really care about that. The main reasons I chose Qwik are as follows:
- Support for Markdown
- Because I use Markdown to write blog articles
- High evaluation in
State of JS- I thought it was worth learning because it was highly rated
- Syntax close to React
- I wanted to reduce my own learning cost
I had been entering tag information in the Frontmatter of the blog article's Markdown, so I wanted to utilize that. As I researched, I learned about the import.meta.glob syntax (a feature of Vite) and found a way to extract Frontmatter. I started building the blog page based on this.
What I implemented
The features I actually implemented on the blog are detailed in the README of silverbirder/silverbirder.github.io - GitHub. I will list the main features and introduced technologies below.
- @unpic/qwik 🚀📸
- Partytown 🥳🌐
- PandaCSS 🐼💃
- Playwright & Vitest 🎭🔬
- Qwik ⚡🕸️
- qwik-speack 🌏🔊
- Storybook 📓🌟
- Buy me a coffee ☕💖
- Chromatic 🌈📊
- Cloudinary 🌌🖼️
- giscus 🐦🗨️
- Google Analytics 🕵️♂️📈
- icones.js 📌🌈
- lottiefiles 🎬📁
- OpenAI 🧠🌐
- OpenReplay 🎥🔄
- OneSignal 📡💌
Also, I extract the Frontmatter from Markdown and convert it to JSON, which I use to build blog pages. (The same applies to RSS feeds)
What I learned
Originally, I wanted to learn more about the concept of a framework called Qwik.
https://qwik.builder.io/docs/concepts/think-qwik/
However, in the process of building a blog with Qwik, my interest shifted from the framework itself to related technologies and tools. Rather than catching up with what I know, it was a good opportunity to learn about unknown technologies by trying to learn about such promising technologies. Here are some things I learned.
PandaCSS
I learned about a style engine called PandaCSS. I have often used CSS frameworks like Bootstrap and materialUI. However, from my recent experience developing landing pages at work, I wanted to try writing CSS. So, I tried writing CSS myself using PandaCSS.
I wrote global.css from scratch for the first time, and tried using typography definitions and semantic token definitions. I thought it was nice to be able to write highly reusable CSS. I thought it was convenient to be able to use CSS-in-JS notation and generate CSS files. (I'm not very familiar with it)
Multilingual support
I tried multilingual support for the first time. But it's just a pretense. The target for multilingual support is Japanese articles in Markdown and Japanese included in components. I translate Japanese into English. Ideally, I think you need someone to check the translation from Japanese to English. But at the individual level, I thought it wasn't necessary to go that far (or rather, I don't have the ability). So, I used qwik-speack and chatgpt-md-translator to translate. It seems to use OpenAI internally.
When I started supporting multiple languages, I became more careful about the content of WebPush notifications and link content. If you're going to use it in actual work, I thought it would be good to have it from the beginning. (It would be good to have at least the system)
Use of SaaS
This time, I tried using various SaaS.
OpenReplay
I introduced something called OpenReplay.
This is something that monitors user behavior. As an actual operation, I thought it could be used for troubleshooting and UX improvement.
I put this on the blog page, so I can see where the mouse cursor moves on which page, which made me think about link placement and flow lines.
OneSignal
I wanted to try WebPush notifications. However, I think you need to prepare the server side to send WebPush notifications, but I wanted to eliminate the cost of doing that, I tried to put in something well-known called OneSignal.
When sending notifications, the language selection and best practices for receiving notifications are written in OneSignal, which was educational.
Giscus
Before choosing Qwik, I discovered Material for MkDocs while researching technology, In it, I found something called giscus.
This allows you to embed GitHub Discussions in your blog. This allowed me to leave comments on the blog.
What I gave up on the way
Changesets
I tried to manage versions using changesets, but I gave up because it was troublesome to operate halfway.
Turborepo
I had a dream of a monorepo configuration with turborepo, but I gave up. The configuration I had in mind is as follows.
- apps/docs
- packages/ui
- packages/blog-contents
- packages/translate
However, it was difficult to combine PandaCSS and Qwik's UI library well, and I couldn't realize it.
Future Prospects
For example, I thought I would like to create a feature that can support dark mode or change the theme color. Also, I'm thinking of trying cucumber using Playwright. As for the design, this was the first time I did it from scratch with CSS, so I wanted to become stronger in design.
In Conclusion
Through this renewal, I was able to touch many new technologies and tools. Each technology has its own charm and learning, and it was a very fulfilling experience. I would like to continue pursuing new technologies and ideas in the future.
If it was helpful, support me with a ☕!
Share
Related tags
- Created an App to Consistently Record and Visualize Data in a Free Format
- Developing "Bochi-Bochi", an App to Easily Find Cheap Ingredients
- Introducing AI Ghostwriter - A Tool to Improve Writing Efficiency
- Development of Stable Diffusion API
- Defining Fragments Composed in Micro Frontends as Web Components and Sharing them with Module Federation
- Created OEmbed and OGP WebComponents for use on my blog site
- Things I Learned from Developing Chrome Extensions (Manifest V3)
- If you're writing in Markdown, Rocket, an SSG that uses WebComponents, is recommended!
- Refreshing Silverbirder's Portfolio Page (v2)
- I Made an API That Only Returns Google Account Images
- Building a TikTok Scraping Infrastructure on GCP and the Challenges Faced
- Micro Frontends on the Client Side (ES Module)
- Micro Frontends with Zalando tailor (LitElement & etcetera)
- Micro Frontends with SSR in Ara-Framework
- Created a GAS Library, zoom-meeting-creator, to Automatically Generate Zoom Meetings
- Introducing a Tool for Bulk Updating Account Images and What I Learned
- Cotlin is a Tool for Collecting Links on Twitter, Discover Presentations from Around the World
- I tried creating rMinc, a service that registers GMail to GCalendar
- I Tried Making a One-Frame Comic Search Service Tiqav2 (Algolia + Cloudinary + Google Cloud Vision API)