軽量で高速、プライバシーに配慮したオープンソースのアクセス解析ツール・「GoatCounter」
GoatCounterは軽量で高速、プライバシーに配慮したオープンソースのアクセス解析ツールです。100%オープンソースでありながら、アクセス解析Webサービスとしても展開しています。 GAなど以外の後発あアクセス解析ツールは特にプライバシーに配慮されたものが多く、それだけ個人情報の取り扱いは以前よりもデリケートなものになっている印象ですね。 GoatCounterのプライバシー配慮はCookieを使わず、ユーザーの識別は hash(site.ID、UA、IP、salt)を使うそうです。個人情報を完全に一切取得していない、とは言えないけどGDPR通知が不要になるくらいのもののようです。解析ツールとしても機能はGA等に比べて非常にシンプルになっていてとても使いやすい印象でした。 また、3.5 KBほどのスクリプトを読み込むだけの超軽量仕様ですが、更にスクリプト不要の方法も用意されているとの事
クリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集・「daisyUI」
daisyUIはクリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集です。 この手のUIフレームワークの一部ではユーティリティクラスを組み合わせる事が多く、細かい設定が可能な代償としてHTMLの可視性が損なわれがちですがdaisyUIはコンポーネントクラスを追加するだけで済む、との事ですが、デフォルトとしてある程度作ってあるというだけでこれはdaisyUIに限った話ではないのでさほどメリットとは言えない気がしました。 とはいえ特に悪い印象も無く、普通に使いやすい気がしました。細かい設定が出来るユーティリティクラスはHTMLが汚くなるけど、あれはあれで必要なケースもあります。 少し脱線しましたが、以下daisyUIのサンプルです。 動作サンプルです。タブは切り替わりません。 <link href="https://cdn.jsdelivr.net/n
任意のリンク集を本棚のようなレイアウトで作成、公開できるOSSのWebアプリ・「shelf.gg」
shelf.ggは任意のリンク集を本棚のようなレイアウトで作成、公開、シェアできるOSSのWebアプリです。 名前の通りブックシェルフをオンラインで作成できる、というもので内容的には単純なリンク集ですが、少し見栄えを工夫した形になっています。本棚の作成も非常に簡単に出来るようになっており、本棚のタイトルと作成者名を記入して任意のURLを改行しながら張り付けていくだけです。URLのタイトル等は自動取得されます。 本といってもサムネイルとなる表紙はランダムになっていますし、作成された本棚は公開される仕組みですがOSSとして公開されているのでセルフホストとして利用する際はカスタマイズできそうですね。 pythonで書かれています。ライセンスはMIT。 shelf.gg
任意のCSSアイコンから別のCSSアイコンへの遷移アニメーションのコードを提供する・「CSS ICON animate」
CSS ICON animateは任意のアイコンから別のアイコンへの遷移アニメーションを、アイコンも含めて全てCSSで作れるサービスです。 以前ご紹介した、CSSのみで出来たアイコン集のCSS ICONが、各CSSアイコンからCSSアイコンへのアニメーションコードを提供するようになったみたいです。 任意のCSSアイコンを2つ選択するだけで、選んだ順にアニメーションしながら遷移するコードを発行してくれます。 example ↑ アイコンをクリックすると別のアイコンに変化します。両アイコンともCSSで作られています。 楽で良いんですが、デフォルトで用意されているのがクリックイベントで遷移するJSコードがjQueryだったりCSS ICONのCDNを@importしてたりなのでこの辺は必要に応じて便宜変更してください。 中には微妙なアニメーションもあるので違和感あるならおとなしくSVGで書いた方
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」
Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの 開発者はTailwind.cssのJS版のようなもの、と説明しています Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>↑ まずはスクリプトを読みこみます 試しに何か作ってみましょう <div x-data="{selected:null
文章内に折れ線グラフを挿入する
Result 非依存のvanillaなコードで動作します データを元にグラフをcanvasで生成し、挿入します。データは配列で管理します javascript/** * データとclass */ let stonks = document.querySelectorAll(".stonk"); data = [ [ 420, 700, 500, 480, 460, 490, 390, 420, 550, 340, 320, 240, 180, 160, 200, 40, 0 ], [1, 3, 2, 3, 1, 2, 3], [13, 30, 12, 3, 51, 20, 31] ]; /*グラフのスタイル*/ const options = { lineWidth: 2, color: "#E3342F" }; /** * Class */ class Stonk { construct
任意のWebサイトのURLを入力するだけでダークモード用のCSSを自動で作成してくれる・「Night Eye」
Night Eyeは任意のWebサイトのダークモード用CSSを自動生成してくれるジェネレーターです 使い方も簡単でURLを入力するだけ。自動で解析し、ダークモードに対応したCSSを生成してくれます あとはダウンロードするなりコードをコピーするなり、といった感じ。試しに本ブログで作ってみました このように十分ダークモードとして機能してくれました 本ブログはテキストとCSSがメインとなっているので作りやすかった可能性も高く、他サイトではテストしてませんが、精度は悪くない印象でした 動作も軽量で、入力したら即作成されました。ユーザー登録も不要で無料で了する事が出来ます 尚、ライト/ダークモードの切り替えが可能なスクリプトも以前ご紹介したので必要でしたら合わせてご参照ください Night Eye
アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」
isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそうですね 操作性や機能性は非常にシンプルなものなので凝ったアイソメ図には対応できませんが、学習コストも必要なさそうなのでこれはこれでアリかなぁと思います ライセンスはMITとの事です isocity
ユーティリティに焦点を当てた、インタラクティブなUI開発をサポートするCSSフレームワーク・「Shorthand」
Shorthandはユーティリティに焦点を当てたモダンなCSSフレームワークです。インタラクティブなUI開発をサポートしてくれそう いわゆるプロパティの一括指定(ショートハンド)に関するものではなく、単純に開発速度アップに貢献するって意味だと思います。ちょっとググラビリティがアレですね ちょっといい配慮だなと思った点は、2つの形が用意されていて、1つは簡易版でカラーをグレーのみ用意したもの、もう一つはフルバージョンで16色用意されていてそれぞれに7バージョンさらに用意されているので、不要な色の設定でサイズが圧迫されるのを微妙に感じている方には嬉しい配慮じゃないかなと思います 使ってみる テキストやボタンを中心にいくつか設定してみました。前述通り、基本的にはユーティリティです。要素の色やサイズ、位置、背景、マージンなどをclassだけで調整できるようになっています 色は特に様々なケースに対応
CSSをJavaScript用に変換するシンプルなコンバーター・「CSS2JS」
CSS2JSはCSSをJavaScript用のコードに変換するシンプルなコンバーターです 特に解説不要のアプリなのでサンプルを使って簡単に。例えば以下のCSSを display: block; font-size: 16px; background: #1e2f5d; color: #a4cff4; font-family: "Inter", sans-serif; font-weight: bold;以下のように変換します { display: "block", fontSize: 16, background: "#1e2f5d", color: "#a4cff4", fontFamily: "'Inter', sans-serif", fontWeight: "bold", }地味に便利ですね。特にユーザー登録なども不要で利用可能です CSS2JS
CSS製のユニークな背景パターン集
Result ちょうど100のパターンがあります。イラストのようなパターンもありますが全てCSS製となっています この手のものは最近ではSVGが主流となっていますので需要は高くはなさそうですがCSSの応用として学習用に良い気がします css:root { --ambrosia: #FCDBBA; --apricot: #FF8652; --aubergine: #6A2352; --auburn: #A12F2F; --asparagus: #A0C259; --beetroot: #7F0421; --blue-tack: #82BFE0; --bloom: #363A57; --blush: #D67B71; --bronze: #C27940; --trans: transparent; --trans05: rgba(255,255,255,0.05); --trans1: rgb
トグルボタンの様々なスタイリングを提供するCSSライブラリ・「MoreToggles.css」
MoreToggles.cssはトグルボタンのスタイリング用のCSSライブラリです 様々なトグルボタンをclass付与だけで実装出来るようになっています。スタイルはiOSタイプやAndroidタイプなどいくつか用意されています 実際に使ってみmした 動作サンプル 使い方も簡単、CDNも用意されています <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">あとはHTMLを書いてclassを付与するだけです <div class="mt-ios"> <input id="1" type="checkbox" /> <label for="1"></label> </div>classとスタイル例の一覧ページが用意されているので合わせ
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」
Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します 機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT Vanilla-DataTables
clip-pathで背景を斜めにカットする
Result CSSで背景を斜めにカットする方法です。別段特別な内容では無いです 未だに割と見かけるスタイリングですがtransformの方法しか書いてなかったので別の方法を書いておこうと思いました clip-pathを使います css.title { clip-path: polygon(0 0, 100% 0%, 100% 60%, 0% 100%); }だいぶコードもスッキリしますし、何より汎用的で応用が利きやすいですね html<h1 class="title">CSS Tip of the day <span>17</span></h1>HTMLも特別な方法は不要です can i use
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページの大まかなスタイルをざっくり決めてCSSコードを発行できる・「SHAPER」
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
JavaScriptやフレームワーク等への依存がない、純粋なHTML/CSSで作られた無料のランディングページのテンプレート集・「Uisual」
オープンソースとして提供されているセキュリティ重視の超シンプルなビデオチャットアプリ・「Jitsi Meet」
モスキート音を出すためのスクリプト・「Mosquito.js」
ドラッグ&ドロップで作れるオープンソースのHTMLメールビルダー・「Mosaico」
