web-maker

web-maker copied to clipboard

It would nice if I can click a perm-link to open a page. For example - https://webmakerapp.com/item/asdfasdfasdfasdfasdf.

I get the point, but curious if in your case you need the URL for yourself or to share with someone else?

It's for sharing. In my mind is something like what codesandbox.io or jsfiddle has. One may share it on stackoverflow for example.

I'd like the URL available just for personal use paired with the local-only saves.

do you have the plan for this feature?

This would also be useful for us, for teaching purposes . Cf. the clone features on jsbin and other code sandbox projects, which gives unique URL's for projects owned by different users, and also provides snaphsot URL's that preserve project history.

I am starting thought process on this to figure out the implementation details and if this can land in 4.0 itself. Would love to have inputs from everyone. Here are some initial points on top of my head:

• Currently Web Maker, being offline first, caches all assets locally and serves them from service worker. This can continue to work as it is on share-able urls.
• But once share-able urls land, people would want to embed the creations on other web pages. This case would be quite different because 1) Internet can be assumed there 2) It should not require to cache all assets first and then generate client side preview through service worker. It should be quick and any preprocessing shouldn't require loading the transpilers on browser. A lightweight version of the app would be suitable for embeds.
• App uses firebase module to fetch data from database. But if the firebase libraries are loaded on browser for the embeds also, it would be too heavy. We might needs some API endpoint to fetch creations, possibily precompiled code.

Re the last point, firebase libraries are cached the first time they are loaded and should be fast enough from then on. It is important that same process is followed for App and Embedded from my point of view.

My previous response is not very clear. Let me rephrase it. I think embedding and permanent link are two related functionalities. For example, on WordPress, there are sharable links and no embedding. From my point of view, point two and three are not valid. Just my two cents.

I think links could share data like the TS playground does, by encoding it in base64 or something in the url: https://www.typescriptlang.org/play?#code/PTAEBEEMDcEsBNQHdIGdQAsCmAnLQ

I might play around with a PR for this 👀

@david-shortman That is definitely not base64 :) I think it is a usual ID generated to associate to some code stored in the backend. Also, storing code in the URL will have limit on the number of characters we can have in the URL.

@chinchang Whoops my bad, I don't know what kind of encoding it is.

However, it is some type of encoded data, as the URL increases in size the more code I put in:

https://www.typescriptlang.org/play?#code/MYewdgzgLgBAlhAwgCwE4gLYFMYF4YCEA7nGACYhEDaARAEbpERao0C6MAZJ4QcGpiwBuAFAB6MTAAKqLADMWMKMhwYQsmNACG5LajIwABg0rNUhmHXnqcKdNhgBBKQEkRoSLBNNF+BHcEYAH4YfnscAC4YEnJKWm8zdlEAGyxYYGS4YABraBYAUTAtOlSDfDktZOZREVTYBABlLFTgKDhwAFkQMixC4tK8GAqq4Vq00MyclzAoFgA3SsHkkGBKhqh1LQBzLAA6HagXWYwAChoMrNzZ1ERJ7OnrheSaAEpRODkYE747h-nKl4wADeIhgE0uf1QT0GAGYAAwI0QAX1qKzWG1Q2z2zEOxzOFxyeRuvxm-2eABpwVNSVCATU6lTsiwXGRyaClHBsAAZLTQW6XLCs9nJXlQAASIDmLEF+VS2BmbLBEGQIAArskyAA5LAADyg-JyTRaUEcYFlWHlUEVmmaWFaMrlWBmEAAKiADdlBkCkTUPNAYLbLa7kFooAB1aUAEQQ-UFAHkwFIsVyQFoyjAKMBVZbdnRugBPXYAR1VLHzRrtGMcyWSJ3ZNAAVBEyDGSoKaCI3iIxulMk6oAANSkXfsATUpIugQ5gk6go5qclVYFa7TAMFkailEqlqDFcC2yEyB6gJ0D-cBILBHy+Z5mF-ZYNvUF20HzqVz6h6qCWou30rI5qWgAQp+LCiGCKIoiImbZv2uxpgBUozFyCCzGALBnGoqrMJuWA0JSp5IVAgK4AAfMCwqigOgwjjMA7gTOoqjjRfYzPO7K0YOgxYERuycfRHGsXO3G8Zx7HsteJyNLaK6dN0vRFG2ZD3mCYJ+rAT5dNhWAuBAcY7oMME5k+ABi9hSCApAnvxw5CaOXaqfAnx1o5j6OjMWnMLp+mKAQuD4EZcF5mQ+ZcJwD6qbOf6yAB7mwH5+CaWqXl6TuEUqa5G6Slg0V7geR7ICeUXZTFgHnjUrmaCq6parq+p3BWrSmmVMyDFAqClhVrnFTuDoWv2IH6L4AZxZ5OmpSwL5QG+ex5kNqAMY5SXad5O5TTNH7zYMNDKKQmggJkBgxTQi0wFBjk9f+LWwIlo3JeNPkLeykFdiIi7Lm04AZggAAOIr5o4ECNbMZCnnFGVPut75zV+227Tk+2HSd7KQ6+qTxKBqAALScliWMQGqqDAHhHC4BFNCZOhehY1smItv2JwbJYIBQBsGDrvuhWUgAxHQAAcABMADscjADAcIAKQ8wLwAAJxwqLMACwArFLMC83zchkDCMIwMrks8wowB8zCQswELquG2QACMfOywLMDWwiEsvMjbn9TMUNYBj804xgeMQJMJODNbyLdu9slrgS2TA31QYnBlcZ0AAVpWuxPKWEAnMwxpx-2rruncLy7HI6j5Fo-AnGDHvEXg5GXqpkmQ7Ich8UXFGVc38ht5cCene7OYt17m2w-gO3IJciNwAYEBwMkO5u65OIupyWBqieCd199EB-VoANAzJIPV4P8gvJS+twg5qkohBV9tNyooeoKgzoUQMCRqGWB9yIUEMtPiBqhpIMOEogI6fTXAcbUeoWSbwbv-QB1wYAAGp8Ch3ZLIKAqpUBrngUua4Yc3pLkjkoPQBxrrH3PB3JyXwCCQ2jkSFkGUB5wXodcFkgxIF1RgVfG+Npc6xRrgXD0XoIq7DETnSsednRug9NaMEVA6F3AYWQNgUQG6OXUPuUglRBpfiiKjaa0NMZyNUporY2jki6OZP7HYDRCbE30XFL2Psvx+wDvYkmJiwRmIsVY1ALgbFYAaEHRxNdnH0Exm4nY+Mg7sC8eueQoTLQmKRNaH07IWw73+oDWOoMnxdigmA1cCTcK5LyoeTmJ58lUPUlQ7xqAtFFEscYiKPiml+ICViOxWDiYmLaTozGnTbFBzSYMCR9oBFBhkXcBRTih6sOZCohiXdW5o1mpjQY-TmnzWWXM7uayXEsCicHfAWyOmBO6UTUYzDPZDwORE32uNomByyCcmAZzBkXKDgQopX0cS5PITxShcDnLKjVBqKB9VLjA2auDOpAZeI-VkERSM8gtDqhPK9JacVgyhgjLIaMEBYxkATEmHYKY0wlzLhXZAVdAwkXrhFAeuxMnErah1a518sWqSyluEq5SCpFV-CVKRxFTpJ1Tq0XY-YGlYCzuMkG10hFFypagculcThUCZPmSkQIEmfCRGwBl8KwS8qCYfQUArKknBblfRyPQ6g4AVaK5VlwtVYHzGwU6SJuVqXAP6Z1kz+yGRWLBT2plzKWRmCcGy4Ixx2pIagMhcVs4WqDXeLqYJ75YB5HyO4z98Cv3fp-b+jltCoChTkUgWxv4RWksaVcXQeh9CUoMYY1QIpgpqpCj0MKzRxTbZUDtEEf7hyIeAzQUA9CVuyNW2BElnILLVYpUoTDGSLLGWkSETwY0NTTUq2yEIaRPB4aOwhH1inQBAD9D0c6MqSQID8AU-jlLwoyFgPQ27Ki7ufYwhikFuyBU9ghfIREUJ5HQqgM42rVQ-XwjeIixqQUIbgtqvA-kYA0EKNcV48L-n7pTUCjNz0f5diA8+EDYHUJOgwucO48HCKULIlQ-D-DAWIeRK9X5a5mDkBXtgAAqjMOeHoABKcqfr+q-hlWpYBKAvywG-D+sxS2hH9bAIlCh+M5sfvm9Mj7s25pnc-EIhndMCgMFEOTRAGK1OzQ0UgxMjPCMLZQfYaRtObyxpoLQWnV7Ob0+5qAnmr61KsmSaMchPj4Gjl+5IMBvP2cczpvNlwGIJEmh1YT2AXxOjIB0OVRKdgnHURyQTwnkgeiiOF2kyRIufAADz4DhMERkcWYDVePZUeraSCljovX8vLulrq5PEzvKT86wQZdQLsLL2bcvkAKxAIrX8IoSrThnOVqa2M4umZcYuqQwBbGUDAcicImWtaw1yfIHR8iahdAAfRcA0B7DR8jXcQC6fIkYOyVSiDQTUcYHvvZu3dx7z3Xsg8+9937MA+vnuIbxsgHo4tjck5AaTVDpuzbwavBb+XCtYhKxFWLXXkhRA6KGZAJdljqB-dSR4ixJBOwRGfZ68PuM2nIMNldgpJuWEYGYHH2XsR5aWyt4njkl0ttKFEaXvOhS3x+eOy9eXEA0sFAARVLKgfM0xS789qasfgWudehXwMsVYyR1ibB2EFo4Fp8RKOuNrssrwGIPr4Brsgrvddrux3NvHSPxdE9K2pZ3LB1cm592buX3vfc6oij6-9Z7OewbIJ-FHZOTivyz4z5IMmST54U0QPPZIYANkdgiEBwo0TW4xFiXLuJHd0cuESMvtX4Ok-z1fK9N67h3oYuWmdg-U8q6+k6WMwNG3yX5-WysM-m0K-ZZ1dkEg+GSPTVAV1CNC3qmSEPjY-fLij5RrtkM4YoytlKKS5MqYyCqvVbS4+SGIqBhZdfgtQwh2cuT2Pgba4-sYAqolQyQ+YtwH6qAAKOK-Ofet6R2qmZmqWOQX+wBNYDE62UqMqcAW2gaSqe2OQxcpcaqNKVc7qOqMAm2RqW8pWZqZSnMgqJwm2CaDqaQTqBGgiBB2Q5BXq7ODElu6ItuewZqDupwrehILuZu7u-+xCWgP0f0+YCeJwJYZYGUAh9eQhTeohTubekhbulIKhfu-BooCegwhh+Ytm6mI0NcwM6gEAZhZuL4f0cAJ4NAAAOmANIX6p4BvhMkqtxHFLYagBALsP7D9FXAquoMalQKImIuRh+CFMWGbkEdWLWJEagGzmCEapYT4XICKKzDRumHgTijTqGKpnkaGGhIKI-qQRQneDQRFFOkmmkICuDP+r3kfvATWh0dOl0d-FBAHrjjlp0ITnbghOBlUVBpzicNgMtliPes5LMStuhmPAAOL5CPYuguC3YPYCb3YuBcgPaIBcguCIAADSuGpWSO2mQmbQlWdwaOE2PCI0zA1CMxoxOA-kY8EOIOt292kOH2X2P2a6SOw2gRaajxGOqmSILxOAkkSxWIKxmG6xj2xxpxZxT292+QomAAao4FyJcZ2mrkXmSJCcwNCbCW8QiXbrniSbVmuunpnnSTutSXsLSUej3v+pSfCR8UiTQG9oCcDtdn8aiScecTDmupPm2NPnJD0BSc0K8TyXMTsHyccfkI4KJgCfkNDpGEKaDvdoSY5EASATWOAakHoNAYIvKSMFSR8fBGQAsMuKbqofCnIQoUoayfaY6cTDHqoVyQqXCYsbyV8Zhg0C6HGFIEcWKWcS4JqKsYaapPLmyuUD-qdHAQPggc8QGbacqZ8RhvyS6BqaKeibGfGWukma2vgO1KvmWk0SPpmf6TaUqcsSGTQCiU9i9miecWGdicDpqI4EBNdsCXhkNhADLnzlmU2UGbmXye2V2WcT2ZqYgI4IgGKN9g9prgJtiaOAmUqGrvHmbvriANCaRjUJ7uoTbpiHbgcNoeIVcCwAnq8BlG6WAUoReQ3teVuniHeUSI+S8AUkAA

A random StackOverflow answer says to keep URLs under 2000 characters, and my above example breaks that (over 4000 characters), but still works on my up-to-date Chrome.

Probably for any sufficiently large code, a URL won't cut it for cross-browser compatibility, but for sharing snippets that are only a few hundred lines of code, it may work.

Probably more sharing use cases could be covered by https://github.com/chinchang/web-maker/issues/292, so I'll look at that, too

You are right! We can at least have this for small snippets! Looking forward to your PR. This reminds me, I did a similar thing in another project where I compressed the content first before putting in the URL...that can gets us more code. You can refer that here -> https://github.com/chinchang/picssel-art/blob/master/picssel.js#L354

First, I'd like to thank you for such a great and inspiring project.

I have recently implemented a similar feature in my project LocalPen. It was indeed similar to typescript playground sharing feature.

You can try it on the development build here (settings menu > share): https://dev.localpen.io/

An object representing the current state of the code is compressed using LZString and added to the URL as hash preceded by the string code/. The URL is copied to clipboard to be ready for sharing. When the URL is loaded, if a hash containing the string code/ is found, the following hash is decompressed and loaded as the state object.

share: https://github.com/hatemhosny/localpen/blob/32c15e4c8fdfef8df306bddc529e52540bdf614a/src/localpen/app.ts#L548

load: https://github.com/hatemhosny/localpen/blob/32c15e4c8fdfef8df306bddc529e52540bdf614a/src/localpen/import/code.ts

compress/decompress https://github.com/hatemhosny/localpen/blob/32c15e4c8fdfef8df306bddc529e52540bdf614a/src/localpen/utils.ts#L93