CSRF, HTML Form Protocol Attack, Cross-protocol scripting attackについて

25時限目に引き続きオーガナイザーをしました about_hiroppy です。 今回の26時限目は、150人来ていただき本当に楽しく勉強になる時間でした。 改めてありがとうございました。 また、メルカリさんには会場整理、食事様々なことを手伝っていただき感謝します。ありがとうございました。 さて、今回の勉強会ですが、各フレームワークの話や型の話、低レイヤーのモジュールの話、 Chunked Encodingの話と結構コアな話が多い印象を受けました。 また懇親会では、古川さんからNode Collaboration Summit(Nodeのコアな人が集まるサミット(自分はこの回は行ってないです))やJSConf EU 2017で上がった議題の話がありました。(主にv8の最適化の話) 自分のwbepack3の発表を期待していた方はスミマセン(資料作ってなくて発表できなかったので。。。) 特に、

A very quick introduction to dependent type and its usage in TypeScript

Progressive Responsive Connectivity Independent App-like Fresh Safe Discoverable Re-engageable Installable Linkable Progressive Responsive Connectivity Independent => Cache App-like => App Shell Fresh => Cache Strategy Safe Discoverable Re-engageable => Push Installable Linkable

（私の考える）WebRTCの範囲 WebRTCって何を指すのか？というのが時々話題になります。そこで私が考えるWebRTCの範囲をAPIと通信仕様に分けて整理してみました。 間違っているところを見つけたら、ぜひコメントにてご指摘ください！ API プラウザ用API ブラウザ用APIはW3CのWeb Real-Time Communications Working Groupで策定中です。その一覧と、私の解釈を書き出してみます。 WebRTC 1.0: Real-time Communication Between Browsers ... 狭義のWebRTCで、このファミリーの主役。いわゆるPeerConnectionのことで、堂々のNo.1のポジション Media Capture and Streams (getUserMedia) ... ファミリーのNo.2。いわゆるgetUserM

Google Developer Expert in Angular Angular Oslo meetup organizer ngVikings conference organizer

Roppongi.rb #3 Rails x Frontend-Tech

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Web技術でアプリ開発2016特集・第5弾は、プログレッシブウェブアプリ (Progressive Web Apps)をご紹介させていただきます。 はじめに プログレッシブウェブアプリ(Progressive Web Apps)という言葉が初めて登場したのは2015年8月のAlex Russellによる記事Progressive Web Apps: Escaping Tabs Without Losing Our Soulです。当時オフラインやプッシュ通知など、モバイルウェブを飛躍的に進化させる画期的な機能が次々と追加されていた状況において、このムーブメントを呼称するための言葉が求められていました。Google社内でいくつもの候補が挙げられましたが、Service Workerの発案者としてAlex Russellが推したのが、この「プログレッシブウェブアプリ」でした。 また、当初Goog

待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQueryCoffeeScriptAssets Pipeline (sprockets)gemのエコシステムに乗っ

Reactive Programming in JavaScript ( 今回のスライド: HTML版 ) このスライド自体が Bacon.js で書かれた ahomu/Talkie で作られています。Rx系のライブラリに興味を持たれた方は、ぜひコードのほうもご覧いただければ。 アジェンダ What is Reactive Programming ? Reactive in Frontend JavaScript FRP with Reactive Extensions Reactive Programming について紹介しました。今回も懲りずに新ネタでしゃべった次第。Reactive も Functional も若干こわいひとたちが生息しているイメージ（個人の感想です）があるので、遅延評価で飛んでくる斧だけがこわい :P ノイズ避け 率直な感想として、RP/FRP を学ぼうとすると情報

こんにちは！ がねこまさしです。2014年に連載した「WebRTCを使ってみよう！」シリーズですが、内容がすっかり古くなってしまいました。そこで2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしたいと思います。 WebRTCとは？ WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。 API → W3C ビデオ/オーディオのコーデック → IETF APIの策定作業はWebRTC 1.0に向けて大詰めに入っています。またより詳細な低レベルのAPIを定義しているORTCも登場し、将来の統合に向けた動きも始まっています。 コーデックの選定では、ブラウ

React でカスタムコンポーネントを作るとき、コンポーネントの子要素には this.props.children でアクセスできます。 この this.props.children はそのままレンダリングすることもできるのですが、何かしらの Props を渡したくなったらどうするのでしょうか。 ざっくり調べた感じ Stack Overflow とか海外のブログにしか情報が無いようだったのでまとめてみます。 TL;DR いきなり結論から、 this.props.children に直接 Props を渡すことはできません。 代わりの方法として、React.cloneElement() で React要素をクローンする時に Props を渡すことができるので、this.props.children をクローンしつつ Props を渡せばいいようです。 デモを用意しました。 デモ ソース リポ

Actions Actionsはアプリからstoreにデータを送る情報のペイロード。storeに対する唯一のソースだ。 新しいtodo itemを追加することを表すactionの例を示す。 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' } actionsはプレーンなJavaScriptオブジェクトであり、必ずtypeプロパティを持つ。typeは基本的に文字列の定数で定義される。アプリが大規模になれば、別のモジュールに入れて管理すると良い。 import { ADD_TODO, REMOVE_TODO } from '../actionTypes' 完了したtodoにチェックをつけるactionを追加する。配列にtodoを格納しているので、indexで特定のtodoを参照する。 {

こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ

Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gemによるモダンなフロントエンド開発がRailsに導入されることでしょう。 今までのRailsのasset pipelineとは別に、yarnによって依存性を管理しwebpackで結合する独立したjsのビルドシステムがサポートされます。 これによって、以下のような従来のasset pipelineでは解決がむずかしかった問題への解が示されました。 coffee scriptへの依存 npmによる依存性、バージョン管理が難しい javascriptのライブラリが野良gem化されてupdateされない問題 webpacker.gemはyarn/webpackの薄いwrapperとなっていて、加えて幾つかのrakeタスクを追加することでフロントエンド開発をサポートします。 具体的には以下のような機能が提供されます。 y

こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発