Update ndex

[CiaobyDany]

Descrizione

La pagina dell'elenco Pokémon per Pokédex nazionale è evidentemente lenta a caricare e destinata a diventare sempre più ingestibile ad ogni generazione. Poiché si tratta della terza pagina più visitata del sito, qualsiasi cambiamento drastico è da considerare attentamente prima di rischiare di non andare più incontro alle esigenze dei nostri visitatori (anche se tali esigenze sono idiote).

Pagine affette

• https://wiki.pokemoncentral.it/Elenco_Pok%C3%A9mon_secondo_il_Pok%C3%A9dex_Nazionale

Risoluzione del problema

Sono state proposte diverse soluzioni, quasi tutte potenzialmente complementari e quasi tutte con aspetti negativi o comunque insufficienti per la risoluzione del problema: 1) Rimozione delle forme useless dall'elenco (circa il 10% delle entries, qui il risultato: https://wiki.pokemoncentral.it/Utente:CiaobyDany/sandbox3 NB: diversi utenti in passato hanno fracassato i maroni per inserirli; inoltre se anche risolvesse il problema sulla pagina attuale per alcuni devices, nella prossima generazione saremmo al punto di partenza) 2) Rimozione delle colonne dei tipi dall'elenco (esempio senza useless forms e senza tipi: https://wiki.pokemoncentral.it/Utente:Naty/Sandbox NB: l'utente sa che andando su quella pagina troverà i tipi di tutti i Pokémon, nonostante esista l'elenco apposito, considerare le probabilità che vadano sull'elenco per tipi non trovandoli più in ndex oppure che cerchino su altri siti) 3) creazione di sottopagine generazionali che risolvono in modo definitivo il problema del caricamento diventando ognuna sufficientemente leggera da non creare problemi. Rimane però il problema del cosa fare della pagina ndex vera e propria con 2 soluzioni proposte: 3-a) Trasformare ndex in una pagina di disambiguazione che rimanda alle singole pagine (NB: gran parte degli utenti con devices particolarmente performanti che non hanno mai riscontrato problemi di caricamento non comprenderanno la scelta e vorranno comunque un elenco multigenerazionale, così come diversi ottusi che comunque non riuscirebbero a caricare la pagina, ma preferirebbero l'elenco intero, e sì, esistono) 3-b) Trasformare ndex in un merge in modo simile a quanto accade con l'elenco episodi: https://wiki.pokemoncentral.it/Elenco_episodi_anime mettendo un avviso a inizio pagina (che può essere una semplice frase in corsivo senza bisogno di box o immagini o altro) in cui si invita a visitare le pagine ndex1, ndex2, ecc. in caso di problemi con il caricamento (NB: non è una soluzione sul breve termine al problema del caricamento, ma può consentire una transizione non traumatica verso gli elenchi generazionali e nel lungo periodo potremmo decidere di attuare la 3-a) se notassimo una riduzione drastica delle visite una volta che gli utenti metabolizzeranno lo spostamento e avranno modo di apprezzare i benefici delle sottopagine)

Credo di aver elencato più o meno tutto. Aggiungo anche la proposta del restyling grafico del template rdex di Maze: https://wiki.pokemoncentral.it/Utente:Maze/OnDisplay, che però prevede le cards anche in layout desktop e non solo mobile.

[mexicat]

Credo che il problema di lentezza ed eventualmente di crash in vecchi browser sia dovuto al fatto che ci sono tabelle estremamente lunghe ma la larghezza delle colonne è automatica (come da default). Questo significa che il browser deve fare un sacco di passaggi per adattare la larghezza delle colonne al contenuto man mano che questo viene caricato, riga per riga.

Usare table-layout: fixed (doc) sui CSS della tabella dovrebbe risolvere il problema, dato che in questo modo la larghezza delle colonne è sempre data dalla prima riga (se ne può approfittare per uniformare le larghezze delle tabelle, che se non sbaglio al momento sono diverse). Magari si possono fare dei test. "Sfortunatamente" ho solo device di ultima generazione e non riesco a replicare il problema, ma se questa cosa non lo risolve posso provare a fare un po' di profilazione nei dev tools per capire dov'è il collo di bottiglia, perché OK che è una pagina lunga ma non è così lunga.

In alternativa o in aggiunta, credo sia possibile abilitare in qualche modo da CloudFlare il lazy loading delle immagini (questo andrebbe però su tutto il sito) in modo che vengano caricate solo quando la pagina viene scrollata. (Lo svantaggio è che scrollando la pagina le immagini non ci sono già e bisogna aspettare un attimo perché si carichino).

In ogni caso, la rimozione delle varie forme alternative dall'elenco generale secondo me è dovuta. Come regola di base, direi 1 numero = 1 pkmn, senza numeri doppi.

Sono contrario a separare la pagina in sottopagine perché imho è molto comodo fare ⌘F (o equivalenti) per trovare un particolare numero o nome. E poi se Pokédex nazionale dev'essere, che lo sia.

[CiaobyDany]

@davla te l'avevo detto che ci sarebbe stato sicuramente l'edgy boy di turno contrario allo split perché con i suoi device di ultima generazione non coglie il problema. Non avevo considerato che sarebbe stato proprio il nostro admin. @mexicat la gente adora le forme alternative. Togliere le useless prevedo farà arrivare diversi rompicazzo, toglierle tutte scatena una guerra civile di portate bibliche. BTW, hai guardato la sandbox con la nuova versione dell'rdex? Effettivamente abbiamo notato un incremento nelle prestazioni di caricamento inaspettato data l'aggiunta di gradienti nel codice rispetto ai solid colors. Inoltre dubito che sia il problema della larghezza delle colonne perché la versione senza i tipi carica molto, molto velocemente, ma dovrebbe essere affetta dallo stesso problema.

[mexicat]

Beh ma è un problema in generale dei telefoni di fascia bassa, su qualsiasi desktop (immagino) si vede correttamente e sarebbe stupido castrare la versione desktop per questo motivo, imho.

Per il resto la versione con due colonne in meno chiaramente carica più velocemente perché appunto ci sono due colonne in meno su cui fare i calcoli (la larghezza viene ricalcolata per ogni colonna di ogni riga). Però sicuramente influiscono anche tutti quei background, che tra l'altro - mi accorgo ora - sono dichiarati inline. Sono abbastanza sicuro che cambiarli tutti in classi aiuterebbe parecchio con la performance (ref).

Per quanto riguarda le forme alternative, non si può avere quantomeno un riferimento nell'elenco in modo che non sembrino errori/ripetizioni? Tipo "Meowth (sotto, più piccolo) di Alola".

[CiaobyDany]

Desktop che sono il 30% del totale e ho i miei dubbi anche su quelli.

Sulla questione dei background non ho capito, lascerò che ci guardi qualcun altro

Per le forme alternative actually esiste il parametro nel template per indicare la forma (che fa esattamente quello che dici tu), ma non so onestamente perché non sia usato nella pagina.

[mexicat]

Se i desktop sono il 30% del totale sono comunque più della percentuale di telefoni su cui succede questa cosa. Che non vuol dire che dobbiamo sbattercene dei telefoni scrausi, ma che dobbiamo trovare un compromesso che sia accettabile su tutte le piattaforme. Spezzare l'elenco non è accettabile considerando che il vantaggio principale della pagina è l'avere un elenco unico e continuo di tutti i Pokémon a oggi. La pagina, ripeto, non è particolarmente pesante a livello di kb, la lentezza e gli eventuali crash avvengono nel rendering, quindi sicuramente c'è del margine di miglioramento prima di pensare a soluzioni drastiche.

Per la questione stili inline/background invoco @davla che ci saprà dire se quello che ho scritto nel messaggio precedente ha senso

[mexicat]

BTW @CiaobyDany, non ho un 3DS a portata di mano al momento, ma nel Pokédex nazionale in-game degli ultimi giochi come appaiono (se appaiono) le forme alternative? Io per quanto possibile farei fede a quello che è la fonte canonica, ma magari dico una stronzata.

[lucas992x]

@mexicat In SLUSUL non c'è il Pokédex Nazionale ma solo quello regionale, il Dex Nazionale è nella Banca, dopo vi posso mandare qualche foto

[CiaobyDany]

@mexicat Negli ultimi giochi il dex nazionale è stato rimosso, rimane solo in banca l'elenco completo. Le forme alternative nei regionali in SL non appaiono. O meglio, appare l'ultima forma visualizzata nel dex. Es: Oricorio. Vedo in-game la forma Cheerdance come prima forma e nell'elenco mi appare quella senza specificazioni. Se apro la voce mi fa selezionare però anche le altre varianti (differenze di forma/sesso/cromaticità e megaevoluzioni) e se ritorno all'elenco mi ri-mostra l'ultima forma che ho consultato sia come MS in elenco sia nei modelli di anteprima del set evolutivo in alto.

[davla]

Per la questione delle classi CSS, bisogna andarci cauti. Il fatto è che non solo ci sono molti colori sul Wiki, ma stiamo mettendo i gradienti in mezzo.

La cosa più fattibile sarebbe mettere solo i gradienti utilizzati nei boxtipo nel CSS, ovvero i 18 colori dei tipi principali (niente sconosciuto né ombra), da dark a normale. Se siamo diligenti e creiamo i boxtipo solo con il modulo Box, possiamo anche evitare alias.

Però prevedo un futuro in cui Ma non si può fare come i box tipo anche per quest'altra cosa? e poi il CSS esplode.

Se mi si dà la certezza che tal cosa non succederà mai, e che potrò prendere questo o un altro post come riferimento in caso dovesse essere richiesto, allora prendo la cosa in considerazione. Nel senso, sarò intransigente come mai prima d'ora a tal proposito.

[flavio-a]

Concordo tantissimo con Maze, aggiungere classi al CSS non è un male di per se ma rischia di portare ad un'esplosione, se si vogliono proprio aggiungere mettiamo solo quelle.

Per la questione di ridurre un po' il numero di entry si può introdurre il raggruppamento proposto in #39 in caso di forme con tipi uguali. Per la questione del layout devo confessare che l'idea di avere le card anche da desktop non mi fa impazzire. D'altra parte se il crash è veramente legato al layout tabulare il fatto di eliminarlo solo da mobile (con le tabelle responsive di Maze) non dovrebbe risolvere il problema sui telefoni? Altrimenti si può provare il table-layout: fixed proposto da Gika e vedere se aiuta, però bisogna capire quanto fare larghe le varie colonne. Farò delle prove.

EDIT: ho provato a mettere in sandbox una versione con il layout a card (qui), provate a caricarlo e ditemi come va (probabilmente non cambia nulla dalla pagina normale, ma provare non costa nulla).

[davla]

Le card da desktop sfruttano tutto lo spazio in orizzontale. Com'è ora, hai due simpatiche aree bianche, più o meno enormi, ai lati.

Ma comunque i card layout non risolvono il problema, se è legato alle larghezze variabili.

[flavio-a]

Ti dirò che è proprio quello spazio laterale a piacermi. Ho fatto una prova veloce e il card layout mi piace molto di più se metti il container a che so, width-xl-80 width-md-100 o qualcosa del genere (ovviamente aggiustando il numero di card per riga in accordo con la nuova larghezza). Questa è un'osservazione generale sui card layout, non limitata a questo caso.

Altra osservazione: ha davvero senso la colonna con il numero di dex regionale? Per dire, le forme di Alola avrebbero il loro bel dex regionale ad Alola ma per ndex finiscono a Kanto, quindi non viene segnato nessun dex regionale. Inoltre viene messo il numero di dex di una sola regione quando spesso un Pokémon si trova in molte, quindi non so quanto freghi qualcosa a qualcuno di quella colonna. Io la toglierei.

[CiaobyDany]

@flavio-a Approvo la rimozione del dex regionale, se ti interessa vai a vedere la pagina dedicata

[davla]

@flavio-a Sì, davo per scontato di limitare la larghezza se necessario. Però un 10% vuoto a destra e 10% vuoto a sinistra è molto meglio di adesso, che hai qualcosa come 180% a destra e 180% a sinistra (iperbole voluta).

Concordissimo sul dex regionale.

[flavio-a]

Up. E già che lo aggiorniamo sembra ragionevole farne un modulo, così non dobbiamo più sbatterci ad aggiornarlo a mano ogni volta che annunciano un nuovo Pokémon.

[lucas992x]

Approvo l'idea di modulizzarlo. In tal caso la divisione in sottosezioni come verrebbe fatta? Per generazioni? Ogni ~100 entry? Altro ancora?

[flavio-a]

Io farei per generazioni, sembra una divisione ragionevole. Quindi vogliamo farlo card layout? Cosa importante: cerchiamo di tenerlo compatto anche da mobile (se possibile 1 card -> 1 riga) perché sono davvero tanti Pokémon, se iniziamo ad usare un sacco di spazio per ogni Pokémon viene veramente enorme (e quindi scomodo da usare). Un'idea di come me lo immagino: https://wiki.pokemoncentral.it/Utente:Ff300/sandbox (lasciate perdere il fatto che ad alcune larghezze le cose si sovrappongono, guardatelo appena sotto i breakpoint per farvi un'idea). La cosa più importante è che anche a xs sta tutto su una sola riga, risparmiando un sacco di spazio verticale (approssimativamente 0,7x dell'altezza di un mossaentrymt)

[lucas992x]

L'idea mi piace, solo bisognerebbe allineare per bene le voci.

[flavio-a]

https://wiki.pokemoncentral.it/Utente:Ff300/sandbox Guardate Charmander quando ce ne sono almeno due affiancati e ditemi se vi va bene così. Altrimenti si sistema in poco, solo che bisogna aggiungere un flex che se va bene già così mi risparmio (sempre per tenere più leggera la pagina, anche se non so davvero quando influenzi le prestazioni. Si potrebbe provare, in effetti. Ma vabbe, tanto se dite che fa schifo e che il flex ci vuole è morta lì)

[lucas992x]

Ma non credo serva un flex in più, dovrebbe bastare un height-100 al posto giusto (guarda per esempio la mia sandbox).

[flavio-a]

https://wiki.pokemoncentral.it/Utente:Ff300/sandbox Versione definitiva, prendere o lasciare. Ok, magari non così drastici, però a me sembra buona. Come su Faccialibro o Tuotubo, pollice in su o commento qua sotto se vi piace.

[lucas992x]

Il mio OCD mi dice che bisognerebbe uniformare lo spazio fra le caselle ed il bordo, ma comunque approved 👍

[flavio-a]

Adesso che Luca, che era uno dei miei oppositori sulla grafica, è in pausa vediamo di chiudere quest'issue così lo facciamo come piace a me 😈. Boiate a parte: le due proposte le vedete qui, bisogna solo scegliere se lo vogliamo largo 80 o 100 da desktop. Io sono per width 80, se ben ricordo anche Dany è per 80 mentre Luca e Irene sono per 100. Nota per tutti: nella pagina vedete esempi solo con pochi Pokémon, ma dovete immaginare una cosa che si estende per almeno 25 righe, quindi viene fuori proprio un muro di colore. Per confronto qui c'è un pezzo vero in versione 80, come verrà messo nella pagina.

In più c'era un problema di MS che si rimpicciolivano perché quelli di SpSc sono più grossi, ma quello vedo di risolverlo per conto mio.

[flavio-a]

Ho risolto il problema di MS e ho messo il modulo nella pagina. Per ora è a width-xl-80 perché sì, ovviamente si può cambiare ma intanto l'ho caricato perché è possiamo deciderlo facilmente in seguito e intanto abbiamo una pagina fruibile da mobile (e sperabilmente più leggera da caricare). Per gli aggiornamenti con nuovi Pokémon c'è una versione manuale del modulo (che per esempio adesso viene usata per Kubfu, Urshifu e Calyrex); l'unico problema è che non si possono inserire Pokémon a metà degli elenchi automatici ma non credo sarà così grave (anche perché basta aggiornare i moduli dati con i nuovi Pokémon, cosa che di solito viene fatta nel giro di uno/due giorni). Detto questo direi che chiudo.