coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラスのように同じ影が出来ています スクリプトは非常に軽量で依存性もありません。手軽で使いやすい印象です。だいぶ前ご紹介したImage-shadowよりも少ないコードで実装されていました コンテンツ次第では自然にも不自然にもなるので使い方に注意という感じでしょうか。ライセンスはMITとの事 cosha
任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」
coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラスのように同じ影が出来ています スクリプトは非常に軽量で依存性もありません。手軽で使いやすい印象です。だいぶ前ご紹介したImage-shadowよりも少ないコードで実装されていました コンテンツ次第では自然にも不自然にもなるので使い方に注意という感じでしょうか。ライセンスはMITとの事 cosha
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
30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」 - かちびと.net
Upploadは30以上のプラグインが用意された拡張的なOSSのJS製アップローダーです。※誤字ではなくUpploadが正式な名前みたいです 単にローカルからファイルをアップロードするだけでなく、SNSや画像投稿サービスなどの各Webアプリからもアップロードできるようになっています また、画像をその場で編集したり、サーバー構成に合わせてアップロードの方法を選択できたりテーマの選択、ライブラリの選択(VueやReact)、画像の圧縮、他言語化も可能となっています。 概ね完成された印象ですが拡張性もあるのでユニークなアップローダーも作れそうです。前述のWebサービスからのアップロードに関しては著作権周りの心配はありますがその辺は開発者の技量に委ねられそうですね このまま使わずとも高性能なアップローダーの開発に貢献してくれるかなぁと思います。ライセンスはMITとの事 Uppload
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」 - かちびと.net
Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します 機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT Vanilla-DataTables
パスワードやメモ、任意のファイル等を暗号化して一括管理できる・「PrivaKeeper」 - かちびと.net
PrivaKeeperはパスワードやメモ、任意のファイル等を暗号化して一括管理できるBlockstackベースのアプリケーションです Blockstackは知名度はまだ日本では低いと思いますが、昨年にはリクルート社が出資する等、一部の界隈にはしっかり浸透しつつあるかなぁという印象です 全てのデータは本人以外はアクセス不可能で暗号化もされているセキュアな環境で大事なパスワードや2FA、任意のファイル、ノート等を管理する事が出来ます 容量は10GB、1ファイルに付き200MBまでとなっていますが、Blockstack独自のインセンティブモデルにより、一切の広告無しで無料で利用する事が出来るようです 使ってみる 試しに使ってみました。簡素なUIで広告や複雑な仕様もないですし、項目も4つしかないのですぐに分かりました 任意のファイル、パスワード、2FA(2段階認証)、ノートの4つの項目に分けられて
非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」 - かちびと.net
DiagramFlowJSは非依存でシンプルなダイアグラム作成JavaScriptライブラリです 他ライブラリを使わず単体で動作、上サンプルのようなD&Dで動かせるダイアグラムを作成出来ます 一応編集等も出来るようになっています。ドキュメント等の用意はありませんがそこまで難しいものでもないと思います。ライセンスはMITとの事 DiagramFlowJS
軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」 - かちびと.net
DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプトです 以前ご紹介した本スクリプトど同名のDarkmode.Jsは同じく軽量で非依存でしたがmix-blend-modeを使う、といったものである程度コンテンツを選ぶ類のものでした 今日のDarkModeJSは少し異なり、多少手間にはなりますがボタンのクリックや指定した時間で任意のCSSを読み込む、というものになります メリットとして任意の専用CSSを用意するのでどんなコンテンツでも正確なダークモード/ライトモードを自作出来ますが、デメリットとしては面倒な点でしょうか 手軽さは変わりませんが多少手間でも自作したほうがメンテナンスは楽な気がしますね。ライセンスはMITです DarkModeJS
clip-pathで背景を斜めにカットする | かちびと.net
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
分かりやすそうなパスワードを生成するパスワードジェネレーター・「Easy Peasy Password」 - かちびと.net
Easy Peasy Passwordは分かりやすそうなパスワードを生成するパスジェネWebアプリです。分かりやすいかどうかは個人差あるでしょうけど、意味のあるパスワードを作る、みたいなものになります 使い方は単純で、質問に回答するとその回答でパスワードが作られる、というもの。質問内容は普段の日常生活に関わる内容で、更に大文字や小文字を含める、文字を数字化する(iを1にする等)などのオプションも選択できます 今後、世は生体認証の流れになっていきそうですが、こうした文字列のパスワードが無くなる日はまだ先の話なのでこういうパスワードの作り方も覚えておいて損は無いかもしれませんね。個人的にはランダム生成してパスマネで管理してますが、ランダムすぎるとパスマネ依存しすぎる感もあるので変更も検討しようと思います Easy Peasy Password
正規表現が嫌いな人のための正規表現チートシート・「I Hate Regex」 - かちびと.net
I Hate Regexは正規表現が嫌いな人の為に作られた正規表現チートシートです 任意のキーワードで目的を探す事ができて、目的の項目を選ぶと図式で解説しつつコードや実装例も出してくれます 更に使われた式の使用例も書かれているので調べつつ学べるようになっています 例えば電話番号をマッチさせたい場合は上記のページで学べる、といった感じです 目的で探せて、調べると同時に学んだり理解できるようになっている、まさに嫌いな人の為のチートシートですね 本アプリはソースコードも公開されていますので特に学びやすいかなぁと思います。ライセンス明記は無いみたいなので商用利用する際は開発者に問い合わせください I Hate Regex
用意されたSVGのシンプルなアニメーションアイコンを編集してダウンロードできる・「Motion」 - かちびと.net
Motionはあらかじめ用意されているSVGで書かれたシンプルな線画アイコンのアニメーション速度やカラー、ストロークの太さ等を調整してDL出来るソフトウェアです 現在ベータ版となっており、多くのアイコンは無料版で使う事が可能で、一部有償版のみとなっています 以下のようなアイコンを作成してコードをコピーするかファイルをDL出来るようになっています
中小規模のWebアプリを構築するためのオープンソースの軽量PHPフレームワーク・「Wolff」 - かちびと.net
Wolffは中小規模のWebアプリを構築するために開発されたシンプルで軽量なPHPフレームワークです。小さい、スケーラブル、簡単で速い、がコンセプトのようです 大きなフレームワークを使うことなく構築可能で、シンプル故にゲ句集コストも低いとの事です いくつかの便利な機能とユーティリティが用意されており、アプリ開発をサポートしてくれます Wolff
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オープンソースとして提供されているセキュリティ重視の超シンプルなビデオチャットアプリ・「Jitsi Meet」
ミニマルで使いやすいマインドマップ作成アプリ・「Zen Mind Map」
SVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリ・「Iconset」 - かちびと.net
CC0で配布されている、髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクト・「Open Peeps」 - かちびと.net
多種多様なCSSローダー集 | かちびと.net
Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」 - かちびと.net
CSSと1つのdiv要素で出来る表現いろいろ | かちびと.net
マルチレイヤーな複雑なCSSグラデーションのコードをコピーできる・「Gradienta」 - かちびと.net