任意の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
脱Googleの為に作られた代替アプリ等のリスト・「degoogle」 - かちびと.net
degoogleは脱Googleの為に作られた代替アプリ等のリストです。Googleから距離を取りたい時に重宝するリソース等がリスト化され、Githubでも共有されています。 検索や解析、グループ、フォト、Gmail、Workspace、Youtube、ニュースに翻訳にアラート、カレンダー、ドキュメントやスプレッドシート、ドライブなどなど他のあらゆるGoogleのサービスの代替サービスも纏められています。 更に追跡の防止、各デスクトップアプリやOS、スマホアプリなどなどGoogleが関わっているサービスやアプリの代替方法が大量にリスト化されています。 とはいえ完全互換でもないですし、現実的に難しい問題ではありますが、個人的にも、もう昔のGoogleはいないと思っているので、自分が出来る範囲で自己防衛に努めようと思っているので参考に見てみようかと思います。 degoogle
どの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ライブラリとし
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」 - かちびと.net
this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思いますが、僕の説明が下手で語彙も乏しいためです、すみません。 例えばdisplay:noneとhiddenはどう違うのか、style="width:***"とwidth="***"はどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する、といったものになります。 フロントエンドのスペシャリストは復習に、学び中の方は勉強の一環として如何でしょうか。尚、書いてあることの全てが正しいかどうか確認してないので誤った事が書かれていたらごめんなさい。 this vs that
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」 - かちびと.net
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:nul
PHPで書かれたオープンソースのPocketクローン・「wallabag」 - かちびと.net
wallabagはオープンソースとして公開されているPocketクローンです。PocketやInstapaper、すでにサービスをシャットダウンしてしまったReadabilityなど、後で読む系サービスの代替アプリがOSSとして提供されています。 主な特徴として、完全レスポンシブ、スマフォアプリの用意、ブラウザ拡張対応、PocketやInstapaperからのデータ移行、タグ機能、部分的なハイライト、RSSリーダー対応機能、取得した記事の任意のファイルでのエクスポート（JSONやCSV、ePUBやPDF、txt、HTMLなど）等が挙げられています。 条件付き（スマフォアプリのみ）のようですが、Pocketと同じくオフラインで読めるシステムもあるようです（参照：You can finally read your articles while being offline:wallabag）。P
hrの使いやすそうなスタイリングいろいろ
Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css.hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%; } .hr_d {/*両端フェードアウト*/ border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0); background-image: linear-gradient(left, #f
iOSのドローアプリ・Inkpadがオープンソースとして公開されています
iOSのお絵かきアプリ・InkpadがOSSとして公開されていたので備忘録。今は無料になったとはいえ、丸ごと公開とは太っ腹ですね。今後も増えていくのかな・・・ InkpadがMozilla Public Licenseの元でオープンソースとして公開されています。 こういうやつ。どこかで見た方も多い気もしますね。特徴は ペンツールで任意のベジェパス作成テキストオブジェクト作成ユーザーのアルバムから画像取得無制限のレイヤーレイヤの透明度を調整SVG、PDF、PNGやJPEGなどでエクスポートDropboxにSVG、PDF、PNG、JPEG形式で送信などなど、他にもあるようです。 ただし、ライセンス上では禁止されていないものの、このOSSをそのままApp Storeに出さないでね、との事です。詳細は以下でどうぞ。 Inkpad on Github
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
小さなサイズでも形状を認識できるようデザインされたオープンソースのミニマルなアイコンセット・「Radix Icons」
Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」 - かちびと.net
VSCodeやAtom、Sublimeなど、様々なテキストエディタのカラーテーマを作成、公開しているプロジェクト・「RAINGLOW」
オープンソースのGoogleマップオートコンプリートライブラリ・「geomapify」
オープンソースのTrelloライクなカンバンボードシステム・「Restyaboard」
Bootstrapで使える要素を170種ほどセットにしてOSSとして配布する・「Froala Design Blocks」
画像をアップロードすると、その画像内で使われているフォント名を割り出してくれる・「Matcherator」
オープンソースの国旗アイコン集・「FlagKit」
Googleマテリアルデザインを導入したCSS/JSフレームワーク・「MUI」
世界中で販売されている食品のデータを収集し、データベース化するプロジェクト・「Open Food Facts」
任意のWebサイトのスコアレポートを提出してくれる調査ツール・「Nibbler」
Siriのような、音声制御アプリケーションを構築する為のオープンソースのプラットフォーム・「Jasper」
