Download Chrome Dev Editor developer pre-release

Chrome Dev Editor is a web development environment running as a packaged app inside Google Chrome. It is based on the open source project Spark developed by Google since November 2013 using the Dart language and Polymer elements. Chrome Dev Editor supports building JavaScript & Dart web apps, Chrome apps, Polymer elements and widgets. It is going to be officially announced at Google I/O 2014, but you can download the developer pre-release version 0.13 below. Keep in mind, that you use it at your own risk.

To install Chrome Dev Editor, you would probably need a developer channel of Google Chrome. Go to chrome://extensions, drag and drop the CRX file there. You will be asked to install the packaged app.

On the first run, the app could hang at a splash screen for a while:

 In the main window, you can click the wrench icon to check the settings:

You can create your new project, deploy it or clone the Git repository using the hamburger icon:

You can run the HTML file using the context menu or the play icon:

Chrome Dev Editor provides code autocompletion and highlighting:

It even provides an integrated web server and supports Web Starter Kit out of the box:

Download Chrome Dev Editor packaged app (CRX)



Disclaimer: This is an unofficial developer pre-release. I am not affiliated with Google.

How to add Google+ Comments to any website

Google+ Comments is a social wigdet from Google, which works similar to Facebook Comments Box or Disqus. For now, it is available only for blogs on the Blogger platform. But here is an unofficial way to embed Google+ Comments on any website or blog:

1. Edit your website and add this HTML:
   

   <script src="https://apis.google.com/js/plusone.js">
   </script>
   <g:comments
       href="[URL]"
       width="642"
       first_party_property="BLOGGER"
       view_type="FILTERED_POSTMOD">
   </g:comments>

   or a valid HTML5 version:
   

   <script src="https://apis.google.com/js/plusone.js">
   </script>
   <div class="g-comments"
       data-href="[URL]"
       data-width="642"
       data-first_party_property="BLOGGER"
       data-view_type="FILTERED_POSTMOD">
   </div>

2. If you want to insert a comments counter, add this HTML code instead of <g:comments>:
   

   <g:commentcount href="[URL]"></g:commentcount>

   or a valid HTML5 version instead of <div class="g-comments">:
   

   <div class="g-commentcount" data-href="[URL]"></div>

3. Replace [URL] with the URL of your web page and fit the width.
4. Link your web page to your Google+ profile.

If you prefer to load Google+ Comments dynamically, insert this HTML code:

<div id="comments"></div>
<script>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>

Similarly with Google+ Comments Counter:

<div id="commentscounter"></div>
<script>
gapi.commentcount.render('commentscounter', {
    href: window.location
});
</script>

You can see it in action on the Google+ and Facebook Comments page.