About yamanoku net

yamanoku net is a portal site of Okuto Oyama called yamanoku.

Table of Contents

Explaining site implementation

Technology Stack

  • Nuxt.js
    • @nuxt/components
    • @nuxtjs/axios
    • @nuxtjs/dotenv
    • @nuxtjs/pwa
    • nuxt-i18n
  • Vuex (Store)
  • eslint
    • eslint-plugin-prettier
    • eslint-plugin-vue
    • eslint-plugin-vuejs-accessibility
  • modern-normalize
  • Google Fonts

Markup

Semantic markup implementation to realize information design of human-readable (Human can understand) and machine-readable (Be understood by the machine).

It also implements content completion using WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications).

Details
<article id="about:markup" aria-labelledby="about:markup_heading">
  <h3 id="about:markup_heading">
    {{$t("aboutPage.subHeading.markup")}}
  </h3>
</article>

Assist users as they move from article to article by tying aria-labelledby to article elements.

Component oriented design

You need to format the API you get for display, but managing it as a single component simplifies source code, allows multiple uses, and simplifies information design.

Details

For example, the slide list uses the following components to render:

<ul role="list">
  <li role="listitem" v-for="list in listItem" :key="list.title">
    <template v-if="list.datetime">
      <time :datetime="list.datetime">
        {{dateReplace(list.datetime)}}
      </time>
      -
    </template>
    <template v-if="list.created_at">
      <time :datetime="list.created_at">
        {{dateCreated(list.created_at)}}
      </time>
      -
    </template>
    <a :href="list.url" target="_blank" rel="noopener" lang="ja">
      {{list.title}}
    </a>
  </li>
</ul>
SlideList.vue GitHub icon

Internationalization

Since we are developing on Nuxt.js, we have introduced a tool called nuxt-18n. In addition to internationalization, rendering can also be done for specific languages.

Details

The following is a conditional expression that is displayed when it is not in Japanese.

<template v-if="this.$i18n.locale !== 'ja'">
  <em>{{ $t("onlyJPText") }}</em>
</template>
Slides.vue GitHub icon

Explaining site design

Inclusive design designed for easy viewing by all users.

Don't overdesign.

Too much decoration can prevent you from getting the information you want. It is designed with the default style of the browser, that is, the standard image in mind.

It's also the semantic markup of the design makes it possible to arrive at the information without feeling out of place, even with the default style in browser.

Font size

The basic setting is 16 px, and the size ratio can be maintained even if the page is enlarged by rem.

Color contrast

All colors are set to have a contrast ratio of at least 4.5:1 with the background, but they are not pure black and white, but instead are balanced with fewer shades of gray.

Details

It is specified using the following custom properties (CSS Variables) for common use:

var(--black)
rgb(21, 32, 43)
var(--white)
rgb(210, 210, 210)
var(--gray)
rgba(70, 70, 70, 0.5)
var(--blue)
rgb(90, 190, 255)
var(--purple)
rgb(220, 100, 220)
var(--linkBlue)
rgb(18, 122, 200)
var(--linkVisited)
rgb(21, 32, 43)

It also supports dark mode (Gentle dark tones of the eyes), depending on the OS settings.

About the greatest amount of content

The maximum width of the main content is set to 80ch. ch is called a chain and is a variable unit depending on the size of the character.

The advantage of this setting is that it can support users with dyslexia who cannot read long sentences, and it is less likely that some text will become unreadable as the character size increases.

Vertical rhythm

We use vertical rhythm that emphasizes consistency throughout the page. The margins and margins are set relative to the line spacing of 24px.

Cognitively impaired users can read text more easily if the words are evenly spaced.

Return to the top page