asyncを書くのも面倒なのでasync-nodeを作った - マルシテイア
ちょっとスクレイピングする機会があり、Nightmareでスクリプトを書いたんだけど、Promiseをベタベタ書いたりする必要があって面倒だった。 Node.js v7.6.0からはasync/awaitが使えるようになったけど、スクリプト全体をasync functionで囲んだり .catch() する必要があったりして、ノイズが多い。 というわけで、トップレベルにいきなり await を書いても実行できる async-node というコマンドを作った。 github.com インストール npm i -g @fand/async-node 使用例1) GIPHYから画像をダウンロード Nightmareで画像を検索し、kevva/downloadで手元にダウンロードするスクリプト。 ソース: https://github.com/fand/async-node/tree/master
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
Yarn速かった - マルシテイア
Yarn 速かった Yarn とは https://code.facebook.com/posts/1840075619545360 Facebook, Google, Tilde, Exponentの人たちが作ったnpmクライアント。 npm install の代わりに使える。 http://qiita.com/mizchi/items/1002fde0de10e7c54fb2 詳しくはこの辺 実行時間測ってみた 試しに業務レポジトリで npm install と yarn を比べてみた dependencies + devDependencies : 70 個 npm-shrinkwrap.json : 22298 行 元の node_modules : 22 KB npm install 303 sec $ rm -rf node_modules $ npm cache clean
Slackのファイルアップロード機能をTODOリストとして使う - マルシテイア
Slackの右側のペイン、使ってますか？ メンション一覧くらいしかマトモに使える機能ないんじゃないでしょうか。 アップロードされたファイル一覧したりできるんだけど、その中に Posts というのがある。 なんだこれ、って開いてみると、謎のドキュメント入力欄が出てきたりするのだけど、いまいち使い勝手がよくない。 そこで、 API から Posts を投稿/削除することで TODO リストとして使う、という CLI アプリを作ってみた。 github.com インストール $ npm install -g @fand/todo-slack その後 ~/.todorc に以下を入力して準備完了 // .todorc { "token" : "__YOUR_SLACK_API_TOKEN__", "user" : "__YOUR_SLACK_USER_ID__", "channels" : "#_
講読中のブログの更新をMacのツールバーに表示する - マルシテイア
好きなブログをたくさん講読すると、更新を見落としがちになる。 Bitbarを使えば、Macのツールバーから はてなブログの更新をチェックできる。 使い方 1. Bitbarをインストール Homebrew だと brew cask install bitbar で入る。 もしくはGitHubからダウンロード。 https://github.com/matryer/bitbar/releases/latest の bitbar-x.x.x.zip って奴。 ダウンロードしたら解凍して「アプリケーション」につっこむ。 起動すると、プラグイン置き場をたずねてくるので適当に設定する。 僕は ~/.bitbar にしてる。 2. プラグイン設定する プラグイン置き場に移動して、以下の内容を実行する。 curl -o hatenablog.rb https://gist.githubuserconte
自分が依存しまくってるnpmパッケージを表示するツールつくった - マルシテイア
https://www.npmjs.com/package/what-do-i-depend-on github.com 先日のleft-pad騒動で、自分のプロジェクトのnode_modulesを慌ててチェックした。 普段依存の依存とかまったく意識してないけど、いざ見なおしてみるとその数の多さにビックリする。 全ての依存を把握するのは正直無理だけど、ざっと見てみるだけでも発見がある。 意外とscoped packageが使われてたり。めちゃくちゃミニマルなパッケージが人気だったり。 babel関係のパッケージが多すぎて目眩がしたり。 というわけで、自分のプロジェクトの依存パッケージを再帰的に調べて、依存度合いをチェックするツールを作った。 node_modules/ 内の package.json を再帰的に調べて、パッケージが登場した回数を表示する。 使い方 インストール npm i
Fluxフレームワーク戦争の現状確認（後編） - マルシテイア
この記事は仮想DOM/Flux Advent Calendar 2015の25日目……に入れようと思ってたけどもう埋まってた……。 オマケということで頼む！！！！！ 24日目は JavaScript - 実践：MagJS で TodoMVC - Qiita でした。 メリークリスマス！！！！！！！！！！ こんにちは id:amagitakayosi です。 みなさん今月も Flux 書いてますか？ 僕はオレオレ実装をIsomorphic対応したけど昨日Revertしたところです！！！！！ウオー！！！ 今日は↓12/2の記事↓の続きを書いていきます！ amagitakayosi.hatenablog.com もくじ 前回のあらすじ flux-utils Container vs View Cycle.js flux-challenge Rx系 thisless-react, Yolk DDO
Fluxフレームワーク戦争の現状確認（前編） - マルシテイア
この記事は 仮想DOM/Flux Advent Calendar 2015 2日目の記事です。 みなさんFlux書いてますか？ 僕はオレオレ実装を書き続けて消耗してます。 Fluxフレームワーク使いたいけど使いたくない……！！ いったい今Fluxフレームワークって幾つ生き残ってるの……戦争は終わったの？ っていうか最近新フレームワークの噂聞かないけど、まだFluxって流行ってるの？ 今日はその辺をまとめてみたいと思います。 もくじ 前提知識 Flux以前 2014年5月 Flux登場 〜2015年前半 戦国時代 Fluxxor Fluxible Alt NuclearJS 振り返り 2015/5月 Reduxの登場 前半まとめ 前提知識 Fluxってなに？という方はこちらの資料をみると良いでしょう。 非常に丁寧にまとめられています。 speakerdeck.com なお、以下ではアーキテク
Cycle.js / RxJS 入門してサンプラー作ってみた - マルシテイア
youtu.be http://gmork.in/cyro/ サンプラー。 キーボードを押したら音が増える。 [A-Z] : 音を入力 Shift + [A-Z] : そのキーの音をすべて削除 / : 設定パネルの表示 / 非表示 一応ソース fand/cyro · GitHub Cycle.js / RxJS の感想 Cycle.jsとは cycle.js.org Cycle.js は Unidirectional dataflow / Model-View-Intent を実現するWebフレームワーク。 RxJS 及び virtual-dom を使って書かれており、開発者もこれらを利用することになる。 作者の André Staltz 氏は Rx オジサンで、Rx に関するサイトを幾つか作ってる。 Flux や Elm, Famous のアーキテクチャを解説した記事は少しバズったので、
JavaScript Domain-Driven Design読んだ - マルシテイア
このまえ一瞬話題になった本読んだのでメモ。 www.packtpub.com 目次 総評 JavaScript成分あんまり無い 奴隷管理アプリケーション まとめ 総評 長さ: ☆☆★★★ 読みやすさ: ☆☆☆★★ 英語のムズさ: ☆★★★★ こんな人にオススメ DDD本読みたくないけど雰囲気だけ知りたいWebマン DDDはわかるけどJavaScriptよくわからないWebマン 本書では、ケーススタディを通じてDDDの諸概念を解説し、これを用いたWebアプリの開発方法を紹介する。 わりとフンワリした感じ。 「JavaScript」という名前を冠しているが、ExpressとMochaを使ってるくらいの話だった。 Expressに特化した知見や、SPAに特有の問題に対する解決策などは提案されていない。 また、DDD特有の諸概念についても大まかな解説にとどまり、前触れ無く「Service」という言
Fluxなフレームワーク、Fluxxorの紹介 - マルシテイア
この記事はVirtual DOMアドベントカレンダーの5日目の記事です。 Virtual DOMといえばReact。 ですが、ReactはMVCで言うViewの部分だけを担当するのであって、MVCフレームワーク的なものではありません。 なので、Model等、他の部分は自前でどうにかする必要があります。 そこで、facebookの中の人は、Reactを中心にしたアプリケーション構築パターンとしてFluxってのを提唱してます。 https://facebook.github.io/flux/ Fluxってどんな Flux、ざっくり言うと、 データは1方向に流れる イベントをActionとして定義 ロジック、データはStoreに全部入れる というアーキテクチャ。 図で言うと、MVCでは ↑みたいになるとM,C間の処理の流れムズかったのが、 Fluxだと という風にデータの流れが整理できて嬉しいで
背景色とのコントラストを保った配色 - マルシテイア
色、難しい 緑は眩しい webで色つくるとき、エンジニア的には hsv/hsl で s, v を固定してhueを適当にグルグルするっていう色の作り方がポピュラーだと思う。 css3 では hsl で色を指定できるようになった。 でも、背景色によってはなんか緑だけ目が痛いとかいうことになる。 下は s:90%, l:75% で固定して hue を 20, 140, 260 にした例。 hueしか変更してないのに、緑だけ読みにくい。 人間の眼は緑にだけ敏感なのでこうなるらしい。 cf.) 海外のすごいおっさんのブログ, wikipedia Web Content Accessibility Guidelines アクセシビリティの人たちなんか考えてるはずって思って調べたらこういうのあった http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contra
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
