任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
ブラウザでフローチャートを作れるシンプルなスクリプト・「Flowy」
Flowyはブラウザでフローチャートを作成出来るスクリプトです。シンプルで軽量なコードですがjQueryに依存します 上図のように左ペインからブロックをD&Dで追加、右ペインで各ブロックを編集するUIとなっていますので直感的な操作でフローチャートを作成する事が出来ます 基本的な機能のみの提供で、完成されているようなものでは無いようで、あくまでフローチャートを作成出来る機能を提供するもののようです examplevar spacing_x = 40; var spacing_y = 100; // 初期化 flowy($("#canvas"), drag, release, snapping, spacing_x, spacing_y);初期化します。例ではブロックサイズを定義していますがデフォルトで設定されています function snapping(drag) { //例：ドラッグするブ
シンプルでオープンソースなRSSフィードリーダー・「Sismics Reader」
Sismics ReaderはシンプルでOSSなRSSフィードリーダーです。はっきりと明言はされていませんが故Gopogleリーダーの機能をほぼ含んでいるとの事で、クローンに近い印象です。OPMLインポート/エクスポートもサポート。また、Androdidアプリのソースも同様にOSSで公開されています。Gopogleリーダーに限らずRSSリーダーサービスはいつ閉鎖するか分からないので自身の管理するサーバーに設置出来るのはある意味理想かもしれません。feedlyでいいやと言われればそれまででしょうがfeedlyも例外なく、いつ閉鎖するか分かりません。pro版でどれくらい収益上げられるか分かりませんが、あまり評判よくなさそうでしたし、feedlyをよく使っているなら尚更「閉鎖するかも」と考えておく事は必要かもしれませんね。余談になりますが、Sismics Readerにはfeedlyでは有料プラ
背景色を指定するとWCAGのガイドラインに基づいたテキストカラーをピックアップしくれるカラーツール・「COLOR SAFE」
COLOR SAFEは背景色を設定すると、WCAGガイドラインに基づいたテキストカラーをパレットにして提出してくれるアクセシビリティカラーツールです。任意のテキスト、フォントの種類やサイズ、太さの指定も可能となっています。ピックアップされたカラーコードはHEXとRBGから選択可能で、クリックだけでクリップボードに格納してくれる親切設計でした。 COLOR SAFE
ブラウザで動くシンセサイザーを実装する為のスクリプト・「beep.js」
beep.jsはブラウザ上で動く、WebAudio APIを使ったシンセサイザー構築の為のJavaScriptフレームワークです。シンプルなコードで動かせるように作ったそうです。デモページではコンソールを開いてtextareaを編集する事で動作テストを行える様になっています。使い方や詳細及びライセンスはGithubをご参照下さい。 beep.jsOn Github
APIのドキュメントを書くためのフレームワーク・「Swagger」
SwaggerはAPIのドキュメントページを作る為のフレームワークです。細かい仕様や使い方などをユーザーに分かりやすく伝えられるように設計している様です。こういったフレームワークはあまり見かけないので、ドキュメントの作成が捗ると良いですね。ライセンスは Apache Ver 2との事です。 Swagger
Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdown
Bootstrap向けのMarkdownエディタを実装出来る、というスクリプトのご紹介です。Markdown対応のエディタで、タグ保管機能も付いています。なかなか良さそうです。 Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdownです。実装も楽なので覚えて置いて損は無いかも。 Boostrapに設置可能なMarkdownエディタです。シンプルで使いやすい印象でした。 <textarea name="content" data-provide="markdown" rows="10"></textarea>textareaにカスタムデータ属性を与えればいいみたいです。 <div data-provide="markdown-editable"> <h3>foo</h3> <p>bar hoge fuga</p> </di
Subtle Patternsのパターン画像を閲覧中のサイトの背景として表示確認できるブックマークレット・SubtlePatterns Bookmarklet
使いやすいデザインのパターン画像を公開してくれているサービスのSubtle Patternsの画像を閲覧中のWebサイトの背景として表示確認が出来る、というブックマークレットです。愛用している方は如何でしょう。 Subtle Patternsはパターン画像を公開しているWebサイトで、そのパターン画像を閲覧中のWebサイトの背景として表示確認出来る、というブックマークレットになります。
スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライドさせる、など色々と応用が利きます。 時間が無いので使い方は割愛。元サイトに詳しく書かれているので問題ないかと思います。以下よりどうぞ。 Swiper
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料で動画作成等に使える音楽を配布するストックミュージックサイト・「BentenSound」
URLの指定だけで人物アバターのダミーイラストを生成するサービス・「Joe Schmoe」
ポモドーロタイマー付きのOSSな国産Todoアプリ・「Pentazemin」
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
CSSのみで作られたローディングアニメーションのセット・「Loaders.css」
OSSとして公開されているGoogle製マテリアルデザインのSVGアイコン・「Material Design Icons」
人物の顔のダミー画像生成ツール・「ui Faces」
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」
WordPressのプラグインで上位ダウンロード数TOP108を元素記号のように一覧化したWebサイト・「The Periodic Table of WordPress Plugins」
CSSタイポグラフィの使用例をコレクションしている・「Typespiration」
有用なCSSフレームワークをまとめた・FRONT-END CSS FRAMEWORKS
