Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較｜TechRacho by BPS株式会社
2014.10.15 HTML + CSS + JavaScript で簡単に導入できるdatetimepicker の比較 最近MBA 買ったんですけど、ずっとドザーだったので全然慣れないshibuso です。トラックパッド使うと指が痛くなって泣ける…。 さて、今回は無料で公開されているdatetimepicker についてまとめたいと思います。datetimepicker と聞いてピンと来ない人は、フォームをクリックするとカレンダーが表示されて、そこで日時を選ぶ機能と思ってもらえば大体合ってます。少し前までプルダウンで年月日を選ぶのが普通だったのに、色々と便利になってきています。 とはいえdatetimepicker はまだあまり選択肢が無いように感じます。私の検索の仕方が悪いのかもしれませんが、日付のみを選択できるdatepicker の方が多いかと。そんな中、今回はdatetime
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」
twitter facebook hatena google pocket いまや動画の再生にYouTubeは欠かせない存在です。 YouTubeにアップした動画を表示させる際には公式のiframeダグを利用するケースが多いと思いますが上下にバーがつくなどちょっと物足りないですよね。 jQueryプラグインのPrettyEmbed.jsを利用すれば見た目を簡単に調整することが可能です。 sponsors 使用方法 PrettyEmbed.jsからファイル一式をダウンロードします。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.prettyembed.js"></script>
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」:phpspot開発日誌
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup
bootstrap-wysiwyg tiny wysiwyg rich text editor for Bootstrap About This tiny (5KB, < 200 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5. Here are the key features: Automatically binds standard hotkeys for common operations on Mac and Windows Drag and drop files to insert images, support image upload (also taking photos
jQuery UI 1.10 日本語リファレンス | js STUDIO
このサイトについて jQuery UIの日本語リファレンスです。 jQuery UIの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このリファレンスではjQuery UIのバージョンは1.8以上を対象としていますので、それ以前のバージョンについては当てはまらない 箇所もあると思いますので注意してください。 また、1.8以降のバージョンによる違いについて、なるべく記述しているようにはしていますが、内部処理やclass名の変更等、全ては書ききれてはいないので、 詳細について知りたい場合は公式サイトでの確認をお願いします。 jQuery UI 1.9アップグレードガイド(英文) jQuery UI 1.10アップグレードガイド(英文)
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
[JS]超軽量で設置も簡単！Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount
デモページ：カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル（socialcount-icons.css）を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod
[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
mizzz.jp
mizzz.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy ＆ Paste Hijacker」:phpspot開発日誌
ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy ＆ Paste Hijacker」 2011年09月08日- Copy & Paste Hijacker | jQuery Plugins ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy ＆ Paste Hijacker」。 例えば、ページ内で気になった文書があってCtrl＋Cとか、右クリックして「コピー」した場合、その文書になんらかの文字列を追加することができます。 引用元を追加でコピーしてもらったり、ツイッターアカウントやFacebookアカウントもコピーに追加することができちゃいます。やり過ぎは禁物ですし、嫌がられる場合もありそうなので、あくまで利用者の利便性を高めるために使いたいですが、技術的にも非常に面白かったのでご紹介です。 使い方は次のように初期
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」:phpspot開発日誌
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
[JS]これは便利！ 閲覧ページの見出しを抽出するスクリプト -Flexible Nav
自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるjQueryのプラグインを紹介します。 Flexible Nav jQuery library デモページ 抽出した見出しの一覧は、右側に表示されています。 [ad#ad-2] 閲覧中のページで見出しを抽出する方法 まずは、閲覧中の他人のページで見出しを抽出する方法からご紹介。 Flexible Navはブックマークレット版があるので、それを利用します。 ブックマークレット Flexible Bookmarklet このブックマークレットをブックマーク（お気に入り）に登録して閲覧ページでクリックしてください。 ※上記をクリックすると、このページで適用されます。 当サイトでFlexible Navを実行したキャプチャ Flexible Navを実行すると上記のように、右側に見出しの一覧が表示され
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」:phpspot開発日誌
スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」 2010年11月10日- Amit Patil's Blog スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」。 サイドに常に表示されている「Follow Me」みたいなツイッターのフォローボタンは最近よく見かけますね。 これをjQueryで簡単に実装してしまおうというもの。 使い方は次のようにオプションを渡してあげるだけです。 $(function() { $("body").sidebar({ text : "Follow Me", // 表示テキスト size : "30px", // 幅 length : "200px", // 高さ margin : "130px", // マージン p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
