タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
開発者の日々の作業をサポートする様々なミニツールを集約したオープンソースのデスクトップアプリ・「DevToys」 - かちびと.net
DevToysは開発者の日々の作業をサポートする様々なミニツールを集約したオープンソースのデスクトップアプリです。Windowsエコシステムを採用するように設計されており、Windows 10のビルド1903以降で動作するそうで、Windows専用のアプリとなっています。 JSONのフォーマット、テキストdiff、RegExpのテスト、base64のエンコーダー/デコーダー、ハッシュ化ツール、 UUIDジェネレーター、loremipsumツール、JSON⇔Yaml変換、カラーシミュレーター、PNGとJPGのコンプレッサー、Markdownプレビュー、HTMLやURLのエンコーダー/デコーダーなどが1つのアプリにまとめられています。 また、クリップボードのデータを扱えるようになっており、作業を円滑に進める事が出来ます。勿論オフラインで動作しますし、OSSなのでアプリを加えたり日本語化も可能で
任意の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
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」 - かちびと.net
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
どの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ライブラリとし
Auroraはcookieを使わない完全オープンソースなWeb解析ツールです。GAを始め多くのアクセス解析ツールが行う個人情報収集を行わず、アクセスした全員を匿名ユーザーとして扱う、というプライバシーフレンドリーな解析ツールです。 100％OSSとなっており、有償サービスなども用意しておらず、常にソースコードを開示しており、ユーザーへのプライバシーの配慮だけでなく開発者にも安心して使える解析ツールとなっています。 Next.js、Tailwind.css、Knex.jsで作られています。ライセンスはMITとの事。 個人的にもそろそろGA卒業したいなと思いつつも重い腰が上がらず。ブラウザやメールサービスなど出来るところから脱Googleを試みつつもなかなか難しいなという印象です。時間を作って試していきたいと思います。 Aurora
Google Analytics代替として開発された、Cookie不使用のオープンソースの解析ツール・「Pirsch」 - かちびと.net
PirschはGoogle Analytics代替として開発された、Cookie不使用のオープンソースの、シンプルでプライバシーに配慮した解析ツールです。 GAほど多機能ではないものの、PVやセッション、リファラなどWebサイト解析に必要なメトリックを提供してくれます。 解析用のスクリプトも1KB未満で解析対象のWebサイトのパフォーマンスを損ないません。データはCSVでエクスポートも可能な他、メールで定期的に解析結果を送る事も可能です。 管理画面もシンプルで見やすく分かりやすい印象でした。OSSとして提供されていますが、Webサービスとしても展開しているようです。現在はベータ版のため、無償で利用できるみたいです。ライセンスはAGPL-3.0との事。 PirschOn Github
高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」 - かちびと.net
LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目指しているそうです。超高速レンダリング、物理演算、パーティクル、サウンドエフェクト、キーボード/マウス/ゲームパッドの入力処理、アップデート/レンダリングループ、デバッグツールなど、ほとんどのゲームに必要なものをすべて備えているとの事。 Steamのようなプラットフォームで配布するために、electronを使ってWindowsの実行ファイルとしてビルドすることも可能だそうです。ライセンスはMIT。 LittleJS
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table> 単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与しま
Googleアナリティクス代替として開発されたオープンソースの自己ホスト型Web分析ツール・「umami」 - かちびと.net
umamiはGoogleアナリティクス代替として開発されたオープンソースの自己ホスト型Web分析ソリューションです。 GAよりもシンプルで軽量、使いやすさを考慮して開発されたようで、GAよりもユーザーフレンドリーでプライバシー重視且つオープンソースの代替手段を提供したいそうです。 自身以外でもユーザー登録及び他ユーザーが任意のWebサイトを管理する事も可能で、共有も出来るようになっています。 ページビュー、使用デバイス、リファラなど、解析にとって重要な指標のみを取得し、単一ページに表示する事で解析を合理的に行えるように設計されています。 解析できるWebサイトの数は制限なく、追跡用のスクリプトは6kbと非常に軽量なため、Webサイトのパフォーマンスにも影響を与えません。 何よりOSSで自己ホスト型なので第三者、というかGoogleに解析データを握られる心配が無いのが大きいですね。ライセンス
Map Generatorは架空の都市の地図を作成出来るオープンソースのWebアプリです。 細かな設定項目を決めてgenerateを押すだけで決めた設定に沿った地図がランダム生成されます。作成した地図はSVGやPNGでエクスポートできる他、STLやHeightmapといった3Dレンダリングにも対応しています。 地図の設定は非常に細かな設定が可能となっています。学習コストは少し高そうな印象ですがドキュメントも一応用意されているので利用する際は合わせてご覧ください。ライセンスはGPL 3.0との事です。 Map Generator
degoogleは脱Googleの為に作られた代替アプリ等のリストです。Googleから距離を取りたい時に重宝するリソース等がリスト化され、Githubでも共有されています。 検索や解析、グループ、フォト、Gmail、Workspace、Youtube、ニュースに翻訳にアラート、カレンダー、ドキュメントやスプレッドシート、ドライブなどなど他のあらゆるGoogleのサービスの代替サービスも纏められています。 更に追跡の防止、各デスクトップアプリやOS、スマホアプリなどなどGoogleが関わっているサービスやアプリの代替方法が大量にリスト化されています。 とはいえ完全互換でもないですし、現実的に難しい問題ではありますが、個人的にも、もう昔のGoogleはいないと思っているので、自分が出来る範囲で自己防衛に努めようと思っているので参考に見てみようかと思います。 degoogle
CSS製の斜めやジグザグなどの境界を手軽に作れる・「CSS Section Separator Generator」 - かちびと.net
CSS Section Separator GeneratorはCSS製の斜めやジグザグなどの境界を手軽に作れるジェネレーターです セクションが変わる所を分かりやすく明示する、みたいなやつ。角度や位置などを変更して排出されたコードをコピーすればいいだけです 手軽で良いですね。ジェネレーターのソースコードも公開されています CSS Section Separator Generator
人気のアプリの代替になるオープンソースのソフトウェアをまとめている・「Opensource.builders」 - かちびと.net
Opensource.buildersは人気のアプリの代替となるOSSをまとめているWebサイトです SlackやGoogleの各サービス、1PasswordやGithub、Shopify、Heroku、Zendeskなどなど様々な職種や業界の方に好まれていて、且つ有償プランもあるアプリの代替を中心にまとめているようです コストを落としたいけど機能面でしぶしぶ有償プランを選択している、という方向けでしょうか。機能が同じでも環境的になかなかこの手の代替アプリに移行できない事情の方も多い印象ではありますが、選択肢があればいざという時（急に料金が大きく上げられる等）に役立つかもしれませんね 尚、本WebサイトもGithubにてOSSとしてソースコードが公開されています。ライセンスはMITとの事です Opensource.buildersOn Github
アニメーションする背景をCSSで簡単に作れる・「Animated CSS Background Generator」 - かちびと.net
Animated CSS Background Generatorはボケやレクタングルなどシンプルなオブジェクトがアニメーションする背景をCSSで簡単に作れるWebアプリです オブジェクトの数、サイズ、スピードやカラーを設定するだけで作成可能で、コードも発行してくれるのでWeb制作の知識が無い方でもコピペで使う事が出来ます こんな背景が作れます。JS不要なのは良いんですが、オブジェクトを増やし過ぎるとHTMLやCSSのソースが比例して増えるのでJSで作った方が良いケースもあるかもしれませんね とはいえCSS製を1から作るのは非常に面倒なので覚えておいて損はないかなぁと思います Animated CSS Background Generator
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」 - かちびと.net
this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思いますが、僕の説明が下手で語彙も乏しいためです、すみません。 例えばdisplay:noneとhiddenはどう違うのか、style="width:***"とwidth="***"はどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する、といったものになります。 フロントエンドのスペシャリストは復習に、学び中の方は勉強の一環として如何でしょうか。尚、書いてあることの全てが正しいかどうか確認してないので誤った事が書かれていたらごめんなさい。 this vs that
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」 - かちびと.net
ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示されるかを一括確認できる、というもの Electronベースとなっています。試しに使ってみました こんな感じで設定した各デバイスで指定したWebページが表示されます。スクロールやページの移動は全ウィンドウで連動しています。 ↑ インスペクタもついており、その場で編集、表示確認等を行う事が出来ます ↑ また、全デバイスのフルスクリーンショットもワンクリックで可能となっています。もちろん各デバイス単位でも撮影可能。撮影されたSSはドメイン、日付、撮影した時間を名前としたファイル名やフォルダ名で保存されますので上書きする心配もありません 尚、デバイスはかなりの量が用意されているのでお好みに合わせてウィンドウを
多くの機能が永久に無料で使える、フリーランサー向けに開発されたプロジェクト管理ツール・「Hectic」 - かちびと.net
Hecticはフリーランサー向けに開発されたプロジェクト管理ツールです。プロジェクトの大半を1人、或いは少人数で対応する事が求められるフリーランサーが有益と思えるような機能が備わっています。 機能はプロジェクト管理の他、クライアントの管理、会計システム（これは日本では使いにくいかもですが）、ドラッグ&ドロップによる提案書や契約書の作成、カレンダー、請求書の発行、タイムトラッキングの他スマホアプリも含めて全て永久に無料で利用する事が出来ます。 有償プランはMTGスケジューラーなど少しの追加機能と共同編集者（チーム利用）をする場合のみとなっています。通常利用する分には無料プランのみで事足りると思います。UIもプロジェクト管理ツールに良く見られる一般的なUIですので使った事がある方なら困惑する事も少ないかと思います。 定期的な支出は少しでも抑えたい所ですし、プロジェクト管理ツールのコストで困って
コンテンツの自動生成も可能な、SvelteKitで構築されたオープンソースのAI搭載CMS・「Vontigo」 - かちびと.net
Vontigoはコンテンツの自動生成も可能な、SvelteKitで構築されたオープンソースのAI搭載CMSです。MITライセンスの元でソースコードが公開されています。 ChatGPTの機能が統合されており、コンテンツの生成を自動化する事で他のタスクにリソースを割くことが可能で、更にチャットボットやSNS管理、予測分析などの機能も利用可能となっています。 CMSとAIの統合は、例えば世界的に高いシェア率を誇るWordPressでもAI powerなどといったChatGPTとの統合プラグインも既に公開されていますが、今後もこういったAI統合のソフトウェアは増えていくことが予想されますが、出来れば他のLLMの選択も可能になると良いですね。 Vontigo
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
Result 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目が対策した場合+画像が無い時。 3番目が対策した場合+画像がある時。 何もしなければ1番目の表示になります。 対策すると2番目のように任意のスタイルで表示されます。 対策した場合でも3番目のように画像があれば影響を受けません。 css ご存知のように基本的にはimgに疑似要素は使う事が出来ません。 が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。 img { display: inline-block; font-family: Arial, sans-serif; font-weight: 300; line-height: 2; text-align: center; min-width: 300px; min-height: 50
コード不要でレスポンシブ対応のWebページを作成、ダウンロードできるシンプルなWebサイトビルダーアプリ・「Aspect」 - かちびと.net
Aspectはコード不要でレスポンシブ対応のWebページを作成、ダウンロードできるシンプルなWebサイトビルダーアプです。 よくあるタイプの簡易的なビルダーではなく、要素はD&Dで配置したり矢印キーで微調整可能、色やテキストも自由に設定可能で、その場でレスポンシブWebデザインの表示確認も出来るようになっています。 作るだけならログインも不要で誰でもすぐに利用可能、ソースをDLしたい場合はユーザー登録すれば無料でHTML+CSSをDL出来ます。 使い勝手もシンプルで学習コストもかからないと思います。サッとペラページを作りたい、なんて時なんかにもよさげです。 Aspect
Slazzerは画像のメイン部分を残し、自動で背景を削除するオンラインの切り抜きツールです。 以前にご紹介したremove.bgやSocialBook Free Background Removerなどの後発サービスになります。 先発との違いは、個人的には性能の差を感じました。人だけでなく、動物や物など、写真内のメインとなりうるオブジェクトを解析して精度よく切り取ってくれる印象です。
Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> まずスクリプトを読み込みます。 <script>dayjs().format()</sc
各OSに対応のオープンソースのSQLエディター/データベースマネージャー・「Beekeeper Studio」 - かちびと.net
Beekeeper StudioはWindows,、Linux、Macなどに対応したオープンソースのSQLエディター/データベースマネージャーです MySQL、Postgres、SQLiteやSQL Server、MariaDB、Amazon RedshiftなどのDBを合理的に管理できる、というもの SQLエディターが組み込まれており、オートコンプリート機能も搭載されています その他、よく使用するクエリを保存したりテーブルデータを可視化するテーブルビュー機能なども備えられています ソースコードはGithubにて公開されています。ライセンスはMIT Beekeeper Studio
CSS Gridでシンプルなカレンダー表示 | かちびと.net
Result CSS Gridを使ってカレンダーを作ろう、みたいなやつです。需要はあるのか分かりませんが個人的にちょっと必要になったのでメモ。 以前書いた凝ったものではなく、非常にシンプルなコードで作るシンプルなカレンダーです。 css .calendar {/*css gridで7列レイアウトを作る*/ display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-wrapper {/*カレンダーの幅*/ width: 280px; } .weekday {/*曜日部分*/ background: #eee; } ul {/*全体*/ list-style: none; margin: 0; padding: 0; text-align: center; } .first-day {/*月の最初の日の始まり。日曜なら1
URLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示する・「github1s」 - かちびと.net
github1sはURLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示するWebアプリです。 https://github.com/conwnet/github1s 例えば上のようなURLを https://github1s.com/conwnet/github1s というように、github.comをgithub1s.comとするだけでVSCode風のUIでGithubを閲覧できるようになる、というもの。昔別の用途ですが似たようなものがありましたね。Youtubeをなんか便利にする、みたいなのだった気がする。 各ブラウザのエクステンションも用意されていますが、前述のようにGithubのドメインに1sを加えるだけなので無くても良さそうですね。 勿論ツリーもコードもVSCodeライクになりますのでユーザーの方なら見やすくなるかもしれませんね。こちらのアプリはO
任意の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などといったテスト環境も提示してくれます。 利用は無料でユーザー登録も不要です。パフォーマ
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script type="text/javascript" src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script> <script type="text/javascript"> Animon.animon(); </script> CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。 <h1
Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」 - かちびと.net
vue-interactive-paycardはVue.jsを使ったクレジットカード情報入力フォームです。上は動作サンプルです クレカのカード会社自動認識も可能で、スムーズでインタラクティブに動作します。カード情報は一部伏せられる親切設計です よく見るUIですが、動きが好みでユーザーにも分かりやすい印象だったので備忘録。MITライセンスの元、ソースコードが公開されています vue-interactive-paycard
Result スクロールするとテキストにアニメーションしながらハイライトする、というもの。 通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。 JavaScript (function (document) { const markers = [...document.querySelectorAll('mark')]; const observer = new IntersectionObserver(entries => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { entry.target.style.animationPlayState = 'running'; observer.unobserve(entry.target); } }); }, { threshold
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script> Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", anima
Gradientaはマルチレイヤーの複雑なCSSグラデーションを紹介、コードもコピーできるプロジェクトサイトです 各グラデーションはCSSだけでなくjpgとしても配布されており、それぞれダーク、ライト、シンプル、鮮やか、対照的、抽象的などのカテゴリに分けられています 中にはCSS製とは思えないものもあって勉強になりました
任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタ・「Norde Source」 - かちびと.net
動作テスト シンプルなUIです。デフォルトではFeatherやFontAwesome、IoniconsなどオープンソースのSVGアイコンセットを配布するプロジェクトが項目に入れられており、その場でアイコンセットを作る事が可能となっています。ついでにOpen Peepsも入れられtました ↑ 勿論、+ADDから任意のアイコンを複数選択して、管理、一括でスタイルを変更する事も可能です。任意のセット名にしたり検索も出来るように。 ↑ エクスポートはSVG、PNG、JPGなどのお馴染みの拡張子からWebPやVeu.js向けなども用意されています ↑ Open Peepsなどのように複数カラーを使用したアイコンセットでは、同じカラーの箇所を一括変更できるので統一されたスタイルが破綻する心配もありません シンプルで扱いやすいのでSVGを管理しやすくなるのではないかなと思います Norde Source
Soketiはシンプルで高速なオープンソースのWebSocketサーバーです。TSで書かれておりAGPL-3.0ライセンスの元でソースコードが公開されています。 Fastifyの8.5倍、Socket.IOの10倍のレベルで実行可能なuWebSockets.jsをベースに構築されているそうです。 WebSocketといえばPusherですが、こちらと比較して安くて制限もなく利用する事が出来ます。また、Pusherと互換性もあるそうでコードを置き換える必要はないそうですので移行も難しくないでしょう。ドキュメントも充実していました。 Soketi
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」 - かちびと.net
Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します 機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT Vanilla-DataTables
Result タイトルでうまく説明できませんでしたけどこういうやつです パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です css .container {/*高さを画面一杯にしておく*/ height: 100vh; overflow-x: hidden; } .slide {/*position: sticky;を含めてスタイリング。background-size: cover;を忘れずに*/ position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; align-item
ct.jsはGUIで2Dゲーム開発が可能なオープンソースの2Dゲームエディタです。シューティングやアドベンチャー、パズル、ビジュアルノベルなど様々なゲームを直感的な操作メインで作成する事が出来ます。 基本的にはGUIツールとなっており、マウスによるD&Dでオブジェクトを配置したり、といった流れになりますが、直接JavaScriptを書くことも可能です。 モジュール式になっており、機能を追加する事も可能です。モジュールは豊富に用意されているみたいです。 ゲーム開発は勿論、学習ツールとしても使えるとの事です。ライセンスはMIT。 ct.js
Result detailsタグを使った開閉コンテンツのスタイリングサンプル集です。 JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。 css [data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-betw
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」 - かちびと.net
cookieを使わない完全オープンソースなWeb解析ツール・「Aurora」 - かちびと.net
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」 - かちびと.net
架空の都市の地図を作成出来るオープンソースのWebアプリ・「Map Generator」 - かちびと.net
脱Googleの為に作られた代替アプリ等のリスト・「degoogle」 - かちびと.net
imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する | かちびと.net
画像のメイン部分を残し、自動で背景を削除するオンラインの切り抜きツール・「Slazzer」 - かちびと.net
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」 - かちびと.net
スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」 - かちびと.net
スクロールに応じて任意のテキストにアニメーションしながらハイライト - かちびと.net
マルチレイヤーな複雑なCSSグラデーションのコードをコピーできる・「Gradienta」 - かちびと.net
シンプルで高速なオープンソースのWebSocketサーバー・「Soketi」 - かちびと.net
CSSのみでスクロール時に各セクションを固定するパララックス | かちびと.net
GUIで2Dゲーム開発が可能なオープンソースの2Dゲームエディタ・「ct.js」 - かちびと.net
OpenAI + Vercel + Next.jsで構築された、質問に対しAIが回答するシンプルなOSS・「Teach Anything」 - かちびと.net
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ | かちびと.net
www.nikkei.com
note.com/40sbestmake
www.nikkei.com
kensuu.com
wxmx07589.seesaa.net
norika.dt.weblog.vc