The JavaScript blog.


google-maps react polymer services ui libraries

Isomorphic Google Maps, MyScriptJS

Posted on .

Isomorphic Google Maps

Ivan Starkov sent in an isomorphic Google Maps component for React (GitHub: istarkov/google-map-react, License: MIT, npm: google-map-react). It provides several useful features, including rendering any React component over maps, lazy loading of the Google Maps API, and isomorphic rendering.

By rendering maps on the server, you can improve search engine visibility, and render maps without requiring JavaScript in the browser. Naturally you could also do other cool stuff with server-side libraries that would otherwise be made difficult in the browser.

The ability to render any React component over a map means you make dynamic map features that feel very fast -- Ivan's library calculates the co-ordinates independently of Google Maps, so you can treat your React code separately instead of worrying too much about how it relates to Google Maps.

Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker.

This algorithm allows you to tweak hover probability of map objects, for example making some objects "more hoverable". distance_hover example with different hover probabilities

The main example shows a map combined with fast infinite scrolling, SVG icons, and balloons made with React.


MyScript is a service for handwriting and handwritten shape recognition. Gregory Pakosz sent in some Polymer MyScript components for interacting with the service. The components are built with MyScriptJS, and they cover things like mathematical expression and text recognition.

MyScript Web Components

The demos on the MyScript Web Components homepage are interactive, so if you select the <myscript-math> example and press play you should be able to draw some equations and see the results.


google services node

Google Get MEAN

Posted on .

Google MEAN

Melissa from Linnovate, the company behind MEAN.IO, wrote in to say Google have announced support for MEAN on Google Compute Engine.

Normally when I think of Google I think Java and Python. Other services including Heroku and Azure support a wide range of platforms, including Node, so it's exciting to see Google offering MEAN.

The developer guide is here: MEAN development stack on Google Compute Engine, but it's worth noting that the MEAN stack can be brought up with click-to-deploy. That means you can get MongoDB, Express, and Angular running in minutes, using a web-based wizard.

I'm not exactly sure how the pricing works with MongoDB, because SQL database pricing is different from Compute Engine. I created a click-to-deploy MEAN project and it seemed to show all the resources under Compute Engine, so I think that means all prices are based on CPU/disk usage.

I make a lot of Express apps, and Google's developer tools (including the web console) seem compelling even next to Heroku and Azure, so I'd definitely like to try this for a real project soon!


services sponsored-content obfuscation


Posted on .


Well-known libraries such as Google Closure, YUI compressor or UglifyJS minify, compress and optimize JavaScript. The techniques they use can be collectively referred to as JavaScript optimization. They are great at improving overall page load speed, but fall short if you are interested in protecting your source code from code theft and reuse, tampering, or reverse engineering.

Despite that, optimized code is often confused with obfuscated code. For example, compressed code is completely encoded, which at first glance may seem to be highly obfuscated, but a simple run is often enough to retrieve something very similar to the original code. In short, these tools do a good job optimizing your code, but they don't protect it. (fiddle: demo, Google Compiler optimized demo and beautified optimized demo).

JScrambler goes beyond these libraries by offering advanced obfuscation (JScrambler obfuscated version) that can protect your code. It leverages obfuscation by inserting a number of different code traps to control execution and to enforce licensing. For example, you can lock the code to a list of predefined domains. If someone tries to execute the code elsewhere, the code breaks.

JScrambler just released a new version (3.5) that takes protection even more seriously. It introduces a completely new technique that provides JavaScript files with self-defending capabilities by installing a combination of anti-tampering and anti-debugging. If you try to change a single character, the code will react by breaking down intentionally (try it on JScrambler self-defending demo). It also adds new code traps to restrict execution to a certain Browser or OS, code blocks to give the developer the ability to enable/disable individual source code transformations in certain parts of the code.

There are lots of reasons why you may want to protect your code. People might try to steal your code to reuse it, perhaps to build a similar product, or to replicate a similar user experience. You may have secret algorithms or keys hidden in the code that may be easily recovered by inspecting your code. If you are selling your app, you may be worried about piracy. JavaScript can be easily copied and executed, without your authorization. And last but not least, there are all sorts of security risks, like people figuring out ways to interfere with your code, to commit fraud, or to steal data -- from you, or from your users. JScrambler goes along way to combating these problems, despite the fact that there are no bulletproof solutions.

As expected, these techniques have a cost in file size and execution, but because JScrambler also has optimization features, this extra cost can be controlled -- as proven by running the two protected demos. You don't have to give up performance to get protection.

JScrambler's web interface is simple and easy to use. In five minutes you can get your application protected. You upload the source, click a button, then wait a few seconds and download the results. JScrambler provides templates that were designed to work out of the box in most cases. It includes all sorts of JavaScript-based applications, including HTML5 Canvas, Node.js, Windows 8 WinJS Apps, etc. If you want to automate your builds, an API is also provided, and few ready to use clients, including a Node grunt task.

For more examples, see the full set on jscrambler.com.


jquery services apps angularjs

JellyReader: Dropbox/Google Drive Feed Reader

Posted on .

Ray Wang sent in JellyReader (GitHub: NimbusBase / jellyreader, License: MIT), an entirely client-side feed reader that is powered by Google Drive and Dropbox. NimbusBase has been used to unify access to Google Drive and Dropbox, so the data is ultimately stored as flat files.

JellyReader itself is implemented with jQuery and AngularJS. It allows you to add feeds, view entries, toggle the read state, and you can also star your favourite items. I tried it out with my Dropbox account, and Dropbox states that the application only has access to an "app" folder:


I added DailyJS to it:

Jelly add feed

And the stories are rendered as you might expect:

Jelly feed view

After playing around with the web interface for a while, I wondered what the files on Dropbox looked like. Each data collection is serialised in a directory, and there is a file per item. So feeds have a directory, and stories do as well. UUIDs are used to ensure the filenames don't clash.


Presumably NimbusBase data has the same structure on Google Drive.

The JellyReader source uses lots of third party components, including jFeed which I haven't seen for a few years. I actually like the flat file approach for personal, self-hosted applications like this, although it would be interesting to see a comparison with a Dropbox Datastore implementation.


jquery ui plugins services tables sponsored-content

jQuery Roundup: spy-js, yadcf

Posted on .

Note: You can send your plugins and articles in for review through our contact form.



spy-js, created by Artem Govorov, is a commercial tool that aims to make JavaScript instrumentation better. You can use it to trace, debug, and profile code that would otherwise be difficult to work with.

Although tools like Chrome DevTools are excellent, the advantage of spy-js is it can work with any browser. It also allows performance between browsers to be compared more easily.

spy-js in action.

There's a free beta which you can download from spy-js.com, and issues are being tracked on GitHub. The documentation is also on GitHub, at spy-js/spy-js. The project isn't open source, but the author intends to keep it free while he collects beta feedback.

For more information, take a look at spy-js.com and @SpyDashJs on Twitter.


Yet Another DataTables Column Filter (GitHub: vedmack / yadcf, License: GPL2/BSD, jQuery: yadcf) by Daniel Reznick is a plugin for DataTables that adds filtering components. It can filter based on a select, or the jQuery UI Autocomplete widget. It also parses different data types, like delimited plain text and HTML elements.

    { column_number: 0 },
    { column_number: 1, filter_container_id: 'external_filter_container' },
    { column_number: 2, data:['Yes', 'No'], filter_default_label: 'Select Yes/No' },
    { column_number: 3, text_data_delimiter: ',', enable_auto_complete: true },
    { column_number: 4, column_data_type: 'html', html_data_type: 'text', filter_default_label: 'Select tag' }]);

It also works perfectly well with multiple tables on a page. For more examples, check out the yadcf showcase and the project's readme.