Lessons Learned: #100Lessons

Last year I participated in the #100happydays challenge, and it changed my life. During the challenge, I was able to focus on moments, and as a result my happiness each day. It was incredibly rewarding, and changed my life for the better. If you’re curious, check out the feed!

Since the challenge concluded, I’ve contemplated another round. Ultimately, I kept saying, maybe tomorrow, and it never happened. Then a few weeks ago I thought, Wait, I should do my own challenge and focus instead on something I truly believe we should all do daily: learn something new!

So, over the next 100 days, I will tweet, at the very least, once a day something new I’ve learned that day and use #100Lessons with the day (e.g. #day1).

But why #100Lessons? Because, its my challenge! 😉 Also, because of my emergency management background I can’t get away from the term lessons learned.

Follow along, and feel free to join me on this journey!

Advertisements

Cartography + Accessibility

Over the last several months, I had an incredible opportunity to collaborate with Alison Link and Mitch Schaps on some cartographic accessibility best practices and considerations.

Based on our joint presentation, and some discussions at NACIS 2015, I wanted to compile my own detailed list of accessibility considerations, and pose the following questions to the cartographic community (you can comment below, or hit me up on the Twitters):

  • Do you agree with our best practices?
  • What did we miss?
  • Are there any innovations you’ve done in your work? If so, what are they?

Summary

Our presentation at NACIS, best practices and considerations, and this blog post were implemented and written to serve as a tool, and to initiate discussions within the cartographic community. These considerations are not the catch-all answer to cartographic/web accessibility. In our work together we discovered the best starting point is to initiate discussions on accessibility and see where they lead you.

(Some) Accessible Cartographic Considerations

Maps are extremely difficult to make accessible, as their primary intent is to serve as a visual product. IMHO, each visual product has to be evaluated on a case-by-case basis as the intent and audience changes. The use case will change the delivery of accessibility, and in some cases, not all of the elements can be made completely accessible.

Some considerations I have implemented in the last year include:

  1. Provide an accompanying table of data with a map/visual. A table will provide context, or further support of your map/visual.

For example:

accompanying-table
Accompanying table
  1. Ensure tabular data can be accessed by a screen reader. This step requires a small amount of effort on your part, but will be extremely helpful to those who rely on screen readers. To do so, add the scope attribute and note whether the item is a column (col) or row (row) in your HTML content.

For example:

<table>
     <caption>Population in the United States</caption>
     <tr>
          <th scope="col">State</th>
          <th scope="col">2010</th>
          <th scope="col">2000</th>
     </tr>

     <tr>
          <th scope="row">Alabama</th>
          <td>4,779,736</td>
          <td>4,447,100</td>
     </tr>

     <tr>
          <th scope="row">Alaska</th>
          <td>710,231</td>
          <td>626,932</td>
     </tr>
</table>

Producing the following content on your page:

Population in the United States
State 2010 2000
Alabama 4,779,736 4,447,100
Alaska 710,231 626,932
  1. If possible, use colorblind safe colors. Using these color schemes help all audiences, and make it easier to distinguish between elements in your map. Some resources to “add to your toolbox” to help verify your maps are cartographically-sound include:
  1. Enable a ‘skip to data’ link, which is similar to the ‘skip to content’ link. The ‘skip to’ allows screen readers to skip to the content that is most important to them. In most cases, the average user will not see this functionality (unless they tab through the website).

For example:
skip-to-table Skip to table

  1. Check keyboard accessibility ensuring users/visitors can tab through the site. To test your website, (re)load your site and tab through it to see what order is highlighted along the way. The order you see with “the tab test” is very likely what a screen reader will experience. While testing ask yourself, “Can I navigate through the page?” and “Does the tab order make sense with the content I’m displaying?”
  1. Don’t make people hover to find things. The click, focus, and hover functions should have relatively the same functionality throughout an application. If a user hovers over text, they should have a similar experience if they tab and/or click on the element. P.S. This really helps with mobile experiences, too! 🙂

For example:

click-focus-hover-example
Similar functionality example (click, focus, and hover)

:hover, :focus {
/* CSS goes here */
}

$('#target').on('click hover', function () {
// JavaScript goes here
});

  1. Ensure all other web accessibility requirements are met. A good resource/tool to verify accessibility requirements are met on a website is WAVE (Chrome extension), developed by WebAIM, which will check a site to see if it meets web accessibility standards.

Simplicity

It doesn’t matter what field you’re in – sometimes others think we are smarter when we tell, or show them something that seems complex. But that’s not a good thing!  In fact, complexity is confusing!

Simplicity Example
Image: Parks and Recreation (NBC)

What if the product you’ve created doesn’t make sense to anyone besides you? That means one mind is working on one product – a map, a database, a website, or whatever it may be.

No one can give you input for improvements, nor can anyone make improvements to it. Ultimately the product sits with you, and will not sustain the long haul.

What if the Albert Einstein’s, the Steve Jobs’, and countless other innovators weren’t able to use the inventions, ideas, and work of others to incorporate into their accomplishments? Would we still have the theory of relativity, Apple products, or other products as a result of their discoveries?

If anything it’s the journeys of these innovators we should learn from. The struggles they encountered lead them to the discoveries and innovations that changed the world.

So, how can we simplify our work? And how can we pass our knowledge on to others? Below is a short list of three items to keep us in check (because, simplicity)!

  1. Go back to the basics:

Stay on track! What is the purpose? What process drove you here, and why? Consistently check-in on the purpose, whether you are on day 1, or year 5.

The longer we work on something, the higher the likelihood we lose focus of our goals. This is when we overthink and over complicate our work!

  1. Explain it to an outsider (e.g. parents, spouse, kids, neighbors, etc.):

If an outsider doesn’t understand it, is the product really useful? The best way to make something understandable to someone is to simplify it as much as possible.

If it doesn’t make sense to an outsider right away, don’t fret! Sometimes in the process of simplifying you may find a solution that you couldn’t originally see!

  1. Don’t reinvent the wheel

Don’t write 100+ lines of code, create a new color scheme, or create a new font right out of the gate. First, go back to #1, does this thing serve your purpose? If it does, has someone else done something similar? Don’t reinvent the wheel, use resources available to you, then contribute to them later on to help others in their journey!

Celebrate YOU!

We’ve all been there before… holding our heads face down in front of our computers thinking, ‘I can’t do this’. I’ve had a few of those days, and each time it’s a result of hitting multiple road blocks that are legitimately hard.

Is it fair that we compare this hurdle to the rest of our development journey? Heck no!

Luckily, I have some pretty cool people in my life, and in one of my recent lapses sent a message over to a fellow developer mentioning my cruddy day (which, seriously, reach out to these people more often). I received the best reply in return:

“The bad days suck, but the good days are SO GOOD! You gotta remember those, it’s the only thing that’ll keep you going!”

HECK YES!

We then discussed making our own list of accomplishments. Whenever things are just cruddy, the only thing I can think of is my failures. THIS IS RIDICULOUS! There are so many incredibly good things that I’ve done, that I’m currently working on, and others I will be working on in the future.

So, make a list. Add to it as much as possible. Check if often. And celebrate yourself. You deserve it!

Breakthrough: A Quiet Story

Moments are a powerful thing. Moments of triumph, moments of failure, and moments that define us. But most importantly, how we feel in these moments.

Over the last few weeks I had a breakthrough along my development journey. There wasn’t a particular moment where I realized I broke through a wall. Rather it was countless moments where I was able to solve a harder problem both in the initial brainstorm and soon thereafter with code. I was able to replicate the process again, another time, and once more.

The feeling is like nothing I have experienced before as I realized the walls were coming down and now I can’t get enough of the feeling to the point where others have noticed my successes.

Remember: Coding is hard. There are so many different directions you can take with one line of code that can transform your entire approach, but that’s why it is so intriguing and why no individual journey is the same.

You’re probably thinking, “Good for you. Why are you sharing this with me?

Good question. The reason is my breakthrough wouldn’t have been possible without my own self-discovery a few weeks ago. While not everyone can relate to my journey, they can relate to the overall goal. Without understanding ourselves and our capabilities, it makes it difficult for us to move forward.

Quiet

A few weeks ago I was struggling with my code and it felt like every step I was taking was in the opposite direction of where I wanted to be. It was showing in my work, and colleagues mentioned it in meetings and discussions.

So after work one day I Googled… a lot. My search found an article that changed everything, it told me about myself, and others like me. It mentioned a book called, Quiet: The Power of Introverts in a World That Can’t Stop Talking by Susan Cain (Amazon). I put down the book I was reading at the time, and immediately dove into Quiet.

Quiet explains how a social and outgoing culture can make it difficult for an introvert to make meaningful contributions to the world. This is despite some of the extraordinary skills, talents, and abilities that introverts can contribute and they should be encouraged and celebrated.

While it is impossible to summarize her book, which I recommend to everyone even if you consider yourself a full-fledged extrovert, here are two points that really stuck with me:

  • If you find something that challenges you that you have a passion in: dive in full force. Even if part of the challenge includes something you dread (i.e. public speaking) you’ll forget your fear to conquer the mountain. Cain describes this as emotional vacation. Of course, you have to strike a balance, and you can’t always be outside your comfort zone. But as long as you have passion, you can go the distance.
  • Find out why you are here. What is it that you are meant to contribute? Then share it with the world. One of my favorite quotes from Ms. Cain comes from her TED talk:

“Take a good look at what’s inside your own suitcase and why you put it there… Introverts, you being you, you probably have the impulse to guard very carefully what’s inside your own suitcase. And that’s okay. But occasionally, just occasionally, I hope you will open up your suitcases for other people to see, because the world needs you and it needs the things you carry.”

Patience

Quiet helped me realize a lot about myself, but most importantly that it’s okay to feel uncomfortable in many different settings that American society considers “normal” (i.e. attending a staff meeting knowing I have to spit back all of my project work to the group).

In particular, one of the stories Susan Cain mentions is about Steve Wozniak, one of the creators of Apple. Ms. Cain talks about the struggles, and the ultimate journey Woz embarked upon from his childhood through adulthood to create Apple. Woz devoted: hard work, long hours, after work hours, blood, sweat, and tears for many years. His story hit home with my coding journey, and helped me realize it’s about hard work, perseverance, and commitment needed to succeed. Woz also helped me realize that introverts can focus on these ‘life quests’ much more easily then extroverts.

Ever since finishing Quiet, I feel more assured and justified as a person. I will never be the ideal America extrovert, but I will always be me and I will make a difference in my own way.

Leaflet GeoJSON pointToLayer

I make a lot of choropleth maps for my day gig, so when I was working on a fun side project using Leaflet’s library that would include points I got pretty giddy. At first I hit a few brick walls and was thinking to myself, “How in the world can I map these ^$@&*! points?” After lots of struggling, lots of Googling, and quite a bit of head pounding I finally found something that worked.

Fast forward a few months later… I was asked to put together an interactive map for my office that included points. WOAH! I was pretty ecstatic to branch out of the norm. And again, I hit the same roadblocks, until I remembered I had a similar experience only a few months ago.

I realized, unlike polylines and polygons, points were a little trickier. By default, simple markers are drawn for GeoJSON points. However, using the pointToLayer option we can create a circleMarker (more on that later). Leaflet recently updated their documentation, and they added more documentation on this subject, but I wanted to post this for others.

So let’s take a look at the steps needed to add points to a Leaflet map…

The code

Before getting started, add the Leaflet library to your code. The CSS file should be included in the head section of your document, and the JavaScript file should be located after the HTML content (for faster loading), but before any JavaScript content [Note: This example is shown with Leaflet JS version 0.7.3)]:

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

In the HTML, add the map <div>. In this example we’ll be setting the map to 600 pixels by 400 pixels on the page:

<div id="map" style="width: 600px; height: 400px"></div>

In the JavaScript define the map, its extent, and coordinates. This example focuses on Duluth, Minnesota:

var map = L.map('map', {
	center: [46.7830, -92.1005],
	zoom: 15
});

Next, add in a basemap for reference (e.g. OpenStreetMap Mapnik). We’ll also set it to be on by default when the map loads using addTo(map):

var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

Now we’ll add the GeoJSON to the map using the style function (Note: the GeoJSON itself isn’t shown below, but is included in the final code below). In the example, we’ll be returning the color green:

geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
        return {
        	color: "green"
        };
    }
});

Now that we’re telling the GeoJSON to style with the color green we need to convert the points to a layer. The function will then pass a Lat/Lng allowing us to extend our GeoJSON styling options.

To do so, we’ll call the pointToLayer function. Since we’re dealing with points, we can return L.CircleMarker (L.Marker also works). From there we can set our parameters. In this case a circle radius of 10 pixels and fill opacity of 85% was set.

geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
        return {
        	color: "green"
        };
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {
        	radius: 10, 
        	fillOpacity: 0.85
        });
    }
});

Because I like popups in my examples I added in the onEachFeature function that will bind a popup to the layer. In this case the geojson has a field with NAME in it and it is accessed using feature.properties.NAME. After the function, add the geojsonLayer to the map by using map.addLayer(geojsonLayer):

geojsonLayer = L.geoJson(geojson, {
    style: function(feature) {
        return {
        	color: "green"
        };
    },
    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {
        	radius: 10, 
        	fillOpacity: 0.85
        });
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.NAME);
    }
});

map.addLayer(geojsonLayer);

HOORAY! We did it! 😛

Here’s the final code (including the GeoJSON content):

And a screenshot of the final map:

MapCapture

That’s it – now let’s go add some points to some Leaflet maps!

A new focus

“You, yourself, as much as anybody in the entire universe, deserve your love and affection.” – Buddha

I have learned a lot these past few weeks. Sure I’ve gained a lot of development experience, including some really cool tricks. One of these days I’ll be sharing some of it, but that day is not today. Instead I am sharing my latest experience on growth.

Many times while learning something new, and difficult, we forget the most important part of our growth lives within ourselves. Last year I was in charge of a local conference, as well as redesigning an application in a new mapping platform. It was fun and a great opportunity to do this work, but the time commitment was so demanding that I didn’t take any time to focus on myself and my needs.  It not only affected my work, but me as an individual, colleague, and friend. What I learned is, that if we focus too hard on an objective, we can lose sight of other things that are important. Sometimes when this happens, things can go south quickly, kind of like what may have happened with this little guy:

Image source: unknown
Image source: unknown

A few weeks ago I read an article that changed all of that, and helped me bring the focus back to myself. Since this latest self-discovery, I have felt more empowered than I ever have in my life, accomplished more than I thought was possible, improved my personal and professional relationships, and have a better lifestyle as a result. The article itself isn’t important, it only helped me realize more about myself, so I could focus on who I am as an individual and how I can be a better colleague and friend by being me.

So I ask you the following: Who are you and why are you, you? Who, and what makes you happy? Who, and/or what makes you upset? These are not always easy answers, but they are critical to ask along your journey.

You may be thinking, “What the #$%@ are you taking about, Kitty!?” I know, I was right there with you a few weeks ago. But seriously, do this activity:

What is today’s date? Now, take a year off of today’s date. Think of where you were, what you were doing, who you were, and how you felt.

A lot has happened, right? Are you the same person you were last year? What have you learned? What have you accomplished?

For me this exercise taught me a great deal about myself and my journey. Since July 2014 I have managed a local GIS conference, rewritten a good portion of my mapping applications using a new platform, learned new libraries, made my first GitHub commit and pull request, toured around the Last Frontier, learned to say ‘no’, and countless other amazing things!

Image source: Eric Peterson
Image source: Eric Peterson

So going forward, what can you do? Below I have a list of a few things that I changed recently that helped me over the last few weeks. Will they work for you? Maybe. Maybe not. Just like the tools and solutions you and I use may differ, the same holds true for what you can do to better yourself. But hopefully the steps listed below can help guide you along your journey.

1. Set a routine: 

Optimize a schedule that fits you. What works best for you? Change your routine to reflect your personality.  But remember, it can take two to eight months for a habit to become part of a routine, so be ready for some initial struggles. Don’t give up on something just because it seems difficult right away. Give things a chance to fall into place. Most importantly don’t confuse a routine with exploration and embracing the unknown. It is important to continue to strive for your dreams and live without limits to encourage innovation.

For me setting a routine meant to focus on the hard things first and to do the mundane tasks at the end of the day. To do this, I flipped my day around, trying to tackle harder coding problems as soon as I arrive at my desk and saving routine e-mails, time tracking, and meetings for later in the day. The result? The feeling of accomplishment right away in the day, and a better attitude when ‘issues’ present themselves later on in the day.

2. Love what you do:

Find something at which you excel and make it your own. Who are you? What do you want to be? Customize your work and responsibilities to better fit your motives, strengths, and passion. Some of what you can get done in a day won’t be part of your work, but makes up the part of you that makes you special. Make those items matter. The best way to achieve success is to have selfless motives. Ask not what your job can do for you, but what you can do with your job.

 3. Lastly, and most importantly, never forget these three simple rules:

  • If you don’t go after what you want, you will never have it.
  • If you don’t ask, the answer will always be no.
  • If you don’t step forward, you will always be in the same spot.

Now it’s your turn. So tell me, what has happened to you in the last 365 days? What have you learned? What have you accomplished?