Code Monkey home page Code Monkey logo

Comments (8)

jncraton avatar jncraton commented on May 30, 2024

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:

https://persistence--box-line-text.netlify.app/#PHNlY3Rpb24gc3R5bGU9IndpZHRoOiAzMThweDsgaGVpZ2h0OiAxOTBweDsgbGVmdDogNjJweDsgdG9wOiA2MnB4OyI+PHAgY29udGVudGVkaXRhYmxlPSJ0cnVlIj5TdGF0ZSBpcyBzYXZlZCBpbiB0aGUgVVJMIGZyYWdtZW50PGJyPjwvcD48L3NlY3Rpb24+

from box-line-text.

Shuunen avatar Shuunen commented on May 30, 2024

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 😛

image

blt-random-art.zip

this is the url I have right now but it's just the beginning of my test

image

from box-line-text.

jncraton avatar jncraton commented on May 30, 2024

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.

Shuunen avatar Shuunen commented on May 30, 2024

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.

jncraton avatar jncraton commented on May 30, 2024

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:

  1. 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.
  2. 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.
  3. 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.

Shuunen avatar Shuunen commented on May 30, 2024

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
image
(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.

jncraton avatar jncraton commented on May 30, 2024

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.

Shuunen avatar Shuunen commented on May 30, 2024

\o/

from box-line-text.

Related Issues (11)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.