バックエンド

スピードの必要性：ApeeScapeJavaScriptコーディングチャレンジの回顧展

ApeeScapeがJavaScriptコーディングの課題を開始しましたウェブアプリ私たちの会議ブースに人々を引き付ける方法として。それがどれほど成功したかを見て、私たちはWeb上でパイロットを作成し、コミュニティとそのネットワークのすべての人に公開することにしました。

ApeeScapeのスクリーンショット

立ち上げ時に、私たちは意欲的な開発者に、JavaScriptコーディングの全体的な課題で高得点を獲得するための創造的な方法を考え出すように促しました。偉大な独立したフリーランサーの重要な成功要因のいくつかは、枠の外で考え、一連の制約の中で働くための創造的な方法を見つける能力です。

JavaScriptコーディングの課題に関する質問

ガントレットは、 JavaScript 質問-として使用される可能性のある質問に類似面接の質問 —本当に基本的なJavaScriptチャレンジの質問から：

知覚のゲシュタルト原則は何ですか

box.double = function double (x) { //return x doubled };

…より中間的なものへ：

box.dateRank = function dateRank (x) { // x is a date in 2019 as string (example: '06/30/2019') // return the rank of the day in 2019 (i.e., '09/01/2019' translates to 244) };

私たちは、初心者と上級開発者の両方に楽しんでもらい、友人や同僚を招待して最高のスコアを競うことを望んでいました。質問はポイントでソートされているため、ジュニア開発者でもポイントを獲得できます。同じポイント数の質問の順序はランダムであったため、経験は毎回わずかに異なりましたが、質問の完全なセットは1週間を通して同じままでした。

目標は、3分の制限時間内にできるだけ多くのタスクを完了することでした。誰かがJavaScriptコーディングチャレンジのすべてのタスクを完了する方法を見つけた場合、残りの1秒ごとに10ポイントが付与されます。チャレンジを完了するために複数回の試行を許可しました。

ギリシャの債務危機を簡単に説明

私たちが最初に予想したことは、人々が質問を解決するゆったりとしたペースで、回答をコピーしてWebアプリケーションに貼り付けます。

チャレンジを開始してから1時間40分後、最初の人はこのアプローチに従い、アプリケーションで許可されている最大1445ポイントに加えて、残り1秒ごとに獲得した追加ポイントを獲得しました。

JavaScriptコーディングチャレンジのターニングポイント

コピーアンドペーストのアプローチでは、トップの出場者は、答えを自分でコーディングすることに集中することから得るものは何もありませんでした。代わりに、彼らは自動化スキルにスピードをもたらすことに注意を向けました。

この時点での最も簡単なアプローチは、ボタンの準備ができるまでループを待っている間に各タスクを解決するJavaScriptを作成し、それをコピーしてブラウザコンソールに貼り付けることでした。

const solutions = { 'double': 'return x*2', 'numberToString': '...', 'square': '...', 'floatToInt': '...', 'isEven': '...', 'squareroot': '...', 'removeFirstFive': '...', // ... 'dateRank': '...', // ... }; const get_submit_button = () => document.querySelector('.task-buttons > .col > .btn'); const solve = () => { const ace_editor = ace.edit(document.querySelector('.ace_editor')) const submission = ace_editor.getValue() for (const key in solutions) { if (submission.includes('box.' + key + ' ')) { ace_editor.insert(solutions[key]) get_submit_button().click() setTimeout(() => { get_submit_button().click() setTimeout(() => { solve() }, 400) }, 900) return } } } solve()

この部分は、次のような通常の自動化ツールを使用して自動化することもできます。セレン。ただし、より高速な方法は、APIの使用を自動化し、ソリューションをタスクに送信することです。

const request = require('request'); const runTask = (data, entryId, callback) => { const tests = data.nextTask.tests_json; const results = Object.fromEntries( Object.entries(tests).map(([key, value]) => [key, value.result]) ); request.post(`https://speedcoding.toptal.com/webappApi/entry/${entryId}/attemptTask`, { form: { attempt_id: data.attemptId, tests_json: JSON.stringify(results), }, }, (error, res, body) => { if (error) throw error; const next = JSON.parse(body).data if (next.isChallengeEntryFinished) { callback(next) return } runTask(next, entryId, callback) }); } const runEntry = (callback) => { request.post('https://speedcoding.toptal.com/webappApi/entry', { form: { challengeSlug: 'toptal-speedcoding', email: ..., leaderboardName: ..., isConfirmedToBeContacted: ..., dateStop: ... }, }, (error, res, body) => { if (error) throw error; const { data } = JSON.parse(body); const entryId = data.entry.id runTask(data, entryId, callback) }); } runEntry(console.log)

注意すべき点の1つは、このバージョンのスピードコーディングチャレンジでは、コードはクライアント側でのみテストされたことです。このため、コードの代わりにテストケースへの回答を送信することが可能でした。これにより、最適化が可能になり、クライアント側で数ミリ秒を短縮できました。

3日後、競争は本当に激しさを増し始め、3時間のバケットあたりの試行回数は1,000未満から100,000近くに急増しました。

3日間、スコアは同じままでした。コードのマイクロ最適化を作成している人もいれば、サーバーの混雑が緩和されて数ポイント先に進むことを期待して、ソリューションをループで送信している人もいます。私たちは大きな驚きの予定でした。

JavaScriptコーディングチャレンジの最大スコアを破る

まず、簡単な計算をしてみましょう。すべてのタスクの完了に対して合計1445ポイントが付与され、180秒の時間枠が与えられました。アプリケーションに残っている1秒あたり10ポイントを付与した場合、すべての回答を即座に送信した場合、理論的に達成可能な最大スコアは3245になります。

ユーザーの1人が6000を超えるスコアを達成し、それは時間とともに着実に成長し続けました。

Webおよびモバイルアプリケーションの開発

どうしてこんなに高いスコアを獲得できるのでしょうか？

簡単なレビューの後、何が起こっているのかがわかりました。私たちのトップの出場者であるプロのフルスタック開発者であり、15年以上の競技プログラミングの経験を持つApeeScapeerは、コーディングの課題の設定に抜け穴を見つけました。彼は複数のボットを生成し、サーバーの速度を低下させました。その間、彼は同じタスク（最も多くのポイントを獲得したタスク）をできるだけ多く完了し、それらのスコアを1つのエントリに割り当てて、そのエントリのスコアに継続的に追加することができました。

創造的な解決策を認めたので、これは規則に違反していませんでした。ただし、彼が使用していた特定の方法により、サーバーがかなりビジーになり、他のすべてのユーザーのネットワーク要求が遅くなりました。私たちが最初にしたことは、サーバーの電力を増やすことでした。これにより、彼は56,000ポイントから70,000ポイントになり、最初の場所に留まりました。

人々がチャレンジを操作する方法に介入したくありませんでしたが、これらの試みはサーバーの速度を低下させ、他のユーザーがチャレンジを使用するのが困難になったため、抜け穴を修正することにしました。

この修正により、JavaScriptコーディングチャレンジの最終日に他の人が同じスコアを達成することができなくなりました。このため、上位の出場者に与える賞の数を増やすことにしました。もともと、最優秀賞（AirPodsのペア）は、1人の最優秀出場者だけに贈られることになっていた。結局、AirPodsは最初の6つの場所を保持している人々に与えられました。

謙虚な始まりと凶暴な終わり：いくつかのJavaScriptコーディングチャレンジ統計

私たちの最高得点者でさえ、始めるのにいくらかの困難がありました。実際、5回以上試行したすべての人の中で、最初の試行の最高スコアは645であり、そのグループの最初の試行の中央値はわずか25ポイントでした。

ヘッダーファイルの使用c ++

コンテストの終わりまでに、試行の総数から試行されている戦略を推測することができます。いくつかは他よりも効率的でしたが、遠く離れたトップの競技者は最も高い試行回数を持っていました。

上位20人の出場者を示す結合された対数棒グラフ

前進する

将来はどうなるのでしょうか？

C ++は簡単に習得できます

これは、JSコーディングチャレンジの最初の反復でした。将来的には、JavaScriptプログラミングの課題をさらに増やしたいと考えています。レッスン以前の実行から、そしてそれをさらにエキサイティングにします。最初に実行したいのは、送信の数を制限するための試行スロットリングを実装することです。また、JavaScriptでのコーディングの課題を超えて、さまざまなプログラミング言語で利用できるようにしたいと考えています。

最後に、JavaScriptコーディングの課題をより安全にするための対策を講じている間、ボットやその他の創造的なアプローチを今後の課題に使用できるようにする予定です。

感謝しますパベル・ヴィドラ、アントン・アンドリエフスキー、ティアゴ・チランティ、そしてマテイコポットチャレンジとこの記事への貢献、そして@Zirakへの貢献に対してオープンソースプロジェクトそれがコンテストアプリの基礎を形成しました。同様に、コンテストに参加し、実行したすべての人に感謝します。

基本を理解する

コーディングの課題をどのように練習しますか？

コーディングの課題を解決する専門家になるには、ますます困難になる問題を選択して常に改善する必要があります。 ApeeScapeのJavaScriptチャレンジには、さまざまなタスクの難易度レベルが含まれています。面倒に見える問題をスキップしないでください。改善する唯一の方法は、これらの解決にも集中することです。