Home-theater-designers
JavaScript Web開発の開始は苛立たしいプロセスになる可能性がありますが、それを簡単にするツールが世の中にあります。
CodePen.io は、コーディングの学習と、最小限の手間でアイデアのプロトタイプをすばやく作成するために設計されたブラウザ内コーディング環境です。
この記事では、サイトの機能のいくつかと、それらがより優れたプログラマーになるためにどのように役立つかを見ていきます。
CodePenとは何ですか？
CodePenはと呼ばれるものを提供します ペン 、HTML、CSS、JavaScriptの3つの異なるウィンドウと、入力時にリアルタイムで更新されるプレビューペインで構成されます。
Web開発者がWebサイトのアイデアを紹介するために頻繁に使用されますが、フロントエンドWeb開発の基本を学ぶのにも最適な場所です。 CodePenを使用するときに知っておく必要のある最も注目すべき機能は次のとおりです。
1.プリプロセッサ
プリプロセッサは、コーディングを簡素化するように設計されたインタプリタまたはコンパイル言語です。便利な機能を言語に追加し、コードを読みやすくすることができます。 Web開発では、HTML、CSS、およびJavaScriptのプリプロセッサの組み合わせを使用して、クリーンなコードをすばやく作成します。
Web開発を学んでいて、さまざまなプリプロセッサを試したい場合、CodePenを使用すると、プリプロセッサをその場で切り替えて、コンパイルされるコードをリアルタイムで確認できます。 CodePenアプリの3つのペインにはそれぞれ、右上にドロップダウンメニューがあります。選択する コンパイルされたHTML / CSS / JSを表示する コードがどのように解釈されるかを確認します。
このペンでは、を使用して簡単なサイトを作成しました Haml と サス ヘッダーテキストのスタイルを設定します。選択 コンパイル済みを表示 は、標準のHTMLとCSSを示しています。この例では、違いはごくわずかです。ただし、新しい言語を学習しているときに、コンパイル後に前処理されたコードがどのように見えるかを確認すると便利な場合があります。
2.外部リソース
プリプロセッサのネイティブサポートに加えて、CodePenは外部スクリプトをサポートします。これにより、個人的なプロジェクト用のライブラリを実際に体験したり、Reactなどの人気のあるWebアプリライブラリをブラッシュアップしたりするのに最適な場所になります。
外部ライブラリを追加するには、 設定 ペンのペインで、[JavaScript]タブに移動します。リソースを追加するには、リソースURLを手動で追加する方法と、検索する方法の2つがあります。
この機能は、記事のカバーで使用しました mo.jsを使用したWebアニメーション 、バベルの前処理とともに。
ペンを見る MojsMUOの例 イアン（ @Bardoctorus ）CodePenで。
はい、CodePenペンを埋め込むことができます！先に進み、上のプレビューペインをクリックして、Mo.jsチュートリアルの結果を確認してください。
他のペンは、外部ライブラリと同じようにインポートできます。これは、以前に作成したペンから要素を取得して、新しいペンのモジュールのように使用できることを意味します。 CodePenユーザーのAdam's 簡単な投票 ペンはこの良い例です。
3.テンプレート
新しい概念を学習したり、新しいアイデアをテストしたりするときは、よく似たコンポーネントを使用して、同じ手順を読み直します。 CodePenを使用すると、繰り返しをカットできるテンプレートペンを作成して、要点を直接把握できます。
テンプレートを作成するには、新しいペンを開き、変更を加えて、 レンプレート 設定メニューのスライダー。
https://vimeo.com/221428690
最近まで、無料ユーザーは3つのテンプレートしか作成できませんでしたが、今ではすべてのユーザーがアカウントに必要な数のテンプレートを含めることができます。最小限の遅延で新しいアイデアを始めるのに最適です！
4.ファッションコラボレーション
CodePenと協力して教える能力は、その最大の資産かもしれません。プログラマー向けの優れたコラボレーションツールはすでに豊富にありますが、CodePenのアプローチはシンプルで直感的です。
CodePenのプロユーザーは、新しいペンを作成し、それを開いてコラボレーションを行うことができます。 ビューの変更 メニュー。これにより、ペンのリンクが、CodePenProプランに応じてスケーリングする人数に対応する共有可能な招待状に変更されます。
Facebookの写真を連絡先のAndroidと同期する
この例では、友人がCSSをリアルタイムで更新しているときにHTMLを作成し、ラベル付きのカーソルで作業場所を特定しました。
リンクを知っている人は誰でも、プロユーザーであるか、CodePenアカウントを持っているかに関係なく、ブラウザー内チャット機能に参加して使用できます。自動保存がオフになっている場合、ペンの所有者のみが変更を保存できるため、リスクなしでコードを他の人に安全に開くことができます。
このモードの制限のない性質は、ほとんどの人をペンに招待して難しい概念を案内できるため、初心者にとって有益です。また、潜在的な従業員への面接に最適であり、すでに このように専門的に使用された ！
5.教授モード
教授モードでは、1人のProユーザーが自分だけがコードを編集できる部屋をホストできます。ホストのプロプランに応じて、10〜100人のユーザーが視聴およびチャットできます。
教授モードでは、教室での学習と遠隔教育、またはその2つの組み合わせを柔軟に選択できます。教授モードを使用すると、クラスの後ろの人が前の人と同じ経験をすることができ、教師はリアルタイムで更新されるバグ修正を表示できます。
6.プレゼンテーションモード
プレゼンテーションモードは、当然のことながら、コードの提示を念頭に置いて設計されています。アプリは、オーバーヘッドプロジェクターで動作するように設計された簡略化されたビューで表示されます。 CodePenは、低速のインターネット接続や弱いハードウェアで使用できるようにプレゼンテーションモードを最適化しました。
Proモードにはいくつかの便利な機能がありますが、賢明な読者は、CodePenの無料バージョンが正確にこの機能を提供することをすでに理解しているかもしれません。レイアウト、フォントサイズ、テーマは、ほぼすべての設定に合わせてその場ですばやく変更できます。ペンへのリンクを表示すると、ジャンボサイズの短縮URLが表示され、プロジェクトの共有が容易になります。
これらの小さな変更は、プレビューウィンドウを拡大して、見せびらかすものに合わせて調整できることに加えて、プレゼンテーションモードを、教師と同僚にアイデアを提示する開発者の両方に最適なものにします。プレゼンテーションモードは、プログラミングのポジションについて面接していることに気付いた場合に、見た目がすっきりとしていて、コードを簡単に提示する方法でもあります。
7.パターン
インスピレーションの検索は、CodePenのコレクションではるかに簡単になります デザインパターン 。
各カテゴリは、特定のタスクのためにCodePenユーザーによって提供されるサンプルコードのコレクションです。サイトの動的ボタンを作成する方法をお探しですか？アコーデオンメニュー？ほぼすべての例に適合する豊富なカテゴリがあります。
これらのパターンは、インタラクティブボタンがどのように機能するか、および動的ユーザーインターフェイスが機能するさまざまな方法を学ぶための優れた方法でもあります。
8.エメット
エメット 以前はZenCodingとして知られていた、HTMLおよびCSS開発の最大の時間節約と広く見なされています。プラグインは、あなたがたくさん書いていると思うコードのいくつかを取り、それらを単純なショートカットに変換します。
説明するよりも実際の動作を確認する方がよいため、HTMLドキュメントの通常の設定を行います。
これをすべてのHTMLドキュメントに追加すると、2つのアクションに削減されました。 Emmetを使用して、次のように入力します ！ とヒット タブ 鍵。魔法！
EmmetはCodePenの標準としてアクティブであり、JavaScriptで新しい概念を学習しようとしていて、サポートするHTMLとCSSをすばやく作成する必要がある場合に特に役立ちます。
より良い体験のためにCodePenで開発する
CodePenはWeb開発者にとって優れたツールであり、この分野は継続的に成長しています。 JavaScriptは、Web開発の将来のために学ぶのに最適な言語です。
Android用の無料オフライン音楽アプリ
JavaScriptを使い始めたい人のために利用できるいくつかの素晴らしいチュートリアルとコースがあり、CodePenはあなたの新しいスキルをテストするための素晴らしい環境です。
共有 共有 つぶやき Eメール オーディオブックを無料でダウンロードするための8つの最高のウェブサイトオーディオブックは素晴らしい娯楽の源であり、消化がはるかに簡単です。ここにあなたがそれらを無料でダウンロードすることができる8つの最高のウェブサイトがあります。
次を読む 関連トピック- プログラミング
- HTML
- ウェブ開発
- JavaScript
- CSS
Ian Buckleyは、ドイツのベルリンに住むフリーランスのジャーナリスト、ミュージシャン、パフォーマー、ビデオプロデューサーです。マッドサイエンティストになることを期待して、執筆中やステージ上にいないときは、DIYの電子機器やコードをいじっています。
イアン・バックリーのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください