Gettin’ Down with BaconIpsum

JSON

angular2 baconipsum json

Sometimes you need Lorem Ipsum, and sometimes you need it in json format via an API call. If you don’t mind bacon references spattered throughout that latin, then Bacon Ipsum can help.

I’ve already written an article about the need to make an API call before that service is ready. And myjson.com is a perfect tool for that. But if you just need a lot of text and want to generate it via an API, then Bacon Ipsum is a fun tool that can solve that problem.

The overall concept is a bit silly. I mean, lorem ipsum is kind of silly, and having words like  “bacon”, “flank” and “shankle” sprinkled throughout borders on nonsense. But their API works well and is very easy to use. So, if you are in the middle of a dev project and need some dummy text in JSON format, it’s nifty stuff.

Json API

The landing page allows you to generate some Bacon Ipsum on the fly, but if you want the API calls, then go to baconipsum.com/json-api. There  you’ve got very simple instructions on how to get your Bacon using simple query string parameters. These parameters allows you to control how many words and paragraphs will be returned.

Other Bacon-stuff

If you find this all funny and want more Bacon, they also offer a Chrome extension as well as Android and IOS apps that allow you to… well, I’m sure you can figure out what these do… more Bacon. Although I will note that these apps are pretty outdated, so use at your own risk. There is a jQuery plugin, and three.. count ’em three WordPress plugins for increased Bacon madness. And to top it all off: a baconmockup HTML generator. This might be a bit too much Bacon for me. They had me at the JSON API calls.

MyJson – An awesome tool for mock API calls

JSON

MyJson LogoSometimes you need to call an API that is not ready yet

So you are working on your front-end code. You have crafted you JavaScript so that it is clever and optimized. Check. You’ve created your “makeHttpRequest” method, and configured a success callback. Check. But there is one problem: the back-end team has not completed the API call that you have to make. Rats.

Sure, you can just create some static “dummy” data. But that is not the same thing as an HTTP request, and your code will not be asynchronous. Ok, so you could wrap your static data assignment in a setTimeout. Yeah, that’s it…. nah, just not the same thing as making a real HTTP request. Double rats.

myjson.com saves the day on this one.

This site is so dammed cool, I can’t get over it. You simply add some valid JSON into the large text area, and then click the “Save” button. You are then taken to a page that shows you two things: your JSON and a URL that you can use to make an HTTP request for your JSON. In other words, you just created your very own API call that returns the exact JSON that you need. Sorry folks, this one is better than the Beatles.

At first I was wondering: “…wait a minute. How can I make an HTTP request like this when myjson.com can not possibly have added my silly little test domain to their whitelist for the CORS header?” (yes, I actually talk to myself like this. it’s kind of scary). Well, after about five seconds in the network panel, I see “Access-Control-Allow-Origin: *” . Nice.

Examples:

I literally cannot even begin to imagine the countless hours this would have saved me in the past. Yeah, sure you can spin up something like this on your own, but good gosh; copy, paste, API! how much easier could this be.

Serious Kudos to whoever is behind this.

 

 

 

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