レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
jQueryでやるView Component - Qiita
わざわざ語るようなことではないかもしれないが、あんまりそういうの話題になかったのでメモ程度に。 受託なんかで気軽にライブラリを増やせない環境で、View Componentとして振る舞いや状態を切り出したいような場合に class SomeViewComponent { constructor($target) { this.$target = $target; } setValue(str) { this.$target.text(str); } setState(disabled) { if (disabled) { this.$target.addClass("is-disable"); } else { this.$target.removeClass("is-disable"); } } onClick() { return new Promise(resolve => { th
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
jQuery3.0 アップグレードガイド - Qiita
2016/05/20にjQuery 3.0のリリース候補版が出てたのでアップグレードガイドを見てみます。 Overview jQuery3.0ではコードのクリーンアップとかバグ修正とかDeprecatedなコードの削除とか色々やってるよ。 Browser Support ・IE 9以降 ・Chrome/Edge/Firefox 最新のひとつ前のバージョンまで ・Opera 最新版のみ ・iOS 7以降 ・Android 4.0以降 jQuery Migrate Plugin 移行プラグインを用意してるから、以下の1行入れとけば1.12、2.2と互換するよ。 <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.
jQuery simple and accessible hide-show system, using ARIA… or not (collapsible regions) - By Nicolas Hoffmann
Warning: Undefined array key "HTTP_ACCEPT_ENCODING" in /home/clients/97cf10fa399c6faa42e2c9c80e9afbe5/web/subdomains/a11y/hide-show/includes/all.php on line 16 Deprecated: substr_count(): Passing null to parameter #1 ($haystack) of type string is deprecated in /home/clients/97cf10fa399c6faa42e2c9c80e9afbe5/web/subdomains/a11y/hide-show/includes/all.php on line 16
A Year Without jQuery
Dropping the trusted workhorse from our front-end back in 2014 has led to a faster, leaner platform March 1st 2016 I joined Colony back in Summer 2014. Six months into the job, we came to a point in our product development requiring the addition of several large features, and the rethinking of some key pieces of our platform design. Faced by the decision of hacking on top of the code I had inherit
DOMを使って、jQueryなしでいろいろやってみよう。コピペでどうぞ。（DOMおれおれAdvent Calendar 2015 – 24日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 24日目 最終日です。 jQueryでやってる事をjQueryなしでやるとしたらどうするのってやつです。 $(selector) → document.querySelectorAll(selector) querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。（DOMおれおれAdvent Calendar 2015 – 02日目） これが一番基本ですね。 // jQuery var $el = $('.foo'); console.log($el.length); console.log($el[0]); // DOM var els = document.querySelectorAll('.foo'); console.log(els.length); console.log(els[0])
GitHub - camsong/You-Dont-Need-jQuery: Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.
Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough for production use. We don't have to learn jQuery from scratch for DOM manipulation or event handling. In the meantime, thanks to the spread of frontend libraries such as React, Angular and Vue, manipulating the DOM directly becomes anti-pattern, so that jQu
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
高速かつスムーズなページ遷移を実現する pjax 覚書 - Qiita
★2018/04/13投稿 → Barba.jsを使った実装方法を書きました pjaxをざっと触ってみたので、自分用にメモ。 少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。 まだまだ使いこなせてないので、マスターしたい（切実） ★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/ 準備 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
画像からプライマリカラーを取得するjQueryプラグインを作りました
iTunesのアルバムビューでアートワークをクリックすると、背景色がアートワークのプライマリカラーで塗りつぶされる効果がありますが、アレをこのサイトのアイキャッチのところでやりたいなぁと思いプラグインを作りました。 iTunesは単純にプライマリカラーを取得しているわけではなく、外周内側付近のプライマリカラーを取得するなど複雑なアルゴリズムが使われています。今回は、高機能ではなくもっと軽いものがよかったので、以下の様な機能でさくっとシンプルに実装しました。 指定した img を処理する 読み込んだ画像の中で一番使われているカラーを抽出して返す コールバックを実行する 2015/10/10 追記 アップデートしました。 jquery.primarycolor.js使い方は、プライマリカラーを取得したいimg要素に対してprimaryColor()するだけです。コールバック関数で取得したカラー
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される
jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。主に .show()、.hide() メソッドに対して行われた仕様変更について触れてみたいと思います。 米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。 現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show()、.hide() メソッドの仕様が変わったみたい。 jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released ： Official jQuery Blog jQ
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - realjoshharrison/jquery-disablescroll: Disables scroll events from mousewheels, touchmoves and keypresses.
Reddit - Dive into anything
【jQuery】attrでcheckedが効かない時の対処法 - Qiita
jQuery 'input' event
React for Designers