JSer.info #197 - Firefox 33.0がリリースされました。
ChromeやOperaは既にデフォルトサポートになっている<picture> 要素が、フラグ付きでFirefoxにも追加されました。
また開発者ツールにCSS周りの機能や、Developer Toolbarのコマンドなど色々追加されているので以下の記事を見てみるといいと思います。
Firefoxの開発者ツールの開発について興味がある方は以下のスライドも見てみると面白いかもしれません。
- Five Stages of Development - Nordic.js
- ▶ Nordic.js 2014 • Robert Nyman - Five Stages of Development - YouTube
ReactJS For Stupid Peopleという記事は最近よく見るReactとは何かについて整理されています。
React自体はViewのみを扱うライブラリですが、Fluxアーキテクチャの話と混ざって話されたりするため、Reactの役割が大きく見えることがあります。この記事では特徴や良い所、良くない所についてまとめられています。
React v0.12 RCがリリースされていますが、
JSXまわりの変更やAPIのリネームなど整理してる感じがするのでReactがどういうものかについて知るにはいい機会なのかもしれません。
Yahoo社からFormatJSという国際化のためのJavaScriptライブラリがリリースされました。
各地域別の数値、日付、相対時間、複数形の表現などの国際化対応の仕組みを提供するモジュールとそれらを使ってローカライズした画面を作成するHandlebarsやReact、Dust等のテンプレートエンジンと一緒に使える拡張を提供しています。
このライブラリはECMAScript Internationalization API Specificationがベースとなっていて、まだ全てのブラウザがECMA i18n APIをサポートしてる訳ではないので、polyfillとしてIntl.jsと一緒に使うようになっています。
またECMA i18n APIでは、相対時間や複数形のローカライズについてのAPIは用意されていません。
そのため、FormatJSではUnicode CLDRのデータとICU MessageFormatで書いてローカライズするようになっていて、そのフォーマッター等はそれぞれモジュールとして提供されています。
ECMA i18n API 1st editiionでは、ICU MessageFormat等の書式については仕様がありませんが、次期バージョンではMessage Formattingが検討されているようです。そのため、すべてがECMA標準仕様に則ったものではなく拡張もありますが、FormatJSはICU MessageFormatをASTにパースするパーサも用意しているので次期仕様への配慮もしやすい作りになっている気がします。
またコード自体もES6 moduleを使って書かれていて、それをgrunt-bundle-jsnext-libでbundle化したものを配布しているようです。
JavaScriptを使った国際化については以下の話が面白いです。
- Localize your frontend // slidr.io
- 動画: https://www.youtube.com/watch?v=Lu4mholN2lA&index=3&list=PL37ZVnwpeshF8Sr8JZNFU6boKMmod9YBw
- jimdo.com の国際化対応の話
- WEB+DB PRESS Vol.78に「フロントエンドの国際化」について書いた！ - teppeis blog
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Firefox — Notes (33.0) — Mozilla
www.mozilla.org/en-US/firefox/33.0/releasenotes/
Firefox 33リリース。
OpenH264のサポート、CSPのバックエンドが新しくなりました。
また、<picture>をフラグ付きでサポート、開発者ツールの機能追加等が行われています。
- Firefox 33 for developers - Mozilla | MDN
- Firefox 33 サイト互換性情報 - Mozilla | MDN
- Firefox 33 が正式リリース、Open H264 や @counter-style 規則のサポート、OMTC の有効化など | WWW WATCH
- CSP for the web we have | Mozilla Security Blog
Release Dragon Master · sass/libsass
github.com/sass/libsass/releases/tag/3.0
SassコンパイラのC++実装であるlibsass 3.0リリース。
Sass 3.4の動作に近づけていく改善が中心。
@extends、Map、call()のサポート、Windowsでの動作を改善など
jQuery UI 1.11.2 | jQuery UI Blog
blog.jqueryui.com/2014/10/jquery-ui-1-11-2/
jQuery UI 1.11.2リリース
React v0.12 RC | React
facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html
React v0.12 RCリリース。
JSXに破壊的な変更が多く含まれている。
@jsx pragmaは不要に、JSXタグは小文字or-が含まれてるならHTMLとして扱うように、Spread attributesをサポートする代わりにtransferPropsToは非推奨にする等など
A new ES6 draft, Rev28
esdiscuss.org/topic/a-new-es6-draft-rev28
ECMAScript 6 Draft Rev 28リリース。
Android Lollipop | Android Developers
developer.android.com/about/versions/lollipop.html#WebView
Android 5.0以降のChromium WebViewはGoogle Playからアップデートすることが出来るようになっている
アーティクル
Exploring Angular 1.3 - One-time bindings – Blog | thoughtram - Extend your memory
blog.thoughtram.io//angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html
Angular 1.3で導入されたone-time bindingについての解説
ReactJS For Stupid People
blog.andrewray.me/reactjs-for-stupid-people/
Reactとは何かについて。
ReactはViewのみを扱うライブラリ、DOM APIでHTML作成は大変なのでJSXというSyntaxを持つ、Reactはサーバでも使える。
良くない点としてドキュメントサイトの入り口のわかりにくさやサイズなどがあげられています。
Fluxはコンセプトであってライブラリではないという話やどういう時に使うべきかについても書かれている。
platform.js ⇒ webcomponents.js
blog.polymer-project.org/announcements/2014/10/16/platform-becomes-webcomponents/
platform.jsはwebcomponents.jsという名前にリネームされる。
bower等を利用して入れている場合は影響があるので参照するファイルを変更する必要がある
自動検出と自動修正でCSSを保守する - Qiita
qiita.com/r7kamura/items/7addebc61d177313a29d
scss-lintとcsscombを使ってSassのLintと修正を行い保守可能なCSSを維持する事について
status.modern.IEの見方 | Web Scratch
efcl.info/2014/10/19/modern-ie/
status.modern.IEで公開されているIEの開発ステータスの読み方と、その変更を見ていく方法について
Announcing key advances to JavaScript performance in Windows 10 Technical Preview - IEBlog - Site Home - MSDN Blogs
IEのJavaScriptエンジンであるChakraの最適化について。
Baseline コンパイラ的なASTを中間層として用意してJITコンパイルする仕組みなどについて書かれている。
最適化としてやっていることについてで、
オブジェクトの同値の場合にインラインキャッシュ、コードのインライン化、Arrayアクセスの最適化、mark&sweep GCの改善等に触れている
NPM 2.0 and how it helps avoiding global dependencies | 4waisenkinder
4waisenkinder.de/blog/2014/10/18/npm-2-dot-0-and-the-much-better-star-npm-run-star-command/
npm 2.0からnpm run scriptに引数を渡せるようになった件とnpm run scriptでは自動的にnode_modules/.binのパスを解決してくれる事について
mattdesl/module-best-practices
github.com/mattdesl/module-best-practices
Node.jsのモジュールベストプラクティス。
モジュールのファイル名、npmモジュールの作成、コンストラクタのパターン、テスト、バージョニング、package.jsonの情報、npmignore、npm run-scriptについて等
サイト、サービス
Browser Platform Status Tracker
platformstatustracker.azurewebsites.net/
IEやChromiumのステータス情報から差分の情報をまとめてくれているページ。
どの機能がどのバージョンで入ったか、prefixが外れたか等が分かる
Lapple/ErrorBoard
Node.jsで動くJavaScriptのエラーを収集して見るためのダッシュボードアプリ
Functional Programming in Javascript
Arrayのmapやfilter等について学べるエクササイズ。
一つのエクササイズを完了させると次の問題へ進めていって全部で40個以上ある
https://github.com/jhusain/learnrx
ソフトウェア、ツール、ライブラリ関係
kriasoft/react-starter-kit · GitHub
github.com/kriasoft/react-starter-kit
React/Fluxパターンで全部入りな感じのStarter Kit。
シングルページアプリケーション的な構成になっている。
FormatJS
数字や日付、文字列の国際化対応のためのライブラリ。
150言語以上に対応しており、HandlebarsやReact等のテンプレートの対応も用意されている。
ECMA i18n APIやUnicode CLDR、ICU MessageFormatなどの標準の上に実装されている
- Announcing Format.JS: Internationalize your web apps on the client & server | Yahoo Engineering
- 米Yahoo!が国際化のためのJavaScriptライブラリ「Format.JS」を公開 | SourceForge.JP Magazine
medikoo/memoize
memorizeを行うためのライブラリ。
多彩なキャッシュをするルールが用意されていて、特定の引数をキーにしたり、非同期対応、Weakなmemorizeなども用意されている
No9/localstorage-down
github.com/no9/localstorage-down
leveldownのdbとして使えるlocalStorageのバックエンド実装。
uber/potter
uber社のNode.jsのプロダクションプロジェクトを作成するscaffold、CIの設定等を行うpluginで拡張可能なコマンドラインツール
http://raynos.github.io/nodeconfeu2014-talk/
box/leche
mockするためのオブジェクト作成やパラメタライズドテストを行うData Providerの機能が用意されているテストの補助ライブラリ。
MochaとSinonと共に使う事を想定して作られている
dgs700/angular-custom-element
github.com/dgs700/angular-custom-element
Angular 2.0ではWeb Components対応が予定されているが、1.xでもCustom Elementsを使ってディレクティブを定義出来るようにするライブラリ
Knockout Secure Binding – Brian M Hunt
brianmhunt.github.io/articles/knockout-plus-content-security-policy/
KnockoutのCSP対応なバインディングを出来るようにするライブラリ。
new Functionを使わないようにすることでCSPに対応している。
othiym23/async-listener
github.com/othiym23/async-listener
Node.js 0.11のasyncListener APIのpolyfillライブラリ。
captainbrosset/pagerecorder
github.com/captainbrosset/pagerecorder
Firefoxの開発者ツールでページの変更を記録するアドオン。
どのようなイベントがおきて、どの要素が変更されたか等を一覧できる
react-hot-loader · Pure JS live-editing for React
gaearon.github.io/react-hot-loader/
Reactを使ったコードのLive Reloadを行うためのWebpackのloaderに指定するプラグイン
書籍関係
Learning Ember.js by Blake Erickson [Leanpub PDF/iPad/Kindle]
Ember.jsとEmber CLIについての基本的な使い方から学べる書籍
