Estimated Reading Time: 9 Minutes

When you start crafting wireframes of an app, you create branches of possibilities describing the system’s behavior as it responds to requests that originate from outside of that system, also known as “Use Cases”. Since the beginning of my career as an IT professional I’ve always been trained to look few steps ahead and predict almost impossible scenarios in order to make the software behave predictably under unpredictable conditions.

“When you’re trained as a scientist or an engineer, first thing you think of is – How can I prevent the disaster to happen” – Neil deGrasse Tyson, Astrophysicist

Even though it’s a reasonable way of thinking, many times it may lead to series of “What if” questions and promote worries that may never happen. Although, these kinds of assumptions are essential for building robust system architecture, yet their overuse might lead us to behave more skeptic than normal.

When we started developing Invoicebus’ architecture, we decided to try different and more optimistic concept; a concept that reframe our mindset to hope for the best, but prepare for the worst. It was sort of experimental way of thinking, radically opposite from those we’ve previously been used to.

“Do not anticipate trouble, or worry about what may never happen. Keep in the sunlight.” ― Benjamin Franklin

In real world, web-apps are used by regular users, under normal conditions and in most cases in the right way. Therefore, instead to review dozen of marginal outcomes for one use case, we decided to focus only on two: Positive (the flow that is most likely to happen, the Expected Case) and Negative (for all other cases, the Rollback/Backup Case), always prioritizing the first one. By exploring and implementing this concept, we drew few conclusions that might be useful in designing web based software.

Conclusion 1: Optimism leads to smoother UX

Few months ago, while discussing ideas with Dimitar, we started conversation about how Gmail app works so goddamn fast, but Yahoo Mail doesn’t (at least at that time). After a short research, Dimitar came up with great observation: “Well, Gmail behaves optimistically, that’s why. It assumes the app is used regularly by prioritizing normal flow of the events at first place”. And he was totally right. Google is using optimistic approach as an ultimate UX and optimization mechanism. By using full service conveyancing tool, law firms will be able to meet client expectations. From customer relationship management to the automation of repetitive tasks, law firm technology helps optimize how your law practice runs.

When you try to take an action or apply some change, both apps behave similar, but yet slightly different. I’m going to paraphrase each one’s behavior.

Gmail: “Hi, I’m sending your request to the boss (server), but I’m not going to bother you with that, so you can continue doing your job immediately”;

Yahoo Mail: “Hi, I’m sending your request to the boss (server), but before you can continue doing your job, you’ll have to wait until he checks everything and gives you appropriate response”.

Just a small rearrangement of events causes Gmail users feel tremendous speed-up without a single interruption. Technically the difference is tiny, but ideologically it’s completely different way of thinking. What an awesome concept by Google.

Conclusion 2: Optimism leads to fewer distractions

“Are you sure you want to delete this item?”, “Are you sure you want to close this tab?”, “Are you sure you want to save the changes?”, “Are you sure you want to do this/that?”. What a time wasting mechanism.

“Customers shouldn’t have to think about every nitty-gritty detail – don’t put that burden on them when it should be your responsibility.” – 37signals

Of course, some questions could be beneficial and crucial interface features, but each one of them bears its own cost because too many questions lead to distraction, not interaction. So, how do we know if the user should be asked or not? We don’t. We try to maintain the optimistic approach by making assumption on the most likely scenario and deciding on behalf of the customer. Yes, we get wrong sometimes though, but we can always improve and adjust accordingly.

Conclusion 3: Optimism leads to less validation

Few weeks before the Invoicebus launch, we’d sent test link to 4 different groups of early riders divided by their IT expertise (from highly skilled geeks to complete IT dummies) to test out the system and push back some feedback. Approximately 40% of the IT skilled people had questions why validation is so minimized or somewhere even completely omitted? The answer was – intentionally.

“But the user can enter text instead of a phone number” – So what? You don’t need to validate every possible field in order to create error-free app. Unless specific data format is absolutely essential for further usage (e.g., email address, web address etc.), more validation is a curse, not a blessing.

Conclusion 4: Optimism leads to simplification

“Please retype your password”, “Your password doesn’t match”, “Your password is too short”, “Your password should contain at least one special character”, “Your password this, your password that…”. We think that’s annoying.

“But, the user can make a typo while entering his password during sign-up.” – True. However, less than 10% of the users fall in this category, and the other 90% correctly enter their passwords even if there’s only one field. So why bother all users when only a limited few are butterfingered (even though I personally found myself among them).

Backup scenario: Password reset form with one field and one click.

Conclusion 5: Optimism leads to liberation

“Is the web server powerful enough?”, “Which database should be used?, Which one is faster; should we prefer NoSQL?”.
– It really doesn’t matter because as less we worry in present, as more creative we become in future.

“Worry is a misuse of the imagination.” ― Dan Zadra, Compendium, Inc

“But what if Forbes publishes an article about us and the server crashes from traffic?”. To be honest, unless you have built space shuttle, that’s not likely to happen for a while. So, don’t worry because it’s a problem when it’s a problem. If your server ever crashes or slows down due to traffic overload, believe me; you would rather jump around the room celebrating a victory than worrying about the outage. Besides, one or two day slowdown won’t cause apocalypse of the world.

“Don’t waste time on problems you don’t have yet” – 37signals

Your inspiration is perishable, your time is precious, so don’t let worries build fence between them. Keep it up. Be optimistic. Create. And keep working on that Forbes coverage though

Now it’s your turn. Do you agree with our conclusions? What would you change to them? Please leave your comment below; I would like to hear from you.

Photocredit: Candie_N

Author information

Stefan Chachovski

Co-founder of Invoicebus. Huge lover of nature, science, and chocolate cherry cordials. He occasionally writes on this blog about Invoicebus' stuff. Hello him on Twitter or subscribe to his updates on Facebook.

| Twitter | Facebook |

The post 5 Ways to Engage Optimism in Software Design appeared first on Garage.

Headers are the first thing your web site visitors will see, so you must be sure they look perfect. But not always the browser display big sized letters in good quality. If you’re looking to optimize engagement and boost your online presence, it’s also important to find sites to buy youtube comment likes. To see what I’m talking about I’ll show you an example of the biggest text on the front page, and actually the biggest text of the whole site invoicebus.com. The text Fast & Easy Invoices as displayed in Mozilla Firefox browser looks like this:

You can notice all letters that are curved look pretty pixelated, so they are not so appealing to look at, and we need to find a way to display them smoother. The first think we got in mind was to drop a shadow for the text so the letter borders will become smoother, with the CSS3 property text-shadow. Although this property is not supported in all browsers that Invoicebus officially supports, we gave it a shot. After applying a text shadow with radius of 2 pixels we got the following:

The text got smoother but it also became to blurry, difficult to read, and painful for the eyes. On top of that the pixelated curves still were noticeable, so we had to do something different to fix this issue. The thing we got in mind was to replace all big sized text and headers with images, and after a couple of hours in photo editing software (Photoshop) with support of text antialiasing, we replaced our headers with images. The final result we got for the Fast & Easy Invoices was:

Looks better, isn’t it? This “fix” actually is nothing new in the web design sphere, but it is worth design trick. With this you’ll also have cross browser look of the text because you don’t have to worry about the browsers text rendering techniques. Additionally, incorporating Search Engine Optimization (SEO) plays a vital role in boosting organic traffic and enhancing your website’s visibility on platforms like Google and Bing, further improving the user experience across different browsers.

But for every step forward there is a step backward so with this good looking text we lose one of the most important things in the internet world. That is the text scanning of the search engine bots. They simply can’t scan images and the text they contain, so the headers with images can’t be used for increasing of the organic search ranking.

That’s why we have another trick in our sleeves for you. The trick is to leave the text in the

<h1></h1>

tags and apply specific styles. The example is given below:

The header:

<h1 class="header"><a>Fast & Easy Invoices</a></h1>

The header class:

.header {
    background: url("fast_easy_invoices.png");
    text-indent: -99999px;
    ...
}

As you can see we put the background image to be our header, and we give large negative indent for the text of -99999 pixels, so the text won’t be displayed in the browser but the search engines bots can still scan the

<h1></h1>

tag and find the right text. This way you’ll ensure excellent SEO for you site and for even more SEO friendliness we wrap the text in

<a></a>

tag. Plus, with a Trusted conversion optimization team, you can maximize engagement and drive better results.

If you have some SEO and design tricks, use the comments section below to tell us, and if we find them interesting we’ll cover them in the next blog post.

Top photo credit: Anon DePlume

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Make Smooth Looking and SEO Friendly Headers appeared first on Garage.

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.

In the Chrome address bar, also known as "omnibox" we enter invoicebus.com/login.

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 in the upper right corner.
3. Now go to Tools, and select the first option from the menu – Create application shortcuts.
   
4. You will see the screen (on Windows 7):
   
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.

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Start Invoicebus from your Desktop appeared first on Garage.

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.

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>

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.

If we divide the email address on 3 parts,

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.

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.

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

<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

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

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?

Author information

Stefan Chachovski

Co-founder of Invoicebus. Huge lover of nature, science, and chocolate cherry cordials. He occasionally writes on this blog about Invoicebus' stuff. Hello him on Twitter or subscribe to his updates on Facebook.

| Twitter | Facebook |

The post How to Protect Your Email Address From Spam Crawlers appeared first on Garage.

The extensive everyday usage of laptops tempts us to play with unconventional maintenance methods sometimes. From sloppy water pouring to hairdryer drying, from overheating to deep freezer cooling, from sticky keyboard spilled with Coca-Cola to complete bathtub washing. In fact, every described incident has happened to one single laptop – the protagonist. However, the most recent one occurred last week when we baked its motherboard in the oven at 200°C. And yes, the oven is those same one where we make pizza.

Pain in the Neck

After 4 years of usage, our protagonist stopped working as a result of the graphical chip failure. The symptoms manifested some strange vertical red lines across the screen with distorted graphics during boot-time, preventing the OS to start. After we had contacted manufacturer support, we were advised to return the laptop back to factory because of a well-known problem. However, we didn’t have much time to send it back due to complicated shipping procedures, so we put another two options on plate:

• to buy a new laptop,
• to try fix the old one by our own

We gave priority to the second option because DIY excitement was much bigger than the risk. The laptop was almost dead, so we didn’t mind experimenting a bit.

Actual Problem

The graphical chip have dozens of solder connection points to the motherboard, all it takes is one hairline crack to cause malfunction of the chip. Many times in newer laptops, the heat generated causes the solder to get close to its melting point causing these hairline cracks, also known as micro fractures in the solder joints. With a little knowledge in physics and a short research, we found very interesting method to fix these sensitive micro fragments. The method is called "reflow" where the chip on the motherboard is heated under Highly Regulated circumstances for a pre-determined amount of time at a critical temperature. The objective is to "reflow" the solder from the chip to the board via BGA (Ball Grid Array) points on the chip. The question is how to heat the joints to that temperature?
Actually, there are few methods, some of them are sophisticated, some of them are plain, however the simplest and most fun is the "motherboard for lunch" method (as we call it), that requires literally baking the motherboard in the oven. Are we kidding? – NO!

The Recipe

Below are given the exact steps of how we cooked the motherboard. We took a few shots as a memo though.

• Carefully disassembled all laptop components, connectors, cables
• Removed the motherboard

• Removed all parts from it: CPU, Bluetooth modules, CMOS battery, plastic parts and caps
• Cleaned up the CPU and GPU from the thermal paste residues

• Turned on the oven to pre-heat at 200°C (392°F)
• Made 4 improvised aluminum ball legs to hold the motherboard lifted

• Foiled up the baking tray, with aluminium cooking foil
• Put the motherboard in the tray

It’s cooking time!

• The baking took exactly 7 minutes and 45 seconds. After the 6th minute, we felt heavy smell of solder. It was a good sign, something was melting
• Left the motherboard to cool down slowly for approximate 30min
• Reapplied new thermal paste
• Reassembled all other components
• Pushed the power button

The Taste

It smelled like Sheldon’s Bazinga, but actually was Eureka!
The laptop was fully functional with no sign of the issue at all. We are smiling while writing this blog post on that same machine and probably going to smile again and again every time we retell this story. Almost forgot – this was the second successful baking, after one which happened 12 months ago! How long it will last I don’t know, but it seems this laptop wants to be cooked. After all it doesn’t cost a thing, only 8 minutes in the oven, right?

Author information

Invoicebus Team

We're a team comprised of a few die-hard code freaks, lovers of beautiful design, stewards of simplicity, and passionately dedicated to the user experience. Invoicebus is a great vehicle to express what we do best. Click here to learn more on our business philosophy and how we actually do it.

| Twitter | Facebook |

The post Motherboard for Lunch appeared first on Garage.