yoniakabecky

How a Confirmation Modal Broke My Shopify Store's SEO

Yoni Aoki — Sat, 04 Apr 2026 00:50:39 GMT

TL;DR

✅ If you add an age-check / confirmation modal, do not hide your entire page content behind it.
⚠️ If your main content is hidden (for example with display: none), Googlebot may see an “empty” page and indexing can fail.

Situation: the shop was live, but Google could not find it 🔎

I launched my friend's Shopify store, removed the password protection, and waited. A month later, still couldn't find it on Google. Shop Instagram account come first then somebody else's website that talking about the shop.

At first, I assumed, “Shopify is a big platform. Google will find it soon.” I also remembered reading a post saying something similar.

I waited for a month. Still nothing.

First guess: Search Console setup? 🤔

My first instinct was to check the basics:

Sitemap
Google Search Console setup
Indexing request

Shopify generates a sitemap automatically, so that part was easy.

The tricky part was permissions: the store owner is my friend, and Search Console had to be set up under her Google account. So I told her how to set up, since shopify has good article: Sitemap setup

Tried: Search Console setup + request indexing 🛠️

Another month passed. Still not in search results. I searched for other reasons, but found nothing that matched my case.

So I visited my friend’s shop and asked her to open Search Console.

It turned out it was not set up yet. 🫠 So I set it up.

After we set it up, we used:

URL Inspection
Request indexing

The real cause: code hid the entire page 🤦

Even after that, the result did not change.

While checking the site again, I noticed something:
when the modal was shown, the page content was effectively empty.

The shop sells alcohol, so I added an age verification modal. While building it, I noticed the carousel behind the modal was still animating.
It looked a bit strange, so I asked an AI assistant for a fix.

The suggestion was: hide the page until the user clicks “Yes”.

I accepted it without thinking about SEO. What I did not realize — I hid the entire main content.

So when Googlebot visited the page, it could not see real content to index.

Original (broken) 🚫

The biggest cause was setting main as hidden.

body.age-verification-pending main {
  display: none;
}

This 👆 one rule was the problem. It removed main from the page entirely — so Googlebot loaded the page and found nothing to index.

So unless the visitor clicked Yes, the content was hidden.

const onYes = () => {
  localStorage.setItem("ageConfirmed", "true");
  document.body.classList.remove("age-verification-pending");
};

The actual fix ✅

Remove the CSS rule that hides main.

/* removed */
body.age-verification-pending main {
  display: none;
}

That's it for SEO. The page content now stays in the DOM whether the modal is open or not.

While we're at it: use the native element 💡

The original code used

— a custom modal built by hand.
Since we no longer need display: none on main, we can switch to the browser's native element.
It handles the visual overlay automatically, without touching page content.

What this improves:

::backdrop covers the page visually — no need to hide main
Native accessibility (focus trapping, aria-modal) built in
showModal() / close() replace manual class toggling

.age-modal[open] {
  /* style here */
}
.age-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

if (document.body.classList.contains("age-verification-pending")) {
  ageModal.showModal();
}

const onYes = () => {
  localStorage.setItem("ageConfirmed", "true");
  document.body.classList.remove("age-verification-pending");
  ageModal.close();
};

Why this works 💡

The SEO fix was just one CSS rule removed.

Googlebot doesn't click buttons. It loads the page once and reads whatever is already visible in the DOM.

With body.age-verification-pending main { display: none; }, the page looked completely empty to the crawler.

The native

element uses ::backdrop to visually cover the page — but the content underneath stays in the DOM. The overlay is cosmetic. The content is real.

Conclusion ✨

I removed the “hide the whole page” logic.
I allowed the carousel to keep running behind the modal.
After that, the shop started to appear in Google search results.
If an AI suggests “hide the content”, double-check what it means for SEO.
Prefer UI patterns that overlay content instead of removing it.
When SEO looks broken, check the rendered page as a bot might see it: “Is there real content without clicks?”

Use Gemini Code Assist as a PR Reviewer

Yoni Aoki — Sat, 21 Mar 2026 11:47:20 GMT

TL;DR

Gemini Code Assist is a GitHub app that auto-reviews your PRs. It catches real issues (typos, accessibility, naming). You often need /gemini review more than once — it does not catch everything in a single pass. Treat suggestions as hypotheses: test before you merge.

Intro 🤖

Reviewing AI-generated code is tedious. When Cursor writes 300 lines across 8 files, you either review it properly (slow) or trust it (risky).

Gemini Code Assist is the free option I tried — here's what it catches and where it falls short.

Gemini Code Assist

While I was researching Gemini, I found a GitHub app: Gemini Code Assist.

Setup is straightforward. See: https://developers.google.com/gemini-code-assist/docs/set-up-code-assist-github

After I connected it to my repo, it runs automatically on new pull requests.

What Gemini catches well ✅

Once it was live, the practical value showed up quickly.

Code quality

Typos in variable names and string literals
Missing or undefined variables in Liquid templates
Inconsistent naming across files

For example, I added some styles

    height: 100%;
    width: 100%;

The review:

Your stylesheet is already using modern CSS logical properties like inline-size and block-size in other places. For consistency, it would be best to use them here as well instead of the physical properties height and width.

Readability

Restructuring overly nested Liquid logic
More descriptive variable names

Accessibility

Missing alt attributes on images
Semantic HTML (for example, correct heading hierarchy)

These catches alone make it worthwhile.

Limitations You Should Know ⚠️

No tool is perfect. Gemini as a PR reviewer has a few friction points worth naming clearly.

It does not review everything in one pass

The biggest pain point for me: Gemini does not always list all issues in the first review.

For example, I got feedback about a CSS class name. I fixed it, then commented /gemini review to run it again. A few minutes later, I got more comments on other lines.

In practice, I trigger several reviews with /gemini review to collect most of the feedback.

Not always right

AI makes mistakes — that is common knowledge, and keep it in mind. Treat every suggestion as a hypothesis, not a final answer. Read it, understand it, then test it — especially when it changes logic, not only style.

Situation: richtext field and a suggestion I applied

For example, when I was implementing a richtext field in the section, I got a review message:

For richtext fields, a simple != blank check might not be sufficient. If a user clears the text in the editor, it can leave behind empty HTML tags like

, which would pass the blank check and render an empty element, potentially causing unwanted layout spacing. It's more robust to strip HTML tags and whitespace before checking if the content is blank.

{% if section.settings.paragraph | strip_html | strip != blank %}
  {{ section.settings.paragraph }}
{% endif %}

I used this suggested code. What I didn't know was that it would be a syntax error. (my liquid knowledge is limited...) I also forgot to run theme check somehow.

What went wrong

Later I checked the website; the change wasn't there. I checked the Shopify log and realized that the change caused a syntax error. Luckily the error was caught by Shopify's theme deployment system, so the change wasn't released.

In Liquid, filters (|) cannot be used directly inside {% if %} conditions. You need to assign the filtered value to a variable, then use it in the condition.

The Fix

{%- assign stripped_paragraph = section.settings.paragraph | strip_html | strip -%}
{% if stripped_paragraph != blank %}
  {{ stripped_paragraph }}
{% endif %}

Test every suggestion before merging — even the ones that look obviously right.

Hard to dismiss or ignore comments

I might be missing a feature, but I have not found a clean way to mark a comment as “intentionally ignored.” After I resolve a thread and push, Gemini often raises the same suggestion again on the next review.

Note: While writing this, I saw the @gemini-code-assist mention in the marketplace docs. I will try that next time to see if it reduces repeated comments.

So Is It Worth It? 🤔

Gemini as a PR reviewer is a useful first pass for Shopify theme work. It catches small, high-impact problems that are easy to skip — especially accessibility and readability, where a normal linter helps less.

Repeated comments and multi-pass reviews add steps. But if you expect an automated first reviewer — not a replacement for you or your team — it is worth installing and trying. 😉👉 Gemini Code Assist on GitHub Marketplace.

Svelte transitions – tried all 7 built-in ones

Yoni Aoki — Tue, 03 Mar 2026 12:26:53 GMT

TL;DR

Svelte has 7 built-in transitions (fade, blur, fly, slide, scale, draw, crossfade). I tried each one with short examples and GIFs. Use this as a quick reference when you need a transition.

Intro

While working on a Svelte project, I learned that Svelte has its own transition syntax. I tried all seven built-in transitions and noted how each behaves.

Docs: Template syntax, Reference

The transitions

1. fade


{#if visibleFade}
  Fade
{/if}

2. blur


{#if visibleBlur}
  Blur
{/if}

3. fly


{#if visibleFly}
  Fly
{/if}

4. slide


{#if visibleSlide}
  Slide
{/if}

5. scale


{#if visibleScale}
  Scale
{/if}

6. draw

7. crossfade

As the docs say:

The crossfade function creates a pair of transitions called send and receive.

So crossfade is different: it works with two elements (one leaving, one entering). Use the same key on both so Svelte treats them as the same content moving. Fallback is used when there’s no pair (e.g. first load); here we use fade so it still fades in/out instead of popping.




  
    {#if crossfadePosition === 0}
      
        Moves
      
    {/if}
  
  
    {#if crossfadePosition === 1}
      
        Moves
      
    {/if}

8. Bonus - Custom transition

If you need something custom, you can use the transition contract and build your own.




{#if visibleCustom}
  Custom
{/if}

Quick comparison

Transition	Best for	Note
fade	Simple show/hide	Easiest, good default
blur	Focus / attention	Use `amount` to control
fly	Element “moves into” the place	x, y, opacity
slide	Element “expands/collapses”	axis: 'x' or 'y'
scale	Zoom in/out feel	start, opacity
draw	SVG paths only	Stroke animation
crossfade	Moving content between containers	Needs `send` / `receive`

Conclusion

fly = element moves in; slide = element grows/shrinks in place.

Easy to wire up and no extra dependency – Probably I’d use them in a real product. For simple show/hide or list changes, the built-ins are enough; if you need something fancy, the custom transition API is still straightforward. Worth trying when you want a bit of polish without much code. 😆

Fixing Cropped Images Not Displaying Correctly

Yoni Aoki — Wed, 18 Feb 2026 08:52:54 GMT

TL;DR 😼

When you replace an image with a cropped version but keep the same URL, the browser may show the old image because of caching. Add a timestamp (or unique suffix) to the filename so the URL changes—the image updates correctly. 📸

Situation

I was building an image crop feature using react-easy-crop. The library is simple and easy to use.

User selects an saved image → Crops it → Save the cropped image

Problem: After saving, the component did not re-render with the new image. The old (uncropped) image kept showing.

Digging the Cause 🧐

After reloading the page, the new image was displayed––so the cropped image was being saved correctly. I opened the browser's developer console and checked the image element. When I hovered over the URL, it showed the cropped image.

So...

The image file content was different (cropped), but the URL was identical.
The browser treated it as the same resource and showed its cached version.
Conclusion: If the URL does not change, the browser may not reload the image.

How I fixed it 👩‍💻

Make the URL different when the image is cropped so the browser fetches the new file. I went with a simple fix—we don't have many images in the app, also we don't use the crop feature often.

Change the filename when you save the cropped image by adding a timestamp (or any unique value) before the extension.
New URL → No cache hit → Correct image is displayed.

Example helper in TypeScript:

/**
 * Adds a timestamp to the filename so the URL becomes unique.
 * Useful when replacing an image (e.g. after crop) to avoid browser cache.
 */
export const addTimestampToFileName = (fileName: string): string => {
  const timestamp = new Date().getTime();
  const lastDotIndex = fileName.lastIndexOf(".");

  if (lastDotIndex === -1) {
    return `${fileName}_${timestamp}`;
  }

  const nameWithoutExtension = fileName.substring(0, lastDotIndex);
  const extension = fileName.substring(lastDotIndex + 1);
  return `${nameWithoutExtension}_${timestamp}.${extension}`;
};

Usage idea:

// Before: "photo.jpg"  →  After: "photo_1708234567890.jpg"
const newFileName = addTimestampToFileName(originalFileName);
// Use newFileName when saving the cropped image and when setting the image URL

When you use this new filename for the cropped image URL, the browser sees a new resource and shows the updated image. ✅

Wrap up 😎

Same URL + changed file content → browser can keep showing the cached (old) image.
Different URL → browser loads the new image.
For replaced images (e.g. after crop), make the URL unique (e.g. timestamp in the filename) so the UI updates correctly without hacks like forcing a component reload.

If the cropped (or otherwise replaced) image does not update on screen, check whether the image URL changed. If it stays the same, the browser cache is likely the cause. Adding a timestamp to the filename is a simple way to get a new URL and reliable updates. 🎯

Creating Shopify Theme Sections with Cursor

Yoni Aoki — Sat, 07 Feb 2026 03:04:32 GMT

This is not a tutorial. I'm not writing every detail of what I did, but I'll try to cover the main points.

TL;DR 😊

I asked AI (Cursor) to build a shopify theme section. It generated working Liquid, CSS, and JS and matched the theme structure I had in mind.
The downside: without clear instructions, it added more files and options than I needed. Review the output and refine your prompts is bit tough, so I decided make it small and make it grow.

Where we left off

In the last post, I set up the Skeleton theme with

shopify theme init

While cloning, you can also select an LLM instruction file. If you plan to use AI, pick one or use all of them.

Skeleton is a minimal Shopify starter theme with very few opinions, which makes it easier to experiment and learn the structure.

Digging into the theme structure

The readme describes each directory like this:

├── assets          # Stores static assets (CSS, JS, images, fonts, etc.)
├── blocks          # Reusable, nestable, customizable UI components
├── config          # Global theme settings and customization options
├── layout          # Top-level wrappers for pages (layout templates)
├── locales         # Translation files for theme internationalization
├── sections        # Modular full-width page components
├── snippets        # Reusable Liquid code or HTML fragments
└── templates       # Templates combining sections to define page

To me it feels similar to atomic design:

snippets → Atoms
blocks → Molecules
sections → Organisms
templates → Templates

(This is how I understand it; it might not be the official mapping.)

One advantage of the Skeleton theme is the default files. For example, it comes with:

assets/critical.css
snippets/css-variables.liquid

They give you basic styles without going overboard, so it's easy to overwrite. They also help you set up variables and such. (Before cloning Skeleton theme, I wasn't sure where to put variables😅)

Using AI

In normal frontend work I would build most snippets first. But I was new to Shopify theme development, and I had only designed the top page. So I decided to ask AI what it would do.

I use the Cursor editor (Auto) for most of the work.

The theme already has a default LLM instruction file, so I didn't add extra rules at first. I could have added my own coding preferences, but since I was new to Shopify and Liquid, I chose not to. (I added some later.)

First try: slideshow section

The client wanted a slideshow (carousel) on the top page. So I tried this prompt first:

I want to implement a slideshow on the top page.
Make it simple and easy to use.

Ref: https://github.com/Shopify/dawn

I know it's pretty general. But I wanted to see what would come out and give myself time to understand the result.

It generated:

assets/component-slider.css
assets/section-slideshow.css
assets/slider.js
sections/slideshow.liquid
snippets/icon-next.liquid
snippets/icon-prev.liquid

Yep, it worked 🤯 (It also modified related files.)

Note: As of Feb 6, 2026 (when I'm writing this), the same prompt may not create the top three files anymore, because the LLM instructions have been updated since I first tried.

What worked well ✅

It worked. The slideshow ran as expected. That matters. 😏
The structure matched what I had in mind. Files landed in the right places (sections, snippets, assets). So my mental model of the theme (snippets vs sections vs assets) was mostly correct.
Icons as snippets made sense. I wasn't sure whether icons should live in assets or snippets. Seeing the AI put icon-next and icon-prev in snippets helped me decide: small, reusable UI bits go in snippets.
Liquid objects and filters. Not in the slideshow, but in other sections, the AI used Liquid objects and filters well. I don't have time to read the whole Liquid docs. When it uses filters or objects I don't know, it helps me catch up and learn.
I could see how the AI behaved. By looking at the generated code, I noticed patterns (e.g. separate CSS/JS files, lots of schema options). That helped me write better prompts and rules later.

What was less ideal (and I fixed it) 😥

If I don't set rules or write clear instructions, the AI tends to:

Create CSS and JavaScript in separate files.
Sometimes separate files help readability, but for simple sections they're often not necessary. You can keep styles and scripts inside the section with {% stylesheet %} and {% javascript %} instead.
Rely on JavaScript more than I wanted.
Pure CSS can do a lot nowadays, so many effects don't need JS.
Add many options in the schema (settings in the theme editor).
Saying "keep it simple" in the prompt isn't enough to minimize options. You have to be explicit about what you want (or don't want).
For example, I got something like adjustable height with min, max, step, and unit. For reusability, a few presets (e.g. sm, md, lg) are enough. Too many settings in the theme editor can confuse non-developer users.

I had attached the Dawn theme as a reference, so that likely pushed it toward “full-featured” output. 😅 I had to trim the generated code to remove what I didn't need.

Takeaway: Be clear about what you want for each section. Otherwise you might accept the first result without thinking. (I'm not aiming for “vibe coding”; I want to stay in control.)

After reviewing the code for a while, I merged the change.

Conclusion ✨

That first slideshow was a good way to learn how Liquid and the theme structure fit together. These days I often do the opposite: I ask AI to create small parts first, add an option, add another, and let it grow into a section step by step. So you don't have to go "one big section, then trim." You can also start small and build up. 🛠️

Remove Spam Notification on GitHub

Yoni Aoki — Fri, 23 Jan 2026 23:23:19 GMT

What happened

I got a GitHub notification that I couldn't see nor remove. The repository name was plasma-network/plasma.to. At first, I thought one of my coworkers created a new repository. But it wasn't. I tried to open the repository, but I couldn't.

So I googled for a few days.

I found this discussion on GitHub's community forum where others were experiencing the similar issue.

So it was spam. 👾

The problem

The notification badge appeared in my GitHub interface, but clicking on it didn't reveal the actual notification. The repository name remained visible in my notifications page, but I couldn't access or remove it through the web interface. This was frustrating because the badge kept showing up, and I couldn't get rid of it.

The solution

I followed the solution from the GitHub community discussion. The contributors there explained that GitHub's CLI (gh) provides the tools needed to manage notifications programmatically. Here's how I followed their solution step by step:

1. Remove the notification badge

First, I marked all notifications as read to remove the blue badge:

gh api /notifications -X PUT -f read=true

This removed the blue badge 🔵 from the interface.

But the repository name still remained in repositories section.

2. Check the notification list

To see all my notifications, I ran:

gh api --paginate 'notifications?all=true&per_page=100' | jq -r '.[].repository.full_name' | sort -u

Then I got:

command not found: jq

...🫠

3. Install jq

I needed jq to parse the JSON output. jq is a lightweight command-line JSON processor.

Visit https://jqlang.org/ for more information.

On macOS, I installed it with:

brew install jq

4. Check the notification list again

After installing jq, I ran the same command again:

gh api --paginate 'notifications?all=true&per_page=100' | jq -r '.[].repository.full_name' | sort -u

Now I got a list of repositories:

...
plasma-network/plasma.to
yoniakabecky/my-personal-repository

Yay! 🙌 I could see the spam repository in the list.

5. Get the notification ID

To delete the specific notification, I needed its ID. I filtered for the spam repository:

gh api --paginate 'notifications?all=true&per_page=100' | jq -r '.[] | select(.repository.full_name == "plasma-network/plasma.to") | "\(.id) - \(.subject.title) - unread: \(.unread)"'

The output showed:

19200066437 - Plasma Foundation | Over USD 2.4B TVL & 54.02% APY, XPL and Staking Rewards - unread: false

I had the notification ID: 19200066437.

6. Delete the notification

Finally, I deleted the notification thread:

gh api --method DELETE "notifications/threads/19200066437"

The spam notification was gone! 🎉

Conclusion

If you encounter a persistent GitHub notification that you can't remove through the web interface, use GitHub CLI. The combination of gh api and jq gives you full control over your notifications, even when the web interface fails.

The key commands to remember:

Mark all as read: gh api /notifications -X PUT -f read=true
List all notifications: gh api --paginate 'notifications?all=true&per_page=100' | jq -r '.[].repository.full_name' | sort -u
Delete a specific notification: gh api --method DELETE "notifications/threads/{THREAD_ID}"

I Failed to Create a Shopify Theme from Scratch

Yoni Aoki — Sat, 17 Jan 2026 04:01:20 GMT

Probably this will be a series - Creating Shopify Theme with AI ✍️

TL;DR 😊

If you are new to creating a Shopify theme, clone the skeleton theme to start. It saves time, avoids missing files, and keeps the project simple.

Beginning

I was curious about Shopify, but I hesitated to study Liquid even though I already knew the Shopify developer market is kinda huge.

When my friend asked me to help with her e-commerce site, we compared a few options.

My first idea was Square because her shop already uses it for payments. But when she researched it, some features were missing for her needs. She checked Shopify and found the features she wanted. So we picked Shopify for the project.

Why I'm creating theme from scratch

I explored default themes and realized they offer too many settings for one simple section.

Because default themes are fully customizable, you can adjust almost anything. That level of customization confused me and felt overwhelming. And my friend is not familiar with any of that.

My goal is to let my friend update the Shopify theme easily. So the default theme was no longer an option.

Liquid vs Remix

As a React developer, building with Remix feels easier (I am talking about v2, not v3). But this is my first time using Shopify, and I was unsure how much we could customize in the admin panel if I used Remix. Since my goal was creating an easy-to-use theme for my friend, I decided to study Liquid.

Around early 2025, one of my coworkers was very passionate about the Cursor editor. He kept telling me about it. I decided this was a perfect moment to try Cursor. (This was another reason I chose Liquid.)

First hurdles

At first, I watched several YouTube videos about Shopify theme development. At a glance, it did not look too complicated. So I just started development.

I followed the official tutorial.

Install CLI
Create partner account
Create a store
Initialize theme

Everything was fine up to this point.

I learned the hard way that the theme will not run unless you keep certain files and directories. I struggled to start the Shopify server because I missed some required directories and files.

After a few rounds of trial and error, I finally managed to start a local development server. 🎉 But getting the server running was just the beginning. Things got messy as I continued building the theme.

The messy middle

I worked on the theme little by little between other jobs. I kept referring to the Dawn theme, which has a lot of complex code. I also used the Cursor editor to build pages and features.

The result became too complicated. At first, I was just experimenting, but as the code grew, it became messy. After a few months, I realized that key files were still missing to run the shop.

At that moment, I felt I needed to start over... 😵‍💫

Skeleton theme

I did not know that Shopify released the Skeleton theme in May 2025. (Maybe it was there before. I just didn't know.) When I ran shopify theme init again, it offered me Skeleton theme which is a minimal theme (plus some rules for the IDEs).

It solved my biggest problem: required files. Now I only need to customize the pages.

Since I reset my theme to the Skeleton theme, I needed to add snippets and sections again, but that was not a big issue. I just had to add simplified code carefully.

Conclusion ✨

I failed my first attempt at building a Shopify theme from scratch, but the Skeleton theme gave me a fresh start. Nothing fancy––just a minimal theme.If you're starting your first Shopify theme, don't make the same mistake I did.😉 Start with the Skeleton theme, so you can focus on customization instead of configuration.

How to Fix "Claude Command Not Found" Error 🔧

Yoni Aoki — Sat, 09 Aug 2025 14:13:22 GMT

TL;DR

After updating Cursor editor, Claude Code CLI stopped working with a command not found error. The solution is to reinstall Claude Code and fix PATH configuration.

Quick fix:

Add to PATH: export PATH="$HOME/.local/bin:$PATH"
Reload shell: source ~/.zshrc
Reinstall: curl -fsSL https://claude.ai/install.sh | bash -s latest

The Problem 🚨

I use Claude Code CLI for my work projects through my company account. Yesterday everything was working fine. Today I updated Cursor editor, and suddenly:

zsh: command not found: claude

Wait... what? 🤔

Debugging 🕵️

Following the Error Messages

I saw this auto-update error message in Cursor:

 ✗ Auto-update failed · Try claude doctor or npm i -g @anthropic-ai/claude-code

Naturally, I tried both suggestions:

claude doctor → Of course, claude wasn't working, this also not working.

npm i -g @anthropic-ai/claude-code → Got a directory conflict error.

  ENOTEMPTY: directory not empty, rename '/Users/xyz/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/claude-code' -> '/Users/xyz/.nvm/versions/node/v22.14.0/lib/node_modules/@anthropic-ai/.claude-code-MgzGe2Q4'

More digging

I started searching this error. I found a Japanese tech blog Zenn, which I tried but it didn't fix the problem. But I got anthropic url and that helps.

Install latest version

I read official troubleshooting.

https://docs.anthropic.com/en/docs/claude-code/troubleshooting

I tried their recommended solution.

# Install latest version
curl -fsSL https://claude.ai/install.sh | bash -s latest

result is...

⚠ Setup notes:
  • ~/.local/bin is not in your PATH
  • Add it by running: export PATH="~/.local/bin:$PATH"


✔  Claude Code successfully installed!

  Version: 1.0.72

  Location: ~/.local/bin/claude


  Next: Run claude --help to get started

✅ Installation complete!

Looks good! 🙌 So I tried to verify the installation.

# Verify the installation
which claude

result is...

claude not found

I kind of knew it 🫠 But this time I got helpful setup notes, which was a plus!

Update PATH

⚠ Setup notes:
  • ~/.local/bin is not in your PATH
  • Add it by running: export PATH="~/.local/bin:$PATH"

So I added it.

# Open file in edit mode
nano ~/.zshrc

# Add this line and save it
export PATH="$HOME/.local/bin:$PATH"

#Then apply the change
source ~/.zshrc

#Check if the path is saved
echo $PATH

After I confirmed .local/bin: is added, I run install command again.

curl -fsSL https://claude.ai/install.sh | bash -s latest

This time there is no setup notes. 🥳

✔  Claude Code successfully installed!

  Version: 1.0.72

  Location: ~/.local/bin/claude


  Next: Run claude --help to get started

✅ Installation complete!

And when I run claude, it started without Auto-update failed message.

Conclusion & Lessons Learned 🎓

What happened:

Updating Cursor editor somehow interfered with my existing Claude Code CLI installation.

What I learned:

Editor updates can sometimes affect CLI tools unexpectedly
Always check official documentation when troubleshooting
PATH configuration is crucial for CLI tools to work properly
Clean reinstallation often works better than trying to fix corrupted installs

Now I'm ready to get back to productive coding! 🚀

A Pitfall: Date Sorting

Yoni Aoki — Tue, 27 May 2025 14:22:58 GMT

To speed up my blogging and be more honest about my learning process, I've decided to start sharing even the small (and sometimes silly) mistakes I make. Thanks for reading with kind eyes. 😅

Quick question: Can you spot what's wrong with this code?

type Data = {
  value: string;
  createdAt: string;
};

const sorted = (data as Data[]).sort((a, b) => b.createdAt - a.createdAt);

After my team asked me to use the Cursor editor, this was the code it suggested with a single Tab. I couldn't notice the mistake at first. It worked fine on my local environment, so I pushed it to the staging. Then, we noticed the sorting wasn’t working correctly. 😱

The Problem

The first thing I noticed was the cache data difference. When reloading the query, the created time cache always has a time zone. However, after overwriting the cache with subscription data, the created time doesn't have a time zone. And that is causing wrong results.

// Query data
createdAt: "2024-03-20T10:00:00+09:00"

// Subscription data
createdAt: "2024-03-20T01:00:00Z"

Most readers probably noticed that the time is actually the same. Just format is different. However, I focused too much on why the time format changed. So it took way more time to figure out.

Why Different Time Formats?

This wasn't a direct issue, but the reason for the different time formats lies in how the data is handled:

Subscription data comes through WebSocket connections
WebSocket protocols often standardize on UTC (`Z`) to avoid timezone confusion

So when I use the subscription value to update the cache, it uses UTC.

The Solution

In short, sorting with string value is the problem. (Format is not the problem)

Here's the correct way to sort date strings:

// Wrong ❌
const sorted = (data as Data[]).sort((a, b) => b.createdAt - a.createdAt);

// Right ✅
const sorted = (data as Data[]).sort(
  (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
);

Note: String Subtraction

The subtraction operator (`-`) attempts to convert strings to numbers. If both sides are strings results in NaN because these strings can't be converted to valid numbers.

console.log("5" - 3);
// Expected output: 2

console.log("hello" - "hello");
// Expected output: NaN

This raises another question: "If string subtraction results in NaN, why did it seem to work in my local environment?"

I really don't know the reason for this. Maybe it just API result was sorted as I expected... 🤷‍♀️

AI Suggestion Distraction

Another reason that I couldn't point out the problem is ... I think ... AI suggestion.

The Cursor editor is powerful — it helps me modify multiple lines with a single Tab press and automatically suggests code.

After I fixed the problem, I realized that a few lines up from the problem code, I was doing a similar sort. Which I wrote before I switched to the cursor editor. So if I was writing a code, this might not have happened.

The thing is, I probably haven’t been using it properly. That said, I don’t really have the option not to use it...

Wrap up

Always Convert to Date Objects
Don't rely too much on convenient features

Small bugs can sneak in easily, but I think writing about it will help me next time 😊

Resources

Improving Code Readability Using GraphQL Fragment Colocation

Yoni Aoki — Sun, 02 Feb 2025 15:43:32 GMT

TL;DR

☝

It will eliminate over-fetching, improve readability, and make it easier to maintain

✌

It ensures that only necessary data is queried and that your code remains modular and efficient

Background

At my job, I worked on a Next.js application that used GraphQL. We also used GraphQL codegen for TypeScript types.

Initially, a senior developer with a mobile development background introduced a module-based pattern, which led us to create models for each GraphQL type.

The Initial Approach: Using Models

This is a simplified version of the UserModel:

export class UserModel implements User {
  public readonly id: Scalars['ID'];
  public readonly firstName: Scalars['String'];
  public readonly lastName: Scalars['String'];

  constructor(user: User | undefined) {
    this.id = user?.id ?? '';
    this.firstName = user?.firstName ?? '';
    this.lastName = user?.lastName ?? '';
  }

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

This UserModel implements auto generated User type. (So eventually includes all user tables fields.) And defined some private methods.

And for the GraphQL, we kept queries in a single folder:

// src/graphql/queries/user.graphql

query User {
  user {
    ...UserDetails
  }
}

fragment UserDetails {
  id
  firstName
  lastName
  email
  address
  phoneNumber
  # Fetching all fields
}

We were using fragments but read all fields to make it easier to reference them in the models.

And this is how we refer to user’s full name:

const user = new UserModel(graphql_result);
user.fullName();

For this example, using only firstName and lastName is straightforward. However, in real applications, models tend to be more complex.

Since we were querying all fields and including them in the models, we were unsure which properties were necessary in different parts of the app. As a result, we often ended up over-fetching data, which negated the benefits of GraphQL. 🫣

The Shift: Seeking a better approach

After a few years, the original project was canceled. However, I got the opportunity to build a new app from scratch with the same tech stack. The senior developer had left, and I became the lead front-end developer. 😎 This time, I decided to get rid of the module-based pattern entirely.

Initially, I wrote helper functions:

// src/helpers/user.ts

const getFullName = (user: User) => {
  return `${user.firstName} ${user.lastName}`;
};

However, I still kept using the generated User type. Also, GraphQL queries are still in a single folder, leading to the same inefficiencies.

Then, I got a advisor who introduced me to the power of GraphQL fragment colocation. ✨

What is GraphQL Fragment Colocation?

GraphQL fragment colocation is the practice of defining fragments near the components or functions that consume them. Instead of keeping all GraphQL queries in a centralized location, colocating fragments ensures that only the necessary fields are queried and makes the code more modular and maintainable.

For more details, check out:

Implementing Colocation: A New Approach

We decided on new rules based on my advisor’s advice.

New Coding Rules are:

Write fragments in the same file as the functions/components using them
Query only the fields needed in that file
Avoid using generated types directly

Example:

// src/helpers/user.tsx
export const USER_FULLNAME = graphql(`
  fragment UserFullName on User {
    firstName
    lastName
    middleName
  }
`);

export const getFullName = (user: {
  firstName: string;
  lastName: string;
  middleName: string;
}) => {
  return `${user.firstName} ${user.middleName} ${user.lastName}`;
};

Now, the helper function defines its required fields explicitly via a fragment. This makes it clear which properties are used and avoids unnecessary data fetching.

Or we could use DocumentType which is generated from codegen:

import type { DocumentType } from "~/__generated__";

export const getFullName = (user: DocumentType<typeof USER_FULLNAME>) => {
  return `${user.firstName} ${user.middleName} ${user.lastName}`;
};

* Note that we are not using User type here.

When calling the function, we ensure the required data is passed:

// src/page/user.tsx
import { getFullName } from '../helpers/user';

const { data } = useQuery(
  graphql(`
    query UserFullNameQuery {
      user {
        ...UserFullName
      }
    }
  `)
);

const fullName = getFullName(data.user);

Conclusion

By colocating GraphQL fragments and only fetching necessary fields, we achieve:

Improved Readability: Queries are easier to understand and maintain.
Reduced Over-fetching: We fetch only the data we actually use.
Better Maintainability: Changes to data structures remain localized.

This approach makes GraphQL development cleaner and more efficient, ensuring that our frontend remains both performant and easy to work with. 🥳

Fixing Table Double Borders in Screenshots

Yoni Aoki — Tue, 11 Jun 2024 14:27:33 GMT

Intro

I work at a startup company that develops several web applications. The app's code is older than my developer experience. If it is working, I rarely touch it. 😜 (Of course, I will change it if necessary.)

One of the apps I am developing has a function to capture a screen and save it as a jpeg. When I got a new task, which was implementing a table to the component, the style collapsed. 🙈 I need to figure out a way to keep it in style.

The original code uses html2canvas to make screenshots. As I said earlier, if it works, there is no need to change it. 🙏 To begin with, I start searching how to capture a table with html2canvas.

TL;DR

☝

Reduce overlapping borders for simple tables

✌

Change library to html-to-image

The Problem

This is a simple code for capturing an element using html2canvas and file-saver.

import { saveAs } from "file-saver";
import html2canvas from "html2canvas";

const element = document.querySelector("#capture") as HTMLElement;
html2canvas(element, {
  scale: 1, // default is 2
}).then((canvas) => {
  saveAs(canvas.toDataURL("image/jpeg"), "capture.jpeg");
});

This works fine for most of the elements but not for the table.

This is what we get. The outside border width is 1px, but the inside borders are 2px.

You might say... "Make the outer border 2px to match the inside". Of course, that's a solution too, but this wasn't my personal project. I have a design for it and I do not have the power to change the design... 🫠

* I found some of the stack overflow talks about border-collapse: collapse;. This only eliminate nested border look. So this wasn't my solution.

Delete Overlapping Borders

One common solution I found on the Internet is reducing overlaps.

Most of the browsers automatically reduce overlapping borders. Therefore, when I see my code on a browser, there are no double borders. (Open the developer tool and check the cell styles. It will show that only the left and bottom borders are active even though I added borders for all sides)

But the capture won't reduce automatically. So... need to style it manually.

I added a top border for thead, and a left border and a bottom border for cells. And a right border for the last cell. (I think if the border does not overlap, anything is fine... but if I am wrong, please tell me 🙏)

So this is the final result, all borders are the same width 🙌

Complex Table

It worked fine until I encountered merged cells and striped rows. When I use html2canvas, the text in merged cells disappears. Additionally, the borders of the merged cells are not displaying correctly... 😭 (I didn't remove overlapping borders for this example)

Use `dom-to-image`

I made the decision to search for a new library instead of modifying the styles (don't ask me why 🫣). While researching, I came across dom-to-image. Although it hasn't updated since 2017, but.... I decided to give it a try.

import { saveAs } from "file-saver";
import domtoimage from "dom-to-image";

let element = document.getElementById("capture") as HTMLElement;

domtoimage
  .toBlob(element, {
    width: element.clientWidth,
    height: element.clientHeight,
  })
  .then((blob: Blob) => saveAs(blob, "capture.jpeg"))
  .catch((error: Error) => {
    console.error("Fail to save", error);
  });

And you know what? It works perfectly. 🙌 No overlapped borders or disappearing text. 🥳

After a brief moment of excitement, the project manager is hesitant to use a library that hasn't been updated in a long time. I get it, but... but... 😭🫠🙈

Use `dom-to-image-more`

The project manager suggested using dom-to-image-more which is a fork of the dom-to-image with some important fixes. As of writing this article, it seems that it is still being updated.

Just change the import and reuse other part.

import { saveAs } from "file-saver";
import domtoimage from "dom-to-image-more";

let element = document.getElementById("capture") as HTMLElement;

domtoimage
  .toBlob(element)
  .then((blob: Blob) => saveAs(blob, "capture.jpeg"));

And result is...

What...🫢 I did not expect this result.

The text inside the cell did not disappear, but the border and spacing were changed. I might be able to set print styles for the element. I asked my project manager if he wanted me to change the style and make it work, but he said no. Therefore, we decided to skip using this library.

Use `html-to-image`

Luckily I found another library through a medium post by Code to Coin.

In the article, he was comparing the performance time of the 2 libraries.

The average difference in performance was 86.3985 ms. This means that on average, html-to-image was almost 71 times faster than html2canvas!

I was having time issues as well, so if this works fine, I might replace all html2canvas later🤔.

import { saveAs } from "file-saver";
import * as htmlToImage from "html-to-image";

let element = document.getElementById("capture") as HTMLElement;

htmlToImage
  .toBlob(element, {
    canvasWidth: element.clientWidth / 2,
    canvasHeight: element.clientHeight / 2,
  })
  .then((blob: Blob) => saveAs(blob, "capture.jpeg"));

I use toBlob and added canvasWidth and canvasHeight to match with other results. (There is a toPng, toJpeg, toSvg functions available)

And the result is this 👇

It looks fine. There is no difference from the dom-to-image result.

The last release was a year ago, but my manager is okay with it, so finally I could finish my task. 😭

Wrap up

I ended up replace html2canvas with html-to-image so that I don't have to change existing table styles. However, if it's not a complex table, I think I'd reduce the overlapping borders.

If I had more time to experiment with styles, I might have found another way, or maybe I could fork the library and do something? If you know a better way or a different library, please let me know. 🤩

* Find the code for this article on GitHub.

References

https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

https://github.com/yoniakabecky/blog-sample-code/

Why Am I Starting A Blog

Yoni Aoki — Sun, 21 Jan 2024 12:57:44 GMT

TL;DR

☝

I will write technical notes to keep track of my work.

I just wrote about my enthusiasm to begin, so you don't have to go through it. But if you want, you're welcome to read it 😉

Starting Point

One of my teachers in programming school assigned Medium posts as homework to someone who had failed to submit their programming assignment. Of course, I did not get that assignment. That is why I have not written any posts until now. 🙈

After completing my programming course, a lot of people suggested that I should start writing. However, I hesitated because

I am not good at writing 🙅‍♀️
I did not want to spend time writing ⏳ (unsure if the benefits would outweigh the time invested)
I thought that no one read my blog because my level of knowledge was insufficient 🥺

Moreover, there were other reasons, but most of them stemmed from my low self-esteem.

I must admit that some things have remained the same 🫠, but some have changed.

The Changes

The biggest change is that I started working as a front-end developer for several companies. 🚀 Collaborating with other developers and reviewing their code helped me to learn more. Additionally, working on released products and hearing customers' feedback made me realize that I cannot compromise my skills. 👻

Problem-solving

Whenever I find problems while working on tasks, I usually search for solutions by Googling and often end up on Stack Overflow or someone's blog. However, as my skill improves, problems become more difficult, and the more difficult they become, the harder it is to find a solution.

Then I need to look deeper. Check the library documents, changes, issues, etc...

As I could not find it easily, I thought it would be helpful to post about the problem I faced and how I solved it. (Since gaining experience, I have also gained a bit of self-esteem, and my thinking has changed 😎)

Improve My Reputation

Initially, my main focus was to improve my coding skills, and I did not pay much attention to improving my reputation. Now, I have been working for companies for a while, my priorities have shifted. I have more time to reflect on what I want to achieve in my career.

All the work I have done so far has been private. Therefore, I need to showcase my expertise, knowledge, and problem-solving skills somehow... 🤔

I am not a social media person. I created an X (Twitter) account, I rarely use it. LinkedIn has turned into a platform for recruiters' spam (IMO🤪). So I do not expect much from myself. But I think I can do it as long as make it simple (like make a note 📝 for what I researched).

Bonus 😁

As English is my second language, the rapid growth of AI has been a big help. It has certainly lowered the bar for writing. 😇

Wrap Up

Now that I have more experience, I have more time to think about what I want to do next. As a start, I would like to make some technical notes.

Oh, by the way, this is my first post and I have been spending a day writing this 3 mins read post. 😂 If I keep doing this, I won't be able to continue writing.

So my blog will be

as simple as possible ☝️
about one problem/technique⚡️per post
take it easy 🦅 do it when I can

I would be happy if you could leave any advice or comments.
Thank you for reading this far 😃