フロントエンドにテストを導入 - Qiita
2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha？webpack？karma？それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。（数日前の自分です） 全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。 前提 Nodejs,npm,chromeが導入済みであること 流れ Step 表題 目的
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
Node.jsでフォルダ内の全HTMLをキャプチャし画像化 - Qiita
画像化するコード 画像化するにはphantomjsを利用します。メインの実行ファイルと、画像生成プロセスの2つコードを用意するのがポイントです。 main.js : メインの実行ファイル 非同期処理になるので、Promiseとか使っています。 // 定数宣言 (必要に応じて書き換えてください) const TARGET_FOLDER = './samples'; // キャプチャーしたいHTMLのフォルダー const OUTPUT_FOLDER = './imgs'; // 保存先のフォルダー const VIEWPORT_W = '1024'; // viewportの横幅(幅：単位px) const VIEWPORT_H = '768'; // viewportの高さ(幅：単位px) const IGNORE_LIST = ['.DS_Store', 'Thumbs.db', '.i
Hogan.js
Getting started Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates. If you're developing with Node.js, just use NPM to add the Hogan package. $ npm install hogan.js Alternatively, drop hogan.js in your browser by adding the following script. <script src="h
JavaScriptの動かないコード (中級編) Ajax読み込み時に「80020101」のエラー - 主に言語とシステム開発に関して
連載目次へ クイズ…下記のコードが意図した動作をしないのは，どうしてですか。（制限時間１分） やりたいこと： Ajaxを使って，GETで外部ページを読み込む。 a.html上でリンクをクリックすると，b.htmlを読み込み，p要素の中に流し込む。b.html中にはJavaScriptのコードがある。 下のコードでは例としてprototype.jsを使っているが，別にjQueryでも，素のXMLHttpRequestでもよい。 a.html <a href="#" onclick="f1()">ここをクリック</a> <p id="my_target_id">この中が書き換わります。</p> <script type="text/javascript" src="prototype.js"> <script language="JavaScript"> ＜!-- function f1()
【Googleマップ】Google Maps API V3 で複数のオリジナルマーカーを表示、マーカーをクリックで新規ウィンドウのリンクをつける｜ホームページ制作・アプリ開発のハウツーをより実践的に。- ウェブ式 –
Warning: Use of undefined constant WPLANG - assumed 'WPLANG' (this will throw an Error in a future version of PHP) in /home/users/1/qood/web/webshiki/admn/sitedata/plugins/head-cleaner/head-cleaner.php on line 270 HOME → Warning: Use of undefined constant url - assumed 'url' (this will throw an Error in a future version of PHP) in /home/users/1/qood/web/webshiki/admn/sitedata/themes/webshiki/singl
【JavaScript】JavaScriptの正規表現で変数を使う - だめだま
JavaScriptで正規表現のmatchを使う場合 通常 hoge.match(/abc/); とするけどabcの部分は変数ではなくてStringとして認識されてしまうので var abc = "efg"; hoge.match(/abc/); としてもefgを検索してくれない。 そこで、変数を入れたい場合は正規表現オブジェクトを使う var abc = "efg"; reg = new RegExp(abc); hoge.match(reg); とするとefgで検索してくれるようになる。 細かい検索条件も設定可能 reg = new RegExp("^" + abc + "[0-9]+$");
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
jQuery.validationEngine v3.1.0 Looking for official contributors This project has now been going on for more than 7 years, right now I only maintain the project through pull request contributions. However, I would love to have help improving the code quality and maintain an acceptable level of open issues. Summary jQuery validation engine is a Javascript plugin aimed at the validation of form fiel
【Javascript】ブラウザの表示領域サイズ取得について - すたら日記
最終更新: 2018年8月2日 目次 結論 実験 実験結果一覧表 古いブラウザでの実験結果 結論 以下のように求められます。 ※ IE6, 7, 8は対象外です。 1. 表示領域の幅 (スクロールバー含まず) = document.documentElement.clientWidth; $(window).width(); // jQuery 2. 表示領域の高さ (スクロールバー含まず) = document.documentElement.clientHeight; $(window).height(); // jQuery 3. 表示領域左上のX座標 (文書左端から表示領域左端までの距離) = window.pageXOffset; window.scrollX; // pageXOffsetと同等(エイリアス) $(window).scrollLeft(); // jQuery
多次元配列のソートまとめ
■PHP1 <?php $list = array( array("no"=>3, "cat"=>5, "body"=>"リンゴ"), array("no"=>2, "cat"=>4, "body"=>"みかん"), array("no"=>4, "cat"=>5, "body"=>"ナシ"), array("no"=>6, "cat"=>3, "body"=>"バナナ"), array("no"=>1, "cat"=>4, "body"=>"オレンジ") ); usort($list, create_function('$a, $b', 'return $a["cat"]-$b["cat"];')); print_r("<pre>"); print_r($list); print_r("</pre>"); ?> ■PHP2 $hoge = array( array('id'=>'3','
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
「テキストボックスのフォーカス時に選択状態にする」を少しだけクロスブラウザ対応した - Qiita
var input = document.getElementId("test"); input.onfocus = focusInput; function focusInput(e) { if (e) { var target = e.target; target.select(); } } var input = document.getElementId("test"); input.onfocus = focusInput; function focusInput(e) { if (e) { (function(e){ setTimeout( function() {setFocus(e);}); })(e); } } function setFocus(e) { if (e) { var targetTag = e.target; targetTag.focus(); //とり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの継承について
フォームのテキストエリアをより使いやすくするテクニック集
login - 俺の基地