The Closure Compiler was originally released, in Java, back in 2009. Today, we're announcing the very same Closure Compiler is now available in pure JavaScript, for use without Java. It's designed to run under NodeJS with support for some popular build tools.
If you've not heard of the Closure Compiler, it's a JavaScript optimizer, transpiler and type checker, which compiles your code into a high-performance, minified version. Nearly every web frontend at Google uses it to serve the smallest, fastest code possible.
It supports new features in ES2015, such as let, const, arrow functions, and provides polyfills for ES2015 methods not supported everywhere. To help you write better, maintainable and scalable code, the compiler also checks syntax, correct use of types, and provides warnings for many JavaScript gotchas. To find out more about the compiler itself, including tutorials, head to Google Developers.
This isn't a rewrite of Closure in JavaScript. Instead, we compile the Java source to JS to run under Node, or even inside a plain old browser. Every post or resource you see about Closure Compiler will also apply to this version.
To find out more about Closure Compiler's internals, be sure to check out this post by Dimitris (who works on the Closure team at Google), other posts on the Closure Tools blog, or read an exploratory post about Closure and how it can help your project in 2016.
Note that the JS version is experimental. It may not perform in the same way as the native Java version, but we believe it's an interesting new addition to the compiler landscape, and the Closure team will be working to improve and support it over time.
To include the JS version of Closure Compiler in your project, you should add it as a dependency of your project via NPM-
npm install --save-dev google-closure-compiler-js
To then use the compiler with Gulp, you can add a task like this-
const compiler = require('google-closure-compiler-js').gulp(); gulp.task('script', function() { // select your JS code here return gulp.src('./src/**/*.js', {base: './'}) .pipe(compiler({ compilation_level: 'SIMPLE', warning_level: 'VERBOSE', output_wrapper: '(function(){\n%output%\n}).call(this)', js_output_file: 'output.min.js', // outputs single file create_source_map: true })) .pipe(gulp.dest('./dist')); });
If you'd like to migrate from google-closure-compiler (which requires Java), you'll have to use gulp.src() or equivalents to load your JavaScript before it can be compiled. As this compiler runs in pure JavaScript, the compiler cannot load or save files from your filesystem directly.
For more information, check out Usage, supported Flags, or a demo project. Not all flags supported in the Java release are currently available in this experimental version. However, the compiler will let you know via exception if you've hit any missing ones.
Posted by Eitan Marder-Eppstein, Senior Software Engineer for Tango
Technology helps us connect and communicate with others -- from sharing commentary and photos on social media to a posting a video with breaking news, digital tools enable us to craft stories and share them with the world.
Tango can enhance storytelling by bringing augmented reality into our surroundings. Recently, the Tango team hosted a three-day developer workshop around how to use this technology to tell incredible stories through mobile devices. The workshop included a wide range of participants, from independent filmmakers and developers to producers and creatives at major media companies. By the end of the workshop, a number of new app prototypes had been created. Here are some of the workshop highlights:
We even had an independent developer use Tango to create realtime video stabilization tool. We’re looking forward to seeing these apps—and many more—come to life. If you want to start building your own storytelling and visual communication apps for augmented reality, check out our developer page and join our G+ community.
Posted by Roy Glasberg Global Lead, Launchpad Accelerator
We’re heading to the city of San Francisco this September to open a new space for developers and startups. With over 14,000 sq. ft. at 301 Howard Street, we’ll have more than enough elbow room to train, educate and collaborate with local and international developers and startups.
The space will hold a range of events: Google Developer Group community meetups, Codelabs, Design Sprints, and Tech Talks. It will also host the third class of Launchpad Accelerator, our equity-free accelerator for startups in emerging markets. During each class, over 20 Google teams provide comprehensive mentoring to late-stage app startups who seek to scale and become leaders in their local markets. The 3-month program starts with an all-expenses-paid two week bootcamp at Google HQ.
Developers are in an ever-changing landscape and seek technical training. We’ve also seen a huge surge in the number of developers starting their own companies. Lastly, this is an unique opportunity to bridge the gap between Silicon Valley and emerging markets. To date Launchpad Accelerator has nearly 50 alumni in India, Indonesia, Brazil and Mexico. Startups in these markets are tackling critical local problems, but they often lack access to the resources and network we have here. This dedicated space will enable us to regularly engage with developers and serve their evolving needs, whether that is to build a product, grow a company or make revenue.
We can’t wait to get started and work with developers to build successful businesses that have a positive impact locally and globally.
Sam Thorogood, Developer Programs Engineer
Today, we're announcing that the open source version of Google's Santa Tracker has been updated with the Android and web experiences that ran in December 2015. We extended, enhanced and upgraded our code, and you can see how we used our developer products - including Firebase and Polymer - to build a fun, educational and engaging experience.
To get started, you can check out the code on GitHub at google/santa-tracker-web and google/santa-tracker-android. Both repositories include instructions so you can build your own version.
Santa Tracker isn’t just about watching Santa’s progress as he delivers presents on December 24. Visitors can also have fun with the winter-inspired experiences, games and educational content by exploring Santa's Village while Santa prepares for his big journey throughout the holidays.
Below is a summary of what we’ve released as open source.
We hope that this update inspires you to make your own magical experiences based on all the interesting and exciting components that came together to make Santa Tracker!
Posted by Sean Kirmani, Software Engineering Intern, Tango
Augmented reality scenes, where a virtual object is placed in a real environment, can surprise and delight people whether they’re playing with dominoes or trying to catch monsters. But without support for environmental lighting, these virtual objects can stick out rather than blend in with their environments. Ambient lighting should bleed onto an object, real objects should be seen in reflective surfaces, and shade should darken a virtual object.
Tango-enabled devices can see the world like we do, and they’re designed to bring mobile augmented reality closer to real reality. To help bring virtual objects to life, we’ve updated the Tango Unity SDK to enable developers to add environmental lighting to their Tango apps. Here’s how to get started:
Before we begin, you’ll need to download the Tango Unity SDK. Then you can follow the steps below to make your reality a little brighter.
Step 1: Create a new Unity project and import the Tango SDK package into the project.
Step 2: Create a new scene. If you need help with this, check out the solar system tutorial from a previous post. Then you’ll add Tango Manager and Tango AR Camera prefabs to your scene and remove the default Main Camera game object. Also remove the artificial directional light. We won’t need that anymore. After doing this, you should see the scene hierarchy like this:
Step 3: In the Tango Manager game object, you’ll want to check Enable Video Overlay and set the method to Texture and Raw Bytes.
Step 4: Under Tango AR Camera, look for the Tango Environmental Lighting component. Make that the the Enable Environmental Lighting checkbox is checked.
Step 5: Add your game object that you’d like to be environmental lit to the scene. In our example, we’ll be using a pool ball. So let’s add a new Sphere.
Step 6: Let’s create a new material for our sphere. Go to Create > Material. We’ll be using our environmental lighting shader on this object. Under Shader, select Tango > Environmental Lighting > Standard.
Step 7: Let’s add a texture to our pool ball and tweak our smoothness parameter. The higher the smoothness, the more reflective our object becomes. Rougher objects have more of a diffuse lighting that is softer and spreads over the surface of the object. You can download the pool_ball_texture and import it into your project.
Step 8: Add your new material to your sphere, so you have a nicer looking pool ball.
Step 9: Compile and run the application again. You should able see environment lit pool ball now!
You can also follow our previous post and be able to place your pool ball on surfaces. You don’t have to worry about your sphere rolling off your surface. Here are some comparison pictures of the pool ball with a static artificial light (left) and with environment lighting (right).
We hope you enjoyed this tutorial combining the joy of environmental lighting with the magic of AR. Stay tuned to this blog for more AR updates and tutorials!
You’ve just created a more realistically light pool ball that live in AR. That’s a great start, but there’s a lot more you can do to make a high performance smartphone AR application. Check out our Unity example code on Github (especially the Augmented Reality example) to learn more about building a good smartphone AR application.
Posted by Robbie Tilton, UX Designer, Google VR
At Daydream Labs, we have experimented with social interactions in VR. Just like in real reality, people naturally want to share and connect with others in VR. As developers and designers, we are excited to build social experiences that are fun and easy to use—but it’s just as important to make it safe and comfortable for all involved. Over the last year, we’ve learned a few ways to nudge people towards positive social experiences.
What can happen without clear social norms
People are curious and will test the limits of your VR experience. For example, when some people join a multiplayer app or game, they might wonder if they can reach their hand through another player’s head or stand inside another avatar’s body. Even with good intentions, this can make other people feel unsafe or uncomfortable.
For example, in a shopping experiment we built for the HTC Vive, two people could enter a virtual storefront and try on different hats, sunglasses, and accessories. There was no limit to how or where they could place a virtual accessory, so some people stuck hats on friends anywhere they would stick—like in front of their eyes. This had the unfortunate effect of blocking their vision. If they couldn’t remove the hat in front of their eyes with their controllers, they had no other recourse than to take off their headset and end their VR experience.
Protecting user safety
Everyone should feel safe and comfortable in VR. If we can anticipate the actions of others, then we may be able to discourage negative social behavior before it starts. For example, by designing personal space around each user, you can prevent other people from invading that personal space.
We built an experiment around playing poker where we tried new ways to discourage trolling. If someone left their seat at the poker table, their environment desaturated to black and white and their avatar would disappear from the other player’s view. A glowing blue personal space bubble would guide the person back to their seat. We found it’s enough to prevent a player from approaching their opponents to steal chips or invade personal space.
Reward positive behavior
If you want people to interact in positive ways—like high-fiving 🙌 —try giving them an incentive. In one experiment, we detected when two different avatars “touched” each other’s hands at high speed. This triggered a loud slapping sound and a fireworks animation. It sounds simple, but people loved it. Meanwhile, if you tried to do something more aggressive, like punching an avatar’s body, nothing would happen. You can guess which behavior people naturally preferred.
Posted by Justin Quimby, Senior Product Manager Tango
At Tech World last month, our team showed off some of the latest Tango-enabled games. One crowd favorite was Domino World by Schell Games which will will be available on the first Tango-enabled device, Lenovo’s Phab 2 Pro, coming this fall. Schell Games has adapted a few classic games, including Jenga, into smartphone augmented reality, and their developers share their experience and considerations they kept in mind as they gave dominoes a new twist.
Google: How did your team first hear about Tango technology?
Schell Games: The Tango team invited us to their Game Developer Workshop where we learned about Tango and the types of apps we could develop for this platform.
Google: You took a classic game, and added AR elements. How did you come to dominoes?
Schell Games: At the Game Developer Workshop, we prototyped three games: a racing game, Jenga and a pet game. Of the three games, people connected the most with Jenga.
People loved sharing a device to play the game together—and they loved that they didn’t have to pick up all the Jenga pieces when the game was over! And from a developer perspective, Jenga was great as it highlighted Tango’s ability to recognize surfaces.
Based on how much people liked Jenga, we decided that Domino World would be our second game. Domino World gives players all the fun of dominoes, but without the setup effort or mess. We were inspired by YouTube videos where people of all ages were doing really creative things with dominoes. Our goal was to bring that experience to the phone as an immersive and fun augmented-reality experience.
Google: Which Tango features did you use in Jenga and Domino World?
Schell Games: We used motion tracking, which lets people walk around their dominoes or Jenga tower. We also used surface detection with the depth camera, so that the device recognizes when objects are placed on a surface.
Google: How does your development approach differ for AR apps versus standard mobile apps?
Schell Games: With Domino World, for example, our approach to augmented reality thrives on reinforcing the feeling that the player’s display is a “window on the world.” Toys and dominoes are (virtually) placed on the actual surfaces around the player, and the game’s controls aid players in manipulating objects in the space in front of them. As a result, the player is naturally encouraged move around as they view, adjust and otherwise shape their ever-growing creations.
In contrast, traditional touchscreen controls largely work with metaphors of interacting with the screen’s image itself -- drawing on it, pinch-zooming it, etc. As a result, a more traditional touchscreen-controlled Domino World could have influenced players to remain more static and work with the existing view, as opposed to moving around to different vantage points.
Google: We noticed that you use a landscape orientation for Domino World. How did you decide to take that approach.
Schell Games: The decision to use landscape orientation for Domino World is the result of multiple smaller reasons all put together:
Google: What surprised you the most while building with Tango?
Schell Games: We were quite surprised at how easy it was to build with the Tango SDK and add Tango functionality to our apps. We used the Unity Engine which made the whole process quite seamless. It took us just over two weeks to build Jenga and 10 weeks to build Domino World from beginning to end.
Google: How do you think Tango will change the way people play games?
Schell Games: Tango makes it easy to play AR games. You don’t need to print and cut out AR trackers or markers to place throughout your room to help orient the phone. Instead, your phone always knows where it is in relation to the AR objects and you can easily start playing—whether you’re in a living room or on a bus. It’s incredible to have this experience with just your mobile device.
Posted by Philip Walton, Developer Programs Engineer
Autotrack is a JavaScript library built for use with analytics.js that provides developers with a wide range of plugins to track the most common user interactions relevant to today's modern web.
The first version of autotrack for analytics.js was released on Github earlier this year, and since then the response and adoption from developers has been amazing. The project has been starred over a thousand times, and sites using autotrack are sending millions of hits to Google Analytics every single day.
Today I'm happy to announce that we've released autotrack version 1.0, which includes several new plugins, improvements to the existing plugins, and tons of new ways to customize autotrack to meet your needs.
Note: autotrack is not an official Google Analytics product and does not qualify for Google Analytics 360 support. It is maintained by members of the Google Analytics developer platform team and is primarily intended for a developer audience.
Based on the feedback and numerous feature requests we received from developers over the past few months, we've added the following new autotrack plugins:
The impression tracker plugin allows you to track when an element is visible within the browser viewport. This lets you much more reliably determine whether a particular advertisement or call-to-action button was seen by the user.
Impression tracking has been historically tricky to implement on the web, particularly in a way that doesn't degrade the performance of your site. This plugin leverages new browser APIs that are specifically designed to track these kinds of interactions in a highly performant way.
If your analytics implementation sends pageviews to Google Analytics without modifying the URL, then you've probably experienced the problem of seeing multiple different page paths in your reports that all point to the same place. Here's an example:
/contact
/contact/
/contact?hl=en
/contact/index.html
The clean URL tracker plugin avoids this problem by letting you set your preferred URL format (e.g. strip trailing slashes, remove index.html filenames, remove query parameters, etc.), and the plugin automatically updates all page URLs based on your preference before sending them to Google Analytics.
Note: setting up View Filters in your Google Analytics view settings is another way to modify the URLs sent to Google Analytics.
It's becoming increasingly common for users to visit sites on the web and then leave them open in an inactive browser tab for hours or even days. And when users return to your site, they often won't reload the page, especially if your site fetches new content in the background.
If your site implements just the default javascript tracking snippet, these types of interactions will never be captured.
The page visibility tracker plugin takes a more modern approach to what should constitute a pageview. In addition to tracking when a page gets loaded, it also tracks when the visibility state of the page changes (i.e. when the tab goes into or comes out of the background). These additional interaction events give you more insight into how users behave on your site.
In addition to the new plugins added to autotrack, the existing plugins have undergone some significant improvements, most notably in the ability to customize them to your needs.
All plugins that send data to Google Analytics now give you 100% control over precisely what fields get sent, allowing you to set, modify, or remove anything you want. This gives advanced users the ability to set their own custom dimensions on hits or change the interaction setting to better reflect how they choose to measure bounce rate.
Users upgrading from previous versions of autotrack should refer to the upgrade guide for a complete list of changes (note: some of the changes are incompatible with previous versions).
Perhaps the most common question we received after the initial release of autotrack is who should use it. This was especially true of Google Tag Manager users who wanted to take advantage of some of the more advanced autotrack features.
Autotrack is a developer project intended to demonstrate and streamline some advanced tracking techniques with Google Analytics, and it's primarily intended for a developer audience. Autotrack will be a good fit for small to medium sized developer teams who already have analytics.js on their website or who prefer to manage their tracking implementation in code.
Large teams and organizations, those with more complex collaboration and testing needs, and those with tagging needs beyond just Google Analytics should instead consider using Google Tag Manager. While Google Tag Manager does not currently support custom analytics.js plugins like those that are part of autotrack, many of the same tracking techniques are easy to achieve with Tag Manager’s built-in triggers, and others may be achieved by pushing data layer events based on custom code on your site or in Custom HTML tags in Google Tag Manager. Read Google Analytics Events in the Google Tag Manager help center to learn more about automatic event tracking based on clicks and form submissions.
If you're not already using autotrack but would like to, check out the installation and usage section of the documentation. If you already use autotrack and want to upgrade to the latest version, be sure to read the upgrade guide first.
To get a sense of what the data captured by autotrack looks like, the Google Analytics Demos & Tools site includes several reports displaying its own autotrack usage data. If you want to go deeper, the autotrack library is open source and can be a great learning resource. Have a read through the plugin source code to get a better understanding of how some of the advanced analytics.js features work.
Lastly, if you have feedback or suggestions, please let us know. You can report bugs or submit any issues on Github.
