nolanlawson / pokedex.org

Offline-capable Pokédex web site (unmaintained)

Pokedex.org

An index of Pokémon, built as a client-side JavaScript webapp. Powered by ServiceWorker, PouchDB, virtual-dom, and web workers.

See the Introducing Pokedex.org blog post for details on the architecture.

Developing

First, be sure to install dependencies:

npm install

Then start a dev server on localhost:9000:

npm run serve

To disable ServiceWorker:

NODE_ENV=testing npm run serve

Building

npm run build

This will write files to www/.

Bumping the ServiceWorker version

The ServiceWorker version is tied to the package.json version. So you can bump it by simply doing:

npm version patch

Building up the database via PokéAPI

Note: you don't need to build up the database to start developing; these are just steps to generate the database files (src/assets/*.txt) from scratch.

This site uses data provided by PokéAPI. To build up the database, you'll need to run:

./node_modules/.bin/babel-node bin/build-monsters-database.js
./node_modules/.bin/babel-node bin/build-descriptions-database.js
./node_modules/.bin/babel-node ... # there are several of these

Some of the build scripts pull from src/js/shared/data (which contains some files that I had to build myself by scraping Bulbapedia), whereas the main ones pull from the live PokeAPI. (I never got the local PokeAPI working correctly, so I just pulled from the remote.)

Debugging

You can add ?highPerfAnims=1 to the URL to force high-performance animations to run. (Normally they are disabled for Firefox and Android <5.)

Credits

Thanks to PokeAPI and Bulbapedia for the Pokémon data, and of course to Nintendo, Game Freak, and The Pokémon Company for making such an awesome series of games.

pokedex.org's Issues

Back button not supported

On an Android device, pressing the OS back button navigates to the previous website in Chrome, not the previous page on pokedex.org

Broken back link

Noticed this in Safari 9.0.1. Might be related to issue #7

1. Open up a detail view.
2. Click on the background outside the detail view.
3. Scroll all the way down the page.
4. Click the go back arrow link.
5. Nothing happens and you get the following error in the console:

TypeError: null is not an object (evaluating 't.parentElement') main.js:1:9462

Find (Ctrl+F) is broken

I understand that only Pokémon that are within a certain boundary of the viewport are rendered for perfomance purposes - however, this means that you cannot use Find to search for the ones that happen to be unloaded (which I would expect to work since it's a single page of results).

There are two ways I see to fix this:

1. Override Ctrl+F to focus the search bar (but don't override it when there is a Pokémon open)
2. Rather than completely unloading Pokémon that are outside the viewport, render a minimal version (such as just the name)

Add -webkit-overflow-scrolling: touch to fix momentum scrolling on iOS

Per https://twitter.com/HenrikJoreteg/status/669034858358771712 and https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Visual irregularity in back button on Chrome dev

Reported on Twitter: https://twitter.com/_nikhildev/status/769534146439892994

No Generation 6 And 7 Pokemon info

Was Wondering When Will Generation 6 And 7 Pokemon And Their Related Information

More Pokemon please!

The Pokedex has grown and could you please update your website so it's up-to-date?

Gen VI Pokémon not included.

It seems PokéAPI has the data for Gen VI Pokémon, but they aren't included on pokedex.org.

Strength/weaknesses are wrong

This may require a database fix. Reported on Twitter:

Hi, I have got some feedback for your excellent work on https://t.co/yLcd9ETTDo. Unfortunately you did not consider that by default Ground moves do not hit Flying type or Fighting does not hit Ghost. Neither did you respect that Eelektross has no weaknesses because of Levitate.

iOS can scroll main list while detail view is visible

Reported on Twitter: https://twitter.com/djbriane/status/669232271505817600?s=09

Use feature detection instead of user-agent to determine if IDB+WebWorker supported

I believe this is currently breaking in the Android 4.4 stock browser because that version of Chromium didn't have IDB in a Web Worker.

Store images using Cache API

Hi,
Did you consider using the Cache API to enable streaming and avoid blob conversion required to deliver images from IndexedDB?
reference: https://classroom.udacity.com/courses/ud899/lessons/6381510082/concepts/63774101800923

Why do you use a service worker and a web worker?

Why not just do everything in the service worker? That would reduce the number of components you have to worry about, and multiple tabs could share the same worker. It might not matter too much here, but imagine if you had some user input that resulted in updating the database... it'd be nice if it was all using one cache in one service worker so multiple tabs would be consistent, right?

My apologies for abusing this issue tracker to get your advice :)

Discussion: Cache width/height requests

Correct me if I am wrong on any of the below.

For example, scrollingList.js -> binarySearchForFirstInvisibleChild() will request the window.innerHeight every call. Even though the scroll event is denounced, this still causes un-necessary re-flows. We should only request window.innerHeight if the denounced resize event has finished.

We should also obviously share this cache with all other functions that require window.innerHeight or any other properties/functions that cause re-flows.

I'm happy to take a crack at this.

autoprefixer is not prefixing your CSS rules even when set to..

Given this patch -- I was expecting to see all your transform rules with the -webkit prefix.. however someone is letting us down here.

To get UC browser going we will need to add prefixing in.

Description for Mew showing as Mewtwo

Pokedex.org description for Mew is showing MewTwo's description.

Description for Mew
https://pokeapi.co/api/v1/description/2475/

Description for Mewtwo
https://pokeapi.co/api/v1/description/2459/

npm run serve fails

On windows 10, latest node. Running npm run serve, also tried running npm run serve after npm install

{lamb} npm run serve                                                      

[email protected] serve C:\xampp\htdocs\pokedex.org                         
babel-node bin/dev-server.js
events.js:141                                                             
hrow er; // Unhandled 'error' event                                
Error: spawn ../node_modules/.bin/pouchdb-server ENOENT                   
    at exports._errnoException (util.js:874:11)                           
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:
    at onErrorNT (internal/child_process.js:344:16)                       
    at doNTCallback2 (node.js:441:9)                                      
    at process._tickDomainCallback (node.js:396:17)
npm ERR! Windows_NT 10.0.10240                                            
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\Conn
es\\npm\\bin\\npm-cli.js" "run" "serve"                                   
npm ERR! node v4.2.2                                                      
npm ERR! npm  v3.4.1                                                      
npm ERR! code ELIFECYCLE                                                  
npm ERR! [email protected] serve: `babel-node bin/dev-server.js`              
npm ERR! Exit status 1                                                    
npm ERR!                                                                  
npm ERR! Failed at the [email protected] serve script 'babel-node bin/dev-serv
npm ERR! Make sure you have the latest version of node.js and npm installe
npm ERR! If you do, this is most likely a problem with the pokedex package
npm ERR! not with npm itself.                                             
npm ERR! Tell the author that this fails on your system:                  
npm ERR!     babel-node bin/dev-server.js                                  ```  

Android

Hi
[RUssia, my english is very bad]
Ребята. А есть такое приложение для Android? Мне понравилась система на сайте, и я уже привык к её подсказкам (например какие атаки сильнее/слабее) и инструкциям (например на каком уровне покемон обучается новым движениям/ударам).
Я не хочу скачивать какие то "рекламные" приложения созданные школьниками-самоучками.
Прошу вас создать версию для android =))

Menu Icon Invisible

I'm running a super old LG Optimus Select AS730 with Android 4.0, so this may not matter much, but I can't see the menu icon on my phone.

Add routing

A few things that are needed:

1. A URL for each Pokemon, e.g. pokedex.org/001 for bulbasaur
2. Back/forward events handled correctly
3. All of the above working with refresh
4. All of the above working with ServiceWorker

Due to the complexity of using the actual HTML5 History API and therefore needing to duplicate the logic in the client, server, and the ServiceWorker, I would probably prefer to just use good ol' fashioned hashchange events, unless someone can convince me otherwise. (Yes, the URLs will look ugly; but hey, it'll be easy to implement.)

Either Page.js or Ampersand Router look like good candidates for this.

Manual switch for High Performance Animations

Make it possible to switch/force the canRunHighPerfAnims() helper's result, regardless of the browser used (via a query parameter or similar).

Event binding

Hey, I love the app and tech behind it!

One thing that's been bugging me though is how event handlers are being bound. I don't mean this in a bad way, it works perfectly for this app, but for more complicated applications, especially ones that incorporate routing, I think this way of working will rapidly become too hard to manage.

I've been thinking about ways to be able to declare your event handlers on the web worker side. Not being able to serialize functions is obviously a problem but I feel that it might be solvable, even though i haven't really come to a good conclusion. Once I have a proof of concept of what I'm thinking about I'll post it here, but I'm just wondering if this is something that you've been thinking about?

Panel animation blip when mouse plugged in

awesome writeup!

just a small pedantic note, since animation perfection was a main theme here:

If you have a mouse plugged in, chrome will inject a scrollbar (even if you didnt want one). The panel's content does not recognize this during animation. This causes a jump in the content on the panel's animation exit.

I don't expect you to fix this but just another 'gotcha' to add to the "joy of web dev" list.

Interesting error stack in UC browser when going into detail view

stopwatch.js should use console.time()/timeEnd()

if so, you'd get these segments marked up in the Timeline profile.

Image lazy loading doesn't fire on sidebar toggle

If you scroll down the page about half way with the menu open, then close the menu the images that get brought up (because of less rows) don't have their images loaded.

I guess the lazy load needs to fire on sidebar close success.

Bind the Escape key so it closes the detail view

A Hacker News comment by scrollaway (@jleclanche):

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

That is, Esc should be the equivalent of clicking this button in the top-left:

Only spin the spinner while it's visible.

Dunno if this has any perf implications, but there's no reason to have an invisible spinner constantly spinning.

Pokémon sprite gets stuck sometimes

The sprite façade occasionally seems to get stuck, based on reports from users: https://twitter.com/seriemajp/status/669955302230499329

UC Browser compat

Currently doesn't work on UC browser at all. /cc @samccone

Should be able to tap pokemon under evolutions

For example, if I'm on samurott's page and I look at the evolutions, I should be able to tap dewott and go to that pokemons page. I'd be interested in helping out with a pull request for this

Opening / Closing sidebar menu should not require mouse move

I think that when you hover over Pokedex.org it should transition to an icon that represents closing the menu.

That or something that achieves ubiquity throughout the actions.

Swiping away the left hand menu bar should work (?)

I tried swiping away the left menu bar instead of hitting the button. I'm used to this for Android apps but I'm not sure if it's possible to do in a web app.

Swap unicode ☰ for an SVG icon

It doesn't show up properly on some Android devices. Also gotta make sure the size stays consistent with the back button arrow.

Rendering issues in ios 8 (with safari and chrome)

Scroll position is reset when opening pokemon details

Pretty confusing from a user experience perspective to have to scroll back down when going back to the pokemon listing.
This also appears to break the image of the pokemon animating into position.

Add cries

You get the idea, but add in the original cries, not the Gen VI cries.

Updating build scripts

New build scripts are necessary for v2 of PokeAPI, which is mostly incompatible with v1.
I'm thinking about rewriting the scripts to pull straight from the CSVs here. That would remove the dependency on PokeAPI and allow us to clean up the project structure by having all the source data in the same place, instead of storing some data files in src/js/shared/data.

The only foreseeable issue is that the scripts would become considerably more complex because they would have to index everything and then construct the Pokemon objects, instead of getting ready-made objects from the API.

I'll get started on this sometime next week, after I finish final exams.

Catch rates are all 0%

Just realized too late that the PokeAPI data had 0 for all these fields. :( Need to patch the database.

missing xy sprites for zekrom, reshiram, and others

Right now the dex is missing the xy "sprites" for Reshiram, Zekrom--mostly legends unobtainable pre-bank.

Bigger splash screen icon

I noticed that Snapdrop and Voice Memos both have a nice large icon that shows in the splash screen on Chrome for Android. Seems we can have the same if we just add a 384x384 icon:

• https://snapdrop.net/manifest.json
• https://voice-memos.appspot.com/manifest.json

monsters-search-bar is missing a label

Accessibility recommendation from: https://dequeuniversity.com/rules/axe/1.1/label

I think the MUI floating labels would best complement the existing design. I'll work on submitting a pull request.

Search should be more visible

I didn't see the search bar for probably the first 10 times on the site, I think it should be in the purple heading at the top.

Don't know if this has happened to anyone else or my brightness/contrast is way too high.

Add clear button to search bar

At first glance, it seems like the HTML would simply need something like:

<form>
  <div class="mui-textfield">
    <input id="monsters-search-bar" placeholder="Search for Pokémon" type="text"
           spellcheck="false" autocorrect="off" autocomplete="off"/>
    <button type="reset" class="mui-btn mui-btn--flat">X</button>
  </div>
</form>

but then form submission would need to be disabled via JavaScript(?)

Also, I did a quick test just inside Chrome DevTools, and adding the <form> breaks the ability to search 😞 so more investigation is needed.

Show which abilities are hidden

With e.g. Gyarados abilities (Intimidate, Moxie), Moxiee is a hidden one.

This should be shown in some way. Maybe with (hidden) in parenthesis?

How could you open in new window on desktop version?

Hey, I try to write some progressive web app on desktop chrome,
When I open it, my pwa just open in new tab, not like yours,
How could you do? or just give me some precise keyword about it .

Thanks , your app is awesome, I used to compare mine to yours, take your functionality as an reference.

Add gen 7

Sun and Moon generation please! 😄

Replace base64 CSS images with regular sprite PNGs/WEBPs?

I think there may be a clever way to do this without having to download the PNG/WEBP files invidivually (also HTTP2 ought to help here). As is, I believe this is contributing to a startup lag on Chrome and may be the cause of perf issues in Firefox OS.

Poor performance on Firefox for Android

This is something that's bugged me since the start of the project.

On Chrome for Android, the app is virtually indistinguishable from a native app. Scrolling is smooth, animations are crisp, everything looks lovely. Mission accomplished!

On Firefox for Android (or FirefoxOS), though, the scrolling is jerky and the transition animations are slow to start and slow to run. In fact, I had to put in a hack to run the animations in two stages, because otherwise there wasn't even a chance they'd run at 60 FPS.

I tested this on a Nexus 5 (both Lollipop+Firefox and FxOS), a Flame phone (FxOS), and a Nexus 5X (Marshmallow). In all cases I was using Firefox Beta (latest I tested was 44). TBQH the performance is better on a Galaxy Nexus running Chrome Beta, which is sad.

I considered two possible culprits for the slowness, but neither turned out to be correct:

1. The base64-encoded CSS sprites. I thought: maybe this is slower in Firefox than just using regular PNG files? I tried removing these CSS files entirely, though, and the performance was still bad.
2. The number of elements in the list. Even when you filter to create a smaller list (e.g. enter "s" so that it shows all Pokémon whose names start with "s"), the scrolling and animation performance is still bad, even though far fewer DOM elements are in the list.

So what else could it be? I'm not sure whether this is indicative of a perf problem in the app, or in Firefox itself. Regardless, it bums me out, because Firefox for Android is my preferred browser, and my own app doesn't run well on it. :(

/cc @mbrubeck @wanderview @flaki

Apply to be removed from the Bluecoat/K9 blocklist

Content Blocked (content_filter_denied) 
Content Category: "Suspicious"

https://sitereview.bluecoat.com/sitereview.jsp