
Pokedex.org: a progressive webapp for Pokémon fans - ejjpi
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
======
cdnsteve
As someone who doesn't spend much time on the front end of things, this post
renewed my interest. Great explanation of tech used and why. Actually using it
on my Nexus 5 was unlike any site I've used before.

~~~
nolanl
Author here - thanks a lot! :) I think many of the emerging performance
bottlenecks in webdev are on the client rather than the server, so there's
definitely a lot more research that needs to be done here. In particular, I
feel like the whole "web worker" angle has been seriously overlooked, even
though the tech is ~5 years old.

~~~
sdrothrock
> In particular, I feel like the whole "web worker" angle has been seriously
> overlooked, even though the tech is ~5 years old.

I wonder how much of that stems from the fact that IE didn't support them
until 10 and Safari til 8. I'm not sure about dates/numbers, but mobile
browsers were pretty late in support too, weren't they?

------
Noelkd
Really cool idea to try to show the way to make a responsive smooth 60fps app.
But the animations on my PC(firefox on linux) and phone (firefox on android)
were really choppy.

Is the chrome experience much better?

EDIT: also the back button on my phone sent me back to the tile screen :(

~~~
roryokane
I had the back button problem too. The solution is for the app to add routing,
which is tracked in this issue:
[https://github.com/nolanlawson/pokedex.org/issues/2](https://github.com/nolanlawson/pokedex.org/issues/2).

------
arcatek
Just know that Nintendo already shutdown a lot of Pokédex apps just like yours
(a friend of mine was the main dev for one of them).

I don't agree with them, but I guess it would be better for you (and the
project) if you couldn't be traced back.

~~~
nolanl
Author here. I'm no stranger to this situation; I wrote a native Android
Pokédex app awhile ago that got DMCA'd: [http://nolanlawson.com/2011/05/26/on-
pokedroids-removal/](http://nolanlawson.com/2011/05/26/on-pokedroids-removal/)

Last time I talked with the legal team of The Pokémon Company (subsidiary of
Nintendo that owns the IP), I was informed that, while they allow web sites
like Bulbapedia and Serebii, it gets hairier with native apps (e.g. because
you implicitly assert ownership over the IP when you publish on the Play
Store). This happened almost 5 years ago, though, and nowadays there are lots
of Pokémon apps on the Play Store
([https://play.google.com/store/search?q=pokedex&c=apps](https://play.google.com/store/search?q=pokedex&c=apps)),
so I can only assume that they've softened their views.

That said, it's their IP, and they're free to wield the DMCA hammer as they
see fit. For me, though, the point of Pokedex.org is to show what you can do
with 2015-era web tech, and that, on Android at least, the web has already
(mostly) caught up with native. I mean, this app is arguably superior than my
old Froyo-era native app, and it's all HTML/CSS/JS! So hopefully someone will
be inspired by it to build a similar, offline-capable webapp. That was reason
enough for me to build it.

------
techonup
There's a conspicuous lack of actual info, though. As a competitive player
who's played at Worlds before, anything short of Veekun's data is going to be
missing something crucial. It's a nice site and your principles are solid, but
the data just has to be there.

~~~
nolanl
Thanks! I'm glad there are some true Pokémaniacs out there keeping me honest.
;) In my defense, though, I put this site together in my spare time over the
course of the past few weeks, and the data source I used (PokéAPI) is missing
some crucial data that I still need to patch (e.g. the Gen VI species, the
catch rates). But the point of the site is mostly to demonstrate what you can
do with web tech, not to be the end-all be-all best Pokémon resource ever.

I'd like it to be, though! :) Hence why I open-sourced it, and why I'm
encouraging anyone with the inclination to help improve it:
[https://github.com/nolanlawson/pokedex.org](https://github.com/nolanlawson/pokedex.org)

~~~
NicoJuicy
Any thoughts on what you would do differently and/or what you couldn't do
right now?

Eg. of techstack, syncing databases, whatever. I think this project is
awesome! Learned a lot of new things :)

------
Meekro
Pretty cool! One suggestion: On phones, make the search accessible from your
popout menu. That way I don't have to scroll waaaay up to get to it.

------
CM30
It's pretty nice, though I have to be honest and ask:

1\. Why should I use this one specifically, given that Pokedex listings are
dime a dozen on the internet nowadays? I mean, the technology is nice, but a
static website is presumably even quicker, and you're still competing with the
likes of Serebii, Bulbapedia, Smogon, the official site, etc.

2\. Why are no Pokemon from generation 6 included in this? Anyone wanting a
Pokedex now is likely to want some information about the new species
introduced in Pokemon X and Y, and your competition likely have this data.

It's a nice enough interface, and the technology seems interesting, just
wondering about the use case.

P.S. As for it being shut down... I doubt it. The article doesn't say the app
is being sold on the Apple store or Google Play, it's a web app that's
accessible for free through the browser. It's just a fancy website, like the
thousands of other Pokedex websites that have been going for years or even
decades.

~~~
sturmen
Disclaimer: I'm a coworker of the author.

1\. this is easy, accessible, broadly compatible. I think it's the fastest way
to get to the data (especially on mobile: no going to store, no waiting to
download, touch-friendly interface)

2\. "soft" technical limitation of the PokéApi. He says it can be worked
around, time permitting. PRs encouraged!

As far as use cases go, I think it's common to want a Pokédex of some sort
when playing the games. As the existence of this blog post illustrates, this
particular one was a case study in web technology first with a fun theme
rather than a grand attempt at market domination.

~~~
scrollaway
2c of UX: You should bind the escape key to close the detail views as they
appear like windows.

~~~
roryokane
Posted as a GitHub issue:
[https://github.com/nolanlawson/pokedex.org/issues/10](https://github.com/nolanlawson/pokedex.org/issues/10)

------
unimpressive
It's nice, but you should have used Veekun's data:
[https://github.com/veekun/pokedex/wiki/Getting-
Data](https://github.com/veekun/pokedex/wiki/Getting-Data)

~~~
80x25
Looks like pokeapi does use Veekun's data:
[http://pokeapi.co/about/](http://pokeapi.co/about/)

------
Zarel
I once made a Pokédex page for Pokémon Showdown, but I never really got around
to promoting it:

[http://pokemonshowdown.com/dex/](http://pokemonshowdown.com/dex/)

It's a similar idea to yours, in terms of making it modern, although I never
got around to making it work offline, but it might be interesting to compare
how they're similar and how they differ.

Maybe if there's interest, I should put its source up on GitHub and maybe
write up some details of how I wrote it.

------
seccess
This is super cool and fast, I'm impressed. Thought I would note, it looks
like the catch rates of all the pokemon all incorrectly display 0%.

~~~
nolanl
Thanks! I totally failed to notice that, but I've filed an issue now:
[https://github.com/nolanlawson/pokedex.org/issues/9](https://github.com/nolanlawson/pokedex.org/issues/9)

------
tjohns
For some reason this blog post is using 100% of my CPU while it's sitting idle
in the background. Really odd for something that's just static text. Any idea
what's going on here?

(Ironically, the actual demo site (pokedex.org) seems to be well behaved in
comparison, using ~0% of my CPU, even though it's much more complex.)

~~~
nolanl
Hm, that might be due to the autoloop <video>s I have in there (which are
great for illustrating the animations, but may be a bit indulgent). Which
browser are you on?

~~~
tjohns
Chrome 46 on MacOS.

And I think you're right. I just removed the loop attribute from all the
<video> tags, and CPU usage quickly dropped back down to normal.

------
mmichuda
Anyone interested in PokeHub.com ? I've always wanted to do something cool
with it! Mark @ TextHub.com

------
shultays
Not sure if it is intended or not. When I click a pokemon, new background
spawns from an unrelated point and stretches to fit screen. pressing back
button stretches background back to frame of pokemon in list correctly. It
looks buggy and not uniform.

chrome 46.0.2490.86 m & windows 8

------
Andrex
Would be great if this used Material Design Lite
([http://getmdl.io](http://getmdl.io)), not sure if that would bloat things
too much but it would get it super close to "native" feeling on Android.

------
danappelxx
Technology wise this is really neat but it's very slow on my iPhone 6. I know
it's targeted towards androids (at least, that's the impression I got) but it
was definitely not the snappy 60 fps that was promised.

------
lbotos
Anyone able to open in on an iPhone 4s? I know I know... it's old, but it
legit gave me a warning I've never seen before "This page had a problem so
it's been automatically reloaded"

------
verusfossa
From the anime, the Pokedex actually speaking the description was always
immersive. Maybe some client side TTS library could be built into this.

------
wodenokoto
Scrolling is absolutely terrible on iPhone 4s with ios9.

No inertia or what it is you call it when it continues scrolling a little.

------
NicoJuicy
Perhaps this can add some hype to the augmented reality pokemon game that is
coming. It's a cooperation with Niantic ( Originally from Google, they created
Ingress ).

More information about it here: [http://www.pokemon.com/us/pokemon-video-
games/pokemon-go/](http://www.pokemon.com/us/pokemon-video-games/pokemon-go/)

Love the techstack for sure! Super sweet

------
prezjordan
Phenomenal write-up. I'm excited to spend the next few weeks really digging
into some of these ideas.

------
voltagex_
Does stuttering in Chrome for Android on a Nexus 5 count as a bug?

