Home » Archive by category "Web Development" (Page 3)

Google Tag Manager

Today I learned of the existence Google Tag Manager. With Google Tag Manager it becomes easier to place tags of any kind such as Google Analytics or any other tracking tag on your website and even on specific pages. All you’ve got to do is include the Google Tag Manager Javascript, setup your tags and you’re good to go.

I’ve added it to this website as well and it’s now managing the placement of Google Analytics for me.

It can of course be used for more than only Google Analytics. You could place tags to measure how many people have reached your sales page and have actually made a purchase.

You can always add these codes yourself but the added benefit from using Google Tag Manager is that it’s dynamic. No need to edit your website’s templates. Just set up a tag, define on which page(s) it must be shown and you’re good to go. It’s a nice and simple concept. Free as well.

I’m now a freelance developer

To my surprise I hadn’t even announced here that I have recently started freelancing! As of August the 1st I now operate under the name Kras IT and am available as a freelance developer. Since it’s now the 1st of September this means I’m already in business for a month now which has been exciting. I’ve been with my previous employer for almost 7 years and after a lot of thinking and planning I decided to take the leap!

As a freelance developer you can hire me for all your PHP and Perl work. I mainly do webdevelopment but I do a lot of backend as well. Aside from that I also enjoy configuring Linux servers. I personally think being able to configure and optimize both your app and the server(s) the app is running on can be a great asset, as it gives a lot more insight in the overall workings of your software.

Aside from doing freelance work I also plan on doing product development. I’ve got a few ideas in the pipeline of which one I expect to launch within 5 months. I’m likely to blog about this in the near future as well as about freelancing and running your own business.

For a full list of skills you can take a look at my website at Kras IT. Currently the website is still Dutch only but my LinkedIn and résumé are in English. Do you’ve got any questions or are in need of a freelance developer? Feel free to contact me!

How to catch and test sent e-mails in your app

A nice gem (literally, it’s a Ruby program) I stumbled upon yesterday is called MailCatcher. Using MailCatcher you can catch all the mail that’s being sent by the app you’re developing and (re)view their contents.

MailCatcher makes this possible by running (or rather being) a simple SMTP server. All you’ve got to do is direct your app to use the SMTP server provided by MailCatcher. Mail sent with this SMTP server stays inbound so you don’t have to worry a test mail is receiving by a customer.

It also provides a neat web interface in which you can review the mails that have been sent. Aside from viewing the contents of the mail you can also do further inspection on it by taking a deeper look into the source of the mail to view headers and such.

Screen shot 2011-06-23 at 11.39.03 PM(source: mailcatcher.me)

By using WebSockets the webinterface immediately updates when a mail has been sent. You can also download the e-mail to load it up in your e-mail client. This can be useful to review HTML based e-mails to see how they render.

If you’re using Vagrant I suggest you add the port the webinterface runs on to the forwarded ports list. Also run mailcatcher with --http-ip 0.0.0.0 so you can reach the webinterface from the host OS.

Create a PDF document out of an HTML page

Perl has several modules on CPAN for creating and manipulating PDF files. Just a single search on PDF results in over 500 modules that have something to do with PDF files.

The most useful (or rather essential for PDF processing) are PDF::API2 and CAM::PDF. The former lends itself best for creating PDF’s and the latter for manipulating existing PDF’s and extracting data (such as plain text) from it.

Though these modules make handling PDF’s easier, handling PDF’s still isn’t much fun. As I was in need of a way to generate PDF’s out of work orders (or job tickets) and not feeling much for creating the layout manually and properly formatting paragraphs (manually) with PDF::API2 I started to look further.

I ended up trying out PDF::FromHTML. With PDF::FromHTML you can create a simple HTML layout and let the module create a PDF out of it. You can do some basic configuration such as changing fonts and font-size (check out its documentation for more). It also provides a nifty command line tool called html2pdf.pl for converting an HTML page to a PDF.

The resulting PDF’s from PDF::FromHTML weren’t as pretty as I had wanted, but good enough for the problem I needed solving. But after I started using these work order PDF’s in practice I found I needed more formatting freedom when writing the problem description. So I decided to add Markdown support through Text::Markdown.

Using Markdown I had added a list of tasks to a work order with the items being in bold text and the descriptions underneath it in normal text. Sadly the PDF’s created by PDF::FromHTML didn’t cope very well with nested HTML-elements. A bold paragraph would somehow cause the next paragraph become bold as well. I think that’s a bug in PDF::FromHTML and I’m sure it can be fixed and shame on me for not looking into it.

So instead of seeing if I could fix the bug I did a quick search on the internet and stumbled upon xhtml2pdf, which is provided by python-pisa/xhtml2pdf. Pisa is a Python library for converting HTML pages to PDF’s. It’s far more sophisticated than PDF::FromHTML as it supports more (all?) HTML tags and even CSS2 (plus some CSS3 stuff) for styling.

Currently my webapp will be using xhtml2pdf if it’s available or either fall back to PDF::FromHTML.

Some other interesting Perl PDF modules worth looking into some day are PDF::Boxer and PDF::TextBlock. And while writing this post I also found out that PhantomJS, a headless WebKit, also has a way of saving a page to PDF. So even though handling PDF’s still isn’t a lot of fun, with all these modules and software available it has become a lot easier.

Want to use a web service to convert HTML to PDF? Then take a look at HTML2PDF Web Service.

Twitter Bootstrap 3

It looks like Twitter Bootstrap 3 is just around the corner! I’ve been using Twitter Bootstrap 2 for an internal project and have used it for other quick prototypes as well (including the first Twitter Bootstrap). It’s an awesome framework for quickly putting a nice looking user interface together.

Version 3 promotes itself as mobile-first. Which I guess is getting more and more important these days.

At a first glimpse it looks like for Twitter Bootstrap 2 users the grid system has changed the most. The default style has changed a bit as well. No more gradients and box-shadows as well (but it seems they will come back). Though you can always add them back I liked the default style of version 2. A full list of changes can be found at Github.

A post with the best new features in Bootstrap 3.0 gives more in depth information on what changed. Good stuff!