UIプロトタイプをその場で作成して共有できるWebアプリや拡張機能があればいいのにと思ったことはありませんか?
私たちは皆そうです! 私たちは皆、自分のサイトやアプリをどのように見たり感じたりしたいかについての考えを持っています。
それで、あなたは本当に素晴らしいデザインを思いついたのですが、それをどのようにしたのか正確に思い出せませんか?
今、あなたはそれを共有する方法を見つけなければなりません。 かなり複雑なデザインを共有しようとしている場合、これには数日、場合によっては数週間かかることがあります。
Webアプリのプロトタイプを作成するのを待つ理由はありません。 Dabbletで今すぐ作成してください。
要素をドラッグアンドドロップし、スタイルを設定して保存します。 レビューのためにデザイナーに送信するか、単にプレゼンテーションにコピーします。 可能性は無限大。
Dabbletとは何ですか?
使い方 ダブレット、CSSとHTMLコードの小さなスニペットをリアルタイムで試すことができます。
これを使用する場合、CSSコードにプレフィックスは必要ありません。 GitHubの要点を使用すると、コンテンツを保存したり、他のサイトに投稿したり、他のユーザーと共有したりできます。
これは、コードスニペットを他の開発者と共有し、フィードバックを得るのに最適な方法です。
どのように動作しますか?
コードを入力するとすぐに、視覚的な出力がすぐにその上に表示されます。 JavaScriptを キーストロークごとに実行するのは苛立たしく、特定の状況ではブラウザが使用できなくなる可能性があることを考えると、これは唯一の免除です。
[JavaScript]タブの[JSの実行]オプションまたはキーボードショートカット(Ctrl+EnterまたはCmd+Enter)を使用すると、Dabbletの実行時にJavaScriptが実行されます。 オプションメニューを使用すると、このスタイルを変更できます。
開発者は、これらXNUMXつの言語すべてで同時にコーディングを切り替えるか、完成品を見ることができます。
特徴
知っておくべきDabbletの機能は次のとおりです。
クイックCSS編集: CSSプロパティをすばやく追加、編集、削除できます。 変更はリアルタイムでページに反映されます。
構文の強調表示: CSSとHTMLコードは構文が強調表示されているため、読みやすく、理解しやすくなっています。 入力時にコードも検証されます。 必要に応じて、コードボックスを非表示にすることもできます。
オートコンプリート: Dabbletは、CSSのプロパティと値のオートコンプリートを提供します。 これは、スタイルシートを作成または編集するときに非常に役立ちます。
ビルド済みのCSSスタイルシート: 人気のあるWebサイトから事前に作成されたCSSスタイルシートにアクセスできます。 これらを使用して、自分のWebサイトにスタイルをすばやく簡単に追加できます。
要旨のサポート: DabbletはGitHubGistsをサポートしているため、コードスニペットを保存して他のユーザーと簡単に共有できます。
ライブプレビュー: ページをリロードしなくても、コード変更の結果をリアルタイムで確認できます。 たとえば、テキストの色を変更すると、入力時に変更がテキストに反映されます。
キーボードショートカット: Dabbletには、新しいスタイルルールの追加やコメントなど、一般的なタスク用のキーボードショートカットがあります。
複数の表示モード: Dabbletには複数の表示モードがあり、コードと結果を並べて表示したり、上下に並べて表示したりできます。
メリット
- Quick CSS
- サインインしている場合でも、シークレットモードを保存できます。
- 角度、色、継続時間などのさまざまなパラメーターのインラインCSS値プレビューア。
- すべてがXHRで処理されるため、保存してもページが更新されることはありません。
- 豊富なキーボードショートカット。
- すべてのコードは自動フォーマットされます(マークダウンを除く)。
- 最初からしっかりしたドキュメント。
デメリット
- インターフェースは最初は少し圧倒されますが、慣れてきます。
- プロジェクトレベルの管理機能は(まだ)ありません。
Dabbletの統合
すべてのプラットフォームは他のサービスと統合する必要があり、Dabbletも例外ではありません。 以下は、Dabbletが提供する統合の一部です。
Google Analytics
GoogleAnalyticsのトラッキングコードをDabbletページに簡単に追加できます。 これにより、Dabbletのページビューやその他の統計を追跡できます。
Ubuntu
Dabbletを使用してUbuntuテーマを作成できます。 新しいDabbletを作成し、CSSおよびHTMLコードを追加し、Webブラウザーでテーマをプレビューできます。
DigitalOcean
独自のクラウドホスティング会社が企業にクラウドコンピューティングサービスを提供し、企業がより効率的に業務を拡大できるようにします。
Dabbletはそれで何をしますか?
これで、Dabbletsを作成、管理、および展開できます。 DigitalOceanスペース。
これにより、すべてのコードスニペットをXNUMXつの場所に保持し、他のユーザーと簡単に共有できます。
Dabbletsの代替案
代替案は常に存在し、同じように、Dabbletに関して熟考するためのいくつかを以下に示します。
ペーストビン.com
プログラマーは通常、Webサイトを使用してソースコードまたは構成データフラグメントを保存します。 ただし、提供されたスペースには誰でも任意のテキストを入力できます。
JSビン
JS Binは、JavaScript用の無料のテストツールです。 Javascriptを一方のペインに入力し、HTMLをもう一方のペインに入力すると、結果は短縮URLを介して共有される場合があります。 最も一般的に使用されるJSライブラリのいくつかから選択できるメニューを利用してください。
Cssデッキ
このツールは、テストケースを作成し、コーディング作業を支援できる他の人と交換するのに最適です。 さまざまなオプションを使用して、他のプログラマーと即座にプロジェクトで共同作業を行うこともできます。
プランカー
Plunkerは、Web開発者がブレインストーミング、コラボレーション、および考えの共有を行うことができるデジタルプラットフォームです。
たとえば、「Hello、world!」から始めることができます。 任意の言語でプログラムし、コードスニペット、マークダウン、スクリーンショットを追加して、豊かな学習体験を作成します。
最後のワード
結論として、Dabbletは、Web開発者、特に迅速かつ簡単に行う方法を探している開発者にとって便利なツールです。 彼らのコードをテストします。
そのさまざまな機能と統合により、このプラットフォームの用途を見つけるのは難しいことです。
今日それを試してみてください!
コメントを残す