Skip to content

Instantly share code, notes, and snippets.

View pirosikick's full-sized avatar

Hiroyuki ANAI pirosikick

51 followers · 32 following
  • Fukuoka, Japan
View GitHub Profile
@pirosikick
pirosikick / felt-3.md
Created January 22, 2020 05:14

A look-back on my english learning in 2019

What I did in 2019

  • Shadowing
  • Reading books in English
  • Anki
  • Watching tech conference videos on YouTube

Shadowing

@pirosikick
pirosikick / profile.md
Last active August 30, 2019 01:23

穴井宏幸

サイボウズ株式会社 フロントエンドエキスパートチーム所属。Webフロントエンドに関するパフォーマンスやコードの改善、提供しているnpmパッケージのメンテナンス、Web技術のR&Dに従事。 HTML5の流行をきっかけにWeb開発にのめり込み、プライベートでもWeb開発が好きなエンジニアです。

Web Application Engineer at Frontend Expert Team of Cybozu, Inc. Love JavaScript and Web Developmemnt.

@pirosikick
pirosikick / removeUnusedCSS.js
Last active November 17, 2019 08:31
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
);
// 配列の要素を全て足す関数
@pirosikick
pirosikick / martinfowler-com-micro-frontend.md
Created June 28, 2019 02:16

Micro Frontends

https://martinfowler.com/articles/micro-frontends.html

micro frontendの利点

  • Incremental upgrades
    • micro frontendではそれぞれのパーツに対して意思決定できるし、それぞれのパーツが理にかなうと思ったタイミングでアーキテクチャや依存関係、UXのアップグレードが可能
  • Simple, decoupled codebases
    • 単一のモノリスなフロントエンドよりソースコードが小さくなり、シンプルで開発者が取り組みやすくなる
@pirosikick
pirosikick / ava-to-jest.md
Created January 11, 2019 08:06

AVAからJestへの移行

大枠の書き方

テストケースの定義

AVAのtest('コメント', () => {/* テスト内容 */});という書き方（xUnit形式）はJestでも可能です。AVAではimport test from 'ava';という感じでtest関数をインポートしていましたが、Jestではグローバル変数として定義されているのでインポートは不要です。test関数だけでなく、Jestが提供するAPIは全てグローバル変数で定義されているので、importせずに参照できます。




  


  




    


          
    

      

        
        

          

              @pirosikick
          

          

            
                pirosikick
                / reydrate.md
            
            

              Last active
              November 26, 2017 16:02
            

          

        

      

        

  

      

    


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時のミスマッチに警告を出力する。ミスマッチ時の属性の違いを修正する保証はない。この挙動はパフォーマンス上重要で、大抵のアプリでミスマッチはレアケースで、全てのマークアップを比較するのは非常にコストが高い



  


  




    


          
    

      

        
        

          

              @pirosikick
          

          

            
                pirosikick
                / hoge.html
            
            

              Created
              October 25, 2013 16:45
            

              
                test
              
          

        

      

        

  

    
    


        



  


  

        

          
          <body>
        

        

          
            <h1>hoge</h1>
        

        

          
          </body>
        

  





    


  




    


          
    

      

        
        

          

              @pirosikick
          

          

            
                pirosikick
                / demo1.html
            
            

              Created
              April 4, 2013 17:23
            

          

        

      

        

  

    
    


        



  


  

        

          
          <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>
        

  





    


  




    


          
    

      

        
        

          

              @pirosikick
          

          

            
                pirosikick
                / context.php
            
            

              Created
              April 3, 2013 16:38
            

              
                PHP5.4のClosure::bindToを使ってJavaScriptのクロージャ的なものを作った。
              
          

        

      

        

  

    
    


        



  


  

        

          
          <?php
        

        

          
          

        

        

          
          function context(Closure $function)
        

        

          
          {
        

        

          
              Context::create($function)->run();
        

        

          
          }
        

        

          
          

        

        

          
          class Context
        

        

          
          {
        

        

          
              private static $_chain = [];