Dina

Dina is the next-generation newsroom system, taking full advantage of modern web technologies to improve editorial workflows.

Professional Work Experience

This was my first dive into big-scale applications. At first, the size and complexity of the app were intimidating, but I soon got the hang of it. Our team was determined to tackle challenges and find new solutions, making things easier for journalists and editors. We introduced a complete solution for planning and publishing content, which made the whole process smoother.

Technological Landscape

Our infrastructure revolved around a cloud-native, serverless architecture. But most of our energy went into frontend development. Consequently, a significant portion of our solutions needed extensive frontend work, requiring a lot of optimization owing to the sheer scale of the application.

Technology Stack

In our pursuit of excellence, we leveraged a diverse array of libraries and solutions sourced from online platforms. Some of the frequently employed tools include:

Challenges & Solutions

• Atomic State Management: My very first challenge was to convert most of the context-based state into atomic state. I used Jotai for this, along with Jotai Molecules. By combining both, I was able to solve state management issues that required scope-based solutions or single responsibility state. As a result, we were able to significantly reduce unnecessary re-renders, greatly boosting the performance of the entire application. I've also written a blog about how to get started with Jotai and Jotai Molecule – check it out here (opens in a new tab).

• Custom Script Editor: I was given the task to build a custom editor for journalists to write scripts, which would be used by news presenters. Although we already had a complex editor in use throughout our application, this particular requirement called for a different solution. I had to calculate the timing information (script duration) based on the host's reading speed and utilize color codes to differentiate between segments to be read aloud and support text to be ignored. Additionally, I had to create and support custom blocks within the editor. It was an intriguing task that allowed me to delve deep into Slate js.

• Story Layout Rebuild: One of the most significant and impactful tasks I've undertaken was rebuilding the entire story layout. During this time, we introduced TypeScript to our application. While the process was challenging, it ultimately led to a more secure, less buggy, and responsive view of the story. The most challenging part was converting all the queries and mutations to TypeScript without disrupting existing workflows. Fortunately, I managed to complete this task without breaking a single workflow throughout the entire migration process. Additionally, I made many improvements to existing workflows, streamlined processes, and removed unnecessary calculations, resulting in a faster and better user experience.

• Arabic Text Support: One of the most interesting tasks I encountered was the need to support Arabic texts in the app. At that time, we had acquired a significant Middle Eastern customer, and for their requirements, we had to provide support for displaying and generating PDFs with Arabic texts.

  Displaying Arabic texts in the app was relatively straightforward, as most modern browsers already support it with minimal configuration. However, we faced a significant challenge with PDF generation because none of the existing PDF maker libraries supported Arabic text properly, even with custom configurations. We had a PDF generator in the backend, but it couldn't handle Arabic text as needed.

  The specific issue was that we could print single-line Arabic text correctly by reversing the words and adjusting the font, but when it came to printing multiline paragraphs, the lines appeared in reverse order. After extensive research, and I looked all over the internet and found that it was a very common problem and nobody had a solution. There were solutions but they're written in C/C++/Java, but not for JavaScript.

  That's when I came across a workaround that required us to implement PDF generation functionalities on the frontend. The solution involved wrapping the entire text container in a flex container, then splitting the text into sentences, each wrapped with the same component. Finally, we applied a flex direction of 'row-reverse' to the container. It turned out to be a relatively simple solution to a very complex problem.

• Tab Overhaul: We initially used in-app tabs to enable users to work on multiple stories, but due to performance issues, there was a limit of a maximum of four tabs. I undertook a complete overhaul of the tabs section, which now allows users to open an infinite number of tabs while maintaining peak performance. This redesign includes drag-and-drop functionality, faster tab switching, and an overall improved user experience, providing a place to manage all open tabs.

• Other Noteworthy Tasks:

  • Enabling the date-time picker to select ranges and support input fields
  • Reducing the load in MAM integration
  • Asset management
  • Moving business logics into custom hooks

Website (opens in a new tab)

© Shamim Fahad, 2024