Archive for the ‘Programs’ Category

Anatomy of a Campaign

Wednesday, November 26th, 2014

Anatomy of a Campaign

We here at Bruji love technology, you could say we are filled with Technolust. As such, we’re always on the lookout for software to make our lives, if not easier, than certainly more interesting. This article will examine how we created our Summer Sales campaign with a focus on the technologies used, in the hopes that it can help other folks out there learn about them. This won’t be an in-depth technical article (no code) and we won’t delve too deeply into the apps, just a nice bird’s-eye view.

The software we’ll be taking about here (for the impatient) are the following:

  1. Sketch 3
  2. Sass
  3. CodeKit 2
  4. Rubymine
  5. Macaw
  6. Firefox Developer Edition
  7. Ulysses III
  8. Rdio

The Idea

But it all begins with an idea. I wanted to do a Summer Sale campaign with happy, light colours and a flat look. To me, nothing says Summer quite like the beach, so off I went in search of some good beachy images for inspiration. It helps to be specific so I wanted a shot of the ocean and sand, an umbrella and a simple beach chair. The obvious stops include:

  1. Dribbble
  2. Behance
  3. Google Images

Armed with a good image, the brainstorming started. You’ll find lots of photos in Google like this one, which is very nice, but is not what I wanted at all. I wanted more of an illustration look. Another search netted me a bunch of illustrations like this one or this nice one on Dribble, but none were quite right. So we extrapolate a little, we grab what we like and build from there.

Design Flow

I created first the umbrella, chair, ocean and sand in Sketch. Everything else followed from that design and the colours used. This was my first time with Sketch and I was learning as I went along, which can be very frustrating, but is also an excellent way to learn because you’re tackling a real-world project and not just following along with a tutorial.

umbrella-and-chair

Palette

It is important to have a cohesive colour palette, you don’t want your design to look like a rainbow unless that’s exactly what you’re shooting for. So based on that first image I created the colour palette for the rest of the elements. It’s got nice warm colours that feel summery and light.

palette

When selecting a colour palette, remember that Black, White and Gray are also colours and they mix well with pretty much everything.

Black can be overpowering so use it sparingly or reduce it’s value (tending more towards dark gray), white can also be overpowering, in which case you can use some off-white value, what the paints industry calls bone-white. Lastly, gray is your friend, don’t leave it behind, if you need more variations of colours in your palette, try mixing an existing colour with gray (in small doses).

Sketch

Sketch is, in my opinion, the best App out there for Web and iOS design. After using Photoshop and Illustrator for about 20 years, I switched my workflow to Sketch. If you do any design for web or iOS, I encourage you to try it, there’s a 30-day trial available. The export features alone in Sketch are enough to make you want to switch, as are the ease of use and low learning curve compared to Illustrator, and the price is right, especially compared to Adobe’s overpriced offerings. It does have its quirks however so be patient, it is ultimately worthwhile. But, if you do a lot of heavy illustrations for print and not web then Sketch is probably not for you since it doesn’t even recognize CMYK colour values and is lacking some of the more advanced illustration tools you might find in Adobe Illustrator.

Sketch’s layouts revolve around the idea of artboards (though you don’t have to use them if you don’t want to, unlike Illustrator which forces you to create a sized canvas before you can start doing anything with it) and they’re actually very useful. In artboards.png, I have the Desktop and Mobile artboards side by side. It makes it really easy to create your designs for multiple platforms, Sketch comes with a number of ready-made Artboards to take the guessworks out of your designs, from iPhone screen sizes and icons to paper sizes and OS X icons with a number of responsive web page sizes along the way. Inserting a new Artboard is as simple as pressing A on the keyboard and choosing a size.

artboards

Exporting in Sketch is a joy. Group elements into a single Layer and create an exportable image from that with a single click. Even better, if you choose to export your image in PNG format, Sketch will ask if you want it to automatically create 1x, 2x and 3x versions of your image and name them appropriately for you, yes please! Click Export, you’re done. If clicking and selecting a size is too much work, simply drag your grouped object to the desktop or any finder window and Sketch will create the image on the fly, nice.

The Bezier curve tool (called the Vector Tool) in Sketch is also the fastest and easiest I’ve ver used.

I don’t want this to turn into a raving review of Sketch, so I’ll just end by saying that object alignment has never been easier. Do yourself and favour and check the app out.

Macaw

Macaw is an HTML editor with the, sadly unfulfilled, promise of letting you create web sites visually instead of coding. I’ve been pretty critical of Macaw in the past and I stand by what I wrote, I don’t think Macaw is ready for primetime yet. So why am I talking about it here if it’s no good? Well, I think that for web mockups Macaw is excellent. Currently, with version 1.5.9 I would never create a full website with it but for a single-page promo that will be up for, at most, a week, I think it’s fine.

After exporting all my images in SVG from Sketch (more on the SVG format later on) I bring them into Macaw and try to recreate the design in an actual web site and see how it responds. One of the nicer things about Macaw is that it’s very easy to add breakpoints for different screen sizes and devices. I usually add a breakpoint for iPad at 800 pixels (as opposed to the iPad’s actual portrait width of 768px to have a little buffer) then another for iPhone at 320px.

After you have all the elements in Macaw, properly named and properly placed, it’s time to start testing those breakpoints to see how things react and what breaks. Don’t forget to test them on an actual browser as well as Macaw’s built-in browser to make sure things still look good and, most important, make sure that the sizes between breakpoints still work. Macaw does make it easy to move elements around visually when adjusting for different screen sizes. For example, for the iPhone I usually create a very different layout than for Desktop, I don’t like sites where they simply scrunch all the elements into a tiny window where you can’t even read the text.

macaw-320

Macaw would be a lot easier to recommend if it were free (or worked as advertised). I’d say it’s a tool to keep an eye on in the hopes that one day soon they’ll fix all the niggling faults and make it really useful. For now, try the demo but make sure you create a real website and not a tutorial so you can truly evaluate the product. I’m one of the original Kisckstarter backers so I’ll keep using it until they demand more money for a newer version.

Lots of elbow grease

Now it’s time for Rubymine and lots of coding. I know I said that Macaw was fine for a single-page promo, but the truth is I have to integrate it with our existing Bruji site, this means all the different menus and layouts (desktop, iPad and iPhone) and the different scripts we use on our site and this is, unfortunately, not possible to do in Macaw.

Rubymine is an awesome IDE for Ruby coding by the good folks over at Jetbrains. It’s where I spend all day most days (when I’m not designing or fighting with Macaw I’m knee-deep in Rubymine). Both the Doghouse API and the Doghouse Admin are all written in Ruby using Rubymine. If you do any Ruby (or Rails) coding at all, do yourself a big favour and check out Rubymine. If you’ve ever tried it before and wrote it off, give it another try. I remember trying version 5.0 and being less than impressed with it because it was slow and ate up my CPU faster than champions at a pie-eating contest, but I tried version 6 and was hooked immediately, now I can’t live without it, it even has a very good built-in Database editor! I started out coding Ruby in SublimeText, which is an excellent text editor but not an IDE and doesn’t hold a candle to Rubymine. After using Rubymine, I could never got back. Rubymine even has real code refactoring, something that not even Xcode has for Swift (at the moment).

But what does all this Ruby talk have to do with a website written in HTML? you might be asking. Simple: Rubymine also happens to be an extremely good web editor, much better than SublimeText, in my opinion. The autocompletion is great and the way it handles and integrates CSS is superb. I do all my heavy HTML work in Rubymine, in fact, Bruji’s new website was built almost entirely, to great fanfare and general adulation, in Rubymine.

So I integrate the craziness that Macaw wrote and tweak it in Rubymine. If we’re going to reuse any CSS I try to convert it into SASS (or SCSS) for future reuse. This brings us to our next technology:

Sass

Sass is a CSS preprocessor. Basically it’s a much better way of writing and using CSS. Let’s face it, CSS is not great. It was fine 15 years ago to style a simple web page without having to use dreaded tables. But these days it’s really lacking and often contradictory, it’s quite a mess really. Enter Sass. Sass is a way to write CSS to make it less painful and much more usable, it includes simple concepts like nesting CSS rules together without repetition (something so basic CSS should be ashamed not to support it) all the way to variables, partials and conditionals. It also integrates well with plain HTML and more complex frameworks like Rails, etc.

Sass makes working with CSS an almost joyful experience.

However, in order to work with Sass, you need some sort of compiler that will turn your fancy Sass code into vanilla CSS that any web browser can understand. For that we turn to Codekit.

CodeKit

Codekit, as their website states, is like steroids for web developers. Basically it allows you to use all sorts of modern frameworks and preprocessors by compiling them all in the background and updating your web site every time you save. This might not sound like a big thing but it’s actually huge. You simply write your Sass, Haml, Slim, Coffeescript, JQuery, etc and Codekit does the rest. CodeKit compiles Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, TypeScript, Markdown and Compass files automatically each time you save.

It will also alert you of any error you might have in any of those frameworks, very nice.

The best part is there is nothing to install apart from the app, no servers to run or background processes to watch, you don’t need to learn to use yet another editor or anything like that, you work in your preferred Editor like Rubymine or SublimeText and every time you save a file Codekit does its magic behind the scenes.

Check it out.

Firefox Developer Edition

Finally, it’s time to make sure everything works on a real browser, for this I use Firefox Developer Edition. It has all the bells and whistles a developer might need built-in and Firefox’s DOM inspector is the best there is in the world, no contest. I used to use Google Chrome, like everyone else, to test my websites (Safari’s developer tools are the worst) but recently switched to Firefox simply because of its DOM inspector. Firefox has been instrumental in figuring out gnarly CSS problems. Plus it’s free.

Ulysses III

A wonderful writing tool. I write everything in it, I’m currently writing this in Ulysses. It might seem a bit pricey, but if you do any writing it’s quite worth it, especially if you like Markdown.

Rdio

Last but certainly not least, Rdio. Nothing could be done without Rdio. It’s the finest music streaming service out there (I’ve tried them all) and so much better than iTunes’ Radio. Superb design and great music selection, Rdio is always running on my Mac.

Conclusion

For the Summer Campaign it took a little more than a week to get everything done. This may seem like a long time, but the early stages of any design take a bit of time while you’re figuring out what you like and what you don’t like, what works and what doesn’t work, etc. Also, I was learning to use Sketch so that added quite a bit of time to development, on top of that fighting with Macaw without a manual made things tougher. I was also developing a workflow which I’ve used later for subsequent campaigns and that takes time. I simply mention all this so you don’t get discouraged if coming to grips with new technology is eating up your precious time.

So there you have it, a glimpse into just some of the technologies that Bruji uses. This is just one side of the coin, on the other side we have Xcode and all things iOS-specific, but that’s a different can of worms for another day.

Hopefully you’ll find something interesting here that you might be able to use for your own projects. If you do, let us know in the comments. Also let us know if you enjoy these articles, we have plans to write more technical ones in the future once we can actually find the time :)

Cheers.

Doghouse Moderator Guide

Friday, October 24th, 2014

The Doghouse keeps growing thanks to all our great users but we also need to make sure that the data we have in there is as accurate as possible. If you’ve signed up to be a Doghouse Moderator you’ll want to visit the Doghouse Moderator’s Guide page often.

We’ve recently updated it with information on handling duplicates with its own section for clarity. We also updated the styles for better readability.

Instead of creating a lengthy entry here in the blog repeating the instructions on the Moderator’s Guide, please refer to the pages directly.

We’ll keep updating this guide and adding new info as regularly as we can so make sure to check it often.

Version 5.3: Wawona Tunnel

Thursday, July 31st, 2014

5.3 has been a long time in testing and we would like to thank all those that volunteered their time during the beta tests to make this a solid release. This is our release with the most beta versions ever. The fundamental internals of the program have changed to be memory managed so as to be more compatible going forward. We’ve been pushing the limits of backwards compatibility to give everybody the best program possible, but looking forward the next big version is likely to go 10.8+ only.

Along with  all the improvements, better ISBN searches, faster speeds, UI tweaks and bug fixes that come with 5.3, what I want to highlight in particular is all the work done by Alex over on the Doghouse Online Library side. This is the beginning of easier sharing with friends as well as having your library on the go, should one  – gasp, the horror – not have Pocketpedia. Do test it out and let Alex know about any bugs you might find. With such a massive undertaking and in the early stages there is still a lot to add and tweak, but it’s best to do so live with web applications so that we can receive a broader feedback.

The programs are running great on Yosemite, so if you are one of the lucky few in the Yosemite open beta do not hesitate to give the new version a try. There’s still lots of work to do for OS X Yosemite, but we have left all this UI work and new features for after Yosemite launches as the final design and internals could change between the beta and the public release of Yosemite.

Hence why this post is called Wawona Tunnel. This is one of the most famous view points at Yosemite park and reached via the southern entrance to the park. From the Wawona Tunnel view point, one can look all the way down the length of the park to Half Dome. So that’s where we are at with the Pedias: in Yosemite but still not down on the valley floor with our camping all set up.

Beta Version 5.2.2, Yosemite Edition

Thursday, July 10th, 2014

The next beta version, 5.2.2, of the Pedia programs is out. This one is a major overhaul of the memory internals, making all the Pedias faster and lighter. It also addresses a number of issues with the upcoming Mac OS X 10.10 Yosemite, due out in the fall.

Bookpedia Beta
CDpedia Beta
DVDpedia Beta
Gamepedia Beta

Some of the changes include the new system font of Helvetica Neue which is now used in the details view for Yosemite, table headers match the new Yosemite style and several freeze and bug fixes for Yosemite. One of the few changes that will appear for all users, regardless of OS X installed, is a thinner divider line between the views in the main window. Also included is the final version of the new Doghouse online library option.

Screen Shot 2014-07-09 at 2.38.38 PM

 

A couple of known bugs with Yosemite are the gray background and incorrect highlight in the collection view and deleting text from the internal search does not update the results. These are Yosemite bugs that hopefully will get fixed in an upcoming beta version, but otherwise will work around them after the release of the Yosemite Golden master.

If you happen to be testing the beta version of Yosemite do give 5.2.2 a whirl and let us know about any other issues you experience. Especially usability issues such as freezes and crashes. If you’re not running Yosemite do test the betas all the same to make sure the modernization of the code for Yosemite did not break any functions all the way back to OS X 10.5. We’ll be releasing an official new version soon on our web page followed by the Mac App Store version.

The next version of Pocketpedia with fixes for both iOS 7 and iOS 8 is also in the works and should be out in a couple of weeks.

New DiscoGS Authentication Requirement

Monday, June 23rd, 2014

Discogs
Discogs will start requiring authentication for searches starting August 15th. Unlike the previous image download authentication requirement that was implemented without announcement, this change has been announced via email to developers. This gave us plenty of time to work the needed changes into the upcoming releases. Especially important since the review time on the Mac App Store slows down immediate fixes. The latest CDpedia beta already has the new code in place for authentication.

The Discogs API already implemented a technology called OAuth for user authentication to private data such as collections and want list access. Although this is the wrong technology for the general search API, because it requires too much user interaction, it’s easier to integrate for developers. Taking this in mind it seems the Discogs developers have been generous enough to leave the search API without any limits on a per account basis, allowing for a single account sign on and the API to continue to operate without friction. So the new plugin is authenticating automatically with a CDpedia Discogs account and will continue to be as ease to use.

Should you for any reason want to authenticate with your own account, this can be done in the Preferences -> Sites by double clicking the gear button to the right of Discogs in the list of sites. It will expand the details view to full screen and load the Discogs site. Here you need to login, if not already logged in, and then approve CDpedia for access. From then on your own generated tokens for CDpedia will be used to authenticate into Discogs.

Also integrated into the update is a small change to beef up the genres. The styles information now goes into genre field if there is no custom field named “Styles”.

For big fans of Discogs, do take the CDpedia beta for a spin and if you find any issues with the new authentication please me us know.

Bruji on Facebook

Tuesday, June 17th, 2014

We don’t do much advertising here at Bruji. Every once in a while we run a Google AdWords campaign or sponsor a blog like Daring Fireball. Our main advertising “campaign” has always been word of mouth from our users but nowadays word of mouth doesn’t necessarily mean that people talk to each other by the water cooler, instead they exchange links on Twitter and Facebook.

We’ve been on Twitter for a while (you’re following us, right?!) but for some reason we never made it onto Facebook. That has finally changed and we’re ready for friending, liking and posting lots of cat videos and baby pictures. (We don’t have any cats here at Bruji, so we’ll post dog pictures instead.) Here is our new Facebook page now you can tell your friends you ‘like’ us.

We’re still figuring out how it all works, including Facebook Ads, but hopefully this new step will help us reach even more Mac users and spread the Pedia love. Thanks for your help and support!

Family Sharing

Friday, June 6th, 2014

Along with all the other new goodies that Apple recently announced at WWDC, they also included family sharing which lets members of a family easily share photos, calendars and purchased apps from the App Store and iTunes Store through the cloud.

This is great news for the Pedia programs because our regular serial numbers (the ones you get when you purchase the programs from us directly as opposed to the Mac App Store) are already family licenses which allow everyone in the same household to use the same serial number. Now we can offer that same freedom to our customers on the Mac App Store and iTunes as well.

Apple has also announced that they will bring bundle sales into the App Store and iTunes Store as well so hopefully we’ll be able to offer that our customers soon too.

We’re still playing around with all the other new features Apple has revealed but once we get to know them and see what fits well with our programs we will work on integrating more of them into the Pedias.

Pocketpedia iOS 7

Sunday, March 23rd, 2014

Bookpedia iPad iOS 7

Pocketpedia 3.2 with an iOS 7 interface is finally out. Took us longer than expected as we tried to keep backwards compatibility with previous iOS versions, but in the end it was too time consuming. The changes in iOS 7 are too many, so going forward all the new versions of Pocketpedia are iOS 7+. The old version will still be available through the App Store for those with older devices that can’t upgrade to the latest iOS.

The new version is looking great. On the iPad it was less work as we already had most of the interface matching iOS 7. The iPhone version got a serious makeover and no longer has a dedicated Doghouse search tab bar. The search is now integrated with the collection screen under the organize button (top right). This frees a lot more vertical space for the item and collection listing. Another area of notable improvement is the ability to sort by any field in Pocketpedia with a scroll picker. Selecting the same field twice will also allow to flip the sorting to descending. Not common with alphabetical sorting but handy for numbers and ratings.

As usual a number of smaller updates smarter addition of items to the selected collection without the need for user selection, localization corrections and speed improvements.

Star Wars DVDpedia iOS 7

Thank you for waiting and as always we would like to thank all the beta testers who took time to debug and improve Pocketpedia and helped us make this iOS 7 release so smooth.

Happy Birthday Bruji!

Sunday, February 2nd, 2014

birthdayBruji

10 years ago today we released DVDpedia 1.0 into the wild. We never thought that this little program, which Conor initially wrote just to learn more about Cocoa and Xcode, would turn Bruji into our fulltime jobs and livelihood. But 5 people (unexpectedly) bought DVDpedia on that first day and we got a lot of feedback too so Conor kept working on it. After a couple of weeks he couldn’t keep up with the emails anymore so I jumped in for tech support.

Bookpedia followed just a few months later in May 2004 because we’re big readers and wanted a good program to catalogue our own books. Later that year CDpedia completed the trifecta. At that point we thought we were done with Pedia programs but we kept getting requests for Gamepedia and finally decided to go ahead with it in November 2005.

Of course when the iPhone debuted in 2007 we were very excited about writing our first iOS app and Pocketpedia nicely completed the Pedia family. Pocketpedia was among the first 523 apps that were in the App Store on launch day. Way back when it was possible to actually find something in the App Store.

As everyone knows though, a picture is worth a thousand words and even though some of these make us cringe, they’re too funny not to share. (All images found thanks to the way back machine and the internet archive.)

DVDpedia 1.0. Note particularly those wonderful toolbar icons. Hard to tell but there was a lot of drop-shadow involved.

dvdpedia 1.0

A slightly later version (1.x) with much more professional toolbar icons and a slightly less professional scrollbar for the summary in the side drawer.

DVDpedia version 1.5

With CDpedia we brought in a different kind of scrollbar for the drawer, not necessarily better…

cdpedia

Bookpedia’s Add/Edit window version 2.x

bookpedia

The release of Gamepedia coincided with version 2 of the other Pedia programs and brought the basic layout along that the Pedias still use today. Although it took us until version 4 to introduce the flexible Add/Edit window with the white background.

Gamepedia 1.x

If you’ve been using the Pedias for a while then you might also remember AmazonPedia, our widget, and our short-lived dabble in time management, MyTime. (AmazonPedia went the way of the dodo as most widgets did and MyTime was sold to another development company.) And if you’re a real geek then you’re probably using Bwana, our man page reader. That’s been around almost as long as Bookpedia actually but it’s such a simple program that we sometimes forget it’s there.

To celebrate we are doing 20% off everything on Bruji’s birthday February 3rd. As our loyal customer you might not need another version of our program, but do tell any friends you think might benefit from some organization in their lives.

We hope you enjoyed this little trip into the past for our birthday. Here’s to 10 more exciting years full of new versions, programs and challenges!

Version 5.2 and the New Doghouse

Thursday, November 28th, 2013

doghouseSmallWe are very excited to announce the latest version, 5.2, of all the Pedias. Although this version includes quite a good number of fixes and enhancements the real new features are in the brand-new Doghouse. The original Doghouse was very popular and served us well for over a year. However with its impressive growth we needed to expand and not only modernize the core language but also take the opportunity to make it easier to add expansions in the future. Launching today Doghouse is faster, 100% redundant, has more relevant results, matches more UPCs and ISBNs, contains improved moderator tools and has a new web page.

Instead of two complete dedicated servers at Site5 and Hostgator we now moved to Heroku, a platform that lets us deploy any number of virtual servers within seconds to handle peak loads. We can now also deploy exclusive worker servers to do background maintenance without affecting the API response time.

We are now using Ruby instead of PHP for the API language. It was a language we started using to develop the online admin as it allowed for a modern interface and less development time with the use of Ruby gems. Early on we realized it would make a good fit for the API and that we could migrate the entire platform to Ruby and maintain a single language. A language more similar to Objective-C which we use everyday when working on The Pedias and Pocketpedia.

Flying Sphinx Heroku Puma

 

 

 

The database is now hosted by ClearDB, with redundant servers and guaranteed uptime as well as automatic backups. This was previously work that we had to execute and monitor ourselves: synchronizing Site5 and Hostgator and doing daily local backups. Now we have less code to maintain and more time to develop the features we really want to see in Doghouse. We also re-structured the database for efficiency and speed. The next step is to evaluate adopting PostgreSQL that integrates better with Heroku. ClearDB was not built for a dynamic system such as Heroku that can scale, the limits are too low to easily add to a Heroku Ruby application.

Images are now hosted at Google Storage and Rackspace. Rackspace’s content delivery network delivers incredible speeds when it comes to downloading the cover, the slowest part when downloading details for any item. We also have automatic generation of a mini size thumbnail for Pocketpedia that makes the results faster and more responsive.

We have been using Sphinx since the beginning, an amazing search engine  delivering accurate search results in single digit milliseconds. But like MySQL we were also managing Sphinx and keeping it upgraded and maintained. In the spirit of Heroku we moved to a dedicated server operated by Flying Sphinx. Built by Pat Allan, an Australian who also built the Ruby gem “Thinking Sphinx” for integrating with Sphinx. Pat has been incredibly helpful responding to issues and updating his code within days to fix bugs. Going way beyond run of the mill good support and even pushing code fixes into our own repository. We now update the index live, meaning contributions are available to all within a minute or two, instead of the nightly indexing that was done by the previous version.

SphinxRackspaceRuby Sidekiq

 

 

 

Moderating entries and viewing them online happens all under a single domain now: doghouse.bruji.com. Logged in users will get access to an edit button as well as special admin pages. Version 5.2 also makes it easier to sign up as a moderator, simply include an email in the “Doghouse -> Settings” window. This will allow you to fix any small errors you might run into with one of the Doghouse items. There is no commitment for becoming a moderator. We want to encourage all users to contribute and correct entries, as many or as few as they like.

In future posts, we will share details of a more technical nature when we have the time to write them up. They include: running Puma on Heroku to maintain a fast response time; Sidekiq and Redis to handle background jobs; using Heroku’s API to scale dynamically and automatically; integrating automatic error reporting; automated testing with Rspec and New Relic monitoring.

We would like to thank all our beta testers who made sure that the API was running smoothly in the new version before the launch of 5.2. Also all the moderators who fixed countless small issues in tens of thousands of books, movies, albums and games. But most all the users who contributed entries and helped us grow Doghouse with every submission.

Regardless of whether you’re a veteran user or just bought the programs, do test the new Doghouse and let us know if there are any rough edges that need smoothing. We’ll be rolling out more new Doghouse features slowly once we are satisfied with the transition so stay tuned for updates.