Garage

Distributing Content via CDN

The most requested Invoicebus files from now on are delivered via Akamai CDN at blazing speeds, improving the overall performances, while reducing the load time

In one of the previous posts, we described how we host the Invoicebus site and introduced the term Cloud Files and CDN (Content Delivery Network). Because the user base of Invoicebus constantly increases, we decided to deploy the most common content on Akamai CDN, so the users can feel the turbo charge of the bus :)

Turbo Charge

This content includes Images, Cascading Style Sheets (CSS) and Javascript files. Let me explain you how does this work.

Let’s assume visitors are coming from 10 different countries all over the world: United States, Canada, Mexico, United Kingdom, Germany, France, China, India, Australia and Philippines. For the example, we will take India in particular.

The primary web server of Invoicebus is located in Chicago, Illinois, US in the ORD1 Datacenter of Rackspace. That means all requests should be propagated thorough dozens of routers around the world, so the package from India can reach the server in the US, and then return way back home. Transferring such data over TCP/IP (read Internet) from India to US can take a while, even though this time is very short and usually expressed in milliseconds. However, when we multiply this time with the total number of requests, the delays can be drastic.

There’s a chance some packages to be lost on long distance routes, so resend will be needed, increasing the overall transfer time. There’re also other factors like intercontinental network congestion during busy hours that contribute for these delays.

That’s when CDN comes in game.
So when you deploy your files on CDN, the content will be retrieved from different servers in that CDN network all over the world. That means the users from India will request the files from the local cache in the nearest geo-located CDN server, and not going all the way to US. That’s why the content can be retrieved goddamn fast, leaving the primary server less engaged, so can easily deal other jobs.

We tested all pages from Invoicebus site, but to simplify the post, we will describe what happened with the login page which actually is pretty lightweight with only 160KB, including all the code, images, CSS and JS.

Login Page Screenshot

What we put on CDN from that page was the bus mascot image, a few JS scripts and the global CSS file, or to be precise we distributed content of 102.6KB in total.
Here’re the results of page load time:

Page Load Time Results

Our plan is to optimize the whole app even more, so everything loads blazing fast, nearly as a native desktop app. Please let us know if you have any suggestion or request, we would like to hear from you. You can reach us on twitter whenever you like. We’re always by our laptops so will get you back in seconds.

New features: Currency Symbol Position & Subject Lines of your Emails

In addition to localization feature from the last week, we’re introducing two related updates: custom positioning of the currency symbol and custom subject lines of the emails

Currency Symbol Position

In different countries the currency symbol placement can differ, so can be placed either from the left side or from the right side of the number. That’s why we implemented global option so you can set how the symbol appears on your documents.

Currency Symbol Position (Left/Right)

The option can be managed from System Settings which are global for the whole system.

Note: Modification of the system settings does not affect previously saved documents.


Subject Lines of the emails

Instead of the predefined subjects that your clients usually see (“Incoming Invoice”, “Incoming Quote”, “Payment Reminder”, “Thank You Note”), from now on you can enter your custom subject line, so your message can be more descriptive, and of course in a language of your choice.

Custom Subject Line


If you have any suggestion for future update, please let us know. We’re eager to hear your thoughts.

Great New Feature – Customizable Field Labels

Customization of the field labels allows creating documents in any language in any country with text of your choice

Invoicebus globe

We love Mondays, we really do, especially those when we launch new feature. The last one was one of those. We’ve introduced another great option as an answer to many requests from our users about localization of the invoices and customization of the field labels.

The localization of the invoices has been planned from the very beginning, but was not ready for the initial release, so we postponed a bit. The implementation was planned to be with combo box, so the user can switch among multiple languages. In the meanwhile, we’ve received numerous requests from our users about invoice label customization, so we came up with another idea. Instead to translate the invoice in various languages, we decided to make the labels fully customizable so the user can enter any text he likes in any language. And yes, Invoicebus automatically save it for future re-use.

This solution gives more flexibility in a more intuitive way. Therefore, you can:

  • Localize the invoices in any language, in any country;
  • Customize the field labels with your text (e.g., change the field ‘Quantity’ to ‘Hours’);
  • Omit some fields/labels (e.g., if you don’t want the field ‘Terms & Notes’ to be shown, simply hit space inside the label and the final invoice won’t show anything. Booya!)

Here’s an example with custom labels.

customizable-lables


If you have any suggestion or feature request, don’t hesitate to give us a shout. We’d love to hear from you and consider it as a future update.

Invoicebus is on the air, Live Support is online

3, 2, 1 and we’re on the air

invoicebus-help

This Monday we put something new, something fresh at https://invoicebus.com. If you look in the right bottom corner of your browser you’ll notice bar showing Live Support. Yes this is for real, now you can talk directly with the creators of Invoicebus, and get help directly from us. You can even just stop by and say hi, we really would like that. Here is preview of the chat window, but can go at Invoicebus and see for yourself:

invoicebus-livechat

We are using this wonderful open source live chat platform http://mibew.org, and so far we tested it and prove itself as one reliable and fast live support platform.

But the Live Support is not the only new thing at Invoicebus. As some of you already noticed we have slight improvements in other parts of Invoicebus like the new navigation bar at the top and the overall website copywriting. So let have a chit-chat and tell us what you think about that.

Start Invoicebus from your Desktop

Launching you favorite invoicing software Invoicebus has never been easier, straight from your desktop.

First let see how Invoicebus is started in "conventional way", and after that I will show you a little trick how you can speed up the launching. As you can guess everything starts with a browser, and I’ll share with you that Google Chrome is my personal favorite, so let launch it.
invoicebus-chrome-badge
In the Chrome address bar, also known as "omnibox" we enter invoicebus.com/login.
invoicebus_omnibox
After the login screen is loaded you’ll need to enter your Invoicebus username and password, and you’re ready to invoice your clients. But what if you can jump some of the steps, and go straight to invoicing with just one or two clicks. In Google Chrome there is something called application shortcut, and we’ll use this to place Invoicebus shortcut on our desktop. To create application shortcut:

  1. Go to the login screen in Invoicebus, enter your username and password, and don’t forget to check "Remember me". This will save a cookie on your computer so you won’t need to enter your username and password all the time you launch Invoicebus.
    Note: If you’re using shared computer don’t check "Remember me" option otherwise the security and confidentiality of your invoices may be jeopardized.
  2. Click on the wrench icon invoicebus-chrome-wrench in the upper right corner.
  3. Now go to Tools, and select the first option from the menu – Create application shortcuts.
    invoicebus-chrome-options-menu
  4. You will see the screen (on Windows 7):
    invoicebus-google-app-shortcut
  5. Check the locations you want the Invoicebus shortcut to be placed and click Create.
  6. Voila, now you can start Invoicebus straight form you desktop or taskbar.

Do you know other tricks of creating "desktop" web applications? Come on, share them with us – would love to hear from you.

How to Protect Your Email Address From Spam Crawlers

The email addresses are not always stolen by leaving footprints on other sites. In most cases, they are stolen directly from your own web site.

What are spam crawlers?

Spam crawlers are automatically programmed bots that steal your email address from the web by various mechanisms and use it in bulk email or other purposes usually referred as spam. This process is also known as email address harvesting.

Spam Crawler

Contact details, terms and policies, about pages and pretty much everywhere on your site where you publicly expose your email address, is a great resource for crawlers.

The crawler or so called harvester automatically searches the HTML content of your web site, usually scanning the link tag

<a></a>

and searching the href=”mailto:” attribute inside.

So what’s the idea?

There’re few workarounds for protecting email addresses and you’ve probably seen solutions like displaying the email in format: info (at) invoicebus (dot) com, embedding the email into an image, implementing contact form etc. However, in all cases you don’t get clickable email link, so here we’re going to use a little hack.

Beside the href=”mailto:” attribute, the spam crawler scans every HTML code that contains “@” sign, so can easily figure out and extract the actual email address. Our objective is to keep the crawler task difficult as much as possible.

In fact, we’ll programmatically hide the email address behind variable and dynamically print it in run-time, exactly when the page is rendered by the browser. The crawler won’t be able to find it anywhere in the code.

How to assign a value to the variable so to the crawler couldn’t see it?

If we divide the email address on 3 parts,
Parts of the email address: Username, at sign, domain name
we can assign the value sequentially in two steps by concatenating strings.
Here’s the JavaScript snippet for it:

<script type="text/javascript">

     var emailE = 'invoicebus.com';
     emailE = ('support' + '@' + emailE);
     document.write('<a href="mailto:' + emailE + '">' + emailE + '</a>');

</script>

The code will display the following link in the browser:

You can even write your own JS function that transforms the letters with custom pattern, but for now I’ll stick to the basics.

Note: If the visitor of the site has disabled the JavaScript in his browser, the email address won’t be shown.

Of course, you also have another option of not using the JavaScript by directly encoding the value of the HREF attribute with HTML ASCII encoding or URL encoding.

Clear HTML:

<a href="mailto:yourname@domain.com">yourname@domain.com</a>



ASCII encoded HTML:

<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#121;&#111;&#117;&#114;&#110;&#97;&#109;&#101;&#64;&#100;&#111;&#109;&#97;&#105;&#110;&#46;&#99;&#111;&#109;">&#121;&#111;&#117;&#114;&#110;&#97;&#109;&#101;&#64;&#100;&#111;&#109;&#97;&#105;&#110;&#46;&#99;&#111;&#109;</a>

In both cases, the browser will display the following:

yourname@domain.com


Note: Some spam crawlers can extract the email address even HTML encoded.

I quickly wrote a simple HTML ASCII encoder that can be used to encode your email addresses or any text you want.

Enter your email/text
Copy the encoded text

There’re couples of other methods available, but I believe these two are the most effective ones, so far. It’s up to you which one you’ll choose. For us, JS method works pretty well.

A little effort and a few lines of code on your site will save you from tons of unsolicited and junk email later.


Now let me hear your thoughts on it.
Have any suggestions of how to improve these methods, or maybe some others we haven't heard about?

Sleep tight, your data is secure, part 5 – Hosting Server Security

Our customers should clearly know where and how their data are kept and what kind of protection guards their precious documents

This is the last part from the security talk series where I’m going to explain you the methods and technologies we use to host and test the web servers of Invoicebus.

When I talk about hosting, the very first things that pop-up in my mind are reliability, speed and redundancy. Three reasons which were plenty enough to choose Rackspace as our back keeper, one of the biggest cloud hosting providers in the world with cutting edge technology and state of the art data centers across the globe. According to Wikipedia its clients include 40% of the members of the Fortune 100 Magazine and its infrastructure platform is 60% bigger than Google’s. But let’s see what actually we are into.

Reliability

The primary data center of Invoicebus is located in Chicago, Illinois, USA and it’s called “ORD1”. To familiarize better, you can visit the gallery and get a quick view of the facility environment. They claim that can provide 100% uptime, so one month before the official launch of Invoicebus, we decided to conduct a test and make sure if the statement is true. We set up the Rackspace server, transfer the domain from the old hosting, re-hosted our early marketing site, and started experimenting.

One of the tools we’ve been using is called Pingdom, an online service that provides analytics for the server up-time, response time and couple of other stats and tests. We set up to inspect the server repeatedly on one minute intervals by pinging it from 41 different locations around the world. We were checking the stats almost every day for 30 days, but the dashboard constantly was displaying the same boring message: “Last error seen: NEVER”.

The one minute pings are still running, so if something goes wrong, couple of alerts are triggered and sent instantly to our mobile phones via SMS and email. However, during the 94 days period of Invoicebus, we haven’t got any critical alert, so far so good. We decided to share these results with you:

The graphic shows 99.993% of uptime and 10 minutes of downtime due to scheduled regular maintenance of Invoicebus (applying upgrades and new features). Rackspace promise fulfilled.

Speed

To test the speed and response time we used couple of other services. The simplest was Speedtest.net which yielded

  • 350+ Mbit/s Download (Rackspace claims it’s unlimited, or as much as the test server supports)
  • 30Mbit/s Upload

constant rates initiated from the ORD1 datacenter, which means from the user’s perspective download and upload would be reversed. However, this was just out of curiosity, because it doesn’t mean anything especially when you deal with concurrent connections from different parts of the world. That’s why, we took in consideration a few other parameters, and most of them depend on the server hardware.

Currently, our server runs on:

  • Quad-core AMD Opteron 2375HE @ 2.33 GHz
  • 1GB of RAM Memory
  • Windows Server 2008 R2 64 Bit

To stress test the web server we’ve used a service called Blitz that initiates so called “rushes” – parallel connections generated from multiple points of presence around the world, so you can calculate how much load your web server can handle in a given period.

The Blitz analysis showed the following:

“This rush generated 3,981 successful hits in 1.0 min and we transferred 125.89MB of data in and out of your app. The average hit rate of 63/second translates to about 5,501,902 hits/day.”

This went awesome, but what about response times and error rates?

Response Times

The error rate was 0.
The response time peak was 1.6 sec at 240users/second, which is pretty high.
The average response time was 733ms which also is considerably higher than most other.

Our goal is to keep the response time below 250ms, which means our upper limit would be 120users per second or 7200 in a minute (if we assume uniform distribution on interval between 0 and 60 seconds). If the number of users / visitors increases more than 120/second, we should upgrade our server probably with additional RAM memory (1GB+), so we can maintain the response time within the desired range and keep our customers bright and happy.

Upgrading the Rackspace server is very straightforward and fast process, but for now, this hardware configuration is plenty enough.

What’s on tap?

Reduce the load
Currently our marketing site and web-app are on the same physical machine, however, as the number of visitors/customers increases, we plan to separate them on different machines and reduce the load.

Cloud files via CDN
Cloud files is a service of Rackspace that provides an online storage for files which can be delivered across the globe at blazing speeds over Akamai’s content delivery network (CDN). This CDN caches content at global edge locations saving users time as the requested content is received from within the region instead of coming from the origin server. Let me explain what it means.

The cloud files keep caches of the web-app files (Images, CSS, JavaScript etc.) at different locations around the world and are served depending on the user’s current location. For example, if the user/visitor is located in India, than the content will be requested from the nearest data server in Asia; or if the user is in Germany, the files will be requested from the data server in Europe, regardless if the origin server is located in Chicago, Illinois, US.

Redundancy

Invoicebus creates database backups on a daily basis and here’s how: The backup procedure is scheduled automatically at a specific time of the day when the traffic is least congested, and the server is minimally engaged. The whole database is archived, encrypted (additionally), and uploaded to cloud flies, thereafter replicated to 8 datacenters across the globe on 3 different continents:

Data backup is replicated in 8 different locations around the world


North America:

Grapevine, TX;
Richardson, TX;
Chicago, IL;
Herndon, VA;
Ashburn, VA;
Europe:

London, UK;
Slough, UK;
Asia:
Hong Kong

The data in each of these 8 nodes is mirrored to three storage disks instantly with dual power supplies and round the clock surveillance.

We’ve been keeping backups from the very first day, which means today we have exactly 94 copies of the database for all of our users, regardless if they run a premium or free plan. If the database drastically increases in future, we plan to implement additional logic for creating backups only from the new or modified data, and not the whole data set.



I believe I’ve covered the most interesting aspects and techniques we’ve been using for our hosting and I hope you’ll find some of them useful.

Now it’s your turn.
Have any suggestions or personal experiences with cloud serves?
Share with us your story; we’re eager to hear how you manage your hosting and backups.

Sleep tight, your data is secure, part 4 – Payment Processing Security

One of the most critical part of Invoicebus is the payment processing of your purchases, but don’t worry we have that covered for you.

Update: Since March 11th 2013, Invoicebus has switched to 2Checkout.com as an authorized payment processor. Read more here.

Invoicebus is built to make you feel comfortable while doing your business, as we shown you with our previous security posts. First and foremost we have to emphasize that for processing payments we’re using third party payment processor gateway Moneybookers (soon to be rebranded to Skrill), so that means your financial transactions are secure and Invoicebus don’t have a clue about your credit card information. Skrill is the most famous European payment processor with headquarters in London, UK; have over 24.5 million users at the time of writing this and is still growing with about 100 000 new users every weak.

Here is short description about Skrill from their site:

“Skrill (Moneybookers) is the secure way to pay globally without revealing your financial details. With just your email address, you can send and spend with over 100 payment options, including all major credit and debit cards, in 200 countries.”

Simplified flow of your payment process look like this:
Skrill payment process
If you’re wondering what is going on in the picture, here is the explanation:

  1. From Invoicebus you are redirected to secure Skrill web page. From there you can make your payment with various credit and debit cards;
  2. After you make your payment Skrill contacts your credit card issuing bank;
  3. Then funds (the amount depends on your selected plan) are transferred from your bank account to your Skrill e-wallet;
  4. At the end funds from your e-wallet are sent to Invoicebus Skrill account and you are redirected back to Invoicebus where you can continue making invoices.

TIP: When you are making online payments never forget to check the URL for secure data transfer with SSL. Checking this is very simple, just see if your browser address bar starts with https.

Feature Preview 3: The Invoice Editor

The Invoice Editor is the most powerful tool of Invoicebus, designed to provide users with highest degree of interactivity during the invoice creation process.

The invoice editor of Invoicebus is “What You See Is What You Get” tool for creating fast and easy invoices, and at the same time, centralized place for management of other data like:

  • Your company details
  • Your logo
  • Invoice options
    • Issue Date
    • Net Terms / Due Date
    • Currency
    • P.O. Number
    • Description
    • Color Theme
  • Clients (Create New, Search, Edit, Delete)
  • Invoice Title and Number
  • Items (Create New, Search, Edit, Assign Tax, Delete)
  • Taxes (Create New, Edit, Delete)
  • Default Terms & Notes (Set / Edit)

We spent a lot of time to raise this concept on a level that allows incredibly natural, fast and focused flow of the invoicing process as a whole. You can see it in action from this video:

The main concept here is to rid of all separate management pages, screens, pop-ups, back and forth navigation, page reloads; and instead, to integrate all assets on the same page, accessible exactly when and where you need. The result is uninterrupted workflow experience with significantly increased speed and focus.

Invoice Editor - New Invoice

Invoice editor for creating
and editing invoices

Invoice Editor - View Invoice

View of already created invoice
Invoice Editor - PDF Invoice

Invoice in PDF format
Download the example in PDF
Sample of Invoice sent by email

Invoice shown in the client’s inbox

Printed Invoice

Printed version of the invoice

Notification that the invoice has been viewed

Email notification that the invoice
has been viewed by the client

After creating your first invoice, Invoicebus learns all settings by himself and automatically applies them in future.

Feel free to try it by yourself and see how it works. Thereafter, leave a comment of how much time you needed to make your first invoice. We would be happy to hear from you.

Meet the Invoicebus Team

Introduction of the crew who builds and runs Invoicebus

One of the most interesting stories told about some company are those about their start and beginnings. This probably should have been the first blog post on Invoicebus Garage, because here we are going to introduce ourselves and tell the story of how it all began.

Short Bio

The Invoicebus Leadership Team is a duo of IT experts who pour their passion for inventing, creating, programming and designing into a product they’ve called Invoicebus.

Stefan Chachovski
Stefan Chachovski


Role: Creator of Invoicebus

Education: Bachelor’s degree in computer science and engineering.

He said: The virtue of simplicity is not only into the simple matter itself. It’s also into the capability of making the complex appear simple.

Trivia: Stefan wrote his first lines of code for calculating square root of a number at the age of 11 in the programming language GW-BASIC. Almost two years later, in the mid-1997, he created his first web site. Since then he’s been passionately peculiar enthusiast for things related to the cloud.

Credo: Less software, more focus on purpose.

Dimitar Stojanov
Dimitar Stojanov


Role: Creator of Invoicebus

Education: Master’s degree in electical engineering and information technologies.

He said: Over time our human nature lean us toward status quo. We have to fight the hypnotic comfort we feel otherwise there will be no progress.

Trivia: Dimitar entered in the world of computers through video games in his youth and in college he learned that software design and development is one wonderful art. He tends to bring his crafts and ideas in the wild.

Credo: If you can’t make things simple, make them simpler.

Stefan and Dimitar met in college during their studies of Informatics at the Faculty of Natural Sciences and Mathematics in Skopje, Macedonia, 2003. Soon thereafter, they realized that are pretty good team, so started working on numerous projects, ideas and concepts together.

The Invoicebus Project

Invoicebus project began from scratch in October 2010 as a challenge for creating an ultimate web-app that breaks traditional web paradigms and goes beyond today’s web rules. A kind of experiment with genes of a desktop app injected online; a hybrid that use the best of both worlds. Invoicebus is a single page web-app that we believe is evolution away from the classical page-redraw model for which browsers were originally designed for, thus making their reload and navigation buttons completely obsolete, while providing the users with immense wealth of user interactivity, possibly to a degree never achieved before in online invoicing.

We’ve had a notebook full of project ideas and concepts for online businesses; however, in that time we realized that we need online invoicing tool which will comply with our criteria for simplicity, thus we decided to tailor it by our taste, under our roof.

We’ve also considered to:

  • Share our way of thinking, our business philosophy and knowledge.
  • Encourage other people to start their own online business.
  • Show that a small enthusiastic team with just a couple of assets can produce well rounded product that could make even bigger companies jealous.
  • Connect with like-minded people from all over the world.
  • Learn more.

Our workplace

Photo was taken few weeks before the official launch of Invoicebus and shows Dimitar’s appearance while he was solving an optimization problem
Usually, we spend most of the working hours in our office in Skopje, a calm place where we brainstorm new ideas, discuss and write new code, draw mockups and design. However, we are very flexible and mobile, so many times could happen to work from different places, different cities, and sometimes even different countries.  That gives us plenty of time for thinking independently and making better decisions. We consider this as one of the greatest benefits in running an online business.

When the work starts to hurt, we hire people on demand / per job. Therefore, while we were designing our bus mascot, we requested help from this lady; when we need photos, either we ask help from a photographer like this one or we try to improvise by ourselves (like the photo from the left).

What does it take (us) to build an online product?

Here are some of the essentials we found useful:

Ideosphere

  • Mindset. Vision
  • Huge backpack of enthusiasm
  • Great discipline. Persistence
  • Nerves. Lots of them
  • Motivational fuel
  • A little bit of creativity and logic
  • Decisions. Every day. Every minute
  • Craziness about details. Pixel to pixel. Byte to byte.
  • A faith

More or less knowledge in:

  • Math
  • Programming Algorithms. Software Architecture
  • UX (User Experience) / Design (Photoshop, Illustrator and Paint :))
  • Web programming. Security. Optimization
  • System administration
  • Project Management
  • SEO (Search Engine Optimization)
  • Writing / Copywriting in English

Other assets:

  • Two laptops (the one occasionally baked), one white board and approximately 300 white paper sheets for mockups and notes.
  • Internet connection. Couple of online services. Google.
  • Money for food, transportation and bills.

We didn’t need:

  • Sky-high budget
  • Functional Specs
  • Cutting edge technology
  • Big team

And that was a brief introduction of the team who builds and runs Invoicebus. If you want to read more about our principles, consider reading our manifesto.