20160930 フロントエンド高速化 業務編 (社内勉強会)
This document discusses messaging queues and platforms. It begins with an introduction to messaging queues and their core components. It then provides a table comparing 8 popular open source messaging platforms: Apache Kafka, ActiveMQ, RabbitMQ, NATS, NSQ, Redis, ZeroMQ, and Nanomsg. The document discusses using Apache Kafka for streaming and integration with Google Pub/Sub, Dataflow, and BigQuery
Roll.js Demos
roll.js A tiny javascript library to track scrolling and stuff. Current step Current step progress Current position Total progress Steps Viewport height Roll height Padding between steps100px Jump to step 2 step 4
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
jQueryでマウス・クリック時にShiftキーが押されているか判断する - KEINOSの日記（旧ブログ）
Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど) この記事は次のブログに引っ越しました。 https://blog.keinos.com/20120117_859■Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど) 01:28 Shift+クリックなど、マウスのクリック時に同時に押されているキーを調べる(Shiftキー, Ctlキー, Altキーなど)を含むブックマーク CommentsAdd Star クリック時の処理(関数)に、イベント・ハンドラ(オブジェクト)を渡し、そのプロパティ値を見て判断します。 下記は"idClickArea"のIDを持つ要素をクリックした時に、シフト・キーが同時に押されているかチェックして、アラートを表示す
jQueryで回転のアニメーションをする例 at ソフテル jQuery部
問題 jQueryプラグインとか無しで、回転できる？ 答え 回転します。 jQueryプラグイン無しで、回転します！ jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。 それならば、表示に影響しないz-indexなどのプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して回転などのプロパティの指定に使ってはどうかというアイデアで作ってみました。 //ここでは表示に影響しないz-indexをアニメーションさせます（見た目には何も起きません） $('#sample20130314').animate({zIndex:1},{ //1秒かけてアニメーション duration:1000, //stepは、アニメーションが進むたびに呼ばれる step:function(now){ //nowに現在のz-indexの値（
PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
| サイドメニューが下まで行ったらそこで固定するJS（jQuery）神戸ホームページ制作センター
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
history.back();問題を解決してみる at softelメモ
history.back()はブラウザの履歴を利用して1つ前のページに戻る機能です。これによりどのページから来た訪問者でも個々のユーザーに合わせたページへ戻ることができます。 この機能、多くのところでは以下のように書かれており、ブラウザからアドレスを入力して開いた場合は機能しません。 <a href="javascript:history.back();">一つ前のページへ戻る</a> 戻るリンクはそのサイトのトップなり1つ上のカテゴリページへ戻ることを意識してリンクをクリックしますので、動かなかったり、検索エンジンへ戻ったりするとユーザーはそのままサイトから離脱している可能性が高いです。 そこで対策を考えてみます。直接来た場合はトップページへ返すことを考えます。 まず、history.lengthで考えてみます。これは戻す、進むで使う履歴がいくつあるか取ることができます。ですので、直接開
jQueryで色々なフォーム入力値をリアルタイム取得する
jQueryでフォームの入力地をリアルタイムで取得する方法を紹介します。 フォームのvalue値をリアルタイムで取得したい場合、必ずしも フォームのパーツからフォーカスが外れた時やクリック時とは限りません。フォームの入力値が変更されたことを取得していきます。 jQueryのchangeイベントがかなり便利 今日まで知らなかったのですが、フォームのvalue値が変更されたことを知るにはchangeイベントがかなり便利なようです。 プルダウンが変更されたら フォームのプルダウンが変更されたらvalue値がリアルタイムに変更されます。 ソースコード $("#select1 select").change(function () { var str = ""; str = $(this).val(); $("#select1 div").text(str); }).change();
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
instagramのAPIを使って写真を取得する方法 : matsudam blog
instagramに投稿した写真を自分のサイトに貼付けたい！ってことで、instagramのAPIを使って実現してみたのでそのメモです。 instagramにアプリケーション登録 まずはここhttp://instagram.com/developer/にアクセスします。 で、「Register Your Application」をクリックします。 「新しいアプリを登録」をクリック。 ここでアプリケーションの情報を登録します。 「OAuth Redirect_uri」はアクセストークンを取得する際にリダイレクトされるURLです。「Website」と同じURLを入れとけば大丈夫と思います。 で、登録すると「CLIENT ID」と「CLIENT SECRET」が取得できます。 アクセストークンを取得する アクセストークンを取得するには以下のURLにブラウザでアクセスします。 その際、【CLIEN
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
cutjs - cutjs
Explore the world of automotive at cutjs.org. Your go-to resource for all things automotive. Welcome to cutjs.org Welcome to cutjs.orgComprehensive Automotive PlatformAt cutjs.org, we are dedicated to providing generalist knowledge about the automotive industry. Whether you’re a car enthusiast or professional, we have something for everyone.
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raindrops.js
jquery.hx
Speed comparison of jQuery versions · jsPerf
http://www.truelathe.com/