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

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

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

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

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

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

メール開封のCSSアイコンがぐりぐり動く

封筒を押してみてください。メールを開くエフェクトが表示されます。codepen.ioHTMLとCSSで実装されておりJavascriptを利用していません。keyframesなどCSSアニメーションを使った実例が増えるにつれて、仕組みがだいぶ分かりやすくなってきましたね。

ruby-fighter(Street Fighter II in Ruby)を動かしてみた

世界中のプログラマが日々人気プロジェクトを競い合うGitHubに颯爽と現れて瞬く間に500Starsを獲得したruby-fighter(Street Fighter II in Ruby)をUbuntuで動かしてみました。MadRabbit/ruby-fightergithub.com

マテリアルデザイン風ボタンがプレステのコントローラーのような4つの小さなボタンに分かれるCSS

"+"の箇所にマウスカーソルを合わせてください。マテリアルデザイン風アクションボタンが4つの小さなボタンに分割します。プレステのコントローラーみたいです。codepen.ioアイコンはfont-awesomeを利用していますが、ボタン分割のエフェクトはCSSだけで実装…

背景画像を今風にぼかす軽量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を使いたくなりますね。

シェルスクリプトでパスワード管理を安全かつ簡単に "pwd.sh"

"pwd.sh"は1つのシェルスクリプトで動く対話型のパスワード管理ツールです。パスワードはgpg(GNU Privacy Guard)で暗号化されます。drduh/pwd.shgithub.comインストールはこれだけです。 $ git clone https://github.com/drduh/pwd.sh && cd pwd.sh $ sudo a…

D3でビジュアライゼーション好きのみんなに朗報。"awesome-d3"が登場。

カテゴリー別に厳選されたリンク集"awesome-x"シリーズのd3.js版が登場しました。

130種類以上!WEBフレームワーク/ブランド/アプリのSVGアイコン "SVGPORN"

Font-AwesomeにはWEBのアプリ/フレームワーク/ブランドのアイコンが100種類以上登録されていますが、"SVGPORN"にはSVGでアイコンが100種類以上、登録されています。ライセンスはCC0 1.0 Universal。著作権なしです。全てSVGファイルですのでどんなサイズで表…

Googleの人工神経ネットワークが書いた「あの絵」を作れるオープンソース"cnn-vis"

Googleが機械的に書いた絵が(芸術的だ|怖すぎる|未来を感じる)と話題になりました。元記事:Research Blog: Inceptionism: Going Deeper into Neural Networks"cnn-vis"はPythonを使ったCNNs(畳み込みニューラルネットワーク)で画像生成ができるオープンソー…

rubyでターミナルにキャラクタを描画するライブラリ"catpix"

"catpix"はrubyで作られたターミナルに指定画像を表示するプログラムです。dot絵風になります。pazdera/catpixgithub.com $ catpix youkai.jpeg -w 0.8 -h 0.8ターミナルに出力される画像。

軽量CSSコンポーネント"basscss"、ImmutableCSSに見る未来。

basscss 最近は軽量シンプルなCSSフレームワークが好まれる傾向にあって、その中の1つが"basscss"です。2015/6/30にバージョン7がリリースされました。サイドエフェクト(副作用)がないと書いてあるのが嬉しいです。

ウェブ/アプリに使える今風アイコンフォントの紹介。

メジャーに使われているアイコンフォントと、最近登場したアイコンフォントを中心に紹介していきます。アイコンフォントを使うとフォントファイルと1つのCSSファイルで多数のアイコンを導入できるので便利です。 1. GLYPHICONS Bootstrapで使われているので…

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

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

小さくてシンプルなレスポンシブCSSフレームワーク「Skeleton」。Bootstrapに疲れた人はぜひ。

「Skeleton」はMITライセンスの軽量CSSフレームワークです。ページ内ではcsフレームワークではなくboilerplate (ボイラープレート)と説明されています。 小さくてシンプル=分かり易くて、使い易い。例えばランディングページやコーポレートサイトで最小限…

SlackのようなMeteor製オンラインチャット「Rocket.Chat」

MITライセンスで提供されているMeteorで作られたSlack風チャットツールです。オープンソースでこういう旬のツールのクローンが使えるのは嬉しいですね。 Rocket.Chat - Your own open source web applicationrocket.chat GitHubのURLをのせておきます。 Rock…

マテリアルデザイン(Material Design)のcssやフレームワーク

ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポンシブなマテリアルデザインに向い…

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

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

技術ブログをあらためてはじめました

2015年4月に子猫を保護して、それで嫁が猫ブログやりたい(アフィもしてみたい)というのではてなブログの有料版を使いはじめました。 みーこがわが家にやってきたmikothecat.hatenablog.com その時に、はてなブログの有料版は10ブログまで登録できる事を知…