June 2024 Release Notes (Ryota-Blog)

2024/06/21

Hello! I'm @Ryo54388667! ☺️

I usually work as an engineer in Tokyo!

I mainly work with technologies like TypeScript and Next.js.

This month I'll introduce the updates to this media platform!

Application Updates

Image Popup Functionality

I added a popup feature that allows you to view images in a larger display when you click on images in detail pages.

When you click on small photos within articles, you can view them enlarged on a bigger screen (like the one below). For some images that become larger than the view area, this will be a future improvement point...

Navigation to Previous/Next Articles

As a new feature, I added navigation that allows easy movement to previous and next articles. You can find it at the bottom of this article.

When reading an article, clicking "Next Article" lets you quickly move to the next article. What I struggled with during implementation was whether to place the "Next Article" on the left or right side for users - what would feel natural. In the end, I decided to clearly display the dates.

Reference

https://wk-partners.co.jp/homepage/blog/hpseisaku/next-prev/

Using requestIdleCallback for AWS RUM Loading

To improve the app's performance, I implemented loading Real User Monitoring (RUM) data using requestIdleCallback.

This should enable more efficient loading. However, since Safari doesn't support it, I reluctantly added conditional branching 😇

For details, please see this commit.

For B2C performance improvements, I use this Yahoo article as a reference! So grateful~

Implementing Button for Issue Reporting

I added a "Correction Request Button" that allows users to report problems. You can find it at the bottom of this article.

I also wrote details on Zenn!

https://zenn.dev/ryota_09/articles/77ca2efe5d23d0

Adding "New" Labels

I made newly published articles display a "New" label.

For now, I'm labeling articles "within 2 weeks" (2 weeks! Old! I won't accept that criticism). I'm satisfied with the color tone I personally like 👌

Adding Labels to Articles Over One Year Old

I made articles published over a year ago display an "Old" label.

https://ryotablog.jp/blogs/modern-coding-review

Separate OG Image for Twitter

I set up dedicated OGP tags to improve the appearance when sharing links on Twitter. By naming it twitter-image.tsx, it creates a dedicated OGP image. I had long thought that only the Twitter OG image had a slightly off border width, but after learning that I could prepare separate OG images for Twitter, I made the improvement.

Reference

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

Adding Blur Functionality to Images

I added blur effects to images.

However, adding blur functionality to all images dramatically worsened performance and increased data usage, so I limited it to necessary places only.

https://ryotablog.jp/about

Smooth Display of Article List

I modified the article list to float up smoothly.

For details, please see this commit. It's applied when switching tabs on the top page.

https://ryotablog.jp/blogs

Fix for Fonts Being Applied to Storybook Components

I fixed it so fonts are properly applied to components in Storybook as well.

import React from "react";
import { Kosugi_Maru } from "next/font/google";
import type { Preview } from "@storybook/react";

import "../src/styles/globals.css"

const KosugiMaru = Kosugi_Maru({ weight: "400", subsets: ["latin"], display: "swap" });

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    (Story) => (
      

) ], }; export default preview;

Applying GIF Images to next/image

I made GIF images supported by next/image. It seems you can support it by turning unoptimized off.

const isGif = src.endsWith(".gif");

Infrastructure Updates

Using AWS RUM

I introduced AWS Real User Monitoring (RUM). This allows monitoring of Web Vitals progress.

Adding Storybook to Subdomain

I added Storybook to a subdomain.

https://story.ryotablog.jp/?path=/docs/document--docs

Next Month's Roadmap

Sidebar Improvements

I plan to make it clearer that the sidebar can be scrolled.

Design-wise, I think the blur from Twitter's settings area would be good.

Storybook Accessibility Testing

I'm considering introducing accessibility testing to Storybook.

Currently, I'm getting color contrast warnings from Lighthouse, so I want to do something about that...

Automating Web Vitals Collection

I plan to automate the collection of Web Vitals (important performance metrics for websites).

Summary

Image popup functionality
Navigation to previous/next articles
Using requestIdleCallback for RUM loading
Implementing button for issue reporting
Adding "New" labels
Adding labels to articles over one year old
Separate OG image for Twitter
Adding blur functionality to images
Smooth display of article list
Fix for fonts being applied to Storybook components
Applying GIF images to next/image

These are the release notes for June 2024. Thank you for reading to the end. I'd like to write next month too. No, I will write. (Probably)

Thank you for reading to the end!

I tweet casually, so please feel free to follow me! 🥺

MFAにパスキーを利用するようになって、macbookの指紋認証から離れられず、サードパーティのキーボードに移れない😮‍💨指紋認証付きmagic keyboardを買うか悩む。。
— りょた@dev (@Ryo54388667) June 21, 2024

Request Correction