Comments (8)
Thanks for the feedback. I'm glad that you've enjoyed this project. 😀
I've played around with adding persistence via the URL fragment in a feature branch. You can play around with it here:
https://persistence--box-line-text.netlify.app
Here's an example URL with stored data:
from box-line-text.
Wow nice !
I just looked at url length limitation, everyone agrees on keeping them under 2000 characters to have a good compatibility everywhere.
Your sample has a length of 244.
I tried to create a big BLT of random but in the end it was not persisted in url, I pushed it too far 😛
this is the url I have right now but it's just the beginning of my test
from box-line-text.
Haha. Cool.
One challenge with just serializing the DOM like I'm doing currently is that any elements added by extensions or userscripts are also stored, so the storage requirements can get very large quickly.
I've pushed a change that uses LZ compression for the URI data. That should also help a lot with the size.
Here's your example art cleaned up a bit.
Ultimately, a proper serializer and deserializer will probably be necessary to make this work efficiently.
from box-line-text.
any elements added by extensions or userscripts are also stored
damn, indeed my grammar skills have been exposed ^^
I've pushed a change that uses LZ compression for the URI data. That should also help a lot with the size. Here's your example art cleaned up a bit.
cool ! why not use the npm pkg ?
Ultimately, a proper serializer and deserializer will probably be necessary to make this work efficiently.
is this not enough for a first version ?
from box-line-text.
why not use the npm pkg ?
I'm not currently dependent on Node, so adding the entire Node ecosystem when I only need one JS file seemed a little excessive. I did use the JS file from that project.
is this not enough for a first version ?
I'm not comfortable with this currently. Here are a some of my concerns:
- If this feature is made generally available, I need to make sure that URLs keep working in perpetuity. That makes future changes to the application more difficult.
- I'm not comfortable with the current privacy implications with regard to data created by the user agent being shared with others in a way that is not expected. This could currently reveal private data stored in the DOM by extensions.
- The current implementation is a textbook XSS attack. That shouldn't matter much for the Netlify version, but this could create very real security implications for anyone who decides to self-host this on their own domain.
In terms of functionality, though, this does seem to get the job done.
from box-line-text.
adding the entire Node ecosystem when I only need one JS file seemed a little excessive
I agree, npm independent projects are quite rare these days, and surely faster to use (clone & start)
I need to make sure that URLs keep working in perpetuity
Do you mean no-breaking changes ? Because it's commonly accepted when projects jump from a major version to another major according to SEMVER
I'm not comfortable with the current privacy implications with regard to data created by the user agent being shared with others in a way that is not expected
Maybe a share floating button could display a modal and link with a note below explaining risks of sharing this url
(just used as a quick mocking tool, nice ^^)
The current implementation is a textbook XSS attack
Right, maybe not taking the DOM as input would solve this, so this get back to serialization
from box-line-text.
Do you mean no-breaking changes ? Because it's commonly accepted when projects jump from a major version to another major according to SEMVER
Not necessarily. I just want to minimize breakage as much as possible. I'd want to have versioned URLs between major versions so that users can still access their old data. If I'm storing the entire DOM as data, even a seemingly minor change could require a major version change, creating more work for everyone.
I've pushed a change to serialize the elements more intelligently. This uses less space for most documents than before, obviates the need for a compression step, and should take care of the XSS issue.
Here's your example again.
from box-line-text.
from box-line-text.
Related Issues (11)
- Floating text - Double size, quad size, vertical HOT 4
- Auto-alignement helper HOT 1
- Add MacOS mode using Cmd instead of Ctrl
- Delete or backspace in an empty element should delete it
- Hand drawn effects HOT 3
- Normalize text content across browsers
- Drag and drop HOT 7
- Adjust box height to text content HOT 4
- Add line-break at Enter key press in Box? HOT 5
- Text superposition HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from box-line-text.