Presentazione di CSSBattle - il primo gioco di golf con codice CSS

Se stai imparando lo sviluppo Web o sei già uno sviluppatore Web professionista, è molto probabile che tu abbia scritto CSS almeno una volta nella vita. È un blocco di base di qualsiasi pagina Web. Tra tutte le discussioni, l'amore e l'odio per i CSS, vi presentiamo tutti - CSSBattle

CSSBattle è la prima piattaforma di golf in codice per gli amanti dei CSS che io e il mio amico, Kushagra Agarwal, abbiamo creato. Lo scopo di questo gioco è semplice: hai un obiettivo di immagine che devi replicare con il codice CSS più piccolo possibile (e un leggero HTML se vuoi). Più corrispondenza visiva e meno byte ti danno un punteggio più alto. Ed è così che scala le classifiche in CSSBattle. Ecco una schermata di destinazione di esempio:

Schermata di riproduzione del bersaglio n. 9

Alcune statistiche divertenti

Al momento della stesura di questo post, sono passati 10 giorni dal nostro lancio. Ed ecco alcune statistiche divertenti che abbiamo raccolto:

  • Oltre 13000 giocatori in tutto il mondo
  • Oltre 100.000 invii di codice
  • Byte minimi utilizzati su un target: solo 54 byte!
  • Un delizioso forum della community con oltre 140 giocatori e oltre 40 conversazioni

Sviluppo del prodotto

Abbiamo deciso di creare e lanciare CSSBattle in un mese, per impedire a noi stessi di entrare in un ciclo infinito di funzionalità di aggiunta e lucidatura. Abbiamo fatto un elenco degli elementi assolutamente necessari per il lancio e ci siamo concentrati su di esso.

Durante lo sviluppo, abbiamo trovato tonnellate di nuove idee da implementare nel sito Web, che abbiamo continuato a notare. Sono orgoglioso di poter resistere alla tentazione di lavorare su queste idee entusiasmanti e finalmente lanciarle in un mese!

Tech Stack

Il nostro stack tecnologico è piuttosto standard per il prodotto di oggi. Abbiamo React (usando create -eagire-app come antipasto) sul frontend che viene distribuito su Zeit Now. Per il backend, usiamo Firebase. Dal momento che entrambi abbiamo principalmente un'esperienza di frontend / design, Firebase si è rivelata un'opzione straordinaria per implementare facilmente tutto ciò che avevamo in mente, ottenendo al contempo la migliore scalabilità e sicurezza della classe senza gestire alcun server!

L'algoritmo di punteggio

Una delle cose più interessanti sullo sviluppo di CSSBattle è stata la progettazione dell'algoritmo di punteggio. Ci siamo seduti letteralmente per giorni a discutere e provare varie formule. Volevamo che una corrispondenza amorosa visiva dovesse sempre dare un punteggio più alto. E, naturalmente, per la stessa percentuale di corrispondenza, il punteggio dovrebbe aumentare con la riduzione dei byte di codice. Inoltre, volevamo una progressione del punteggio più rapida verso byte più bassi una volta raggiunta la corrispondenza del 100%, per renderlo più gratificante per i giocatori che lo sudavano con ogni byte rimosso.

Alla fine, siamo contenti di ciò che abbiamo inventato. Forse scriveremo un post separato solo sull'algoritmo di punteggio :)

Il lancio

Inizialmente avevamo pianificato il lancio per il 5 aprile, ma dovevamo lanciarlo il giorno prima. Avevamo invitato molti eminenti sviluppatori CSS a provare CSSBattle prima di renderlo pubblico. E "per fortuna" Jonathan Snook ha twittato su di noi il giorno prima che avessimo programmato il lancio, inviando un enorme flusso di sviluppatori al gioco! E così decidiamo di preparare il nostro lancio :)

Abbiamo iniziato con l'annuncio su ProductHunt in cui CSSBattle era il prodotto numero 1 della giornata. Immediatamente dopo è stata una corsa di Reddit. E poi, il tweet enorme e davvero incoraggiante di Lea Verou:

Da allora, è stata una corsa folle sia per noi vedere la community crescere, giocare, imparare e competere! Ogni giorno vediamo i giocatori rompere i limiti della creatività e dell'immaginazione con i CSS!

Vieni, unisciti a noi

Abbiamo una bellissima comunità di sviluppatori straordinariamente creativi e umili su Spectrum dove puoi passare del tempo e imparare alcuni trucchi CSS.

Allora, cosa stai aspettando? Se hai mai scritto CSS, gioca ora - https://cssbattle.dev
(Abbiamo anche visto persone che vogliono imparare CSS solo per giocare a questo gioco!)

Avviso equo

CSSBattle è estremamente divertente e avvincente. Abbiamo visto persone perdere il sonno, fare strani sogni, essere in ritardo per incontrare amici, imprecare, saltare le scadenze dei progetti e cosa no. Per favore entra a tuo rischio e pericolo!

Inoltre, riteniamo che sia nostra responsabilità evidenziare che oltre agli approcci creativi, CSSBattle richiede di sfruttare il modo in cui CSS (e HTML) viene analizzato dai browser. È importante capire che il CSS che scrivi qui non è il modo in cui scriveresti in un vero progetto. I consigli e i trucchi che impari giocando qui ti farebbero sicuramente capire meglio i CSS, ma fai sempre attenzione e curiosità su cos'è un hack e cosa no.

Buon divertimento CSS-ing!