SlideShare a Scribd company logo
1 of 35
Download to read offline
Text Editing & Input Conflicts
Sweet Jesus! Don’t let anyone input anything!
@JesperBylund
In Ye Goode Olden Dayse
2014 - 2019
The Plan
1. Getting stuff from the keyboard

2. Passing it to a server

3. Storing it

4. Profit!
–Famous Last Words
“How hard can it be?”
Pretty Hard
Getting stuff from the keyboard: ContentEditable
The Plan
1. Getting stuff from the keyboard

2. Passing it to a server

3. Storing it

4. Profit!
$.ajax()
The Plan
1. Getting stuff from the keyboard

2. Passing it to a server

3. Storing it

4. Profit!
The Plan
1. Getting stuff from the keyboard

2. Passing it to a server

3. Storing it

4. Profit!
The Plan
1. Getting stuff from the keyboard

2. Passing it to a server

3. Storing it

4. Profit!
Wait?…
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/
<textarea /> & <input />
Draft.js & ProseMirror.js
https://draftjs.org
https://prosemirror.net/
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?
LocalStorage

Redux

Redux Offline

socket.io
http://offlinefirst.org
https://github.com/redux-offline/redux-offline
https://www.npmjs.com/package/vuex-persist
…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?
manifest.json

cache (+busting)

local fonts
https://developers.google.com/web/tools/lighthouse/
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…
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
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!
Auto merging based on time?
or
Version conflicts handled manually?
Think it works?
What should you do?
lol, idk
UTF-8
duh…
<input />
<textarea />
Draft.js
ProseMirror
HTML
draftin.com
Draft.js
Draft.js
ProseMirror
Avoid offline support by using Sockets
Still support offline
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.
The Final Solution:
Don’t let users input stuff.
Jesper Bylund
@jesperbylund
http://jesperbylund.com/sthlmjs

More Related Content

Similar to Text Editing & Input Conflicts

Deploying Rails Apps with Chef and Capistrano
 Deploying Rails Apps with Chef and Capistrano Deploying Rails Apps with Chef and Capistrano
Deploying Rails Apps with Chef and CapistranoSmartLogic
 
Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...
Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...
Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...Simplilearn
 
HTML5 for mobile - DiGi Challenge for Change
HTML5 for mobile - DiGi Challenge for ChangeHTML5 for mobile - DiGi Challenge for Change
HTML5 for mobile - DiGi Challenge for ChangeJan Jongboom
 
How do we drive tech changes
How do we drive tech changesHow do we drive tech changes
How do we drive tech changesJaewoo Ahn
 
[EclipseCon France 2017] Language Server Protocol in action
[EclipseCon France 2017] Language Server Protocol in action[EclipseCon France 2017] Language Server Protocol in action
[EclipseCon France 2017] Language Server Protocol in actionMickael Istria
 
NUS SOC Print
NUS SOC PrintNUS SOC Print
NUS SOC Printyeokm1
 
Rust's Journey to Async/await
Rust's Journey to Async/awaitRust's Journey to Async/await
Rust's Journey to Async/awaitC4Media
 
Gears of Perforce: AAA Game Development Challenges
Gears of Perforce: AAA Game Development ChallengesGears of Perforce: AAA Game Development Challenges
Gears of Perforce: AAA Game Development ChallengesPerforce
 
Software that eats the world! - PerformDay Brussels
Software that eats the world! - PerformDay BrusselsSoftware that eats the world! - PerformDay Brussels
Software that eats the world! - PerformDay BrusselsKlaus Enzenhofer
 
FEC2017-Introduction-to-programming
FEC2017-Introduction-to-programmingFEC2017-Introduction-to-programming
FEC2017-Introduction-to-programmingHenrikki Tenkanen
 
Easy way to learn Core java full material
Easy way to learn Core java full materialEasy way to learn Core java full material
Easy way to learn Core java full materialSivannarayana Chimata
 
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersDebugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersTroy Miles
 
The Ring programming language version 1.5.1 book - Part 4 of 180
The Ring programming language version 1.5.1 book - Part 4 of 180The Ring programming language version 1.5.1 book - Part 4 of 180
The Ring programming language version 1.5.1 book - Part 4 of 180Mahmoud Samir Fayed
 
Deep Dive into FME Server 2017.0
Deep Dive into FME Server 2017.0Deep Dive into FME Server 2017.0
Deep Dive into FME Server 2017.0Safe Software
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applicationsFDConf
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Jan Jongboom
 
Modern javascript localization with c-3po and the good old gettext
Modern javascript localization with c-3po and the good old gettextModern javascript localization with c-3po and the good old gettext
Modern javascript localization with c-3po and the good old gettextAlexander Mostovenko
 
Introduction to Python Programming
Introduction to Python ProgrammingIntroduction to Python Programming
Introduction to Python ProgrammingAkhil Kaushik
 
Pharo IoT Installation Improvements and Continuous Integration
Pharo IoT Installation Improvements and Continuous IntegrationPharo IoT Installation Improvements and Continuous Integration
Pharo IoT Installation Improvements and Continuous IntegrationAllex Oliveira
 

Similar to Text Editing & Input Conflicts (20)

Deploying Rails Apps with Chef and Capistrano
 Deploying Rails Apps with Chef and Capistrano Deploying Rails Apps with Chef and Capistrano
Deploying Rails Apps with Chef and Capistrano
 
Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...
Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...
Pig Tutorial | Apache Pig Tutorial | What Is Pig In Hadoop? | Apache Pig Arch...
 
HTML5 for mobile - DiGi Challenge for Change
HTML5 for mobile - DiGi Challenge for ChangeHTML5 for mobile - DiGi Challenge for Change
HTML5 for mobile - DiGi Challenge for Change
 
How do we drive tech changes
How do we drive tech changesHow do we drive tech changes
How do we drive tech changes
 
[EclipseCon France 2017] Language Server Protocol in action
[EclipseCon France 2017] Language Server Protocol in action[EclipseCon France 2017] Language Server Protocol in action
[EclipseCon France 2017] Language Server Protocol in action
 
NUS SOC Print
NUS SOC PrintNUS SOC Print
NUS SOC Print
 
Rust's Journey to Async/await
Rust's Journey to Async/awaitRust's Journey to Async/await
Rust's Journey to Async/await
 
Gears of Perforce: AAA Game Development Challenges
Gears of Perforce: AAA Game Development ChallengesGears of Perforce: AAA Game Development Challenges
Gears of Perforce: AAA Game Development Challenges
 
Software that eats the world! - PerformDay Brussels
Software that eats the world! - PerformDay BrusselsSoftware that eats the world! - PerformDay Brussels
Software that eats the world! - PerformDay Brussels
 
FEC2017-Introduction-to-programming
FEC2017-Introduction-to-programmingFEC2017-Introduction-to-programming
FEC2017-Introduction-to-programming
 
Easy way to learn Core java full material
Easy way to learn Core java full materialEasy way to learn Core java full material
Easy way to learn Core java full material
 
Corejava ratan
Corejava ratanCorejava ratan
Corejava ratan
 
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersDebugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
 
The Ring programming language version 1.5.1 book - Part 4 of 180
The Ring programming language version 1.5.1 book - Part 4 of 180The Ring programming language version 1.5.1 book - Part 4 of 180
The Ring programming language version 1.5.1 book - Part 4 of 180
 
Deep Dive into FME Server 2017.0
Deep Dive into FME Server 2017.0Deep Dive into FME Server 2017.0
Deep Dive into FME Server 2017.0
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
 
Modern javascript localization with c-3po and the good old gettext
Modern javascript localization with c-3po and the good old gettextModern javascript localization with c-3po and the good old gettext
Modern javascript localization with c-3po and the good old gettext
 
Introduction to Python Programming
Introduction to Python ProgrammingIntroduction to Python Programming
Introduction to Python Programming
 
Pharo IoT Installation Improvements and Continuous Integration
Pharo IoT Installation Improvements and Continuous IntegrationPharo IoT Installation Improvements and Continuous Integration
Pharo IoT Installation Improvements and Continuous Integration
 

More from Jesper Bylund

What happens after react? (second edition)
What happens after react? (second edition)What happens after react? (second edition)
What happens after react? (second edition)Jesper Bylund
 
What happens after react?
What happens after react?What happens after react?
What happens after react?Jesper Bylund
 
What is so Ethical about Design?
What is so Ethical about Design?What is so Ethical about Design?
What is so Ethical about Design?Jesper Bylund
 
Ethics in design (8 feb 2018)
Ethics in design (8 feb 2018)Ethics in design (8 feb 2018)
Ethics in design (8 feb 2018)Jesper Bylund
 
Wordpress & Backbone: The Dawn of Web Apps
Wordpress & Backbone: The Dawn of Web AppsWordpress & Backbone: The Dawn of Web Apps
Wordpress & Backbone: The Dawn of Web AppsJesper Bylund
 
WordPress och den responsiva webben
WordPress och den responsiva webbenWordPress och den responsiva webben
WordPress och den responsiva webbenJesper Bylund
 
How to improve learning
How to improve learningHow to improve learning
How to improve learningJesper Bylund
 

More from Jesper Bylund (7)

What happens after react? (second edition)
What happens after react? (second edition)What happens after react? (second edition)
What happens after react? (second edition)
 
What happens after react?
What happens after react?What happens after react?
What happens after react?
 
What is so Ethical about Design?
What is so Ethical about Design?What is so Ethical about Design?
What is so Ethical about Design?
 
Ethics in design (8 feb 2018)
Ethics in design (8 feb 2018)Ethics in design (8 feb 2018)
Ethics in design (8 feb 2018)
 
Wordpress & Backbone: The Dawn of Web Apps
Wordpress & Backbone: The Dawn of Web AppsWordpress & Backbone: The Dawn of Web Apps
Wordpress & Backbone: The Dawn of Web Apps
 
WordPress och den responsiva webben
WordPress och den responsiva webbenWordPress och den responsiva webben
WordPress och den responsiva webben
 
How to improve learning
How to improve learningHow to improve learning
How to improve learning
 

Recently uploaded

The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...kalichargn70th171
 
Santander Stream Processing with Apache Flink
Santander Stream Processing with Apache FlinkSantander Stream Processing with Apache Flink
Santander Stream Processing with Apache Flinkconfluent
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesVictoriaMetrics
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxSasikiranMarri
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
oracle 23c new features for developer and dba
oracle 23c new features for developer and dbaoracle 23c new features for developer and dba
oracle 23c new features for developer and dbaRemote DBA Services
 
Revolutionize Your Video Editing with InVideo.io: A Comprehensive Review
Revolutionize Your Video Editing with InVideo.io: A Comprehensive ReviewRevolutionize Your Video Editing with InVideo.io: A Comprehensive Review
Revolutionize Your Video Editing with InVideo.io: A Comprehensive Reviewjw364beach
 
full course of software engineering mid term.pdf
full course of software engineering mid term.pdffull course of software engineering mid term.pdf
full course of software engineering mid term.pdfAbdul salam
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?Alexandre Beguel
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolsosttopstonverter
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxAS Design & AST.
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jNeo4j
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024OpenMetadata
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfkalichargn70th171
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorTier1 app
 
Effort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software ProjectsEffort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software ProjectsDEEPRAJ PATHAK
 

Recently uploaded (20)

The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
 
Santander Stream Processing with Apache Flink
Santander Stream Processing with Apache FlinkSantander Stream Processing with Apache Flink
Santander Stream Processing with Apache Flink
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 Updates
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
oracle 23c new features for developer and dba
oracle 23c new features for developer and dbaoracle 23c new features for developer and dba
oracle 23c new features for developer and dba
 
Revolutionize Your Video Editing with InVideo.io: A Comprehensive Review
Revolutionize Your Video Editing with InVideo.io: A Comprehensive ReviewRevolutionize Your Video Editing with InVideo.io: A Comprehensive Review
Revolutionize Your Video Editing with InVideo.io: A Comprehensive Review
 
full course of software engineering mid term.pdf
full course of software engineering mid term.pdffull course of software engineering mid term.pdf
full course of software engineering mid term.pdf
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration tools
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptx
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryError
 
Effort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software ProjectsEffort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software Projects
 

Text Editing & Input Conflicts