Archive:
October, 2010
It’s that time of the year again! HALLOWEEN! This is our 3rd annual costume contest, and as usual, we’re opening up the voting to the public! So come join the madness, take a look at our costumes and comment below to vote for your favourite!
You can also vote via twitter! Just use the hash-tag #FBHalloween. Winner will be announced on Monday!
Costumes presented in alphabetical order
Adam as Scout from Team Fortress II.
Ashok as a Gentleman Vampire!
Beatriz as a Princess Warrior.
Casey as Fresh Leafy
and many, many more behind the cut!
Read the rest of this entry »
Brock Davis, a creative director and art director for an ad agency in Minneapolis, created this really nifty invoice from Boba Fett to Jabba the Hut for the delivery of a one Han Solo. It’s pretty neat.
However, there is a burning question:
There’s one very good reason why Boba Fett didn’t use FreshBooks. He’s evil.
FreshBooks customers are all great people. I hope that answers your question.
Do you have clients that pay your invoices right after you send them? Or clients that pay your invoices only after 3 months of friendly and not so friendly reminders? Now you can know exactly how long it takes for a specific client to pay you in FreshBooks! Instead of basing your perception on a gut feeling, you now know the hard data. Knowing this helps you predict your cashflow which is important for any small business. Just go to your “Clients” tab and click on the specific client you want to investigate. Then look on the right of the page above the quick link navigation. By clicking “Make this smarter”, you can also fill in the industry and company size of your client.
On the client dashboard, you’ll also notice a design change on the page. Take a look at your client’s contacts in the center of the page and you’ll see a much cleaner contact area. You should also try adding a new contact as it’s a lot faster. Just click “+ Add Another Contact” below your current client contacts and you’ll be brought directly to where you enter in their information – no need to scroll down any more.
If you have any feedback, please share it in the comments below so we can further improve FreshBooks!
Browsers are way faster than they used to be. Nearly everything — bandwidth, client processing power, storage — is cheaper than it was. However, one thing that is still really expensive is interacting with the DOM. Changing and modifying the Document Object Model (DOM), especially when those interactions cause page reflows and repaints, can quickly become so costly it ruins the user experience. A perfect example of this are the “comboboxes” we use on invoices, estimates and expenses in FreshBooks. Each time we create a combobox, it inserts content into the DOM. This is a totally reasonable strategy when you are making 1 – 10 of them. However, it becomes a significant bottle neck when you have to do several hundred, as we did when we started working on the expense import feature. Things slowed to a crawl.
Since interacting with and manipulating the DOM was proving to be our bottleneck, the solution was to not interact with it. Or at least, not in big sets of interaction. When we did have to interact with it, we would have to do so in small chunks so we didn’t lock the UI thread in the browser. Locking the UI thread can happen when javascript causes a pile of DOM updates which results in an unresponsive browser, sad customers and possibly warnings about long running scripts. For us, this locking was caused by iterating large sets nodes and manipulating them. For example
var nodes = document.getElementsByTagName(‘a’);
for (var i = 0, len = nodes.length; i < len; i++) {
nodes[i].changeIt();
}
In order to make this operation seem ‘faster’ and not lock the UI thread we used a `setTimeout` with a delay of 0, and treating each iteration as separate function call. This gave the UI thread enough time to catch up and avoided the dreaded Beachball of Waiting (Death).
var nodes = document.getElementsByTagName(‘a’),
i = 0,
len = nodes.length;
var looper = function() {
nodes[i].changeIt();
i++;
if (i < len) {
setTimeout(looper, 0);
}
looper();
};
This approach does the same work as the above approach, except it does not run the risk of locking the UI thread. Overall, it will run slightly slower than the previous loop, as there is some overhead in the function calls. However, it will feel faster when there are lots of updates to do, as it won’t make the UI totally unresponsive while it works.
The second optimization we did to improve performance was delaying DOM manipulation until the very last second. Usually this means doing as little setup work as possible before the user interacts with elements on the page. An example of this was our calendar pickers. Initially each calendar picker was eagerly inserting its content into the DOM when the calendar was initialized. Once re-factored, the calendars only bound the event listeners required to trigger the calendar display. All of the calendar content was built upon the initial activation of the picker itself. This helped contribute to faster feeling pages, as less work was required at page load.
Another optimization we made was to remove duplicated content nodes. This primarily affected our combobox tool. Originally each combobox created its own container and all of its own content nodes at page load. After the first round of optimizations, only the container elements were being inserted at page load. This sped things up considerably. However, we were still having issues with page performance on larger pages. Since our combobox tool emulates native select boxes, only one can be open at a time, allowing us to make another optimization.
var contentNode = document.getElementById(‘dhtmlx_combo_list’);
if (!contentNode) {
var contentNode = document.createElement(‘div’);
contentNode.id = ‘dhtmlx_combo_list’;
document.body.insertBefore(contentNode, document.body.firstChild);
}
Originally the above code always created and appended a div element in to the DOM. It now only inserts one if one cannot be found. Since only one combobox is visible at a time, we only need to create one container. When the user goes from one combobox to the next, we empty the container, move it, and populate it with the new content. By doing this, we were able to save 100′s of DOM node insertions and still provide the same experience to the user. This optimization did increase code complexity slightly, as it necessitated we juggle a few more references. But the performance improvements more than justified the additional complexity.
These three optimization approaches turned what was once a time consuming hog of a page into a usable and almost snappy feeling one. By making our code lazier we were able to greatly improve performance across FreshBooks, without disrupting our customers actions.
We’re excited to announce that everything is set for our next installment of TechTalksTO on November 10 and it’s going to be a great one! We have Ali Asaria, CEO of Well.ca. Ali will be presenting “How to Develop at a Startup: The Detailed Development Philosophy and Architecture of Well.ca’s Technology”.
It will be a technical talk that covers:
- Agile cycles and the software the allows it
- Architecture of Well.ca and the philosophy behind it
- Data visualization and tools to use
He’ll be going deep into detail on how they deploy their software, do A/B testing and visualize their data. This is a talk that anyone developing software for the web should not miss.
It’ll be the same format as before which will include time before and after to talk with Ali, have a beer and hang out with others in attendance. It’ll be again at 7:00pm at the Gladstone hotel.
Be sure to RSVP so you don’t miss out on a great talk. We’re looking forward to seeing you there!
A few of us from the FreshBooks team will be down in San Francisco next week for the PayPal Innovate X conference (October 26-27, 2010). We’re very excited to learn about the next generation of payments for small business and to promote the FreshBooks billing platform.
Mike McDerment, CEO and co-founder, will be discussing the sexy topic of commercial payments at the conference. Why is this sexy? Because first, you’re getting paid and second, the future opportunities for online receivables (paid invoices) are almost endless for small business. Online payments are not just for consumers anymore. The small business market has been under-served and it’s ripe for some new offerings. Is the paper check really something you still need to wait for in the mail?
The conference itself is all about the future of money, especially on how it’s evolving from a technology perspective. So if you want to be on the leading edge of online payments, it’s a conference you’ll want to check out:
- Integrate payments in your site, app, game or digital goods solution
- Learn how to integrate payments into almost any device or application with 48 tech sessions
- Gain a competitive advantage with inside info on how business is transforming – mobile, social buying, Internet-enabled local commerce
There is still time to register if you’re not already, so come visit our booth – we’ll be monkeying around and hard to miss!
Also, if you’re in San Francisco next week, join us for dinner Monday.
People’s lives are amazing stories. As someone constantly on the hunt for amazing design and product management talent, I see a lot of resumes in my inbox. Today I received one that upon opening, was very overwhelming to read. It was thick with text, buzzwords, and hype-talk…. but rather than being overwhelmed, I just scrolled immediately to the bottom of the resume to find some breathing room. It was there I noticed something very interesting…
The very last section of a resume is actually where you learn the most about the person you are considering hiring. Its in that bottom section that a glimmer of the person’s true personality emerges, and they show their true selves. At the bottom of the resume is where people tell us they love cooking, or windsurfing, or volunteering as a karate instructor. Working in a company where culture fit is as important (if not more) as skills fit, its the bottom where a person’s true cultural orientation comes through. Its where you learn what they are most passionate about, what they would be doing if they didn’t have to work. It tells you of they are the adventurous type, an intellectual, a weekend hacker, or an amateur electrician. Its here that I begin to understand this person’s outlook on life, and how they seek to constantly improve themselves.
From there, I read upwards, typically passing through their education, which tells me more about their path. Then I read through their early jobs, and start to see the complete narrative of a person’s career trajectory. Finally, I get to the top where I read about what they are currently working on, and what they are looking to do next. This part is also interesting, but having all of the context about who the person is, and where they’ve been, completes the picture for me.
Next time you read a resume, or view someone’s LinkedIn profile, skip the flouncy wording at the top, and head straight for the bottom. Its at the bottom of it all, where the real story begins.
For any application that has been growing exponentially for a few years, you run into some scalability issues. Recently, we took our slow, legacy recurring billing solution, rewrote it to take advantage of concurrent programming techniques, and increased throughput three and a half times, without disrupting our existing customers.
A good problem to have
With your FreshBooks account, you can setup recurring billing to periodically charge your customer’s credit card. It’s a powerful feature that was supported by a simple cron job. It would run through every FreshBooks recurring profile and check if the invoice date matched today’s date, which as you can imagine, would take some time. When it was written it was the right solution.
As our customer base grew, the cron job took longer and longer to finish, eventually taking over seven hours to finish processing all the invoices for the first of the quarter. It might not sound like a horrible problem, but during those seven hours, users were in the dark about their billing status. We are committed to providing a fantastic experience for our users and we knew we had to make it better.
A nerd’s dream
There are a million ways to solve this problem, for a scalability nerd like me, I was in heaven! A good solution needs to be extensible and scalable, should leverage our infrastructure, help pay off our code debt and obviously run faster.
We needed a solution that generated invoices faster and positioned us to handle future growth. Before tearing apart our billing infrastructure, it was important that we understood the problem first. Fortunately, the cron job was setup to record payment gateway response times and memory usage along with other metrics. A quick look at the data and it was immediately obvious that the bottleneck was time spent waiting for payment gateways to process credit card transactions. Therefore, running these transactions in parallel would give the best throughput.
Writing concurrent code is difficult, but there was a conceptual breakthrough when we identified atomic actions or tasks in our recurring billing cron. We quickly broke the recurring billing cron into three different tasks: late payment notifications, invoice generation and retrying failed payments. From there, the next obvious step was to create classes that implement the same executable interfaces and captured the essence of the work being done. Once we had classes that did one thing well and were unit testable, we gained the confidence to move on to the more complicated, “concurrent” architectural issues, or so we thought.
The internal web service
As useful as the the classes were, they still relied on our existing PHP code base, and while we are moving away from PHP, much of our invoicing code still exists in the PHP application. We decided to expose the tasks through an internal web service, letting Apache execute the PHP code in parallel and giving us a migration path towards Evolve, the Python application which is replacing our legacy PHP code.
Once we broke down the function into “Tasks,” the idea of workers harvesting from a queue felt natural; each worker would take a task off of the queue, process it and grab another one until the queue was empty. Luckily, we already had RabbitMQ in our infrastructure, and our extensive experience with Python led us to use Sparkplug. Sparkplug is a Python application that abstracts all the connection logic away from the developer and allows them to focus on handling the messages.
Pieces fall into place
The final step was to create a cron job known as the dispatcher to fill the queue with all the tasks related to recurring billing. To further improve throughput and performance, the dispatcher only adds jobs to the queue for FreshBooks accounts that need to send out late payment reminders, create invoices or retry failed payments for today.
The final process looks like the graphic above. A Sparkplug application known as Tolar spawns workers. Each worker then takes a message of off the queue, transforms it and posts back to our internal web service. The internal web service then executes the task, creating an invoice or sending a late payment reminder a customer’s client. As work is dispatched to the queue, Tolar workers immediately start harvesting tasks, posting them to Apache which executes them in parallel.
Over time, as the workload increases, we can add additional Tolar workers to keep the billing time constant. Incidentally, if the servers are under a heavy load, we can reduce the number of Tolar workers that process jobs from the queue.
After heavy internal testing, including a load test with production data to verify the solution would give us the speed-up we desired, it was time to roll out the new solution into production.
Phased roll-out
With such an extensive change to our billing infrastructure, and so many customers relying on our recurring billing solution for their business, it was critical that we tested the new code in production before we migrated our customers to it.
We created several FreshBooks accounts in production that tried to simulate real world accounts, then we modified the dispatcher to only dispatch tasks for those dummy accounts. We manually checked each account, making sure credit cards were charged properly, late payment reminders were sent quickly and all failed payments were retried.
As our confidence grew, we added a few more FreshBooks accounts to our beta group. We focused on accounts that had administrators that closely monitored their accounts and needed to generate multiple invoices daily during our beta period. With each passing iteration we migrated more and more customer accounts to the new infrastructure, finally taking it out of beta two months ago.
The big test
On the 1st of any month, there is a very high volume of recurring billing. And on the 1st of a quarter, it’s even higher. Because of the volume, it has typically taken seven hours to run all of FreshBooks’ recurring billing. So what happened this past quarter? Drum roll please… on October 1st, it took two hours – that is three and half times faster!
Corey Reid, our Chief Cat Herder, was interviewed on Rypple’s new podcast, “Managing Master Class”. The FreshBooks team is very honored to have one of our own interviewed, especially by a company that builds management software.
Corey has two tough roles at FreshBooks: directly managing our team of 13 developers and herding the rest of us away so our developers can focus on their work. As you’d expect, trust is very important within the team. He specifically discusses hiring, organization design, and being a communication lubricator (no alcohol involved).
The podcast is hosted Jay Goldman and Jesse Goldman of Rypple. It’s a brand new and promising podcast covering topics such as attracting top talent, keeping people engaged, getting the best performance, and making work more meaningful.
Rypple is a software that makes managing your team a lot easier. It’s a feedback engine where you can give thanks, organize 1:1 meetings, collaborate, and avoid typically painful reviews. It’s a great way to give feedback to your team.
Transferring your data into a new application is painful. You may have to enter it all into your new account manually. On the bright side, a lot of applications let you import information from other, disparate, applications. These export/import files come in many shapes and sizes and can be specific to your legacy application. However, there is a universal file format that you will commonly find, CSV (Comma Separated Values). It also happens to be the file format that FreshBooks uses to import your clients and expenses.
So what is CSV?
In essence, a CSV file is the most basic version of your data- no extras or fancy formatting. Since each application can use different, incompatible formats (think of them speaking different languages), there needed to be a universal format. CSV has become this over time.
What’s also great about the CSV format is that there are many applications that can edit these files (e.g. Microsoft Excel or Numbers). This allows you to simply export your data into a CSV file from your previous application, rearrange it in Excel, and then import it into your new application. Sounds simple right? Kind of… the CSV format still has its frustrations. Here are some tips and tricks that should make the job much easier.
Tip # 1: Use a template
With almost all applications, you’ll be given a sample CSV file. This file will contain sample data and column/row headings that will show you where to put your data (remember to save the headings in the file). In FreshBooks, locate the sample file on any “Import” page. Just download it, and open it in Excel. The row and column headers allow the import function on your new account to understand which data goes where.
Tip # 2: Have enough space in your new account
Many SaaS applications come with account limits and will fail to import if you go over those limits. For example, a free account with FreshBooks comes with 3 clients, so if your business is booming and you have more than 3 clients, you’ll need to upgrade your package before importing a file with more than 3 clients.
Tip # 3: Ensure the required columns are complete
A hiccup most people run into is leaving out mandatory fields. When this happens you will not be able to finish the file import until you enter the required fields (client name and email). You can fill it with dummy data if necessary.
Tip # 4: Save your file as a CSV
Ensure you’ve saved your file in the format Comma Separated File (by choosing Save As…) or Windows Comma Separated File for Macs. If you’re using Numbers, you’ll have to export as a CSV file.
CSV in Excel: Bonus tips
Excel trick #1: Text to Columns
Some programs will export your data and put a client’s first and last name in the same column. This is a problem when importing requires the first and last name to be separated. Text to Columns automatically does this for you.
To take advantage of the Text to Columns feature, highlight the column containing the data you want to separate, go to the Data menu and select Text to Columns. You’ll arrive at a 3-step wizard
- Check the delimited box
- Check the space option in the delimiter section
- Click Finish
Now watch in amazement as your data is separated into columns.
Excel trick #2: Replace (Ctrl + f)
Sometimes imports can get stuck because your files are peppered with unwanted punctuation. Think of Replace as seek and destroy for errant characters. In the Edit menu select Replace or hit Ctrl + f on your keyboard, in the “Find What:” field type in whatever it is you want to mass replace, leave the “Replace With” field blank and click “Replace All”. Mission complete!
These tips and tricks are almost always applicable to any SaaS applications that lets you import and export a CSV file, but if you’re having problems, there is likely a support line you can call.
Please share any of your personal CSV tips or tricks in the comments below.
users collect enough money to buy all 
