Taking back tech

This is a really interesting piece by Melody Kramer about how journalists can create and control technology, instead of being controlled by tech. Kramer interviewed Dave Winer, a software developer who has worked on blogging, podcasting and content management systems — such as an open-source version of Medium, a blogging platform.

Journalism students should learn how to set up Web servers and blogging systems.

Learning how to run servers and CMS encourages creative thinking, Winer said. “And it’s a gateway drug for coding,” he said.
Winer encouraged journalism students and journalists to use their own servers and CMS, instead of sites like Medium. Medium, and other apps and sites we rely heavily on now for social media and distribution could very easily disappear in a few years or longer down the road. What does this mean for all of the stories that are being shared on Medium (and those other sites)? Will there be an archive for people of the future? Will these stories disappear? Winer discussed the importance of records for the sake of knowledge on an example post for his open-source version of Medium.

“Will the Big Think piece you just posted to Medium be there in 2035? That may sound like it’s very far off in the future, and who could possibly care, but if there’s any value to your writing, you should care.

It’s no longer just a theory that platforms like Medium or Twitter or even Facebook do go away. I wouldn’t trust the longevity of anything you post on those sites.”

The Gun Wars report launches

Gun Wars is live at gunwars.news21.com

At midnight, the culmination of eight months of work was released into the world as Gun Wars. This website is News21’s investigation on gun rights and regulations in America. Nominated university students and recent graduates from across the country reported on American gun rights and gun control advocates, inner city violence, militias, rural sheriffs’ responses to gun laws and more for the 2014 Carnegie-Knight News21 Fellowship program.

During the fellowship, I wore many hats.

  1. I wrote a story about sheriffs protesting gun laws.
  2. I designed a background check quiz for readers.
  3. I led the newsroom in including digital tools within their stories. I researched Poynter’s News University’s list of innovative reporting, design and social media tools. I assigned several free tools for the Fellows to research and present. I then worked with the Fellows to incorporate some of these tools into their stories, including SoundCite clipsTimeline.JS and StoryMap.JS.
  4. I served as a liaison between reporters and the graphics team. I worked one-on-one with reporters to brainstorm and create infographics, maps or graphs for their stories, such as the carrying guns in public data interactive.
  5. I worked as a lead designer and coder on the project. I established the design and color themes for the data interactives. I led a web team in figuring out the ultimate design of the home page and story pages of the site.
  6. I designed the Americans and their Guns section of the site, which offers a portrait of a nation and its love of guns.

Read the entire report at gunwars.news21.com or follow #GunWars on Twitter, Facebook and other social networks. Let me, the other reporters and the editors know what you think of the investigation. We welcome any feedback you have.

The last day of News21

Collecting audio at an outdoor gun range in Tuscon, Arizona. Photo by: Jim Tuttle
Collecting audio at an outdoor shooting range in Tuscon, Arizona. Photo by: Jim Tuttle

Tomorrow is the last day of my Carnegie-Knight News21 fellowship. It’s been a journey—from the five-month seminar to the 10-week summer program.

During the fellowship, I traveled back home to Maryland to report on constitutional sheriffs’ responses to gun laws in the region. I led workshops to make the newsroom more familiar with digital tools. And I completed weekend design overhauls and 15-hour coding sprees.

This summer I designed and coded the News21 Gun Wars project website from scratch. With a fellow front-end developer, I created wireframes, story designs and a special section which I will update here once the site is published on August 16. I have gained extensive coding and design skills from building a site that will house over a dozen long-form articles, over 30 videos, many more photos and several large datasets and graphics.

I am grateful that I had the opportunity to work with editors Len Downie, Jacqueline Petchel, Peter Bhatia, Brandon Quester and Retha Hill. They offered feedback on my writing, designs and interactive work. They pushed me to write clearer stories, lead innovation in the newsroom and produce an extensive multimedia website. Reporting and designing under their watch has been a challenging and worthwhile experience.

Check back in two weeks for the project link! You’ll find incredible stories, videos, photos, interactives and datasets on guns in America then.

Coding as poetry

Just like poetry, writing code is trial and error. You don’t know where you’ll end up when you first begin. You often have to revise, rewrite and try a new form.

Today I watched a TEDx speech about Linux OS by Jim Zemlin, the executive director of The Linux Foundation. He called coders poets—code poets who collaborate, build the unknown and solve problems.

Poets are important. Poets are necessary. Coders too, especially those in the open-source community, are important. This type of collaboration that Zemlin describes is shaping the future of coding, technology and the world.

I’m excited to become a part of the coding community. I’ve been learning from this community since I started my first WordPress site, since I began creating interactive charts, maps and graphics for Capital News Service and News21. And I’ll continue learning from the forums, tutorials, libraries and new tools that these coders and hackers find and create.

Designing a wine tasting chart

For the past two weeks, I have been designing a wine tasting chart to go along with an article about the growing Maryland wine industry. I used a color wheel mentality for the design, mirroring the circular, official wine tasting chart. The graphic is made purely with CSS and JavaScript.

I incorporated this CSS color wheel for the basic set up. But I needed to add another wheel layer on top of the first, to create more of a chart. This proved a bit difficult because instead of creating more pie slices, I had to make another, separate color wheel to create the inner layer. So, in effect, I was creating two color wheels for this project. There was some necessary manipulation to keep them from interfering with each other. I also added tooltips to provide more information on specific wines.

For this project I had to keep track of hundreds of lines of CSS and countless divs. I also learned more about the :before and :after properties, which change how elements are shown in a finalized version on the page. I struggled with and then mastered the text-transform property, used to rotate elements and text.

I’m improving with each project. This is one of the most time-consuming and complex interactives I’ve designed. I am extremely proud with how it turned out.

I hope it is useful to find which wine you want to try. Cheers!

Learning to build

Last week in Capital News Service I learned tabletop js and became “mustache champ,” which stands for my initials and the Mustache language. I’ve been learning new tools every week for the wire service, stretching and improving my coding abilities.

I brainstormed with a reporter writing a story about media choosing not to use the name Washington Redskins. We decided I would make a database listing a few publications and their editorial policy. My editor happened to attend the Online News Association conference last weekend and learned about tabletop — so he suggested I use it.

Tabletop allows you to display Google spreadsheets on websites. It simplifies the process of creating a database, and this way you don’t need to use MySQL. When you need to update the database, you can just update the Google spreadsheet — simple as that.

Since it was my first experience with tabletop, I decided to do some research. There are some great guides out there, like “The Absurdly Illustrated Guide to Sortable, Searchable Online Data Tables,” by Lisa Williams, or “Some Thoughts After a Couple Months With Tabletop and Handlebars,” by Chris Keller.

My editor wanted to link a Google Form to the database so we could crowdsource. Did readers know another publication choosing to drop or use a different reference for the team name? They could submit it to us with the Google Form. But then responses were being entered directly into the database — and we wanted to have more control over possible spam. How would I keep some rows of the spreadsheet hidden while the rest showed up on the site?

When I started to get confused and muddled, I didn’t fret. A great thing about the coding community that I’m beginning to see is how open and welcoming everyone is. They want to help. They struggled and got stuck before — it happens to all coders, beginners to the advanced.

stuck coding try taking a break

I reached out to @ChrisLKeller on Twitter — a great tool for instantly getting in touch with coders around the nation and world. He suggested handlebars. While I ended up not using handlebars for this project (I’m excited to learn it next), I found a tabletop query string that enabled me to only show certain rows of the spreadsheet. Something like query: "approved = >1" and putting “2” in the rows I wanted to display. This gave me control over what data would appear on the page viewers see.

I love the trial and error method behind coding. You really have to break something before you build it. This can be terrifying, but also exhilarating. When I figure a problem out in coding, there is nothing else like that triumphant feeling. It’s different than seeing my name in print or online. I’ve built something. I’ve created.

Check out the database below. Let me know what you think!

Becoming a cartographer

I created this interactive map using TileMill to show locations of bird-friendly coffee farms. TileMill is an application you download to your computer and use to code maps with many styles and zoom levels. The application uses a mixture of HTML, CSS and its own CartoCSS, a cartography-based CSS.

cartographer

from French, cartographie, meaning chart

This was my first time using the program, and there was a slight learning curve, but I’m excited to use it again.

TileMill has different styles than Google Maps and allows for more customization. You can add several layers of data into TileMill. The mapping software allows you to pinpoint specific locations with geocoding. You can choose icons and customize the styling of tooltips that appear if you hover over the icons.

There have been very advanced maps made using TileMill. Check some out in their gallery.

Charting Maryland casino revenue


I created two charts that track Maryland casino revenue, using Highcharts. The website offers demos that make it easy to learn and make your own charts.

Highcharts uses JavaScript to make the charts interactive, clickable and add more data. You can create various graphs, including:

  • line charts
  • area charts
  • column and bar charts
  • pie charts
  • scatter and bubble charts
  • dynamic charts (like updating stock market charts)

It’s very easy to make your own chart using Highcharts’ documentation. You can change the axes, legend, symbols and more. They have several options and make the JavaScript simple.