Longevity (or Lack Thereof) in JavaScript Frameworks
Longevity (or Lack Thereof) in JavaScript Frameworks JavaScript Frameworks' longevity is an often overlooked yet critical ingredient in project success. Every six months, a hot new framework hits the mainstream, and our community explodes with excitement. Don't believe the hype. Framework longevity is a critical ingredient in project success. Most technology decision makers use metrics like commun
エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
ES5 + Facebook JSXで書かれたJavaScriptコードベースをTypeScriptに移行させる - CARTA TECH BLOG
皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、表題の通り、実際にプロダクトとして動いている既存のコードベースを、ES5ベースからTypeScriptに段階的に移行させた話について書こうと思います。 移行前のコードベース及び直面した課題 今年の1月頃から、アプリケーションのクライアント側の一部を、以下の構成で実際に開発しています。 言語 ECMAScript 5 主要な依存ライブラリ UI開発にReactおよびFacebook JSX syntax 統合イベントシステムとしてのRxJS テストコードのアサーションにpower-assert ビルドチェーン モジュール連結にbrowserify 環境変数に基づくビルドフラグ用途でenvify コードの解析とLintにESLint 未使用変数や未定
Setting up minimum single page application
React.jsなどを試そうとするときに、browserify? gulp? grunt? webpack? どれ使えばいいのとか、テストは何を使えばいいのかとかよくわからないというのをたまに聞くので、最低限の設定だけどES6で書けたりautobuildやlivereloadが出来る構成のサンプルを作ってみました。 あと、テストはkarma + mocha + power-assertでchromeでテスト出来るようにしています。 本当はpackage.jsonだけにしたかったのですがkarmaの設定だけは別ファイルになってます...。 テストが必要ない場合は、package.jsonの指定だけで大丈夫です。 https://github.com/koba04/minimum-spa-boilerplate git cloneしてnpm installしてnpm startすればいいだけの
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
色んなXSS – nootropic.me
2015/4/16(木)：ページの一番下に追記を記述しました。 その昔、なんとかキャンプというセキュリティのイベントに参加した時「アウトプットが大事」と言われたのを思い出しました。 でも、普通自分の見つけた知識は後生大事に抱えておきたいもんだと思います。 そこで今回はそういった何かしょーもないものを捨てるべく、溜め込んだ色んなXSSのPoCを少し書き出してまとめました。 今まで自分で見つけたものや海外のSecurity Researcher達から収集したものもあります。 さて、今回リストアップしたPoCの見方ですがいくつかの項目があります。 一番上の「手法」はタイトルみたいなものだと思って下さい。 二番目の「PoC」はスクリプトを実行する為のコードです。殆どがアラートが出るだけのスクリプトの為危険なコードは無いつもりですがご自分のブラウザで実行する際は自己責任でお願いします。リンクをクリッ
Request Quest
Congrats, you've stumbed on an unfinished project! Feel free to have a play around, but be aware of its unfinishedness. The game is pretty simple, look at some code & decide if it would trigger an HTTP request in the latest stable release of particular browsers. Beware! What the browsers do isn't always what the specification says they should!
VOYAGE GROUP エンジニアブログ : 今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ
2015年02月05日16:34 カテゴリ 今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ 皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、先日、社内のエンジニア向けに開催した「2014年のJavaScriptのトレンド総まとめ」というコンセプトの勉強会の内容について紹介します。 JavaScriptトレンド総括（2014） from Tetsuharu OHZEKI それでは、スライドに書ききれなかった前提事項について、何点か補足と解説をします。 補足と解説 前提: なぜ「2014年」なのか JavaScriptを用いた開発、特にWebフロントエンドとも呼称されるクライアントサイドJSのトレンドは、非常に速いサイクルでの進化を見せて
カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
hapi.dev
Build powerful, scalable applications, with minimal overhead and full out-of-the-box functionality - your code, your way Originally developed to handle Walmart’s Black Friday scale, hapi continues to be the proven choice for enterprise-grade backend needs. "At Brave, developing web services with hapi allows us to focus on the many problems to be solved, not on the details of the tool being used. h
ライブラリをES2015(ES6)で書いて公開する所から始めよう
この記事はECMAScript 2015の事始めとして、ライブラリをECMAScript 2015で書いて公開するというところから始めるのがいいのではという内容です。 ECMAScript 2015(ES2015)はES6とも呼ばれていてどちらも同じものを指しますが、この記事ではES2015に統一します。 ECMAScriptのバージョンについては次のページを参照してください。 ECMAScript · JavaScriptの入門書 #jsprimer 2018-12-27: 追記 textlint/textlint-rule-helperのmasterはTypeScriptの実装へ変換されています。 Babelの実装はhttps://github.com/textlint/textlint-rule-helper/tree/2.0.1から参照できます Babel から TypeScrip
interact.js for drag and drop, resizing and multi-touch gestures – Mozilla Hacks - the Web developer blog
interact.js for drag and drop, resizing and multi-touch gestures interact.js is a JavaScript module for Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+). Background I started it as part of my GSoC 2012 project for Biographer‘s network visualization tool. The tool was a web app which rendered to an SVG canvas and used jQuery UI for drag
Vue.js + atom-shellでアプリ作ったメモ - マルシテイア
Lolipopという音楽プレイヤーを作った。 初めて使うツール多かったので、メモ。 Vue vue.js Vue.js人気だけど個人的にはあんまり良くわかってなくて、良さを理解するために触ってみようとなった。 Vue.js、サーバ側で生成したHTMLに対し、JSっぽい動きを与えるVMとして使うのに向いてる。 オレオレComponentを量産して組み合わせて使うのはあんまり得意じゃなさそう。 というのも、この前React+fluxでオモチャ作ったんだけど、その時と比べるとComponentの扱いに結構苦労したからだ。 頭のこんがらがり具合はAngularのディレクティブと大して変わらない気がする。 結果としてReact(+flux)の良さを認識することになった。 React、コンポーネントの正体がJSのクラスだし、データのやり取りはEventEmitter使って一方向でやるの推奨なので、「こ
サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス | ゆっくりと…
タイトル、少し変えました 😉 。 第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」では、YSlow や PageSpeed がアドバイスする Tips のうち、HTTP リクエストの削減を優先すべしという「戦略」の話をしました。 また css や js を束ねて結合し、HTTP リクエストを削減する時の「戦術」の話もしました。 今回は、「サイトの特性に適したリソースの配置を行う」ために、「束ねたリソースをドキュメント中にどう配置するのが適切か」を見い出したいと思います。またそのポイントとなるブラウザの基本的な挙動についても言及します。 ブラウザごとの挙動が確かめられる、実験サイト contentloaded.com を立ち上げたので、以下、同サイトから幾つかの例を引きながら話を進めたいと思います。 リソース配置を決める戦術 基本的な戦術 第1部 では、css や js
Sencha ExtJS/Touch で Browserify を活用する - @stomita daily (or monthly, yearly)
Browserifyについて JavaScript には10年以上の歴史がありますが、標準的なモジュールの仕組みが現れたのはごく最近です。CommonJSと呼ばれるこの方式は、サーバサイドJavaScriptの代表格である Node.js に採用された*1ことで徐々に浸透してきましたが、最もJavaScriptを利用する機会の多いWebブラウザ環境においては、JavaScriptをローディングする仕組みの制限もあり*2、長らくこの仕組を使うことはできませんでした。 Browserifyは、こうしたCommonJS形式のモジュール参照を識別して解決し、１つのJSファイルにまとめてくれるプログラムです。配布/テスト前にソースコードにBrowserifyを適用しておくことで、Webブラウザ環境でも必要なモジュールをロード済みの状態で実行できるようになります。 特に、Browserifyは Nod
Get Started React.js
React.jsについての簡単な紹介 Component化、Prop、Stateの使い分け、イベント、addon、mixin、アーキテクチャ、ServerSide Renderingなどについての説明。 一部v0.12で変わった部分の対応もしています。
Maintainable Gruntfile.js - from scratch
さてさて、前回の続きです。 オレはgruntのエコシステムに乗って楽をしたい、でもGruntfile.jsが長くなりすぎて辛い、grunt taskが時間がかかりすぎて辛い、という話は話で分かります。また、それに対する色んな解決策もあります。 最近出た、HTML5Rocksで紹介されてたやり方もあるし、いくつか先人の知恵もあるので、解決していきましょう。 Gruntfile.jsが長くなりすぎて辛い時 https://github.com/firstandthird/load-grunt-configを使いましょう。 いろんなtipsを見てきましたが、このライブラリが一番分かりやすく、かつGruntfile.jsをメンテナブルに保つことができます。 load-grunt-configには3つの機能があります。 grunt pluginの自動ロード機能 grunt configのファイル分割
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fiddler Blog
ウェブパフォーマンスの基礎とこれから
https://legacy.reactjs.org/jsx-compiler.html