reuters onboarding
graphics department
misc

📚 Tech stack overview

For the next couple of sections, we will go over the tech requirements, tech stack and how to set it up to get going with the Graphics Team Svelte Graphics Kit (a.k.a. the new rig 🔥). This is what you will be using as a starting point for most of your projects. We won’t go into details about how to work with the aforementioned kit here, as you can read the (wonderful) docs over here.

🖥️ Tech Prerequisites

Node and Node version manager

Install Node and a Node Version manager (e.g. NVM or N). You might need different versions of Node for the old and new graphics rig, depending on when you join. The old rig is on v12, while for the new one, using latest stable v16 is good as of Nov 2021. For the current Svelte-based Graphics Kit, check out the detailed requirements in the docs.

Bluprint

Bluprint is our internal templating (project scaffolding) engine. It is similar to degit, but has some extra functionality and a CLI. You can get it and read the docs over at this public repo in the Graphics team repo. You can also get it from npm.

GitHub

There are two separate GitHib repos that you will need access to - the Graphics Team and the TR Org GitHub.

  • The Reuters Graphics GitHub is where various templates, applications and misc code lives. Some of the repos are public.
  • The TR GitHub is where all the published articles live in the end, together with all the other Reuters tech. All of the repos are private.

📝 ArchieML

The Graphics Teams use a technology called ArchieML (read more about it here) as part of its publishing process. It serves as a bridge between the code and the text that goes inside a published project. It allows you to write both code and article body as you normally would, i.e. using a code editor and Google docs, respectively. ArchieML sits on top of Google docs and allows you to create named variables inside a Google docs document, which you can refer to in your code in order to import the relevant text content.

Each new project created using bluprint with the Graphics template automatically instantiates a new ArchieML doc inside the shared team Google Drive and pre-populates it for you with some basic fields.

You can then write the article body directly into this doc, share it with your collaborators and editors, as well as share with reporters and other relevant parties outside the team on a as-needed basis.

Website Preview

It’s possible to preview your WIP Graphics kit-based pages by uploading it to AWS s3. This is as simple as running yarn preview from your project folder.

🤖 RNGS

What is it?

RNGS is the Reuters Graphics server. Essentially, this is where graphics – including standalone graphics as well as whole pieces - are published. From there they reach both clients and the Reuters Graphics website.

It connects to a site called Reuters Connect. You can log into it using the credentials in the team 1password.

There you can see what (yours and others’) published graphs look like when they’re put in front of clients and ready to publish.

What do you need to do to publish on RNGS?

The Graphics Rig is wired into RNGS and essentially obscures a lot of the complexity associated with the publishing process for you. It makes it possible to automatically upload code and graphs to the server. In contrast, what used to happen before was that each piece had to be uploaded manually, including the individual graphs. This still happens on occasion, but mostly when the project only has static assets, e.g. Adobe Illustrator files.

What are embeds and what do clients get?

You will notice in Graphics Kit-based projects, there is a folder called embeds. What goes in there is publishable embed code, e.g. code for publishing an individual graph. What clients can get as an output from RNGS is both the embeddable components and the code behind them.

About the RNGS structure

[This section is WIP – currently just has my raw notes, but need to collect info from that GH issue and update.]

There are different editions which go to different audiences: ‘public’ goes on the website; ‘interactive’ is a live page and then inside of that there is an embeddable version and the code for that view. Note: in closed issues on GH on the graphics kit repo it’s about the publishing structure of the packaging – there is an image of the terminology; Note this is good to put in these docs at some point as well. We call this whole thing a ‘graphics pack’.

Tech Stack Notes

  • In terms of technologies used, historically, the team used libraries like jQuery. React has also been used and might continue to be used for bigger projects with more functionality, such as trackers. In 2021, a new rig using Svelte was introduced.
  • The Adobe suite (Illustrator, InDesign, etc.) is extensively used both for illustrations and graphs.
  • Maps are built in a variety of technologies, which will depend on your use case, level of technical comfort and/or design expertise. QGIS is often used, and edited in Illustrator.
  • New or other technologies/frameworks and libraries are also used by some team member on a as-needed basis.