wkhtmltopdf with laravel homestead using xvfb-run

Lately i’ve been experimenting with generating a pdf from a html/css page and stumbled upon wkhtmltopdf. It’s a nice library full of options and I was impressed with the results.

I wanted to use the library in my laravel homestead environment and was running into some problems. Specifically:

QXcbConnection: Could not connect to display

After some digging I found: xvfb-run

xvfb-run is a simplified wrapper for xvfb which is a virtual framebuffer that can run right on your server. Since you don’t have a display or might not even have a video card running on your server, you’ll be able to “emulate” your screen viewing the page wkhtmltopdf is trying to generate a pdf from.

I was able to install both these libraries super easy:
sudo apt-get xvfb-run
and
sudo apt-get wkhtmltopdf

Then I was able to successfully get wkhtmltopdf running on my laravel homestead server running a command like this:

xvfb-run --auto-servernum --server-num=0 wkhtmltopdf --print-media-type --page-size letter http://yourwebsitehere.com yourdocument.pdf

Hope this helped save someone some time !

4 Ways to detect Phonegap in a browser or App

I’ve been working with phonegap for years now and one of the great features is being able to develop and test in a browser before pushing the code over to an app. For us web developers, it doesn’t disrupt our normal workflow very much and makes coding apps incredibly easy !

For some reason though, it was very difficult to figure out how to detect if phonegap was running in a browser or on a device. I answered this question on stackoverflow at one point and figured I’d discuss a few alternatives in this post.

Solution #1

My original solution was to use the following:

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
  document.addEventListener("deviceready", onDeviceReady, false);
} else {
  onDeviceReady(); //this is the browser
}

Solution #2

var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
    // PhoneGap application
} else {
    // Web page
}  

Solution #3

If you’re running a newer version say 1.7 you could try this chunk of code to detect if phonegap is running:

if (window.cordova) {
  //do stuff
}

Solution #4

I’ve never had much luck with this one, but since it’s straight out of the documentation why not give it a go if the above solutions are not enough 🙂

if (PhoneGap.available){ //do things }

There you have it folks! Hopefully this saves you hours of trying to figure it out on your own.

Responsive & Flat Design Concepts

We all know Web and UI design changes frequently, remember when “frames” were cool ? What about huge gradient “stickers” to highlight a sale ?

The web is shifting to a more clean, mobile frontier and I wanted to spend a few minuets going over what to expect and how designing a website that is both “flat” and “responsive” can improve user-engagement, sales and a brand.

Continue reading » Responsive & Flat Design Concepts

Importance of Mobile Optimization [Free Infographic]

With over 80% of Americans using mobile broadband and mobile websites increasing user engagement by 85%, now more than ever you need a mobile website! Check out this free infographic with the details!

Continue reading » Importance of Mobile Optimization [Free Infographic]