I find an interesting website that lists up some items which can be folded.
I didn’t know there are foldable helmets like the below one. When I did cycling, I need to hang my helmet on my backpack and it is distracting, so I think I’d like it a lot.
It shows many electric bicycles and most of these aren’t foldable, but the second one, MiJia QiCycle by Xiaomi, is foldable and it is compact and cool.
I develop this blog by Next.js, and I use Notion as editor of the blog, so I write about that.
The structure is really simple. Next.js server calls notion API to get posts information from the notion table. The below image is my memo before coding.
This is the code of this blog.
This is my first time writing a tech post in English, so if you have any pointers, whether about programming or English, please send a comment on the notion page below.
Next.js is React framework that can be used for developing web applications functionalities such as server-side rendering(SSR) and Static-Site Generating(SSG).
The reason why I used it in this blog system is that it’s really easy to develop web applications including using Vercel. Also, SSG is a good structure to make a light and fast website.
We have the option of using SSR, SSG and using both of them by Next.js. SSR renders pages by each request. In contrast, SSG generates pages when updated.
SSR is Subway; you start cooking after ordering, so it is easy to handle even if each person's order is different. It means it’s a better method for sites like Twitter, where everyone posts a lot.
SSG is KFC; you can put the fried chicken up beforehand and serve it when ordered because normally most customers orders basic fried chicken. It means it’s a better method for sites like blogs that don’t update content frequently.
Thus, I used SSG in this blog system, and the blog is now light and fast.
2. Why Notion
I used notion as editor of this blog.
I like the notion: good design and markdowns. However, the biggest reason why I want to use notion as editor of the blog is high-performance database table functions.
I can date information and tag information as hashtags with coloring that makes high visibility. Also, I can filter, sort, and search by using this information on the notion page.
With notion, I no longer need to create a sophisticated editor that is difficult to create and an administration page to manage the articles I have written.
3. React Notion X
React Notion X is a wonderful library. For the reason stated in the previous chapter, I decided to use the notion and have come to the conclusion that I would like to display the post on my blog without changing the notion design.
Then, I found the perfect library which fulfilled my request.
This library provides some functions. One of them is getting notion page data, and just passing that data to NotionRender, it renders that notion page by the same design.
Thanks to the notion and this library, I don't even have to write the design in CSS anymore.
This code has some functions which get data from notion by using Notion API and notion-client which is provided to get page content for React Notion X render.
Some parts are omitted by using “~~~~”.
getPosts is a function to get data from the notion database table.
This page tells me how to use Notion API for Next.js.
After using getPosts to get posts data, it filter posts depends on hashtags and put in show_posts. The below code is one part in pages/index.tsx.
PostContent is one compornent in layout.
As you can read, it just passes the post received as an argument to the render of React Notion X
Only these two codes are big parts of this blog. I think the reason I was able to develop this blog in such a short time was that I was able to find ‣, a code that did almost exactly what I wanted to do.
5. Reflections
Since I had already created a site with next.js and react-notion-x, I was able to create the blog itself almost in one day, and the below table is how much time I spend to develop
Contents
Time
Render posts at the index page
2h 30m
Detail pages
2h 5m
Hashtag
2h 55m
Others
1h 40m
The goal I have established in developing this blog was to finish that within a weekend, and I think using notion and React Notion X was the reason I achieved it.
When developing something, a thinking structure that is easy to develop is just as important as how to code, and I think I came up with a very good way this time, so that was good.
However, I have a reflection point on the coding part. I used “any” and “!” many times for passing compile.
I have only worked with dynamically typed languages so far, so I want to learn not only how to write typescript, but also its philosophy and design patterns of statically typed language.
To sum up, I need to study typescript and statically typed language more, but I think the blog itself was created just fine. I developed a hashtag filter function, so I can make links to show only English pages or Japanese pages.
In conclusion, both Next.js and notion are great, and I will continue to use them!
This week, I have a physics exam, and I could spend a lot of time on physics instead of programming. Despite this situation, I think it was a good result to achieve 70% of the Weekly Task.
My reflections points are I can’t study a lot at the weekend and I should review weekly tasks. Also, I think checking a monthly target to make a weekly target is important, so I want to make it.
I want to finish Coursera the 2.5 weeks amount. It’s good to study programming and listening skills.
Review
It is a terrible result.
Thursday, I noticed I will graduate college fall quoter, and I should prepare for the transfer. Thus, my priority is changed, so I should modify my weekly checklist and 2022 objectives.
Having said that, my weekly to-do list is not too difficult, but I couldn’t finish that; I should check this list every day.
Also, I don’t spend time studying English and Maths. I tend to do programming without studying, so I made a rule that after doing homework and studying, I can do programming.
Now, I should do dormitory and insurance procedures and search for information about the transfer. I want to make a checklist properly and proceed in parallel.
Ross Dress For Lessという、中の商品はすべて20%~60%割引されているというお店に行った。アンダーアーマーのスウェットとかが$21とかで売っていて、見るだけですごく楽しかった。アメリカは家でサンダルを履くからか、サンダルが日本より多く売ってるように感じた。運動とかウォーキング用の靴を買いたかったのだが、相場とか何もわからないので値段をメモしたあと、とりあえずスポーツショップにも行ってみることにした。
スポーツショップ入り口の左側に、モデルガンが大量に吊るされていて怖かった。スポーツショップの靴も全体的に安かったが$36~68とかだった。Ross Dress For Lessでは、$22~46ぐらいだったので、そっちで買うことにした。
ホストファザーと運転免許センターについての会話の中で、当日キャンセルを狙っていたと伝えたかったのだが、思いつかず訊いてみたら、特にそういう言葉はないって言われた。一応ネットで調べてみても見つからず、cancel on the dayとかcanceled todayみたいな単語は出てきたが、検索にかけてみてもヒット数が少なくあまりメジャーな言い回しなのかも知れない。当日キャンセルという言葉は日本特有の言い回しなのかも知れない。
会話の中でcoupleがよく使われていて、a couple of weeksとか話していたので、その意味について詳しく調べた。「a couple of」は「2,3の」の意味ではない？「a few」との違いは？coupleは「少数の」とか「2、3の」という意味だとは知っていたが、a fewの方が数が多いニュアンスだとは知らなかったので勉強になった。
シアトルに住んでいるのだし、最低限教養として、Countyの名前でも覚えるかと、調べてみたら、39もあったので諦めた。Maps Of Washington一応、西半分の地図をノートに書いて、覚えようとしてみたが、なかなか厳しそうだった。とりあえずシアトルがあるキングカウンティに隣接している州は覚えたが、あとはぼちぼち時間があるときに軽く眺めるぐらいでいいと思う。キングカウンティ自体もとても広いので、街の名前とか、通りの名前とかもっと生活に関係するところから覚えていきたい。グーグルマップで場所の名前とか通りの名前とか確認しながら、バスに乗っているので、なんとなくの土地勘はついてきたと思う。
ALL WAY STOP は先着順ということと、左折専用車線が道の真ん中にあること、ハザードやヘッドライトの点滅はしてはならないということがが面白かった。免許会場で聞かれたりすると怖いから調べておいた。学科試験は免除だが、場合によってはテスト受けさせられるかも知れないので、日本語の運転ルール本もあるらしいので読んでおく。
King Country metroのバスの乗り方について調べたら、アプリ上でもチケットが買えるらしく、大学の割引を使ってORCAカード(Suicaのようなもの)を買うまでは、それを使いたいと思う。バスは危険だって親に脅されていたがそんなことなく、乗ってる人もおじいさんとか、大学生とか普通の人たちだし、運転手も優しかった。
