webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

ブラウザで動作するシンプルなチャット「hack.chat」(Node.js製)

チーム内でお手軽に使えるチャットツールってなかなかありませんよね。クライアントに新しくインストールするのも少し手間ですし。「hack.chat」はNode.jsで作られたブラウザで動作する本当にシンプルなチャットツールです。

2016年6月時点。おススメのレスポンシブCSSフレームワークを紹介

Photo credit: eva101※2015/11/8: 最新の情報に更新。 ※2015/10/20: 現状に合わせて内容編集と追記。 ※2016/6/18: 現状に合わせて内容編集と追記。重量級から軽量なもの、全てコミコミからミニマムなものと、レスポンシブデザインの実装で利用するCSSフレー…

ブラウザにログを美しく表示するrtailが良い感じ

rtailはターミナルに出力される内容をそのままウェブブラウザで(美しく)表示することができるnode.jsで作られたツールです。Terminal output to the browser in seconds, using UNIX pipes.rtail.orgkilianc/rtailgithub.com

高品質なCSSスタイルガイドラインをまとめた(日本語訳付き)

去年今年と各社から高品質なCSSのスタイルガイドラインが公開されています。この記事ではオリジナルのURLと、その日本語翻訳されたURLを合わせてまとめています。この記事は定期的に更新する予定です。

"MUI"Googleのマテリアルデザインガイドラインに則った軽量CSSフレームワーク

GoogleからMaterial Design Liteが発表された直後ですが今年登場して頻繁にアップデートが繰り返されているマテリアルデザインの軽量CSSフレームワーク"MUI"の紹介です。※見た目についてはGoogleマテリアルデザインのガイドラインに則っているため特に紹介し…

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

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

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

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

Bootstrap + jQueryでレスポンシブ対応のカウントダウンするプラグイン

カウントダウンするプラグインはたくさんありますが、これはBootstrapで使うことを前提としたプラグインです。MITライセンスです。使い方は以下の通りです。分かりやすくて良いですね。 jQuery(window).load(function () { $('#countdown').countdown("2015/…

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

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

背景画像を今風にぼかす軽量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…

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

"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でビジュアライゼーション好きのみんなに朗報。&quot;awesome-d3&quot;が登場。

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

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

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

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

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

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

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

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

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…