World Cup Calendar Blockerは、サッカーの試合の予定時間に、適当に作られたそれっぽい用事を追加するためだけに用意されたウェブページです。
6月18日 19:00 イングランド対チュニジアの試合時間にあわせた「バザーでデイブの手伝い」というスケジュールを、ワンクリックで Apple, Google, Outlook, Yahoo のカレンダーアプリに登録することができます。(クリック先でどう登録するかは、各アプリ依存です)
これを使って自分の公開カレンダーに予定をいれておけば、ワールドカップ観戦を誰かに邪魔される心配はなくなりますね。
この時期だけに絞った、しかし意外と需要はありそうな、手軽で便利なサービスではないでしょうか。
ただし、このサイトはイングランド代表専用となっています。列挙されている試合はすべてイングランド代表の試合と、決勝までの(作者がイングランド代表の試合に違いないと思っているだろう)試合のみ。
CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが
“A”キーと”D”キーで車が左右に動いています。
こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。
CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。
キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。
クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。
疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。
レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。
See the Pen Mario made only with CSS gradients – no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.
こちらの解説では、CSSグラデーションで各ピクセルを時間に応じて変化させるというのを全ピクセルに対して行うことで、CSSだけでの横スクロール表示を実現しているようです。ソースコードを見ると、Stylus で描画するスプライトのデータをひたすら大量のCSSコードに展開しているのがわかります。生成後のCSSを見るとすごいことになってます。
via TheNextWeb
AutoMute は、Chrome ブラウザからとにかく音が出ないようにできるブラウザ拡張です。
インストール直後の設定は、あらゆるサイトでの音声がオフになっています。すべてのタブにミュートのマークが表示され、マークをクリックしたり、拡張アイコンのメニューから選択したりすることで、個別に再生を許可することもできます。
YouTube など、サイト側で用意しているミュート機能とは別のレイヤで止まっているため、場合によっては拡張でアンミュートして、動画側でのアンミュートして、としないと聴こえないこともあります。
音楽等が突然再生されたりすると非常に困る、といった職場で働いているような人たちは、保険のために入れるといいのかもしれませんね。絶対にどんな音も鳴らなくていい、ということなら、OSのドライバを止めるとかイヤホンジャックを埋めるとかもありですが、この拡張であれば、音がしても大丈夫なサイトだけ許可したり、どうしても音を聴かなければいけない時だけ設定を変えて聴いたりすることができます。
via LifeHacker via TheNextWeb