ホームページ  >  記事  >  ウェブフロントエンド  >  チームにはツール guide_html/css_WEB-ITnose が必要です

チームにはツール guide_html/css_WEB-ITnose が必要です

WBOY
WBOYオリジナル
2016-06-21 08:52:421216ブラウズ

「一流企業には良い製品を持っているという共通点がある。」という一文を、最近、いくつかの管理ツールや開発ツールについて知りました。突然、一流企業には、管理ツール、開発ツール、運用保守ツールなど、自社に合った一連のツールを備えていることが多いことに気づきました。

「一部のツールを使用できるようにチームをトレーニングすることで、時間と人件費を節約できます。これは、最も成功した時間投資の 1 つです。「ツールの使用には常にある程度の学習コストがかかるかもしれませんが、長い目で見れば、それは良いことです。」

私たちの中には、仕事や生活において自分の考えや知識を整理するために、Evernote、OmniOutliner、MindNode などの興味深いツールを常に使用しようとしている人がいます。急速に成長する IT チームは、迅速な開発の期待に合わせてチームの効率を維持するために、多くのデータ分析、テスト、運用および保守管理ツールを試すことを選択することがよくあります。編集者が 2 日前に Omni シリーズのツールの威力と思慮深さを知ったばかりのように、多くの人は数週間、場合によっては何か月も作業した後で、人的資源と時間を節約できるいくつかの成果物を発見するだけで、その後「知っていればよかった」と言います。さっきの話だよ」 「ため息。

これに基づいて、編集者は Cloud Insight チームの開発経験を組み合わせて、IT チームに適した未完成のツール ガイドをまとめ、全員と共有したいと考えました。

組織ツール

チームメンバー全員が同じ認識を保つ必要があります。

ChatOps

BearyChat、Waterfall IM、Simple Chat はいずれも ChatOps ツールと言えます。ChatOps は、かつては GitHub で生まれた会話主導型の共同開発手法です。操作は 2 層の皮膚で行われるため、あらゆる種類の不透明さと非効率が生じます。 ChatOps は、カスタマイズされたプラグインとスクリプトを通じて、開発ツールを開発者チャット ルームに導入し、チャットに入力されたさまざまなコマンドを実行し、チャット プラットフォームでのチームのコラボレーションと開発を自動化します。

また、チームツールは複雑であるため、日々大量の情報が生成され、その情報がさまざまなサービスに分散しており、重要な情報が無視される可能性があります。そのため、情報を収集し、作業効率を向上させるツールが必要となってきています。

GitHub、GitLab

多くの IT チームは、すべてのコードとコード関連の問題を保存するために GitHub を使用していると思います。もちろん、チームメンバー全員に github.io ブログを作成するように呼びかけ、私たちが行ったように継続的な書き込みを練習することもできます。

GitLab は、Ruby on Rails を使用して開発されたオープン ソース アプリケーションで、Web インターフェイスを通じてパブリック プロジェクトまたはプライベート プロジェクトにアクセスできるセルフホスト型 Git プロジェクト リポジトリを実装します。 Github と同様の機能があり、ソース コードを参照したり、欠陥やコメントを管理したりできます。リポジトリへのチーム アクセスを管理し、コミットされたバージョンの参照を容易にし、ファイル履歴ライブラリを提供します。オープンソースの中国語コード ホスティング プラットフォーム git.oschina.net は、GitLab プロジェクトに基づいて構築されています。

メール

お客様との連絡用のメールと、ネットワークサービスの登録用のメールを別々に使用する必要があります。将来的には、すべての外部通信が ci-team@oneapm.com (チーム全体を含む) にコピーされることを期待しています。グループ内のすべてのコミュニケーションは ChatOps ツールを通じて行われます。

Graphite

私たちは Graphite を使用してドキュメントを作成および編集し、リアルタイムで共同作業します。コンテンツの出力、アクティビティの計画、さらにはランディング ページのデザインであっても、すべてグラファイト上に配置されます。開いて使用し、書き込んだ後は保存するだけでとても軽量です。

Giphy

Giphy - 面白い Gif 倉庫、画像時代、楽しんでください。 (Wang Zhili を Gif にすることも私たちの喜びです)

Jira

Jira を使いこなすには実際にはある程度のトレーニングが必要ですが、Jira を標準的に使用することで、問題の追跡、問題の収集、タスクの割り当て、問題発生までの計画、および作業効果の評価が容易になり、すべてのプロセスがより標準化され、効果がより透明に定量化され始めます。

Confluence

Confluence は、プロフェッショナルなエンタープライズ ナレッジ管理およびコラボレーション ソフトウェア、エンタープライズ レベルの Wiki ソフトウェアです。チームメンバー間のコラボレーションと知識の共有が可能になります。 Graphite がコンビニエンス ストアだとすると、Confluence は必要なものがすべて揃う大型スーパーマーケットのようなものです。

開発ツール

以下は、Web サイト プロジェクトのフロントエンドおよびバックエンド開発に使用するツールです。

Atom

Atom は、基本的な操作とインターフェイスに加えて、そのスケーラビリティに加えて、コーディングに使用するテキスト エディターです。 Atom はモジュール性を重視しており、多くのデフォルト関数もオープンソース モジュールです。vim モードは多くの vim ユーザーを魅了しており、優れた Markdown プレビュー効果も人気です。しかし、エディターにとって最も喜ばしいのは、アクティブ電源モード、つまりコードを書き込むことです。

Gulp

Gulp は、当社が使用するすべての開発ツールをまとめた Web サイト開発用の構築ツールです。

Gulp が必要な理由は何ですか?

Gulp は開発者の作業を楽にします。 SCSS と Handlebars.js を使用して、Gulp で高レベルのマクロと抽象オブジェクトを作成できます。 Gulp のコードはより無駄がなく、よりモジュール化されているため、顧客はニーズに簡単に適応できます。

ビルドツールとは何ですか?

Gulp などのビルド ツールは、ソース ファイルを静的 Web サイトに変換します。簡単に編集可能なソース ファイル (.hbs および .scss 拡張子付き) を最終形式 (.html および .css 拡張子付き) に変換するには、多くの退屈で反復的な操作が必要です。 Gulp では、ソース ファイルに対するすべての変更は、コマンド 1 つで静的 Web サイトに変換されます。

Gulp はどのような機能を示していますか?

  • SCSS を CSS に変換しました。

  • Yaml 形式のデータを含む Handlebars.js。

  • CSS にプレフィックスが自動的に付けられます。すべての CSS がブラウザー間で互換性があることが保証されます。

  • Browsersync: ソース ファイルが変更されるたびにブラウザに自動的にリロードする開発ツール。

  • Imagemin: 画像を圧縮して最適化して表示を改善します。

  • Lint (SCSS、JS): CSS と JavaScript が適切にフォーマットされ、一般的なコーディング スタイル ガイドに従っていることを確認します。

  • 縮小 (HTML、CSS、JS): ページの読み込みを高速化するために、すべてのコードを自動的に縮小します。

SCSS

CSS を学習したことがある人なら、SCSS が変数や条件文を持たない、プログラミング言語というよりもデザイナーのためのツールであることを知っています。 CSS の読み書きを容易にする拡張言語であり、モジュール性と読みやすさを推奨します。

React

React は Facebook の内部プロジェクトとして誕生しました。同社は市場にあるすべての JavaScript MVC フレームワークに満足できなかったため、Instagram Web サイトを構築するために独自のフレームワークを作成することにしました。 。作ってみてこのセットがとても便利だったので、2013年5月にオープンソース化しました。 React の設計思想は非常にユニークであるため、革命的なイノベーションであり、優れたパフォーマンスを備えており、コード ロジックは非常にシンプルです。そのため、将来の Web 開発の主流のツールになるのではないかと考え、注目し、使用する人が増えています。もちろん、私たちも使っています。

データ分析および監視ツール

データ分析および監視のないチームは、多くの場合信頼性が低くなります。

GrowingIO

私は最近、伝説的な張西蒙と彼の GrowingIO (Web サイトおよびモバイル データ分析プラットフォーム) を理解し始めました。ポイントフリー収集を使用して、データ分析結果を迅速に生成し、業務効率を向上させ、マーケティング、製品エクスペリエンス、カスタマーサクセスなどの無駄のない業務のための分析モジュールを提供します。 現在使用中ですが、良い感じです。

AppAdhoc

簡単に言えば、AppAdhoc は、Google の完全なデータドリブンの製品最適化コンセプトを導入し、データを活用して支援します。開発者は製品を決定し、モバイル広告を最適化します。おそらくスタートアップ チームには A/B テストの需要はあまりないかもしれませんが、一定数のユーザーを抱えるチームにとって、A/B テストとグレースケール パブリッシングは成長にとって非常に重要です。

Cloud Insight

複数のオペレーティング システム、クラウド ホスト、データベース、Windows を含むミドルウェアの監視をサポートするソリューション。Zabbix を Lniux と比較すると、Cloud Insight がそれにあたります。初期の Mac OX は若い製品ですが、監視できるプラットフォームは基本的にほとんどの企業の運用と保守のニーズを満たしており、必要に応じてビジネス データやパフォーマンスをインポートすることもできます。データやその他のさまざまなデータを Cloud Insight に取り込み、一元的に表示します。

インストールとデプロイが非常に便利で、包括的な機能を備えており、使いやすいので、運用とメンテナンスの人員と時間のコストを節約する必要がある小規模なチームに特に適しています。それは私たち自身です。 (笑)

デザインツール

決まり文句。

Illustrator

Adobe Illustrator CC は、グラフィック処理のための主要なツールです。 Sketch は要素の表示には優れていますが、ベクター ソフトウェアは Adob​​e ほど強力ではありません。 Illustrator は主にロゴのデザインとプレゼンテーションに使用され、通常は後続の処理のために他のツールにインポートされます。

Photoshop

リアルなモデルの作成には主に Adob​​e Photoshop CC を使用します。例えば、Sketchで設計したユーザーインターフェースのスクリーンショットを撮ってモニターに表示すると、顧客は最終的な製品をイメージしやすくなります。画像の編集にも Photoshop を使用しますが、ユーザー インターフェイスのデザインに Photoshop を使用することはありません。 Illustrator などのソフトウェアはベクター画像の編集に適していますが、Photoshop は PNG、JPG、GIF などの形式のラスター画像の編集に適しています。

InDesign

Adobe InDesign CC は、ベクター画像とラスター画像を効果的に処理できる、Illustrator と Photoshop の中間のソフトウェアです。新聞や電子書籍などの出版物のコンテンツを表示するために使用されます。私たちは主に InDesign を使用して、ブランドを紹介したりアイデアを提示したりするためのスライドショーを作成します。

まとめ

優れたチームは、正確で効率的な工場のようなもので、全員が適切な位置で役割を果たすことができるだけでなく、面倒な繰り返しを排除するための完全な自動化された組立ラインを備えています。労働力により、従業員は退屈な作業から解放され、より創造的なことができるようになります。

Cloud Insight は、監視、管理、コンピューティング、コラボレーション、視覚化を統合し、すべての IT 企業がシステム監視への人員と時間コストの投資を削減し、運用と保守作業をより効率的かつシンプルにするのに役立ちます。さらに技術的な記事を読むには、OneAPM 公式技術ブログにアクセスしてください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。