• Read more about Rails + Girls = A Better Rails Community

The Rails community has had its share of misogynistic debacles over the last several years. Dominated by male programmers (recent statistics suggest 94% of employed Rails programmers are male), the inroads to professional Rails development for females are not exactly accessible or welcoming.

Of course, it's not just the Rails community that lacks representation from women. When only 18% of the Computer Science undergraduate degree recipients in 2010 were female (Source - NCWIT.org) it's obvious there is a lack of female participation in the entire field of programming.

Though the speculation of why this has become a problem is varied, Rails Girls is a movement that's focusing on the more important part of the equation - solving it.

No community can be considered healthy without a balanced representation in gender and race. That's why at Intridea we're excited to sponsor Rails Girls DC, taking place September 14-15th at the Living Social offices in Washington, DC. We're supporting Rails Girls because we want to foster a healthier community - one where women are building their great ideas alongside men, in equal numbers and with equal opportunity.

Women can apply now to attend the free development workshops that are taking place around the world including Germany, Estonia, Spain, Belgium, and more. Additionally, Rails Girls has open sourced their guides to organizing these events, making it easy for Rails developers to change the shocking statistics that plague our community.

We're looking forward to being a part of this great event. Additionally, we're hiring Rails developers and women are encouraged to apply!

• Read more about John Cromartie to speak at MoDevTablet - 4 pm - September 14th

Parsimonious Pixel Pushing

With the release of the new iPad, and slew of hi-res Android tablets close behind, it's clear that tablets are overtaking the average desktop screen in terms of pure pixel count. Your mission, as an app developer, is to fill all of those up with tasty UI goodness.

But how can you populate more than 3 million pixels without bloating your app's download size, saturating your users' bandwidth, incurring load-time penalties, or eating too much memory?

How can you design a great-looking UI for multiple screen sizes and densities without an exponential increase in pre-rendered design assets?

This talk will look at some techniques (iOS-focused, with code!) to slim down your apps while taking full advantage of supersized screens. We will also take a peek into some of the techniques that iOS itself employs to stay efficient.

John Cromartie began developing native apps for customers and self-publishing with Mobomo in 2009. After taking a 2 year break from mobile, he's back and excited to take advantage of the explosion of smartphone and tablet capabilities.

• Read more about Improve Interface Development with Box Sizing

Whether you're new to css layouts or a ninja css warrior we both share one common enemy: The Box Model.

The box-model is the way we calculate the width and height of an object. The W3C modal calculates the width and height by adding the padding and border to the width you specify ( width + padding + border / height + padding + border ). This is a pain because when we want to specify a width to be 400px wide, we first need to subtract the difference of the padding and border to make a 400px wide box. If we had a border of 10px and a padding of 20px, the width would be 340px wide (400 - 20 - 40 = 340px).

IE6 has a quirk where its box model calculated the width with the border and padding inside. When I started out as a developer I thought this was odd as other browsers calculated differently. This is how the border-box calculates the width. This really comes in handy when used for responsive design and fluid grids!

Box-sizing does take two values. First, the border-box as we have described above where the padding and border are inside. The second value, which is commonly used across browsers is content-box specified by CSS2. The padding and border are included to the width and height.

Using box-sizing you can have fluid grids and keep all your gutters and borders inside. This makes it easier when starting out with responsive web design. We have begun using the border-box value for the box-size property in our recent Github pages (Omni Auth, Green Onion, Grape). Take a look at them as examples of how simple designs can be responsive with box-sizing: border-box property.

You can also play with sample code at Codepen.io.

Browser Support

• Firefox 1-3, un-prefixed in current version
• Safari 3, un-prefixed in current version
• IE8+

code

  * {   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box;   }

By using the * you make all elements on the page use the box-sizing property.

If you have not started using box-sizing, I highly recomend using it in your projects. For the vetrans that know the old box modal this will help you with responsive web design. As mobile takes over, responsive design will become common practice, and the box-sizing property will become your new best friend!

• Read more about Smashing Conf + Intridea

We’re excited to announce our involvement and sponsorship of Smashing Conference, taking place in beautiful Freiburg, Germany September 17-19th.

This event brings together web designers and developers for three days of intense workshops and engaging presentations from design experts around the world. We’re sponsoring the sold-out event and trekking to Germany for an epic “meeting of the minds.” (And some streusel. And beer. And sausages.)

Are you going to Smashing Conf? Be sure to come say “hallo”! Be on the lookout for these two dapper fellas:

We love talking about design and development and we’d love to hear your stories and share some of our own. If you didn’t get your ticket before the event sold out we’ll be tweeting updates from the event, so be sure to follow us and check back on our blog for a recap of the Smashing Conf highlights when we return!

See you in Germany!

• Read more about Introducing Elena Washington, Girl Extraordinaire

No ordinary development intern, Elena Washington brings an intriguing set of skills to the Intridea team.

By day she puts her Mechanical Engineering degree to use as a fulltime Controls Commissioning Engineer at Alstrom Power. By night she pursues a Master's degree in Computer Science and works with Anthony Nystrom at Intridea to learn as much as she can about web and mobile development.

Driven by a tenacious desire for knowledge and excellence, Elena is a strategic addition to our growing team. In the following interview we bring you all the interesting details on our newest Intridean.

Renae: What is your role at Intridea and what will you be working on as an intern?
Elena: My role at Intridea is to work closely with Anthony to learn as much as possible about the development process and build up my competency as a developer with a focus on mobile and emerging technologies. So far I have been working a lot with Javascript, HTML, and CSS to redesign an experiment in real-time surface web imagery; down the road I hope to get more into data visualization utilizing WebGL.
Renae: Tell me about the work you've been doing recently at Alstom Power.
Elena: Recently, I have been working with the Remote Monitoring and Diagnostics (M&D) group to provide technical support for our customers who use our equipment in power plants operating around the world. I also perform on-site service work. As a service engineer, I travel to power plants, work long hours for as long as the job takes, and get to see how the “sausage,” or in this case electricity, is made.
Renae: How did studying Mechanical Engineering prepare you to study Computer Science at George Mason?
Elena: Mechanical Engineering isn’t so unrelated to Computer Science so as to make switching disciplines impossible. With both there is a certain procedural way of doing things and the problem solving skills you gain from either discipline are invaluable.
Renae: What fuels your interest in mobile development?
Elena: Mobile development is more than just representing websites on a smaller screen. Technologies such as NFC, Square, and gTar, to name a few, are indicative of the fact that developing on mobile allows for a robust feature set on a smaller, more portable form factor.
For me, it’s crazy to think how much faster and more useful my cellphone is than the computer I had growing up. Mobile and emerging technology is on the cutting edge and I’m excited to be working with a group who has expertise in this arena.
Renae: Growing up, were you always interested in technology?
Elena: Yes, but growing up I was mostly interested in and focused on “pure” math and science and didn’t get into the practical nature or the applications of those subjects until later in life.
To elaborate, I was a precocious kid and liked to read. I spent a lot of time reading books about math and science as those particular subjects really piqued my interest. For example, in first grade I read my older brother’s math book and decided to tell my class about exponents during “Show and Tell”. In elementary school I got involved with our school’s GEMS (Girls Excelling in Math and Science) Club and learned about some of the practical usages of math and science in engineering. I spent a week at the beach reading Stephen Hawking’s "A Brief History in Time" one summer during high school. However, I didn’t decide to become an engineer until I took my first physics class in high school, and I didn’t really get into web development until college.
Renae: Can you talk a bit about what it's like being a female in your field?
Elena: Being a female, as well as African-American, has not been a huge deal for me in my field. I have been fortunate enough to have worked with men who don’t treat me as the lady on the team (for 3 years I was the only female engineer in the department), but as another professional with knowledge and expertise that is of value. However, I do work for a company with a global presence and my management has been sensitive to the fact that the rest of the world may not necessarily share this sentiment. So they don’t send me to places where my gender, race, or nationality may be an issue. But if there is an issue they are quick to back me up or pull me out of there.
Renae: What were your hobbies as a kid? And now?
Elena: I love to read. As a kid it was books, and now it’s ebooks, blog posts, and news articles. As a kid I really liked to play with Legos and play outside with friends. Now that I’m older, those interests have shifted to traveling, playing the drums, and watching stand-up comedy. But I still like to play outside with the same friends.
Renae: You've lived and worked in a lot of places - tell me about living in Germany, Switzerland and Australia.
Elena: I spent three years living in Germany between the ages of 2 and 5. My dad was in the Air Force so we moved around a lot. I spent some time living both on base and off base during those years and got to see a lot of cool things (I was a toddler during my first Oktoberfest). But since I was so young I didn’t have a real appreciation for it until I got older.
All of the other travel I did was for Alstom. The main hub of their gas turbine business is in Switzerland so I’ve made several trips to that office for projects and training. The longest continuous stretch I’ve worked abroad is 4 months spent in Queensland, Australia. Though I had an amazing condo on the beach, I spent 6 days a week working on site and I didn’t have any of my friends or family on the continent.
Renae: What do you love about living and working in DC?
Elena: I’ve lived in the DC area since I was nine so this has been my home for the longest. I’m glad to have my family nearby and be able to hang out with friends that I have known for nearly two decades. I guess what I really love about DC is the people I know here. But it’s also pretty cool to say, “I’m Elena Washington from Washington.”
Renae: How did you know about Intridea? What excites you most about interning with us?
Elena: I came across Intridea as I was searching for Ruby on Rails development shops in DC. I had been interested in web development for a while and spent some time learning on my own, but I was interested in a more structured way of building my competency.
So with that I reached out to Marc Garrett about interning. He was enthusiastic to have me on board to learn and to grow and he introduced me to Anthony who shared that same enthusiasm. Granted, I came to Intridea looking to work with Rails, but if I get a solid understanding of Javascript out of this experience, it will be more than a consolation prize.
I am extremely excited about working with such a great group of intelligent, hard-working, and affable people.

We're excited to work with Elena as well. You can follow Elena and all of our Intrideans through the Intridean Twitter list. Please join us in welcoming Elena to the team and the world of development!

• Read more about GreenOnion, The New UI Testing Tool

Don't cry. We've all been there too. Regression issues in the presentation layer make the entire team go crazy. Why can't we have a methodical way of testing the UI to ensure once designs are styled as views, they stay the way they were created?

The first release of GreenOnion is an attempt at just that. It moves from testing code to testing the visual interfaces that designers have envisioned and end-users will interact with. Developed after reading Jeff Kreeftmeijer's post on creating image diffs, GreenOnion brings together both OilyPNG and Capybara to test the UI.

RSpec, MiniTest, Test::Unit all allow devs to create solid code using BDD/TDD, but there has yet to be a good way to make sure bugs are not introduced in HTML and CSS. Sure, we have Watir and Capybara (a dependency of GreenOnion), but these tools are more focused on the functionality of views rather than how they actually look. GreenOnion captures and compares what the user would actually see. There will never be a sure-fire way to fully automate testing something so subjective as visual aesthetic, but GreenOnion should help the designer or developer by highlighting where things might be going wrong.

The GreenOnion workflow

• Run skin method for the 1st time on a URL (best case would be if the styling of the page was correct)
• Save skin
• Run skin method for the 2nd time on a URL
• Compare 1st skin to the 2nd (fresh) skin

Percent of change

GreenOnion.skin_percentage(url, threshold [optional])

The primary feature of GreenOnion is seeing how much (if at all) a view has changed from one instance to the next, and being alerted when a view has surpassed into an unacceptable threshold.

What do we mean by threshold?

The threshold is the percentage of pixels that are allowed to change from one iteration of a view to the next. This will give the view tolerance of change, and if that tolerance has been surpassed, then the test will alert the developer.

Visual change

GreenOnion.skin_visual(url)

Once you are aware of a issue in the UI, you can also check out where the offending issue may have taken place. You should open your "skins" directory, and check out the files with "_diff.png" at the end of the filename. The pixels will be highlighted and will have the same effect as the Photoshop "difference" filter.

Roadmap

We hope that this is just the beginning of more robust testing in the UI. Here are some areas that we will focus on in the future:

• Screenshots can either be viewed as a visual diff, or overlayed newest over oldest and viewed as an onion-skin with sliding transparency.
• Allow for flexibility in picking browsers
• More robust skinner generator
• Should allow for testing using fixtures/factories
• Flexibility in skin filenaming
• Test with UI events

• Read more about Ruby, Lakeside

How many Ruby conferences are held on the shore of beautiful Lake Champlain? Just one.

If you weren't at Burlington Ruby Conference last weekend you missed one of the most intimate and interesting conferences I've had the pleasure of attending. It was a nice break from the usual roundup of Ruby and Rails conferences, set in a small but gorgeous venue on one of New England's most beautiful lakes.

Along with a change in scenery Burlington Ruby Conference also offered a welcome change in their lineup of presenters. Unlike many larger conferences that rotate the usual round of suspects, BURUCO featured thoughtful presentations from a fresh crew of experts.

I especially enjoyed Scott Tadman's talk on asynchronous applications and Alex Maccaw's related talk on asynchronous user interfaces - something I'm a fan of designing for and building. Alex presented a number of useful paradigms for keeping the user interface responsive while user input is processed asynchronously. I really think that most web developers have something to learn from his presentation. See the slides here.

In between great talks we enjoyed delicious food, including a memorable beach-side BBQ as the sun set against the calm waters of Lake Champlain. Since the conference was small everyone had easy access to talk to speakers in either a technical or social setting. There were plenty of opportunities to share information among peers.

Intridea sponsored this event, but I was also there as a presenter, and I have to thank the organizers of BURUCO for going above and beyond for their presenters. They were in touch with the speakers throughout the entire process and went to great lengths to make sure we were comfortable and prepared. This was their first conference, and they knocked it out of the park.

I delivered the last presentation of the event and gave tips on building location based applications. Despite presenting on a Sunday morning no one had cleared out yet and my talk was fully attended. The audience had a lot of great questions and feedback for me.

Overall this was a well organized conference, set in a beautiful spot, fueled by bright presenters and attended by intelligent and interesting developers. I'm looking forward to heading back to Burlington next year for another round of BURUCO.

The beautiful photo of the harbor in Burlington, Vermont shown in this article is being used under the Creative Commons Attribution 2.0 license. The original photo is available here

• Read more about Develop A World Choropleth Map With Raphaeljs

Data visualization is a big part of what we do at Intridea, and in this post I'm sharing what we used to build a world choropleth map in one of our client projects.

What is Raphael ?

Raphael is a small JS library that makes it easy to create vector graphics on the web. It's also (conveniently) compatible with major browsers including IE 6.0. You may have heard about d3.js, another popular data visualization tool which is built on HTML5 and CSS3. We didn't use it because it has some compatibility issues with IE. In this particular use case we needed IE compatibility.

Basic Usage of Raphael

Create Canvas:

Add Elements: elements are created with paper instance we create last step, you can create rect, circle, text, path, etc.

You can actually chain call the method around element which will handful for show codes:

Draw a path:

Before we start building our world choropleth map you may want to check out the demo here. The world map is built with lots of paths; for the paths of countries around the world we need to have countries paths data and luckily we can find that in http://raphaeljs.com/world/world.js

The HTML:

<div id="world_map_container"></div> 

The Coffeescript Code:

bindHoverToCountry method is used to bind hover events on the country path which will be used to highlight the country when mouse hover the country and display tooltip

You can download the code in github https://github.com/intridea/raphael-choropleth-map. The full codebase is developed with Backbone and Raphael. You can find the Raphael code in https://github.com/intridea/raphael-choropleth-map/blob/master/app/assets/javascripts/views/map_view.js.coffee.

Resources:

raphaeljs.com/reference.html

raphaeljs.com/world

• Read more about Ken Fang presents at the HowTo.gov Mobile First Webinar

Federal agency mobile implementation is an important aspect of the Digital Government Strategy, so last week the Mobile Gov team and Digital Gov University partnered for a “Mobile First” Webinar. A “mobile first” approach is where new websites and applications are designed for mobile devices first, instead of designed for the traditional desktop.  Representatives from government and the private sector spoke about what it means to be “mobile first.” You can listen to the entire webinar, but here are some highlights:

Ken Fang from Mobomo Inc. talked about the importance of a mobile first approach, citing the increasing percent of traffic routing from mobile devices. Fang  proposed three steps to consider when choosing a device and platform to develop.

1. Consider your audience needs and remembering who and what you are making the app for.
2. Think about what kind of content will be sent out.
3. Think platform strategy —answering whether you develop for one device or choose a different route such as an API or responsive design.

• Read more about Vermont, Meet Ruby. Ruby, Meet Vermont.

I'll be spending the last weekend of July with passionate Ruby developers and pioneers in Burlington, Vermont - a small but charming city situated on the eastern shore of sparking Lake Champlain, and the perfect spot for Vermont's first Ruby conference, BURUCO.

Though this is a much anticipated retreat from the commotion of New York City (which is where I've been spending the majority of my time for the last several months), it's also an exciting opportunity for me to share some of the recent work I've been doing on spatial programming and location based apps.

I'm looking forward to sharing my knowledge, connecting with other developers, and learning from other giants in the community who are doing meaningful work. There will be interesting presentations from:

• Marc-Andre Cournoyer, author of "The 4 Hour Work Week For Ruby Hackers"
• Joshua Hull and Alex Maccaw of Twitter. I'm looking forward to learning more about Renee in Joshua's talk and getting an inside look at Spine, a JavaScript framework Alex wrote.
• Dan Croak from Thoughtbot who will be diving into Rails conventions.
• Scott Tadman, creator of PostageApp.com - a SaaS-based Email Delivery service for web apps - will be presenting on building asynchronous server applications with Ruby and Rails.
• Jen Myers of Relevance will be talking about the area where design and development intersect and how developers can leverage design principles to build better applications.
• Harold Gimenez who builds tools on top of Postgres all day long at Heroku and will be demonstrating its power and usefulness.
• Mark Bates, founder of Meta42 Labs, a Boston-based consultancy who will be presenting on testing JavaScript and CoffeeScript in Rails.