gocode

Pulling JSON data from a public data API

“It is a capital mistake to theorize before one has data.” ― Arthur Conan Doyle

The Go Code Colorado crew, photo by Allison Daniell of Stellar Propeller Studio
Go Code Colorado photos by Allison Daniell of Stellar Propeller Studio

I had the opportunity recently to participate in Go Code Colorado, an “apps challenge” (think weekend hackathon + startup pitch competition) meant to make public data more accessible. It was an awesome experience and it got me thinking about government/public data, and how to use it and combine it in ways that can help people.

Here’s a quick example of how to pull data from one such public data source,  the Colorado Business Entity Database.   Basically, anyone starting a new business or forming a business entity in Colorado, whether that be a sole proprietership, partnership, LLC, corporation, etc, has to file documents and register their business with the Secretary of State’s office, and that information becomes public data. What we’re going to do in this example is to use state-provided API to pull a list of current businesses in a particular ZIP code, and list out their names, street addresses, and cities.
Continue reading

zoey

Looking back, looking forward, and giving thanks

“Fearlessness is not only possible, it is the ultimate joy.
When you touch nonfear, you are free.”
— Thich Nhat Hanh

Happy New Year, and welcome to 2014! I’ve always liked the first part of a new year–it’s a good time to take stock, and take a little time to be mindful about where I’m going and what I’m doing. So this post will probably be a little more me-centric than usual, but hopefully there’s something of interest to you too–assuming you’re a fellow web designer, web dev, front-end developer, or just an all-around web geek :)

Looking back

2013 was a great year for me professionally, definitely one of my best so far. As I talked about in my very first post, I started 2013 in bit of a rut and like I was slipping behind the times a little in my profession. Now at the end of 2013 I’m much more up-to-date on skills, feeling rejuvenated, more engaged in the web community, and very excited for the future. All the people, projects, organizations, resources, and communities that have helped me get to this point are too numerous to list, but I want to call out a few that I’m particularly thankful for.
Continue reading

Slide Projector by macattck, on Flickr

A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

“It takes half your life before you discover life is a do-it-yourself project.” ― Napoleon Hill

A while back I wrote about a technique for building a simple automatically cycling slideshow using CSS animations, no JavaScript required. While that is definitely an interesting technique, it’s also pretty limited in how you can use it. For example, often with an image slideshow rather than just auto-advancing the slides you may want to let the user have control, so they can navigate forwards and backwards through the images at their own pace. These days you also may want a slideshow that’s responsive, so that it will work across a wide range of devices, automatically resize to fit different screen sizes, and maybe even allow some more touch-centric interaction–like swiping to the left or right instead of clicking “previous” and “next” buttons to cycle through the slides.

If this is what you need and you’re just looking for a drop-in solution, there’s no reason to reinvent the wheel, there are some great slideshow options out there already (here are just a few: Unslider, SwipeJS, SlidesJS). However if you’re more of the do-it-yourself type and you want to custom-build your own to suit your exact needs, or just want to see how it can be done, then it’s pretty easy to get started with just a little bit of HTML, CSS, and JavaScript.
Continue reading

Screen Shot 2013-11-27 at 11.36.02 PM

CSS gradients: basic to advanced

“All that’s bright must fade, the brightest still the fleetest; All that’s sweet was made but to be lost when sweetest.” ― Thomas Moore

It used to be when you wanted a nice simple gradient background for your page, the process looked like this: Step 1) fire up Photoshop; Step 2) use the Gradient tool to fill the canvas with a horizontal or vertical gradient; Step 3) crop canvas into a as-small-as-possible slice (often 1px high or 1px wide); Step 4) export .gif or .jpg graphic; and so on. I’m leaving off the rest of the steps, because you either remember how to do it from past experience, or you’ll never need to know how to make a gradient that way thanks to the awesomeness of CSS gradients. Let’s take a look at what they can do! Continue reading

central-park-map

Geolocation Part II: Building Interactive Maps with Leaflet

“A map does not just chart, it unlocks and formulates meaning; it forms bridges between here and there, between disparate ideas that we did not know were previously connected.”
― Reif Larsen

A couple of weeks ago I wrote about using the Geolocation API, and walked through the minimal code necessary to get the user’s longitude and latitude. Now I want to take it just a step further, and show how to use Leaflet to show the users current location on a map. Continue reading