About Levelup Series: In marking, we are determined to do everything we can to protect our readers from digital damage, write about the processes we have developed and share our work. We are working to develop continuous digital security, to respect reader privacy, to create ethical and responsible user experiences, and to ensure that our site and vehicles are accessible.
In the marking, we use special interactive graphics to show our stories. When I started my internship this summer, one thing I was curious about was the process of creating and integrating these graphics into the content management system (CMS). When I worked for Berkeleyside and even my high school newspaper, I fought to find an elegant solution and discovered that this was a widespread and historical headache in the news industry.
The truth is that CMS, such as WordPress, limits deliberate privatization. The job of a CMS is to provide a simple interface to store and edit structured data. However, special graphs are naturally temporarily and structured.
For the first time for the news room developers, which create special interactions, it can be difficult to know how and where to include them in CMS. Choose the wrong process or place and you will remain a rebellious confusion.
Let’s be philosophy
One aspect of software engineering is the need to exchange in the face of limited resources, as in life. Finding the balance between flexibility and standardization is the essence of software design, and integrating graphics into a CMS is no different.
Think of the images. We want a CMS to be responsible for storing an image and commodity data (subtitle, credit, subtext) and their relationships (stories in which it is included). It is not produced to separate or create the content of the image – left to people, design software and browsers.
The same goes for graphics. We must design a CMS responsible for storing a reference to a graph and commodity data and relationships, but not for the functionality or how the graph is displayed.
However, some engineers who visit some engineers are trying to predict their common use for journalists and to add features to create graphics. inside CMS. This is usually a Sytage task that will completely satisfy anyone because of the uniqueness of special interactions. The fact that the graphics interact with CMS does not mean that CMS should be responsible for everything about them.
The separation of these concerns should not extend to the news room. We want editorial developers to focus on their work without worrying about how their codes can break their product and infrastructure teams. (The truth is that everyone does everything in a smaller team like marking.) After all, we are all responsible for a product, not two different products.
Our process
Before the code editors are opened and local environments are launched, a news room developer will work with editors and journalists to make images for a piece of brainstorming. This usually means reading a draft and notes opportunities for graphics, says the visualization engineer of marking, Joel Eastwood.
The next step is to create models for more complex graphics. Before moving to a program like Adobe XD, they usually start as pencils and paper sketches.
After the structure of the visualization is solved, Joel copies a graphic template developed by various engineers in the marking. Essentially, a static site is a generator and is not particularly visionary; It contains some basic distribution scripts and ready -to -use support for compilation of styles and templates, but does not lock you into a specific method or library.
Biri One of the things I really appreciate about the graphic template here is that it is very open -ended, Jo says Joel.
After the graphic is pushed to Github, it runs the step of creating a Github action and uploads the results into a S3 bucket where we contain our code. We back up every version of the graph, so that if something goes wrong, we can easily return.
In WordPress, we use a seated special areas (ACF) block that list all graphics and backups in our S3 bucket. Since it is a relatively slow process to load graphs from the S3, the templates are capped in the database.
Practical reasons for this system
The graphics in our system are completely self -sufficient. We do not want to justify small, scattered hackers or make changes with a disaster -step effect for a one -time use.
Developers are free to use the tools or libraries they want. Everything that can be packaged, compiled, treated shaken, static, can be analyzed, combined or transferred to HTML, CSS or Javascript files is accepted.
The system only needs to process these three files – the three files that provide almost infinite possibilities. (This web – people simulated all operating systems and everything.)
Our default template has been created to reduce more resource plates so that they can quickly interact with projects without creating projects from scratch at a time. The flexibility of the system means that we can change or create other templates as our team’s tastes and needs develop. For example, I am a great fan of Svelte, a front -end frame built by Rich Harris when popular in the news rooms (and when it is developer in the New York Times.
While working on Blacklight, which is more than a graph, I changed the template to add support for svelte. Since all HTML, CSS and Javascript output, nothing should be changed about our WordPress integration.
Any change in the template is applied only to advancing graphs and each graph uses its own copy of the template available. The auxiliary functions and styles in the template and the global style page of the site at that time are cooked to each graph. The improvements in the template are like adding-Svel-katte and can be easily joined if necessary. After a graph has been created, distributed and published, it should not require continuous care.
As of this article, we have created more than 300 graphics with this system. If we had to fix the errors constantly while making changes to the template and the site, we would have been overwhelmed.
This system allows us to move quickly, include chaos, and prevent chaos in the first place.
Jerome Paulos 2023 was a product in the marking of the article. Blacklight, New Blacklight API and Graphics System. A second -year student in Macalester College.
Credit: Jerome Paulos
Also published here
Photo: UNPASH in Mike Petrucci
