Most images are 40px but some are larger. We should normalize the image sizes or do something so that they are all scaled by integer scale factors. Some of the new Pokemon have poorly scaled pixel art because of this.

• Pokedex "help" link should have an aria-label
• Offense "edit" link should have an aria-label
• Offense type chooser
  • Use an aria-hidden to avoid announcing the checkmark text
  • Change them to actual checkbox elements?
• Defense type chooser
  • Use aria-hidden to avoid announcing the selected circle text
  • Use radio button roles (or actual radio buttons?)
  • Make keyboard nav work like radio buttons
  • Probably best to just make them label+input[type=radio] elements, and use appearance:none to completely override the styles :D
• Pokedex
  • Offense/defense links should omit form name if not defined

• http://bulbapedia.bulbagarden.net/wiki/Forest%27s_Curse_(move)
• http://bulbapedia.bulbagarden.net/wiki/Trick-or-Treat_(move)

Both of these moves add a 2nd (or 3rd) type to Pokémon (grass or ghost)

Hide the clear x when there's no input

I made a translation based on the official site of Pokemon
Format is:

EN
JA

Normal
ノーマル
Poison
どく
Bug
むし
Fire
ほのお
Electric
でんき
Dragon
ドラゴン
Fighting
かくとう
Ground
じめん
Ghost
ゴースト
Water
みず
Psychic
エスパー
Dark
あく
Flying
ひこう
Rock
いわ
Steel
はがね
Grass
くさ
Ice
こおり
Fairy
フェアリー

HP
HP
Attack
こうげき
Defense
ぼうぎょ
Sp. Atk.
とくこう
Sp. Def.
とくぼう
Speed
すばやさ

Using Vite with Preact seems like a great way to reduce bundle size and speed up development (HMR 👀)

A small handful of new Pokémon were added in these DLC (#891-#898), and it would be neat if they could be supported by the Pokédex feature.

The only thing to note is that there are 3 forms of Calyrex (#898) with different typings, otherwise your dex crawler should work fine with the other new Pokémon.

The favicon looks really janky. I think I should just hand-draw it in 32px and 16px versions in Photoshop.

Right now the buttons look too much like the labels… let's make them more in line with the new buttons.

Just a rough idea right now. Probably should look more like the regular buttons.

Due to ... color blending, I guess. The text input on pkmn.help doesn't quite meet the 3:1 ratio. Buttons do, though.

Border colors should probably be like, proper non-alpha values, so it's easier to verify contrast requirements.

# parameters go in the query string so pages can be modified later
# use space (+ inside query string) to separate types
/offense?types=fighting+ground+fire+psychic
/offense?types=

/defense?types=normal
/defense?types=fairy+poison

# q is the search query
# page is the page number
/pokedex?q=&page=0
/pokedex?q=saur&page=0
/pokedex?q=sa&page=3

# no arguments here
/info

I think something like React Router's BrowserRouter component would be good for this. Google Analaytics integration can come as part of a separate ticket.

The _redirects file should have a rule like /* /index.html 200 so that all routes serve the basic HTML file that starts the single page app. Right now the _redirects file is not being copied into the dist folder though. It needs to be copied there during npm run build so that Netlify will read it.

Also the devServer section of webpack.config.js will need historyApiFallback: true to serve this HTML in development mode as well.

Hi,

I was just using this and I thought of a handy feature: when you search a pokemon in the Pokedex, it would be handy that when you click, the pokemon's types get loaded into either the attack or defence tab.

If you want I can create this feature and create a pull request, if you would rather do it yourself, please go ahead :)

Kind regards

Since the update I can't find the button that previously was there to go to Defense tab of a pokemon from the pokedex search result?

I don't know if I necessarily want to pull in Tachyons itself, but using teeny tiny classes might be useful and might make the style payload smaller too.

The contrast levels are a complete disaster on the site. I should fix them.

Make it easier to debug or something

It puts a # in the URL. Make it stop.

I am using your tool to pick a counter to Rocket leaders' Pokemon. E.g. Salamence with Fire attack.

I first look at the bottom of the "Offense" tab for Fire. This tells me that Rock/Fire/Water/Dragon would be a good type.

I then look at the top of the "Defense" tab which tells me that Ice would be the the best attack type to use.

So a really good candidate would be e.g. a Water Dragon with Ice Attack.

Seeing good defensive types next to good attack types would be very handy.

Go to the last page of the pokedex and tap the PREV button, see page jumps

The footer is annoyingly close to the content, let's make it stick to the bottom and have a larger top margin.

body: flex flex-column min-vh-100
#react-root: flex-auto

Rather than a home-grown function, let's just use the npm package classnames.

https://medium.com/@tannerlinsley/jumpsuit-jumpstate-level-up-with-new-thunk-saga-killing-features-f3d7760f5477

Also, measure the build size before and after!

Mobile Chrome is a piece of trash, so let's add some cache buster query params to the JS/CSS somehow.

Pokedex text font size is inconsistent when resizing the width of browser

Either add alt="description" or role="presentation" onto all img tags.

The type selector is really laggy and slow and horrible on iOS because Safari can't handle scrolling a fixed position element :(

So I'm thinking we can just have an accordion in the page to select stuff anyway.

It might be kinda annoying to set up the resizing animation because you can't transition on height:auto but whatever I'll figure it out.

Third tab. Searchable Pokédex with vital information

The app should scroll automatically to relevant sections rather than the top

I love your project it is truly amazing and helpful!

As an enhancement I would like to add multilingual support, I will be happy to assist if that's ok.

Thanks!

When did minifying get so hard? Why are Uglify and Closure both barfing on my JS? I should figure it out because >1MB is too big for such a simple site 👎

The first time I visited this website, it was in light mode. I was recording a video and showing it on screen, and it being in light mode made it easy to see what i was doing in the video.
Now the site is in dark mode and I've found no option to turn it off. Dark mode is great at night, but during the day it makes me have a hard time seeing what's on the screen and also makes things less visible when i use it in my videos.

Could you add a way to at least switch between light and dark mode instead of always having dark mode turned on?

__

Nvm, solved. It was just my windows settings. Feel free to delete this issue, i dont think i cant do it myself

Touch targets should be 44x44 px minimum

Main abilities list https://ikewise.neocities.org/typecalc.htm

Double check new gen7 abilities http://bulbapedia.bulbagarden.net/wiki/Category:Abilities_introduced_in_Generation_VII

Make sure these are in a radio button group (or dropdown...)

CSV import/export for forms in the offense coverage screen would be cool.

A single spritesheet is too massive, and search makes it impossible to generate a sprite sheet for every page, plus this would be really complicated. Let's just use image preloading for the next page of images... eventually.

I can use national dex number to map PokeAPI to Bulbapedia https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number

I should figure out how to make this a PWA so people can install it and use it offline

Visitors get a completely blank screen if JS fails to load.

It should say something about how to contact me to report the issue.

We can cache better and have slightly more debuggable output with split bundles featuring a vendor.js + bundle.js instead of putting all 3rd party libs into the same JS blob.

I'm faking WCAG AA contrast by using heavy drop shadows, but it's unclear if that's enough, and it doesn't look that good.

Explore alternative designs that convey color well without compromising contrast.

Maybe a border (all around) or a big stripe on the left could be used?