Research integration of Ditto content service with GitHub / .po language files

[thekaveman]

From @srhhnry:

I've been doing some thinking about how the text is managed for Benefits--lately, it's been pretty tedious trying to design the look of a page and then update google sheets before syncing back to figma. So I did some hunting around and found a plugin called Ditto: https://www.dittowords.com/

Essentially it's a content management system that sync to Figma (including, blessedly, previews) and also to Github, and to .csv sheets for content localization. Within the app there are tools like components and variations. For example, /eligibility_start copy could be a "component" with variations for Older Adult, Veterans, etc. Here's the dev side of things.

I tested the plugin out and it's pretty seamless. It maintained my formatting after syncing even when editing from the browser tool... Big question: Is this something that could work with our current setup on GitHub?

Acceptance Criteria

• [ ] Determine if/how Ditto integrates with GitHub and specifically our .po files
• [ ] Make recommendation for using Ditto to manage app content within GitHub

Additional context

• Ditto demo
• Ditto dev docs
• Current Benefits copy delivery practice

[machikoyasuda]

Conclusion: I don't think we should or need to integrate Ditto with our GitHub/translation process just yet. But we can in the future, integrating Ditto with CrowdIn (a translation tool that iBabbleOn, our contractor, uses). For this next sprint, I think we can use Ditto to export a CSV into the existing spreadsheet and use the same process of developers copy-pasting text from spreadsheet into PO files.

How we could use Ditto for the CalFresh sprint:

• Export the English language strings as CSV. It includes a link to the Figma screen the copy is on, which we were doing manually before. This will save us time.

  

• Upload this CSV as a new tab into the spreadsheet we currently have been using.

• Send the spreadsheet to iBabbleOn

• Developers manually input new text.

During the sprint

English language flow

• Developers note where there are issues with the way Ditto formats or divides up copy (like link URLs, unordered lists, ordered lists, any other peculiar formatting).
• Bring these issues back to Sarah to see if it's something she can fix from her end (like a bulleted unordered list - the strings should ideally all come in separately).
• Developers determine what still needs to be manually coded (like link URLs I think.. would have to still be manually done).

Spanish language flow

• Wait for spreadsheet update from iBabbleOn
• Developers to note any issues

Future sprint refactor/improvement options

Integrating both English and Spanish language flows: Ditto -> CrowdIn -> GitHub

• Ditto has a CrowdIn integration. iBabbleOn also integrates with CrowdIn. And CrowdIn can send pull requests to GitHub to update PO files.
• https://store.crowdin.com/dittowords
• https://www.ibabbleon.com/crowdin.html
• CrowdIn pricing: Free for open source projects
• Note: This workflow works best when the English language PO file is done, and then we want to get iBabbleOn to translate the English-language strings in the Spanish file into Spanish. This would work better with how we develop new flows or components. Developers would code the components/new pages first, and enter in the English language copy. Developers put the copy up as "TO TRANSLATE" into the Spanish files. After the new screens are complete, we send iBabbleOn a request to translate the "TO TRANSLATE" strings in the PO files to be updated via CrowdIn.
• In summary, this future potential integration would lessen the amount of work it takes developers to copy and paste Spanish language copy into the PO file. But it would not automate the process of creating new English language copy.

Ditto to GitHub

I think this might be harder because of the way we have our PO files set up right now, where we got rid of the unique ID for every string. Ditto assigns an ID for every string, which could then allow us to key that copy in for each ID and use some code/integration to get Ditto to export a file that updates strings for each ID. But that would require us to go back to create unique IDs for every string. Kinda cumbersome.

• No matter what, for the English language PO file, we'll have to still go through the copy to add links, replace variables. That will not be automated with Ditto / GitHub integration.

[thekaveman]

An extra note on the Ditto <> CrowdIn integration (or any integration with Ditto, it seems): this requires the Developer add-on for the Ditto workspace, in order to interact with the Ditto APIs.

• https://store.crowdin.com/dittowords#auto-content-synchronization
• https://www.dittowords.com/docs/ditto-developer-mode

Hence we should factor this into any cost proposal cc @indexing @srhhnry

[srhhnry]

So, correct me if I'm wrong, but it looks like we wouldn't need the Developer add-on to continue business as usual (i.e. export to CSV, content localization process, integrate back into github), and taking advantage of the Github integration requires reconfiguring the .po files which is not something that would be done absent this integration.

From the design side of things, there's plenty to work with in Ditto that doesn't require an upgrade. I don't think we need commenter seats (e.g. giving agencies or other stakeholders direct access to copy), nor do I think we need more the ability to create more than 20 components for the foreseeable future.

This leads me to the suggestion that we only upgrade to a paid version of the service after this sprint, or if and when we decided to work on the future sprint refactors @machikoyasuda described.

@thekaveman Do we need to make a decision about tool usage immediately--as in, are we still in budget discussions for the upcoming year? Or can we wait and see, and potentially request budget a few sprints from now after auditioning the product?

[machikoyasuda]

I think we do need Developer Add-On to export the copy to CSV:

The Starter tier doesn't have export to CSV:

But I don't really get it cos I was able to do it when I tested the app for free(!?!?)

[machikoyasuda]

https://www.dittowords.com/docs/exporting-copy

[srhhnry]

I was very surprised I could export too! I’ll dig more into whatever draft mode is, as I haven’t seen a functional difference yet.

[image: logo] http://calitp.org/Sarah Henry UX Designer, California Integrated Mobility California Department of Transportation

calitp.org http://calitp.org/ | 954.937.8894 Visit CAMobilityMarketplace.org http://camobilitymarketplace.org/ for a catalog of code-compliant products and services for Transit Providers. Subscribe to our http://www.placeandpage.la/cal-itp_emlsig/cal-itp_sigblock_2.htmlMobility Newsletter https://lp.constantcontactpages.com/su/eLbtFoE/calitp?source_id=a41b99cd-7f28-4be8-a286-f9e75fc7bbce&source_type=em&c= for the latest Cal-ITP and Caltrans updates.

On Wed, Feb 21, 2024 at 5:18 PM machiko @.***> wrote:

https://www.dittowords.com/docs/exporting-copy image.png (view on web) https://github.com/cal-itp/benefits/assets/3673236/c4344910-bf39-4e64-8557-b74c16e2289c

— Reply to this email directly, view it on GitHub https://github.com/cal-itp/benefits/issues/1897#issuecomment-1958119651, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABJE6HGWEBQH2IS4VWAQ7LDYUZXCTAVCNFSM6AAAAABDMXGEK2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJYGEYTSNRVGE . You are receiving this because you were mentioned.Message ID: @.***>

[srhhnry]

I'll check in with the support team tomorrow (they're offline right now), but I don't see why we would have the ability to export to CSV right now unless it's some 30 day demo thing.

[srhhnry]

Yeah, I'm going to guess it's some intro mode. I just got an email saying that developer integrations have just been enabled for the workspace. More to come tomorrow.

[thekaveman]

@srhhnry is talking to Ditto about pricing/plan details on Tuesday 2/27

[srhhnry]

Updates from Ditto:

Ditto pricing is bound by number of seats and number of components, so we have access to all the features, including both the CSV export and the developer plugin, as long as we don't need to create more than 20 components or add more than 4 people. According to the support person I spoke with all roads in Ditto lead to components, but there are some work arounds (e.g. pushing changes to similar text at the same time, sort of like a find and replace all). I imagine we'll discover over time if the components are useful for more than just organizing copy.

So I don't think we'll need more than 4 seats anytime soon, but if we wanted to use the component feature more aggressively then the monthly pricing would likely be as follows:

• $65 for developer seat
• $15 for one editor seat
• $20 for two commenter seats

So $100 per month, or $1200 for the year.

@thekaveman are we being locked into our yearly budget with Xentrans anytime soon or do we have time to decide if we need the paid tier?

[thekaveman]

I think we can mark this as complete for now.

Machiko provided an overview of the GitHub integration and recommendations that we do not pursue that option at this time.

@srhhnry has engaged with Ditto and will lead the effort to integrate Ditto into Figma and the wider copy development process in the coming sprints.

[indexing]

@thekaveman @srhhnry Our translators use Crowdin to do translation. If we proceed with Ditto, we will need to setup this integration. https://store.crowdin.com/dittowords