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
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない(というか、そのままだと動かないこともありうる)」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
最近ちょっとはまってるtraceur-compilerについて紹介していきます。 前書き 今回、書いてたら非常に長くなってしまって、ちょっとした薄い本の記事くらいの文量があります。 その代わり、公式ドキュメント + コードの中を読みこんで書いているので、今のところ多分日本では一番詳しい記事かと思います。 すごく長いので章分けしました。興味が有るところだけ読み飛ばしてもらってもいいかと思います。 第一章 traceur-compiler概要 第二章 ES6言語仕様概要 第三章 traceur compilerの使いどころと類似ツール 第一章 traceur-compiler概要 traceur-compilerとは Googleが作っている EcmaScript6 形式で書かれた JavaScript を EcmaScript5 の形式に変換してくれるツールです。"トレーサーコンパイラー"と
BrowserSync livereloadよりbrowser-syncの方がいいよと聞いたので使ってみた。 使い方 npmでインストール $ npm install -g browser-sync 手元のディレクトリにhtmlとcssがあり、html, cssが更新した時にhtmlをリロードしたい場合、 $ browser-sync start --server --files "*.html, css/*css" で、ポート3000番で起動しブラウザ開く。地味に嬉しかったのは3000番が既に使用済みの場合は3001番で起動する(確認してないが多分その後もカウントアップしていき空いてるポート番号で起動するはず) プロキシも--proxyオプションでプロキシしたいホスト名指定するだけなのですごい楽 $ browser-sync start --proxy "プロキシしたいホスト名" --f
第49回 HTML5とか勉強会に行ってきた。テーマは「HTML5最新情報 @Google I/O」だけど、Web Components祭りだったと思う。スタッフなので受付の案内したり、ピザやビールを並べたり、ピザやビールを食べたり飲んだりした。 第49回 HTML5とか勉強会 : ATND 第49回 HTML5とか勉強会 - Togetterまとめ 動画が上がってる。はやい! セッションはこんな感じ。 第49回HTML5勉強会 Google I/O 2014サマリー from Takuya Oikawa Google I/O サマリー @takoratta Web Componentsが変えるWeb開発の未来 泉水翔吾 @1000ch Material Design + Polymer 佐藤歩 @ahomu Material Design と Polymer - HTML5とか勉強会に登壇
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
マイクロソフトがGitHubに登場。TypeScriptのプロジェクトをCodeplexからGitHubへ移行 「みなさんからのフィードバックを受けて、GitHubへ移行しました」(We’ve heard your feedback, and we’re making the move to GitHub.)。米マイクロソフトはオープンソースで開発しているプログラミング言語「TypeScript」のプロジェクトを、それまで使用していたCodeplexからGitHubへ移行したことを明らかにしました。 これまでTypeScriptは同社のオープンソース向けプロジェクトホスティングサービス「CodePlex」の上で運営されていました。しかしCodePlex上のTypeScriptプロジェクトで受け付けていたコミュニティからのフィードバックによってGitHubへの移行を決定しました。 現在、Co
はじめに ECMAScript6についてのは色々情報がでてきていて、またライブラリとかでも一部採用してるケースも見られてきました。 ES6 – Next Generation Javascript ES6 – episode 1 Rewriting A WebApp With ECMAScript 6 — TasteJS 等など、色々紹介してるサイトはありますが、その中でもlukehoban/es6featuresはコード例が豊富に載っていて面白そうなので、写経してみました。 現在のES6とは harmony:specification_drafts [ES Wiki]で公開されてるES6の仕様やES6FeatureSet.xlsx – Microsoft Excel Web App 等を見るとAPI的に固まってきている部分は何となく見える感じはします。 AngularJS 2.0 | A
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
chai というアサーションライブラリがあって、テストフレームワークの Mocha と合わせてよく使われていると思うのだけど、その chai のプラグインを書いた。 chai-deep-closeto このプラグインを使うと配列にも closeTo が使えるようになる。 expect([ 1.5, [ 2.5, 3.5 ], 4.5 ]).to.be.deep.closeTo([ 1, [ 2, 3 ], 4 ], 0.5); chai のプラグイン chai はプラグインで便利機能を拡張する前提で設計されていて、各種プラグインが公開されている。たとえば有名なのではテストスパイとかスタブを扱う Sinon.JS を chai のインターフェースで使える sinon-chai とかがある。他にもある → Chai Plugins chai のプラグインの書きかた 簡単に書ける。プラグインを適
前置き 最近、ウェッブフロントエンドエンジニアらしく各種JavaScriptのライブラリを眺めて、調査・選定しているのだけれども、その過程を通じたこととして、多くのライブラリが、ドキュメントのAPIの説明が貧弱すぎる。 jQueryのドキュメントが腐っているというのは既に広く知られた事実であると思うし、そうでないならば積極的に既知の事実として腐っている事を広めて行くべきであると強く思うが、jQueryに限らずとも、ドキュメントが満足な形で整理されていないのをひしひしと感じる。 この手のものでよくドキュメント化されている部類だと感じるBackbone.jsですら、仮引数の名称と定義のみしか書かれておらず、肝心の引数が備えるべきメンバや、引数の型情報が明示的に記述されていない。そのため、APIを俯瞰し、自分の欲しい情報がどこに詰まっているのか・どのように取得できるのか・DOM標準もしくはECM
最近のWebブラウザの進化によってJavaScript開発はとても便利になっています。ブレイクポイントを差し込んだり、コンソールを使うことでどんどん開発が進められるようになっているでしょう。 そんなJavaScript開発をさらに便利にしてくれそうなソフトウェアがDeb.jsです。ごくごく小さなデバッガーです。 Deb.jsの使い方 Chrome ウェブストアで公開されていますので、インストールします。 こちらがインストール画面です。 インストールされるとDebアイコンが追加されます。 こんな感じでURLに?debjsを追加すると自動で読み込まれるようになります。 任意の関数に.deb()を追加するとスタックとレースされるようになります。 引数や返り値、実行時間などもとれて便利です。 色分けもされるので分かりやすいですね。 開発効率向上を考えると、デバッグ方法は色々知っておいて損はないでし
JSer.info #184 - Chrome 36.0がリリースされました。 同じくChromium 36ベースのOpera23もリリースされています。 Operaのリリースノートの方が変更内容が分かりやすいかもしれません。 Dev.Opera — Opera 23 released Chromium Blog: Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe() 何故かWeb Components(主にPolymer)に関する記事が色々出ていたのでまとめて紹介します。 Web Componentsの概要について知りたい方はまずTender Surrender: なぜ Web Components はウェブ開発に革命を起こすのかを見るといいでしょう。 The roles of AngularJS an
最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ
Overview runtime.js is an open-source library operating system (unikernel) for the cloud that runs JavaScript, can be bundled up with an application and deployed as a lightweight and immutable VM image. It's built on V8 JavaScript engine and uses event-driven and non-blocking I/O model inspired by Node.js. At the moment KVM is the only supported hypervisor. It tries to be compatible with npm modul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く