- Shadowing
- Reading books in English
- Anki
- Watching tech conference videos on YouTube
- Twitter:@pirosikick
サイボウズ株式会社 フロントエンドエキスパートチーム所属。Webフロントエンドに関するパフォーマンスやコードの改善、提供しているnpmパッケージのメンテナンス、Web技術のR&Dに従事。 HTML5の流行をきっかけにWeb開発にのめり込み、プライベートでもWeb開発が好きなエンジニアです。
Web Application Engineer at Frontend Expert Team of Cybozu, Inc. Love JavaScript and Web Developmemnt.
const postcss = require("postcss"); | |
// 行番号・列番号をソースコード上の位置(0 〜 ソースコード.length - 1)に変換 | |
const lineColumnToIndex = (coverage, line, column) => { | |
// 各行の改行文字を含む文字数 | |
const countPerLine = coverage.text.split("\n").map((lineStr, index, lines) => | |
// 最終行以外は改行文字分の+1をする | |
index === lines.length - 1 ? lineStr.length : lineStr.length + 1 | |
); | |
// 配列の要素を全て足す関数 |
https://martinfowler.com/articles/micro-frontends.html
- Incremental upgrades
- micro frontendではそれぞれのパーツに対して意思決定できるし、それぞれのパーツが理にかなうと思ったタイミングでアーキテクチャや依存関係、UXのアップグレードが可能
- Simple, decoupled codebases
- 単一のモノリスなフロントエンドよりソースコードが小さくなり、シンプルで開発者が取り組みやすくなる
Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.
render関数と同じですが、ReactDOMServerによって描画されたHTMLコンテンツを含むコンテナをhydrateするのに利用される。Reactはイベントリスナを既存のマークアップにアタッチを試みるするだろう
React expects that the rendered content is identical between the server and the client. It can patch up differences in text content (such as timestamps), but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
Reactは、サーバーとクライアントで描画されるコンテンツが一致することを期待している。テキストコンテンツの違いを修正する事もできるが、ミスマッチをバグとして扱い修正すべきである。開発モードでは、Reactはhydration時のミスマッチに警告を出力する。ミスマッチ時の属性の違いを修正する保証はない。この挙動はパフォーマンス上重要で、大抵のアプリでミスマッチはレアケースで、全てのマークアップを比較するのは非常にコストが高い
<body> | |
<h1>hoge</h1> | |
</body> |
<html> | |
<head> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> | |
</head> | |
<body ng-app> | |
<p> | |
<input type="text" ng-model="yourName" /> | |
</p> | |
<h2>{{ yourName }}</h2> | |
</body> |
<?php | |
function context(Closure $function) | |
{ | |
Context::create($function)->run(); | |
} | |
class Context | |
{ | |
private static $_chain = []; |