デザイントークンを作成し、まとめてCSS変数にしてくれる・「Design Tokens Generator」Design Tokens Generatorはデザイントークンを作成し、まとめてCSS変数にしてくれるWebアプリです。 デザイントークンとは？については以下のAdobe blogをご参照ください。
任意のWebサイトで画像が最適化されているかを調べるCloudflare製のチェックツール・「Image Optimization Test」 - かちびと.net
Image Optimization Testは任意のWebサイトで画像が最適化されているかを調べるチェックツールです。 CDNでお馴染みのCloudflare製となっており、チェック後にCloudflareを使用するとどれくらい軽量化できるかも提示してくれます。 調べたいURLを入力してしばらく待つと解析結果が表示されます。例えばページに表示されている画像の総重量、ページロード時間、LCP(Lrgest Contentful Paint)や、ファイル形式をavifに変える事でどれくらい軽量化できるかなどを提示してくれます。 また、サウスカロライナ州の3G高速接続でMotorola MotoG4を使用、GoogleChromeで実行し、画面解像度は1080×1920で、デバイスピクセル比（DPR）は3などといったテスト環境も提示してくれます。 利用は無料でユーザー登録も不要です。パフォーマ
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」 - かちびと.net
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
Googleアナリティクス代替として開発されたオープンソースの自己ホスト型Web分析ツール・「umami」 - かちびと.net
umamiはGoogleアナリティクス代替として開発されたオープンソースの自己ホスト型Web分析ソリューションです。 GAよりもシンプルで軽量、使いやすさを考慮して開発されたようで、GAよりもユーザーフレンドリーでプライバシー重視且つオープンソースの代替手段を提供したいそうです。 自身以外でもユーザー登録及び他ユーザーが任意のWebサイトを管理する事も可能で、共有も出来るようになっています。 ページビュー、使用デバイス、リファラなど、解析にとって重要な指標のみを取得し、単一ページに表示する事で解析を合理的に行えるように設計されています。 解析できるWebサイトの数は制限なく、追跡用のスクリプトは6kbと非常に軽量なため、Webサイトのパフォーマンスにも影響を与えません。 何よりOSSで自己ホスト型なので第三者、というかGoogleに解析データを握られる心配が無いのが大きいですね。ライセンス
WordPressのプラグイン作成のためのフレームワーク・「Herbert」 - かちびと.net
HerbertはWPのプラグインを作成するためのフレームワークです。ショートコード追加、プラグインのアクティブ/非アクティブ時の処理、ウィジェット、データ保存、カスタム投稿タイプ周り等に対応出来るように構築してあるみたいです。シンプルなものからやや複雑なものまで対応出来そう。既にいくつも作っている方には不要かもしれませんが、使い慣れれば便利かもしれませんね。 Herbert
手軽にグラフを作成し、PDFやPNG、SVG等でダウンロード出来る・「Really Easy Charts」
Really Easy Chartsはお手軽簡単にグラフを作成し、PDFやPNG、SVGなどのフォーマットでダウンロード出来るソフトウェアです。グラフのタイプ（線グラフ、棒グラフ、円グラフ）を選択して対象の数値を入力し、タイトル等を入力するだけ。数値は120,50,85,21というようにコンマで区切るようにします。対象のラベルも同様にfoo,bar,hoge,hugaとすれば上図のようなグラフが出来上がります。操作も簡単なので管理画面等に導入出来ると良いですね。Githubにてソースコードが公開されていますが、今のところライセンスの明記は無いように思えます（恐らく）のでご利用の際は開発者さんにご確認下さい。 Really Easy Charts
CSVをパースする為のスクリプト・「Papa Parse」
Papa ParseはCSVをパースするためのJavaScriptです。大きなファイルサイズにも対応可能でCSV⇔JSONでコンバートしてくれます。他、ローカルファイルを開ける、区切り文字の自動検出等が特徴として挙げられています。非依存型のようですが、jQueryとの併用も出来るみたいですね。ライセンスはMITです。 Papa Parse
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」 - かちびと.net
Vue.jsを使用したデスクトップアプリを作成できる・「Vuido」 - かちびと.net
オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」 - かちびと.net
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」 - かちびと.net
Github等で公開されているソースコードの任意の行のみをWebページに表示出来る・「Git snippet」 - かちびと.net
EvernoteやVine、Twitterなど、100以上の有名なWebサービスのブランドロゴをSVGアイコンとして公開する・「Simple Icons」
レスポンシブWedデザイン対応のスタイルガイドを作成出来るOSS・「Styleguide」
textareaにオートコンプリート機能を加えるライブラリ・「jQuery.textcomplete」
Twitter Bootstrapの有料/無料テンプレートを配布する・「ShapeBootstrap」
オープンソースのBootstrapテーマジェネレーター・「Bootstrap Magic」
ベーシックで使いやすそうなBootstrap向け管理画面テンプレート・「Gentallela」
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」
