CSSBattleの紹介—最初のCSSコードゴルフゲーム

Web開発を学んでいる場合、またはすでにプロのWeb開発者である場合は、人生で少なくとも一度はCSSを書いている可能性が非常に高いです。 Webページの非常に基本的な構成要素です。 CSSに対するすべての議論と愛と憎しみの中で、私たちはみなに提示します— CSSBattle

CSSBattleは、私と私の友人であるKushagra Agarwalが作成した、CSS愛好家向けの初めてのコードゴルフプラットフォームです。このゲームの目的は単純です。可能な限り小さいCSS(および必要に応じてわずかなHTML)コードで複製する必要があるイメージターゲットがあります。視覚的に一致し、バイト数が少ないほど、スコアが高くなります。そして、それがCSSBattleのリーダーボードを登る方法です。ターゲット画面の例を次に示します。

ターゲット#9プレイ画面

いくつかの楽しい統計

この投稿を書いている時点では、開始してから10日が経過しています。そして、ここに私たちが集めたいくつかの楽しい統計があります:

  • 世界中の13000人以上のプレイヤー
  • 10万件を超えるコードの提出
  • ターゲットで使用される最小バイト:わずか54バイト!
  • 140人以上のプレイヤーと40人以上の会話の素敵なコミュニティフォーラム

製品開発

機能の追加と洗練の無限ループに陥ることを防ぐため、1か月でCSSBattleを構築して起動することにしました。ローンチに絶対に必要なアイテムのリストを作成し、それに焦点を合わせました。

開発中に、私たちはウェブサイトに実装するためのたくさんの新しいアイデアを思いつきました。これらのエキサイティングなアイデアに取り組み、ついに1か月で立ち上げたいという衝動に抵抗できたことを誇りに思います!

技術スタック

当社の技術スタックは、今日の製品にとってかなり標準的なものです。 Zeit NowにデプロイされたフロントエンドにReact(create-react-appをスターターとして使用)があります。バックエンドには、Firebaseを使用します。どちらも主にフロントエンド/設計の経験があるため、Firebaseは、サーバーを管理せずにクラス最高のスケーラビリティとセキュリティを実現しながら、思いついたすべてを簡単に実装できるすばらしいオプションであることがわかりました!

スコアリングアルゴリズム

CSSBattleの開発に関する最も興味深いことの1つは、スコアリングアルゴリズムの設計です。私たちは文字通り、さまざまな式を議論し試してみました。より視覚的な一致が常に高いスコアをもたらすことを望んでいました。そしてもちろん、同じ一致率の場合、コードバイトが減少するにつれてスコアが増加するはずです。また、100%マッチになったら、より低いバイトに向けてスコアをより速く進行させて、削除されたバイトごとに汗をかいたプレイヤーにとってより価値のあるものにすることを望んでいました。

最終的に、思いついたことに満足しています。スコアリングアルゴリズムについてのみ別の投稿を書くかもしれません:)

打ち上げ

当初は4月5日の打ち上げを計画していましたが、1日前に打ち上げなければなりませんでした。多くの著名なCSS開発者を招待して、公開する前にCSSBattleを試してみました。そして、「幸いなことに」ジョナサン・スヌークは、私たちがローンチする予定の1日前に私たちについてツイートし、膨大な数の開発者をゲームに送りました。そして、私たちは打ち上げを準備することに決めました:)

私たちは、CSSBattleがその日一番の製品だったProductHuntでの発表から始めました。その直後、Redditラッシュでした。そして、Lea Verouによる大規模で本当に励ましのツイート:

それ以来、コミュニティが成長し、遊び、学び、そして競い合うのを見るのは、私たちにとってクレイジーな乗り心地でした!毎日、プレイヤーはCSSで創造性と想像力の限界を破っています!

是非ご参加

Spectrumには、非常にクリエイティブで謙虚な開発者の非常に素敵なコミュニティがあり、CSSのトリックを学ぶことができます。

何を求めている? CSSを書いたことがあるなら、今すぐプレイしてください— https://cssbattle.dev
(このゲームをプレイするためだけにCSSを学びたい人もいます!)

Fair️公正な警告

CSSBattleは非常に楽しくて中毒性があります。私たちは、人々が眠りを失い、奇妙な夢を見て、友人と会うのが遅くなり、呪いをかけ、プロジェクトの締め切りをスキップするなどを見ました。ご自身の責任で入力してください!

また、CSSBattleでは、創造的なアプローチとは別に、ブラウザがCSS(およびHTML)を解析する方法を活用する必要があることを強調する責任があると感じています。ここで記述するCSSは、実際のプロジェクトで記述する方法ではないことを理解することが重要です。ここで遊んでいる間に学んだヒントとコツは、確かにCSSをよりよく理解することになるでしょうが、常にハッキングとハッキングではないことに注意を払い、好奇心を持ちます。

CSSを楽しんでください!