CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheightがautoに設定されている要素にtransitionを適用したい時です。 transitionを有効にする場合、始点と終点の値を100pxのように絶対値で指定するか、50%（もちろんheightなどで親のautoを引継いでしまっている場合はダメ）のように相対値で指定することはできるけど、autoだとtransitionが効かない。 // Stylus .foo width 200px height 0 transition height .2s &.opened height auto 上の例の場合

tl;dr - Amazon に入って 3 年が経ちましたが、この度転籍という形で Canada の Vancouver にある Amazon S3 開発チームに Systems Development Engineer として移ることになりました。 2010 年頃からずっとなりたいと思っていた北米での開発者の仕事(もちろん英語のみ)なので、本当に嬉しいです。AWS の Solutions Architect(SA)としてお客さんと向き合う仕事をじっくりさせてもらい、そこから実際に開発をしているチームに開発者として拠点も含めて移れるキャリアパスがあるんだよ、という一例になれましたので、SA になると自分の手を動かす機会が減ってしまうことを懸念している開発者の方の背中を押せたら幸いです。なお、2018 年 6 月頭に日本を出国予定で日本の会社も退職してしまうので、(旅行を除いて)日本に戻って

プロジェクトをリードする技術 http://kakakakakku.hatenablog.com/entry/2018/04/23/223304

こういったことは普段は連載に書くのだが今春からちょうど原稿の連載がなくなったのでここに置いておこうと思う。著者若林さんから帯のコメントを頼まれた「さよなら未来」という書籍について。 余談ですが本書にtofubeatsは怖い読者であると書かれているが、そっくりそのまま若林さんにも「読者」を「リスナー」と変えてお返ししたい・・・とゲラのpdfを読みながら強く思った。近所のロイホにて書籍でも再読了し、ここに感想を置いておく。ちなみに5月には大阪で本書について若林さんとトークイベントもあるのでよろしければ。 http://www.loft-prj.co.jp/schedule/west/86722 〜〜〜 WIRED誌面に初めて寄せさせていただいた文章で書いたのだが若林さんには出会って最初の方「世知辛いね〜」と何度も言われていた。それは沖縄の喫煙スペースだったり、代官山の薄暗いフレンチだったり(だ

Folio Scramble! #1 で話した redux best practiceの話です。

Twitterでこういうことを書いたら、そこそこ反応があった。 今のご時世、技術難易度が並ぐらい（一人でWebシステムが構築できる程度）で、2‐3人月ぐらいの小さなシステムを一人でヒアリング～実装～運用引き渡しができて、説明責任ちゃんと果たせれば、人月単価換算で80万円ぐらいは一杯転がってる（常にあるとは言ってない）し、その他要因で単価はもっと上がる— てるろー (@terurou) 2018年4月17日 意図通りには伝わらないだろうなぁと思いつつ、所詮Twitterだしなーと思いぶん投げたんだけど、想定してた範疇の誤解が広まってきたので、一応補足する。 「人月単価で80万円ぐらいの仕事」の難易度 ちゃんと書いてないから伝わらなくて当然といえば当然なんだけど、行間をちゃんと補うと、 エンドユーザー直案件 技術難易度的には、いわゆるマスタメンテナンス機能に毛の生えた程度のもの 一覧/詳細/編

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

社内勉強会のワークショップで使用した資料です

アプリケーション開発エンジニアが、OAuth 1.0 や OAuth 2.0、および OpenID Connect を活用したユーザ認可と認証機能を実装するにあたって、いろいろ調べた情報をベースに作成したものです。 これから認可・認証技術を学びたいという、特にアプリ開発エンジニアの助けになれば幸いです。Read less

先日、他社の開発の方々が、アジャイルに関する相談ということで、弊社にいるアジャイルに詳しい髪の長いおじさんに訪ねてきた。その中で、実感駆動開発の話になって、久しぶりに「本気（マジ）と真面目（マジメ）」の話を聞いた。 この話を聞いてから、人がプロダクトの価値について考えられるようになるにはどうしたらいいのか考えてみた。 TL;TRありきたりな回答だけれど、さっさとリリースして、さっさと使ってもらう。それをできるためのことを、もちろんリスクを下げつつ、できるようにするためのことを頑張ろう。 本気と真面目 人はドキュメントを前にして真面目な態度を取るが、動くソフトウェアを前にして本気になる。端的に言うと、人は仕様書などドキュメントを前にするとそれを徹底的に重箱の隅を突くようなレビュー（真面目）をしてしまうが、本当に欲しかったことに対して考え始める（本気）は実際のプロダクトを前にしてからという話だ

はじめに Heroku が oclif という CLI フレームワークをオープンソースとして公開したという記事を読みました。 Heroku CLI や Salesforce DX のベースにもなっているらしい。 どんなもんか触ってみます。 （oclif は (The) Open CLI Framework の略のようです。読み方がわからない。。。） oclif の特徴 手を動かす前に、どういった特徴があるのか公式ドキュメントに目を通してみます。 Features · oclif: The Open CLI Framework Super Speed コマンド実行時のオーバーヘッド（？）がほとんどなく、また依存パッケージもほとんどない 実行されるコマンドだけ require されるので、たくさんのコマンドからなる巨大 CLI でも単一コマンドの CLI と速度が変わらない CLI Gener

TOKYO FRONTEND 2018 - FRONTEND開発最前線 2018年に求められる力 Session02 スライド https://techplay.jp/event/655683

先日飲み会で技術的負債についての雑談をしていた。結構いろいろな側面の話をしていたのだけど、技術的負債って一括りにしているのが今はあんまり良くなくて、負債の性質によって技術的奨学金、技術的FX、技術的年金などと言葉を変えると良いのではみたいな半分冗談で会話をしていた。 いろんな問題が技術的負債という一言にまとめられてしまっているので、負債の性質に合わせて、技術的奨学金、技術的FX、技術的年金、など用語を分けると良いのではないか、という話をした— 趣味はマリンスポーツです (@hitode909) 2018年3月27日 技術的負債について - hitode909の日記 それで技術的負債のパターンを見つけて、それによりどういう悪影響があるか、それがなぜ起こるのか、どう返却するかについて考えておくと良いのではと思ったので、今日思いついた3つのパターンをメモしておく。 思いついたパターンは3つ。 変

とりあえず動けばいい、の精神でコードを書ける個人開発とは違い、仕事やオープンソースプロジェクトにおけるコーディングでは、「他人が読むコード」を意識して書く必要があります。 他人が読むのですから、もちろんわかりやすいコードでなくてはなりません。でも、「わかりやすい」とは何でしょう。どうしたら実現できるのでしょう。 この記事では、他人が読む可能性があるコードを書くときに気をつけていた方がいい事項について、いくつか紹介します。 まえがき 私が社会人になって数ヶ月が経ちました。会社では自分でコードを書くのはもちろん、他人の書いたコードをいじるという、今まであまり経験していない作業をすることもあります。 そしてその中で使われている言語にはJavaScriptも含まれます。JavaScriptは平易な言語であり、クライアントサイドでもサーバサイドでも採用できるので、様々な場面で使用されています。 さす

Node.js のバージョン 10 のリリースは 4/25 を予定しています。 また、ECMAScript Modules は Stability1(実験的)でリリースされます。 議論は以下で行われます。 GitHub - nodejs/modules: Node.js Modules Team Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 覚えておくべきこと ESM を使いたい場合は、拡張子を.mjsにする .jsファイルでimport/exportは使えません。 ブラウザではtype="module"となりますが、Node.js では拡張子で判断します。 .mjsの拡張子は省略可能である 拡張子の探査順は ESM の時、.mjsが優先されま

この投稿は米国時間 3 月 26 日に投稿されたもの（投稿はこちら）の抄訳です。 Posted by Google Cloud デベロッパー アドボケイト 佐藤一憲 この 3 つのラーメンは、41 店舗あるラーメン二郎のうち 3 店舗で作られたものです。それぞれ、どの店舗で出されたものか分かりますか？　データ サイエンティストの土井賢治さんが作成した機械学習（ML）によるラーメン識別器を使えば、それぞれの微妙な盛り付けの違いを見分けることで、95% の精度で店舗を特定できます。 この写真を見ても分かるとおり、ラーメン二郎の相当コアなファンでもなければ、ラーメン画像から 41 店舗のどこで作られたかを見分けることは簡単ではありません。テーブルやどんぶりの色、形にあまり違いのない場合が多いのです。 土井さんは、ディープ ラーニングを使ってこの問題を解けるか興味を持ち、インターネット上から 48

Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。

某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない