Monday, February 03, 2014

Increasing Website Page Speed from 50 to 94 Using Twitter Bootstrap and Grunt

My name is Flavien, and I am a software development intern here at Metadot. I’m about halfway through my internship and wanted to share my experience developing the new Das Keyboard website.

The initial problem was that the Das Keyboard site was originally on WordPress which required frequent, cumbersome updates. The site was also slow to load.

Our challenge was to create a beautiful website, while keeping in the mind the loading page speed as well as the user experience.

For the design of the website, I started with the Pixma Twitter Bootstrap template and filled each page with legacy content. I coordinated with the management and marketing teams here at Metadot to refine the text and better position our mechanical keyboards and RFID blocking products.

I used Google’s PageSpeed Tools to analyze the current site loading time. The website started with a score of 50 and is currently at a score of 94. As a developer, this increase makes me pretty happy. :)

Then, my goal was to further improve the functionality of the website. I used Grunt which is a JavaScript taskrunner that permits automation.

Automation is important because the less work you have to do when performing repetitive tasks like compilation, the easier your job becomes.

For example, before we made the web site live on our development site, I used a prompt command to launch a Grunt plugin, which executed the tests and optimize the project to be efficient by executing minification, compilation, unit testing and more.

A look at the Grunt plugin. 

Finally, I created a system for language translation on the new web site. Das Keyboard has an office in Germany, so it’s important that our website also be available in the German language. Stay tuned for an additional blog post about this side of the project.

Here is a look at the Pixma Template implemented on the Das Keyboard website:



Pixma + Das Keyboard. 


To close, here is a look at the “before and after” Google Page Speed results using Twitter Bootstrap:




Google Page Speed
Before the Project Started: Das Keyboard on WordPress
50
During the Project: Das Keyboard on Twitter Bootstrap
80
After the Project Completed: Das Keyboard on Twitter Bootstrap with Grunt
94

Are you ready to see the final product? Go ahead and visit our website for a super fast user experience.

Monday, December 30, 2013

How to Mock "Live" the Backend of !BAM with AngularJS

My name is Jean-Baptiste, and I am a development intern at Metadot. 

Today I would like to tell you how I found a way to mock "live" the backend of the Metadot application called !Bam. 

!Bam is a task management and workflow application that Metadot has been developing over the past few months. Users will be able to create task-oriented boards and shift "to do" items to track progress. 

The goal was to have a button that says "Turn backend off" on the navigation bar in development mode that switches the client to use the backend but instead use a Mock backend.

I inspired myself (a lot) from a great post about the same subject from Michal Ostruszka

Here's how I did it : 

First, create an object called MOCK, where we put the responses to the backend requests:

var MOCK = {}; 
 MOCK.getLoggedInUser = { SOME STUFF }; 
 MOCK.getBoardsImAMemberOf = { SOME OTHER STUFF }
// and so on 

I created a global variable, but to improve that I could have created a dedicated angular service.

Now we have our nice little object MOCK, let's use it to stub the http requests. I put these lines in a separate file so that we can discard it in production mode with grunt.


(function(ng) {

    if(!document.URL.match(/\?nobackend/)) {
        // do nothing special - this app is not gonna use stubbed backend
        return; 
    }

    console.log('======== ACHTUNG!!! USING STUBBED BACKEND ========');
    initializeStubbedBackend();

    function initializeStubbedBackend() {
        
        ng.module('bamtheapp')
        .config(['$provide',function($provide){
           $provide.decorator('$httpBackend',angular.mock.e2e.$httpBackendDecorator); 
        }])
        .run(['$httpBackend',function($httpBackend){
            //check app/assets/dev-data/mock_objects.js to see what's in the 
variable MOCK
            $httpBackend.whenGET(/assets* ?/).passThrough();
            
            
            $httpBackend.whenGET("/1/getLoggedInUser?").respond(MOCK.getLoggedInUser);
            $httpBackend.whenGET("/1/getBoardsImAMemberOf?").respond(MOCK.getBoardsImAMemberOf);
        }]);
    }
})(angular);

So we create an anonymous function that will first check in the path arguments if there is the keyword "nobackend". If the answer is no, then it will return directly and not harm our poor module "bamtheapp."

If on the other hand the answer is yesinitializeStubbedBackend is used. 

In the configuration part of the module "bamtheapp" (the main module of the app), $httpBackend is decorated with angular.mock.e2e.$httpBackendDecorator, which allows us to easily intercept the calls to the backend.

Only providers and constants can be injected into configuration blocks, which means we have to do the rest of the task in the run block. Here, we can define the behavior of $httpBackend depending on the request (you can use regexes to match requests with parameters).

Keep in mind that includes in the index.html will have to be "passed through". We don't want to mock these ones, instead we want to pass these requests to the server, hence the method "passThrough". For the rest of the methods we respond with our MOCK object.

Now we just have to create the button "turn backend off" that will reload the current page adding "nobackend" to the url. The page has to be completely reloaded to reconfigure the module. You can use $window.location.href for this purpose.

I hope you enjoyed this post :)

Jean-Baptiste, intern at Metadot.

Wednesday, December 18, 2013

Integrating Stripe in Montastic Website Monitoring Service

My name is Ivaylo, and I am a developer at Metadot. In this entry, I'll discuss how we are integrating Stripe in one of our software products. 

Montastic, Metadot's super simple website monitoring service, has been using Google Checkout for its billing needs. More precisely we've used the recurring billing feature. 

It always has been having different issues, but we never switched to another solution, thinking - “Hey, its Google! They know what they are doing - they will fix it.” Well, unfortunately, they never did.

Then Google announced that they will be dropping Google Checkout, and advised the merchants to move to another billing solution, giving a 6 months period to do it. So, we started looking for solutions on the market. Our main criteria were as follows:
  1. Support of recurring billing.
  2. Seamless UI integration.
  3. Developer-friendly.
  4. Possibility to export/migrate the billing information to another payment solution, if we want to move out.
  5. Reasonable pricing.
After looking at different solutions, we decided to go with Stripe. Here is why:

Support of recurring billing

Stripe makes recurring and subscription-based billing easy. First thing to do is to create subscription plans by specifying plan’s price and billing frequency. Then all you need to do is to subscribe your customers to one of the plans, and Stripe takes care of the rest. The subscriptions might have trial periods, and coupons might be applied to them (each coupon has discount percentage, duration, as well as expiration date, after which it is not valid anymore). The upgrade/downgrade of the plans is also handled with ease.  Stripe provides automatic calculation of the details like pro-rating, so all you need to do is just subscribe your customer for another plan.

Seamless UI integration

The easiest way to integrate is to use a Stripe Checkout embedded form, which will put a button on your page.  After clicking on it, a popup form will appear with the billing details to be entered in it.

The html code is something like this:

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
    data-key="your public test or live key here"
    data-name="Enterprise Plus"
    data-description="$29.00"
    data-label="Subscribe">
  </script>
</form>    

And you got a blue button, by clicking on which the user will see a form like this:



Pretty neat and exactly what we needed.

Developer-friendly

What caught initially my eye (as a developer) is one of the intro screens on the Stripe site which claimed that it is “...built for developers.”. Then I saw the on-line documentation, and discovered (with delight) that statement to be very true. The documentation is very well structured and presented, with code examples in several languages and frameworks, including Ruby/Rails (what we are using for Montastic). The API reference is exhaustive and precisely what a developer would need as a know-how.

Export/migrate the billing information

Although there is no API way to extract the billing data from Stripe servers (which is a good thing security-wise), Stripe would provide that data per our request for no additional fee (What if I decide to leave Stripe? Can I export card data?). That works for us.

Reasonable pricing

There are no monthly fees, no refund costs, and no hidden fees. Stripe charges 2.9% + 30¢ per successful charge. And if you are processing more than $1 million per year, call them for even better prices.

Want to learn more about Montastic, Metadot's website monitoring service? Visit our website or follow us on Twitter. Stay tuned for more from the developers at Metadot. 

Thursday, February 28, 2013

Be First to Know When Your Twitter Account Gets Hacked



When we heard about recent high profile hacks of the Burger King and Jeep twitter accounts, our heads filled with terrifying what if's:

"What if a jilted ex-lover took over our account (because they know we use THE. SAME. PASSWORD. FOR EVERYTHING) and posted pictures of us in a retainer and whitey tighties?"

"What if hackers replaced our beautiful default background and witty profile description with a rainbow background and Justin Beiber shout out?"

"What if we weren't tweeting regularly when this happened? How would we ever find out?"

That's when a hypothesis hit: our Montastic free website monitoring service could help. It might not prevent the hack, but it might be able to send us an alert email shortly after the hacker strikes. To confirm our hypothesis, we started an experiment with the Twitter account of an employee. That employee was me.

I was elected to figure out how to use Montastic as a sort of booby trap for my Twitter account (Spoiler: it worked). Read below to see how I did it.

3 Steps to Get Alerted When Your Twitter Account Gets Hacked



Step 1: Set up a Montastic checkpoint for my Twitter home page URL: https://twitter.com/ryanluedecke

Step 2: Pasted in exact text from my profile description, telling Montastic to alert me if this text is not present: "2013 Goals: Dunk a basketball, learn guitar, code a website."

Step 3: Hacked my own Twitter profile, changing the background and profile description (see photo above).

















Alert Email Example


Success. Seconds after I hacked my own profile, I received this Gmail alert.

















The 'Status code: 150 - text verification failure' indicates a change to my profile description. From there I could report the hack to Twitter and regain control of my compromised account.

Damage controlled. Crisis averted.

Want try the experiment for yourself? Sign up at http://www.montastic.com. You can monitor your Twitter account and 2 other checkpoints totally free.

###

{Note from the author: As of writing this, I still haven't changed my Twitter profile as I kind of like the new look and I heard Burger King got 30,000 new followers post-hack so maybe I'll get a few thousand new followers after hacking my own account. ;)}

Monday, December 10, 2012

Google Apps Developers: How to Get More Traffic for Your Google Apps Marketplace Listings

Get more traffic for your Google Apps Marketplace listing
Traffic (Are you ready?)                        Photo Credit : Smoking Permitted
Author's Note: Ryan Luedecke here. This blog post shares a case study that's relevant to app developers looking to increase traffic for their listing in the Google Apps Marketplace. If you're in a rush, skim the bold font for the key takeaways and then come back later to read through the details. Let's get started...

I was intrigued to learn that the Google Apps Marketplace has more than 25 million active users and 2 million business accounts. I was thrilled when I realized they weren't just window shoppers. Leading business apps were being installed by the thousands and receiving hundreds of positive reviews from satisfied customers. Talk about scale.

When we first released our Mojo Helpdesk app in the Google Apps Marketplace two years ago we immediately saw results. Our app trials rose 100 percent over the next year, however with increased competition, the traffic we generated slowly started to trickle off. After two years in the Marketplace, we only had ten user reviews and ranked low in search, often several pages back for keywords relevant to our app. We had to adapt quickly or risk being forgotten.

There weren't many resources available on how to grow traffic for established apps so I did an exhaustive review of the Marketplace to see which apps rose to the top when I shopped in predefined categories or conducted a relevant keyword search. I reviewed the listings of the top rated apps in several categories, looking for patterns and commonalities in how they marketed their apps.

Interestingly, most of the top rated apps were doing the same things. Some of the techniques were more subtle than others, but one thing was clear - there was a recipe for success.

Fast forward to today and now we're #1 in search for ticket tracking, #3 for issue tracking, and #6 for helpdesk - all keywords that our target customer might use to find our app in the Marketplace. We've tripled our number of user reviews and new installs are coming through at a faster pace. And we did this all without spending any money.

So how did we do it? And more importantly, what steps can you take to increase traffic and installs in the Google Apps Marketplace? Find out the exact steps after the jump.

Thursday, April 26, 2012

Track Your Site and Server Status with the Montastic App


You can now monitor your websites and servers from your iPhone with the brand new Montastic App. Thanks to Cybertron Technologies, the developer of the app, you can easily see the status of your site with colored arrow icons. The app allows you to add, edit, and delete websites and servers. You can also turn monitoring on or off for each site directly from the app.

This gives you even more ways to keep track of your site's status no matter where you are. You will need a Montastic account first. If you don't have one, sign-up for a free account here. Then, download the new app and keep track of your site's uptime from your iPhone.

Thursday, April 05, 2012

Monitor Your Website with Montastic Widgets

Montastic has several widgets and apps that make it easier to keep an eye on your servers. Normally, Montastic sends you an email when your site goes down, but with a widget or app you can monitor your websites from your computer or phone. Whether you are on a Mac or a Windows machine, there is an app for you.

You will need a Montastic account first. If you don't have one, sign-up for a free account here. Then, visit our widget and apps page to download a Montastic app and easily stay informed of your site's availability.

Friday, January 27, 2012

Win a $50 Amazon Gift Card from Montastic



Montastic is holding a Twitter contest the week of January 30th.  Each day, we will give away a $50 Amazon gift card to a lucky Twitter follower.



To Enter:
  1. Follow @montastic on Twitter.
  2. Retweet the following message each day to be entered for that day's drawing:
    Follow @montastic, the free website monitoring service, and RT this for a chance to win a $50 Amazon card. http://bit.ly/zpwy0H

We'll announce each winner on Twitter the following day and contact them by direct direct message.
The last day to enter is February 3, 2012.
Contest is limited to the US only.

Thursday, December 22, 2011

Happy Holidays to Our Customers from Metadot

We've almost reached the end of 2011 and while it feels like the year flew by way too fast, we're excited to ring in 2012. The Metadot team, the people behind Mojo Helpdesk, Das Keyboard, Montastic, and typrX, thanks you for your continuous support. We wish y'all a Merry Christmas and a Happy New Year.

Enjoy this video of an Angry Birds Christmas Light setup:

Monday, September 26, 2011

Announcing the Winner of Montastic's Google Chromebook Contest


We want to thank everyone who participated in our Twitter contest to win a Google Chromebook. We enjoyed seeing such a large response from our online community.

In the end, we took all of the entries and picked a winner at random. The winner of the Samsung Series 5 3G Chromebook is @DinaJ.

Congratulations Dina and thank you all for participating in our first Twitter contest. And don't forget to check out Montastic for website monitoring that doesn't suck.

If you haven't already, follow us on Twitter.

Thursday, September 15, 2011

Win a Google Chromebook with Montastic's Twitter Contest

We’re running our first Twitter contest from September 19th-23rd and offering up a Samsung Series 5 3G Google Chromebook as the prize.

Many of you know that Montastic provides free website monitoring that doesn’t suck. For those that don’t, we suggest signing up for a free account so you won’t be surprised the next time your site goes down.

Help us spread the word about Montastic and you could win!

To enter:
1. Follow us on Twitter
2. Tweet the following: I want to win a Chromebook! You can enter to win by following @montastic and retweeting this message. http://bit.ly/ohswOo

We’ll post the winner September 26th on Twitter.
All tweets must be made before September 23rd at midnight to be eligible.
Contest limited to the US.

Follow us on Twitter and enter to win.

Thursday, August 18, 2011

Panel on How Government Fakes Transparency Panel Proposed for SXSW

Each year, SXSW asks people to propose ideas for panels for the SXSW Interactive Festival. One of Metadot's programmers, Jeremiah Akin, created a proposal for a SXSW Interactive panel for 2012: Open Data FAIL: How Government Fakes Transparency.

Jeremiah and speaker Jim March, of BlackBoxVoting.com, will focus on exposing sleight of hand tricks used by government agencies to make them appear more transparent than they really are. They will explain why Open Data Centers supposed to increase transparency don't actually give you the tools you need to spot waste or corruption in the government. They'll also discuss how processes that used to be transparent are now closed and the ways government dresses them up to make them seem like they are still transparent. Jeremiah has extensive knowledge in this area and wrote a chapter in HACKED! High Tech Election Theft in America.

Not all proposals will be accepted and SXSW uses public votes and comments as part of their decision-making process. If you are interested in transparency theater, help Jeremiah's panel make the cut for SXSW Interactive 2012 by voting here: http://goo.gl/qmuzM

Friday, May 20, 2011

Metadot's Recap of Google I/O 2011: A Geek Paradise

Metadot's experience at Google I/O 2011 went beyond expectations. Showcasing Mojo Helpdesk (pictured below) amidst 5,500 brilliant developers, attending quality presentations on everything from Android @ Home (computer controlled lighting, appliances, you name it), Chrome OS, ChromeBook, and viewing various other breakout sessions was nothing short of spectacular.

Highlights from the two days packed full of geeky goodness, include the Google Chrome Keynote (which can be viewed online), the Android: Momentum Keynote (also available to view online), and the fact that Mojo Helpdesk took the gold and came in first place for the Google I/O Video Sandbox Contest hosted by ShortForm was pretty sweet too (click this link to view the winning video).

In short? The whole experience was awesome. Google I/O was an amazing opportunity to be a part of. Here are the Google I/O highlights, all of which are totally worth checking out.

Visit Google I/O for a total recap, to watch videos, and get full coverage of this year's event.

Friday, May 06, 2011

Google I/O Guest Blogger: Amy Unruh, "Designing large applications for Google App Engine"

Amy Unruh, co-author (with Daniel Guermeur) of Google App Engine Java and GWT Application Development recently published a guest post on The official Google Code blog, as a part of the Who's at Google I/O guest blog series.

Her post details the uses of Google App Engine (GAE) and Google Web Toolkit (GWT) in regards to Metadot's migration of Mojo Helpdesk (an RDBMS-based Rails application) over to GAE, Java, and GWT along with helpful techniques used for the migration process.


Amy and Daniel will both be attending Google I/O to present Mojo Helpdesk on May 10th-11th in the Developer Sandbox.

Thursday, May 05, 2011

Receive 25% off Google App Engine Java and GWT Application Development Book

For a limited time, Metadot founder, Daniel Guermeur's book, Google App Engine Java and GWT Application Development is being offered at a discounted price with use of Promo Code: gio25.

To receive the discount, add the eBook or print copy of the book to the cart from this page: Google App Engine Java and GWT Application Development, then enter the promo code gio25 before checkout. This discount will be active until June 10th 2011.

With this code, any customer can obtain a 25% discount on either the eBook or Print version. Additionally, if the customer decides to buy both the print and the eBook versions of the book- when the promo code is applied, he/she will receive a 25% discount on the print book, and a 85% discount on the eBook.

Tuesday, March 29, 2011

Metadot's Mojo Helpdesk, Showcased at Google I/O 2011

Metadot is proud to announce that this year Mojo Helpdesk will be showcased at Google I/O 2011. Our inclusion was due in part to the November 2010 publication of Google App Engine Java and GWT Application Development, authored by Metadot CEO, Daniel Guermeur. (Cover art pictured below, click HERE to order through Amazon.com).


For those of you unfamiliar with Google I/O, it's pretty exciting for us geeks. Google I/O, "brings together thousands of developers for two days of deep technical content, focused on building the next generation of web, mobile, and enterprise applications with Google and open web technologies such as Android, Google Chrome, Google APIs, Google Web Toolkit, App Engine and more." (taken from the Google I/O webpage).

At Metadot, our goal is to go beyond cutting edge and be the leaders in our technologies bringing the most up to date products, with the highest-quality, and most efficient services possible. Mojo Helpdesk allows businesses to provide the most efficient customer support and service possible, and we're really looking forward to showcasing its features and the technology behind it. More news to come. (cross-posted on the mojohelpdesk blog HERE).

Wednesday, January 12, 2011

Google App Engine Java and GWT Application Development - Now at Amazon

We are glad to announce that our previously released programming book is now available at Amazon. If you are looking to develop a scalable web application with Google Web Toolkit (GWT) and App Engine (GAE), stop reading and get this book now:
 or
Remember that the book comes with the complete source code of the demo application Connectr.

Monday, January 03, 2011

Montastic Monitoring Front Page Upgrade

We are glad to announce that we added a demo video on www.montastic.com homepage. This allows users to get a 1 minute product tour without having to signup. We also tweaked the language to explain what Montastic does in fewer words : 'Get an email when your website goes down' - Check it out.

Friday, December 10, 2010

Montastic New Feature: Web Page Keywords Verification

We are glad to announce that Montastic now includes the ability to check for the presence or absence of a keyword on a web page. This is useful in a number of cases. For example a web master can catch web application error (e.g. MySQL error) or if your company manages an inventory, you can catch the 'out-of-stock' keyword and send an alert to your store manager when it occurs. For example in our image, the server in red is in error because mysql_connect() text has been found on the page. On the other hand, the green site  - daskeyboard.com - is alright.

We also tweaked the user interface to make the uptime information visible all the time.

Thank you to our users for their continuous input.

Friday, December 03, 2010

New Book: Google App Engine Java and GWT Application Development

The authors, Amy Unruh and Daniel Guermeur are proud to announce the availability of their new book. This book is designed to give developers all the information they need to develop their own GAE+GWT applications, with a particular focus on some of the technologies useful for building scalable social-media-oriented applications including MVP, push with Channel API, Facebook, Twitter and Google Accounts integration, JDO, transactions, Memcache, XMPP and much more. It is an easy-to-follow guide that shows you how to get the most out of combining the powerful features of GAE and GWT. It provides developers with solutions to many of the problems that arise in developing, maintaining, and scaling web applications.
 Learn more

Monday, October 25, 2010

Microsoft Upbeat

Despite a noticeable slide in hipness, Microsoft management still upbeat. Check it out.

Monday, September 27, 2010

HTML 5 Rocks

HTML5 brings user experience to the next level. To what level? The next one... which means in this case, to kind of experience you can get with desktop applications. Nothing less. Users are going to love your HTML5 apps.
HTML5 is also fantastic steps forward for all application developers because it simplifies considerably what was hard or simply impossible to do before. To name a few features HTML5 provides: Canvas, semantic tag, video + audio, new form fields, vector graphics, drag and drop, fancy font support, opacity, shadows, rounded corners, local database storage. You name it, it has it. Check out the HTML5Rocks web site.


www.HTML5Rocks.com



HTML5 is still not finalised completely. However, some browsers already implemented what is considered to be stable specifications as you can see on the HTML5Rocks website.