今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
IE8以下でレスポンシブWebデザインを実現するRespond.js
レスポンシブWebデザインはディスプレイサイズ（特に横幅）に合わせてデザインを最適化する事で、1URLで全てのデバイスに対応できることが強み。 導入することで最も威力を発揮するデバイスはスマートフォンですが、マーケティング的にIEでもレスポンシブWebデザインが機能（閲覧可能）した方が良いケースもあるでしょう。 そういった状況下でお勧めするのがRespond.js。 Respond.js（github） Respond.jsとは IE6～8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするpolyfill（※）。 ネイティブで非対応の機能をpolyfillで実現すると、大半が処理が重くなったり動作が不安定など実用的ではないですが、Respond.jsは高速かつ安定しています。 ※非対応のブラウザに相応のインターフェースを実装 Respond.j
Refresh-SF - Online JavaScript and CSS Compressor
Online JavaScript/CSS/HTML CompressorThis is a web interface to minify your JavaScript, CSS and HTML. This tool uses UglifyJS 2, Clean-CSS and HTML Minifier. You can easly change the defaults below the textarea. Further ReadingIn my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. By modifying or avoiding these coding patterns, yo
JavaScriptでCSSアニメーションを自在に制御可能なライブラリ「Dynamics.js」を試してみた！
「CSSでアニメーションは難しい！」とか、「JavaScriptで全部制御したい！」…という人にはオススメのライブラリ「Dynamics.js」のご紹介！ コードが非常にシンプルで扱いやすいのが特徴で、単純なWebサイトへ簡単に動きを付けられるようになります。 使い方！まずは、Downloadページから最新版の「Dynamics.js」をダウンロードしましょう。 2015年6月現在の最新版は「0.0.3」となっています。(恐らく今後も活発にバージョンアップされていくと思います…) あとは、HTMLコード内でDynamics.jsを読み込めば、準備OKです！ index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dynamics Sample</title> <script src="dynamics.js
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
JavaScript、「==」（イコール2つ）と「===」（イコール3つ）の違い｜マコトのおもちゃ箱 ～ぼへぼへ自営業者の技術メモ～
あんま意識しないで使っていたのですが、 よく考えたらJavaScriptさんって「==」（イコール2つ）と 「===」（イコール3つ）があるんですよね。 何が違うの（－－？ と言う訳で調べてみました。 「==」（イコール2つ）を「等価演算子」、 「===」（イコール3つ）を「厳密等価演算子」と呼ぶそうです。 「厳密等価演算子」は型まで含めて比較するんだそーな。 つまり var num1 = 1; var num2 = "1"; if(num1 == num2){ alert("hoge"); } if(num1 === num2){ alert("hoge2"); } とか書くと"hoge"だけ出てくる訳ですな。 num1は数値でnum2は文字だから。 えっ？別に大した事無いって（－－？ いやいや、大したことありますよ。 等価演算子「==」（イコール2つ）ですと var num1 = 0;
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
http://onlineconsultant.jp/pukiwiki/?jQuery%20%E5%A4%A7%E3%81%8D%E3%81%AA%E5%9B%B3%E3%81%AB%E3%80%81%E9%83%A8%E5%88%86%E7%9A%84%E3%81%AB%E8%AA%AC%E6%98%8E%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B
[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita![[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b522995e49410a98e38a0602e0c9ea8df6e44d4d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFNCVCQiU4QSVFMyU4MSU5OSVFMyU4MSU5MCVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVCMCVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU5MiVFNCVCOCU4QSVFMyU4MSU5MiVFMyU4MiU4QiVFMyU4MCU4MWNvbnNvbGUlRTMlODIlQUElRTMlODMlOTYlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQUUlRTklOTYlQTIlRTYlOTUlQjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc4Yjg5YTg5NTYwYjAxNDRjMzQwMjk1YjJhNGUyNTM4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXNoaXJhMjMzOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTMzNDU5OTkwZjkzNWRiZWM3MDA4MWMyODVjOTIyZDE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K144Kk44OQ44O844O744OQ44K6%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D96abebc51c4d96ee1ecf0185b536be1e)