FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]
ピクシブ株式会社 Advent Calendar 2015、19日目の記事です。 qiita.com こんにちは、愛らしくも憎らしいJavaScriptを書いてご飯を食べている @geta6 です。業務では pixiv Sketch というサービスの開発や運営に携わっています。 pixiv Sketchでは、node.jsとReact/Fluxibleを使用してサーバーとクライアントを同じコードベースで動作させるIsomorphicな構成を採用しています。 このプロジェクトでコードレビューをしていて、チームメンバーがつまずきやすいと感じたのが『FluxにおけるActionとStoreのどちらに何を実装するべきか』という点でした。 そこで、本日は『ActionとStoreとの適切な責務の持たせ方』について話をしたいと思います。 ReactとFluxについておさらい 今年の4月にこんなスライド
![FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0da913cbf8a21a9b94e0b3b6024eb39bf6869768/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fg%2Fgeta6%2F20151218%2F20151218175826.png)
Beyond Offline – Mozilla Hacks - the Web developer blog
This is my first post on Mozilla Hacks and despite my personal blog, it is my first post as a mozillian (yay!). During this month I’ve been working in the Service Worker Cookbook project —part of the Web Application Developer Initiative (WADI)— which gives me the opportunity to put my expertise in Service Workers into practice while at the same time learning new ways to exploit this exciting new w
ServiceWorker Cookbook
Introduction Igrice za decu od 3 do 103 godine. Nove online friv igrice, mobilne za telefon. The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites. Tip: Open your Developer Tools console to view fetch events and informative messages about what each recipe's service worker is doing! Attribution The Service Worker Cookbook was created
RFD 2015
この記事は「脆弱性"&'<<>\ Advent Calendar 2015」21日目の記事です。 CSP 2015がかっこよ過ぎたのでパクりましたｗ Reflected File Download（以後RFD）はBlack Hat Europe 2014で発表された比較的新しい脆弱性です。今年になりRFD Cheat Sheetなる記事も書かれました。実は僕も今年の後半はRFDばかり見ていました。 概要 RFDはその名の通り3つの要素がからなります。 1. Reflected ユーザーの入力した値がレスポンスに反映される。 2. File URLに任意の文字列を追加でき、尚且つ正常にロードされる。 3. Download ダウンロードが可能であり、上記2つの要素がダウンロードしたファイルに反映される。 例 ユーザーが検索バーに文字を入れた際に、JSONを使い動的に候補を表示するサイトがある
asm.js の非同期スクリプト - ゲーム開発 | MDN
Web のゲーム開発紹介 Web のゲーム開発紹介 ビデオゲームとの違い ツール Canvas CSS Full screen Gamepad IndexedDB JavaScript Pointer Lock SVG Typed Arrays Web Audio WebGL WebRTC WebSockets WebVR Web Workers XMLHttpRequest ゲーム開発テクニック asm.js の同期スクリプトを利用する 起動パフォーマンスを最適化する ピア通信チャンネルとして WebRTC を利用する Web ゲーム向けの音 2D 衝突検出 タイルとタイルマップの概要 Web上の 3D ゲームの概要 Web上の 3D ゲームの概要 基本の 3D理論の説明 A-Frame Babylon.js PlayCanvas を利用した基本的なデモの制作 Three.js を使った
Tree-shaking with webpack 2 and Babel 6
Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking, excluding unused exports from bundles. Rollup depends on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused. Tree-shaking for webpack is currently in beta. This blog post explains how it works. The project we are going to e
deku で Virtual DOM を使う | スマホ神 – JavaScript 受託開発 –
Virtual DOM を使ったフロントエンドライブラリである deku のバージョン1.0がリリースされたようなので使ってみます。 インストール Browserify と Babel を使うのでインストールします。 JSX のためのプラグインもいれて起きます。 deku だけでなく virtual-element も必要です。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-plugin-transform-react-jsx $ npm install -S virtual-element deku Hello, World! まずは Hello, World! から // a.js import { render, tree } from 'deku'; import el
The infernal semicolon – Brendan Eich
Most of the comments in this semicolons in JS exchange make me sad. The code in question: clearMenus() !isActive && $parent.toggleClass('open') relies on Automatic Semicolon Insertion (ASI) and so cannot be minified except by parsing fully (including ASI), observing the significance of the newline after clearMenus(), and inserting a semicolon when stripping that newline. Some argue that JSMin has
React+Reduxのテスト方針をまとめた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 React.js Advent Calendar21日目の記事です。 Reduxというフレームワークがじわじわ広まっている。Reduxは、Fluxの概念を拡張したもので、アプリケーションでひとつの状態をもつと、クライアントでの状態管理がいろいろ便利になるよ、というコンセプトを持つ。詳細は以下の記事が詳しい。 人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上 Motivation | Redux 筆者は現在React+Reduxでアプリケーションをつくっているが、今回は、そのテスト方針を書こうと思う。 テスト環境 karma+jasmine+sinonでつくる。E2Eはいろいろと・・・なので・・・メインはユニットテストで実装している。JavaScript DOMをつかってSimulationすれば、最低限は担保できるかなと考える。 テスト方針 大きな方針と
横柄なパスワード – パスワード認証に関する改善策 | POSTD
パスワードにはうんざり。改善しましょう。 誰もが経験するあの瞬間。新しいサービスに登録し、パスワードを選んで入力する。でも、入れません。選んだパスワードは十分安全なはずなのに、使いたいサービスが独善的にそれを拒むのです。 記号、数字、大文字、小文字を少なくとも１つずつ使用しなければなりません。 小文字の長いパスワードの方がドルマークだらけの短いパスワードより安全だということを証明する、 XKCDの有名なコミック のことは忘れましょう。まず、あなたの主力パスワードが $$ICECREAM$$ だとします。アイスクリームは、恐ろしい人生の希望の灯火とも呼べるほどの大好物なので簡単に思い出せます。そして、このパスワードにはブートのための特殊文字が入っています。 残念なことに、 $$ICECREAM$$ には小文字と数字がないので、客観的に見れば安全ではありません。そこで、このサービスのためのパス
ChromiumからElectronを眺める - Qiita
はじめに Electronいいわー ChromiumとかNode.jsの知見もあるといいらしい *1 でもChromiumとかようわからんぜ この際勉強しちまえばいいじゃん！ 本エントリはElectronを構成する要素の一つ、Chromiumのアーキテクチャについて初心者が入門してみたものです。 Chromiumドキュメントを読む Chromiumの仕組みを優しく解説した本やエントリはざっと探した限りはありません。 そういうのが必要な人がふれる領域の話ではないのでしょう。 必然的に英語で書かれたドキュメントを読むことになります。 Chromiumプロジェクトはリンクの樹海のようになっていて迷いそうです。 Developer向けドキュメントは以下のリンクを辿って行くとみつかります。 For Developers > Design Documents - Engineering design
Obj-C → Swift コンバータをオープンソースで公開しました！
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog どうも、ヤフーの佐野（ @taketo1024 ）です。先日引っ越しをしまして、張り切って自分でタンスを運んだりして今とても筋肉痛です。 皆さんは Objective-C から Swift への移行は進んでいますか？弊社ではまだ Obj-C で書かれているプロジェクトは多くあります。世に出ている iOS アプリも多くはまだ Obj-C で作られているんじゃないかと思います。 Swift もオープンソース化され、この先その進化のスピードはさらに増してくるはずです。そこでチーム内で開発を進めていた Obj-C → Swift コンバータ を大幅に改良しオープンソースで公開することにしました！この記事ではその導入と活用の方法を説明します
HTTP/2のNode.js実装node-http2を読む - Qiita
この記事は、http2 Advent Calendar 2015 の21日目の記事です。 はじめに HTTP/2のNode.jsでの実装node-http2を読んだので、ポイントだと思うところについて大まかに書きます。 node-http2ってどんな感じなの HTTP/2はどういう風に実装できるの Node.jsのStream APIの良い使用例ないかな みたいなことを知りたい人の手助けになればと思います。 扱うnode-http2のバージョンは3.2です。 Stream API node-http2ではNode.jsの主要なAPIであるStream APIがよく使われています。 全く知らない人のために概要だけまとめました。 HTTP/2の重要な概念としてStreamがありますがそれとStream APIは別のものです。 今回は単にStreamと書いた場合はHTTP/2としてのStream
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - makotot/eslint-rules-example: eslint rules example
GitHub - insin/react-heatpack: A 'heatpack' command for quick React development with webpack hot reloading
GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
License Keys | Gumroad Help Center
An Intro To Using npm and ES6 Modules for Front End Development
GitHub - jaredly/treed: Powerful Tree Editor