NewsLearn more about the company, PR and product updates here.
クリスマス期間になると喜ぶ人もいれば悲しむ人もいる。そんな極端な季節の中で、自分が作ったguregu/kamiというWAFについて真面目に考えた。contextの正しい使い方や、kamiのAPIで後悔していることを晒そう。 kamiを作ったきっかけ まずはkamiの歴史について簡単に説明する。GunosyでアプリのAPIサーバーをRailsからGoに少しずつ書き直していたが、モノリシックだったmodelsとhandlersパッケージが大きくなりすぎて分かりにくくなってしまった。大きいパッケージを複数の小さなパッケージに分けようと思った。しかしユーザーのセッション情報などは様々なパッケージにどう共有したらいいでしょう? 当時使っていたGojiというWAFでは、リクエストごとにEnvというmap[string]interface{}が付いていた。 これを使えば、どんなパッケジーにHTTPハンド
ときどき、たまたま自分がそのとき考えていたことについてそれを補強するような材料が偶然たくさん集まってくる、なんてことがあります。そんな出来事があったので、ちょっとブログを書いてみようかなと。 以前に HBFav を作ったときこんなことを書きました。 Mark Zuckerberg は、いずれみんな、ニュースは友人知人経由で知ることになるだろうと言っていました。自分もそうなるだろうと思います。 4年ぐらいが経ちましたが、その思いは以前よりも増して確信めいたものになってきています。 ところで先日、Twitter の iOS アプリに「ニュース」という機能が追加されました。人によっては出てないそうなのでまだテスト中か、もしくは既に削除されているのかもしれないですが。 この機能についての自分の感想は以下のようなものでした。 もうすこし補足します*1。 Facebook や Twitter のような
これはクローラー/Webスクレイピング Advent Calendar 2015の9日目の記事です。 本記事では、Scrapinghub社*1が開発しているSplashというオープンソースソフトウェアを紹介します。 github.com JavaScriptを使ったページからスクレイピングする方法としては、PhantomJSとSelenium/CasperJSなどの組み合わせが一般的ですが、これらとは少し違う手段として使えるかもしれないソフトウェアです。 私自身Splashを最近知ったばかりで、軽く探した限りでは日本語の情報もないので、調査しつつSplashの使いドコロを探ってみたいと思います。 Splashとは READMEには以下のように書かれています。 Splash is a javascript rendering service with an HTTP API. It's a
reduxの思想 統一されたデータストア アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー sateを変化させる唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う stateを変更するための処理はreducersに定義します fluxの登場人物 actionCreator 最終的にactionを作るための処理 ajaxリクエストなどの処理を行い、その結果をのせたactionを作成する 例) 例えば、ajaxでコメント一覧を取得して { actionType: UPDATE_COMMENTS, comments: response.body.comments } のようなactionを作る action アプリケーションで何が起きたのかとそれに付随するデータ actionTypeと任意のデータを持つ単なるObject acit
Entry Point Regulation とは 反射型XSS・XSSI・CSRFのリスクを軽減するユーザエージェント上の仕組みとして、W3CでEntry Point Regulationという仕様が策定中です。 Webアプリケーションの口(Entry Point)に幾つかの制限をかけることが出来ます。別オリジンからのリクエストの時に、クエリパラメータやHTTPリクエストボディ(POSTメソッド)が付いていればブロックする、と言った事がマニフェストで指示できるようになりそうです。 EPRにおけるリクエストカテゴリ 各エンドポイント(URL)はどのようなリクエストを受け付けることが可能か指定できます。その時に指定するリクエストは以下に分類されます navigational request:context frame typeは"top-level", "auxiliary", "neste
Safe JavaScript Templating Automatic Contextual XSS Escaping made robust, easy, and fast Is XSS defense too hard? Cross Site Scripting (XSS) has topped the list of OWASP Top 10 Web Application Security Risks over a decade. We all know its consequence is terrible, allowing attackers to compromise a website and exfiltrate sensitive user information. But what makes it so hard to be eliminated from we
This is an old post - for an up-to-date guide see Flow Cookbook: Flow & React. Flow v0.11 was released recently. The latest set of changes really improve type checking in React apps. But there are some guidelines to follow to get the full benefits. Use ES6 classes React added support in version 0.13 for implementing components as native Javascript classes (more information on that here). The lates
Lambdaを使うとS3アクセスログの処理が出来るので、EC2を使わずにちょっとした動的サイトとして使うことが出来そうです。簡単そうなところで、簡易的なアクセスログカウンタを作ってみました。S3のstatic website hostingのアドオンとしてどうでしょうか? 仕組み S3のログ更新があったあと、Lambdaでログをパースして、index.htmlへのアクセス数をカウントします。カウントした数字は、S3上に「counter.txt」という名前のファイルでおいておきます。新規でログが来た場合に、このファイルの数字を更新していきます。 index.htmlの方には、このcounter.txtの数字を読み込んで、カウンター画像を作るコードをjavascriptで入れておきます。こうすることで、counter.txtが更新されると、カウンターがアップしていく仕組みです。 0.pngから
更新履歴 2015-03-16 文書を作成 2015-03-15 初版公開 これは何? いわゆるHTML5対応のブラウザの機能だけを利用して、MAGフォーマットの画像を表示するスクリプトです。 何がうれしいの? unlzh.jsと組み合わせて、パソコン通信時代の、改変せずに転載することのみが認められている書庫に含まれた画像をWeb上で展示したいなどの非常に微妙な用途くらいしか思いつきません。 (2015-03-17追記) Intel MacではPixelCatでもMAGを開けないらしいので、最近のMacでMAG画像を見たいけどツールがないという向きには有用かもしれません。WindowsではGVが普通に使えるのであまりありがたみがないと思いますが。 技術情報 システム要件 以下のようなWeb標準仕様をサポートしたブラウザであれば動くはずです。 HTML Canvas 2D Context 型
Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work. Default extracting: With BEM nesting: With BEM nesting and class names as comments: Usage Open any document contain HTML and do one of the following: Press Cmd+Shift+X on Mac OS X or Ctrl+Shift+X on Windows/Linux. Go to Tools → eCSStractor → Run Right click and select eCSStractor → Run Then you
class: center, middle # About Morpheus @koba04 --- class: center ## Morpheus <img src="img/morpheus.png" class="shadow" width="100%" /> https://github.com/vesparny/morpheus --- ## What is Morpheus? * Isomorphic web publishing platform * React.jsによるserver-side rendering * markdownで書ける * まだ開発が始まったばかりでnpmにpublishもされていない --- ## Architecture * React.js * Flux * fluxible * flux-router-component * expres
textlintから学んだこと 自己紹介 azu @azu_re Web scratch, JSer.info アジェンダ What is textlint? CLIツールの設計思想 ASTのLintの仕組み モジュールに分けるべし インターフェースとしての問題 ドキュメントとしての問題 ドキュメント JSDocとd.ts textlint とは何か MarkdownやテキストをLintするツール ESLintのテキスト版! MarkdownやテキストをASTにしてチェックする チェックルールをJavaScriptで書いて簡単に追加出来る Lintの仕組み Markdown or TextをASTに変換 ASTはTxtNodeというインターフェースを持つ 例えば、node.typeが"Header"という種類 node.rawにテキストの中身、node.locに行番号等の位置 txtnod
My website has a test suite with visual regression tests; screenshot different webpages and compare against a set of expected images: https://github.com/twolfson/twolfson.com/tree/3.40.0/test/perceptual-tests/expected_screenshots This weekend, I switched it from PhantomJS to node-webkit and am happy with the results: Benefits node_modules/ always work (e.g. no process is undefined issues) node_mod
Lolipopという音楽プレイヤーを作った。 初めて使うツール多かったので、メモ。 Vue vue.js Vue.js人気だけど個人的にはあんまり良くわかってなくて、良さを理解するために触ってみようとなった。 Vue.js、サーバ側で生成したHTMLに対し、JSっぽい動きを与えるVMとして使うのに向いてる。 オレオレComponentを量産して組み合わせて使うのはあんまり得意じゃなさそう。 というのも、この前React+fluxでオモチャ作ったんだけど、その時と比べるとComponentの扱いに結構苦労したからだ。 頭のこんがらがり具合はAngularのディレクティブと大して変わらない気がする。 結果としてReact(+flux)の良さを認識することになった。 React、コンポーネントの正体がJSのクラスだし、データのやり取りはEventEmitter使って一方向でやるの推奨なので、「こ
The implementation for ServiceWorker has been landing in Chrome Canary over the past few months, and there's now enough of it to do some cool shit! Unnecessary representation of "cool shit" What is ServiceWorker? ServiceWorker is a background worker, it gives us a JavaScript context to add features such as push messaging, background sync, geofencing and network control. In terms of network control
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く