Forem: Tomoyuki Kashiro

Use Page Object Pattern in React Component Tests

Tomoyuki Kashiro — Sat, 13 Aug 2022 00:00:00 +0000

My understanding is that readability and maintainability are domains which should be put high priority in software tests. To achieve this, using Page Object Pattern might be a good help not only in E2E tests but also React Component tests.

What is the Page Object Pattern

https://webdriver.io/docs/pageobjects/

Page Object Pattern is one of the software programming principle which encapsulate page manipulation logic that tend to harm readability and maintainability in software tests.

Software test involves two kinds of cods below.

test code : e.g. Shows error messages when invalid email is typed in form.
manipulation code to reproduce test situation : e.g. Shows page then type email

Page Object Pattern aims to move the latter codes to page class, which is called Page Object, to help software engineers read and write the former codes easily.

The example of Page Object Pattern

Let’s see https://webdriver.io/docs/pageobjects/

// Page class has E2E test instance which comes from test library such as selenium.
import Page from './page'

class LoginPage extends Page {

    // Defines some functions to manipulate page to reproduce test situation.
    get username () { return $('#username') }
    get password () { return $('#password') }
    get submitBtn () { return $('form button[type="submit"]') }
    get flash () { return $('#flash') }
    get headerLinks () { return $$('#header a') }

    async open () {
        await super.open('login')
    }

    async submit () {
        await this.submitBtn.click()
    }

}

export default new LoginPage()

By using this page instance to prepare test cases, we can make test codes simple.

it('should deny access with wrong creds', async () => {
    await LoginPage.open()
    await LoginPage.username.setValue('foo')
    await LoginPage.password.setValue('bar')
    await LoginPage.submit()

    await expect(LoginPage.flash).toHaveText('Your username is invalid!')
})

How to use Page Object Pattern in React Component tests

import type { ComponentProps } from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LoginForm from "./LoginForm";

type Props = ComponentProps<typeof LoginForm>

const setup = (props): Props => {
  const { getByRole, getByLabelText, getByText } = render(<LoginForm {...props} />);
  return {
    typeEmail: (email: string) => userEvent.type(getByLabelText("email"), email),
    getByText,
    submit: () => userEvent.click(getByRole("button"))
  };
};

it("When email typed is invalid, shows error message.", () => {
  const utils = setup();
  utils.typeEmail("invalidemail");
  utils.submit();

  expect(utils.getByText("Email is not correct.")). toBeInTheDocument();
});

CSS MdiaQueryのmin-widthとmax-widthどちらを使う？

Tomoyuki Kashiro — Sun, 08 Mar 2020 00:00:00 +0000

はじめに

レスポンシブデザインでサイトを作る際に、CSS MediaQueryの min-width / max-width を使いますが、どっちを使っていくべきか悩んでる人も多いのかと思います。

この記事では、どっちを使っていくべきか解説していきます。

@media (max-width: ◯◯px) {
  // 画面サイズが◯◯px以下に適用
}

@media (min-width: ◯◯px) {
  // 画面サイズが◯◯px以上に適用
}

結論

基本的に、min-width で書いた方が良いです。

そのように書くことで、CSSをシンプルに保つことができます。

// sample.scss
.awesome-container {
  xxx: xxxx;
  xxx: xxxx;

  @media (min-width: 100px) {
    // 画面サイズが100px以上に適用
  }

  @media (min-width: 300px) {
    // 画面サイズが300px以上に適用
  }

  @media (min-width: 500px) {
    // 画面サイズが500px以上に適用
  }
}

理由1：CSSは画面サイズが大きくなるに連れて、記述量が増える

一般的に、画面サイズの小さいモバイル画面では、要素は上から下へ積み重なっていくようにデザインされて、画面サイズが大きくなるにつれて要素を横並びにしてデザインされることが多いです。

mobile	tablet	desktop

そして、HTMLで記述された要素は、デフォルトで、左上から下 に積み重なっていきます。

この並びを 横 にしようとするときCSSの position, float ,display などでスタイルを調整していきます。

CSSのプロパティを、装飾目的、レイアウト目的の2つに分類したとすると、

装飾目的：color / font-size / font-familly / border
レイアウト目的：position / width / height / display

レイアウト目的のスタイルは、画面サイズの小さいモバイルだと、不要なケースが多く（縦に並べるだけならCSS不要）、画面サイズが大きくなるにつれて、横並びにするため、必要になってくきます。

よって、画面サイズに応じて記述するCSSが増えていくのです。

理由2：CSSはスタイルのキャンセルが手間

CSSにはスタイルをキャンセルさせる方法がなく、キャンセルしたければ、初期値で上書きする必要があります。

前述したように、画面サイズに応じてレイアウト目的のスタイルが増えていくので、先に画面サイズが大きいスタイルを記述すると、レイアウト目的スタイルが不要な小さい画面サイズのスタイルを記述するときに、都度キャンセルする必要がでてきます。

.awesome-panel {
  // 画面サイズが401px以上はabsolute
  position: absolute:

  @media (max-width: 400px) {
    // 画面サイズが400px以下ならpositionの初期値（static）でpositionをキャンセルする
    position: static;
  }
}

これを、画面サイズが小さいスタイルから記述すると、キャンセルが不要になります。

.awesome-panel {
  // 画面サイズが400px未満
  // position: static: ←初期値なので記述不要

  @media (min-width: 400px) {
    // 画面サイズが400px以上ならabsolute
    position: absolute;
  }
}

まとめ

CSSは画面サイズが大きくなるに連れて記述量が増える
CSSはスタイルのキャンセルが手間である

という条件から、min-width を利用して小さい → 大きい順にCSSを書くことで、 CSSをシンプルにでき、結果CSSのファイルサイズが小さくなり、メンテナンスしやすいスタイルを書くことができるようになります。

また、Webサイトのデザイン・開発は モバイルファースト（モバイル優先） で考えることが当たり前になってきましたが、この書き方はそのポリシーを反映した形になってて、マークアップもモバイルから作ることになるので良いという側面もあります。

// sample.scss
.awesome-container {
  xxx: xxxx;
  xxx: xxxx;

  @media (min-width: 100px) {
    // 画面サイズが100px以上に適用
  }

  @media (min-width: 300px) {
    // 画面サイズが300px以上に適用
  }

  @media (min-width: 500px) {
    // 画面サイズが500px以上に適用
  }
}

さいごに

もしこれを読んでもまだ、 max-widthベースの方がいい と感じる人はぜひ、1つのページを min-widthベースとmax-width ベースの2通りで書いてみてください！

私も どっちでもいいじゃん と思う派だったが、やってみるとmin-widthベースの方が圧倒的に書きやすく驚きました！

CookieのSameSite Attributeとは？

Tomoyuki Kashiro — Wed, 15 Jan 2020 00:00:00 +0000

Cookie に SameSiteという新しい属性が追加されて、いくつかのブラウザではその初期値が変わる予定です。

Google Chrome ではその変更が2020年2月を予定しています。

複数のドメインの間で通信をし、Cookieを利用するサービスは影響あるかもしれません。

ここでは、 SameSite の概要と影響をさくっと確認していきます。

SameSite Cookies とは？

SameSite とは、 Cookie に追加される新しい属性です。

Cookie を発行する際は、 key=value と合わせて、属性として Cookie の振る舞いを制御するオプションを設定できます。

例えば、

Expires : Cookieの有効期限
Secure : https の場合のみ利用を制限するかどうかのフラグ
HttpOnly : サーバサイドでの利用に制限するかどうかのフラグ

などです。

SameSite は Cookie がドメインをまたいで利用されるときの挙動を制御する新しいオプションになります。

SameSite=Strict, SameSite=Lax, SameSite=None の3つの値から選択できます。

詳しい内容は後述します。

SameSite Cookie が必要とされる理由

主な理由は、 CSRF（クロスサイトリクエストフォージェリー）という攻撃を防ぐことにあります。

例えば、SNSなどでコメントを投稿する機能を例に考えます。

コメントを投稿するのに必要な仕様は以下だとします。

method : post
URL : example.com/comments
parameter : body (コメント内容)
条件 : ログイン必須（cookieを使って認証管理）
方法 : <form> タグを利用して送信

HTMLはこんな感じ。

<!-- example.com でのコメント投稿機能 -->
<form method="POST" action="https://example.com/comments">
  <textarea placeholder="コメントを入力" name="body" rows="5" cols="33">
  <button>コメント送信</button>
</form>

もし、アクセスしたユーザーがログイン済みであれば、コメント投稿は成功します。

しかし、この実装のままだと、関係ないサービスからでもコメント投稿が成功してしまいます。

例えば、

<!-- example.net （.netなので無関係のサイト）からの、example.com のコメント投稿機能を悪用したいたずら -->
<form style="display: none;" method="POST" action="https://example.com/comments">
  <textarea value="だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。">
  <button>コメント送信</button>
</form>

このような実装で、ユーザーの意思とは関係なく、このformをsubmitすることで、そのログインユーザーのコメントとして投稿されてしまいます。

これがクロスサイトリクエストフォージェリーという攻撃です。

tokenを使ってリクエストが example.com からであるかどうかを確認する方法でこの攻撃を防ぐのが、よく見る対応です。

この攻撃は、別のサイトからの意図しないリクエストであっても cookie 込みで送信されるという cookie の仕様を利用（悪用）した方法とも言えます。

SameSite 属性を利用することで、 関係ないサイト => example.com へのリクエスト時に、cookie 込みで送信するかどうかを example.com 側で制御できるようになり、結果としてクロスサイトリクエストフォージェリー対策になります。

SameSite の確認方法

Chrome DevToolsで確認可能です。

方法は2つあります。

ネットワークタブ

Cookieが付与されているドメインのリクエストをネットワークタブで見つけ、詳細内の、 Cookiesタブ で確認可能です。

アプリケーションタブ

アプリケーションタブの Storage > Cookies でドメイン毎に確認可能です。

デモを使って確認

さっそく、 SameSite を指定した Cookie がどのようになるのかデモとともにみていきます。

ここでは、サイトA（背景色が白）とサイトB（背景色がグレー）の２つのサイトで、3つのリクエストを例に見ていきます

サイトAからサイトBへの画面遷移
サイトAでiframeを使って、サイトBを表示する際のリクエスト
サイトAからサイトBへのXHR

サイトBには、 test=test という Cookieが付与されています。

サイトBを表示（リクエスト）する際、 test=test のCookieが読み取れれば画面に表示し、読み取れなければ、 test= と表示します。

Cookieを設定する際、 SameSite のオプションを変えて、上記3つのリクエストでCookieの読み取りにどんな違いがでるか見ていきます。

デモ結果

サイトBでCookieの中身を読み取れるか？

sameSite	ページ遷移	iframe	XHR
strict	❌	❌	❌
Lax	⭕	❌	❌
None	⭕	⭕	⭕

https://samesite-cookie.web.app/

SameSiteの利用パターン

認証管理に例して考えるなら、、、

Cookieで認証管理しており、別ドメインからリクエストを行わないサービス

SameSiteを利用することで、クロスサイトリクエストフォージェリーの攻撃を防ぐことができるので、可能な限り、 SameSite=Strict や SameSite=Lax の利用をしていきたいとこです。

Cookieで認証管理しており、別ドメインからリクエストを行うサービス

SameSite=Strict や SameSite=Lax を利用すると別ドメインからのリクエストでは、ログイン済みでも、Cookieが付与されて送信されないため、未ログインとして扱われてしまします。

また、Chrome, Firefox, Edgeでは SameSite が未指定の場合 SameSite=Lax として扱うことを検討しており、 Chrome version 80で未指定の場合、 SameSite=Lax として扱い変更がリリースされる予定です。

よって、何も対応してないと、2020年2月の Chrome version 80 のリリースのタイミングでこのケースのサービスでは Chrome で ログインできない 不具合が発生します。

今まで同じ挙動にするためには、 SameSite=None と Secure のオプションを Cookie に設定する必要があります。

忘れがちなパターンの Chrome extension

別ドメインでリクエストが発生する忘れがちなパターンに Chrome extension があります。

もし Chrome extension を開発している場合は、 2020年2月の Chrome version 80 のリリースのタイミングでトラブルにならないように確認しておきましょう。

SameSite未指定の場合、SameSite=Laxとして扱われることの確認方法

https://youtu.be/QSKky-bkTQ8?t=324

Consider Hover UX for Tablet Device

Tomoyuki Kashiro — Fri, 08 Nov 2019 00:00:00 +0000

Recently I bought Surface Go for browser testing and use it for my daily life too.

Sometime I met some sites which had hover based navigation but it didn’t work correctly on tablet device.

This is a capture when I used bootstrap-dropdown-hover which is bootstrap hover based navigation on Surface go.

It is difficult to tell what’s going on… I was trying to open dropdown menu but It didn’t work correctly.

What’s the matter?

When I use laptop the dropdown menu works!!!

When I use mobile the dropdown menu works correctly too.

This is because most of mobile browser treat tapping and after tapping state as :hover CSS pseudo-class so if the hover based dropdown menu is implemented using :hover it’s works!!!!!

I wrote blog about this in my past blog post plz check more details.

How to set :active style to button in mobile

But it doesn’t seems that Edge browser on Surface go treats tapping and after tapping state as :hover.

browser	hover	taping	after tapping
Edge on surface go	-	:active	:focus
mobile Safari	-	:active	:hover

demo site

What should we do?

whether the browser treat tapping and after tapping state as :hover CSS pseudo-class or not is different in browsers so we need to detect that users use input device that works :hover or not.

Common mistake

/* for mobile style */
/* .... */
@media (min-width: 768px) {
  /* for tablet style */
  /* .... */
}
@media (min-width: 1024px) {
  /* for laptop style */
  /* .... */
}

The common mistake is separating style based on device width using min-width or max-width media query then you avoid to use :hover CSS pseudo based UI on tablet device.

In this way you don’t consider…

Device has tablet width and works :hover
Device has laptop width but doesn’t work :hover

For example MS Edge on Surface Go has same width as table but doesn’t work :hover CSS pseudo…

How do we detect the devices?

We can detect devices which work :hover and devices which don't work :hover by using Interaction Media Features specs below.

Pointing Device Quality
Hover Capability
Rare Interaction Capabilities

Prior knowledge

Devices can connect multiple input device such as mouse or tablet pen with touch screen device.

Pointing Device Quality

This is a kind of media query to detect accuracy of the user’s primary pointing device.

/* if user's primary input device includes a pointing device of limited accuracy */
@media (pointer: coarse) {
}

/* if user's primary input device includes a accurate pointing device */
@media (pointer: fine) {
}

/* no pointing device */
@media (pointer: none) {
}

Hover Capability

This is a kind of media query to detect hoverable of the user’s primary pointing device.

/* if user's primary input device includes a hoverable device */
@media (hover: hover) {
}

/* if user's primary input device doesn't includes a hoverable device */
@media (hover: none) {
}

Rare Interaction Capabilities

Pointing Device Quality and Hover Capability detect the capability of primary input device only so if user connect multiple input devices (like secondary input) those will be ignored.

On the other hand, You can detect those capabilities by using any-pointer and any-hover media queries.

Those detection are based on multiple input devices.

/* if user's primary input device includes "any" pointing device of limited accuracy */
@media (any-pointer: coarse) {
}

/* if user's primary input device includes "any" accurate pointing device */
@media (any-pointer: fine) {
}

/* no pointing device */
@media (any-pointer: none) {
}

/* if user's primary input device includes "any" hoverable device */
@media (any-hover: hover) {
}

/* if user's primary input device doesn't includes "any" hoverable device */
@media (any-hover: none) {
}

Rare Interaction Capabilities could match multiple queries because it is based on multiple input devices.

For example, The query result of Surface go with tablet pen is below.

@media (poiner: fine)： because of tablet pen
@media (hover: hover)： because of tablet pen
@media (any-pointer: fine) and @media (any-pointer: coarse)： because of tablet pen(fine) and touch screen (coarse)
@media (any-hover: hover) because of tablet pen

note: surface tablet pen can hover on elements

Plz check more detail and full of result of those queries below!!!!

Interaction Media Features and their potential

How can we use it?

@media (pointer: coarse) It might be better to make buttons bigger to tap easier
@media (hover: none) It might be better to make other UI instead of hover one

But those queries don’t consider multiple input device so it could be better to use any-pointer and any-hover.

If you want your UI to adapt user’s input device…

@media (any-pointer: coarse) It might be better to make other UI instead of hover one

How to query in JavaScript

You can use matchMedia too in JavaScript.

window.matchMedia("(any-hover: coarse)").matches
// true or false

Notes

@media (hover: on-demand) and @media (any-hover: on-demand) are old specs so those are deprecated.

Remove “on-demand” value for hover/any-hover media queries. (removed)

References

Touch Devices Should Not Be Judged By Their Size

How to control browser keyboard

Tomoyuki Kashiro — Sat, 26 Oct 2019 00:00:00 +0000

Control browser keyboard using input[type]

Google explains the way to control browser keyboard for html form using type attribute in Create Amazing Forms

For example if you use type="email

<input type="email">

The keyboard which is customized for typing email address will show.

But this also has side effects.For example, if you use type="number"

<input type="number">

An unexpected element to support typing number will be shown inside the element and the number you type will be increased and decreased by scrolling when you hover the element.

You can reset the former by CSS and reset the latter by JavaScript but you can’t use it easily.

What is inputmode

Web technology for developers > HTML: Hypertext Markup Language > Global attributes > inputmode

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:

inputmode is a attribute which allow us to control browser keyboard.The value you can set are none, text, decimal, numeric, tel, search, email, url. Let’s check how these value affect.I checked these browsers.

Safari - iOS 13 iPhone 8 (simulator)
Chrome - Android 10 Pixel 3a
Chrome - windows 10 Surface Go (tablet)

This browser below didn’t support it at this moment.

Edge - windows 10 Surface Go (table)

inputmode=none

<input type="text" inputmode="none">

The value if you implement own software keyboard will not show system keyboard but…

Safari - iOS 13 iPhone 8 (simulator)
Edge - windows 10 Surface Go (tablet)
Chrome - windows 10 Surface Go (tablet)

These browsers show system keyboard.

inputmode=text

<input type="text" inputmode="text">

inputmode=decimal

<input type="text" inputmode="decimal">

This value shows keyboard which allow user type decimal easily (not only number but also .).

inputmode=numeric

<input type="text" inputmode="numeric">

inputmode=tel

<input type="text" inputmode="tel">

This value shows keyboard which allow user type phone number easily such as +, * and #.

inputmode=search

<input type="text" inputmode="search">

inputmode=email

<input type="text" inputmode="email">

This value shows keyboard which allow user type email easily such as alphabet and @.

inputmode=url

<input type="text" inputmode="url">

This value shows keyboard which allow user type URL easily such as / and .com.

Notes

You can control browser keyboard using inputmode but this doesn’t mean that you can control the value which user will type.For example, you can show user email specialized keyboard using inputmode=email but user can still input email invalid value.So you need to validate values user input.

Browser Support

https://caniuse.com/#feat=input-inputmode

Demo

https://codepen.io/Tkashiro/full/dyyROPJ

What's new in Chrome DevTools 2019

Tomoyuki Kashiro — Sat, 01 Jun 2019 00:00:00 +0000

I like What’s new in Chrome DevTools session in Google I/O to catch up latest updates!But unfortunately there was not that session in Google I/O 2019… so that I made it by myself !

Let’s get started!

JavaScript

Eager Evaluation (v68) [watch on youtube]

There is Eager evaluation option in Settings in console panel. You can see result before execution if you turn it ON.

It might be useful when you write regular expression.This feature can be used in Canary version before but now everyone can use it in standard version of Chrome.

Argument Hints (v68) [watch on youtube]

Funcnton parameter hints is shown in console panel while you typing.

Autocomplete After Invoking Functions (v68) [watch on youtube]

Autocomplete is shown for function return value.

Live Expressions in the console (v70) [watch on youtube]

You can set Live Expression statement in console panel.In this case activeElement will be change eveytime you change focus element.

Store DOM nodes as global variables (v71) [watch on youtube]

You can set the element as javascript global variable by selecting Store as global variable in context menu.

The element will be set as temp${N}.

Logpoint (v73) [watch on youtube]

Common debugging pattern for Front-end developer is write console.log -> execute javascript -> remove console.log.Now you don’t need to edit code for it!!

You can put logpoint to statement in source panel.

Element

Detailed tooltips when inspecting nodes (v73) [watch on youtube]

The detail of element is shown when you select it in element panel.

AAA contrast ratio line in the Color Picker (v73) [watch on youtube]

You can check current Contrast ratio and recommendation for it.

You can check for more detail about Contrast ratio.

Accessible Styles

Highlight all nodes affected by CSS property (v74) [watch on youtube]

When you edit css property the elements which same css property apply to will be highlighted.The margin in p elements are highlighted while editing that css property in this case.

Performance

Performance metrics in the Timings section (v72) [watch on youtube]

You can check performance metrics such as First Pain, First Contentful Paint in Network panel.

Long tasks in performance recordings (v74) [watch on youtube]

You can see Long Task in Network panel.The tasks have red triangle label at upper right.

In the end

There are bunch of updates!Thank you for best effort of ChromeDevtools team!!!!

I made site where you can check all updates by version basis or feature basis.

Check it out !!

https://chromedevtools.fun/

AMP to PWA for Gatsby

Tomoyuki Kashiro — Sun, 17 Feb 2019 00:00:00 +0000

This post was originally published at AMP to PWA for Gatsby.

What’s AMP to PWA

It’s also known as Preload your Progressive Web App from your AMP pages.

A good strategy is to make the entry point into your site an AMP page, then warm up the PWA behind the scenes and switch to it for the onward journey:

For more detail plz check AMP official article.

Goal of this article

I’ll explain how to implement it for blog using Gatsby.

Prepare Blog
Change article path
Prepare AMP generation
Add Service Worker installer in AMP for Non-AMP page
Add AMP validation in Test (optional)
Build

Prepare Blog

$ npm install -g gatsby-cli
$ gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
$ cd my-blog-starter/

Change article path

By default, Blog articles locate in root (e.g. /hello-world, /hi-folks). We want to publish Non-AMP article and AMP article so let’s separate directories like this.

Non-AMP : /posts
AMP : /amp/posts

At first, Change Non-AMP publish path.

Change build destination of post at gatsby-node.js

- Change path in meta tags like `canonical` at src/components/seo.js

Change link path at contents

src/pages/index.js
src/templates/blog-post.js
- Change path in RSS at gatsby-config.js

Prepare AMP generation

To generate AMP page from HTML I use gatsby-plugin-html2amp. This plugin allow you to generate AMP page using regular HTML so all you have to do is to install it and add configuration !

$ npm install --save gatsby-plugin-html2amp

and add configuration.

Add plugin configuration at gatsby-config.js
Add amphtml meta tag at src/components/seo.js
Add Google analytics settings for AMP at static/gaConfig.json

Add Service Worker installer in AMP for Non-AMP page

This is the most important key point of this strategy. Once user access AMP page this site starts installing service worker to cache resources for Non-AMP page.

After installation and user clicks link which links to Non-AMP page, the page load instantly because most resources are cached.amp-install-serviceworker is AMP component for that.

Fortunately, gatsby-plugin-html2amp already has integration for it so what you need is to add configuration only !!

Make service worker installer page at static/amp-install-serviceworker.html (new file)
Add gatsby-plugin-html2amp configuration at gatsby-config.js

Add AMP validation in Test

This is optional. Let’s add test to check validation for AMP page.

$ npm install --save-dev amphtml-validator

Add test command at pacakge.json
Run test by following command

$ npm test

Build both

Note that gatsby-plugin-html2amp generate AMP in build process only so when you run npm run develop you can not browse AMP page. When you check Non-AMP and AMP page run following command.

$ npm run build
$ npm run serve

Sample

I made Sample project here.

AMP ⚡ using Gatsby

Tomoyuki Kashiro — Sun, 18 Nov 2018 07:48:04 +0000

This post was originally published at AMP ⚡ using Gatsby.

I created gatsby plugin (called gatsby-plugin-html2amp) for generating AMP (Accelerated Mobile Pages). I try to explain how to use it.

It’s easy to use 😁

Prepare Gatsby blog

$ npm install --global gatsby-cli
$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

then check the blog

$ cd gatsby-blog
$ npm start

# Access http://localhost:8000

Make it AMP !

Add plugin

$ npm install --save gatsby-plugin-html2amp

Set plugin configuration to gatsby-config.js at bottom of file.

{
  resolve: 'gatsby-plugin-html2amp',
  options: {
    files: ['**/*.html'],
    dist: 'public/amp'
  }
}

Modify blog post template

To make your post page valid as AMP add canonical in <head>

src/templates/blog-post.js

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      fields { // ⚡ Add this fields.slug into Graphql
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

then add canonical

src/templates/blog-post.js

<Helmet
  htmlAttributes={{ lang: 'en' }}
  meta={[{ name: 'description', content: siteDescription }]}
  title={`${post.frontmatter.title} | ${siteTitle}`}>
  <link rel="canonical" href={`${post.fields.slug}`} /> // ⚡ Add canonical
</Helmet>

Generate

$ npm run build

Now you can see AMP source at public/amp ⚡

Do not use Number.toFixed for Rounding

Tomoyuki Kashiro — Sun, 18 Nov 2018 00:00:00 +0000

This post was originally published at Do not use Number.toFixed for Rounding.

Sometimes I saw Use-case that developer use Number.prototype.toFixed for rounding. But It is not correct in some reasons. I try to explain why it’s not correct. 😥

Return String instead of Number/Float

The result of toFixed is String so it case unexpected result if you calculate.

// What you expect// 1.1 + 1 = 2.1
// Result1.12.toFixed(1) + 1// '1.1' + 1 = '1.11'

Not accurate in one case

You can pass digits option to toFixed([digits]) it means …

digits

Optional. The number of digits to appear after the decimal point; this may be a value between 0 and 20, inclusive, and implementations may optionally support a larger range of values. If this argument is omitted, it is treated as 0.

For example you run 1.1N.toFixd(1) the return value would be 1.N.Okay let’s see what’s happened in real world example.

1.150.toFixed(1) // -> '1.1' expected '1.2' because of rounding
1.15.toFixed(1) // -> '1.1' expected '1.2' because of rounding
1.151.toFixed(1) // -> '1.2'

To rounding the number which next to digits should be greater than 0. 💩

How to use Google PageSpeed Test in CI

Tomoyuki Kashiro — Tue, 04 Jul 2017 00:00:00 +0000

This post was originally published at How to use Google PageSpeed Test in CI.

Motivation

You know site performance is important for SEO, Conversion but it is difficult to find how to test it continuously. (It was difficult for me…). So I will explain how to set up peformance test in CI using Google PageSpeed Insights.

Outline

I will explain continuous performance test settings using Google PageSpeed Insights in Travis CI with heroku. Application I want to test is this blog which is generated by Pelican so the application is totally static site (no need DB and server side program).

Heroku app
Travis CI connected with github repository

Basic flow is below.

- 1 Make PR in github repository

2 Start test process in Travis CI

1 Install depandencies
2 Build application
3 Push built application to heroku
4 Run Google Page Insight test

Prepare heroku

First step is setup heroku for test the application.

$ mkdir ${app_name}
$ cd ${app_name}
$ git init
$ heroku apps:create ${app_name}

This article could be good reference to make static server on heroku !

Edit CI settings

Second step is setup travis CI. You can see travis CI settings for repository like below.

https://travis-ci.org/${account_name}/${repository_name}/settings

You need those settings in Environment Variables section.

HEROKU_API_KEY
TEST_SITE_GIT_REMOTE
TEST_SITE_URL ### HEROKU_API_KEY

Heroku app is git repository and it’s private so to clone it in travis server you need this token. You can see it thru this command.

bash $ heroku auth:token

TEST_SITE_GIT_REMOTE

heroku app git url. git protocol would be better git@heroku.com:${app_name}.git instead of https protocol not to be asked id/password everytime.

TEST_SITE_URL

heroku app url to test.

Edit CI tasks

Basic travis.yml is here. You need replace ${your install process here} and ${your build process here} for your application

sudo: required
language: node_js
node_js:
  - "7"
install:
  - ${your install process here}
  - npm install
  - scripts/setup_heroku.sh
  - git clone $TEST_SITE_GIT_REMOTE output
before_script:
  - ${your build process here}
  - cd output && git add --ignore-removal . && git commit -m 'deploy for test' && git push origin master -f && cd -
script:
  - npm test $TEST_SITE_URL
after_script:
  - heroku keys:clear

setup_heroku.sh

This script add ssh private key to heroku to clone repository thu heroku CLI.

I use nodejs heroku command which is not recommended by heroku because I could not install other installation methods… If you have idea let me know!

npm test $TEST_SITE_URL

"devDependencies": {
    "psi": "^3.0.0"
  }, 
  "scripts": {
    "test": "npm run test_psi",
    "test_psi": "psi --strategy mobile"
  },

psi is npm module to do Google pageSpeed Insights.

Reference

You can check example here

Let me know if you have question !!

Add ticket number to git commit automatically

Tomoyuki Kashiro — Mon, 09 Jan 2017 00:00:00 +0000

This post was originally published at Add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story). But every time when you commit copy and paste that of ticket number is annoy…

So I created a script using git hook to add ticket number to your commit automatically.

Script

$ mkdir -p ~/.git-templates/hooks
$ touch ~/.git-templates/hooks/prepare-commit-msg
$ chmod u+x ~/.git-templates/hooks/prepare-commit-msg

Then you can copy & paste this script to prepare-commit-msg

#!/bin/sh

LF=$'\\\x0A'
BRANCH_NAME=$(git symbolic-ref --short HEAD)

if [[$BRANCH_NAME =~ .*\/[0-9]* ]]; then
  PREFIX=$(echo $BRANCH_NAME | sed -e 's/\(.*\)\/\([0-9]*\)/\1/')
  NUMBER=$(echo $BRANCH_NAME | sed -e 's/\(.*\)\/\([0-9]*\)/\2/')
  if [$PREFIX = 'story']; then
      MESSAGE="[#$NUMBER]"
  else
      MESSAGE="GH-$NUMBER"
  fi
  if [$NUMBER]; then
    sed -i.back "1s/^/$LF$LF$MESSAGE$LF/" "$1"
  fi
fi

Configuration

To enable this script run this command.

$ git config core.hooksPath ~/.git-templates/hooks/

Usage

This script expects that your branch is named using this format

Pivotal Tracker

story/1111

Github

issue/1111
fix/1111
feature/1111

When every time you commit script add that number using this format to you commit !!

Pivotal Tracker

[#1111]

Github

GH-1111

Things to be aware of when change Capybara default_wait_time

Tomoyuki Kashiro — Thu, 14 May 2015 00:00:00 +0000

This post was originally published at Things to be aware of when change Capybara default_wait_time

About `Capybara.default_wait_time`

According to api document…

find will wait for a set amount of time and continuously retry finding the element until either the element is found or the time expires. The length of time find will wait is controlled through Capybara.default_wait_time and defaults to 2 seconds.

ATTENTION

You had better not set much time to Capybara_default_wait_time.

For example, if you set 10 seconds to Capybara.default_wait_time when you want to check the element dose not exist. Test time can be long. Because Capybara wait to check the element dose not exist in each test.

# in rspec.rb
Capybara.default_wait_time = 10

# in feature test
expect(page).to have_no_selector(:css, "p a#doesnotexist") # wait 10 seconds

Solution

If you need more than 2 seconds(default value in Capybara.default_wait_time) to wait to check you can set wait option to find instead.

expect(page).to have_selector(:css, "p a#doesnotexist", wait: 3)

Forem: Tomoyuki Kashiro

Use Page Object Pattern in React Component Tests

What is the Page Object Pattern

The example of Page Object Pattern

How to use Page Object Pattern in React Component tests

CSS MdiaQueryのmin-widthとmax-widthどちらを使う？

はじめに

結論

理由1：CSSは画面サイズが大きくなるに連れて、記述量が増える

理由2：CSSはスタイルのキャンセルが手間

まとめ

さいごに

CookieのSameSite Attributeとは？

SameSite Cookies とは？

SameSite Cookie が必要とされる理由

SameSite の確認方法

ネットワークタブ

アプリケーションタブ

デモを使って確認

デモ結果

SameSiteの利用パターン

Cookieで認証管理しており、別ドメインからリクエストを行わないサービス

Cookieで認証管理しており、別ドメインからリクエストを行うサービス

忘れがちなパターンの Chrome extension

SameSite未指定の場合、SameSite=Laxとして扱われることの確認方法

Consider Hover UX for Tablet Device

What’s the matter?

What should we do?

Common mistake

How do we detect the devices?

Prior knowledge

Pointing Device Quality

Hover Capability

Rare Interaction Capabilities

How can we use it?

How to query in JavaScript

Notes

References

How to control browser keyboard

Control browser keyboard using input[type]

What is inputmode

inputmode=none

inputmode=text

inputmode=decimal

inputmode=numeric

inputmode=tel

inputmode=search

inputmode=email

inputmode=url

Notes

Browser Support

Demo

What's new in Chrome DevTools 2019

JavaScript

Eager Evaluation (v68) [watch on youtube]

Argument Hints (v68) [watch on youtube]

Autocomplete After Invoking Functions (v68) [watch on youtube]

Live Expressions in the console (v70) [watch on youtube]

Store DOM nodes as global variables (v71) [watch on youtube]

Logpoint (v73) [watch on youtube]

Element

Detailed tooltips when inspecting nodes (v73) [watch on youtube]

AAA contrast ratio line in the Color Picker (v73) [watch on youtube]

Highlight all nodes affected by CSS property (v74) [watch on youtube]

Performance

Performance metrics in the Timings section (v72) [watch on youtube]

Long tasks in performance recordings (v74) [watch on youtube]

In the end

AMP to PWA for Gatsby

What’s AMP to PWA

Goal of this article

Table of Contents

Prepare Blog

Change article path

- Change path in meta tags like canonical at src/components/seo.js

Prepare AMP generation

Add Service Worker installer in AMP for Non-AMP page

Add AMP validation in Test

Build both

Sample

- Change path in meta tags like `canonical` at src/components/seo.js

About `Capybara.default_wait_time`