レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
(function(){ var self = this; $("button").click(function(){ // }) })() // 古いコードはglobalに定義された何か SomeLib.prototype.foo = function(){ // } 下記のような特徴があります。 ライブラリ系（jQueryやjQuery.functionなど）は別途読み込み common.jsのようなよくある共通ファイルが存在 1ページ中で、scriptはファイル単位で複数読み込み 原始的なJavaScript配信状態（Sprocketsのようなビルドプロセスとは全く無縁な状態） jQuery以外に、ライブラリ・フレームワークなどは基本入っていない 色々とJavaScript初心者殺しな記法が多い (function(){})()を利用したglobal汚染回避 self = thisの
plainJS - The Vanilla JavaScript Repository
Vanilla JavaScript for building powerful web applications jQuery is one of the great libraries that helped us overcome JavaScript browser issues when IE 6 and 7 were still around. Today, it may be a good choice to drop jQuery and its cousins, because modern browsers are pretty easy to deal with on their own. Using plain JavaScript will make your applications load and react blazingly fast. Why choo
AngularJSモダンプラクティス - Qiita
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
Trigger a link's click action with Javascript
Use the click method on the DOM element: let link = document.querySelector('a') link.click() Rails Long Term Support Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2) Prevents you from data breaches and liability risks Upgrade at your own pace Works with modern Rubies Read more Show archive.org snapshot
[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle
ダウンロードファイルに含まれているデモ jQuery.twinkleの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="jquery-1.10.2.min.js"></script> <script src="../jquery.twinkle-0.7.1.js"></script> </body> Step 2: HTML アニメーションを適用する要素にclassやidを加えます。 <div id="twinkle1">click !</div> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。 $(selector).twinkle(); アニメーションやエフェクトはオプションで設定します。 var options = { "effe
![[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle](https://cdn-ak-scissors.b.st-hatena.com/image/square/1664f643712bb7cebf68cc882a1117f2f93e0a5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082802.gif)
[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ：offsetTop このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。 ScrollUpBarの使い方 実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scroll-up-bar.min.js"></script> </body> Step 2: HTML スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。 <div id="topbar" styl
Code Snippets | CSS-Tricks
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
The Dangers Of Stopping Event Propagation | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Philip Walton (@philwalton). He is going to explain why stopping event propagation isn’t something you should do lightly, and probably something you should avoid altogether. If you’re a front end developer, at some point in your career you’ve probably had to
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
» 高さで文字数を制限するプラグイン[textCut.js]を作ってみる | isee ウェブに関するブログ
textCut.js まずは、仕様やオプションを考える 何文字以上を超えたら「…」にする。とういのはよく見かけるかと思います。 一番お手軽にやるとしたらCSSの「text-overflow: ellipsis;」と「white-space: nowrap;」を使うったやり方です。はみ出した文字を「…」にすることができますが、 一行の場合にしか対応できません。 今回のプラグインでは、厳密に何文字というよりも、指定した高さを超えた時に末尾を「…」に変換するように作ってみたいと思います。 高さを条件とするので、複数行の場合でも対応することができます。 オプション cutHei 制御する高さ afterText 末尾に追加する文字 data-textCut-link 要素にdata属性でリンク先を指定 blank リンクを別タブで開く true:false textCut.js /**文字カットプ
![» 高さで文字数を制限するプラグイン[textCut.js]を作ってみる | isee ウェブに関するブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/aec6314ec9473ded4223ca56ceddbbc62995532f/height=288;version=1;width=512/http%3A%2F%2Fisee-web.net%2Fwordpress%2Fwp-content%2Fthemes%2Fisee%2Fimages%2Ffacebook_isee.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - camsong/You-Dont-Need-jQuery: Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.
GitHub - realjoshharrison/jquery-disablescroll: Disables scroll events from mousewheels, touchmoves and keypresses.
GitHub - blivesta/animsition: A simple and easy jQuery plugin for CSS animated page transitions.
