写真はうちのみーこ。 昨日のツイートボタン表示と同じようにFacebookでも「共有ボタンの表示が遅い＆重い」問題があります。 Facebookで共有ボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。 遅くなる＆重く感じる…

写真はうちのみーこが子猫だった頃。 「ツイート」ボタンを表示しているサイトが抱える共通の課題に「ツイートボタンの表示が遅い＆重い」があります。 ツイートボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。 こ…

写真はうちのみーこ。 サイト制作でよく使われる以下のライブラリ/CSSに依存したサイトを高速化してGoogleのPageSpeed Insightsで100点を取る方法を説明します。 Google Fonts jQuery Bootstrap FontAwesome 実際にどのぐらい速度に違いがあるのかデモページ…

写真はうちのみーこ。 今年も夏がやってきました。毎年この季節になると思うことはなんでしょうか？ そう、ダイエットですよね。 海にプールにフェスにビアガーデンと夏特有のイベントがあるたびに痩せなきゃ！と気を引き締めるのですが3日後にはすっかり忘…

写真はうちのみーこ。スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。 1. Peity http://benpickles.github.io/peity/HTMLの要素をSVGの小さいチャートに変…

たまたま見つけたので紹介です。catch-the-eggはシンプルなjavascriptとCSSで作られたブラウザで動くゲームウォッチ風ゲームです。以下URL先で実際に動作します。http://shtange.com/catch-the-egg/GitHubのプロジェクトはこちら。github.com最近のランディ…

「jquery-vanish」は文字が1つづつ消えていくjQueryで作られたエフェクトです。Demoサイトmatheusazzi/jquery-vanishgithub.com最初vanishとあるからjQueryで何を追放するんだ？とバイオレンス方向のイメージをもったのですが追放のバニッシュは「banish」で…

「echo-chamber-js」は100%スパムにならない画期的な埋め込み型コメントシステムです。数行のjavascriptを書くだけで殆どのサイトで利用できます。tessalt/echo-chamber-jsgithub.com埋め込んで見た例画像はgravatar.com（アバターアイコンのサービス）から…

SVGを使ったアニメーションです。SVGなので多くの主要ブラウザで問題なく動作します。codepen.ioSnap.svgはJavascriptでSVGを操作するライブラリで以下サイトのGetting Startで使い方が丁寧に説明されています。ライセンスはApache2でオープンソースです。Sn…

jsMindはJavascriptで作られたマインドマップです。HTML5とCanvasを使っています。ライセンスは3条項BSDライセンスです。

カッコよく素数(Prime)を表示しています。色つきになっている数字が素数です。codepen.io実装はJavascriptで数字カウントしながら素数だったらclassを指定して、あとはタイムアウトとCSS3のアニメーション（translate3d）を使ってエフェクトを実現しています…

背景画像をぼかす（Blur）jQueryPluginの"background-blur"の紹介です。使い方は簡単でjsファイルを読み込んで上書きする要素（id='some-element'）を指定するだけです。 <script src="jquery.min.js"></script> <script src="background-blur.min.js"></script> <div id='some-element'></div> $('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blu…

tota11yはウェブページのアクセシビリティを見える化するJavascriptで作られたツールキットです。MITライセンスで提供されています。 tota11y – an accessibility visualization toolkit by Khan Academykhan.github.io ウェブページ/ウェブブラウザの進化に…