JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
JavaScriptコードを圧縮・最適化・難読化する「Closure Compiler」のJavaScript版をGoogleが公開。Node.jsもしくはWebブラウザ上で実行可能
JavaScriptコードを圧縮・最適化・難読化する「Closure Compiler」のJavaScript版をGoogleが公開。Node.jsもしくはWebブラウザ上で実行可能 JavaScriptのコードを実際のアプリケーションとしてデプロイする場合には、コード内のコメントやタブ、スペース、改行などの余計な要素を削除し、変数名を短くしたりコードの冗長性を排除するといった最適化を行うことで、ロード時間を短縮しコードを高速に実行できるようになります。また、コードの中身を簡単に読めないよう、難読化を行うことも多いでしょう。 こうしたJavaScriptコードの圧縮や最適化、そして難読化を行ってくれる代表的なツールの1つが、Googleがオープンソースで公開しているClosure Compilerです。 Closure Compilerはコードの単純な圧縮や最適化だけでなく、JavaScr
オラクル、エンタープライズアプリ向けJavaScriptライブラリ「Oracle JET」をオープンソースで公開。SPA、UIコンポーネント、レスポンシブ対応などを統合
オラクルはエンタープライズアプリケーション向けのJavaScriptライブラリ「Oracle JET」（Oracle JavaScript Extension Toolkit）をオープンソースで公開しました。 Oracle JETは、28の言語と160以上のロケールを備えたアプリケーションの国際化やテンプレートベースのSingle Page Application開発などをサポート。同社が以前から公開していたUIコンポーネントの「Alta UI」のほか、JQuery、KnockoutJS、RequireJS、Hammerなども含まれた統合的なライブラリになっています。 下記はOracle JETで開発されたデモサイトの画面。 Oracle JETには、フォームやボタン、メニュー、テーブルやデータグリッドなどのコンポーネントや、線グラフ、棒グラフ、パイチャート、エリアチャートなど多数のグラフ
Spirit - The animation tool for the web
SpiritThe ultimate tool to create high-quality animations directly in the browser. Important Notice: I want to extend my deepest gratitude to everyone who has supported Spirit over the years. After careful consideration, I have made the difficult decision to discontinue Spirit as a service. Read more ...
Tern - JavaScriptコード解析エンジン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングする上で必須の機能と言えるのがコード補完です。そのためにはまずコードの解析が行われなければなりません。正しくコードが解析されることで、既にある変数やライブラリ名を補完できるようになります。 JavaScriptをコーディングする際に使えるコード解析ライブラリがTernです。Web上はもちろん、Emacs/Vimなどのプラグインも提供されているソフトウェアです。 Ternの使い方 Ternを使うとこんな感じにIDE的な入力補完ができます。 関数に対する引数の表示も。 定義元に飛ぶこともできます。 jQueryやunderscoreにも対応しています。 TernはWeb、Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse
JSPrime - JavaScriptコードの静的解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつてのWebブラウザだけという枠を越えてJavaScriptが活用されるようになっています。サーバサイドはもちろん、スマートフォンアプリや組み込みデバイスでもJavaScriptに注目が集まっています。 そんなJavaScriptの利用領域が広がるのに合わせて考えなければならないのがセキュリティでしょう。そこで使ってみたいのがJavaScriptの静的解析ツールJSPrimeです。 JSPrimeの使い方 JSPrimeはサーバサイド、クライアントサイドの両方で利用できます。下の画像はWebブラウザ版です。 テキストエリアにJavaScriptのコードを入力します。 そして実行すると解析結果が表示されます。document.writeの使用が問題ありと指摘されています。 別なデモ
Visual StudioがNode.jsの開発ツールに。「Node.js Tools 1.0 for Visual Studio」が無料公開。ブレークポイントやステップ実行も可能
マイクロソフトの統合開発ツールVisual Studioを、Node.jsの開発ツールとして使えるようにする拡張ツール「Node.js Tools 1.0 for Visual Studio」（以下NTVS）が無料公開されました。 NTVSはオープンソースとして開発されたツール。Visual Studioの無料版となるVisual Studio CommunityやVisual Studio Express for Webでも利用可能ですので、無料でNode.jsのビジュアル開発環境を揃えることができます。 主な機能は、IntelliSense対応、その場で命令を実行して試せるInteractive Window、パッケージ管理ツールnpmとの統合、ブレークポイントやトレースポイントなどのデバッグとプロファイリング対応、ユニットテストなど。 Interactive Windowでは、Nod
JSHint, a JavaScript Code Quality Tool
Report Cyclomatic complexity Unused variables Undefined variables Warn About == null About debugging code About unsafe for..in About arguments.caller and .callee About assignments if/for/... About functions inside loops About eval About unsafe line breaks About potential typos in logical operators When code is not in strict mode When new is used for side-effects Assume Browser NodeJS jQuery Develo
JavaScriptエディタ「Scripted」をVMware/SpringSourceがオープンソースで公開
VMwareのSpringSourceが、JavaScript/HTML5対応のエディタ「Scripted」をオープンソースで公開しました。 Scripted自身がHTML5/JavaScriptで記述されているためWebブラウザ上でエディタとして動作し、HTML/CSS/JavaScriptのシンタックスハイライト、JSLintによる文法チェック、エディタのカスタマイズ機能などを備えています。エディタ部分の機能はEclipse Orionを再利用したとのこと。 Scriptedの全体画面。右側に別ファイルを表示しているところ。
gruntを使ってCSS/JS周りを自動化するのが、なうでペヤングらしいので使ってみた - 鳥さんの独り言
やほほ。 はてなダイアリーの使いづらいインタフェースなんとかしてくれって思ってる鳥さんだ。 さて、gruntっていうnode.jsを使うと、CSSやJavaScript周りを色々と自動化できると聞いて、使ってみたよ。 gruntでできること「grunt watch」で監視しておくと、上書き保存した際に自動的に色んなことをしてくれるんだ。例えば・・・ ファイルの結合 JavaScriptファイルのバリデーション JavaScriptファイルの軽量化（圧縮、minify）機能を追加すれが、こんなこともできるようになるよ。（他にも探せばあるかも） CoffeeScriptファイルのコンパイル Lessファイルのコンパイル CSSファイルの圧縮 CSSファイルのバリデーション gruntの導入さて、環境を構築しよ〜。 まず、node.jsのインストールと、node.jsのパッケージ管理システムnp
JavaScriptのメモリリークを発見してくれるツール「Leak Finder」をグーグルが公開
ガベージコレクションの機能を備えるJavaScriptのような言語で開発されたアプリケーションでは、基本的にメモリリークは生じないはずですが、それでも回収されないメモリ領域がどんどん増えていくというメモリリーク的な状況は起こりえます。 leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting メモリリークは最終的にはそのソフトウェアの動作を遅くしたり不安定にしますが、短期的には問題なく動作しているように見え、単純なテストでは症状が表れにくいため、発見は難しいものです。 グーグルはこうしたJavaScriptのメモリリークを検出してくれるツール「Leak Finder」を公開したことを、ブログ「Leak Finder: a new to
IEでもJavaScriptをデバッグできるDebugBar 5.2
Microsoft Internet ExplorerでFirebugのようにJavaScriptをデバッグできるプラグイン「DebugBar」が23日、新しいバージョンアップ5.2が公開された。DOM解析や、JavaScriptのデバックといった従来の機能のほか、IETesterでURLを表示させることもできるようになった。 JavaScriptはブラウザさえあればどこでも実行できる手軽なプログラミング言語だが、いざ本格的なアプリケーションを開発しようとするときに、デバッガやIDEといったプログラミング環境が十分ではないようだ。けっきょくブラウザで実行することから、Firefoxのアドオン「Firebug」がよく使われている。また最近では、Google ChromeやSafari 4のように、オフィシャルで開発環境が用意されているブラウザも登場している。 そんな中で最大の難関となるのが、
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
JavaScriptでHTMLをレンダリングするDSL·blingbling DSL MOONGIFT
blingbling DSLはJavaScriptでHTML構造をレンダリングするDSLです。 HTMLでは表示（HTML）とデザイン（スタイルシート）、そしてプログラミング（JavaScript）が混在して動作します。それらを全て一つにまとめあげ、高速に動作するDSLがblingblin DSLです。 デモのコードです。Hello Worldと表示されています。 HTMLソースです。出力の記述はありません。 出力はJavaScriptで行っています。JavaScriptがそのままHTML構造と出力内容を兼ねています。 出力されたHTML構造です。一つ前のコードの内容が出力されています。 blingblin DSLにはblingbling HTMLとblingbling CSSの二種類があります。blingbling CSSを使えばより可読性の高い構造化されたスタイル記述ができるでしょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ctrlshift.net/jsonprettyprinter/
Post by @hamalog
レスポンシブ・ウェブデザイン基礎
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net
