Welcome to blog.codewithshin.com. This is where I share my passion for programming and terminal tools.

My name is Shinichi Okada, but my friends and family call me Shin. I started coding in early 2000 to help my wife’s website. A self-taught programmer, I am a mathematics teacher by profession. …

Image by Quick Text on Image. Background photo by Zetong Li on Unsplash
Table of Contents
· Introduction
· Installation
· Sidebar component
· Multiple-menu
· Modifying component classes
∘ Aside component
∘ Navbar component
∘ Nav component
∘ SideBarList component
· Conclusion


Recently, I created my first Svelte component Svelte-sidebar. You can find it on the NPM website . The Svelte-sidebar is…

Background photo by Christian Wiediger on Unsplash. Image created by the author.
Table of Contents
· Introduction
· Installation
· Routers and link
∘ .env file
· Unsplash-search page
· Landing page HTML
· Unsplash fetch function
· JavaScript
· Run localhost
· Conclusion
· References


I like how Medium inserts an image from Unsplash. You just need to click a plus…

Background photo by Laurencia Soesanto on Unsplash. Image by the author.


In the last article, I wrote about how to modularize Bash script code. This time, I created a Shell Script starter plus more based on the article. It works for bash, zsh, sh, ksh. By using this starter you can create a project like GitHub CLI that has many subcommands…

Background photo by Henry Be on Unsplash. Image created by the Author.

[Updated: 2022–01–13 Download the appended div]


Recently, I had a project where I needed to convert HTML to an image for downloading. I had quite a few issues using different JavaScript libraries. This article shows you the problems I encountered and their solutions.

Remove extra CSS


I used Bootstrap on some pages. Chrome…

Background photo by Benjamin Voros on Unsplash. Image created by using Teffects new-neon.


In this article, we will create a simple Svelte component library using the NPM link.

Let’s start by creating two SvelteKit apps, my-package and my-app :

npm init svelte@next my-package
npm init svelte@next my-app

In the my-package, we will create a simple package, and in the my-app, we are going…

Gitstart and Terma Update.

Gitstart automates creating a GitHub repo. The script creates .gitignore, License, README file, commit, a remote repo, and pushes all the files.

It requires GitHub CLI, gh > 2.3.0 and jq. I have tested it on macOS and Ubuntu. Please try it out for an easy GitHub repo start.

Terma (Terminal Makeover Automated)

Image created by the author using Teffects reveal.


Recently, I discovered that Microsoft still allows you to upgrade from Windows 7 to Windows 10 /11 for free.

Rummaging through my cabinet, I pulled out an 8-year-old DELL XPS with Windows 7. No, I didn’t install Windows 10. I haven’t used it for many years. …

Shinichi Okada

Tools and tips for programmers. Math teacher, programmer, husband, father, Japanese. Get full access from https://blog.codewithshin.com/membership

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store