{ "version": "https://jsonfeed.org/version/1", "title": "Eric's Blog", "description": "", "home_page_url": "https://zhangeric.com", "feed_url": "https://zhangeric.com/feed.json", "user_comment": "", "icon": "https://zhangeric.com/media/website/Eric_AVATAR01.webp", "author": { "name": "Eric Zhang" }, "items": [ { "id": "https://zhangeric.com/browser-sidebar-tool-24h-news-flash.html", "url": "https://zhangeric.com/browser-sidebar-tool-24h-news-flash.html", "title": "Browser Sidebar Tool: 24H News Flash", "summary": "This is the third small product I built with the help of…", "content_html": "

This is the third small product I built with the help of OpenAI, and it has quickly become one of my favorite tools. I use it almost every day: **24H News Flash**.

Most of my daily work happens inside the Vivaldi browser. One of Vivaldi’s most useful features is the ability to add any website to the browser sidebar. This makes it possible to keep a compact information panel open while I continue working in the main browser window.

In practice, however, adding regular news websites to the sidebar does not usually create a good experience. Many news sites are not designed for a narrow sidebar layout. They often include too many ads, large navigation menus, unrelated recommendations, slow-loading scripts, and cluttered page sections. Some websites do not refresh content reliably, and some even push users toward their mobile apps.

What I wanted was much simpler: a clean, lightweight, always-available news panel that could stay in my browser sidebar all day.

\n
\"\"


That is why I built **24H News Flash**.

The idea is straightforward: show useful information in the smallest possible space. At the top, the panel displays live cryptocurrency prices and 24-hour percentage changes. Below that, it collects headlines from RSS feeds and presents them in a clean card-style interface. The design follows an Apple-inspired visual style, with soft cards, clear typography, and minimal distractions.

\n
\"\"


The tool supports custom RSS feed management, so you can add your preferred news sources and remove the ones you do not need. It also includes light mode, dark mode, and an automatic theme option, making it comfortable to use throughout the day. You can customize the panel title, adjust the news headline font size, choose how many items to show, and manage the crypto assets displayed at the top.

To reduce manual work, the panel refreshes news and market data automatically every 10 minutes. It also includes a manual refresh button for real-time updates whenever you need them. For people who spend long hours working in a browser and want to stay aware of both news and market changes, this small tool is extremely practical.

## Key Features

1. **Apple-inspired UI** — clean, elegant, and optimized for a narrow browser sidebar.  
2. **Custom RSS feeds** — add, remove, and manage your preferred news sources.  
3. **Adaptive theme modes** — light, dark, and automatic modes for all-day use.  
4. **Live crypto prices** — display selected cryptocurrency prices and 24-hour changes at the top.  
5. **Personalized settings** — customize the panel title, headline font size, item count, and top crypto assets.  
6. **Auto and manual refresh** — refreshes automatically every 10 minutes, with instant manual refresh support.  
7. **Lightweight deployment** — the entire tool can be deployed as a single JavaScript file on Cloudflare Workers.

\n
\"\"


If you like this product, you can download the JavaScript file and deploy it to Cloudflare Workers. If you are not sure how to deploy it, you can ask ChatGPT / OpenAI for help or contact me directly.

\n

24H News Flash
This is another UI style I created for my browser sidebar news tool. It keeps the same lightweight and practical approach, but uses a more Apple-inspired card layout that feels cleaner and more comfortable for long-term daily use.

\n
\"\"
", "image": "https://zhangeric.com/media/posts/4/cover-24h-news-flash-2.webp", "author": { "name": "Eric Zhang" }, "tags": [ "Web App", "Vivaldi Browser", "Sidebar project", "AI tools" ], "date_published": "2026-04-27T20:51:36+08:00", "date_modified": "2026-04-28T13:21:23+08:00" }, { "id": "https://zhangeric.com/erics-stocks-pro-a-sidebar-tool-for-tracking-stocks-and-crypto.html", "url": "https://zhangeric.com/erics-stocks-pro-a-sidebar-tool-for-tracking-stocks-and-crypto.html", "title": "Eric’s Stocks Pro: A Sidebar Tool for Tracking Stocks and Crypto", "summary": "Eric’s Stocks Pro is the second tool I created with the help…", "content_html": "

Eric’s Stocks Pro is the second tool I created with the help of OpenAI, and it is also my second AI-assisted project.

\n

In my daily work and learning, I often need to check real-time prices for stocks and cryptocurrencies. In the past, I mainly used Google Finance and added it to the sidebar of the Vivaldi browser. Google Finance is useful for tracking market data, but the interface contains a lot of extra information beyond the prices I care about. For a small browser sidebar, the page can feel crowded and messy.

\n

When I added multiple stocks and crypto assets, I often had to scroll up and down to see all the items on my watchlist. This was not convenient for a narrow sidebar layout. I also tried adding several other financial websites to the Vivaldi sidebar, but most of them were not designed for this kind of compact view, so the overall experience was not ideal.

\n

That is why I decided to build my own custom stock and crypto tracking tool for the browser sidebar.

\n
\"\"
\n

At the beginning, I used Google Gemini to help me write the code. Stock data was mainly provided by Finnhub, while cryptocurrency data was mainly provided by Binance. At first, I only wanted to add the stocks and crypto assets I personally follow. Later, I decided to make the project more useful for other people as well, so I gradually added more customization features.

\n

During the development process, Gemini produced several issues across different versions, and it became difficult to solve all the problems. In the end, I switched back to OpenAI to help me complete the project, test it, and improve the details.

\n
\"\"
\n

At the moment, this project has been running stably for one week. Its main features include:

\n
    \n
  1. Custom search and adding support for stocks, ETFs, and cryptocurrencies.
    2. \n
  2. An Apple-inspired UI design that is clean, simple, and suitable for sidebar use.
    3. \n
  3. Custom project name support.
    4. \n
  4. Custom font weight settings for symbols and prices.
    5. \n
  5. Custom card height settings to fit different sidebar layouts.
    6. \n
  6. Light mode, dark mode, and automatic mode based on the system appearance.
    7. \n
  7. Automatic price updates during U.S. stock market hours on weekdays, while cryptocurrencies can update 24 hours a day. Manual refresh is also supported.
    8. \n
  8. Long-press asset cards to enter management mode, where you can delete items or drag to reorder them.
    9. \n
  9. A collapsible top section to save space and make the sidebar more compact.
    10. \n
\n

This tool is not a professional trading platform, and it is not meant to replace advanced financial software. Instead, it solves a simple but real problem for me: I wanted a cleaner, lighter, and more beautiful way to quickly check the stocks and cryptocurrencies I care about directly from my browser sidebar.

\n
\"\"
\n

For me, the most meaningful part of AI is not just that it can answer questions. It can also help ordinary people turn their ideas into real, usable tools. Even without knowing how to code, we can describe what we want, test different versions, adjust the details, and finally create something of our own.

\n

If you also use the Vivaldi browser sidebar and want a lightweight, clean, and customizable stock and crypto tracker, you are welcome to download and try Eric’s Stocks Pro.

\n

Download:

\n

Eric’s Stocks Pro

\n

", "image": "https://zhangeric.com/media/posts/3/24h-news-brief-pic-2.png", "author": { "name": "Eric Zhang" }, "tags": [ "Web App", "Vivaldi Browser", "Sidebar project", "AI tools" ], "date_published": "2026-04-27T20:27:03+08:00", "date_modified": "2026-04-28T13:21:04+08:00" }, { "id": "https://zhangeric.com/erics-calculator-pro-a-sidebar-tool-for-vivaldi.html", "url": "https://zhangeric.com/erics-calculator-pro-a-sidebar-tool-for-vivaldi.html", "title": "Eric’s Calculator Pro: A Sidebar Tool for Vivaldi", "summary": "This is the first software tool I have ever created with the…", "content_html": "

This is the first software tool I have ever created with the help of AI, and it is also my first AI-assisted project.

\n
\"\"
\n

It may not be a groundbreaking product, but it means a lot to me. With the help of AI, ordinary people like me, even without coding knowledge, can now build tools that used to feel impossible. AI gives everyone the opportunity to turn their own ideas into practical products that fit their personal needs.

\n

I use the Vivaldi browser frequently in my daily work and learning. One of its most useful features is the sidebar, which allows users to add custom websites and choose whether to display them in a mobile or desktop layout. In my work, I often need to use a calculator. However, searching for and opening the calculator app from the App Center every time feels inefficient. A normal desktop calculator window is also difficult to keep fixed in one place, and it can easily be covered by other application windows.

\n

So I shared my idea with the OpenAI App and asked it to generate an executable HTML page for me. I tested it by dragging the HTML file into the browser and opening it directly. After many rounds of adjustments and improvements, I finally arrived at the calculator version I wanted. Once opened in the browser, it can be added to the Vivaldi sidebar by clicking the “+” button.

\n

The main features of this sidebar calculator include:

\n
    \n
  1. An Apple-inspired visual style with a clean interface, pleasant colors, and a simple layout.
    2. \n
  2. Complete basic calculator functions for everyday work and study needs.
    3. \n
  3. A display area at the top that remembers the previous calculation.
    4. \n
  4. A history section at the bottom that shows up to 5 recent input records and supports one-click clearing.
    5. \n
\n
\"\"
\n

If you also like using tools inside your browser sidebar and want a lightweight, beautiful, and easy-to-access calculator, you may want to give this tool a try.

\n

Download Eric's Calculator Pro

\n

This is a lightweight HTML calculator for browser sidebar use.  
Download the ZIP file, unzip it, and open the HTML file in your browser.

\n
\"\"
\n

", "image": "https://zhangeric.com/media/posts/2/erics-calculator.png", "author": { "name": "Eric Zhang" }, "tags": [ "Web App", "Vivaldi Browser", "Sidebar project", "AI tools" ], "date_published": "2026-04-27T16:04:22+08:00", "date_modified": "2026-04-28T13:26:32+08:00" }, { "id": "https://zhangeric.com/my-first-publii-post.html", "url": "https://zhangeric.com/my-first-publii-post.html", "title": "My First Publii Post", "summary": "This is my first post created with Publii. I want to use…", "content_html": "

This is my first post created with Publii.

\n

I want to use this website to share AI projects, photography, learning notes, and personal thinking.

", "author": { "name": "Eric Zhang" }, "tags": [ ], "date_published": "2026-04-27T11:50:37+08:00", "date_modified": "2026-04-27T11:50:37+08:00" } ] }