Article original : Introducing CSSBattle — the first CSS code-golfing game
Par kushagra gour
Si vous apprenez le développement Web ou si vous êtes déjà un développeur Web professionnel, il y a de fortes chances que vous ayez écrit du CSS au moins une fois dans votre vie. C'est un bloc de construction très basique de toute page Web. Au milieu de toutes les discussions et de l'amour et de la haine pour CSS, nous vous présentons à tous CSSBattle ?
CSSBattle est la première plateforme de code-golfing pour les amateurs de CSS que mon ami Kushagra Agarwal et moi avons créée. Le but de ce jeu est simple vous avez une image cible que vous devez répliquer avec le code CSS (et légèrement HTML si vous le souhaitez) le plus petit possible. Plus la correspondance visuelle est grande et moins il y a de bytes, plus votre score est élevé. Et c'est ainsi que vous grimpez dans les classements de CSSBattle. Voici un exemple d'écran cible :
Cible #9 écran de jeu
Quelques statistiques amusantes
Au moment d'écrire cet article, cela fait 10 jours que nous avons lancé CSSBattle. Et voici quelques statistiques amusantes que nous avons recueillies :
- 13000+ joueurs dans le monde
- Plus de 100K soumissions de code
- Nombre minimum de bytes utilisés sur une cible : seulement 54 bytes! ?
- Un forum communautaire lovely de 140+ joueurs et 40+ conversations
Développement du produit
Nous avons décidé de construire et de lancer CSSBattle en un mois, pour éviter de nous retrouver dans une boucle infinie d'ajout et de polissage de fonctionnalités. Nous avons dressé une liste des éléments absolument nécessaires pour le lancement et nous nous sommes concentrés dessus.
Pendant le développement, nous avons eu des tonnes de nouvelles idées à implémenter sur le site, que nous avons continué à noter. Je suis fier que nous ayons pu résister à l'envie de travailler sur ces idées excitantes et de finalement lancer en un mois !
Stack Technique
Notre stack technique est assez standard pour les produits d'aujourd'hui. Nous avons React (en utilisant create-react-app comme starter) sur le frontend qui est déployé sur Zeit Now. Pour le backend, nous utilisons Firebase. Puisque nous avons tous les deux principalement une expérience en frontend/design, Firebase s'est avéré être une option amazing pour implémenter facilement tout ce que nous avions en tête tout en obtenant une scalabilité et une sécurité de classe mondiale sans gérer de serveur !
L'algorithme de notation
L'une des choses les plus intéressantes concernant le développement de CSSBattle était la conception de l'algorithme de notation. Nous avons littéralement passé des jours à discuter et à essayer diverses formules. Nous voulions qu'une correspondance visuelle plus grande entraîne toujours un score plus élevé. Et bien sûr, pour le même pourcentage de correspondance, le score devrait augmenter avec la diminution des bytes de code. De plus, nous voulions une progression de score plus rapide vers des bytes plus bas une fois que vous êtes à 100 % de correspondance, pour le rendre plus gratifiant pour les joueurs qui suent sang et eau avec chaque byte supprimé.
En fin de compte, nous sommes satisfaits de ce que nous avons conçu. Peut-être écrirons-nous un article séparé sur l'algorithme de notation :)
Le Lancement
Nous avions initialement prévu le lancement pour le 5 avril, mais nous avons dû le lancer un jour plus tôt. Nous avions invité de nombreux développeurs CSS éminents à essayer CSSBattle avant de le rendre public. Et "heureusement" Jonathan Snook a tweeté à notre sujet un jour avant que nous prévoyions de lancer, envoyant un énorme flux de développeurs vers le jeu ! Et ainsi nous avons décidé d'avancer notre lancement :)
Nous avons commencé par l'annonce sur ProductHunt où CSSBattle était le produit #1 du jour. Immédiatement après, il y a eu un rush sur Reddit. Et puis, le tweet massif et vraiment encourageant de Lea Verou :
Depuis lors, cela a été une folie pour nous deux de voir la communauté grandir, jouer, apprendre et concourir ! Chaque jour, nous voyons des joueurs repousser les limites de la créativité et de l'imagination avec CSS !
Venez nous rejoindre
Nous avons une communauté très agréable de développeurs super créatifs et humbles sur Spectrum où vous pouvez traîner et apprendre quelques astuces CSS.
Alors, qu'attendez-vous ? Si vous avez déjà écrit du CSS, jouez maintenant https://cssbattle.dev
(Nous avons également vu des gens vouloir apprendre le CSS juste pour jouer à ce jeu !)
###
Avertissement équitable
CSSBattle est très amusant et addictif. Nous avons vu des gens perdre leur sommeil, faire des rêves étranges, être en retard pour rencontrer des amis, maudire, sauter des délais de projet et que sais-je. Entrez à vos propres risques ! ?
De plus, nous estimons que c'est notre responsabilité de souligner que, outre les approches créatives, CSSBattle vous oblige à exploiter la manière dont CSS (et HTML) est analysé par les navigateurs. Il est important de comprendre que le CSS que vous écrivez ici n'est pas la manière dont vous écririez dans un projet réel. Les astuces et conseils que vous apprenez en jouant ici vous feront certainement mieux comprendre CSS, mais soyez toujours vigilant et curieux de savoir ce qui est une astuce et ce qui ne l'est pas.
Amusez-vous bien avec CSS !