Garage

Creating the Bus Mascot

Short story about creation process of the bus mascot seen through designer’s eyes

This is a guest post by Izabela Stojchevska, the creator of the bus mascot. We kindly asked her to share some insights and experiences of the design process, including all exciting moments she spent to bring the mascot as alive as it’s now. She calls this a pleasant journey through the prism of design. You can read more about her at the bottom of this post.

Firstly, I’ve never imagined that I will write a blog post. Ever. Secondly, I’ve never thought that it will be about a process of me creating a mascot. And finally, I’ve never imagined that I will be the mascot creator who uses Adobe Illustrator. But, life can be surprising sometimes, and to be honest I love it!

In the upcoming post I’ll try to take you on a short journey through the creation process of the bus-mascot, how the idea was born, the obstacles I stumbled upon and all the things I learned along the way to get the remarkable look of our bus mascot.

Birth of the idea

More than a year ago, Stefan introduced me their concept about the coming soon page called ‘We Are all Waiting the Invoicebus’ – simple bus stop with group of people gathering and waiting the bus to come in a happy green environment. In fact, that was the moment when the idea about the mascot was born. The moving bus actually is a synonym of fast invoice, and at the same time transportation vehicle that brings up on board all the necessary options for creating and sending easy invoices all over the world.

Sketching

I used to draw years ago, but almost I had lost my sense of drawing. However, Stefan was big believer and encouraged me with motivation and inspiration. So, these are my first two sketches:

While watching these two buses, I realized that it would be awesome if the mascot could express some positive attitude, to be more friendly and a bit funny. Therefore, I quickly mocked up another one with more playful lines and edges, slight perspective and a bit skewed stance.

It looked just like a real cartoon character. I felt I’m on the right track, so I immediately jumped on the bigger task – Adobe Illustrator.

Read the rest »

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 a 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. Look for card payment providers that offer customizable solutions and compare them. 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.