Tagged: JavaScript

Strava ExplorerStrava, the software used by athletes to track their activities, has a new API available for accessing their data. I looked through it to see if I could do anything quick and interesting with it.

Earlier this year they angered many developers by unplugging their previous API, leaving many third-party apps stranded. My own interest is in seeing how cyclists use the city: which routes are preferred. Unfortunately, the data available in Strava’s v3 API is extremely limited. Most of the API is designed to reveal a selected user’s data, assuming they have specifically granted the program access. But there doesn’t seem to be a way to look at aggregate data.

In fact there seems to be only a single API function which accepts a geographic bounding box as an input. That API, the “segment explorer” returns up to 10 “popular” segments.

I wanted to see how easy it would be to use the API in a little test program. The result, my Strava Explorer, doesn’t really do anything interesting other than prove I can connect to the Strava API. » Continue Reading…

I’ve been looking for ways to let users play with data on a web page. It was time to explore the D3 library for JavaScript. I’d previously used D3 to create a Voronoi Diagram of CaBi Stations, but that was written by modifying an existing piece of code. How hard would it be to create my own D3 program?

I had seen beautiful, interactive bar charts written in D3, and wanted to create my own. At d3js.org you’ll find many great examples.

Every D3 function is available as a method to the global “d3” object. JavaScript doesn’t actually have classes, so when I call something a method, it’s really an object property that happens to be a function. Most D3 methods return objects that themselves have methods available, and it’s typical to see these methods chained together. My beef with the D3 API Reference is that it doesn’t tell you what pseudo class a method returns, so it’s hard to learn without studying copious examples. » Continue Reading…

big wordsIf you’ve ever been moderating a presentation and need a way to quickly throw up a big message on the screen, here is the online tool you need. Echo is a super-simple program that takes a word or short phrase and builds a web page with nothing but your text, sized to fill the screen.

To use it, just enter your text at the end of the URL, like:

» Continue Reading…

Places AutocompleteWhat’s cooler than using Google’s Geocoder to let users navigate using text descriptions? Replacing the geocoder entirely with Autocomplete.

The “Places Autocomplete” feature is one of the goodies you get when you import the Places Library. I decided to test it out on my WordWhere application. WordWhere lets users select a geographic area, then search a word to see where in the region it appears most frequently.

The program still geocodes the user’s input, but the code is simpler yet more powerful. The old geocoder object below get replaced… » Continue Reading…

selectionHow best to allow users to select multiple markers on a map? I wanted to let them draw a circle and have all markers within be selected. Using the Google Maps JavaScript API, I used the circle object for my solution.

I tested the circle selection in my Cabi Trip Visualizer. Clicking on an individual CaBi station draws arrows to all the other stations in its network. But the program becomes more interesting when you look at a network formed by multiple stations. I added some keyboard shortcuts to select clusters of my own design, such as G for Georgetown and V for Virginia. But those clusters were in arbitrary boundaries. I needed a way to let the user design their own clusters. » Continue Reading…

When I take screen shots of web applications, I like to be able to control the aspect ratio, typically 3:2. It’s tough to judge pixel lengths by eye. So, I created a little utility called Browser Sizer that lets you control how big the window should be.

You can specify either the pixel dimensions or just a ratio. Another option lets you choose pixel dimensions from a list of popular mobile devices. You can still try to eyeball the best size, then grab settings from the current window.

The ratio option lets you enter your desired aspect ratio (or grab the current window’s ratio). To convert the ratio to width and height in pixels, you have three options: you can shrink or enlarge the current window size until it fits the desired ratio, or select “maximum” to have it fit the screen’s available space. » Continue Reading…

Concentration is an old card game ideally suited as a computer program. Instead of cards, I use photos. The game is a pure memory skills test.

Six pairs of photos are hidden behind squares. The player uncovers two squares at a time. If they match, they remain uncovered. If not, they become hidden again. The goal is to commit the photo’s location to memory so that when a new square is uncovered its pair can be found. Find all pairs using as few guesses as possible.

Like Mastermind and Hangman, Concentration was written in JavaScript, and designed to scale for any display, from large desktops to small mobile devices. I recycled much of the same code from those other programs (see Building Mastermind for All Screen Sizes and Creating Hangman in JavaScript). The layout is determined dynamically at start-up and when the window is resized. » Continue Reading…

Hangman is a word-guessing game, less abstract than code-breaking Mastermind, and using English phrases as the target of the player’s guesses. The tools of the game are simple enough to implement with a simple JavaScript program, and should scale well for full-size desktop screens or smaller mobile devices.

I used some of the same code from Mastermind (Building Mastermind for All Screen Sizes) in order to have the layout easily scale to fit the user’s screen. Because the hidden phrases can greatly vary in length, it’s hard to know how many lines it will require for a given screen width and line height. (Font size does refer to vertical height, but the line height setting is usually more important.) The offsetHeight property purportedly gives you the height of a block in the document object model, but I’ve seen too many times when the value is wrong, only to see it right a few seconds later. I suspect rendering is done in a separate thread, and offsetHeight may not be accurate immediately after assigning content to a block. So, for that reason the Hangman puzzle will overlap lower sections sometimes (and can be corrected by slightly resizing the window). I suspect the best solution might be to switch to using a canvas element to render the entire game. » Continue Reading…

Mastermind is a simple code-breaking game that’s educational and fun. I grew up playing the Hasbro game, where one person configures the code and the other tries to solve it. The tight logic and scoring algorithms make it a good fit for programming projects.

For this version, I wanted the design to scale to both a desktop and a mobile device. An old program I had written put the output in a table, but as I played with dynamic scaling, it dawned on me that the table structure wasn’t adding much value. Design purists famously hate tables used to control layout. I’m no purist, but this seemed a good time to dive into using CSS and JavaScript to manage the output.

Each element in the game exists in a div tag with an ID. There are two CSS properties I set universally in the internal style sheet: » Continue Reading…