
Show HN: Private front-end code playgrounds - frontendlane
https://frontendlane.github.io/page-source/
======
frontendlane
Super excited to share this small project I built over the weekend. This is a
front-end code playground inspired by my recurring need to quickly test
something out in a pristine environment i.e. new tab.

\- Supports HTML, CSS, JavaScript \- Easy to share with others 1\. CMD/Control
+ S 2\. Share the URL \- Opens in an instant \- Private by design (nothing is
stored because there is no server) \- No tracking \- No account to manage

My first submission on Hacker News. Yay!

~~~
ghinda
Great work! Have you found a way to compress/shorten the urls?

I built something similar[1] a while ago, but the urls are still too long for
sharing without a shortener. I'm using lz-string[2].

[1] [https://www.siloz.io](https://www.siloz.io)

[2] [https://github.com/pieroxy/lz-string](https://github.com/pieroxy/lz-
string)

------
myfonj
For exactly same purpose I am grooming self-contained HTML Sandbox "datauri
app" [0] living in my bookmarks that too retains its state in location (#hash)
so is copypastable to other browsers. I like to load preview to isolated
iframe and have single editor. (Not as golfed as xem's ([1]) but it's mine and
I like its few extra features.)

[0]
[https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388...](https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388df8)
[1]
[http://xem.github.io/miniCodeEditor/](http://xem.github.io/miniCodeEditor/)

------
jpincheira
First off, congrats on creating something on your own, and making it to the
top of HN. It's not many people that get here by doing something on their own.

I must say that for my sporadic needs, this would be still too basic. My go-to
tool has been for years [https://jsbin.com](https://jsbin.com) but it's
interesting to me how other tools have been able to monetize on this category.

------
d--b
This is great. Not sure why the copy command doesn't succeed. I had to go in
the source code to get the url.

------
onion2k
One feature I really like to see in projects like this is the ability to break
the 'result' window out in to a separate tab. Codepen does it (the 'debug'
mode), but it loses the live refresh. I think Codesandbox can do it too. It
makes them _much_ more useful.

~~~
Narretz
Glitch.io does live reload in a different tab

------
nestorherre
Isn't something like jsfiddle, codepen, etc... exactly the same?

Not to disminish your effort and result, but you say that you had a "recurring
need", well, that need was already solved.

------
fouc
I like the page layout! It's a lot smarter than most code playgrounds are.
It's nice to be able to see everything at a glance.

------
grenoire
This is all well and good but isn't there a limit on the length of URLs? Or
does that simply not apply to blob data links.

~~~
myfonj
There is, but nowadays it is quite generous. Firefox for example by default
accepts up to 64KB long bookmarks [0].

[0] via
[https://www.reddit.com/r/firefox/comments/b6fa95/bookmark_lo...](https://www.reddit.com/r/firefox/comments/b6fa95/bookmark_location_100kb_size_limit/)

------
antigirl
neat, this is my go to for something more complicated, i.e reat or even node
[https://codesandbox.io](https://codesandbox.io)

------
alessioalex
Ctrl + Enter doesn't do anything. (Linux)

~~~
frontendlane
Fixed. Thanks for bringing it to my attention!

------
emilfihlman
ctrl+s nor clicking copies anything to clipboard for me.

