diff --git a/README.md b/README.md index fbbe51e..e348089 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,25 @@ A C&P example which does the dates for you: hugo new posts/$(date +%Y)/$(date +%m)/$(date +%d)/my-post/index.md ``` +Then just change `my-post` to be a cool URL! + +### How do we handle separate sections? + +Right now, via tags: + +```sh ++++ +title = 'How the Puzzmo API handles integrations on a per-game basis' +date = 2024-04-08T12:00:32Z +authors = ["orta"] +tags = ["tech", "api", "plugins"] +theme = "outlook-hayesy-beta" ++++ + +``` + +This post would appear in 3 sections: tech, api and plugins. Which have their own url: https://blog.puzzmo.com/tags/tech/ + ### This blog It uses Hugo as a static site generator, it was chosen because it is is simple to install and run locally and shouldn't break over a very long time period (the Artsy blog [I used to write on](https://artsy.github.io/blog/2019/05/03/ortas-best-of/) once or twice a month was Jekyll and required a lot of custom work to get useful features but those eventually started slowing the system down and getting ruby set up is a pain). diff --git a/content/posts/2023/12/22/q4-changelog/index.md b/content/posts/2023/12/22/q4-changelog/index.md deleted file mode 100644 index 00edc00..0000000 --- a/content/posts/2023/12/22/q4-changelog/index.md +++ /dev/null @@ -1,195 +0,0 @@ -+++ -title = 'Puzzmo v1 tech deep-dive' -date = 2024-04-08T12:56:32Z -authors = ["orta"] -tags = ["tech", "launch"] -theme = "outlook-hayesy-beta" -draft = true -+++ - -This post is trying to do a lot. There are a few ways which we split Puzzmo internally - both technically and culturally. For this post, I'm mainly going to be concentrating on "Puzzmo" the system, e.g. the bits which power game features like the website, leaderboards, scoring systems, groups, servers and that sort of thing. Internally, we generally call it either "App" _(the public facing website)_ or "API" _(the servers powering the website)_ stuff. - -This conceptual framing kinda defines itself as not being "games" stuff like _"We changed Wordbind to use two words"_ or _"We used Redux Toolkit"_, the hows and whys for those sorts of things are not really my story to tell, and I have enough on my plate trying to keep on top of the technical architecture for Puzzmo. - -I'd like to try and give myself a bit of a look back at what we shipped back in November 2023 when Puzzmo first became publicly available. As I finish this writeup (started in December) in April, we're starting to look at shipping some of our first major systemic changes and it'd be good to have something which reminds us where we were. - -![A picture of the main Puzzmo figma file](puzzmo-figma.png) - -### What did it take to ship Puzzmo? - -We started off with a small jpg [and a general plan](https://www.youtube.com/watch?v=68TGvXlSSVY), and turned it into that figma above over the course of two years. We were in a bit of a strange position as a mix of "games" and "app" culturally, as well as being a tech startup I guess. This meant we could kind of pick-and-choose ideas from all of those cultures. - -I don't think we did a good job of either being a "lean product" nor a "minimum viable product", but we had a pretty strong idea of what we wanted to build and where the edges probably lay. Somewhere after the six months, we had a [really solid](./puzzmo-today-sept-2022.png) [vertical slice](./puzzmo-games-sept-2022.png) of what Puzzmo would be. We had folks playing daily, and you could see the skeleton of the whole thing pretty quickly. - -### How did we launch? - -I guess this is as good a starting point as any. We launched puzzmo.com and what we shipped was a process where you needed to solve a puzzle within a certain time-frame to get an invite into the main site. Once you were in the main site, you had to create an account and you had full access to Puzzmo. This process lasted about a month, while we bug-fixed the app with those users and prepared for the public launch which included partner sub-sites. - -#### launch.puzzmo.com - -The launch site we built as a separate website, on a separate domain. Keeping it there moved out complexity in the main app and allowed us to try a different technique of writing websites (next.js) than our current strategy for the app (described later) - -We based the launch website based on a mix of one of our first strategies for "launching" Puzzmo: start by iterating through the games we have mixed with some ideas for ensuring we don't overwhelm our barely-load-tested servers. This meant creating a mix of only allowing 500 invites a day though the launch system, and then using the postal service to add some lag for American users. - -![Puzzmo Launch site](launch-site.png) - -This did mean for the first week or so, it was full of europeans who didn't get physical mail, which made for some interesting discussions on the Crossword's Americanness. - -During the launch period we offered lifetime accounts for Puzzmo. - -#### Iframe Embeds - -For games which don't require a virtual keyboard on mobile, we felt we could do a good job of making "puzzle previews" which can be embedded [inside articles](https://www.theverge.com/23929222/puzzmo-newspaper-games-crossword-zach-gage) or on blog posts, for example here it is in The Verge: - -![The Verge embedding Puzzmo](embed.png) - -The iframe embeds are a separate games runtime from our main application, it has less overhead and less features overall - but it's not supposed to be able to do so much anyway as they act more like a preview. This gave us a way to "show, not tell" when talking about Puzzmo to the press. - -### App - -Hooo boy, ~25 screens, roughly 70k LOC and a whole world of spit-shine. The majority of it wrote by two folks (_Saman & I_). The app itself is largely a Relay application built in React but it also talks via a websocket to our multiplayer/social side making state management non-trivial. - -We do quite a lot of work in the application in terms of having layouts which differ on mobile vs desktop, which causes some interesting tension inside the codebase with state also. This approach is complex, but reviews of Puzzmo have often called it "native-like" which is high praise for a project based on web-tech. - -It's likely that the choice of using React Native Web via Expo at the start made this a lot more likely to happen. It also gave us a way to bet on having a native-like experience inside the app when we get Puzzmo on app stores also. This decision is something we've started to roll back on though, as the number of legally necessary third party systems and policy systems start to make maintaining one codebase across many platforms (each web browser, iOS and Android.) far less compelling in terms of inherent complexity for a small team. - -We host the app on Vercel, which is treated as effectively a SPA bundle (like you would for Create React App or Vite) which has gone pretty well. - -### API - -The API for this app is a pretty traditional RedwoodJS app, with a reasonable amount of built-in features replaced or dropped. The API is roughly 85k LOC mostly written by one person (_your truly_), and provides a GraphQL interface to the app and an admin dashboard. - -A Redwood app provides both APIs and a web interface, we use the web parts of RedwoodJS for an admin dashboard we call "Studio." Studio powers all of the admin tools for managing dailies, puzzles, iframe embeds and offers a "GitHub for Crosswords" which is used to handle editing, reviewing and fact checking every crossword which is put on the daily. This clocks in at roughly 100k LOC, though a lot of it comes from our templating systems. We use react-bootstrap for the majority of the user interface, which is truly a "no-frills get stuff done" framework for writing reasonable code fast. - -My opinions have a roughly 50% overlap on things that Redwood provides that we want, vs decisions they made which I don't really agree with. That number used to be higher, as they look to be prioritising the web parts over the API parts of Redwood in a way that means we need to start being careful about the future of the API's foundations. - -We host the API on Render, which occasionally has gone down on us, but not enough to warrant being an issue. Render has a great set of tools for building server-driven apps - we use a lot of their features. - -![A screenshot of our Render Dashboard](render.png) - -### Games - -Heyyy, I thought we were defining this as not being about games! Well, I think the technical architecture is at least worth a mention. First up, we should answer to _"how do we run a game?"_ - -To run a game, we have a embedded game runner which communicates to an external system via JSON messages. For the app, we boot the game runner up inside an `