|Elf M. Sternberg 4c53820b9d DOC: Added a few final thoughts.||1 month ago|
|public||1 month ago|
|src||1 month ago|
|.gitignore||1 month ago|
|CRA-DOC.md||1 month ago|
|Dockerfile||1 month ago|
|ElderScrolling.png||1 month ago|
|LICENSE.md||1 month ago|
|Makefile||1 month ago|
|README.md||1 month ago|
|package.json||1 month ago|
|tsconfig.json||1 month ago|
|yarn.lock||1 month ago|
Don’t you love homework?
The Highspot Coding Challenge. The premise is to display a deck-builder card catalog (such as Magic The Gathering, although in this case it’s Elder Scrolls) made available via a RESTful API. The requirements as set out in the Code Challenge are:
The API includes this note:
NOTE: The Elder Scrolls Legends API is a free, third-party service built by an independent developer; it is not affiliated with Highspot, or with the intellectual property owners of Elder Scrolls Legends. Please help us use it responsibly.
This is a single-page application. The ‘search’ is more of a filter,
?name=<param> to the
/cards API endpoint. To meet the
requirements of the application, the
pageSize=20 argument must be
passed to the endpoint.
Startup seems to be relatively straightforward, and there won’t be anything fancy here: A flexbox will probably do just fine, as will a progressive fill. I’m inclined to not use MaterialUI here; it’s probably overkill. Just an application, with some nice CSS and a decent cache.
For the search feature, we’ll want to go with whatever the API offers, but when clearing the search, let’s go for a fast reload with no data requirements. That’s provide some speed when going back to the basics. I won’t be using the ServiceWorker, as I don’t feel confident enough in my familiarity with it to make it matter.
Also, because I’m a nerd, I can’t start without first picking out a theme: white on black, with a paper texture from my design library desaturated, darkened, and rendered a seamless tile, using the Google ‘Marcellus’ font, which kinda sorta looks Tolkeinesque. Not so sure about the ‘Morpheous’ font for the title, though.
The following are all you need to have installed in order to get started:
Fetch the latest version from the git repository (this repository uses the new “not master” terminology, so it may not be immediately visible until you checkout the ‘canon’ branch), then install any prerequisites.
Assuming you have GNU Make installed:
$ git clone https://git.elfsternberg.com/elf/elder_scrolling $ cd elder_scrolling $ git checkout canon $ make serve
If you do NOT have GNU Make installed:
$ git clone https://git.elfsternberg.com/elf/elder_scrolling $ cd elder_scrolling $ git checkout canon $ yarn $ yarn build $ yarn run http-server build/
In both of the above, the server will be available on port 8080.
To run in dev mode:
$ git clone https://git.elfsternberg.com/elf/elder_scrolling $ cd elder_scrolling $ git checkout canon $ yarn $ yarn server
The server will be available on port 3000.
If you have docker installed, you may run the app this way:
$ git clone https://git.elfsternberg.com/elf/elder_scrolling $ cd elder_scrolling $ git checkout canon $ docker build --tag elderscrolling:1.0 . $ docker run --publish 8080:8080 --name elderscrolling --detach elderscrolling:1.0
The server will be available on port 8080. To stop the docker session, remove it from the server, and clean up your disk space afterward:
$ docker kill elderscrolling $ docker rm elderscrolling $ docker rmi elderscrolling:1.0
Note that this will not remove the node-alpine image on top of which elderscrolling is build.
This was a lot of fun. I don’t know how “cheating” it was to use the react-grid-layout library, or react-modal, but I’m always glad to let the professionals do the work. Working “around” the way hooks really, really want to avoid expensive paints, in order to get the search feature working, was a lesson I know I’ve had before, but it always frustrates me when I come across it.
There are lot of other things that could be done with the app, but this
is “good enough” for now without throwing something like Semantic or
Material at it. It’s possible to search on fields other than
for example, and it would be nifty to be able to, say, see all the
Unique cards, or all the Creature cards, and so forth. That wasn’t in
the requirements, and I’ve given you folks 8 hours already.
That may seem like a lot for such a minor project, but it’s been awhile
since I last worked with React at this level, and it’s also been awhile
since I got Emacs up and running with a proper JSX back-end. The LSP
server is pretty good, but there are still some rough edges. Using
prettier a lot, and setting the code into
strict as much as
possible, was as helpful as always.
I think I’m going to take apart the scrolling library I used. It’s a native JS application with a React wrapper, rather than a full-on React app “written in React,” and I feel that there are lessons inside it I could use.
If I had my druthers, I’d have done a two-stage build of the Dockerfile; one just build the thing, but the second would consist only of the ‘build/’ directory and a static web server that only does fileserving; one thing I dislike strongly about Dockerizing NodeJS (or any big scripting language, like Python or Ruby) is just how much attack surface area those languages carry with them.
But, like I said, I’ve given you folks enough time already.
The Elder Scrolls, The Elder Scrolls: Legends, ZeniMax, Bethesda, Bethesda Softworks and related logos are registered trademarks or trademarks of ZeniMax Media Inc. This product is not produced, endorsed, supported, or affiliated with ZeniMax Media Inc.
The coding challenge itself is probably copyright Highspot.
The fonts are covered by the SIL Open Font License. A copy of that
license can be found in the
All original software, as well as the background images, contained in this repository is copyright Kenneth M. “Elf” Sternberg © 2020, and is licensed with the Mozilla Public License vers. 2.0. A copy of the license file is included in the root folder.