リアルタイムコラボレーションなアプリ開発のためのNext.jsスターターキット・「Liveblocks starter kit」 - かちびと.net
Liveblocks starter kitはリアルタイムコラボレーションなアプリ開発のためのNext.jsスターターキットです。例えばTodoやホワイトボードなどなど他ユーザーと共同で作業可能な様々なアプリケーションの開発をサポートしてくれます。 本スターターキット自体はOSSとしてソースコードが公開されていますが、開発を進めるにはLiveblocksが提供するAPIキーを取得する必要がある、というビジネスモデルになります。無料プランも勿論用意されています。 コンセプトとして、アプリの参加ユーザーが共同作業するスペースの「ルーム」、ルームにいるユーザーの動きや行動をリアルタイムに可視化する「プレゼンス」、ユーザーがルーム内で行う相互作用（文章やファイル等）を管理する「ストレージ」、ユーザーが退室してもデータを保管できる「ストレージの永続化」の4つの機能をベースとして提供する事で開発者はコ
全てオープンソースで公開されている、Web制作に使えるシンプルなツール集・「Omatsuri」 - かちびと.net
OmatsuriはWeb制作に使えるシンプルなツールのコレクションです。基本的にフロントエンド開発向けがメインだそうです。1つ1つはシンプルなツールですが、全てがPWA対応且つオープンソースとしてソースコードも公開されています。 名前は日本語の「お祭り」から取ったそうです。用意されているツールはCSSで三角を作るジェネレーター、カラーパレット生成ツール、ページを区切る用の湾曲したSVG画像を作れるツール、SVG圧縮ツール、SVG→JSXのコンバーター、Base64へのエンコーダー、住所や名前など人物用のダミーデータジェネレーター等々、現在は11種のツーﾙが用意されています。 全てのツールはプライバシーを尊重し、追跡コードや広告などは付けられていないそうですが、基本的にOSSはソースコードを調べてから利用する事も開発者の方は推奨しています。ライセンスはMITとの事です。 Omatsuri
Webやデスクトップ、モバイルなどのアプリ開発向けのデザイン/UIコンポーネントライブラリ・「kor」 - かちびと.net
korはWebやデスクトップ、モバイルなどのアプリ開発向けのデザインシステム&UIコンポーネントライブラリです。 LitElementが採用されており、ブラウザやOS、フレームワークなどに依存せず、直感的で一貫性のある快適なUI設計と開発をサポートしてくれるそうです。 含まれるUIコンポーネントはアコーディオンやアバター、パンくず、フォーム、モーダルウィンドウ、プログレスバーやテーブルなどなどお馴染みのコンポーネントは一通りそろえられています。 ドキュメントには実際にkorを使ったアプリケーションが公開されており（Webアプリ、Androidアプリ）動作テストを行えるようになっていますので合わせてご覧になってみては如何でしょうか。ライセンスはMIT。 kor
SNS等のローディングで見かけるプレースホルダーをSVGで作れる・「Create Content Loader」 - かちびと.net
Create Content LoaderはSNS等のローディングで見かけるプレースホルダーをSVGで作れるWebアプリです。 FacebookのカードやInstagramなどで読み込み中にコンテンツのシルエット丸ごとプレースホルダーにした、みたいなアレ。 試しに作ってみました。 スクエアかサークルの任意のオブジェクトを作成して配置、色やアニメーション速度を設定します。 また、ユーザーによって作られたサンプルもいくつか公開されています。 コードはReactやVue、SVGから選択可能で、今後はgifでのエクスポートも予定されてるみたいです。 本アプリはOSSとしてもソースコードが公開されています。ライセンスはMIT。 Create Content Loader
ドキュメントの管理やショートカットによる定型文挿入が可能なChromeエクステンション・「Linguix」 - かちびと.net
Linguixはドキュメントの管理やショートカットによる定型文挿入が可能なChromeエクステンションです。 導入する事でtextarea内に書いた文章をドキュメントとして保存したり、予め設定した定型文を任意のショートカットで挿入出来るようになります。 ショートカットは任意のキーワードをタイプしてからshift+ctrl+spaceすれば置換できます。仮に忘れてしまった場合でもtextareaの右下部にアイコンが表示されているのでそこから設定したショートカットを探せるようにもなっています。 Webで文章を書いたり連絡する事が多い方にはいいツールじゃないかなと思います。利用にはユーザー登録が必要になりますが、GoogleやFacebookのアカウントで登録可能です。 Linguix
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」 - かちびと.net
this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思いますが、僕の説明が下手で語彙も乏しいためです、すみません。 例えばdisplay:noneとhiddenはどう違うのか、style="width:***"とwidth="***"はどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する、といったものになります。 フロントエンドのスペシャリストは復習に、学び中の方は勉強の一環として如何でしょうか。尚、書いてあることの全てが正しいかどうか確認してないので誤った事が書かれていたらごめんなさい。 this vs that
応答性、読みやすさ、モジュール性を重視して設計されたミニマルなCSSフレームワーク・「mono/color」
mono/colorは応答性、リーダビリティ、モジュール性を重視して設計されたミニマルなCSSフレームワークです。 必要な物だけを揃えたモノクロタイプと、カラースキームやカードUI、ユーティリティなども揃えたフルタイプの2通りが用意されており、ダークモードも搭載されています。 サイズも軽量で学習コストも低く、使いやすそうでした 試しにフルタイプで動作テストです。スッキリしたレイアウトで可読性も高く、用意されたカラースキームも見やすい印象でした。 classは直感的な命名規則で覚えやすいと思います。が、コンフリクトしそうなので他ライブラリとの併用は避けた方が良いかもしれません。 <button class="btn primary success">Success Primary Ghost Button</button> <textarea class="rounded bg-succes
FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」
1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。 センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メインコンテンツ/フッターを1カラムで揃えたパンケーキスタイル、なつかしのHoly Grailレイアウトやカードを並べたUIなどよく見かけるレイアウトが揃えられています。 例えばこのようなカードを並べたようなレイアウトはかなり使われている印象ですね。 CSSをよく学んでおられる方には不要だと思いますが、そうでない方には結構有益なプロジェクトサイトではないかなぁと思います。 1-Line Layouts*
JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」 - かちびと.net
Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで作られたWebアプリ等のミニプロジェクトを集めたWebサイトです もともとオンラインの学習アプリの教材みたいで、これらのアプリの作成法を教えてくれるクーポンも発行してくれているようです 20以上のミニプロジェクトが公開されており、全てGithubにてソースコードが公開されています。どれも割と実用的なので勉強になりそうです Web Projects With Vanilla JavaScript
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
1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」
1locは1行のコードで使えるJavaScriptユーティリティをまとめているプロジェクトサイトです。名前は1行のLOC (line of code)という意味のようです スニペットのまとめページ、みたいなもの。配列やDOM、数や文字列の扱いや他にも様々なスニペットが紹介されています 覚えておくと地味に便利そうですね。Githubでも公開されているのでフォークして自分用スニペットを追加できるようにもなっています favorite JavaScript utilities
[書評] 「Web制作者のためのSublime Textの教科書」をご献本いただきました
まずは献本御礼。Junさんありがとうございました！僕もメインエディタとして利用しているSublime Textの使い方や応用方法などが記載された教科書になります。 横浜のコワーキングスペース・タネマキを手がけた一人のJunさんより頂きました。Sublime Textはメインエディタなので有り難く拝見させて頂いています。 ↑ 外観はこんな感じ。オレンジの表紙が印象的です。 ↑ 中身は非常にシンプルで、長く読んでいても疲れませんでした。 ↑ ショートカットキーの一覧も網羅 以下、主な見出しです。 第1章 Sublime Textを導入しよう1-1 Sublime textとは1-2 Sublime Textのダウンロードとインストール1-3 Sublime Textの画面解説1-4 対訳付きメニュー一覧1-5 Sublime Textの環境設定1-6 パッケージのインストール1-7 日本語環境
![[書評] 「Web制作者のためのSublime Textの教科書」をご献本いただきました](https://cdn-ak-scissors.b.st-hatena.com/image/square/94dfb7dd14c26bb0e519db116e62dd2a223a622e/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2014%2F04%2Fst00.jpg)
IxDをチェックする為のリスト・「IxD Checklist」
IxD Checklistは、その名の通り、インタラクションデザインのチェックリストです。項目はそれぞれ、アフォーダンス、フィードバックの精度、簡潔性、構造、一貫性などに分けられています。ザッと見直したり、参考にして自分用に作成するのも良さそうですね。下部にはチェック項目を作るに当たり、参考にした資料やツールなども紹介されています。 IxD Checklist
PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordion - かちびと.net
必要になりそうだったのでメモ。通常のPCサイトではタブ、スマフォ等の画面の狭いデバイスではアコーディオンで実装するスクリプトのご紹介です。jQuery依存になります。 Easy-Responsive-Tabs-to-AccordionはレスポンシブWebデザイン対応のWebサイトでタブコンテンツを使いやすくするライブラリです。アコーディオンの方がみやすくタップしやすいケースもあるので覚えておくと良いかも知れません。とはいえ先発ライブラリも確かあったはずなので使いやすいほうで。 動作サンプルです。直接見に行って実装エリアをリサイズすれば確認出来ると思います。 コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <sc
様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO
様々なJSライブラリのまとめサイトのご紹介。主にクライアントサイドのJSライブラリを中心にコレクションしているみたいです。シンプルで探しやすかったのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。
様々なスタイルのツールチップを実装できるスクリプト・opentip
様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 });上記のようにAPIを使用する方法でもOKとの事。 ライセンスはMITです。詳細は以下よりどうぞ。 opentip
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OpenAI + Vercel + Next.jsで構築された、質問に対しAIが回答するシンプルなOSS・「Teach Anything」 - かちびと.net
CSS box-shadowで出来る様々なスタイルを収集、コードもコピーできる・「Beautiful CSS box-shadow examples」 - かちびと.net
GUIで2Dゲーム開発が可能なオープンソースの2Dゲームエディタ・「ct.js」 - かちびと.net
GitHubアカウントから開発者向けポートフォリオを作成出来る・「Profiled」 - かちびと.net