Show HN: Private front-end code playgrounds

https://frontendlane.github.io/page-source/

by frontendlane • 7 years ago

35 16 7 years ago

frontendlane.github.io

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• 7 years ago

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

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

quickthrower2• 7 years ago

I like it - and I think this will be my go to.

You see I don't often need to save stuff I play with, I almost never need to share, and if I want JQuery there is a CDN, so I will take the simplicity and fast loading of your site over other playgrounds out there.

I've linked to you from "Utilities" page in the site in my profile.

alessioalex• 7 years ago

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

frontendlane2• 7 years ago

Fixed. Thanks for bringing it to my attention!

d--b• 7 years ago

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

fouc• 7 years ago

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.

antigirl• 7 years ago

neat, this is my go to for something more complicated, i.e reat or even node https://codesandbox.io

jpincheira• 7 years ago

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 but it's interesting to me how other tools have been able to monetize on this category.

grenoire• 7 years ago

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.

myfonj2• 7 years ago

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

myfonj2• 7 years ago

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... [1] http://xem.github.io/miniCodeEditor/

onion2k• 7 years ago

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• 7 years ago

Glitch.io does live reload in a different tab

nestorherre• 7 years ago

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.

emilfihlman• 7 years ago

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

Show HN: Private front-end code playgrounds

Related Stories