Quicken Loans launched an open source initiative just a few months ago which has been steadily picking up steam. I get bragging rights since I’m the first one in the IT Team to launch multiple open source projects!

Checkout the Demo

Grandomizr is a jQuery plugin that allows you to randomly generate a number of groups from a list of items. The idea came about while I was working with a new team of people and in order to maximize creativity we wanted to make sure everyone was regularly working with different groups.

This tool allows me to set up a list of everyone on the team, select the number of groups to form, and randomly sort the team into those groups. Check out the demo featuring a list of celebrities.

Grandomizr is currently available for download on github. I do have a few ideas for improvements – alternate methods of inputting the list of items, the ability to remove items from the list, alternate methods of displaying the list of groups, etc.

If you have any ideas or feedback, I’d love to see your comments – either on this post or on github.

It’s had several pull requests on github, tons of great feature requests, and it even helped spur the open source movement at my company, Quicken Loans!

So of course, the next logical move for SlickQuiz was a WordPress plugin – which I’m here to present to you today!

Check it out on WordPress: SlickQuiz

Here are the details:

Managing and creating new quizzes is simple and intuitive.

• Quiz questions can have single or multiple correct responses.
• Correct and Incorrect response messages.
• Results will include a score and ranking (Savant, Genius, Pretty Smart, Not Smart, etc.)
• Unlimited questions, unlimited answers
• Make changes to your quiz without having to publish them immediately.
• Customize error messages for missing or unpublished quizzes.
• Customize the quiz start button text, as well as score and ranking text.

I am very excited to see where this plugin goes – there are so many possibilities and I already have a lot of ideas for improvements. Already in it’s first 10 days of availability, it’s been downloaded almost 200 times! Yippee!

Update 11/2/13: Wow! Thank you all SO much for trying out SlickQuiz. I hope it’s working well for all of your needs. Today, I’m disabling comments on this post in an effort to route all questions and support requests to a single location – the WordPress SlickQuiz Support Forum: http://wordpress.org/support/plugin/slickquiz

Please: if you have any issues or feature requests, have a quick look through the existing tops for your item before creating a new one. Thanks all! Looking forward to adding some awesome new features in the next year!

You’re also welcome to browse the open Github issues which I’ll be creating for support issues or requests from the WordPress forum. https://github.com/jewlofthelotus/SlickQuiz-WordPress/issues

Lastly, if you want to stay up to date with new SlickQuiz developments, I’ll be regularly posting about it on my new blog: http://www.juliecameron.com/blog/category/slickquiz/

Vegas. What else needs to be said? It’s been a few weeks since I returned and life is finally starting to get back to normal (ish). Future Insights Live was an amazing conference – there were great talks, great people, great insight, great parties ;), and, of course, great Vegas. This inaugural conference definitely rivaled the best of them, so hopefully we see it coming back year after year. Check it out if you have the chance!

Keynote – A Happy Grain of Sand

Aran Balkan | @aral

This was probably my favorite keynote of the week. It was a highly motivational, very entertaining kickoff to the conference. The core of Aral’s presentation was the idea that a person’s life is alike to an hourglass, with each grain of flowing sand akin to a moment in that person’s lifetime. Around this idea, we can try to create as many good moments as possible through friendly and intuitive experience design. With this we looked at various good and bad experience designs – everything from toilet arrangments, to laundry workflows, to websites. A few of my favorite quotes:

Your app shouldn’t look like your database just threw up.

Embrace the “Don’t Be A Fucking Idiot” design plan.

A Responsive Process: One Web to Rule Them All

Steve Fisher | @hellofisher | Slides

Steve’s talk walked us through the responsive design process that his company, Yellow Pencil, follows. There wasn’t a ton of new stuff here, as it was fairly basic. But, a few very helpful resources were presented. First up, the process:

• Discover – Abstract and understand the content before going to design.
• Design
• Develop
• Deploy

The helpful resources:

• The Responsive Process – this was essentially the presentation
• GatherContent
• Interface Harmony Canvas
• Style Tiles

jQuery Plugin Authoring Best Practices

Ben Alman | @cowboy | Slides

Ben hosted a very cool and unique talk on, you guessed it, jQuery plugin best practices. What was unique about his talk was that his presentation was entirely in the form of a javascript file – click the Slides link to see what I’m talking about. While many of the concepts of his talk were already pretty familiar to me, there were a few things that stood out – primarily the .end() and .pushStack() methods, which I had never used before.

.end() returns you to the previous element set. For example, the following line will collect all the ul’s, grab their children and append the class of ‘li’ to each, after which .end() is called which returns us to the original collection of ul’s to which we append the ‘ul’ class:

  $("ul").children().addClass("li").end().addClass("ul");

To create our own .end()-able method in a custom plugin, you simply need to return the element(s):

  $.fn.spans = function() {
    return this.find("span");
  };

The .end() method works great until you start returning things like this.parent().siblings().children(). Calling .end() after this would return us to the sibling elements, not to whatever this is. So you might write your plugin method like so:

  $.fn.cousins = function() {
    return this.pushStack(this.parent().siblings().children());
  };

Keynote – The Real Me – Crafting Honest Customer Relationships

Aarron Walter | @aarron | Related Article | Designing For Emotion – A Book Apart

Aarron’s was another great keynote discussing the personality and humanity of design. He was yet another speaker talking about creating a great user experience. His biggest point was that creating emotion in people is what will get you and / or your product remembered. He showed a lot of great examples of this, for example: Holstee’s manifesto (I bought the poster), the GE Stories series, and Raleigh Denim.

The main tool Aarron discussed using to define our brands personality is a design persona that answers the question, “Who are we?” Once you’ve got your persona designed, Aarron suggested defining the persona’s voice and tone.

Help! My Stylesheets are a Mess!

Chris Eppstein | @chriseppstein | Slides

Chris’s talk was particularly relevent to us on Team Venture as our stylesheets continue to be rather messy, although they are much better than they were a year ago. Chris ran through a bunch of ways to create structure, patterns, and rules in your CSS. There were a ton of great concepts in his talk, so I highly suggest you look through the slides at his examples and check out his site’s styleguide. One very notable point was his CSS file structure:

• Library – no output. mostly presentational in nature. (ex. config, typography, spacers)
• Foundation – core, shared styles. maps presentation to domain. (ex. resets, layout)
• App – features, one-off pages, experimental styles, server traffic patterns
  • Features
  • Pages
  • Products

Another relevant point to Team Venture was his color naming system. He sets up color variables with color names but then only uses those color-name variables as color values for other variables. For example:

$orange:            #E77B19;
$light-yellow:      #FFFCEE;
$light-green:       #E9EFCE;

$header-color:      $orange;
$link-color:        $light-green;
$link-hover-color:  $light-yellow;

h1 { color: $header-color; }
a { color: $link-color; }
a:hover { color: $link-hover-color; }

With that, he admitted that naming these variables is extremely hard to do. But by collaborating with designers, you can find names that describe the intent of the design element, rather than the appearance. He also suggested that too-specific a name is far better than too-generic a name.

Conclusion

One of the biggest themes I kept hearing at Future Insights Live was this: give your users a positive emotional response by providing them with an excellent design experience. There are many ways to do this: responsive designs, animations, clean intuitive interfaces, humanized technology, and wow factors – just to name a few.

Additional Resources

• FIL Slides
• More Slides & Coverage

Yay! You made it all the way to the bottom! As a gift to you, here’s my flickr Vegas slideshow! :)

SlickQuiz, simply put, is:

A jQuery plugin for creating pretty, dynamic quizzes.

I’ll let the demo speak for itself – check it out below!!

Check out the github page for all the technical details!

Update 6/21/12: We now have a SlickQuiz WordPress plugin!

Update 11/2/13: Wow! Thank you all SO much for trying out SlickQuiz. I hope it’s working well for all of your needs. Today, I’m disabling comments on this post in an effort to route all questions and support requests to a more organized system via Github Issues: https://github.com/jewlofthelotus/SlickQuiz/issues

Please: if you have any issues or feature requests, look through the existing issues for your item before creating a new one. Thanks all! Looking forward to adding some awesome new features in the next year!

Lastly, if you want to stay up to date with new SlickQuiz developments, I’ll be regularly posting about it on my new blog: http://www.juliecameron.com/blog/category/slickquiz/

Overall, I attended three keynotes, a product launch, eight presenter sessions, a vendor session and an open space talk. It was a pretty packed two days to say the least. But of all those events, I’d say the three that stood out to me most were:

• Scott Chacron’s (Github) keynote on Developer Driven Development & the Open Source Business Model
• Mobile Smackdown – 3 mobile platform developers took 15 mins each to attempt the construction of the same basic Twitter app.
• Women In Tech open spaces discussion session.

Read more about each of these sessions below, along with summaries of my favorite sessions.

Session Notes

Netflix in the Cloud

Carl Quinn | @cquinn | Presentation Slides

Netflix in the Cloud was an extremely in-depth look at how Netflix runs their service in the Amazon AWS cloud. This presentation was pretty well over my head for the most part, but it was very interesting to see how a site with so much traffic is structured.

The talk began with a discussion of the downfalls of their old data center solution, followed by a thorough overview of their new, faster, scalable, available, and productive cloud architecture.

There’s no way I could possibly try to explain their setup, so I took a few screen grabs from of the slides (click to enlarge):

An overview of the Netflix deployment setup on Amazon AWS

A look at Netflix processing usage of Amazon AWS

A request from start to finish, look at all those caches!!

If you’re interested in hearing all the nitty gritty, check out the presentation linked above for a full hour long session video.

jQuery 102

Rod Paddock | @rodpaddock | Presentation Slides

While I was already relatively familiar with most of the “advanced” concepts presented in this talk, Rod Paddock’s explanations and demonstrations certainly helped to reinforce my understanding of those techniques.

Topics discussed included:

• The basic jQuery selector methods
• Dynamic UI functions like live, liveQuery, and bind – used to attach events to elements in the DOM
• Sending AJAX requests with ajaxSend and ajaxSetup
• My personal favorite, creating pretty popups with the dialog method
• And of course, how to create a jQuery plugin.

To my teammates reading this: If you attended the jQuery Summit web conference in November, there’s not a ton of new stuff, but it’s certainly a good refresher.

Test Driven JavaScript (Vendor Session – Pillar)

Justin Searls of Pillar | @searls | Presentation Slides

This vendor session focused primarily on Jasmine, the JavaScript test framework. I wasn’t able to take many notes, as Justin miraculously managed to fly through 60 slides and numerous demos in a quick 20 minutes, but it was an interesting introduction to JavaScript testing overall.

For those of you wondering why you should even bother testing your JavaScript, Justin referred us to one of his previous presentations: JavaScript Craftsmanship – Why JavaScript is worthy of TDD.

Going offline with HTML5 and iPhone

Michael Ball | @ballmw | Presentation Slides

Instead of taking notes in this session, I began working on my first mobile web app – which has since evolved into a jQuery Mobile TV remote interface. The “Presentation Slides” linked above are not actually slides, but rather notes. So you may want to use it more as a reference than a guide – there are a lot of good tips.

Developing High Performance Web Applications

Timothy Fisher (Compuware) | @tfisher | Presentation Slides

This was an extremely well put together session by Compuware Technical Consultant, Timothy Fisher, focused on client-side optimization, with an emphasis on loading JavaScript.

Timothy first explained why frontend performance matters (basically because this is typically where the enduser spends the most time waiting, it’s easy to optimize, and you’ll see big results), and then went on to review the most common frontend optimization best practices:

• Reduce HTTP requests – combine JavaScript and CSS into fewer files, sprite images
• Use a CDN – content delivered by a fast distributed network
• Make pages cacheable – add expires headers, use static content
• Use gzip compression – “60-80% savings on text based content”
• Place stylesheets at the top – keep them external and avoid @import
• Place scripts at the bottom – allows page content to be render first, keep external
• Minify JavaScript and CSS – save bandwidth / download time
• Maximize Parallel Downloads – split components across domains, enables browsers to load more in parallel
• Optimize Images – avoid high-res unless it is intentional, don’t let browser scale images, sprite images

Next, Timothy moved on to loading JavaScript, stating that, “no single Javascript should execute for more than 100mS to ensure a responsive UI.” This portion included:

• Using Web Workers to allow for asynchronous JS execution
• Various methods of setting up non-blocking JS loads:
  • Dynamic Script Elements – can run at top of page

    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "file.js";
    document.getElementsByTagName("head")[0].appendChild(script);

  • Script Injection – uses AJAX to get the JS. The big advantage is that you can control when the script is parsed and executed, but the script must be served from same domain.
  • Recommended Method: Dynamically load the rest of the JS needed

    <script src="loader.js"></script>
    <script>
      loadScript("the-rest.js", function(){
        Application.init()
      });
    </script>

• An overview of open source JS loaders – ControlJS, LabJS, and RequireJS

The presentation slides are definitely worth checking out!

Mobile Smackdown

Jeff Blankenburg (Windows Phone 7) | Chris Judd (Android) | Daniel Steinberg (iPhone)

As the name implies, this was one #BADA55 session where three developers from three mobile platforms took turns in an attempt to build the same basic Twitter application for each of their respective platforms in 15 minutes each.

Daniel Steinberg kicked off with iOS development and literally flew through it – he had to have practiced that before! Chris Judd followed up with Android and made it about half way through development before his time ran up. And Jeff Blankburg didn’t get very far at all with Windows Phone 7.

What does it all mean? Well, probably just that some came more prepared than others, but overall it was a very cool comparison and introduction to each of the development platforms.

The Open Source Business (Keynote)

Scott Chacron (Github) | Presentation Slides

This presentation was the last keynote of the conference, but it was certainly not the least. Scott brought his insight into the open source business and what he calls “developer driven development,” suggesting that any organization can integrate open source methodologies into their practice.

The main characteristic of open source businesses that Scott focused on was this concept of “developer driven development” which essentially boils down to one thing: trust. He suggests that if you trust your employees and give them what they want – they’ll do better work than you could’ve even imagined. Throughout his presentation, Scott touched on roughly five key aspects of DDD:

• Autonomy
• Power / Responsibility
• No meetings
• No feature backlog or roadmaps
• Free beer!

According to Scott, applying these concepts to your business can result in increased productivity, agile development, and more good ideas. They also give the developers a lot of flexibility in how and what they work on, ultimately keeping developers interested and attached.

Women In Tech (Open Space)

Women in Tech – I love how we all have demon eyes!

Yes! There were women at CodeMash, somewhere around 40 from what I heard, and our numbers are growing!! This informal open spaces discussion session was my introduction to the world of girly geeks, but it certainly won’t be my last.

Coming from a job where I was the only female employee over a three year span, I could definitely relate to challenges of being a woman in tech. At the same time, I feel extremely fortunate to have joined a company like Quicken Loans where gender diversity is encouraged and much more prevalent. I now work with numerous females and I couldn’t be happier – just being able to relate to and identify with other women is a huge boost to motivation, creativity, and overall comfort.

I’ll definitely be looking into participating in more Women In Tech groups – I’ve even discovered Girls In Tech Detroit which I hope to get involved with in the future.

Wrap Up

So there it is, a relatively high-level overview of my CodeMash 2011 adventure. All-in-all, the entire event was a great learning experience and a lot of fun. In fact, my only real complaint was the lack of tea provisions haha! (Seriously though, not everyone drinks pop and coffee!)

Looking for more presentation slides? Here’s an aggregated list of CodeMash 2011 Presentation Slides.

Lovely theme, eh? It’s called Color Paper and it’s FREE from Smashing Magazine.

That is all for now… stay tuned – cool things should start to happen soonish ;)

In it, I discuss the micro-blogging trend and a few different ways that businesses can take advantage of it. Check it out and let us know how you’ve seen micro-blogging used in the business world.

On to the update… It’s been about 5 1/2 months since my last post, I was freelancing then – but now I’ve got a real job – Project Manager at MetaSpring, a marketing, design and development startup studio in Ann Arbor, Michigan. And awesomely enough, I primarily get to work with Rails! We just launched our redesigned website and blog so please check them out and leave a comment!

Aside from the new job, life’s been normal… Went to California over Thanksgiving with Adam, that was awesome. Christmas, w00t. New Years, woohoo! Work. Work. Work work work. Oh, ..and I’m about to buy a new MacBook (!!!!..sorta..).

This 12” PowerBook G4, God bless its beautiful little form factor, is audible from the opposite end of my apartment. Adam likens the sound of it to that of a dustbuster. And it really is driving me crazy, not to mention it’s way too slow for what I need it to do. So, I have to upgrade. First let me say, I love the MacBook Air body – sleek, sexy, almost weightless. I checked it out in Best Buy last week and it definitely had me salivating…sigh…but it needs more power. So, I’m getting a white MacBook with an upgraded hard drive to match the specs of the default black MacBook (which, by the way, is $100 more than the white with even specs).

If all goes well, I’ll be making that purchase before the end of the weekend :) But now I’m going to bed, and hopefully sleeping off this oncoming cold. Wish me luck!

Recent government action has dramatically increased (300-1200%) the fees internet radio companies must pay to play the music you enjoy.

This means that sites like Pandora and Last.fm, as well as many other online radio stations, could be shut down due to bankruptcy.

You can help, let your voice be heard. Visit SaveNetRadio.org to see how you can help prevent the death of online radio.

The first interview was with Robert Dempsey, Project Director of Atlantic Dominion Solutions a Ruby on Rails website and application development firm, and Founder and Director of Rails For All a non-profit organization dedicated to the promotion of Ruby on Rails to developers and businesses.

My interview with Robert is available in the Interviews section at Rails for All.

The second interview was with Craig Ambrose, a freelance agile web developer specializing in Ruby on Rails. In November, Craig began producing his Freelancing On Rails podcasts which have been a great insight into the world of freelance web development (something I’d like to try full time down the road).

Read on to view my interview with Craig…

1. How did you get into software development, and more specifically, Ruby on Rails? Did you have any university training or were you more self-taught?

I spent three years at uni (software engineering) but I never finished because I was doing a year of industry placement with a computer games company and got a bit involved in the project and lost interest in going back to uni. So, while I found university invaluable, I did find I was learning more once I left. I’m personally in favour of a more balanced combination of theory and practice. Usually whenever people give me a chance to rant about it I advocate an apprenticeship model for programmers, with a couple of days a week of “trade school”, covering all the theory, and a much heavier programming component that university usually offers, on real projects for real clients, rather than contrived problems.

I started using Rails a couple of years ago when I was at a local industry group (on the subject of design patterns) and pitching about the lack of good object-relational modelling layers in PHP and someone suggested that I try Active Record (and Rails). I tried rewriting a small PHP app I’d written in Rails instead and was surprised by how much faster it came together and how much nicer the code looked.

2. What kind of jobs did you have before freelancing and how did they help prepare you for this work?

I spent about 4 years doing C and C++ programming in a couple of different game development companies, and when the second one downsized, I started doing freelance work as a PHP programmer. After about eighteen months of that I was feeling a bit isolated and stagnant in my learning. At the games companied I’d been part of teams (of about ten programmers) and there were always more senior people to learn from. As a PHP developer I was working with a a couple of other programmers on occasion, but many of them were self-taught, which I don’t have anything against, but they didn’t seem to have much interest in pushing their skills beyond producing spaghetti and calling it programming. Also, I found that I was working more and more for the same client that I ended up being basically an employee.

In the end, I took a job at a .NET firm for a year. The work wasn’t terribly interesting, but I found that my “freelancing mind set” really helped in dealing with management and the companies clients. I was learning more again, but the organisation and technology where very conservative, so obviously I was being left behind. When I finally quit to freelance again (and this time with an intention of having a bigger variety of clients, and working exclusively in rails) I had a bunch of knowledge about what the bigger companies were doing. Still, I don’t think that the experience is entirely necessary, people can start freelancing straight away, providing they have ways of continuing their own learning.

3. What part of your job is the most interesting or rewarding and which is the most challenging or difficult? What motivates you to continue in spite of these difficulties?

The rewarding bit is not working for someone else. It’s good to be able to succeed and fail on my own merits, and make my own decisions about which technologies and development practices are most effective. I enjoy the face to face contact with clients, and the networking and marketting.

The downside is probably cash flow. A single contractor is pretty exposed to the feast and famine income of payments and gaps between projects. It seems to be slowly becoming less of an issue, but it’s probably the single biggest obstacle to freelancing.

4. From your personal experience in this field, what attributes do you think are essential for success?

Confidence. Everything else can be faked if you’ve got confidence. :)

Oh, I guess being able to program helps too, but that just requires practice and a whole lot of books.