Stateless な React Component の記法をまとめてみた - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
第68回HTML5とか勉強会の資料です。
Facebook、JavaScriptの新パッケージマネージャ「Yarn」をオープンソースで公開。npmのリプレースで高速かつセキュアに。パッケージの依存問題も解決
Facebook、JavaScriptの新パッケージマネージャ「Yarn」をオープンソースで公開。npmのリプレースで高速かつセキュアに。パッケージの依存問題も解決 Yarn is a new package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably. Yarnは新しいパッケージマネージャであり、npmレジストリと互換性を保ちつつ、既存のワークフロ
for文の中で非同期関数を使いたいときでも慌てずPromiseする - Qiita
for (var i = 0; i < takusan; i++) { omotai(i, function () { おやっ？ }); } これコールバックの中のものどうやって取るんだ？（だいたい無理） Promiseが使える環境なら、迷わず書けます。 予めPromise化しておくと便利です。bluebirdなどPromise化を助けてくれるライブラリを使うのもいいでしょう。 function omotaiPromise(arg) { new Promise(function (resolve, reject) { omotai(arg, function (err, result) { if (err != null) { reject(err); return; } resolve(result); }); }); }
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
addEventListener()の第３引数の意味とかをちゃんと理解する為のメモ - 今日もスミマセン。
Web上でUIをマジメに作ろうとするとイベントの仕組みをちゃんと理解しておく必要がある。 jQueryとか便利なライブラリつかえばある程度簡単にできるんだろうけど、いろいろ制約あってそれらのライブラリが使えない場合もあるので、ちゃんと理解するためにメモしておく。 イベント伝播の順番 W3Cのドキュメントに分かりやすい図があったので引用する。 The capture phase: the event is dispatched to the target's ancestors from the root of the tree to the direct parent of the target node. The target phase: the event is dispatched to the target node. The bubbling phase: the event
DockerでのNodeアプリ構築で学んだこと | POSTD
以下に紹介するのは、 Docker を使って node.js 用のWebアプリケーションを開発、およびデプロイする際に、私が四苦八苦しながら学んだ秘訣やコツです。 このチュートリアル記事では、Dockerで socket.ioのチャットサンプル を白紙の状態から本番状態へとセットアップしていきます。このプロセスを通じて、そうした秘訣などを簡単に習得していただければ幸いです。特に、以下のような内容について見ていきます。 実際にDockerでNodeアプリケーションを起動する。 すべてをrootとして実行させない（悪いやり方です）。 開発時のテスト-編集-リロードサイクルを短くするため、バインドを使用する。 再構築を高速にするため、 node_modules をコンテナで管理する（これには秘訣があります）。 npm shrinkwrap で、ビルドを反復可能にする。 開発環境と本番環境で Do
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方 ｜ Tips Note by TAM
今回はjQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」について調べてみました。 ■Velocity.js（公式/記事作成時最新バージョン 1.2.2） http://julian.com/research/velocity/ ■GitHub https://github.com/julianshapiro/velocity ■デモギャラリー http://codepen.io/collection/tIjGb/ Velocity.jsの主な特徴 animate()よりアニメーション処理が高速。 animate()と書き方に互換性がある。（velocity()） jQueryを読み込んでいなくても使用できる。（使用しない場合はIE8はサポート対象外） モック機能がある。 animate()よりオプションが柔軟で豊富。 ... Velocity.jsの
フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing
自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク：Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム： browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全
Karma,Mocha,WebPack,gulp,ES6でテストを書いてみた | MAMANのITブログ
はじめに 読者に求める前提条件 本質とは関係無い部分をできるだけ削ったため、いくつか前提があります。 ES6を使っている npmでnode_moduleをインストールできる webpackでビルドしている gulpを使用している (使用していなくても問題はない) 本記事ではテストコードの書き方などは詳しく説明しません。 ゴール ゴールは Gitリポジトリで管理されたコードを以下のコマンドでCIできること です。 $ git clone ${repository} $ npm install $ gulp test 参考サイト 以下を参考にさせていただきました。 WebpackベースのアプリケーションをKarmaでテストする | 踊る犬.net MochaとChaiでやるJavaScriptテスト 利用するモジュール 以下を使用します。 npmモジュールとは別の単位です。 テストフレームワ
フロントエンド開発における革命とビルドプロセスについて - Qiita
こんにちは、freeeでフロントエンドエンジニアをしている @joe_re です。 freee Engineers Advent Calendar 2015の4日目を書きます。 僕からはfreeeで現在進行中の革命について、フロントエンドのビルドプロセスを中心に書こうと思います。 革命 ってなんのこと？ というのはフロントエンドヤンキーこと @ymrl が 2日目で書いたので詳しくはそちらをご参照頂ければ幸いです。 背景 弊社ではRuby on Railsを主軸にしてWebサービスを作っています。 Railsは素晴らしいフレームワークですが、めまぐるしく変化する昨今のフロントエンドについては、このままRailsの用意しているRailに乗ったままでは時代に取り残されてしまう危機感があります。 僕たちは時代に取り残されている場合じゃない。 最先端でかつ適切な技術を用いて未来を切り開いていかなく
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
Babelで始める！モダンJavaScript開発
Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 （実際にはIE9以降から使用することを推奨します） 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同
業務システムに Electron を組み入れるという提案 - Qiita
今日は、業務システムにElectronを組み入れるという提案をしたいと思います。 Electron のおさらい Electronは、Chromium + Node で構成された、デスクトップアプリ作成環境です。ビューは Chromium のウェブブラウザとしての機能がそのまま使えます。また、Node を組み込んでいるためにNodeの資産がほぼそのまま流用できます。サーバー機能とブラウザ機能の両方を持った環境とも言えます。 業務システムをウェブベースで作るの無駄じゃないですか？ いろいろな会社で業務システムと呼ばれる社内だけで使われるシステムがあると思います。そういったシステムは最近では何も考えずにウェブフロントを持ち、APIもウェブベースで、RailsやJavaEEなどを使って作られていたりしませんか？ ウェブサーバーの持つオーバーキル感 ウェブサーバーを構成する技術は割とオーバーキル感の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Not Found
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
