Jesse Pinho

Talks

Get Traction with Interaction: Modeling Interactive Content with React and Contentful's Rich Text Editor

Contentful FooBar, Berlin

How do we make content come to life in our readers' hands with React?

There is a movement happening among online publications: we're realizing that static text articles aren't enough, and that the future of online content is interactive. But how do we translate code — like React components — into something that can be stored in our headless CMS? And how do we ensure that our writers and translators can update the text portions of interactive content without having to wait for a code deploy?

In this talk, I'll describe the approach we're using at Clue to render interactive content in the middle of text-based articles on our React-based content site, helloclue.com. We'll cover the content model, the code, and the production process we use to create interactive content that works for both our developers and our writers.

Resources

Screenshot testing with React and Storybook

React Europe, Paris

Storybook is an incredibly useful tool for developing presentational components in isolation, but it can also be used for visual regression testing. At Clue, we've combined it with a few other tools to take screenshots of our components in their various states, and then run diffs against the screenshots from master to ensure nothing has been unintentionally changed.

In this lightning talk, I give a brief overview of the tools we put together and how we use them.

Resources

What the heck is Redux?

Geekfest at Groupon, Chicago, USA

Redux has made waves since it hit the JavaScript world, but it's still an unfamiliar mystery to many.

This talk is all about the question, "What the heck is Redux?" To answer it, we'll dive into the code of a simple Twitter clone that has two versions: one without Redux, and one with. We'll address the challenges of developing Twitter without Redux -- managing app state, keeping data consistent among components, etc. -- and then take a look at how Redux answers these challenges.

Resources