仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
fitbitのAPIから心拍数をとってきてツイートできてついでに心拍数ぴったりのBPMのYouTube動画を見れるウェブサービス作った - hitode909の日記
せっかくfitbitで心拍数を取ってるのに，友達に共有できないのはもったいない!!ということで，心拍数をツイートできるウェブサービス作った． heartbeatwonderland OAuthで認証して，心拍数を測るボタンを押すと，こういうツイートができる． 🙋💓 BPM83 https://t.co/vtfADFGlKu #heartbeatwonderland— 趣味はマリンスポーツです (@hitode909) 2015, 11月 29 BPMごとのページができて，心拍数にぴったりのYouTube動画を閲覧できて便利．心拍数が80といわれても，どんな雰囲気なのかよくわからないけど，BPMがぴったりの曲が流れると，さぼってるとか，がんばってるとか，そういう雰囲気が分かると思う． BPM73くらいだとおだやかなリラクゼーションという感じ． BPM73 - heartbeatwonde
ES6 on React.js で徹底的にテストしてやる - Qiita
これは freee エンジニアによる、アドベントカレンダー 1日目の記事になります。言い出しっぺということで、初日を飾らせていただきました。 ビューのテストしてますか？ freee では、プロダクトによっていくつかの技術を組み合わせてフロントエンド開発を行っています。その中でES6 による React.js を使った実装が増えつつあります。特に、今の私の担当は、インタラクティブな挙動が求められ、DOMの状態が激しく変化する画面の開発となっております。そこで、React.js を使った開発が適していると判断し、かなり込み入ったReact.jsベースのビューコンポーネントを開発しています。 ところで、ビューのテストというと、下記のような様々な理由で相対的に優先度を低く扱われる場合が多いと思います。 ユーザの操作が起点となるためテスト実装がしづらい 細かな変更頻度が高くテスト実装によるオーバーヘ
Node.js へのcontributeの仕方 - from scratch
qiita.com このエントリは Node.js Adventcalendar の 1 日目のエントリです。 Node.js への contribute の仕方 Node.js の contribute は敷居が高いと思っている人がいるのかあんまり日本人が contribute をしているのを見ることが少ない。もっとコントリビュートする日本人が多くても良いんじゃないかと思っている。 これまでの Node.js では CLA にサインが必要だったりイマイチさくっとコントリビュートができないという問題があったが、 v4 になってからの Node.js はかなりコントリビュートまでの敷居が下がっている。 にも関わらず、少ないのは日本語の記事が少ないことも一つの要因だと感じているのでこれをきっかけにコントリビュートのやり方を抑えてもらって第一歩になるようにしてもらいたい。 Node.js のリポ
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
鮨の物理演算 - No Regrets in Bathing
Sushicorp Advent Calender 2015の一日目です。 親方！空からsushiが！ http://hashrock-sandbox.github.io/study-matterjs/ matter.jsとても簡単ですね。 デフォルトレンダラが大変有能で、デフォルトでワイヤーフレームON、 OFFの場合は指定したテクスチャで物体を描画してくれます。 ソースはこちら hashrock-sandbox/study-matterjs · GitHub 明日は弊社CTOが弊社について何か書いてくれるはずです。 参考サイト 「Matter.js」を使ってCanvasの物理演算をやってみました | スターフィールド株式会社
Electron x React x Webpack
3.md Electron x React x Webpack 0. Synopsis 今回は次のような問題を解決してみる。 ES6が使いたい よりアプリらしく作りたい 変更するとRefresh押すのが面倒いい まず、Electronは現状Node v4.1.1を使っているので、ES6で使えないものがまだ多い。今回はこれをWebpackで抑えてみる。ついでに、WebpackのHot module replace(以下、HMR)を利用して、ScriptやCSSの変更をRefreshsせずに反映されるようにしてみる。その上にReactを導入する。 1. 初期設定 Electronを設置する。 npm i -D electron-prebuilt WebpackのLoaderとPluginを設置する。 まずは、WebpackとJSXをコンパイルするためのBabel loader、React tr
最強の dotfiles 駆動開発と GitHub で管理する運用方法 - Qiita
【2015/07/16 追記】優れた dotfiles を設計する - TELLME.TOKYO この記事では書かなかった全体のロジックについて書きました Dotfiles Driven Development dotfiles とは Unix 系 OS で俗に言う設定ファイルのことです。.vimrc や .zshrc など、設定ファイルの多くは隠しファイルとしてファイル名の頭にドットがつくことからそう呼ばれています。 ほとんどのエンジニアは CLI 環境での開発は避けては通れないものに思います。CLI 環境は「黒い画面」として敬遠されがちで、CLI になると格段に作業効率がダウンする人も少なく無いです。その作業を効率化するキーとなるのは、設定ファイルの習熟度にあると思います。GUI 開発環境と比べてこちらはテキストベースでカスタマイズできるため、究極まで自分好みに合わせることが可能です。
Prottのテストを支える3つの施策（power-assert導入 & Protected branches & CI高速化） - エンジニアをリングする
この記事はGoodpatchのエンジニアがお送りするGoodpatch Advent Calendar 2015の1日目の記事です！ 1日目は最近Prottチームでおこなったテスト推進施策について書いてみようと思います！ 私はProttというプロトタイピングツールの開発を担当しているのですが、Prottには今までサーバーサイドのコードにしか自動テストがありませんでした。 変化のサイクルが速く長期的な運用になる自社サービスは常にコードの形を変えていく必要がありますが、自動テストがないと気軽なリファクタリングをしていくことが難しくなってしまいます。 今回はテスト推進施策ということで、フロントエンド側のテスト環境構築とテストに関連する取り組みを行ったので、その内容をまとめたいと思います。 ポイントは以下の3点です！ フロントエンドのテスト環境を作る → Karma + mocha + power
Reduxで大量に発生するactionを間引く - Qiita
使い方 第1引数は間引きたいAction Typeを配列もしくは文字列で指定します。文字列の場合は、 内部で配列にして処理します。 第2引数は間引きたい秒数をmillisecondsで指定します。 import {createStore, applyMiddleware} from "redux"; import throttleActions from "redux-throttle-actions"; // combineReducersされたreducer達 import reducers from "./reducers"; import {someType} from "./constants/actionTypes"; // someTypeが実行頻度が100msに一度になるように間引く const throttleSomeType = throttleActions(some
VueServer.js の紹介 - Qiita
この記事は、Vue.js Advent Calender 2015 1日目の記事です。 みなさん、VueServer.js というのをご存じでしょうか？ この記事では、軽く VueServer.js についてゆるい感じで紹介したいと思います。また、最後に Express に組み込んだデモ的なものを紹介したいと思います。 VueServer.js とは? VueServer.js は、その名のとおり、Vue.js で作ったコンポーネントを、サーバサイドでも動作させることができるオープンソースなライブラリです。 Vue.js は React.js の Virutal DOM とは違って、直に DOM を利用してレンダリングしているため、サーバサイドで動作させるには、 jsdom: DOM エミュレーションライブラリ phantomjs: ヘッドレスブラウザ Prerender.io: Pre-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-sortable, a Vuejs directive for Sortable: Christophe Graniczny