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.


libraries animation graphics angularjs polymer

ng-polymer-elements, Easy CSS Animations

Posted on .


ng-polymer-elements (GitHub: GabiAxel / ng-polymer-elements, License: MIT) by Gabriel Axel is a library for mapping between AngularJS models and Polymer data-bindings.

It comes with support for various components, including core-input, paper-input, paper-checkbox, and paper-toast. As an example, binding the Angular scope's myText property to Polymer's paper-input looks like this:

<paper-input ng-model="myText"></paper-input>  

You can extend the supported components by adding mappings to window.NG_POLYMER_ELEMENTS_EXTENDED_MAPPINGS. There's an example of this in the readme.

Easy CSS Animations

Erica Salvaneschi wrote Easy CSS Animations, which demonstrates how to animate illustration-based web designs with CSS. The animations are subtle but interesting -- I like the ones that persist after the initial page load.

CSS animations are an excellent way to make web pages look cool with relatively little effort. We used animations in our recent Windows Beta release page to bring our designer's creative doodles to life. Since then we've released Papers 3 for Windows and created more pages with subtle animations.

We've extracted the CSS for you and shared it in this GitHub repository: mekentosj/blog-windows-animations.

She's included some tips about using Retina.js, and basic drawing with CSS borders.


node apps modules chrome git polymer

git-html5.js, TodoMVC 1.2

Posted on .



git-html5.js (GitHub: ryanackley / git-html5.js, License: MIT) by Ryan Ackley is a Git implementation for JavaScript:

git-html5.js is a pure JavaScript git client library. It implements a complete Git workflow in nothing but JavaScript. It's meant to run in a browser environment and depends on so-called "html5" APIs. Some example use cases:

Ryan took Adobe's Brackets app, ported to run as a Chrome packaged app, and then added git-html5.js to create an editor that can read and write to Git repositories. I've tried out the basics and it seems to work pretty well.

The project includes tests and build instructions, but you can just run the Tailor app in Chrome if you want to try it out.

TodoMVC 1.2

Sindre Sorhus sent in TodoMVC 1.2, an update to the monster MV asterisk collection:

We released TodoMVC 1.2 yesterday with some new app examples of frameworks from Google (Polymer), Twitter (Flight) and Facebook (React), and other improvements.

If you're interested in seeing what a small but functional Polymer project looks like, then check it out!