elmでやってみるシリーズ9: JavaScript連携(JSのevalを呼ぶ) - uehaj's blog
Elmでやってみるシリーズ9: JavaScript連携(JSのevalを呼ぶ) Elmではportというものを使用することで、ElmからJSの機能を呼ぶことができます(→Ports: Communicate with JS)。 portは名前がJS側に公開されるSignalです。 portには入力portと出力portがあります。 入力port: JS→Elm Elm側では予約語portを指定して、型宣言のみをする。 port evalIn : Signal String JS側から以下のいずれかの方法で値を送り込む。 初期値を Elm.embed()などでマップで与える。 ＜Elm.embed()などが返すelmモジュール＞ports.ポート名.send()で送る。 出力port: Elm→JS Elm側では予約語portを指定して、Signalを定義する。 port evalOut
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
JavaScriptフロントエンド開発の昨今
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
require.js 環境で mocha + expect + testem を使った JavaScript テスト - naoyaのはてなダイアリー
先日書いた自分用アプリケーションのひな形 http://d.hatena.ne.jp/naoya/20130503/1367581629 http://d.hatena.ne.jp/naoya/20130504/1367640512 これに、JavaScript のテスト環境も追加したい。 結論からいくと、フレームワークには mocha + expect、ランナーは testem を使うことにした。ついでにテストダブルライブラリとして Sinon.js も有効にした。 ちなみに今回の文脈は End to End のテストではなくてユニットテスト周りのおはなしです。 mocha + expect JavaScript のこの辺のテスト周りは今もいろいろなツールの整備が進んでいて、今回採用した以外にも Jasmin や QUnit そのほか色んな物がある。昨今の状況に関しては 先日の HTML
Niigata.LL で JSでTDDをどう実践しているのか をトークしました - .blog
Niigata.LL ATND NiigataLL by dictav ポータルサイト ポータルサイトの方を見てもらうとわかりますが、VBAとかPowerShellとかもあって面白かったし、飛び入りで来てトークしてくれた方もいて面白かったし、PHPを話す人が居なかったのはなにか陰謀があったんじゃねーのかとか妄想できるし、濃密で良かったですよ。 トークタイトル:「JS TDD(and test) with your language」 Webアプリを作っていると得意（メイン）の言語とは別に JavaScript に触れざるを得ないプログラマは多いんじゃない？ という観点で、非JSer対象にJSのTDD周りの話を。 ※ 余談ですが、Niigata.LL では 18名の方の参加がありましたが、主にJavaScriptを書いているというJSerは2名ほど。開催日現在で Node.js 使っている方
プロトタイプ汚染とループ - latest log
脳内棚卸 Prototype.js と プロトタイプ汚染(昔話) jQuery が登場する以前、Prototype.js という JavaScript ライブラリがありました。 Prototype.js は、JavaScript OOP の普及期(2005～2007年頃)に多くのサイトで活用されました。 Prototype.js は Object.prototype や Array.prototype 以下に、Ruby 由来のメソッドを拡張することで、 JavaScript に Ruby 感をもたらし、ブームを起こしました。 当時の JavaScript(ES3: ECMAScript262-3rd) には、 言語仕様として Object.prototype を安全に拡張する方法が存在せず、 Prototype.js はしばらく後に 汚染(pollution) と呼ばれる問題を起こしてしま
niw.at — "use strict"
最近のモダンな JavaScript では、必ず "use strict" というのが書かれていると思います。この使い方を雰囲気ではわかってるけど、正しく理解していない場合が自分も含めて多いと思ったので書きとめたいと思います。 ちなみに、"use strict" でググると Perl のそれが出てきますが、Perl の話はしません。あとセミコロンの話もしません。 "use strict"とはそもそもなにか "use strict" は、Use Strict Directive と呼ばれています。 これは ECMA-262 の 14.1 Directive Prologues and the Use Strict Directive によって示されています。 A Use Strict Directive is an ExpressionStatement in a Directive Pro
HTML5 CanvasでSKKを実装してみた - inajob's blog
http://inajob.no-ip.org:10080/canvas_skk/canvas_skk.html Canvasでテキストエディタを作るともっと便利なエディタになるのではないか？ 的なものを考えたのだけれども、日本語だとIMEとのやり取りが面倒だな… ということで勢いでSKK（のようなもの）をJavaScriptで実装してみました。 将来的にはIMEの状態みたいなものがブラウザから取れるようになるといいなー なんて思ったりしました。 AjaxIME( http://ajaxime.chasen.org/ )とかとは違い辞書を始めにダウンロードして完全にローカルで動作しています。
本の虫: QuirksBlog: HTML5のドラッグ＆ドロップはクソだ
QuirksBlog: The HTML5 drag and drop disaster QuirksBlogで有名なPeter-Paul Kochさんが、HTML5のドラッグ＆ドロップに関して、酷くののしっている。かなり好い文章で、興味深かったので翻訳してみた。記事が長いので、blockquoteを使うのは御免を被る。 一日半もテストして、HTML5 drag and drop moduleはクソなばかりか、ゲロみてえな臭いがプンプンするってことが、いやというほど分かったね。 コイツはHTML5規格から、ソッコーで消すべきだし、もっとまともな規格が制定されるまでは、現行ブラウザは、この機能を、一刻も早く無効にするべきだ。 Web開発者は、HTML5のドラッグ＆ドロップを使うな。絶対使うな。RFC2119で規定されているMUST NOTの意味で使うな。使いたきゃ、従来通りのスクリプトで実装
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
DeNA、HTML5開発支援フレームワーク「Arctic.js」を オープンソースとして公開 - [DeNA] 株式会社ディー・エヌ・エー
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
inf-js で v8 を使う - 主題のない日記
emacs で JavaScript のコードを記述するのであれば js2-mode が便利であることはよく知られている。 http://code.google.com/p/js2-mode/ 詳しいことはあらためてここで取り上げる必要もないだろう。 一般的な作法に則ってインストールするだけで特に躓くこともない。 さて、書いたら実行したいわけだが、 Lisp 系言語でよくやるように対話的なモードがないものかと探してみたところ、 inf-js を発見した。 http://github.com/bkyle/inf-js/tree/master デフォルトでは Rhino を使うようになっている。 私は今流行の v8 を使おうとドキュメントに従って設定を開始したわけだが、色々と素直にいかなかったので経緯を記録しておくことにする。 予め断わっておくが、アドホックな処置である。 設定 まず私自身が行
JavaScriptの巧い書き方 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
第3回 変数の宣言とスコープ ― ＠IT
JavaScriptが、いま注目を浴びている。 長い冷遇の時代を経ながらも、Ajaxという技術の登場とも相まって、JavaScriptの価値はいままた確実に見直されつつある。その過去の凋落と近年の華々しい脚光は、「復権」と呼んでもよいかもしれない。 本連載は、JavaScript復権のいまこの時代に求められる、JavaScriptという言語への理解を再確認しようというものだ。その連載、第3回となる今回扱うテーマは、「変数」である。どのような言語においても同様であるが、コード上で値を入力し、処理した結果を格納し、また、ほかへと引き渡すすべての基本となるのが変数だ。プログラミング言語を理解するうえにおいて、変数の理解は欠かせない。そして、それはJavaScriptの世界においても同様だ。 本稿では、JavaScriptにおける変数のデータ型に始まり、そのスコープ（有効範囲）の概念、そして、初学
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - facebookarchive/flux: Application Architecture for Building User Interfaces
PayPal社がバックエンドをJavaからJavaScriptへ移行
Mini-Map a document visualisation jQuery plugin
サバクラ両方で動く JavaScript の大規模開発を行うために
http://mbostock.github.io/d3/ex/voronoi.html