へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

iPhone5(iOS8.3)+SafariのときだけReferenceError: Can't find variable: webpackJsonpとか言われてwebpack-dev-serverが動かないときにやること

Kind of the following error.

f:id:haruharu1:20180214183714p:plain

To solve it, update your webpack-dev-server NOW!!

github.com

I wish I didn't care devices worked on older-version iOS.

How to disable the cursor guide (or the stuff rendering on the current cursor line) through other panes in tmux on iTerm2

It's a tip to disable very annoying and frustrating funny cursor highlighting that those who have found this article may know.

f:id:haruharu1:20180209155323p:plain

This issue was caused by a feature of iTerm2, Cursor Finery at Documentation - iTerm2 - macOS Terminal Replacement

You can simply disable this highlighting by pressing Alt + Command + ; if you use a Mac.

This command is actually here the below shows. (Show Cursor Guide)

f:id:haruharu1:20180209155659p:plain

It has spoiled my time a little!

Annoying!! :(

PS

f:id:haruharu1:20180214105044p:plain

The default terminal is good to use only if I change the background color pro version. It's nice!

都民にピンとくるように「東京ドーム何個分」をなんとかしてみた(面積編)

もの 面積(m2) 東京ドーム
一般的な3LDK 70 約700個で東京ドーム1個分
テニスコート 260 約200個で東京ドーム1個分
サッカーコート 7140 7個で東京ドーム1個分
東京ドームのグラウンドの面積 13,000 東京ドームの約30%
東京ドーム1個分(建築面積) 46,755 1個分
日比谷公園 16万 約3個分
歌舞伎町 34万 約8個分
東京ディズニーランド 51万 約10個分
銀座 87万 約20個分
皇居の総面積 230万 約50個分
お台場 300万 約70個分
東京都中央区 1,015万 約220個分
新宿区 1,822万 約400個分
香川県 18億7600万 約4万個分
地球 148京8900兆 約32億個分

SlackのリンクがChromeでうまく開かれない問題について

Chromeをアップグレードしたら直った www.david-merrick.com

どういうことやねん

ブラウザのJavaScriptコンソール(DevTools)で扱っている値をファイル出力する

まぁ要はスクレイピングに使うんだけど、スクレイピング以外にも応用できたり、ログインしなきゃいけない場合めんどくさいのでこれだと便利。

応用するとコンソール間で別PCと通信できそう(意味ないけど)

↓文字列の配列を与えるとファイルが作られてダウンロードがはじまるやつ

const createFile = (rows) => {
  let csvContent = "data:text/csv;charset=utf-8,"
  rows.forEach(row => {
    csvContent += row + "\r\n"
  })

  const encodedUri = encodeURI(csvContent)

  let link = document.createElement("a")
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my_data.txt")
  document.body.appendChild(link)

  link.click()
}

ちょっとした作業のときに役立つ

data = []
document.querySelectorAll('table#table01 td:nth-child(2) a').forEach(el => data.push(el.innerHTML))
createFile(data)

f:id:haruharu1:20180105150425p:plain

↓このサイトで実際に動かせる(2018/01/05現在)

世界の名目GDP(USドル)ランキング - 世界経済のネタ帳

f:id:haruharu1:20180105150607p:plain

f:id:haruharu1:20180105151627p:plain

text/csvになってるので、気になる人は好きなマイムタイプにかえてちょんまげ🍰

Re-Mixing verbose Actions, Action Creators, dispatching codes in Component, and switching codes in Reducer.

Re-mixing verbose Actions, Action Creators, dispatching codes in Component, and switching codes in Reducer.

When we usually change the state of the store of Redux with React, we write Action, Action Creator, connect them with Container Component, then write codes in reducer.

This way is beautiful and it turns more clear than we struggled in the callback hell before, however it's too long to write. That makes us not enjoy it :(

Even if I want to change some trivial states, I should create an action, an action creator, add some changes in the component, then write codes only to change the state.

The following is the example.

actions.js

import createTypes from 'redux-create-action-types'
export const AT = createTypes('CLICK1', 'CLICK2', 'CLICK3')

action_creators.js

import { AT } from './actions'
export const click1 = () => ({ type: AT.CLICK1 })
export const click2 = () => ({ type: AT.CLICK2 })
export const click3 = () => ({ type: AT.CLICK3 })

the part of reducer.js

switch (action.type) {
  case CLICK1: {
    return Object.assign({}, state, { click1IsClicked: !state.click1IsClicked })
  }
  case CLICK2: {
    return Object.assign({}, state, { click2IsClicked: !state.click2IsClicked })
  }
  case CLICK3: {
    return Object.assign({}, state, { click3IsClicked: !state.click3IsClicked })
  }
}

the part of App.js

import { CLICK1, CLICK2, CLICK3 } from './action_creators'

~~~
const Heavy = ({ click1, click2, click3, reducer }) => (
  <div>
    <button onClick={e => click1()}>Button 1</button>
    <button onClick={e => click2()}>Button 2</button>
    <button onClick={e => click3()}>Button 3</button>
    {Object.keys(reducer).map(s => { if(reducer[s]) return <div key={s}>{s}</div>})}
  </div>
)

~~~
const mapDispatchToProps = {
  click1, click2, click3
}

Is there a need to write codes as such verbosely? Can I make it shorter?

Yes I've done it. Isn't it more clear than that?

import { dispactreducer } from './dispactreducer'

~~~
const Heavy = ({ dispactreducer, reducer }) => (
    <div>
      <button onClick={e => { dispactreducer('reducer', { button1IsClicked: !reducer.button1IsClicked }) }}>Button 1</button>
      <button onClick={e => { dispactreducer('reducer', { button2IsClicked: !reducer.button2IsClicked }) }}>Button 2</button>
      <button onClick={e => { dispactreducer('reducer', { button3IsClicked: !reducer.button3IsClicked }) }}>Button 3</button>
      {Object.keys(reducer).map(s => { if(reducer[s]) return <div key={s}>{s}</div>})}
    </div>
)

~~~
const mapDispatchToProps = {
  dispactreducer
}

This totally equals every codes I mentioned the above, the former codes.

This dispactreducer means dispatch + action creator + reducer.

That is why I use them while writing tiny codes and when I think it's enough to write like a direct access to the store.

And it would never violate the rule of the Redux, there are still in the rules.

How it works

Demo for the former

https://www.webpackbin.com/bins/-L1Fa9XXsqDXyZvAw1xy

Demo for the latter

https://www.webpackbin.com/bins/-L1FhpdeVNre0WTgO0x3

It's the core of the tricks. Enjoy them! :)

const TRIGGER_NAME = 'KERORIN_'

// Action Creator
export const dispactreducer = (reducerName, value) => {
  const ACTION_NAME = TRIGGER_NAME + reducerName + '_' + JSON.stringify(value)
  return ({ type: ACTION_NAME, reducerName, value })
}

// Reducer Enhancer
export const hookReducer = (reducer) => {
  const hooked = (state, action) => {
    if (action.type.startsWith(TRIGGER_NAME)) {
      if (reducer.name === action.reducerName) {
        const nextState = Object.assign({}, state, action.value)
        return nextState
      }
    }

    return reducer(state, action)
  }
  return hooked
}

Of course since it's not completed yet and I didn't use enough times, if it has some deficit, (I presume it has a lot) give me a comment.

If you can do, I'll fix them as soon as possible except for if I can afford to do :)

応用情報技術者試験に合格したのでなんかいろいろ書くよ

ぼく

さっき28歳になった。

プログラミング歴は4年1ヶ月

結果

午前61%・午後61%とかいうギリギリで受かっていた。

応用情報の感想

普通に難しかった。とにかく範囲が広い。なんじゃそれってものが多かった。圧倒的に自分に知識が足りないことがわかって悲しかった。

特にOSのしくみ、ハードウェア、ネットワークとか、なんかだいたい全部やべぇって感じだった。マネジメントの知識?会計の知識?知るか!みたいな

よくこれでプログラマできてるなっていう感じの悲しみを味わった。

6割取れてるけど、マークシートなので、確信持ってこれって選べたのはたぶん2割ぐらい。あとは「たぶんこれかなぁ?」とか「とりあえずこれは無い」とかで選択肢絞った結果。

泣きたい。

勉強時間

全くしなかった。

しいて言うなら3年ぐらい前に2回分ぐらい過去問解いてた(過去にこのブログでなんか言及してる)

対策なしで受かったのは午後にRESTの問題が出て、「うっはああああ完璧にわかるううううう」ってのがあったからだと思う。

資格取った感想

合格発表日に胃腸炎でダウンしてたので嬉しさがなかった。「お腹痛いお腹痛いお腹痛い。うわ合格してた。ギリギリだな。うわお腹痛い。もう発表見たし寝よ……」みたいな。

一応応用情報も基本情報も取る意味はあると思う。バカにできないし、知らないこと多すぎるので自分が知らない点を見つけるという点でかなり意味のある試験。 問題もかなり練られている(まぁ国家資格だし……)

応用情報持ってると警視庁で巡査部長相当の捜査官になる試験を受けることができるらしい。月給低いな……

www.keishicho.metro.tokyo.jp

カーネル周りとネットワーク周りがかなり意味不明なので、ちゃんと重点的に勉強しなきゃなと思った。あとデータベース。もうずっとおろそかにしてる。

とりあえず今年はサボってた気がするから、来年はちゃんと勉強するぞい!