Formatting Code Samples in a Google Docs Document

JavaScript

Formatting code in Google Docs

If you are formatting code samples for your Google Docs document, there is an odd little tool that you might find quite helpful.

I recently worked on a project for a client that required adding JavaScript code samples to the documentation. At first I made a very bad assumption that there was no way for formatting code in a Google Document, so I started out using images of code samples. What a waste of time. Finally, it occurred to me that this must be a common challenge.

It turns out that there are two tools available: “Code Pretty,” and “Online syntax highlighter like TextMate.”

OPTION # 1: Online syntax highlighter like TextMate

Formattig CodeThere is an odd little tool called: “Online syntax highlighter like TextMate.” At first glance, this page might appear incomplete, if not broken. It is interestingly un-styled and bare-bones. But here is the thing: this tool is actually pretty awesome. Just paste your code snippet in, choose from one of the many supported languages, then click the “Highlight” button. You wind up with two things: raw HTML and formatted text. The HTML is perfect if you need markup. Copy and paste this formatted text into a Google Docs document. The final impressive feature is the “Style” drop-down. There are about 20 different themes to choose from. For example,  an example of formatted code generated with the Online syntax highlighter like TextMate tool is to the left.

Link for Online syntax highlighter like TextMate: http://markup.su/highlighter/

OPTION # 2: Code Pretty

Code Pretty is not bad. After a super-easy Chrome install, I was fortunately able to format code blocks quickly and easily. There are however,  clearly some drawbacks to Code Pretty.

Unfortunately, the only formatting option is font-size.  Also after a while, Code Pretty generated repeated messages saying that too many calls were being made to the service

Ultimately, Code Pretty simply stopped working. After a while it was functional again, but there is no pattern to the issue. Therefore this is not a recommended application.

Installation Link for Code Pretty:  https://chrome.google.com/webstore/detail/code-pretty/igjbncgfgnfpbnifnnlcmjfbnidkndnh?hl=en

Summary

Code Pretty” is good, but has issues and a limited feature-set. On the whole,  “Online syntax highlighter like TextMate” is an oddly-named, yet super-useful tool that is otherwise perfect for use with Google Docs documents.

Helpful Links

https://docs.google.com

http://markup.su/highlighter/

Getting Started with the Google Maps JavaScript API – Part III: Adding an Event Listener

JavaScript

Google Maps LogoAdding an event listener to your map is much like using the addEventListener() method on a DOM element.

In Part II of this article, we learned how to add a marker to a Google Map. In Part III of this article, we will learn how to add an event listener to the map. The google.maps object has an event object. One of that object’s methods is called “addListener()”. It’s not too different from the .addEventListener() method that is used to add an event handler to a DOM element in a web page. The google.maps.event.addListener() method takes three arguments:

  • A target
  • An event
  • A callback

The callback can be a reference to a function declaration (or function expression), or an anonymous function. Inside of the callback, you respond to the user’s click.

Example # 1

In Example # 1, we used the the google.maps.event.addListener() method to set up an event handler for when the user clicks the marker on our map. Since we are building upon the demo from Parts I & II of this article, we pass-in “marker” as the first argument, which is a variable we created earlier, that represents an instance of the Marker() object.

Example # 2

In Example # 2, we instantiate the InfoWindow() constructor. The InfoWindow object is a pretty cool feature that provides abstraction for creating a great looking message window on the map. It takes care of rendering the message graphic, positioning it, and adds a nice touch with a shadow. We pass-in an object with the property: “content”. The value of that property is what will be shown in an info window when the user clicks the marker. We then call the open() method of the InfoWindow instance, passing-in the map and the marker as arguments. The open() method needs those objects in order to know where and how to display itself.

Example # 3

In Example # 3, we expand our event handler a bit. In addition to showing the info Window, we also switch the map to Satellite view, zoom it in, and make sure it is centered on the user’s location.

Here is the JsFiddle.net link for this article’s working demo: http://jsfiddle.net/uQ35v/2/

Summary

In this article we learned how to add an event listener to a Google Map. We discussed the google.maps.event.addListener() method, how to instantiate the InfoWindow() constructor, and how to show an info window.

Helpful Links for Adding an Event Listener to a Google Map

https://developers.google.com/maps/documentation/javascript/events

Getting Started with the Google Maps JavaScript API – Part II: Adding a Marker

JavaScript

Google Maps LogoMuch as with the map, creating a marker is done by instantiating the Marker() constructor.

In Part I of this article, we learned how to show a Google Map in a web page, using the Google Maps API. Now in this article, we’ll learn how to add a marker to the map. In Part I we created a function named “successHandler” which was passed as a callback to the getCurrentPosition() method of the navigator’s geolocation object. And inside of this function, we instantiated the Map() constructor of the google.maps object.

Example # 1

In Example # 1, we have the code that adds a marker to the map. When instantiating the Marker() constructor, we pass it an object literal, which then provides settings that the marker needs in order to display properly. The “map” property references the “map” variable that was created earlier in the scope of the “successHandler” function. Once again, we instantiate the LatLng() constructor, providing the user’s latitude and longitude values. Now the “title” property is a string and can be anything you like. It is the text that users will see when they mouse over the marker.

Example # 2

In Example # 2, we have the full-page markup for our working demo. This example builds upon the demo from Part I. So the code is virtually identical, except for instantiation of the Marker() constructor.

Here is the JsFiddle.net link for this article’s working demo: http://jsfiddle.net/uQ35v/1/

Summary

In this article we learned how to place a marker on a Google Map. In doing so, we learned that just as in the case with the map, we instantiate the Marker() constructor. We discussed how settings are passed into the constructor by using an object literal, and how to set the text that is displayed in the marker on mouse-over.

Helpful Links for adding a marker to a Google Map

https://developers.google.com/maps/documentation/javascript/examples/marker-simple

Getting Started with the Google Maps JavaScript API – Part I

JavaScript

Google Maps
Getting a Google Map to show in a web page requires an astonishingly small amount of JavaScript. In this article, we’ll show the user where they are on earth in 12 lines of code.

Since 2005, the Google Maps API has driven one of the most popular web-based applications ever: Google Maps. What I find so appealing about the Google Maps JavaScript API is the relatively small amount of code needed to display a map in a web page. And of course when you do, it’s pretty magical: you are prompted by the browser to allow the page to use your location, and “poof” there you are!

The Google Maps API is a topic worthy of a deep discussion. In this article, we’ll just cover the absolute basics needed to get a map on the page. I chose to limit Part I to this scope because quite often, if you can just “get it to work,” a topic will seem more approachable, and easier to digest.

Ok, let’s show a Google Map on a web page!

Example # 1

In Example # 1, we test to see if the user’s browser supports Geolocation. Specifically, we check to see if the navigator object has a property called “geolocation.” If this property does exist, then we call its .getCurrentPosition() method, passing it a callback. In this case, the callback is a function named “successHandler,” which we will discuss next.

Example # 2

In Example # 2, we have the successHandler function. This is the callback that we have provided to the getCurrentPosition() method. This callback will receive a “position” object as its first argument. That position object holds the data that we will need to provide to the Google Maps API.

Using the latitude and longitude properties of the position object’s “coords” object, we can now instantiate the Map() constructor, which is a property of the google.maps object. When instantiating the Map() constructor, we provide two arguments: a reference to the DOM element in which the map will be displayed, and an object literal, containing display settings:

zoom: Tells the map how much to zoom in when first displaying
center: the “place on earth” on which the map should be centered. Here we instantiate the LatLang() constructor, passing it the latitude and longitude values that were obtained by the geolocation.getCurrentPosition() method
mapTypeId: The type of map to show. The four possible values are: ROADMAP, SATELLITE, HYBRID, and TERRAIN

Example # 3

In Example # 3, we have the full code for this article’s working demo. Here, the exact same code that we discussed in Examples 1 & 2 are used in the context of a full web page.

Here is the JsFiddle.net link for this article’s working demo: http://jsfiddle.net/uQ35v/

Summary

In this article we learned about the absolute basics of the Google Maps JavaScript API. We discussed the need to implement the geolocation.getCurrentPosition() method to get the user’s location and how to provide that information to the Google Maps API to show a basic map on the page. In Part II, we will discuss some of the features that are available when displaying a Google map in a web page.

Helpful Links for the Google Maps JavaScript API.

https://developers.google.com/maps/documentation/javascript/reference

https://developers.google.com/maps/documentation/javascript/tutorial

https://en.wikipedia.org/wiki/Google_Maps

Google’s First Production Server Rack, Circa 1998

Internet
Google's first production server rack, circa 1998
Google’s first production server rack, circa 1998

Hard to believe, but a mere “fifteen years ago….” this little Frankenstein rack was the heart and soul of Google’s entire operation… at least for a minute or two

One recent rainy night when the home shopping network was showing re-runs, I stumbled across this:

http://en.wikipedia.org/wiki/Google_platform

There’s plenty of light reading in there if you feel you want to melt your own brain. But what immediately caught my attention was the photo: “Google’s first production server rack, circa 1998.” The fact that it’s a high-resolution image makes it even more fun because you can see quite a bit of detail. I’m not much of a hardware guy, so I won’t even begin to talk about that twisty-curvy menagerie of RJ-45 cables that go from top-to-bottom and left-to-right, but as you can see, this little pile of moving parts was “doing something.”

It’s amazing to think that a mere 15 years ago, this was the heart of Google. I don’t know how many people were actually using Google search in 1998, but someone was. And that someone (and I’m sure plenty of others) hit this server. If you look at the specs, you’ll find some pretty serious beefcake for 1998, but in hindsight, amazingly low-tech by today’s standards.

From the WikiPedia Page:

  • Sun Ultra II with dual 200 MHz processors, and 256 MB of RAM.
  • 2 × 300 MHz Dual Pentium II Servers, they included 512 MB of RAM and 10 × 9 GB hard drives between the two.
  • F50 IBM RS/6000 donated by IBM, included 4 processors, 512 MB of memory and 8 × 9 GB hard drives.
  • Two additional boxes included 3 × 9 GB hard drives and 6 x 4 GB hard drives respectively
  • IBM disk expansion box with another 8 × 9 GB hard drives.
  • Homemade disk box which contained 10 × 9 GB SCSI hard drive.

Just a quick glance over those details and you get the impression that considering this was 1998, this little jimmy was put together by some pretty clever folks. It’s starting, and a little surreal, to realize that the internet has been around long enough for terms like “ten years ago…” and “fifteen years ago…” to be tossed about. Needless to say, Google has gone on to take over the world, and most folks use it for their searches (or at least plenty of folks do).