JavaScriptよ。文明を捨て、自然に還れ。 ::ハブろぐ

2018/09/13 127 users 文明 JavaScript

Web ナチュラリスト フィードを眺めていたら Alex Russell 氏の新作が投稿されていた。 The "Developer Experience" Bait-and-Switch | Infrequently Noted 本来の趣旨については原文を読んでもらえばいいし、下記はこれを読んだ上で普段の考えを踏まえて脳裏をよぎったポエムである。 我々は複雑性で仕事をしている 仕... 続きを読む

Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc... ::ハブろぐ

2017/07/11 93 users TTi クライアントサイド パフォーマンスメトリクス web

色々なパフォーマンス指標のこと 何かを評価するときには何らかの指標（メトリクス）を定めますが、何を指標として設定してどのように測るかというのは重要です。 いわゆる KPI もそうですが、扱っている商材やビジネスのステージ（フェーズ）によっても適切な指標は変わるかもしれません。色々な指標をよく理解して引き出しを広げておくことは、状況に合わせて適切な指標を選んで改善していく過程で役立ちます。 これまで... 続きを読む

SPA + サーバーサイドレンダリング、そのダルさに関する私見 ::ハブろぐ

2017/06/14 202 users サーバーサイドレンダリング 私見 SPA 概観 ダルさ

いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング（SSR）が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい（） 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ... 続きを読む

リモートワークの勘所と限界について1年くらいの感想、組織にとっての選択肢作りの話 ::ハブろぐ

2016/07/20 446 users リモートワーク ワークスタイル 書斎 ハッピー 本社

1年くらいリモートワークを続けてみた感想 まず当然ながら「リモートワークは生産性が高い！これこそ未来のワークスタイル！」のような感想はありません。 生産性やコミュニケーションに関連するメリット、デメリットをうまく相殺しきれれば、生活の自由度だけ向上してハッピー 、と考えています。 自宅の書斎 今は自宅かレンタルオフィスのいずれかを作業場として開発などを行いつつ、本社がある渋谷には1泊2日の出張を月... 続きを読む

HTML6 でも CSS4 でもない Web 技術のゆくえ - WCAN 2015 Winter に登壇してきました ::ハブろぐ

2015/12/14 253 users ゆくえ TED 投影 壁面 スクリーン

WCAN 2015 Winter @kazumich さんにお声がけいただき、 WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くし... 続きを読む

Isomorphic Architecture を実装してるときの細かいアレコレ ::ハブろぐ

2015/07/31 54 users

Isomorphic あらため Universal ？ 一時期火がついていた Isomorphic について。各自がプロダクションの事例を作り上げる潜伏期に入ったのか、はたまた本当に一過性で火が消えたのか、コモディティ化を遂げたのか分かりませんが、あまり耳にすることがなくなった印象です。 そんな中ですが先日、Universal JavaScript — Medium が公開され、なるほど Univ... 続きを読む

WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する ::ハブろぐ

2015/06/13 30 users 二の次 アクセシブル ツッコミ React WAI-ARIA

タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので... 続きを読む

Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い ::ハブろぐ

2015/06/01 78 users Polymer ラッパーライブラリ Site コンポーネント

Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 こ... 続きを読む

TypeScript における ES6 との兼ね合いで避けているパーツ ::ハブろぐ

2015/05/20 43 users jsx TypeScript Private 兼ね合い 独断

ES6 フレンドリな TypeScript のために 先日書いた JSX と TypeScript の混合 Flux または悪魔合体 の経緯から TypeScript と JSX を併用しているため、コードの記述に大きな差ができないよういくつかのパーツ（主に TypeScript のもの）を避けることにしています。 NGなパーツ 独断と偏見です。 Private/Public modifiers ... 続きを読む

最近あまり使ってない、流行っていた時期もあるフロントエンドもの ::ハブろぐ

2015/02/19 393 users 時期

最近あまり使ってない、ちょっと前の流行りもの なんとなく書いてみます。Web アプリケーション開発屋さんなので、Web サイト制作屋さんとはかなり文脈ズレると思います。 jQuery ファミリー 個人的には jQuery って、協業用のツールという位置づけでした。jQuery でさえ書かれていれば、jQuery 書ける人材のほうが外からも調達しやすいため、人員の流動にも有効と考えられる頃が確かにあ... 続きを読む

ES6 の Project Skeleton (6to5 + browserify + power-assert) を作ってみた ::ハブろぐ

2014/12/18 15 users ES6 power-assert browserify

かめ板 es6-Kameita ahomu/es6-Kameita es6-Kameita は ECMAScript 6 で JavaScript ライブラリを開発するためのプロジェクトスケルトン（テンプレート）です。初期設定はブラウザ向けですが、Nodeモジュールにも対応します。 6to5 でトランスパイルされたコードを Browserify でビルドし、mocha + power-assert... 続きを読む

2014年のWebパフォーマンスふりかえり - 来年以降の期待etc ::ハブろぐ

2014/12/17 81 users 来年以降 所感 文中 LTE 肥大

ひさびさにWebフロントエンドパフォーマンス系の話題をつらつらと書いてみます。例によってモバイル系開発者寄りの視点かもしれません。文中の参照リンク多め。 ファクタ まずはパフォーマンスに影響を与えるファクタについての所感。Webパフォーマンスにおけるイニシャライズとランタイム ::ハブろぐ で示した分類に基づきます。 イニシャライズ（いわゆるページロード） 4GやLTEが普及してもコンテンツの肥大... 続きを読む

npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ

2014/11/13 190 users npm フロントエンド 未来 パッケージ管理

JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じにな... 続きを読む

AngularJS についての所感 ::ハブろぐ

2014/11/04 263 users AngularJS 所感 まさかり jQuery via

AgularJS に対する気持ち 所感といいつつ、主に自分がつらさとして感じていることを書く。所感シリーズとしては jQueryについての所感 も併せて読みたい。 via. AngularJS: The Best Parts - Anand Mani Sankar この学習曲線の中でいうと、たぶん今の自分は Very Cool! の頂点から降りている最中くらいだと思う。そして、マサカリをふりかぶっ... 続きを読む

Web Components(+Virtual DOM)ラッパー書いてみた ::ハブろぐ

2014/10/30 52 users Virtual DOM Web Components 内容

Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所か... 続きを読む

Polymer と Web Components の違い9選（もとい Polymer の便利機能） ::ハブろぐ

2014/08/06 102 users Polymer template ライブラリ きり 勢力

との違い、もとい付加機能 色々な周辺事情で、勢力を広げつつある Polymer さん。（つい最近、それに加担したような気もする） 「どこまでが Web Components で、どこからが Polymer なのか」を理解するためにもPolymerの機能をメモる。Polymer は色々なことを便利にしてくれるライブラリであり、差分を言い出すとキリがないので主要なポイントだけ。 <template> ... 続きを読む

Material Design と Polymer - HTML5とか勉強会に登壇してきた ::ハブろぐ

2014/07/29 80 users Polymer Googler ケーススタディ とこ まわり

まさかのデザインに関するトーク 先日の 第49回 HTML5とか勉強会 で、Material Design と、それをWebで実践するための Polymer (Paper Elements) まわりについてお話させていただきました。 去年とか、Googler が紹介するパフォーマンス関係のわりとマニアックなトコだとかケーススタディの共有に努めたり、さらにその前もJavaScript関係のライブラリ... 続きを読む

Docker を Mac で使ってみた（Nodeアプリ例） ::ハブろぐ

2014/07/08 204 users Docker Heroku PaaS boot2docker

Docker 色々あってDockerした。さっくりとアプリ作るならHerokuも便利なのだけど、Dockerをサポートする他のPaaSも使えた方が便利そうな風潮を感じたので。 1. インストール＆導入 Mac OS X - Docker Documentation Releases · boot2docker/osx-installer からpkgインストーラをダウンロードして実行。適当にはいる。... 続きを読む

Web Components を支えるPolyfillライブラリ ::ハブろぐ

2014/06/22 74 users templates Web Components 格言 実装

Web Components を今つかえる技術にするライブラリたち ご存じの通り、Web Components はまだ仕様策定の途上段階（Templatesとかもうやることなさそうだけど）にあり、ブラウザの実装もまだまだこれからの段階。 「憎まれっ子世にはばかる」がソフトウェアにも適用される格言であったことを噛みしめている今、Web Components がブラウザネイティブでサポートされるのは、... 続きを読む

Componentによるフロントエンドのパッケージ管理 ::ハブろぐ

2014/02/18 133 users component タスクランナー 直近 ライブラリ選定 実装

Component 直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー... 続きを読む

Angualrそっちのけで、Vue.jsについて所感 ::ハブろぐ

2014/02/14 217 users 所感 Vue.js

Vue.js Vue.js 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog を読んで触発されたので、自分も外見的に良いなと思ったポイントだけ書き留めてみます。さすがに実戦投入できていないので、そのあたりの精度は悪しからず。 サンプルコードの雰囲気 サンプルコードとか自分でちょっと触ってみたときの感触からは、以下のポイントが気に入りました。d... 続きを読む

技術は発想やデザインの限界にならない ::ハブろぐ

2014/01/06 64 users 発想 限界 技術 職能 デザイン

当時の思い違い たとえば、一般的なエンジニアが何かを作ろうとすると、その個人の「技術的な限界＝発想の限界」となりがちです。 ではデザイナーと呼ばれるような職能を持っているひとが、果たしてプロダクトを実装として理解すべきか、というと、それは分業上の実装サイドによるエゴ（こっちの都合もちゃんと考えて欲しい！的な）でしかないと思っていました。 多少、吹っ飛んだ話であっても、意図を失わずに現実的な実装に落... 続きを読む

俺流BackboneラーメンとPhalanxのはなし ::ハブろぐ

2013/12/07 26 users Phalanx はなし

前置き この記事は Frontrend Advent Calendar 2013 の7日目です。 意見表明を避けてたジャンルだけど、俺流Backbone.jsとの付き合い方と、それを反映したライブラリについて書いてみる。大半が夏前に書かれていたけど、イマイチで放置してた系を掘り起こした！ 熟成塩ラーメン 職場近くに俺流塩らーめんというお店があって、そこの熟成塩ラーメン(¥680)が、スガキヤのラー... 続きを読む

フロントエンドチューニングの箇条殴り書き ::ハブろぐ

2013/10/30 363 users

普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像... 続きを読む

`that = this` について思ったこと ::ハブろぐ

2013/10/17 63 users That this ini self 理性

thatに思いを馳せる JavaScriptにおいて that = this とか self = this なパターンを頻繁に使うと、作業者の理性が保証されない場合に下記に示す2点の問題が起こりう得ると思っている。 「あー、どうなのかなー、うーん」と思いながら書いてみる。 1.メソッド分割が適切におこなわれない雰囲気 ちょっと極端かも知れないが、Backboneっぽいコードを例にしてみる。 ini... 続きを読む