Get Traction with Interaction: Modeling Interactive Content with React and Contentful

486ce52b7074a80a0ef6542f863aeaee?s=47 Jesse Pinho
February 12, 2019

Get Traction with Interaction: Modeling Interactive Content with React and Contentful

How do we make content come to life in our readers' hands with React? In this talk, I describe the approach we use at Clue to render interactive content in the middle of text-based articles on our React-based content site, helloclue.com, in a way similar to the interactive pieces publications such as The New York Times and the New Yorker have been developing. I cover the content model, the code, and the production process Clue uses to create interactive content that works for both our developers and our writers.

486ce52b7074a80a0ef6542f863aeaee?s=128

Jesse Pinho

February 12, 2019
Tweet

Transcript

  1. Jesse Pinho • @jessepinho • jessepinho.com

  2. Jesse Pinho • @jessepinho • jessepinho.com

  3. Jesse Pinho • @jessepinho • jessepinho.com

  4. PERIODS Jesse Pinho • @jessepinho • jessepinho.com

  5. PERIODS BIOLOGY Jesse Pinho • @jessepinho • jessepinho.com

  6. PERIODS BIOLOGY ANATOMY Jesse Pinho • @jessepinho • jessepinho.com

  7. Jesse Pinho • @jessepinho • jessepinho.com

  8. Jesse Pinho • @jessepinho • jessepinho.com

  9. Jesse Pinho • @jessepinho • jessepinho.com

  10. Jesse Pinho • @jessepinho • jessepinho.com

  11. Jesse Pinho • @jessepinho • jessepinho.com

  12. Jesse Pinho • @jessepinho • jessepinho.com

  13. None
  14. Jesse Pinho • @jessepinho • jessepinho.com

  15. Jesse Pinho • @jessepinho • jessepinho.com

  16. Jesse Pinho • @jessepinho • jessepinho.com

  17. Jesse Pinho • @jessepinho • jessepinho.com

  18. Writers can make changes to text without waiting for a

    code deploy. Jesse Pinho • @jessepinho • jessepinho.com
  19. Content can be translated using Contentful's existing localization functionality. Jesse

    Pinho • @jessepinho • jessepinho.com
  20. The setup isn't brittle. Jesse Pinho • @jessepinho • jessepinho.com

  21. Writers don't have to deal with code. Jesse Pinho •

    @jessepinho • jessepinho.com
  22. Writers are able to preview their changes and get quick

    feedback. Jesse Pinho • @jessepinho • jessepinho.com
  23. https://nyti.ms/2SAtg3V Jesse Pinho • @jessepinho • jessepinho.com

  24. Jesse Pinho • @jessepinho • jessepinho.com

  25. Jesse Pinho • @jessepinho • jessepinho.com

  26. Jesse Pinho • @jessepinho • jessepinho.com

  27. Jesse Pinho • @jessepinho • jessepinho.com

  28. http://bit.ly/contentful-microcopy Jesse Pinho • @jessepinho • jessepinho.com

  29. Jesse Pinho • @jessepinho • jessepinho.com

  30. storybynumbers/rich-text-to-react Jesse Pinho • @jessepinho • jessepinho.com

  31. Jesse Pinho • @jessepinho • jessepinho.com

  32. Jesse Pinho • @jessepinho • jessepinho.com

  33. Jesse Pinho • @jessepinho • jessepinho.com

  34. Jesse Pinho • @jessepinho • jessepinho.com

  35. Jesse Pinho • @jessepinho • jessepinho.com

  36. Jesse Pinho • @jessepinho • jessepinho.com

  37. Jesse Pinho • @jessepinho • jessepinho.com

  38. Jesse Pinho • @jessepinho • jessepinho.com

  39. Jesse Pinho • @jessepinho • jessepinho.com

  40. 1. rich-text-to-react converts nodes to corresponding React components. 2. If

    a node is of type CustomBlock, the CustomBlock React component is loaded and rendered. 3. The CustomBlock loads a component from its registry and renders it. Jesse Pinho • @jessepinho • jessepinho.com
  41. Jesse Pinho • @jessepinho • jessepinho.com

  42. Jesse Pinho • @jessepinho • jessepinho.com

  43. Jesse Pinho • @jessepinho • jessepinho.com

  44. Jesse Pinho • @jessepinho • jessepinho.com

  45. Jesse Pinho • @jessepinho • jessepinho.com

  46. Jesse Pinho • @jessepinho • jessepinho.com

  47. Jesse Pinho • @jessepinho • jessepinho.com

  48. Jesse Pinho • @jessepinho • jessepinho.com

  49. Goals 1. ✅ Writers can make changes to text without

    waiting for a code deploy. 2. ✅ Content can be translated using Contentful's existing localization functionality. 3. " The setup isn't brittle. 4. " Writers don't have to deal with code. 5. ✅ Writers are able to preview their changes and get quick feedback. Jesse Pinho • @jessepinho • jessepinho.com
  50. Next steps 1. Better UI for editing microcopy 2. Tooling

    for managing translation of microcopy 3. Feedback from you! Jesse Pinho • @jessepinho • jessepinho.com
  51. Twitter: @jessepinho GitHub: @jessepinho Web: jessepinho.com helloclue.com/jobs