Previews for developer and editors: How to improve your workflows and enable iterative development

Transcript

1. 1 Previews for developers and editors How to improve your workflows and enable iterative development 1
2. Housekeeping • This webinar is being recorded; we will share the recording and slide deck with all registrants • Please leave your questions in the Q&A box, we’ll answer them after the presentation • To get in touch, write to us at team@contentfulmail.com before we begin...
3. Today’s Contentful speakers Jo Fraser Marketing Copywriter Shy Ruparel Developer Evangelist
4. - What does preview mean for editors and developers? - Vertical vs Horizontal preview: what’s the difference? - The journey of a content piece - Roles, permissions, and translation - Approval/review feature - Setting up the preview environment - What are some of the biggest challenges? Agenda 4 4
5. - The publish button is sacred for an editor. If you’re an editor, you probably know this already. - It’s important. Being able to preview our work before it goes live is integral for our jobs know our content piece is going out just like we intended it to. What does preview mean for Editors? It’s our way of dealing with the dreaded “publish button” fear. 5 Preview: Editors
6. - Preview is a matter of confidence. It gives creators complete control of our work. - We’re able to check for typos, get our formatting right, and generally know know our content piece is going out just like we intended it to. What does preview mean for Editors? It gives creators complete control of their work. 6 Preview: Editors
7. An editor might start crafting their content in a third-party app like Google Docs or Word. It will go through a number of review/approval/editing cycles with input from members of their team. No previewing is available here. Third-party app Editors will copy and paste their content into Contentful. This is where we start formatting. Keep in mind we have a lot on our minds at this point! From formatting for SEO to importing and embedding media, this is where we piece everything together. Importing content to Contentful The Preview API Using our Preview API, a developer can easily set up a preview site so editors can review content in context and see live versions of their changes. Rather than being one of the last things an editor checks, the preview can become part of every step of the content creation process. Publishing After preview our content, and making last minute tweaks, we finally have the confidence to press the publish button. But it doesn’t stop here, Rarely do editors post something and then never touch it again. 7 The journey of a content piece From first draft to final form: Blog post Journey of a content piece
8. Demo Setting up the Preview API 8 8
9. Developer Preview? Regardless of how you build it, things break. 9
10. Developer Preview? How to keep Code and Content in Sync? 10
11. Types of Preview 11
12. Change as Part of Deployment 12 12
13. Contentful Migration CLI 13 • Create Content Type • Delete Content Type • Edit Content Type • Create/Edit/Delete Fields • Change Field ID
14. Contentful Migration CLI All in JavaScript 14
15. Contentful Migration CLI Callable via the Contentful CLI 15
16. Programmatic Content Model Changes 16 16
17. Automated Review 17 17
18. Contentful Migration CLI Demo 18
19. That’s Nice But what if I want to discard, test or preview a migration? 19 19
20. Space Environments Space environments allow you to create multiple versions of the space, and change them in isolation. 20
21. Create Environments from the CLI Demo 21
22. Initialize the client 22
23. Initialize the client with Environments 23
24. Combine migrations with environment 24
25. Common uses for space environments 25 • Local Dev • Staging / QA • CI/CD
26. Demo Migrations and Environments 26 26
27. Let's talk about Continuous Integration 27
28. CircleCI Demo Demo 28
29. - Publish with the confidence that their work has gone through all the necessary reviews and checks. - Approval workflows let you review and approve versions before hitting the publish button. Share responsibility amongst team members. - Choose the people you want to review your piece from a selector in the sidebar and they’ll be notified with a message in Slack, Zapier or email. - By using the webhook, you have the freedom to connect any kind of notification functionality to this feature. Introducing our new approval/review feature Making your approval/review workflow a little easier 29 approval/review
30. - Sometimes it seems like editors are from Mars and developers are from venus. We think differently, have different workflows and sometimes communicating becomes difficult. Sometimes developers build things and editors don’t understand why. - Developers: Build empathy and have an open line of communication. Learn how to communicate the thought process behind why you’ve made things a certain way. This could be as simple as you sending off an email to the content team when changes are made. - Editors: Learn to ask for what you need. If you haven’t got a preview environment, ask for one! Explain why it’s important to you. Communicate if your content model isn’t working. One of the best things about Contentful is how extensible it is; it should make your workflow easier, not harder. What are some of the biggest challenges? #1: Communication between teams 30 communication
31. • Editors don’t understand developer workflows • Editors aren’t empowered to solve preview failure • Developers aren’t empathetic to the Editor Experience What are some of the biggest challenges? #2: The danger zone: mixing horizontal and vertical preview 31 communication
32. 32 Q&A Any questions? 32