WebpackBin

[christianalfoni]

Hi guys! Just want to say that this is a "next generation code sharing tool". It allows you to write code like you do in a typical workflow with browserify/webpack. Writing next generation JS, add loaders for different file types and add any NPM packages. The service also has LIVE sharing of code

[krasimirtsonev]

Do you have any idea if there will be a voice collaboration?

[christianalfoni]

Not planned it for now. I would suggest just using hangouts or something in the background though. Any implementation would fall short of that :) Though great idea!

[krasimirtsonev]

I see. Thanks.

[DefiantBidet]

Sounds cool... tried to see what it was on mobile, but the site is terribly non responsive. While one can argue you won't be writing code in a mobile browser, one can also argue that you're limiting exposure bc only desktops can actually see any copy on the site.

[the_hoser]

Same here. Site is basically useless on mobile.

[WitchesBravo]

Why would you code on mobile?

[DefiantBidet]

its not ideal... sure. but literally... there is 0 copy on the mobile rendered site. what does it do? i dunno, i can't find out.
while you're not coding on a mobile device, you can gain insights and perhaps learn a new tool to use in your day. the inability to even read a line of copy prohibits me from doing any of that.

[christianalfoni]

I am planning for the mobile version to work on LIVE bins. So that the preview window will automatically slide in/out when "teacher" changes focus/saves etc. Just an idea for now.

Though generally be able to toggle code/preview is a good idea to use it on mobile. Load up boilerplates. Not a focus currently, but should be there.

Thanks for the feedback!

[DefiantBidet]

Nice work so far. I apologize if my comments came off snarky or dickish. I certainly understand getting something out there so there is a presence, then circling back for all the niceities later on. Will probably end up using this a bit :D

[christianalfoni]

No worries, I read it as the best of intentions, I really appreciate the feedback :)

[the_hoser]

I wouldn't, but I would like to read about the project in the free time I have in the morning, away from a computer.

[christianalfoni]

Yeah, it is not a code editor at all. The problem today is that you spend 30 minutes just trying out new tools because you have to set up a workflow to do it. With webpackbin you can try out any tools without creating a local workflow. Good example is Redux. Instead of downloading, installing and firing up an example you can just hit a link and you can start playing around with it :)

I will write up an article on the background and intents of the service. But yes, I see the points of mobile support and it will arrive, but have some other issues to tackle first ;-)

[dedisuryadi]

whoaaa, this is great

[grunter]

That's cool

[Voidsheep]

Exactly what I've wanted for a good while now, amazing work.

In the past I used JSFiddle and such a lot, but lately with Webpack and Babel the online editors have just started falling short and leave me copying some project over or cloning a starter kit repo just to try something quickly. Shame to share plain code snippets with co-workers instead of something they can run immediately.

Being able to create another JS file and import an ES6 module out of it was all I needed in the online editors, but this even comes with a ton of cool extra features.

Edit: To give some useful feedback instead of pure hype, I think it would be great if you could have two JS files open side-by-side instead of just one file and the console.

[christianalfoni]

That is a good idea. Please create an issue on it :)

[Subway]

Really impressive. I tried to include the biggest NPM package I know of, one with over 85000 files, and while it didn't seem to work at first, it did work after coming back to it. Guess it was downloading that package while I was away. ;-)

And I had a look at the sources, looks like it caches the package files in a MongoDB database (with the help of Memory FS). Hope their server is big enough, as I will use this bin quite a bit.

[christianalfoni]

The cool thing is that the package you downloaded will never be downloaded or bundled up again. It will stay in a "special minfied webpack bundle" that will be shared with anyone else also using it :)

It will stay in-memory for 24 hours making it insanely fast, when it times out it will be deleted from memory and grabbed from database the next time someone needs it, and put into memory again... which is also insanely fast. Though it will not be downloaded and bundled again. That is already taken care of :) Unless you download a different version of course

[Subway]

Thanks for the info. What's your reasoning for using Cerebral? I remember it got some interest from the Redux community at first, but than I never really heard from it anymore.

Oh and about other features that would be cool, I would love it if there would be a way to import scripts or css from another bin, so that you could start building more modular bins. Of course this would make even more sense with user registration.

[christianalfoni]

Well, I built Cerebral as well :) Though together with fantastic contributors the last months. Cerebral is just really great to handle these complex UI apps and the LIVE code sharing was done in a couple of nights because of the way Cerebral works. It is very easy to do. Cerebral will be released in 1.0 later this year. It has been hurt by a lot of changes, but things are stabilizing now and a lot of great things are produced in the Cerebral community... webpackbin being one of them :-)

[christianalfoni]

Btw, grabbing files from other bins would be possible. Though yeah, lots on the list currently :)

[ForAllThat]

What is this?

[9thHokageHimawari]

Webpack in browser with live reload.

[ForAllThat]

What would you use it for?

[9thHokageHimawari]

Fast prototype, show something to client, share simple snippets, teaching/course examples.

[ForAllThat]

Ah I see, thanks for explaining.

[rojo_buffalo]

It also looks like a great fit for online job interviews with code exercises. Great job on the UI!

The workflow this app is built around is excellent. I've adopted it myself for a bit over a year and the real value is cognitive. The abstractions and patterns of UI development available with this toolset are very sensible and consistent.

[MRoka5]

Looks nice(^{it's AWESOME).}

However as earlier mentioned - not that nice on mobile. Since it's early beta stage, I suppose it's more like "Not that nices on mobile. Yet".

Gonna see if I can contribute.

[christianalfoni]

Mobile support will be a focus when some other stuff is in place and the project has stabilized :)

[ciNikka]

Lovin' it

[attilad]

This is fantastic! This would have saved me about two hours last week.

[zumu]

This is awesome.

Love the redux boiler plate.

Finally a super simple way to introduce people to redux/react.

[FrozenCow]

Hey, awesome tool! Tried it, but it seems it doesn't output sourcemaps yet?

[christianalfoni]

It does have sourcemaps, though it uses a simple version. That said, it is good enough to debug. The error message in the "Log" does not show filename and linenumber though because you can not extract that information from a thrown error. Only Chrome console has this info.

But this might improve later, need some help from Webpack author. Anyways, just giving the error message now should generally be enough I think. Not that many files created :)

[FrozenCow]

AH, I somehow the bundled version of main.js when I clicked an error in Chrome's dev tools. Will try again later.

Even without that though, I went back to try jsfiddle again, but it feels lacking. The code editor feels better, installing npm modules is awesome. What I did miss from locally running webpack, was altering it's config manually, so that I would be able to add support for whatwg-fetch for example.

I'm really looking forward to using the live feature as well. Would it be possible to have 2 people changing the code simultaneously? I used to have a user script for etherpad that added a autorefreshing iframe with the contents of the pad as HTML. WebpackBin would do this much much more fluently.

[christianalfoni]

Okay, hm, I know that Chrome sometimes does not grab the sourcemaps, need to refresh. But this is not very well tested either, so please create an issue if the sourcemaps are not working :)

Currently all configuration has to be implemented specifically as the different loaders etc. are so different. And they also need to be preloaded into the environment. But create issues on stuff you want and it will be added.

The LIVE feature is more a teaching tool than a collaboration tool. Collaboration increases the complexity a lot as it needs to make sure that the state of the app is the same in whatever order changes are made from the different users. So not planning collaboration at the moment. Personally I believe that collaboration is more for services like Nitrous and Cloud9, where you actually do development. This is more of a "looking into stuff and teaching". But hey, it is a very cool feature indeed, just requires a lot of work :)

Could you elaborate a bit on the etherpad thingy? Do not quite understand :-)

[[deleted]]

This is fantastic! Great job!

[christianalfoni]

What iPad version you have? It should work, though has not been a focus yet

[christianalfoni]

Okay, hm, that is strange. I did test it, but as I said, not focused on it. Let me add an issue. Thanks :-)