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

Introduction

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

Introduction

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.

Introduction

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]

Introduction

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

Problem

I used Bootstrap on some pages. Chrome…

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

Introduction

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.

Introduction

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