My journey through the horrible dumpster fire of text management in the web while trying to run a startup.

1. Text Editing & Input Conflicts
Sweet Jesus! Don’t let anyone input anything!
@JesperBylund

2. In Ye Goode Olden Dayse

3. 2014 - 2019

4. The Plan
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Profit!

5. –Famous Last Words
“How hard can it be?”

6. Pretty Hard

7. Getting stuff from the keyboard: ContentEditable

8. The Plan
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Profit!

9. $.ajax()

10. The Plan
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Profit!

12. The Plan
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Profit!

13. The Plan
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Profit!
Wait?…

14. The Plan?
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Wait! Mobile users dont keyboard?
https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480
https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/

15. <textarea /> & <input />
Draft.js & ProseMirror.js
https://draftjs.org
https://prosemirror.net/

16. The new Plan?
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Wait! Mobile users don’t keyboard?
5. Wait! Mobile users are offline?

17. LocalStorage
Redux
Redux Offline
socket.io
http://offlinefirst.org
https://github.com/redux-offline/redux-offline
https://www.npmjs.com/package/vuex-persist

18. …is there even a plan?
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Wait! Mobile users dont keyboard?
5. Wait! Mobile users are offline?
6. Wait.. Everything is offline?

19. manifest.json
cache (+busting)
local fonts
https://developers.google.com/web/tools/lighthouse/

20. Trough of disillusionment
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Wait! Mobile users dont keyboard?
5. Wait! Mobile users are offline?
6. Wait.. Everything is offline?
7. Christ, the server has to handle merging…

21. Versioning on the server?..
• Just add +1 to each documents version?
• Save every iteration of the document ever?
• Delta updates, save X many?
• Versions based on time?
https://stackoverflow.com/questions/4185105/ways-to-implement-data-versioning-in-mongodb

22. shit
1. Getting stuff from the keyboard
2. Passing it to a server
3. Storing it
4. Wait! Mobile users dont keyboard?
5. Wait! Mobile users are offline?
6. Wait.. Everything is offline?
7. Christ, the server has to handle merging…
8. Oh god, the client has to handle merging!

23. Auto merging based on time?
or
Version conflicts handled manually?
Think it works?

24. What should you do?
lol, idk

25. UTF-8
duh…

26. <input />
<textarea />
Draft.js
ProseMirror

27. HTML
draftin.com

28. Draft.js

29. Draft.js

30. ProseMirror

31. Avoid offline support by using Sockets

32. Still support offline

33. Checklist
• Encode the text right
• Use a font that supports your supported languages
• Handle text as plain text! Alternatively use a library for everything
(Basic HTML elements have the right APIs, other than that Drafts.js and
ProseMirror are great alternatives.)
• Understand that everything, everything, will have merge conflicts.
Decide how to handle them. Settings might be fine with last in over-rights.
But content needs some structure.
• Use sockets to minimise offline support. Still support offline.

34. The Final Solution:
Don’t let users input stuff.

35. Jesper Bylund
@jesperbylund
http://jesperbylund.com/sthlmjs