フロントエンド開発テスト-html / css / jquery / javascript

Question

候補者がオンラインテストに合格した後、社内で行うフロントエンドの開発者テストを継続的に改良しています。オンラインテストには次のような質問があります。

Forループはどのように開始しますか？
JavaScript配列を記述する正しい方法は何ですか？
IDが「myList」の順序付きリスト内の3番目のリスト項目のcssセレクターを記述します
Var shoppingList = ["milk"、 "dumplings"、 "bread"];の場合-餃子をgroceryItemという名前の変数にどのように返しますか？
FizzBuzz

したがって、私たちは基本をカバーし、彼らの知識への洞察を得ようとします。

しかし、社内では、彼らの問題解決スキルやロジックアプローチなどを実際にテストしたいと思っています。フロントエンドの開発者がそれを行うための良い方法を見つけられなかったと思います。 UIの人にとっては、より簡単です。私たちは彼らにデザインの課題とホワイトボードを与え、彼らがより多くの情報を求めているかどうか、問題への取り組み方などを確認します。

しかし、私たちはこのアプローチをWeb開発者に再現する方法を見つけていません（記録のために、私はチームのWeb開発者の1人です）。

アプローチする方法についての考え？

Evan Plaice · Accepted Answer

切り替えて、インタビュー対象者に過去の経験について話してもらいます...

小麦をもみ殻から分離するのに本当に役立つのは、より深く掘り下げて答えるのに文脈が必要な質問です。過去の経験が最良の背景ですが、理論的な答えでさえ、少なくともある程度の理解は示されています。

プロセス/ツールについて質問：

デザインのトラブルシューティングにどのツールチェーンを使用していますか？

Print（）ステートメントとしてalert（）を使用することはすべて問題ありませんが、デバッグのターンアラウンドは遅く、AJAX呼び出しを行う場合には何の助けにもなりません。多くの経験豊富な開発者がFirebugなどのツールを活用しますGoogle Developer Toolsは、問題の原因となっている可能性のあるものについて、より詳細な分析を表示するためです。

私はしばらくFirebugを使用していませんが、Chrome=に組み込まれている開発者ツールを使用すると、ページを右クリックすることでその要素を調べることができ、時間を大幅に節約できます。ソースの検索に費やしました。コード内の要素にマウスオーバーすると、ページ上の要素が強調表示されます。

ページ読み込みのパフォーマンスをどのように評価および改善しますか？

特にグーグルがランキング指標にページの読み込み時間を追加したため、非常に重要です。ロード時間を分析し、潜在的なボトルネックを特定できることは非常に重要です。単一のハード/ファストルールはありません。約100あり、より経験豊富なデザイナーは多くのことに気づくでしょう。

コードを書きたいのはどのプログラムですか？

経験豊富な開発者はソースの制御を優先するため、拡張プレーンテキストエディター（例：Notepad ++）を使用しますが、環境に配慮した開発者は、より大きな環境（Dreamweaverなど）によって提供される構造とドキュメントに依存する場合があります。

デザインについて質問する

テーブルベース、相対、または絶対ベースのレイアウト構造を使用しますか？

テーブルと言う人はおそらくデザインの時代遅れの知識を持っているでしょう。 RelativeとAbsoluteはどちらもそれ自体が特定の用途に適していますが、両方を混在させるとさらに効果的です。なぜ詳細を述べるのかを明確にできる人は、おそらくより困難な設計決定に対処する多くの経験を持っています。

画像ボタンにロールオーバー効果をどのように実装しますか？

これは非常に低レベルの質問です。「正しい」答えはcss hover属性を使用することですが、設計の知識が弱い人は、JavaScriptでデュアル表示/非表示機能を実装することを好むでしょう。

スプライトとは何ですか。なぜ使用するのですか。

スプライトは最初に実装するのは面倒ですが、ページをロードするために必要なHTTPリクエストの数を大幅に減らすことができます。 HTMLページがどのようにロード/アセンブルされるかについて確かな知識を持っている人は、このトピックについて非常に詳しく説明できるはずです。

APIについて質問する

APIを使用したことがありますか？

HTMLとJavascriptがより強力になるにつれ、クライアントでより多くの作業を実行するためのプッシュが発生します。サーバー側のコストを削減できるので意味があります。なんらかの重要なフロントエンド開発を行った人は、おそらくAPIを使用したことがあるでしょう。それがGoogle Analytics、Twitter、Disqus、または単なるAJAXであるかどうか。フロントエンド開発に欠かせないAPIの活用方法に関する知識を検討します。

クライアント側のAPIを設計したことがありますか？

はい、あちこちに純粋にクライアント側のAPIがあります。 jQuery、Prototype、Underscoreは大きな3つですが、特定の目的に役立つ小さなAPIライブラリやプラグインが数千あります。経験豊富な開発者と話をしている場合、彼らは「ライブラリの検索」を超えて「かゆみを掻き、自分で書く」段階に成長している可能性があります。すでに記述されているものを選択するのには十分な理由があり、独自に記述するのには十分な理由があります。それはすべてコンテキストに依存します。

AJAXを使用したことがある場合、どのような形式の応答であり、どのように処理されましたか？

より高度な領域に入るが、自分のものを知っている誰かが詳しく説明することができます。

A AJAXリクエストが応答しません。どうやって問題を見つけますか？

通常、Javascriptコンソールをチェックして、エラー（通常は500）が返されたかどうかを確認したり、受信したパケットのHTTPヘッダーをチェックしたりします。

JSONP、それは何ですか、なぜそれが役立つのですか？

彼らがクロスサイトスクリプティング保護とは何か、そしてそれを「安全な」方法で回避する方法を理解しているかどうかを確認してください。

クライアント側またはサーバー側の質問

検証、それはフロントエンドまたはバックエンドで行いますか？

ちょっとしたトリックの質問ですが、答えは両方でなければなりません。フィールドが空ではなく、制約に一致していることを確認してください。また、サーバーでさらにサニタイズおよびサニティチェックを行う必要があります。

フロントエンドで実行できないことの例は何ですか？

制限についての理解を深めます。たとえば、メールを送受信するにはSMTP/POP/IMAPサーバーが必要なため、クライアントではメールを送信できません。

REST APIとは何ですか？なぜそれが有用なのですか？

HTMLに関する深い知識を示します。 REST APIはロケットサイエンスのようなものです。多くの人、特にそれらを理解していない人が話します。APIを使用したことがある人なら、簡単な使用例をいくつか提示できるはずです。

私がカバーしなかった、そしておそらく1つの質問に限定されるべきではない1つの重要な点は、DOMをトラバースまたは変更している状況でパフォーマンスを改善する方法の問題です。

私はおそらく一日中続けることができますが、それは良いスタートを切るでしょう。クライアント側だけでカバーする余地はたくさんあります。言うまでもなく、フロントエンドの開発者は、デザイナー、バックエンドの開発者、そしておそらく多数の外部APIと対話するのに十分な知識も必要です。

lwm · Answer

いくつかの例

バグのあるコードを提供し、説明と解決策を求めます。
たとえば、一般的なトラブルシューティングでは、フロントエンドの開発者はネットワークプロトコルについて知り、シナリオを考え出す必要があります。
「エジプトにはラクダが何匹いるのか」などのクレイジーな質問を常に待ち受け、彼らがそれをどのように推論するかを確認します。
同様のコードをいくつか取り、比較を求め、それらの解決策の理由を尋ねる

「問題解決スキル」についての洞察を探している場合は、少し抽象的で、候補者を快適ゾーンから外して、本当に考えさせる必要があります。

幸運を！