【dev.to】DEVチャレンジをはじめるよ！

dev.toが先日DEVチャレンジという企画を始めました。
様々なお題を出して、参加者の中から優秀者を選んで豪華賞品をゲットしようという企画です。

Qiitaにおける記事投稿キャンペーンみたいなものであり、今後も定期的にチャレンジを開催していくとのことです。

なお豪華賞品は、他では手に入らない限定バッジです。
Qiitaもいいかげんバッジを公開できるようにしたりプロフィールにくっつけたりできるようにするべきでは。

さて、その初回チャレンジの結果が発表されたので、軽く紹介してみます。

Introducing DEV Challenges

我々はこのたびDEV Challengesを始めました。
あなたはコミュニティに参加し、特別のバッジを手に入れることができます。

最初のチャレンジはフロントエンドチャレンジです。
詳細は2024/03/20に発表されます。
見逃さないように、ぜひ#devchallengeをフォローしてください。

What are DEV Challenges?

DEVチャレンジはミニハッカソンのようなものですが、もっと柔軟に参加できるようにしています。
フロントエンドチャレンジ、AIチャレンジなど様々な領域のチャレンジが提供され、新しいツールで経験を積んだり、コミュニティや明日の雇用主に対するスキル公開の場にもなります。

ひとつのチャレンジは約2週間実施されます。

What does it mean to enter a challenge?

参加方法は、新しい記事を作成し、特定のタグをつけて投稿するだけです。

What about prizes?

賞品はチャレンジごとに異なり、詳細はチャレンジごとに説明します。
チャレンジ固有のバッジは常に含まれます。

バッジはあなたのプロフィールをより豊かにしてくれます。
我々はチャレンジをただ楽しむためにも提供しますが、さらに参加して勝利することでスキルを証明できる機会でもあります。
Devへの参加をより促進できる組織との提携も考えています。

バッジ以外に、ショップのクーポンやパートナーによる賞品も提供されることがあります。

Partners, you say?

パートナーっていった？

チャレンジは必ずしもパートナー主導型ではありません。
パートナーが全く存在しないチャレンジもあれば、強力なパートナーシップがつくチャレンジもあります。

Rules and FAQ

チャレンジのルールは、各チャレンジごとにできるかぎり明確に記載します。
全てのチャレンジに共通のルールもあれば、チャレンジ固有のものもあります。

For the future: Self-paced challenges

自分のペースでチャレンジする機会も提供します。
すなわち、タイムラインに従って記事を提出して賞を競うだけではなく、後日好きなタイミングでもチャレンジできるようにします。

Last Thing

チャレンジは、DEVコミュニティをさらに活気のあるエコシステムにするための新しい挑戦のひとつです。
この取り組みを通じて、参加者の皆さんと新しい何かが生まれることを願っています。

Join Our First Community Challenge: The Frontend Challenge

初めてのDevチャレンジ、フロントエンドチャレンジがはじまります！！

3月31日まで開催されるこのチャレンジで、あなたの創造性を披露し、バッジをゲットし、そして大いに楽しみましょう。

最初のチャレンジには3つのプロンプトがあります。
ひとつだけでもいいし、3つすべて参加することもできます。
ひとつのプロンプトに複数回参加することもできます。

The Prompts

CSS Art Challenge 🎨

提出物はJavaScriptを使用してはなりません。
CSSで創造性を発揮しましょう。
提出物にはマークアップとSVGも含まれますが、主にCSSのスキルを披露する場です。

Glam Up My Markup 💅

CSSとJSを使って、以下のHTMLを美しくインタラクティブで便利にしましょう。

最初のHTMLよりも使いやすくアクセスしやすく仕上げましょう。
HTML自体の直接編集しないでください。

<section id="camp-activities-inquiry">
    <h1>Camp Activities Inquiry</h1>
    <form action="/submit-form" method="POST">
        <label for="activity-select">Which camp activities are you most looking forward to?</label>
        <select id="activity-select" name="activity">
            <option value="">--Please choose an option--</option>
            <option value="hiking">Hiking</option>
            <option value="canoeing">Canoeing</option>
            <option value="fishing">Fishing</option>
            <option value="crafts">Crafts</option>
            <option value="archery">Archery</option>
        </select>

        <label for="food-allergies">Food Allergies (if any)</label>
        <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>

        <label for="additional-info">Additional things the counselor should know</label>
        <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>

        <button type="submit">Submit</button>
    </form>
</section>

One Byte Explainer ✍️

ブラウザのAPI、もしくは機能を256文字以内で説明してください。

"fetch"・"DOM"・"Geolocation"など何かを選択し、それが何をするものなのか、どのように機能するのか、誰がそれを使うのか、等を簡潔に説明します。
256文字(ツイートより短い)以内にシンプルに抑えることが課題です。

Congrats to our Frontend Challenge Winners!

フロントエンドチャレンジ受賞者のみなさん、おめでとうございます！

我々はチャレンジの結果に驚きました。
たくさんの応募があり、そのいずれもが優勝しておかしくない品質でした。

もちろん勝者は一人だけです。
参加者の中には将来の勝者がたくさんいたので、皆さんが次のチャレンジにも参加してくれることを願っています。

Congratulations To…

CSSカテゴリの優勝者は@floscodeです。
インタラクティブで美味しいバナナでカテゴリの王者になりました。

See the Pen 🍌 are the superior fruit by Florian (@flos-code) on CodePen.

The Frontend Challenge: 🍌 bananas are the superior fruit

マークアップ部門受賞は@rafajrg21です。
彼は、キャンプを本来あるべきインタラクティブな姿にしてくれました。

See the Pen The Frontend Challenge - Glam Up My Markup by Dev.to by Rafael Romero (@Rafa-romero-dev) on CodePen.

どんなウィンドウサイズでもアクセスしやすいデザインが評価されました。

The Frontend Challenge: Glammed Up Camp Activities

ワンバイトチャレンジ優勝は、Intersection Observer APIを有益かつ簡潔に説明してくれた@highflyer910です。

Intersection Observer APIは、高負荷なイベントハンドラを使うことなく要素が画面上に表示されるタイミングを追跡します。
従来のイベントハンドラより効率的でありながら実装も簡単です。
試してみよう！

このAPIの概要と、このAPIが何を置き替えるのかについて、限られた文字数でうまく表現しています。

https://dev.to/highflyer910/intersection-observer-api-one-byte-explainer-3f5i

彼ら勝者には、自慢する権利に加え、プロフィールに飾れる限定バッジと、ショップにあるDEV Challengesコレクションをゲットする権利が与えられます。
また、参加者全員に参加バッジが贈られます。

What’s next?

近々また別のフロントエンドチャレンジを開催する予定です。
見逃さないように、チャレンジタグをぜひフォローしてください。

・DEV's Frontend Challenge
・DEV Challenges

楽しんで、やりがいを感じて、プロフィールになにかひとつふたつ付け加えることができるなら幸いです。

それではまた次回！

コメント欄

「受賞者の3名おめでとう！」「おめでとう！」「ありがとう！とても楽しかった。」
「バナナの受賞ありがとう。他のクリエイティブなCSSを見ていると、自分はまだまだ古臭い側だったかもしれない😅」
「バナナかわいい🥺」
「バナナのCSSを見るたびに心が満たされるんだ🍌」
「バナナたべたい」
「楽しかった！次回を待ってる！」
「次の参加者がどんなものを見せてくれるか楽しみにしています。」
「CSSのみって書いてあるのにJSが使われてるぞどうなってんだ。」

バナナがたいへんに高評価だった。