Living wireframes with Foundation and Jade

Rant: This is quick and short because there is a lot of long articles. Personally I prefer something I can get started with right away.

Response design/web development is difficult to get right out of the box. There are many tools that claim to make this process easier but at the end of the day nothing beats live wireframes. Before a single line of code is written, concepts can be fleshed out and discussed as if a real website was present.

Live wireframing turns a waterfall model around into something much more flexible. Before the design begins, a site is built on simple Foundation or Bootstrap blocks. All the stakeholders can preview the logic and click through live wireframes to better understand the flow. Workflow diagrams, sitemaps and static wireframes are great visualization tools, but, as car brochures are not indicative of how a vehicle will drive, these tools do not help the client fully perceive the end result. In the long run they also make more financial sense. By reducing number of mistakes, iterations and feature patches, the process with more guided steps throughout is cheaper.

What makes this easy?

Writing HTML is not a ton of fun. It's a process without immediate merits and tags have to be placed correctly. In order to speed this up I thought there has to be a better way. And yes there is, Jade.

Jade is a simple templating language that generates HTML. 

Example: 

div: a(href="http://google.com") Google turns into
<div><a href="http://google.com">Google</a></div>  

Jade block hierarchy is similar to Python and so none of the tags have to be closed. For a better list of Jade feature check out their language reference.

Now that layouts can be coded much faster, what about CSS and look and feel. Well that's where Foundation comes in. It could be any front end framework, I just tend to prefer Foundation. It's lean, responsive and has all the features that most websites need.

How to do it?

I've uploaded a simple project to my Github repository but starting with jade is very easy. The installation has to be done via npm and at the end you will get a command line tool "jade". I won't cover these steps because their documentation is most up to date and everyone should learn how to Google. :) In the root of the living wireframe create two folders: jade and public. cd into jade folder and run: jade --watch ./*.jade --out ../public/ and that's it. All jade templates will now get translated to html. In order to integrate foundation I prefer a public CDN, http://www.jsdelivr.com/#!foundation. Remember, this is is supposed to be lightweight. 

So hopefully that gets everyone into more prototyping and remember, two hours of planning is two weeks of less coding (or something along those lines).

PHP: HTML to PDF the better way

So, the LAMP dream application is finished, everything is pristine, you are feeling pretty good about getting paid and the client says, "ok one more thing, please?". "Sure", you say, what the heck could it be that we haven't done. And then the client says it, "it would be great to get this report emailed nightly in a PDF format.". "What!?!", the brain is starting to convulse. And rightfully so, because HTML to PDF options in PHP server side world are very limited. There is a lot of posts out there about viable options and let's go through some of them:

- DOMPDF: buggy, pain to use, slow and difficult getting things to line up. 191 issues in GitHub and I can't remember when I upgraded it and things just worked.
- html2pdf: I really liked this project but it was very heavy and maintenance dropped off around 2008.
- wkhtmltopdf: needs entire QT environment and last supported in 2011.
- framebuffers: This is my personal alternative where by a virtual framebufer is launched inside a virtual X11 environment. Then a script can launch any application and run an export to image/PDF/JPEG/whatever back to the environment. Framebuffers are incredibly powerful but unfortunately setting all this up takes some time and in a shared environment it's unlikely to happen.
- PDFLib (http://www.pdflib.com/): this looks awesome, but I don't have that kind of money.

Before I dive into a better solution I just want to say how easy this all is with .NET and Java. In Java world I've had great success with Flying Saucer. On the .NET side ABCPDF (http://www.websupergoo.com/) is a beautiful library that is accurate to a pixel.

So my ultimate solution was to jump to a Python library Pisa. I love using Python and talking to Python from PHP is a breeze. In most cases to get going you simply need to run:

easy_install pisa html5lib reportlab

In case that fails you might need python-dev library and python-setuptools. Once everything is good and running you should be able to type:

pisa --version

This will produce a lot of usage information. To try it out create an html file somewhere (/tmp/test.html) and run:

pisa - - < /tmp/test.hml > test.pdf

The dashes (-) tell Pisa to use STDIN and STDOUT respectively. One you have a PDF that looks reasonable these are the command to run from PHP:

$html_file = tempnam("/tmp", "html");
$pdf_file = tempnam("/tmp", "pdf");
$handle = fopen($html_file, "w");
fwrite($handle, $html);
fclose($handle);
echo system('pisa - - < ' . $html_file . ' > ' . $pdf_file);
$disposition = 'inline';
//$disposition = 'attachment';
header('Content-type: application/pdf');
header('Content-Disposition: ' . $disposition . '; filename="test.pdf"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($pdf_file));
header('Accept-Ranges: bytes');
@readfile($pdf_file);
unlink($pdf_file);
unlink($html_file); 

?> 

Voila, Pisa just generated a great looking PDF and returned the binary format to PHP which can either save it to a file or present it to user.

Happy PDF!
B

New server setup

My typical setup is a Debian server and the magical apt-get makes me optimistic that I'll get some sleep. Then again, I setup servers as often as I change my tires so thankfully I still spend more time coding. Recently I've been setting up a team production Windows 2008 R2 server. As per hosting, RackSpace is the best bang for the buck. After a few failed images and some time with their support my box was ready to go. This is my installation checklist:

SQL Server 2008 R2 Express (historic client reasons)
Git (http://git-scm.com/downloads)
Mercurial (vendor reasons)
TeamCity 7.1 (CruiseControl.NET would work too but TC is quick GUI config)
Microsoft Windows SDK for Windows 7 and .NET Framework 4 (required for MSBuild)
Microsoft Visual Studio 2010 Shell (Integrated) Redistributable Package (required for MSBuild)
Microsoft Visual Studio 2010 Web Deployment Projects (http://www.microsoft.com/en-us/download/details.aspx?id=24509 - required for MSBuild)
Web Deploy library (http://www.iis.net/downloads/microsoft/web-deploy - required for MSBuild)

Just notice how many dependencies are required for MSBuild! Having installed Visual Studio 2010 on my computer none of these ever came up. Few blogs suggested copying over the Web and WebApplications which seemed odd because Windows just doesn't work that way. One person went as far as to suggest installing Visual Studio 2010 on a production machine. Microsoft, at times, does not make things easy but in my experience if your first reaction is to state the obvious maybe rethink speaking. Anyhow after trial and error this seems to do the job to create a successfully deployable solution. Here is is my rough build.proj and as I am developing this as a learning framework for non .NET developers I have to keep it simple. Unit testing and functional testing may apear in here but it's all time dependent. Once you have this in your solution directory it's enough to point TeamCity to this build file and rejoice in the magic of Continuous Integration.

<?xml version="1.0" encoding="utf-8" ?>
<Project DefaultTarget="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
 <PropertyGroup>
        <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
        <SolutionName>helloworld</SolutionName>
        <SolutionFile>$(SolutionName).sln</SolutionFile>
        <ProjectName>helloworld</ProjectName>
        <ProjectFile>$(ProjectName)\$(ProjectName).csproj</ProjectFile>
    </PropertyGroup>
 
 <Target Name="Build" DependsOnTargets="BuildPackage;CopyOutput" />
 
 <Target Name="BuildPackage">
        <MSBuild Projects="$(SolutionFile)" ContinueOnError="false" Targets="Rebuild" Properties="Configuration=$(Configuration)" />
        <MSBuild Projects="$(ProjectFile)" ContinueOnError="false" Targets="Package" Properties="Configuration=$(Configuration)" />
    </Target>
 
 <Target Name="CopyOutput">
        <ItemGroup>
            <PackagedFiles Include="$(ProjectName)\obj\$(Configuration)\Package\PackageTmp\**\*.*"/>
        </ItemGroup>
  <Copy SourceFiles="@(PackagedFiles)" DestinationFiles="@(PackagedFiles->'C:\inetpub\wwwroot\$(ProjectName)\$(Configuration)\%(RecursiveDir)%(Filename)%(Extension)')"/>
 </Target>
 
 <Target Name="Clean">
  <MSBuild Projects="helloworld/$(ProjectName).csproj" Targets="Clean" />
 </Target>
</Project>

Ski season

Ski season in the Rockies is in full swing and my lack of updates reflect that. I am working on something cool at the moment, to do with interface automation testing, and I will be posting it very soon.

Git Deployment Magic

I got nothing against [insert your favorite Git host here] but sometimes I find the cost unwarranted for simple projects and their tool set more then unnecessary for laid out waterfall development. So here I am going to demonstrate the following:

- Setup a remote git environment with auto deploy.

- Setup a local environment.

This process involves quite a bit of shell work so if you've never used a shell and your world is all about finding the cleanest GUI I did my best to break down the commands.

Setting up a remote environment

1) Create two directories, src and bin. The src directory will be where the git repository resides and bin where your website is deployed. These can be called anything and don't even have to reside in the same folder.

Make sure to get the path of the src directory by going in there and typing 'pwd'.

2) Initialize your src directory by running: 'git init --bare'

3) Create a post deploy hook via 'cp hooks/post-receive.sample hooks/post-receive'

4) Edit hooks/post-receive and add the following:

cd ../bin && env -i git pull

The env -i is necessary because git will always try and execute the command in the directory specified by GIT_DIR. If your bin directory is somewhere else make sure to specify that in cd (eg. cd /home/test/one/bin). To get full path type 'pwd'. For most people the bin directory will be where the host specifies the HTML/PHP/etc files go.

Setting up the development environment

1) Go to your local directory where the code will live and run: git clone user@122.32.234.12:/path/to/src/folder .

122.32.234.12 and user need to be replaced with your remote server location information. I find all this information is much easier to store in .ssh/config and create a private/public key for authentication to skip password entry every time. Refer to google on how to do that.

2) After this your repository should be successfully checked out locally. Add a first few files and try the checkin process via: git push origin master.

This will create your first branch and push it to the server. When the push is done a copy will be automatically checked out to your bin deployment folder. Any errors in the process will show up during push and you have to fix accordingly.
NOTE: After your first push you have to manually clone the src into bin: 'git clone ../src .'

Hopefully this helps someone out and if you notice any errors, issues let me know,

B

OSX 10.7 Lion / Postgres installation issue

Recently I tried to install PostgreSQL on OSX 10.7 Lion and failed with this:

Problem running post-install step. Installation may not complete correctly
The database cluster initialisation failed.

I looked into /Library/PostgreSQL/8.3 and everything seems to be there except the data directory. So open up System Preferences > Users & Groups and add a user postgres. Then as root:

cd /Library/PostgreSQL/8.3
mkdir data
chmod 700 data
chown postgres data
su postgres
./bin/initdb /Library/PostgreSQL/8.3/data
(Watch it go and then you can start your server via)

./bin/postgres -D /Library/PostgreSQL/8.3/data
or
./bin/pg_ctl start -D /Library/PostgreSQL/8.3/data/ (for daemon mode, pg_ctl --help has a full list of commands)

Now in a new tab try /Library/PostgreSQL/8.3/bin/psql -U postgres and all should connect.

One word of warning. If you are using just psql without the full path it will load the default Lion psql command and you'll get this error:

dyld: Library not loaded: /usr/lib/libpq.5.dylib
Referenced from: /usr/bin/psql
Reason: no suitable image found. Did find:
/usr/lib/libpq.5.dylib: no matching architecture in universal wrapper
/usr/lib/libpq.5.dylib: no matching architecture in universal wrapper
Trace/BPT trap: 5

So make sure when launching psql that you include full path to the installation directory.

B

CSS3 iPhone Badge

It's amazing how much code is on Google but despite all my looking I could not find a CSS solution to recreate the iPhone badge icon. So here is my own.

a, a:link, a:visited {

background-color: #bc0000;
background: -moz-linear-gradient(100% 59% 90deg, #bc0000, #feb9be);
background: -webkit-gradient(linear, 0% 0%, 0% 78%, from(#feb9be), to(#bc0000));

border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;

box-shadow: 0px 3px 3px black;
-moz-box-shadow: 0px 3px 3px black;
-webkit-box-shadow: 0px 3px 3px black;

border: 2px solid #fff;
color:#fff;
font-family:helvetica, sans-serif;
font-size:14px;
padding:2px 6px;
text-decoration:none;
text-align:center;

}