読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

「Facebookで共有する」ボタンを高速・快適に表示するスクリプトの説明

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

「Twitterで共有する」ボタンを高速・快適に表示するスクリプトの説明

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

よくある構成のサイトを高速化してPageSpeed Insightsで100点を取る方法

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

夏だしダイエットしたいから痩せれるウェブアプリを作った

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

小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ3選。

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

シンプルなJSとCSS3で作るゲームウォッチ "catch-the-egg"

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

文字がどんどん消えていく「jquery-vanish」

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

書いた人にしか届かないコメントをサイトに組み込む「echo-chamber-js」

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

はてなブログは直接javascriptを書けるらしいのでテトリスを動かしてみる

はてなブログは汎用的に書けるので便利ですね。左右キーで移動、ZキーとXキーで回転です。スマホでは操作できません。 $('.game').blockrain(); 元ネタ:Blockrain.jsAerolab/blockrain.jsgithub.com

かっこいいSnap.svgを使った紙ひこーきが飛ぶデモ

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

ウェブページでマインドマップを見せるにはjsMindがベスト

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

カッコよく素数を表示するCSS3 + Javascript "Fun with Primes"

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

「javascript-in-one-pic / JavaScriptを一枚で学習する」が進化してた

1週間ほど前に記事に書いた"javascript-in-one-pic"が進化していたので再度紹介です。

背景画像を今風にぼかす軽量jQueryPlugin"background-blur"

背景画像をぼかす(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…

ウェブフォームにダミーの値を入れる"jQuery-Faker"

jQuery-Fakerは開発中のフォームにダミー値を自動入力するjQueryプラグインです。jQuery-faker by All-Go-Rhytm使い方はこれだけです。 $( "#myform" ).fakify(); 例えばcustomerの属性address_1に番地を入れる場合には"address.streetAddress"を指定します…

Crazy Pie Chartがクールだった

動的にパイチャートが構成されます。codepen.ioこういうデモを見ると今流行のラップしたライブラリも良いですが素のd3.jsを使いたくなりますね。

アクセシビリティを見える化するJavascript "tota11y"

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

JavaScriptを一枚の画像で学習する。javascript-in-one-pic

FreeMind?で書かれたJavascriptの基本を学習するツリーマップ画像です。とにかく縦に長い画像です。coodict/javascript-in-one-picgithub.com 最近、githubでawesome-*のように1つの技術を体系的にまとめられた昔風に言えばリンク集が人気です。javascript-…