Yesterday, there was a big discussion on Twitter on how hard it is to start hacking on a js project. One comment by Dan Abramov struck me in particular: "Right: don’t use tools, face a problem, choose a tool or roll your own. Wrong: learn tools that don’t solve your problems, hate the tools."

This is spot on. All the solutions presented in this thread do not solve the problems I have when I'm hacking on a new project.

My dream PHP Setup

Back when I was 14, I had the best setup I've ever used in my life. Here it is:

  • Launch WinSCP and connect to fooo.fr.
  • Create a file test.php, write <?php echo 'Hello World'; locally with EditPlus 2, press cmd+s to save, wait 0.5 second for the upload.
  • Open my browser and go to http://fooo.fr/~vjeux/. Click on test.php.
  • ?????
  • Profit

Challenge

I want to get the same attributes but with JavaScript and React. Here are the constraints:

  • No setup: I'm happy to have to setup something initially (dedicated server, apache, php...) but nothing should be required to create a new project. No npm install, react-native init, creating a github project, yo webapp...
  • One file: I want to write a single js file to start with. No package.json, no .babelrc, no Procfile...
  • Sharable: I want to be able to share it with a url without any extra step. No git push heroku master or git push gh-pages.
  • Keeps working: Once online, it should stay there and keep working 6 months later. No npm start to run it, no special port that's going to conflict with my 10 other prototypes...
  • Not generic: I don't care about it being generic, I will use whatever transforms you decided. Happy to write js without semi-colons and using SASS for my CSS if you checked all the boxes above.
  • Not prod-ready: This setup doesn't have to be prod-ready, support unit testing or anything that involves it being a real product. This is meant for hacking on stuff. When the project becomes good, I'll spend the time to add all the proper boilerplate.

So, that's the challenge. Can you make it happen?

If you liked this article, you might be interested in my Twitter feed as well.
 
  • Daiwei

    I had exactly the same need, so I created my own solution https://github.com/d6u/web-playground

    - No setup: one time install initial "npm i -g web-playground". Run "wpg" (literally, no additional options) in a empty directory for each new projects, and run "wpg" (again, no additional options) again to start browser and hacking.
    - One file: it only supports one JS file, unfortunately/fortunately?
    - Sharable: "wpg -b" will bundle all JS and CSS into a single index.html file, you can just send it using email.
    - Keeps working: well, keep a static html running is easy
    - Not generic: has built in SCSS and Babel support (still babel 5 sorry)
    - Not prod-ready: wpg is really limited for just very early prototyping

  • chestozo

    Why not jsbin.com? The only thing that I am not sure of is "Keeps working"...

  • RusAlexander

    You want to back in place where no git push, but where you been uploading via ftp woth a source control hell. With more things you have to learn on start, web servers set up, url rewrite, cgi... instead today you have npm install && npm start

  • Pop Vasile

    I guess there's nothing easier to use than Meteorjs + React. Nothing.

  • Jesse Sibley

    Can totally relate to this. Definitely going to give this a shot!

  • Joel
  • http://www.wo.36uu.cc/ wo

    Happy New Year.

  • http://www.17148153.35kk.cc/ 17148153

    看看!

  • http://www.cao.eeequn.com/ 益群网

    只需10元钱,4万G资源一键转存到你的360网盘

    囊括:

    网赚项目、名师讲座、设计素材、致富技术

    网络教程、文档资料、公开课,小说下载等等

    http://www.cao.eeequn.com/

    乙未年(羊)冬月廿六 2016-1-5

  • http://www.96439.eeequn.com/ 益群网

    【益群网:逆向网赚,坐等收钱】

    【系统优势:】
    优势1:静态分红,每日签到就有钱,每日最高一百元
    优势2:十级提成,逆向网赚,什么不干,照样有钱赚
    优势3:百万资源,永久更新,可一键转存到自己网盘

    【自动下滑:】
    每人限定5个一级下线,多推荐的自动下滑到一级下线名下
    从而成为推荐者的二级下线。以此类推,直至十级。
    无论这个下线是谁推荐的,你都有钱。
    你直接推荐的每个你提成5元,上线或下线推荐的每个你提成0.5元
    总之,多干多赚,什么都不干,照样有钱赚。

    免费注册网址:

    http://www.96439.eeequn.com/

  • http://www.pkasid.com Paris Kasidiaris

    Maybe you should give a try at http://www.sourcelair.com.

    It is an in-browser IDE that supports JavaScript (browser and Node.js) out of the box. It provides you with a boilerplate for each project you create (no need to create any files yourself to get started).

    It also provides each of your projects with a public URL (subdomain) mapped to its web server, which you can share with anyone and works even hours after you logged out.

    There are several other fancy features that you might be interested in, but I guess that this should be enough for you to just give it a try. I have to make the disclaimer though that I am one of the co-founders of SourceLair.

    Hope I helped 😊.

  • http://pixelhunter.me voronianski

    Your challenge is about to introduce one more level of complexity or new tool that newbies will need to learn. What is the problem with a http://fooo.fr/~vjeux/ and uploading there `test-something.html` file? My solution to your problem is this gist - https://gist.github.com/voronianski/f67f4973687434f474b4 It's simple html file that includes browser bundles of React and ReactDOM with Babel in-browser transpiler.

  • http://www.salsitasoft.com Matthew Gertner

    Isn't the requirement for an IDE that automatically uploads your files to a server when they are saved orthogonal to the JS-related question (which a few people in this thread seem to have answered adequately)?

  • http://www.472086.36u.win/ 益群网

    益群网:逆向网赚,坐等收钱

    【会员福利】

    优势一:静态分红,免费签到就有钱,每日最高一百元

    优势二:十级提成,逆向网赚,什么不干,照样有钱赚

    优势三:营销软件,无限下载,每日增加,且永久更新

    【自动下滑】

    每人限定五个下线,多推荐的自动下滑到一级下线名下

    从而成为推荐者的二级下线,以此类推,直到十级

    不论这个下线是谁直接推荐的,你都有提成

    你直接推荐的每个你提成5元,非直接推荐的每个你提成0.5元

    总之,多干多赚,什么都不干也照样赚

    【注册网址】

    http://www.472086.36u.win/

  • tiptronic

    Hm... 'No setup' seems to mean: No setup except installing node, npm, wpg and its dependencies 😉

  • tiptronic

    So you can put Meteorjs + React on a clean VPS and just click and run? Wow - that's easy 😉

  • http://daiwei.lu Daiwei

    And of cause you also have to buy a computer, finished first time config, figure out how to use terminal, set currect PATH in shell 😉

  • tiptronic

    Not true (because you don't need to buy a computer to get some webspace) - AND (btw), if you rent some basic VPS in close to no cases is node and npm installed (Aoache, PHP, Perl, Python mostly is) - nor do you have shell-access. So my commentary was not meant as joke, but out of practical experience...

  • http://daiwei.lu Daiwei

    Understood. But wpg is not meant to run on server anyway. It's very basic and only supports browser code. If you have nothing but a browser setup, you should be able to use codepen.io. However, you can bundle the result of wpg (which is also very basic, not meant for production) into a single html file, which I think you upload to anywhere for the internet to view.

  • tiptronic

    Don't get me wrong - I like the idea of wpg pretty much, I was merely commenting the 'No setup' portion of the comment 😉
    I will try wpg asap - so thanks for this hint (and tool) anyway!

  • http://daiwei.lu Daiwei

    Haha, I see. Sorry for being so serious. I was half joking at the beginning. But yes, any feedback is welcome.

  • http://pixelhunter.me voronianski
  • http://www.22165.35kk.cc/ 22165

    年前再来转转!

  • https://sedo.com/search/details.php4?language=en&domain=356688.com 356688

    honey,how are you

  • http://www.356688.com/ 356688

    It's not bad

  • http://www.cao.eeequn.com/ 益群网

    【益群网:逆向网赚,不用推广,坐等收钱】

    【系统优势:】
    优势1:静态分红,免费签到,就有钱赚,每日百元
    优势2:十级提成,逆向网赚,什么不干,坐收千万
    优势3:群发软件,名师讲座,百万资源,一键转存
    优势4:百万现金,每月发放,不限人数,上不封顶

    【自动下滑:】
    每人限定五个一级下线,多推荐的自动下滑到一级下线名下
    从而成为推荐者的二级下线。以此类推,直至十级。
    不论这个下线是谁直接推荐的,上线都有提成
    你直接推荐的每个你提成 15 元,上线帮你推荐的每个你提成 1.5 元
    总之,多干多赚,什么都不干,照样有钱赚。

    免费注册网址:

    http://www.cao.eeequn.com/

    评论由软件自动采集群发,如有打扰,屏蔽域名即可

  • nickdreckshage

    Ask and you shall receive (or be careful what you wish for...)! https://github.com/ndreckshage/sambell -- doesn't hit everything but working in that direction. 1 file for a universal single page app!

  • http://www.680.35uu.top/ 益群网

    看一看来瞧一瞧,这个博客真是好!

  • http://www.zengda.xin/ zengda

    不错,不错,看看了!

  • Eduárd Moldován

    Reading this a few months later - any solution?

  • http://www.898770210.35kk.cc/ 898770210

    博客多久更新一次?

  • http://www.3966344.35aa.cc/ 益群网QQ-3966344

    逆向直销,震撼来袭,什么不干,坐等收钱

    系统优势:

    优势1:静态分红,免费签到,就有钱赚,每日百元

    优势2:十级提成,逆向网赚,什么不干,坐收千万

    优势3:营销软件,网赚项目,百万资源,一键转存

    优势4:独立域名,八个栏目,无限广告,免费发布

    免费注册网址:

    http://www.3966344.35aa.cc/

  • http://www.435876343.bbddaa.com/ 435876343

    我又来了,您高兴吗?!

  • dothash

    It's not every step you wanted it to be, but it's not much you need to do before start hacking / prototyping.
    https://github.com/rocjs/roc

  • http://www.hire-php-developers.co.uk Jonathan Doherty

    Nice article.

  • Marks Polakovs

    It's not quite what you want, but https://hyperdev.com/ seems to be scratching a similar itch.

  • gansai

    https://plnkr.co/ - PLUNKER

    https://codepen.io/ - CODEPEN

    These are quick prototyping solutions on the web, as far as front end is concerned.

    (currently blogging @ http://iotenthu.com

 

Related Posts

  • March 6, 2012 Github Oauth Login – Browser-Side (15)
    I'm working on an application in the browser that lets you take notes. I don't want to have the burden to save them on my own server therefore I want to use Github Gists as storage. The challenge is to be able to communicate with the Github API 100% inside the browser. Since it is a […]
  • September 11, 2011 WebGL – Julia 3D Representation (0)
    At school we've been studying Lie Algebra and we were asked to make a 3D representation of a Lie Group. We chose to represent Julia Set in the Quaternion domain. We were really impressed to see that it was possible to generate many different forms given such a simple […]
  • April 3, 2014 Hack is to PHP what ES6 is to JavaScript (11)
    PHP and JavaScript are both renowned to be languages with a lot of quirks. However two major initiatives on both sides, Hack for PHP and ES6 for JavaScript made the languages much better and modern. In this article I'm going to show all the ES6 features that are also in Hack. Arrow […]
  • August 14, 2009 Mysqli Wrapper – Short and Secure Queries (29)
    Mysqli Wrapper is shortening the code required to run queries, make them 100% safe against SQL Injections and gives a handy Array as result. No more pain writing queries! You can view the source at the MysqliWrapper Github Repository. When developing a PHP application, SQL […]
  • November 4, 2013 Bitwise Truthiness (0)
    In this blog post, I explore another form of truthiness in Javascript. What happens if you use a bitwise operator on a value like 0|value or ~~value. Context We recently turned on the JSHint bitwise rule by default and the following code was caught. var isValid = false; for […]