高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」 Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...2019.05.08 | 10時06分29秒
filterプロパティで、どんな背景画像でもテキストが読める状態にする Result See the Pen Text Over Any Background by kachibito (@kachibito) on CodePen. どんな背景でもテキストを読める状態にする、というもの ...2019.05.07 | 10時02分34秒
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」 CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...2019.05.06 | 10時36分16秒
プロトタイピングツールのFigmaで使えるBootstrap 4用のUIキット・「Figma Bootstrap 4 GUI Components」 Figma Bootstrap 4 GUI Components Figma Bootstrap 4 GUI ComponentsはプロトタイピングツールのFigmaで使えるBootstrap 4用のUIコンポーネント集です。話題のF...2019.05.05 | 10時09分40秒
様々な言語のコードをブラウザで実行テストできるオンラインIDE・「Llama」 Llama Llamaは様々なプログラミング言語のコードをブラウザで実行テストできるオンラインIDEです。対応言語はCやC++、Bush、Elixir、Go、Java、Haskell、Ruby、Pythonなどの他、JavaScrip...2019.05.04 | 10時10分09秒
textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」 Twemoji-Picker Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に...2019.05.03 | 10時08分04秒
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する Result See the Pen CSS-only Todo by kachibito (@kachibito) on CodePen. いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで...2019.05.02 | 10時11分25秒
Laravelで作られたオープンソースのURL短縮アプリ・「UrlHum」 UrlHum UrlHumはLaravelフレームワークをベースに開発されたURL短縮ツールです。プライバシーの強化が強く意識されており、IPアドレスのハッシュ化やIPアドレスの匿名化などに加えて各URLのアナリティクス機能なども備わ...2019.05.01 | 10時10分37秒
テスタブルなマイクロサービスやサーバーレスアプリ構築の為のJVMベースなフルスタックフレームワーク・「Micronaut」 Micronaut Micronautはテスタブルなマイクロサービスやサーバーレスアプリ構築の為のJVMベースなフルスタックフレームワークです。Java/Groovy/Kotlinが使えて高速な起動時間とメモリーフットプリントの小ささ...2019.04.30 | 10時04分42秒
Gmailの元リードデザイナーが作った、GmailをミニマルなデザインにするChrome拡張・「Simplify」 Simplify Simplifyは元Gmailのリードデザイナーが作った、GmailをミニマルなUIに替えるChrome拡張です。Google InboxのシンプルさをGmailにもたらす、というのが目的のよう。2008年~2012...2019.04.29 | 10時30分11秒
FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる Result See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito (@kachibito) on CodePen. text-a...2019.04.28 | 9時59分35秒
mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」 MailtoUI MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず...2019.04.27 | 10時05分54秒
URLを指定すると自動でアクセシビリティチェックを行い、レポートを生成するオープンソースのデスクトップアプリ・「Koa11y」 Koa11y Koa11yはURLを指定すると、そのWebページのアクセシビリティチェックを行い、HTMLやCSV、MarkdownやJSON、XMLなどの形式でレポートを吐き出すオープンソースのデスクトップアプリです。基本的にはチェ...2019.04.26 | 9時51分18秒
SVGアイコンを好みのカラーパレットに変更、ダウンロードできる・「SVG Colorizer」 SVG Colorizer SVG Colorizerは任意のSVGアイコンを好みのカラーパレットで色を変更、ダウンロードできるWebアプリです。アプリ側で用意したアイコンの他、任意のSVGファイルをアップロードすると自動で解析し、カ...2019.04.25 | 10時15分53秒
30日後には自動で消去されるブックマークツール・「30DayBookmarks」 30DayBookmarks 30DayBookmarksはブックマークしてから30日後に自動で消去されるブラウザ拡張のブックマークツールです。ただ単純にそれだけなんですが割と便利かも、と思たtので備忘録。自動で消えるので古いブックマ...2019.04.24 | 10時10分47秒
プログラミングの知識不要でWebアプリとしても開発できるオープンソースのゲームボーイ用ゲーム開発アプリ・「GB Studio」 GB Studio GB Studioはプログラミングの知識不要でゲームボーイ用のゲーム開発が可能なOSSです。GUIツールとして提供されており、コードを書かずに開発が出来るように設計されています。ElectronベースでOS問わず動...2019.04.23 | 10時17分56秒
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」 Slip.js See the Pen ZZRmaP by kachibito (@kachibito) on CodePen. Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシ...2019.04.22 | 10時01分13秒
mailtoリンクのクリックでクリップボードにコピーする Result See the Pen Copy mailto: email to clipboard by kachibito (@kachibito) on CodePen. mailtoリンクをクリックすると、...2019.04.21 | 9時58分25秒
SVGベースのモダンなカラーピッカーを実装する非依存の軽量JavaScriptライブラリ・「iro.js」 iro.js See the Pen iro.js demo by James Daniel (@rakujira) on CodePen. iro.jsはSVGで作られたモダンなスタイルのサークルタイプカラーピッ...2019.04.20 | 10時03分53秒
100以上のSNS等で、任意のユーザーIDが使用されているかを一括で調査出来る・「Instant Username Search」 Instant Username Search Instant Username Searchは100以上のソーシャルメディアサービス等で、任意のユーザーIDが使用されてるかどうかを一括で調査できるWebアプリです。各SNSのブロック...2019.04.19 | 10時24分02秒
CSSだけでシンプルなLight/Darkモード Result See the Pen Dark Mode without Javascript by kachibito (@kachibito) on CodePen. Webアプリやスマホアプリ等でよくあるダークモ...2019.04.18 | 10時03分40秒
jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」 Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...2019.04.17 | 10時29分08秒