Pokedex.org: a progressive webapp for Pokémon fans
pocketjavascript.comAs 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.
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.
> 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?
Author of MUI here - It's awesome to see Pokedex on HN! Pokedex uses the MUI CSS framework to great effect. We put a lot of work into making the library small and light and we'd love to see more developers take it for a spin so please try it out for your next project. https://www.muicss.com
Granted it's a very different beast, but this site puts the native Slack Android app to shame. Smooth like butter. I'm not bitter at all. Especially not bitter after I used the iOS Slack App. Okay, maybe a little.
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 :(
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.
Thanks for the response! Firefox definitely has some speed issues (FirefoxOS included), but I haven't diagnosed it yet. Chrome on Android is the current "best" experience.
As for the back button, yeah, I need to add routing: https://github.com/nolanlawson/pokedex.org/issues/2
Very much so.
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.
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/
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), 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.
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.
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
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 :)
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.
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.
I got the impression that they were doing this to show off the tech, and the Pokemon angle was just because they needed a well-known, medium-sized corpus of data to work with. They even said "it's the perfect target for an ambitious web application," implying that the topic was second to the tech.
There's not many topics that fit the bill, and this is way more intriguing than a list of US Presidents or UN Countries.
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.
2c of UX: You should bind the escape key to close the detail views as they appear like windows.
Posted as a GitHub issue: https://github.com/nolanlawson/pokedex.org/issues/10
Author here. You hit the nail on the head. :)
Found the true Pokemon fan in the thread. Technical details be damned, I want more Pokemon.
It's nice, but you should have used Veekun's data: https://github.com/veekun/pokedex/wiki/Getting-Data
Looks like pokeapi does use Veekun's data: http://pokeapi.co/about/
I once made a Pokédex page for Pokémon Showdown, but I never really got around to promoting it:
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.
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%.
Thanks! I totally failed to notice that, but I've filed an issue now: https://github.com/nolanlawson/pokedex.org/issues/9
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.)
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?
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.
Anyone interested in PokeHub.com ? I've always wanted to do something cool with it! Mark @ TextHub.com
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
Would be great if this used Material Design Lite (http://getmdl.io), not sure if that would bloat things too much but it would get it super close to "native" feeling on Android.
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.
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"
From the anime, the Pokedex actually speaking the description was always immersive. Maybe some client side TTS library could be built into this.
Scrolling is absolutely terrible on iPhone 4s with ios9.
No inertia or what it is you call it when it continues scrolling a little.
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/
Love the techstack for sure! Super sweet
Phenomenal write-up. I'm excited to spend the next few weeks really digging into some of these ideas.
Does stuttering in Chrome for Android on a Nexus 5 count as a bug?