For Sale! ampersandjs.comFor Sale! ampersandjs.com Premium domain name ampersandjs.com available for instantly purchase. Invest in a premium domain name to launch your brand. Buy Now
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
Use web workers to run JavaScript off the browser's main thread | Articles | web.dev
In the past 20 years, the web has evolved dramatically from static documents with a few styles and images to complex, dynamic applications. However, one thing has remained largely unchanged: we have just one thread per browser tab (with some exceptions) to do the work of rendering our sites and running our JavaScript. As a result, the main thread has become incredibly overworked. And as web apps g
カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
GitHub - power-assert-js/power-assert: Power Assert in JavaScript. Provides descriptive assertion messages through standard assert interface. No API is the best API.
What is power-assert? is an implementation of "Power Assert" concept in JavaScript. provides descriptive assertion messages through standard assert interface. No API is the best API. With power-assert, you don't need to learn many assertion library APIs (in most cases, all you need to remember is just an assert(any_expression) function) Stop memorizing tons of assertion APIs. Just create expressio
Componentによるフロントエンドのパッケージ管理
直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー兼、依存解決込みのビルドツールです。クライアントサイドについて、JSのパッケージマネージャーやビルダーは既にありますが、Componentは HTML/CSS/JSをセットにして扱うことができます。 npmでいうpackage.jsonと同様に、component.jsonという定義ファイルによって、パッケージの依存関係やリポジトリなどの各種情報を示します。 component/component コア部分のリポジト
Create Something Amazing
At Amaze, we help entrepreneurial innovators turn their big ideas into revenue streams.
ECMAScript 6: TC39 meetings, March–November 2013
TC39 [1] is the committe that currently plans ECMAScript 6 (code-named ECMAScript.next), the next version of the JavaScript language standard. In this blog post, I’m summarizing the highlights of several meetings that they had in 2013, in March, May, July, September and November. Previous blog posts summarized prior meetings. This post is made possible by Rick Waldron’s excellent notes of the meet
JavaScript製のガントチャート·JSGantt MOONGIFT
JSGanttはJavaScript製/Webベースのオープンソース・ソフトウェア。多人数、または複数社が関わるプロジェクトでは一つのタスクの結果が別なタスクに関わっていることが多々ある。そうした時の遅延はプロジェクト全体の調整が必要であり、滞りなく進めるのは至難の業だ。 JavaScriptでガントチャートを生成 そのためタスク間のスケジュールや関わり方を示すのにガントチャートがよく使われる。これまでのガントチャートは画像出力型が多く、生成後の再利用性が今ひとつだった。そんな不満を解消してくれるのがJSGanttだ。 JSGanttはその名の通りJavaScriptによるガントチャート生成ソフトウェアだ。縦にタスクが並び、横に日程が並ぶ。各タスクごとにスケジュールが帯になって表示され、その結果が別なタスクに線でつなげられる。タスクの関連性が見いだせるはずだ。 折りたたんだり表示範囲を変更
GitHub - w3ctag/promises-guide: A guide for spec authors on how to use Promises in prose and WebIDL.
Esprima
Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript). Features Full support for ECMAScript 2019 (ECMA-262 10th Edition) Sensible syntax tree format, with optional node location info Experimental support for JSX, a syntax extension for React Heavily tested (~1600 tests with full code coverage) API Esprima can be used to perfo
Proxy Tutorial
Methods of the handler object that are invoked by manipulating the corresponding proxy are called traps. The full proxy handler API additionally traps calls to new ES5 built-in methods such as Object.keys and Object.getOwnPropertyDescriptor. Fortunately it is not always necessary to implement the full API to build useful proxies, as demonstrated in the following section. A simple profiler Let's co
Mozilla における ECMAScript 6 のサポート - JavaScript | MDN
Array オブジェクトの追加機能 for...of による Array のイテレーション (Firefox 13) Array.from() (Firefox 32) Array.of() (Firefox 25) Array.prototype.fill() (Firefox 31) Array.prototype.find(), Array.prototype.findIndex() (Firefox 25) Array.prototype.entries(), Array.prototype.keys() (Firefox 28) Array.prototype.copyWithin() (Firefox 32) get Array[@@species] (Firefox 48) 新規オブジェクト Map、Set、 WeakMap、WeakSet Map (Firefox 13)
ES6 Promiseの何が美しいのか - saneyuki_s log
この記事は某JavaScript Advent Calendar 2013の2日目ではありませんし、ECMAScript Advent Calendar 2013のn日目でもありません（そんなものは本稿執筆時点で存在していない事を確認しています）。単に締め切りのある原稿を書いていて、疲れてしまって好き勝手に文章を書きたかったので、好き勝手に書いているだけです。 接頭辞にES6とつけるべきかDOMとつけるべきか迷うのですが、unwrappingされてるPromiseの話です. WHATWG DOM Standardからもそれが直接参照されてますし、ES6 Promiseあたりと呼んでおくのが妥当でしょうか。 何がいいのか ECMAScriptとDOMの大合同コンセンサスが出るなどすっかりECMAScriptのためのDOM感が増しつつ有る今日この頃ですが、この幸せな点は何と言っても標準化された
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。 勉強会で使用したスライドとコードを置いておきます。 D3で地図を描こう！ 1 D3で地図を描こう！ 2 サンプルコード (サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください) スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。 まぁ、それでも多少参考になれば良いかなぁと。 ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足で
AngularJS style guideを日本語訳した - Happy New World
mgechevさんがAngularJSのベストプラクティス＆スタイルガイドをまとめてるのを見つけたから訳してみました。翻訳や変なところがあったらPullReqお願いします。 https://github.com/mgechev/angularjs-style-guide/blob/master/README-ja-jp.md 経緯 Macbookの発表に備えて自分のdotfilesを整えるついでにgithubでdotfilesを彷徨っていたら、VNCクライアントをJSで書いちゃったりしてる 、mgechevさんががAngularJSのベストプラクティス＆スタイルガイドをまとめてるのを見つける。 ↓ おお、これは素晴らしい！ ↓ あれ、他の言語はあるのに日本語訳ない ↓ AngularJSを勉強するついでにContributeも出来るいい機会じゃないか！ ↓ やってしまえ！ ということでAn
ECMAScript のレキシカル環境 〜catch 節のスコープのお話〜 - vivid memo
Twitter で ECMAScript (JavaScript) の catch 節のスコープについての話をみかけた ので、ちょっと調べてみた。 catch( err ) の err のスコープは？ 例外処理の機構で使用される catch( err ) ですが、この err はどの範囲で有効なのか？ 普通に考えると catch 節内だけで有効な気がするけど、ECMAScript では一般に関数ごとにスコープを持つと言うし、関数全体？ まさかグローバル？ (function test() { try { throw 0; } catch( err ) { print( err ); // 0 } print( err ); // [ERROR] err is not defined })(); 試したところ、どうやら catch 節内だけのスコープがある模様。 ECMA-262 (5th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
– Tech Pro Shopping
famo.us on CodePen
