JavaScriptを圧縮、最適化するGoogleのツール
試そうと思ったときにさまよったのでメモ。 最近はJavaScriptファイルにminというファイル名で圧縮して少しでも実行速度を向上させようとするライブラリが増えている。 jsファイルを圧縮、最適化するにはGoogleが公開している「Closure Compiler」を使うと簡単にできそう。 詳しくは下記参照 IT Pro - グーグルのJavaScriptツール集大成「Google Closure Tools」 GmailやGoogle DocsやPicasaなど多くのGoogle製品に使われているjavascriptライブラリも公開されている「Closure Library」。 Googleのサイトと同じ使い勝手や機能を実装するときには参考になりそう。ただドキュメントは英語だし、使いこなすにはある程度のレベルが必要。 デモ一覧を見ると何ができるか分かる。 この辺はjQuery UIの方
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
Learning JavaScript Design Patterns by Addy Osmani
Document has moved, if you aren't automatically redirected go here.
ASCII.jp：jQueryで自作するフローティングウィンドウ｜Web制作の現場で使えるjQuery UIデザイン入門
「フローティングウィンドウ」は、Webページ本文に重ねて表示し、ドラッグ＆ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基本のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ＆ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML／XHTML（以下、HTML）を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、
mailcheck.js – メールのドメインが間違えていたらsuggestしてくれるJavaScript – creamu
mailcheck.jsは、メールのドメインが間違えていたらsuggestしてくれるJavaScriptです。 以下のように、domainsにチェックしたいドメインを入れるようです。 <script type="text/javascript"> var domains = ['hotmail.com', 'gmail.com', 'aol.com']; $('input#email').mailcheck(domains, { suggested: function(element, suggestion) { // callback code }, empty: function(element) { // callback code } }) </script>
Persistent Headers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you’ve scrolled past that relevant section. Header… persisting. Couple things to know before we get started: There are many like it, but thi
Making an Apple-style Splash Screen
The Beatles are on iTunes! Or, if you are like me and don't care that much about it, you've probably noticed the awesome splash screen that Apple used to promote the event. Risking to start a trend, in this tutorial we are going to create a simple jQuery plugin that will display fancy Apple-style splash screens for us. The HTML Encapsulating the splash screen functionality into a jQuery plugin mak
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryなどをローカルストレージにキャッシュしてサイトを高速化できる「basket.js」
basket.js - a simple script loader that caches scripts with localStorage (Addy Osmani) jQueryなどの外部スクリプトを読み込む（スクリプト・ローダー）JavaScriptライブラリ「basket.js」が公開されています。 (英語) ローカル・ストレージにキャッシュできるので、サイトやウェブアプリなどを高速化できます。 ライセンスはMITとGPLのようです。
[JavaScript] jQueryをローカルストレージに保存して高速化
サイトに来る度にjQueryを読み込み直すんじゃなくて、ローカルストレージに登録したほうが早いんじゃないかって思ったのでやってみた。 ■Chromeの場合 読み込む場合にかかった時間 125ms～200ms ローカルストレージから読み込む場合 25ms～40ms ■iPhoneの場合 読み込み Wi-Fi 280ms～400ms 電話回線 800ms～1200ms ローカルストレージ 130ms～200ms 通信環境によって、色々変わりそうだけど、iPhoneだと大きく違う！ 早いぜっ！ アプリケーションキャッシュにすればもしかして全部解決なのかも… --add [2012/8/24] スマートフォン向けのサイトなら、jQueryをよみこむのはXMLHttpRequestじゃなくて、scriptタグを生成する方がよさそう。その場合はscript要素のonLoadイベントで読み込み後の処理を
Elastic Image Slideshow with Thumbnail Preview | Codrops
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Image Gallery With Custom Sized Images (Bonus jQuery Plugin) | Envato Tuts+