babel な ESLint の設定をがんばった
やんなくちゃなー、と思っていたので Lint Like It’s 2015 — Medium を眺めながら、ahomu/es6-Kameita の JavaScript Linter を ESLint に乗り換えました。 Lint の設定つくるのがダルイ問題 本当にだるい。この投稿を書いている時点では .eslintrc を以下のようにしました。 スペースの入れ方については、強い意志をもって堅めの設定になっているはず。 max-params はちょい甘めです。consistent-this を全力で否定しているので、流用したい方は気をつけた方がよろしいかと。 { "parser": "babel-eslint", "env": { "browser": true, "node": true }, "rules": { "strict": 2, "default-case": 2, "no-
yahoo/fluxible による SPA + Server Rendering の概観
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる（あくまで可能になるだけ） なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
Isomorphic Architecture を実装してるときの細かいアレコレ
Isomorphic あらため Universal ？ 一時期火がついていた Isomorphic について。各自がプロダクションの事例を作り上げる潜伏期に入ったのか、はたまた本当に一過性で火が消えたのか、コモディティ化を遂げたのか分かりませんが、あまり耳にすることがなくなった印象です。 そんな中ですが先日、Universal JavaScript — Medium が公開され、なるほど Universal ってキモチになったので、タイトルに反して以下は Universal と呼称します。 今回の話題にするのは module レベルではなく Universal な JavaScript architecture のほうです。アーキテクチャのレベルで Universal なコードが役立つ代表的ケースは SPA (Single Page Application) と SSR (Server S
TypeScript における ES6 との兼ね合いで避けているパーツ
ES6 フレンドリな TypeScript のために 先日書いた JSX と TypeScript の混合 Flux または悪魔合体 の経緯から TypeScript と JSX を併用しているため、コードの記述に大きな差ができないよういくつかのパーツ（主に TypeScript のもの）を避けることにしています。 NGなパーツ 独断と偏見です。 Private/Public modifiers ジャングル ニ プライベート ナイ！ class Acme { private himitsu = ''; public tellme() {} } みたいなのですね。バイオ JS にプライベートなんて必要なかったんや。protected も使えるっぽいけどアンドキュメント？ Modules ES6 ライクな import/export だけ使うということで内部モジュール禁止です。不便ないですね。
Front-end with Node.js - Node学園祭 2014
Node学園祭・初参加 初参加だったんですが、ビギナー＆フロントエンド向けのNode.jsツール系セッションを担当させていただきました。なんかめっちゃ緊張した･･･。 参考リンク集 1. Package manager npm Bower npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ The npm Blog — npm and front-end packaging Npm Tips · fiveisprime npmのあまり知られてない機能 10選 - from scratch npm-shrinkwrap Bower Resolutions - Jake Trent 2. Task runner Grunt: The JavaScript Task Runner gulp.js - the streaming build system Node.js の Stream
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
-rw-r--r--@って？ Mac OSXのExtended Attributesを除去する
謎の@ % ls -l -rw-r--r--+ 1 user admin 2688 Sep 24 21:02 File1.php -rw-r--r--+ 1 user admin 3136 Sep 28 15:01 File2.php -rw-r--r--@ 1 user admin 2526 Oct 7 09:09 File3.php -rw-r--r--+ 1 user admin 20365 Oct 7 19:51 File4.php パーミッションの後ろに@がついているファイルがあります。 今回はMac OSX Serverで構成されたリモート上での出来事なのですが、このファイルは公開ディレクトリ内のファイルです。同じファイルをFTP ( キャプチャで使用しているのはTransmit )を通して見ると、MacBinary archiveとして確認され、.binが付与されています。
Backbone.jsを使うときに参考になるリソース 2012年末版 (Backbone Advent Calendar 2012 25th day)
Backboneを使うときの参考情報たち Advent Calendarがネタ切れの折、最終日が冴えない小ネタで終わるよりはマシかということでリストアップしてみた。 日本語リソース では早速、日本語のリソースから。古い情報はリストから外しているので、いくらか偏りがあるかも。悪しからず。 ビギナー向けにまとまったの CodeGrid - フロントエンドに関わる人々のガイド Backbone.js Advent Calendar 2011 - Qiita CodeGridで連載中のBackbone入門が、ちょうどリアルタイムに更新されているビギナー向け情報でおすすめ。ただし有料。去年のAdvent Calendarも丁寧でおすすめ。 enja-oss/Backbone · GitHub JavaScript MVCフレームワーク Backbone.jsのコメント付きソースコード日本語訳が公開
勉強会資料シェア Getting Started with RequireJS
げりんぐすたーてっど うぃず りくわぃあーじぇーぇす ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。 利用したデモファイルセット http://d.aho.mu/S4mh なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。 おさえるべき要点 いくつかの要点だけ記事内に文字列でおこしておきまする。 モジュラーと依存関係 Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。 ParisJS #10 : RequireJS このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジ
nodeJSでつかえるMySQL ORMのSequelizeを触ってみる
SequelizeはnodeJSで使えるORM npm install sequelizeでサラッとインストールできます．MySQL本体さえ入っていれば，すぐに使えます． 初期化 Sequelize自体は，requireして，必要な情報を与えてnewすれば簡単に初期化できます． var Sequelize = require('sequelize').Sequelize; var Seq = new Sequelize('データベース名', 'ユーザー', 'パスワード'); /* hostとかportを指定するときはこう var Seq = new Sequelize('データベース名', 'ユーザー', 'パスワード', { 'localhost', 3306 }); */ モデルをつくる 最低限のモデルの定義．ここではUserモデルに対して，文字列型のユーザー名を定義しました． va
PHPのinterfaceとabstractを正しく理解して使い分けたいぞー ::ハブろぐ
interfaceとabstractの特徴と違いを捉える 今回もPHP話。（正しくないことは @ahomu に教えてもらえると助かりマス） PHP5では、interface（インターフェイスの宣言）やabstract（抽象化）が使用できます。これらの説明を読むと、一見して同じような役割を持っているように見えます。 それは両者とも、メソッドの実装を「インターフェイスを実装したクラス」や、「抽象クラスを継承したクラス」に強制的に任せる機能を持っているからです。これらの挙動は、外見上とても似ています。少なくとも自分はそこで引っかかりました。 interfaceもabstractも便利なオブジェクト指向機能ですが、使い分けができないと、もったいないです。ありがちな話だと、いつまでもabstract一辺倒で、interfaceの出番が見つからない、とか。 今回はそのへんを自分の理解を整理しつつ書き留
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
