スムーズなWeb開発のための15の便利なツール

私たちはステレオタイプに固執する人ではありませんが、（ステレオ）典型的なWeb開発者が彼のあごひげを剃ったり、着替えたり、入浴したり、あごひげを剃ったりしてからしばらく経ちました…

あなたは本当に彼らを責めることはできません。 すべての開発者が一息ついてからしばらく経ちました。 2015年は、Web開発技術が飛躍的に進歩した良い年でしたが、開発者が自分のラップトップ/ MAC（上司のように）とプラットフォームのコードを自由に作成することはできません。

今度は、マルチプラットフォームをサポートするレスポンシブデザイン、HTML5、PHP7が今年のリリースに向けて設定され、IEのようなブラウザがすべてのバグを止めないようにする必要があります。モノのインターネット自体のマトリックスのようなレベル。

開発者が追いつくためにできることはそれだけです。 しかし、主にこれらの気の利いたツールのために、私たちはそうします。

見てください。

1.コモドエディット

すべては開発者向けのコードから生まれているので、見つけることができる最高の編集ツールから始めるのは自然なことです。 Komodo Editは、それ以上のことを行うのに非常に優れています。 これは、コードを記述および編集するための優れたクロスプラットフォームの多言語テキストエディターです。ああ、それは無料です。

このツールはWindows、Mac、Linux / UNIXで動作するため、問題はありません。 また、HTML、CSS、JavaScript、Java、PHP、Ruby、Perl（世界の5人程度の人々向け）などの言語の自動コード補完機能も気に入っています。これは、スマートなテキストエディターの1つです。

ファイルを整理および追跡するためのプロジェクトマネージャー機能の利便性を高めるためのボーナスポイント。

2. CSS3.0メーカー

正直に言うと、CSS3について好きなことはすべてありますが、丸みを帯びたダムエッジなどの構文を書くことになると、少し嫌いになります。 眠りを失うのはとても些細なことですが、とにかくそうします。 100を超える新しいプロパティとそれぞれのプレフィックスを記憶することはできません。 ですから、CSS 3.0Makerのようなツールを主に感謝します。

このすてきな小さなオンラインツールを使用すると、トリッキーなコードをコピーしてスタイルシートに貼り付けることができます。 ボックスの半径、グラデーション、テキストとボックスの影、変換、トランジション、選択した回転などのスタイルの詳細のコードを生成します。 また、これらのスタイルプロパティをサポートしているデスクトップブラウザとモバイルブラウザも表示されます。 小さなプレビュー領域に効果が表示されます。コードはビューボックスからコピーするか、HTMLファイル内にダウンロードできます。

一見平凡なスタイルの詳細にあまりにも多くの時間を費やすことができない私たちにとって、このツールは命の恩人です。

3. –プレフィックスなし

「CSSプレフィックス地獄から解放されます！」 –プレフィックスなしの紹介ページ。

これは、GithubのLeaVerouという名前の天使によって「プレフィックス地獄」から私たちを届けるためにもたらされた実用的なツールです。 <link>または<style>要素のスタイルシートにベンダープレフィックス（見えない場所）を追加します。 また、新しい<link>または<style>要素、jQueryの.css()プレフィックス、または行った変更について心配する必要はありません。 'すべてをカバーするからです。

嫌いなものは何ですか？

4.ブロックフォント

「LoremIpsum」は、非常に長い間、頼りになるプレースホルダーテキストです。 幸いなことに、Blokk：理解できないラテン語の「痛み」を悲鳴を上げるためのフォントができました。

Blokkは、モックアップとワイヤーフレームを作成するときにプレースホルダーとして使用されるブロック「テキスト」を提供します。 言うまでもなく、プレゼンテーション中にWebの知識が少ないクライアントを混乱させることはありません。

5.フォンテッロ

アイコンフォントが登場する前は、開発者はスケーラブルなアイコンを作成するためにデザイナーの助けを借りなければなりませんでした。 それらを開発するのにかかった時間（ちなみに、作成、抽出、実装、およびカスタマイズが含まれます）は、「絶対にばかげている」に隣接していました。 しかし、その後誰かがアイコンをフォントに変え、誰もが幸せに暮らしました…近い将来に。

Fontelloは素晴らしいアイコンフォントジェネレータです。 何千ものアイコンから選択して、マッピングをカスタマイズしたり、名前を編集したり、単一のフォントファイルにコンパイルしたりできます。 それは素晴らしいです、そしてそれは無料です。

ヴィタリー・プズリンには十分に感謝することはできません。

6.タイプテスター

ブラウザのJavaScriptをオンにして、選択した書体が実際のサイトでどのように表示されるかをテストし始めます。

Typetesterは複雑ではありません。 さまざまなフォントを入力して比較し、それらの外観をテストできます。 サイズ、トラッキング、色などを、必要なものが得られるまで試すこともできます。 一度に最大36の異なる書体を比較できます。 それで節約できる時間を想像してみてください。

超カッコイイ。

7.ダーティマークアップ

コーディングは時々少し疲れることがありますが、コードクリーニングはレベル：UtterTediumに存在します。 ただし、エラーを防ぎ、ロードを高速化する場合は必要です。

ダーティマークアップは、他の方法でより興味深いアクティビティ（ベーコンサンドイッチ、誰か？）を追求するために費やすことができる時間を節約するのに役立ちます。 これには、他の単一構文のクリーニングツールの機能が組み合わされています。 HTML Tidy、CSS Tidy、JS Beautify、およびAceEditorについて話しています。 それは1つの包括的なクリーナーです。

これは、HTML、CSS、およびJavaScriptをクリーニングおよびフォーマットするためのWebベースのアプリです。 これ以上は求められないでしょう。

8. BugHerd

あなたはこの強力なツールでバグを殺す警戒者になるかもしれません。

BugHerdは、「短くシンプルに、愚か」という古くからの格言に従います。 クライアントのフィードバックをキャプチャし、それ自体で小さな問題を解決し、バグを追跡することができます（あなたが駆除するために）。 また、秘書を演じ、プロジェクトを管理します。

サイトの非常に簡単なポイントアンドクリックUIにより、ユーザーは問題を報告できます。 BugHerdは、それらを必要なすべての情報（ユーザーのブラウザーバージョンなど）を含むレポートに変換します。 セットアップが簡単で、使いやすく、自動スクリーンショット（ブラウザー拡張機能）、直接リンク、添付ファイル、完全なセレクターデータ、ディスカッションなどの機能があります。

月額29ドルの標準サブスクリプションでは、それが問題になります。

9.スクリーンフライ

レスポンシブウェブデザインは、ここにとどまるという点で、単なる流行ではありません。 しかし今のところ、流動的なレイアウトはせいぜいトリッキーです。 また、さまざまな画面サイズでレイアウトをテストしようとすると、激しい怒りに駆られてしまいます。

幸い、Screenflyは、@ mediaクエリをテストする素敵な小さなWebアプリです。 URLをプラグインすると、クリックしたデバイスのディメンションがクエリでどのように処理されるかがトップパネルに表示されます。

ブラウザ間のレンダリングの違いは考慮されていませんが、ブラウザショットを使用できます。 それ以外の場合は、サイトがさまざまな解像度でどのように表示されるかを確認するための、シンプルで美しく組み立てられた方法です。

10.財団

私たちはRWDについて話しているので、それを開発するためのフレームワークについて話し始めたほうがよいでしょう。

インターネットの議論は、ブートストラップとファンデーションのどちらのフロントエンドフレームワークが優れているかについて激怒しています。 どちらか一方を使用できます。 しかし、グリッドシステム、設計用の比例単位（Bootstrap 4.0 Alphaはemおよびrem単位に移動しましたが）、右から左へのサポート、価格表、ツアー、およびキャンバス外ナビゲーションに関しては、Foundationが少し前面に出ています。 。

私たちが財団を好むことは明らかです。 SASSおよびCSSで動作し、すべての機能が満載で、一般的にはより便利で柔軟性があります。

私たちはこれについてZurbに同意します：それは「クレイジーファスト」です。

11. Adob​​eEdge

コードよりもデザインを優先するソフトウェアの10年後、アドビはついにコーダーにエッジを与えました。

この率直に言って驚くべき一連のツールとサービスは、新しいフロントエンドコーディングのトレンドを念頭に置いて作られています。 彼らは私たちにかなりの御馳走を持っています。 Edge Animateは、コーダーがアニメーションを作成すると同時に、Flashのすべての痕跡を根絶するのに役立ちます。 申し訳ありませんが、Adobe、Flashは素晴らしかったです。 しかし、Animateは標準のHTMLとJavaScriptを使用しており、万能です…

HTMLドキュメント内からCSSを編集するためのエッジコードがあります。 Inspectは、レスポンシブデザインのためにブラウザーテストとデバイス互換性テストを統合し、それらすべてを同期して超高速の更新/カスタマイズを実現します。 非常に人気のあるTypekitは、現在Edgeファミリーの一部です。 リフローはまだリリースされていませんが、おそらく他のフロントエンドCSSグリッドメーカーを水から吹き飛ばすでしょう。 そして、まだまだあります。

私たちは知っています。 あごも床から外さなければなりませんでした。

12.放浪者

Vagrantは、仮想開発ソフトウェア以上のものです。

この美しさにより、ポータブルで再現性の高い作業環境を作成できます。 仮想化ソフトウェア、サーバーベースボックス、および構成ツールを1つの強力なパッケージに統合します。 基本的に、VirtualBox + Ubuntu + Chefはもう必要ありません。 Vagrantは、3つすべての仕事をし、それをしている間、より少ないスペースを取ります。 パワーユーザーは、マルチVMネットワークを簡単にセットアップする方法についても説明します。

Rubyで書かれていますが、PHP、Java、JavaScript、Python、C＃で動作します。 Vagrantは、Windows、Mac OSX、Linux、およびFreeBSDで使用できます。

Uフレンドリーなものがないため、超高速です。見た目は良いですが、必要なスペースを占有します。 開発者向けのテスト環境としてうまく機能します。

それは私たちが得ることができる限り聖杯に近いです。

13. PageSpeed Insights

GoogleのPageSpeedInsightsは、まさにその通りのことをします。 これにより、ページのフロントエンドのパフォーマンスに関する洞察が得られます。 これは、多くの強力な開発者にとって目を見張るものになるでしょう。 だから、禿げた祭りをして、引っ張られる予定のすべての髪から加速禿げ始めます。

リクエストとオーバーザフォールドコンテンツのレンダリング、リクエストとフルページのレンダリングの間の経過時間を測定するだけです。

ネットワークに依存しない側面をチェックして、ページのパフォーマンスを計算します：サーバー構成、HTML構造、JavaScript、CSS、および画像。

それは非常に鋭く、容赦なく速いです。 ですから、それは間違いなくあなたの気持ちを傷つけ、あなたが低いスコアを出すとあなたを泣かせるでしょう。 それはまた、見下すような親のように、あなたにあなたのパフォーマンスを改善するためのとがった提案を与えることによってそれを補おうとします。

そして、私たちはそれが大好きです。

14.Git

最近のほとんどの開発者はすでにそれをよく知っています。 結局のところ、GitHubのようなコミュニティの存在を説明する方法です。

Gitは、リポジトリ内のプロジェクト履歴を追跡するオープンソースのリビジョン管理およびソースコード管理システムです。 基本的には超高速で超効率的なPAです。

それはあなたがいつもすべてを台無しにすることを恐れることなく自由に実験することを可能にします。 複数のリポジトリを作成し、分岐/マージを使用して個々の機能を操作することもできます。 これは、共同作業に特に役立つツールです。

完全に配布されているため、オフラインのときに（設計上または偶然に）ネットの悪夢を恐れる必要はありません。 メインリポジトリに更新を追加するだけで、オンラインに戻るのを辛抱強く待っています。

15.W3Cマークアップ検証

これが通過儀礼の最後です。

W3C Markup Validationは非常に簡単で、必要です。 W3Cが言うように、検証は次のことができます。デバッグ、サイトの将来性の保証（ブラウザーは、W3C標準に基づいて構築されています）、および保守の支援。

また、自分のやり方の「エラー」を示すことで、標準に準拠する方法も教えてくれます。

マークアップ検証は、実際にはそうではないので、抑圧的であると考えるべきではありません。 それはあなたがより良いコードを書く方法を学ぶのを助けるでしょう…

プロのように。

結論

もちろん、開発を容易にするツール、プラグイン、アドオン、リソース、コミュニティは他にもありますが、それほど簡単ではありませんが、苦痛は少なくなります。 そして現在、さらに多くの開発が行われています。 Firefox用のFirebugアドオンがあり、HTML、CSS、およびJavaScriptをライブで監視および編集できます。 PixelDroprはPhotoshopのアドオンで、最小限の手間でサイトの愛らしいボタンやアイコンを作成できます。

すべてのプロの開発者は、最終的に、より速く、より効率的に動作するために依存するアプリとソフトウェアの独自の「ツールキット」を手に入れます。 無料のものもあれば、有料のものもあります。

しかし、それでは、誰が利便性に価格を付けることができますか？