検索
ホームページCMS チュートリアル&#&プレスJavaScript Essentials: CodePen.io の力を解き放つ

少し前に JSBin について書いたとき、どのオンライン スニペット エディタが最適であるかについて多くの議論と議論が巻き起こりました。いくつかの代替案、特に CodePen は放棄されました。

非常に多くの読者が情熱を持って特定の選択に熱心に取り組んでいるので、CodePen の優れた点をいくつか紹介する投稿をしたいと思いました。これは比較記事ではないと言いたいのは、私がこの種の記事を書くのが本当に嫌いだからです。これらのツールはそれぞれ独自であり、独自の価値を提供しますが、多くの場合、ユーザーの好みによって決まることがわかりました。

共通点

これらのツールには、ユーザー インターフェイスと機能の点で確かに類似点があります。両方のツールを見ると、マルチペイン UI がかなり一般的であり、非常に直感的であることに十分な理由があることがわかります。

JSBin:

JavaScript 要点:释放 CodePen.io 的力量

コードペン:

JavaScript 要点:释放 CodePen.io 的力量

マルチペインのアプローチにより、サンプル コードのあらゆる側面を非常に簡単に視覚化できるため、マークアップや JavaScript をすばやく更新して、すぐに結果を得ることができます。これらのツールは通常、ラピッド プロトタイピングとコード スニペットのテストに使用されます。

UI の類似性に加えて、どちらのエディタでもユーザーは次のことができます。

  • サードパーティライブラリの参照
  • 将来使用するためにコード スニペットを保存します
  • カスタムリンク経由でクリップを共有する
  • 同じコードで他の開発者と共同作業する
  • コード スニペットを他のページに埋め込む
  • JavaScript リンティング

私の観点からすると、これらはコードボックス ツールの重要な機能であり、ユーザーはよく使用するアセットを使用してフロントエンド コードのプロトタイプを構築できるだけでなく、開発者が使用するほとんどのメディアでそれを共有することもできます。テクニカル ライターとして、ライブ コード スニペットを埋め込む機能は、作成したコードをデモンストレーションするためのリアルタイム フィードバックを提供し、作成中の概念を強化すると同時に、読者に実際のフィードバックとコードを提供するため、非常に重要です。

場合によっては、機能の同等性はコスト、つまり、それらの機能が利用可能かどうかによって決まります。たとえば、CodePen のプロフェッショナル レベルの製品でのみ利用できるコラボレーション機能が必要な場合、JSBin は無料で提供します。誤解のないように言っておきますが(これは以前にも言いましたが)、優れた機能に対して課金するのは全く問題ないと思います。したがって、ユーザーに価値をもたらす限り、その機能が無料であるかサブスクリプションベースであるかは重要ではないと思います。

コードペン

私が使用したすべてのコード クレート ツールの中で、CodePen が最も美しいと断言できます。正直に言って、これは理にかなっています。 CodePen のフロントエンド デザインは、ユーザー インターフェイス デザインに関して素晴らしい目を持っている、非常に才能のある開発者 Chris Coyier によって構築されました。これは、ツールの絶妙な外観と操作性に確かに現れています。

JavaScript 要点:释放 CodePen.io 的力量

私たちは、エディターが乱雑にならず、機能が煩わしくないようにしながら、多くの重要な機能に簡単にアクセスできるようにすることをよく考えました。このタイプの UI ではビューポートのスペースが狭いため、これは重要です。すべてのバランスを取り、複数の言語にわたって優れたコーディング エクスペリエンスを提供しながら、すぐに結果を提供しようとするのは非常に難しく、レイアウトに関していくつかの検討を強いられました。

これは、各スクリプト ペインのヘッダーに適切に配置されたアイコンの使用からも明らかです。

設定 (歯車) に通常の UI アイコンを使用すると、CodePen チームがプロトタイピング エクスペリエンスを向上させるためにかなりの数の重要な補完機能をうまく組み込んでいることがわかります。ユーザー インターフェイスが非侵入的であると私が言っているのは、これが意味するところです。つまり、追加機能を提供する直感的なショートカットです。しかし、単に機能を追加するだけではありません。これらは Web 開発者が毎日使用する実際のツールであり、プロトタイプが機能するかどうかを適切に理解することが重要です。

詳細」ビューのような機能は、安定した編集エクスペリエンスを提供するだけでなく、ユーザーがコード スニペットをより深く理解できるようにする強力なソーシャル アングルの提供にも CodePen が注力していることを示しています。

JavaScript 要点:释放 CodePen.io 的力量

さて、どちらのツールも幅広い補完機能を提供しますが、私の意見では、CodePen は Sass、LESS、Stylus (Compass、Bourbon、Nib などのアドオンを含む) の豊富なサポートを通じて明確な違いを示しています。デザイナーにより良いツールを提供することです。

CodePen は CSS とマークアップをうまく処理しますが、JSBin ほど多くの JavaScript ライブラリをサポートしていません。主要なプレーヤーが多数含まれていないというわけではありませんが、現在多数の新しいライブラリとフレームワークが使用されているため、組み込みサポートには明らかな違いがあります。

コードペン:

JavaScript 要点:释放 CodePen.io 的力量

JSBin:

JavaScript 要点:释放 CodePen.io 的力量

これらのスクリーンショット (およびその一部のみ) から、JavaScript フレームワークのサポート範囲の広さが、数とサポートされているバージョンの両方の点で CodePen のサポートをはるかに上回っていることは明らかです。 CodePen には、外部 JavaScript リソースをコード スニペットに組み込む機能が備わっていますが、ドロップダウン リストをクリックしてさまざまな JS フレームワークから選択できる利便性は非常に便利です。

しかし、私にとって際立った特徴が 1 つあります。それは次のとおりです。

JavaScript 要点:释放 CodePen.io 的力量
###それは正しい。 CodePen には、私のお気に入りのブラウザ テスト ツールの 1 つである BrowserStack.com との統合が含まれています。私は以前このサービスについて書きましたが、そのテストのシンプルさとブラウザのカバー範囲の広さがとても気に入っているので、CodePen がサービスとの統合を提供しているのを見るのは大きなプラスです。しかし、優れているのはボタンだけではありません。その横にあるドロップダウン メニューを使用して、どのブラウザをターゲットにするかを決定できます:

JavaScript 要点:释放 CodePen.io 的力量
...次に、同じ情報を含む BrowserStack に移動します:

JavaScript 要点:释放 CodePen.io 的力量

利便性の点で、これは開発者にとって間違いなく利点です。 [BrowserStack] ボタンをクリックすると、CodePen からリダイレクトされ、CodePen を使用するには BrowserStack アカウントが必要になることに注意することが重要です。

CodePen Proを選択してください

CodePen には、無料バージョンと、より機能が豊富な

Pro バージョンがあります。これには、複数のデバイスにわたるライブ コード プレビュー、他の開発者とのコラボレーション、埋め込みコード ペン テーマ、オンライン トレーニングやコースに最適な直感的な「教師モード」などの機能が含まれます。

利用可能な Pro 機能のうち、私が最も便利だと感じた 2 つは、

ライブ ビューアセット ホスティングです。後者を使用すると、開発者は画像やスクリプト ファイルなどのアセットをアップロードできます。コードペンで直接使用できます。

JavaScript 要点:释放 CodePen.io 的力量

なぜこれが機能するのか疑問に思われるかもしれません?もう 1 つのオプションは、CDN や独自のサーバーなどの外部ホスティング オプションを探すことです。独自のカスタム JavaScript ファイル、画像、またはスタイルシートを直接アップロードできるため、この問題は解決され、コードペンでこれらのリソースをすぐに利用できるようになります。アップロードしたら、アセットをクリックして URL を取得し、コードに挿入するだけです:

JavaScript 要点:释放 CodePen.io 的力量

これだけでも、月額 9 ドルを払ってサービスを利用する価値があり、CodePen 限定のようです。

私が

ライブ ビュー 機能を気に入っている理由は、最近ではさまざまなフォーム ファクター間でのテストが非常に重要になっているためです。これは、テストするデバイスにペンのリンクを送信することによって行われます。これは、モバイル ブラウザの URL バーに直接入力するか、CodePen の共有ダイアログを使用してモバイル デバイスにテキスト メッセージを送信することで実行できます。

JavaScript 要点:释放 CodePen.io 的力量コンピューター上でペンが更新されると、その変更は任意の数のデバイスにほぼ即座に反映されます。

CodePen はよく構築されています

CodePen は素晴らしいツールです。非常に洗練されており、機能が豊富で、マークアップ ツールと CSS ツールの優れたサポートを備えています。私は優れたソフトウェアをサポートすることに抵抗がないので、一部の機能がサブスクリプションベースであるという事実に動揺しません。私が言いたいのは、特にプライベートペンやライブプレビューの作成など、他のサービスがすでにこれらの機能を無料で提供している場合には、サービスの標準部分であるべきと思われる機能がいくつかあるということです。

私の意見では、JSBin と CodePen の両方を使用した後、それらが非常に似た機能を備えていることは明らかであり、どちらのサービスを使用するかを選択するのは最終的には個人の好みになります。 CodePen のプロフェッショナルな UI を好む人もいるでしょうし、JSBin の広範な JavaScript フレームワークのサポートを好む人もいるでしょう。結局のところ、異なるタスクに両方を使用することになるかもしれませんが、CodePen は間違いなく活用する価値のあるサービスであり、私のトレードツールの武器庫に追加するサービスであると言えます。

以上がJavaScript Essentials: CodePen.io の力を解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか?Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか?Apr 25, 2025 am 12:16 AM

wordpressisadvasteousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment、2)柔軟性と吸収性、3)strongCommunitySupport、4)組み込みインセンアンドマークティングツール、5)費用対効果、6)レシュリティアップデート

WordPressがコンテンツ管理システムになっている理由は何ですか?WordPressがコンテンツ管理システムになっている理由は何ですか?Apr 24, 2025 pm 05:25 PM

wordpressisacmsduetoitseaseaseofuse、customization、usermanagement、seo、andcommunitysupport.1)ofssextensiveationization throughthemesandplugins.3)ofsiscontensiveativeizationization withintentmanagement withintententmanagement with inting ustomization.3)revisustusersandpermissions.4)拡張型を提供します

WordPressにコメントボックスを追加する方法WordPressにコメントボックスを追加する方法Apr 20, 2025 pm 12:15 PM

WordPress Webサイトでコメントを有効にして、訪問者にディスカッションに参加し、フィードバックを共有するプラットフォームを提供します。これを行うには、次の手順に従ってください。コメントを有効にします。ダッシュボードで、設定に移動してgt;議論し、[コメントを許可]チェックボックスを選択します。コメントフォームの作成:エディターで、[ブロックの追加]をクリックし、コメントブロックを検索してコンテンツに追加します。カスタムコメントフォーム:タイトル、ラベル、プレースホルダー、ボタンテキストを設定して、コメントブロックをカスタマイズします。変更を保存します:[更新]をクリックしてコメントボックスを保存し、ページまたは記事に追加します。

WordPressからサブサイトをコピーする方法WordPressからサブサイトをコピーする方法Apr 20, 2025 pm 12:12 PM

WordPressサブサイトをコピーする方法は?手順:メインサイトにサブサイトを作成します。メインサイトのサブサイトのクローニング。クローンをターゲットの場所にインポートします。ドメイン名(オプション)を更新します。個別のプラグインとテーマ。

WordPressのヘッダーの書き方WordPressのヘッダーの書き方Apr 20, 2025 pm 12:09 PM

WordPressでカスタムヘッダーを作成する手順は次のとおりです。テーマファイル「header.php」を編集します。あなたのウェブサイトの名前と説明を追加します。ナビゲーションメニューを作成します。検索バーを追加します。変更を保存して、カスタムヘッダーを表示します。

WordPressコメントを表示する方法WordPressコメントを表示する方法Apr 20, 2025 pm 12:06 PM

WordPress Webサイトでコメントを有効にします。1。管理パネルにログインし、「設定」 - 「ディスカッション」に移動し、「コメント許可」を確認します。 2。コメントを表示する場所を選択します。 3.コメントをカスタマイズします。 4.コメントを管理し、承認、拒否、または削除します。 5。use<?php comments_template(); ?>コメントを表示するタグ。 6.ネストされたコメントを有効にします。 7.コメントの形状を調整します。 8。プラグインと検証コードを使用して、スパムコメントを防ぎます。 9.ユーザーにGravatarアバターの使用を奨励します。 10。参照するコメントを作成します

WordPressのソースコードをアップロードする方法WordPressのソースコードをアップロードする方法Apr 20, 2025 pm 12:03 PM

WordPressからFTPプラグインをインストールし、FTP接続を構成し、ファイルマネージャーを使用してソースコードをアップロードできます。手順には、FTPプラグインのインストール、接続の構成、アップロードの場所の参照、ファイルのアップロード、アップロードが成功したことを確認します。

WordPressコードをコピーする方法WordPressコードをコピーする方法Apr 20, 2025 pm 12:00 PM

WordPressコードをコピーする方法は?管理インターフェイスからコピー:WordPress Webサイトにログインし、宛先に移動し、コードを選択し、Ctrl C(Windows)/Command C(MAC)を押してコードをコピーします。ファイルからコピー:SSHまたはFTPを使用してサーバーに接続し、テーマまたはプラグインファイルに移動し、コードを選択し、Ctrl C(Windows)/コマンドC(MAC)を押してコードをコピーします。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター