Code Monkey home page Code Monkey logo

web-speed-hackathon-2022's Introduction

Web Speed Hackathon 2022

概要

"Web Speed Hackathon 2022" は、非常に重たい Web アプリをチューニングして、いかに高速にするかを競う競技です。

「Web Speed Hackathon」はリモート参加型のハッカソンです。 予め準備してある Web アプリケーションのパフォーマンスを改善することで競い合います。

課題

今回のテーマは、架空のベッティングサービス(勝者を予想して投票するサービス)「CyberTicket」です。 CyberTicket のパフォーマンスを改善してください。

なお、このアプリケーションは日本国内の法律に基づく実際の運用を意図していない架空のサービスであり、実在する団体・会社とは一切関係ありません。

過去に開催した際の内容については以下からご覧いただけます。

参加方法

  1. 課題のソースコードを fork します
  2. データベースを初期化し、必要に応じてリーダーボードも fork して設定します
    • ./docs/DEVELOPMENT.mdを参考に、取り組む日時に合わせたデータを生成してください
  3. 参加記事や解説記事、大歓迎です!
    • 他の人の解説記事や参加記事を読んで、更に高速なアプリを目指しましょう

以前の Web Speed Hackathon 2022 参加者のかたへ

以前の Web Speed Hackathon 2022 から、いくつかの変更点があります。

学生向け / 社内向けからの変更点
  • Node.js 、ライブラリのバージョンをアップデートしました
  • 開催期間に合わせてデータの再生成を行いました
  • TrimmedImage のレスポンシブ時の挙動を修正しました
  • LICENSE を Mozilla Public License 2.0 と明記しました
  • その他、軽微なコードの調整をしました
一般向けからの変更点
  • Dockerfile を追加しました
  • fly.io へのデプロイに対応しました

注意事項

  • 既に開催が終了している都合上、サポートは原則行いません

採点

採点は GitHub Actions を用いて、参加登録がされた時点および参加者が採点を要求した任意の時点で行われます。

スコアは GitHub Actions 上の最新版 Lighthouse を使って以下のように算出されます。

  1. Lighthouse により次の 5 ページを検査します
    • トップページ
    • 出走表ページ
    • オッズページ x 2
    • 結果ページ
  2. 各メトリクスに対して Lighthouse のスコア計算方法 と同じ重み付けを使用し、以下の総和をページのスコアとします (0-100 点) ※
    • First Contentful Paint のスコア × 10 (0-10 点)
    • Speed Index のスコア × 10 (0-10 点)
    • Largest Contentful Paint のスコア × 25 (0-25 点)
    • Time To Interactive のスコア × 10 (0-10 点)
    • Total Blocking Time のスコア × 30 (0-30 点)
    • Cumulative Layout Shift のスコア × 15 (0-15 点)
  3. 各ページのスコアを合算し、参加者のスコアとします

※重み付けが同じなので、ページのスコアは Lighthouse が出すスコアと一致します。ただし、Lighthouse のスコアは整数に丸められているのに対し、本競技のスコアは丸める前の値をそのまま使用しています。

開発方法

開発に必要なドキュメントは、./docs/DEVELOPMENT.md を参照してください。

API 仕様書

API 仕様書は、./docs/API.mdを参照してください。

ライセンス

  • Code: Mozilla Public License 2.0 (CyberAgent, Inc.)
  • Image data: Unsplash License
  • Color theme: MIT License (Tailwind Labs, Inc.)
  • Font: SIL Open Font License (MODI 工場/倒神神倒)

web-speed-hackathon-2022's People

Contributors

dora1998 avatar 3846masa avatar sor4chi avatar kult0922 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.