CodePen:HTML、CSS、JavaScriptの構築、テスト、共有、発見

Codepen:フロントエンドコードのビルド、テスト、検出

コンテンツ管理システムの課題のXNUMXつは、スクリプトツールのテストと作成です。 これはほとんどの出版社にとって必須ではありませんが、テクノロジーの出版物として、他の人々を助けるために時々作業スクリプトを共有するのが好きです。 使い方を共有しました パスワードの強度をチェックするJavaScript、どのように 正規表現を使用してメールアドレスの構文を確認する (正規表現)、そして最近これを追加しました オンラインレビューの売上への影響を予測する計算機。 私はサイトに何十ものツールを追加したいと思っていますが、WordPressはこのような公開に正確に役立つわけではありません…それは開発システムではなくコンテンツシステムです。

だから、私の小さなスクリプトを機能させるために、私は使って楽しんでいます コードペン。 CodePenは、HTMLパネル、CSSパネル、JavaScriptパネル、コンソール、および結果のコードの公開を備えた、きちんと整理されたツールです。 各パネルには、要素の上にマウスを置くと情報が表示されるため、何が可能かを理解できます。また、HTML、CSS、JSの色分けにより、編集や書き込みが簡単になります。

CodePenは社会開発環境です。 本質的には、ブラウザーでコードを記述し、ビルド時にその結果を確認することができます。 あらゆるスキルの開発者にとって便利で解放的なオンラインコードエディタであり、特にコーディングを学ぶ人々に力を与えます。 CodePenは主に、HTML、CSS、JavaScriptなどのフロントエンド言語と、それらに変換される前処理構文に焦点を当てています。

CodePenについて

CodePenを使用して、私は必要なすべての作業を行うことができました 電卓を公開する サイトに埋め込んだ。 CodePenでのほとんどの作品は、パブリックでオープンソースです。 それらは、他の人々やコミュニティが、単純な心からコメントを残すこと、自分のニーズに合わせて分岐して変更することまで、相互作用できる生き物です。

CodePen-オンラインレビューの売上への影響を予測するための計算機

CodePenを使用すると、作業中にペインを左、右、または下に配置したい場合、または新しいタブでHTMLを表示したい場合に、ビューを変更できます。 サイドバイサイドビューは、表示可能なペインのサイズを調整できるため、レスポンシブ設定をテストするのに非常に効果的です。

作業中の各スクリプトをペンに整理したり、プロジェクト(マルチファイルエディター)に結合したり、コレクションを作成したりすることもできます。 これは基本的にフロントエンドコードの実用的なポートフォリオサイトであり、他の作成者をフォローしたり、他の公開されているプロジェクトをフォークして変更したり、チャレンジを通じて楽しいことを行う方法を学ぶこともできます。

GitHub Gistとして保存したり、zipファイルでエクスポートしたり、さらには 埋め込みます このような記事のペン:

ペンを見る
オンラインレビューの予測される販売への影響
by Douglas Karr (@douglaskarr)
on コードペン.


ペンエディタの制限の5,000つは、コードの膨大な量です。 エディターは数百行または数千行のコードで問題ないはずなので、この問題に遭遇することは決してないかもしれません。 しかし、10,000〜XNUMX行以上のコードに到達し始めると、エディターが失敗し始めます。 ただし、他の場所でホストされているスタイルシートまたはJavaScriptへの外部参照を追加できます。

サインアップすることをお勧めします。 あなたは彼らの毎週の電子メールを購読し、あなたが新しく公開されたペンを見ることができるようにあなたのRSSフィードにフィードを追加することもできます。 そして、そこで公共のペンを検索または閲覧し始めると、いくつかの素晴らしいプロジェクトが見つかります…ユーザーは非常に才能があります!

続きます Douglas Karr Codepenで

有料版のCodePenProは、コラボレーション、プロセス、アセットホスティング、プライベートビュー、さらには独自のドメインまたはサブドメインで展開されたプロジェクトなど、機能やチームを改善するための多数の追加機能を提供します。 そしてもちろん、CodePenは、チーム全体が作業できるGithub統合を備えた優れたリポジトリを提供します。 私のように簡単なコードをテストしたいだけなら、CodePenは非常に貴重なツールです。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.