任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」 - かちびと.net
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
開発者の日々の作業をサポートする様々なミニツールを集約したオープンソースのデスクトップアプリ・「DevToys」 - かちびと.net
DevToysは開発者の日々の作業をサポートする様々なミニツールを集約したオープンソースのデスクトップアプリです。Windowsエコシステムを採用するように設計されており、Windows 10のビルド1903以降で動作するそうで、Windows専用のアプリとなっています。 JSONのフォーマット、テキストdiff、RegExpのテスト、base64のエンコーダー/デコーダー、ハッシュ化ツール、 UUIDジェネレーター、loremipsumツール、JSON⇔Yaml変換、カラーシミュレーター、PNGとJPGのコンプレッサー、Markdownプレビュー、HTMLやURLのエンコーダー/デコーダーなどが1つのアプリにまとめられています。 また、クリップボードのデータを扱えるようになっており、作業を円滑に進める事が出来ます。勿論オフラインで動作しますし、OSSなのでアプリを加えたり日本語化も可能で
通知メッセージを実装する為のシンプルなjQueryプラグイン・notifIt!
シンプルで使いやすそうだったので備忘録。アニメーションしながら表示される通知メッセージを実装するシンプルなスクリプト・notifIt!です。jQueryに依存します。 シンプルな通知メッセージ実装スクリプトです。 普通のメッセージ実装スクリプトです。軽量で設定も簡単なので導入しやすそうですね。 notif({ msg: "<b>送信成功:</b> あなたのメッセージは送信されました", type: "success" });メッセージ等のセッティングはオプションで設定します。HHTMLタグも利用可能なのでスタイリングも楽ですね。 軽量なのでスマフォサイトでも気軽に使えるかも。覚えておいて損は無さそうです。 notifIt!
ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js
ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1);エフェクトは上記のようにセッティングします。 var favicon=new Favico({ bgColor : '#5CB85C',//背景色 te
高品質なWordPressの有料/無料テーマをひたすらまとめている・Themegraphy - かちびと.net
コメントで教えて頂いたのでご紹介。素敵なWordPressテーマを紹介するサイト。無料と有料がありますので結構な数になっています。見てるだけでもインスピレーションが向上しそうですね。 WordPressのテーマギャラリーとしても素敵です。国産のサイトなので日本語ページもありますよ。 有料/無料のテーマがずらっとまとめられています。2013/7/9現在で500以上あるので探しがいもありそうですね。 販売元別でも探すことが出来ます。 Shotokuもご紹介いただきました！休みが取れたらアップデートしたい、と思いながら既に半年休めてない・・貧乏怖い。 Themegraphyは以下よりどうぞー。 Themegraphy
様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO
様々なJSライブラリのまとめサイトのご紹介。主にクライアントサイドのJSライブラリを中心にコレクションしているみたいです。シンプルで探しやすかったのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。
商用利用も可能の、フラットなデザインのアイコンを大量に配布するWebサイト・Icons DB
フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery
商用でも無料の、凄くシンプルなアイコンのセット・Simplicity Vector Icon Set
凄くシンプルなアイコンが好みだったので備忘録。商用でも無料で利用出来るそうです。ファイルもPNGの他にPSDが同梱されていますので調整しやすいのでは。 とってもシンプルなアイコンのセットです。ちょっと塗り絵っぽい。 こんな感じでラインのみで作られたシンプルなアイコンです。PNGで用意されたサイズは16pxから512pxまでの7通りに加えてPSDも含まれています。 ライセンスはAvailable for Personal and Commercial Projectsとの事で、個人利用でも商用でもOKとの事です。 ダウンロードはメールアドレスが必要です。金額を0$入力し、メールアドレスを入れて送信すればメールが届きます。ご利用は以下より。 Simplicity Vector Icon Set
PCではマウスホバー、スマフォではタップで動作するレスポンシブなドロップダウンメニューを実装するjQueryプラグイン・FlexNav
レスポンシブWebデザイン対応サイト向けのドロップダウンメニューを実装する為のスクリプト・FlexNavのご紹介です。なかなか使い勝手も良さそうな印象でした。 PCサイトではマウスホバーによるドロップダウン、スマフォではタップで降りるコンパクトなメニューに切り替わります。 ネストされたメニューにも対応していますのでこのまま利用しても大丈夫・・かな。（まだ詳しく見てないです） <ul class="flexnav" data-breakpoint="800"> <li>Menu01</li> <li>Menu02</li> </ul>カスタムデータ属性でブレークポイントを設定します。em単位でもセッティングできるみたい。 $(".foo").flexNav({ 'transitionSpeed' : '0.4s', 'itemHeight': 50 });降りてくるスピードなどはオプションで
jQueryのプラグインを大量に収集している・「Unheap」 - かちびと.net
UnheapはjQueryのプラグインを大量の収集、紹介しているWebサイトです。かなり細かくカテゴライズされているので探しやすい印象でした。社内向けに作ったリソースサイトらしいです。 Unheap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」 - かちびと.net
オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」
CSSで作られたアイコンのコードをコピペ出来る・「CSS 3 Icons Generator」
Web制作時にあると少し便利なWebツールを公開している・QuirkTools
Web上でSQLをテストできる・「SQL Fiddle」 - かちびと.net
PhotoshopのレイヤースタイルをCSS3に変換する・「CSS3Ps」 - かちびと.net
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」 - かちびと.net
Web制作に役立つツールをまとめている・「WebPlatformTools.org」
