kosamari

ServiceWorker for github pages

This is a ServiceWorker template to turn small github pages into offline ready app.

Why ?

Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like this one).
Often these "apps" are just an index.html file with all the nessesary CSS and JavaScript in it (or maybe 2-3 html/css/js files). I wanted to cache these files so that I can access my tools offline as well.

Notes

Make sure your github pages have HTTPS enforced, you can check Settings > GitHub Pages > Enforce HTTPS of your repository.

kosamari

Googleに入るまでの話 (Developer Relations)

コンテキスト: https://togetter.com/li/1331865

前提条件

部署

グーグルジャパンではなくてUSの本社での採用の話。私が受けたのはSoftware EngineerではなくてDeveloper Advocate。Engineering組織の下についているのでコーディング面接有り。ただし評価項目がSWEとは異なる。

英語

kosamari

/*
 * CHALLANGE:  
 * Cache `index.html` file using service worker.
 *
 * This bit of code is included in <script> tag of index.html
 * if (navigator.serviceWorker) {
 *   navigator.serviceWorker.register('serviceworker.js', {scope: '/'})
 * }
 *
 */

kosamari

function lexer (code) {
  return code.split(/\s+/)
          .filter(function (t) { return t.length > 0 })
          .map(function (t) {
            return isNaN(t)
                    ? {type: 'word', value: t}
                    : {type: 'number', value: t}
          })
}

kosamari

<!-- This, screen reader reads the chinese character too like "chinese character ___, kan, chinese character___, ji" -->
<ruby>
  漢<rp>(</rp><rt>Kan</rt><rp>)</rp>
  字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

<!-- This, just reads "kan ji" -->
<ruby>
  <span aria-hidden="true">漢</span> <rp>(</rp><rt>Kan</rt><rp>)</rp>
  <span aria-hidden="true">字</span> <rp>(</rp><rt>ji</rt><rp>)</rp>

kosamari

_.mixin({
  sum : function(data){
    return  _.reduce(data, function(memo, num){ return memo + num; }, 0);
  },
  mean : function(data){
  return this.sum(data)/data.length
  },
  median : function(data){
  return this.percentile(data,50);
  },

kosamari

function transformer (ast) {
  var svg_ast = {
    tag : 'svg',
    attr: {
      width: 100, height: 100, viewBox: '0 0 100 100',
      xmlns: 'http://www.w3.org/2000/svg', version: '1.1'
    },
    body:[]
  }
  

kosamari

/*
What is the optimal way to print values of 2 arrays alternately? (every 5 sec)
  * Items in both arrays could change at any given moment
  * update to each array needs to be applied imminently
  * if array is empty, it will not print any value (and move to the other array)

So if you start with following arrays 
  var arr0 = ['1','2','3']
  var arr1 = ['a','b','c']
It would start printing

kosamari

AMA 05102017

I'm on my way back to New York from Berlin, trying to not sleep on flight so I can beat jet lag. Here are some questions I answered to stay awake.

How are you? (asked by @johest)

I'm great. I just survived JSConfEU weekend and gave one meetup talk in Berlin. On my way back home to New York City.

What's your drawing setup? (so many asked this I can't even keep track of who did)

machine: iPad Pro 9.7 inch with matte screen protector
stylus: apple pencil
app: "Paper" by @FiftyThree (I use diagram tool almost exclusively)

kosamari

var sbn = {}
sbn.VERSION = '0.0.1'
sbn.lexer = lexer
sbn.parser = parser
sbn.transformer = transformer
sbn.generator = generator

sbn.compile = function (code) {
  return this.generator(this.transformer(this.parser(this.lexer(code))))
}