Makoto Tateno makotot

2020/5/31追記: 自分用のメモに書いていたつもりだったのですが、たくさんのスターを頂けてとても嬉しいです。
と同時に、書きかけで中途半端な状態のドキュメントをご覧いただくことになっており、大変心苦しく思っています。

このドキュメントを完成させるために、今後以下のような更新を予定しています。

TODO部分を埋める
書籍を基にした理論・原則パートと、実装例パートを分割
- 現在は4層のレイヤそれぞれごとに原則の確認→実装時の課題リスト→実装例という構成ですが、同じリポジトリへの言及箇所がバラバラになってしまう問題がありました。更新後は、実装時の課題リストを全て洗い出した後にまとめて実装を確認する構成とする予定です。

2021/1/22追記:

Tailwind CSS best practices

Utility classes

When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

Install Babel 7 and TypeScript

yarn add --dev \
  @babel/core \
  @babel/cli \
  @babel/preset-env \
  @babel/preset-typescript \
  typescript

`<script> async, defer, async defer, module, nomodule, src, inline` - the cheat sheet

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

Links:

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

Redux containers: `mapDispatchToProps`

This document details some tips and tricks for creating redux containers. Specifically, this document is looking at the mapDispatchToProps argument of the connect function from [react-redux][react-redux]. There are many ways to write the same thing in redux. This gist covers the various forms that mapDispatchToProps can take.

Webブラウザのウインドウのスクロール量を取得する

概要

ウインドウのスクロール量を取得するクラスブラウザなコードを考えます。

	const ACCESS_TOKEN = "token";
	const FILE_ID = "fileId";
	const NODE_ID = "Check the url for something like => 3%3A2";
	const container = document.getElementById("figma-container")

	function apiRequest(url) {
	return fetch(url, {
	method: 'GET',
	headers: { "x-figma-token": ACCESS_TOKEN }
	}).then(function(response) {

	/**
	* to augment missing styled-system types. @see here - https://tinyurl.com/y5e4bl3f
	*/

	// "wipe over" the existing module definitions in @types/styled-system with this declare
	declare module "styled-system" {


	// Type definitions for styled-system 4.2
	// Project: https://github.com/jxnblk/styled-system#readme