Skip to content

1. Principles and practices

Summary

  • Today, I selected the IDE, configured Git, signed the Agreement, selected a static generator for creating the Student page, and published the page.

Main text

1. IDE Selection

Conclusion

I decided to use cursor as the main editor and hay stack as the second editor.

Candidates for selection

vscode

  • The most popular editor

zed

Zed is a next-generation code editor designed for high-performance collaboration with humans and AI.

  • Successor to atom
  • Compatibility with vscode is unclear
  • Speed is its selling point
  • Currently, speed is not a requirement

cursor

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

* Adopted for its extensibility and trend in Japan, and the abundance of vscode documentation

haystack

An IDE built on top of a canvas, Haystack takes care of the tedious and confusing parts of coding for you.

* Can share vscode settings
* It seems convenient to use as a second IDE for understanding the structure

2. Git Configuration

Prerequisites

  • I am a Mac Apple Silicon user
  • I have already installed Python, pip, brew, and git.

Process to confirm Git is installed

Check git version

itoushintarou@shintaronoMacBook-Air shintaro-ito % git --version
git version 2.48.1

Check git user name

./% git config --global user.name

Check git email

./% git config --global user.email

Generate ssh key

./% git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/kannai/students/your-name.git

./% git add .
./% git status
./% git commit -m "comment"
./% git push

Conclusion: If two-factor authentication is enabled, PAT configuration is required

First, when two-factor authentication is enabled, normal cloning is blocked. Therefore, a PAT must be issued.

https://gitlab.fabcloud.org/help/topics/git/troubleshooting_git.md#error-on-git-fetch-http-basic-access-denied

What is two-factor authentication?

Two-factor authentication (2FA) provides an additional level of security to your GitLab account. For others to access your account, they would need your username and password and access to your second factor of authentication.

https://docs.gitlab.co.jp/ee/user/profile/account/two_factor_authentication.html

Personally, I believe it is safe to do two-factor authentication for security reasons.

How to issue a PAT

You can use the issued PAT as a password.

https://gitlab.fabcloud.org/help/user/profile/personal_access_tokens.md

3. Selection of Static Site Generators

Next, we selected a static site generator.

We considered two recommended by Fab Academy as candidates.

Conclusion: Adopted Mkdocs

  • Reasons for adoption
    • The ease of only needing to work with markdown, the low learning cost, and the ease of converting to other formats if using markdown

Future considerations

  • Modern themes like vue press that are markdown-like are worth considering in the future for their ease of switching and diversity in documentation representation.

4. Mkdocs Configuration

Configuration Method

  • Download Mkdocs in zip format
  • Unzip and upload it to your own repository
  • Install mkdocs
pip install mkdocs

Signing the Agreement

  • Paste the agreement information into ./docs/about/agreement.md and sign it

Case: Mkdocs does not serve

Conclusion: Solved by installing using requirements.txt

  • The theme material was not present.

Path to resolution

  • Since it was a good opportunity, I used cursor’s AI
    • Question (user)
      • What is the problem here?
    • Answer (cursor-ai)
      • This error indicates that the mkdocs-material theme is not installed. The requirements.txt file specifies the mkdocs-material package (see the line below): plain mkdocs-material ~= 9.0
      • It needs to be installed. The solution is as follows: plain pip install mkdocs-material
      • Please run the following command to install the package: plain pip install mkdocs-material
      • Alternatively, to install all dependencies listed in requirements.txt: plain pip install -r requirements.txt
      • After installing txt, if you run the mkdocs serve command again, the material theme should be recognized and work properly. As the error message indicates, the currently installed themes are only mkdocs and readthedocs, but this can be resolved by installing mkdocs-material.
    • Question (user)
      • How can I install mkdocs-material?
    • Answer (cursor-ai)
      • There are two ways to install mkdocs-material:
      • Direct installation: plain pip install mkdocs-material
      • Installation using requirements.txt: plain pip install -r requirements.txt
      • Note: Python and pip are required for installation. If administrative privileges are needed, prepend sudo to the command: plain sudo pip install mkdocs-material
      • If you want to install a specific version of material, you can specify it as follows: plain pip install mkdocs-material==9.0.0
      • After installation, you can check if it was installed correctly with the following command: plain pip list | grep mkdocs-material
      • Once the material installation is complete, you can run the mkdocs serve command to build the site.
  • This series of interactions reminded me of the installation method using requirements.txt.

What is requirements.txt?

  • When developing with multiple people or publishing programs to an unspecified number of people via git, the corresponding environments of each person are often different (some specific libraries may not be installed, or the versions of libraries may differ).
  • In such cases, it is very cumbersome to install each library with pip install, so we summarize the necessary installation information. That is requirements.txt.
  • For more detailed information, refer to:

    • 12. Virtual Environments and Packages

      python -m pip freeze will produce a similar list of the installed packages, but the output uses the format that python -m pip install expects. A common convention is to put this list in a requirements.txt file:

      -–(omitted)—

      The requirements.txt can then be committed to version control and shipped as part of an application. Users can then install all the necessary packages with install -r:

Case: When the Mkdocs state is not reflected (check the CI pipeline job)

gitlab-rep> history>pipeline> check job

In my case, it was just a lag… It was fixed after reloading.

Case: Want to use webp

What is Webp?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

Lossy, lossless and transparency are all supported in animated WebP images, which can provide reduced sizes compared to GIF and APNG.

https://developers.google.com/speed/webp

Conclusion

  • Mkdocs seems to process images as they are, so it doesn’t matter whether they are jpg, png, or webp…
  • However, there is no explanation for this in the official documentation.
    • Proof method
      • Check if it works by actually reading Webp

5. Expansion of about me

Impressions

Icebreaker

  • Instructor Tamiya participated in an instructor boot camp in Peru
  • I received a souvenir from Peru!
    • I’m happy
    • This is the most important information of the day and since it is primary information without an official document, I will include an image.

  • The chili paste on the left really feels like 100% chili. It has a slightly raisin-like ripe aroma, but there is almost no acidity or saltiness. It seems like it would enhance the flavor when used to adjust the spiciness of salsa sauce, curry, or mapo tofu.
  • The bean-like thing in the middle tastes like a snack that can be eaten crunchy like popcorn. It’s delicious.
  • The black bag on the right is potato chips. They are slightly sweet and salty chips. These are also delicious.

Appendix

Tab management in Chrome browser (using groups)

I want to check work, notes, and whether it has been pushed to gitlab, and investigate things I don’t understand…

We do many things through the browser. However, this may also open an endless number of tabs, draining brain resources and reducing efficiency. An organized desk significantly improves work efficiency. Similarly, organized browser tabs greatly enhance work efficiency.

Problem statement / Target audience for this content

  • People who often get confused by opening too many tabs
  • Chrome users who are using a second display
  • People who want to efficiently progress multiple tasks in parallel

Conclusion: Summary

What are Chrome groups?

You can organize your tabs with groups. When you create or edit a tab group, your changes are automatically saved and synced across your devices where you’re signed in to the same Google Account.
You can organize tabs using groups. When you create or edit a tab group, the changes are automatically saved and synced across devices where you are logged in with the same Google account.

https://support.google.com/chrome/answer/2391819

Requirements and specifications for naming conventions

  • I want to separate groups for the 2nd display and the main display
  • By classifying by purpose, I want to avoid having to remember why I am looking at that tab.
  • I want to avoid opening duplicate tabs.

Specifications for naming conventions

Prefix

  • 2d
    • Add this to the beginning of the group you want to display on the second display

Categories

    • gitlab: Contains information related to the gitlab page
    • note: Note page for memos. I am a ClickUp believer, so I use ClickUp doc.
    • materials: Educational materials that I mainly view while working. I usually have the node kannai page open.
    • research: A group related to research. I will try to summarize the research in docs or notes once it is completed.

Usage examples

Chrome browser extensions to speed up work

Problem statement / Target audience for this content

  • Originally used tools, but I think they will also be useful for people in Fab Academy, so I will leave them in the doc.

Expected case: I want to obtain the URLs of open tabs all at once

get tab info

Get all tab titles and URLs at once. HTML tags, shortened URLs, and QR codes can also be generated. You can edit the output contents freely with the template.

linkclump

Lets you open, copy or bookmark multiple links at the same time.
Linkclump gives you the ability to drag a selection box around links using your mouse to quickly open as new tabs, open in new window, save as bookmarks, or copy to clipboard.

Expected case: I want to open a list of URLs all at once

Open Multiple URLs

Opens a list of URLs
This tool takes a list of web pages in plain-text format and opens them all in new tabs. Paste the list into the text area (one website address per line), select your options and click “Open URLs”.

Expected case: I want to operate the browser quickly

Vimium

The Hacker’s Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.

Here is the English translation as per your request:

How to Handle Being Confused (Mindset)

If you are “confused,” please take this advice to heart.

First, what does it mean to be “confused”?

I believe that being “confused” means not understanding both the materials necessary for thinking and the way to think.

There is a simple method to resolve this state.

First, write down your confusion.

For example, like this:

  • Problem Organization
    1. I don’t clearly understand the task I need to handle.
    2. I don’t know where the contract is located.

Next, examine the written sentences from multiple perspectives and write down your thoughts. By doing so, your thinking will naturally become more organized, allowing you to update your status from “confused” to “thinking.”

For example, write it out like this:

Problem: I don’t clearly understand the task I need to handle. Writing from multiple perspectives:

  1. What did Person A, who solved the problem, look at to find a solution?
  2. Speaking of which, Person A shared some documents on WhatsApp!
  3. Let’s thoroughly read through that document page by page.
  4. Could it be that the location of the contract is written in some kind of manual or procedure?

Write it down, look at it from multiple angles, and update your status from “confused” to “thinking”!