27stars

IE 6 and transparent PNG’s…

Everyone likes PNG’s, everyone loves transparency. Except IE 6. So what do you do? I would be interested in finding out how others resolve this - I usually end up providing alternate background images in gif format via an extra stylesheet and conditional comments, as this allows me to keep nicer background images available for more obliging browsers.
As for content images - there have been scripts out there for a while that will give IE the illusion of handling transparent PNG’s in image tags - but I made a find today that very nearly made me jump up and lead the office in an impromptu conga line of celebration: a script which extends this and lets you use transparent background images too! Twin Helix is offering this script up in beta form and it is awesome, check it out.

Tags: ie 6, Transparent background images, transparent PNGS, web design

The magic IE 6 fix!

The magic IE 6 fix!
So, you have a website, and you have a div in that site which you have floated left or right. You *know* how big the margin you put in was, and it’s looking great in IE7, Firefox, Opera and Safari… so why is the margin twice the size in IE6 and causing chaos in your html layout? For example, either of the elements below would trigger this bug when seen in IE6:

#menu {
float: left;
width: 180px;
margin-left: 10px;
}
#panel {
float: right;
width: 600px;
margin-right: 10px;
}

This one has had me despairing a time or two, and I’ve previously end up redeclaring all the margins in a just for IE6. But the solution is out there - and its not even a hack! I ran into the article “IE6 - CSS Bugs and Fixes Explained” by Dave Woods and while he goes into the three main IE6 issues, it was the Double Margin Bug fix that made my day! It’s amazingly simple and completely incomprehensible to me as to *why* it should work, but just adding and “display:inline;” to the element style not only fixes everything, but doesn’t even break anything else in any other browser - magic!

#menu {
float: left;
width: 180px;
margin-left: 10px;
display:inline;
}
#panel {
float: right;
width: 600px;
margin-right: 10px;
display:inline;
}


Tags: cross browser, css fixes, ie, ie 6, ie 7, Website Design

Controlling your website

There are many different websites out there. From simple one-page websites that act almost like an online business card to complex database-driven websites that can do all sorts of clever things.

For the small business owner, there is another way to differentiate websites. Simply - can the business owner control the contents of the website, or do they rely on an agency or other third party every time the website needs a change.

Control has a number of clear benefits:

1. The website stays current and up-to-date. Nothing looks worse than an outdated website - and there are many of them out there.

2. The business can communicate with customers. From special offers, contact detail changes, new employees or even schools reporting closure due to snowfall, the ability to quickly change the website alters its effectiveness and ensures the website becomes an effective tool.

3. All website owners are keen to have their websites ‘found’ on search engines such as Google or Yahoo. These search engines have many means to rank websites, and the amount of relevant content and the frequency the content is updated are both important. With control, the business owner has the ability to enhance the website ranking on these search engines (called ’search engine optimisation’ or SEO) without paying the large fees demanded by agencies for the purpose.

There are to main ways that a business owner can ‘buy’ a website that enables them to control the content. 

They can approach a design agency who may put together a custom solution, and charge a considerable fee for the privilege. 

Or they can use an online website creator. These are improving all the time, and can be very inexpensive to use. The constraints of HTML and CSS (the software languages of the internet) mean that no website creator will be as flexible as desktop publishing systems or word processors that are familiar. However, with a little care and some attention, professional looking websites can be produced and controlled for a fraction of the cost of using a design agency. 

The best website creators have an active support organisation ready to assist when the user when they get stuck. It happens - and despite clever help systems, new users can misunderstand key features or processes. A real and helpful voice at the other end of a telephone line can make all the difference between a successful website and a business owner enjoying all the benefits of control, and a half-finished site that never joins the world-wide web.

Tags: website CMS, website creator, Website Design

Meal out at Prezzo’s

Things have been a little crazy here for the last few weeks. It’s good to be busy, it’s also good to have your efforts acknowledged in the form of being treated to a meal out!
A new Italian restaurant has opened in Oswestry and last night we were all treated to what turned out to be a very tasty meal. Formally a toy shop, the restaurant has been fitted out and decorated very tastefully. Complete with a stone bake pizza oven where you can see the chefs preparing your food.
We were all somewhat over indulgent!  3 courses washed down with 2 bottles of wine, very nice!  Everyone had chosen differently for their various courses so we had a good idea of the quality of their meals on offer. The consensus of opinion?…When can we go again!

Tags: 27stars News, 27stars team, Italian, Owestry, Prezzo

PDF Table Generation

The PDF SimpleTable library should be one of the most useful libraries for anyone generating table-based PDFs.

However, there are several procedures within the table generation library that are inefficient at best. The first to come to mind is the page overflow checking, which is performed every time a new cell is drawn. As a result, using SimpleTable for any sizeable pdf project consisting of many tables is impractical, particularly under the constraints of web development where the connection would time out before SimpleTable has finished generating the pdf.

For this reason, I have been developing an alternative: evensimplertable (for want of a better name). This is currently in development, and as such almost certainly not as powerful as SimpleTable yet, but it is considerably faster and does have a (I find) useful assortment of format options. Using this, I was able to generate a 40-page pdf document (each page consisting of about 10 tables), in about 4 seconds, as compared to almost a minute using SimpleTable. While this is a very specific example, I am sure anyone combining web-related work with ruby and pdfs will see my point.

Current formatting options available include:
Which lines to draw: All, edges, edges and column separators, none. Also: left, right, top, bottom edges of the table, or any combination thereof.
Cell padding: horizontal padding (left and right of text), vertical padding (above and below), or just above padding, or below padding.
Cell shading, text colour, alignment, font size.

In addition, it can include arrays for row formats, column formats or cell formats, to overwrite the table defaults for a particular row, column or cell. Each element of these arrays can include any of the above formatting options.

Offhand, I can think of two reasons why this is faster than SimpleTable: One, the column borders are specified as an element of the table format, and are not calculated on the fly. This may be a little more cumbersome, but it gives total control over the column positioning and is more efficient.
Two, the page overflow method uses an approximate calculation before writing any row to the pdf. This calculation is fast and has proved accurate so far.

Tags: pdf generation, pdf tables, ruby, SimpleTable

Some Tip’s to avoid IE fixing stress…

Anyone who develops in Firefox inevitably comes to the point of IE browser testing - much as it would be nice to pretend otherwise you can’t ignore that most of the world still uses various versions of IE, and the fact that all your beautiful standards-compliant styles are behaving strangely has to be dealt with.
So, here are some quick tips to get you started towards cross browser consistency between Firefox and IE:

1)Use a base stylesheet - why spend hours tweaking styles when all that needs to be done is catching all those pesky initial values. Don’t have a base stylesheet? Your can find a nifty one by Eric Meyer here.

2)Don’t hack - do everything you can to avoid it. And if you do have to hack? Don’t hack inline. It’s messy. Use conditional comments. Tidying all your IE fixes into a separate stylesheet means you have a single place to see all your fixes and you don’t have to go scrolling through your main stylesheet searching for that elusive hacked style. All you have to do is create your additional stylesheet and then add this to the top of your page :

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

The above code would only add the stylesheet ie6.css if the user was viewing the page with IE6. You can use different operators in the conditional expression, so the possibilities are as endless as the IE versions you need to catch - you can find a full breakdown of the operators available here.

There are down points for conditional comments as any other hack, and you can view Jens Meiert’s vehement dismissal of them here but the fact remains, we need CSS hacks, and conditional comments has by far been the most consistent and useable method in my experience.
3)Check the main offenders:

• mind your padding. I find it best to just avoid horizontal padding altogether, and keep a wary eye on your borders. This is the ‘box model’ issue and accounts for a fair amount of the more dramatic display bugs.
• PNG24 rendering(IE 6 only) You can get a Javascript to Make IE 6 behave like IE 7 regarding PNG24’s but it doesn’t work for background images alas…

• min-height (any of the lovely min’s and max’s actually, though min-height seems to be the one used the most…)

After these I’m afraid you enter the realm of the esoteric and whimsical, things such as “IE will not apply opacity to an element unless its positioned, fixable by setting ‘zoom: 1‘ ” . Which brings me to my last tip:

4) Be flexible, there’s usually two or three ways to get to a given effect, try a different method and see if it has the same bugs.

Tags: browser fixing, css issues, ie 6, ie 7

Pool Night

Last night we all went to a local pub for a healthy, but competitive game of pool! There are times when you need to do more than work together, a team that plays together as well ultimately works better together. Hey, it’s fun too!
So we had a good night, a few pints ( no-one was driving!) and several games later the boss took the winning shot!

Will there be a return match? I think so!

Tags: 27stars, 27stars team, company news, Oswestry

IE bug - mysterious repeating text…

I had the strangest IE bug cropping up this afternoon - mysterious repeating text! If you’ve had this bug you’ve probably found the same answers as me online, general advice on how it is something to do with width:100%, float:left and hidden div’s…
Unfortunately for me none of these were relevant in my case. The answer ended up being incredibly simple, and I’m posting it up here in case someone else ever ends up with the same issue..
The code that was causing the trouble was two paragraphs which were being toggled between display:none and display:block via javascript. To do this you have to set the initial display property in the HTML and therein lay the bug: if I had the display none element above the display block element the display block element produced mysterious repeating text.
Solution? Ordering the elements the other way around!

Tags: css issues, display:none, ie 6, ie 7, phantom text, repeated text

Embedding TTF fonts in a PDF using PDF::Writer

Okay, from the top, here’s how to use TTF fonts in your PDFs using PDF::Writer. I’ve seen various methods but not a concise, end-to-end, example; so I thought I’d share!

Of note, Prawn is the future of PDF production in Ruby. If you are starting a new project I would take a look there as they have TTF support built-in; but for maintaining existing code, here we go!

First thing you’ll need to do is convert your TTF font to an AFM file. We’ll use a program called TTF2PT1 converter and you can get it like this.

wget http://prdownloads.sourceforge.net/ttf2pt1/ttf2pt1-3.4.4.tgz
tar xzvf ttf2pt1-3.4.4.tgz
cd ttf2pt1-3.4.4
make all

Note we are just compiling the program and using it, not installing it on our system (I don’t need it that often!). So, from that directory, you can now convert your TTF font like so:

./ttf2pt1 -GFA -OW -b -p ttf path/to/MyFont.ttf

And then just delete the ttf2pt1-3.4.4 folder when you are done with it.

This should give you an AFM file of your font (and a PFB, but we don’t need that), which is what the PDF::Writer library desires. Below is a short piece of code showing how to use it.

Note: I have put the MyFont.afm file in a ‘fonts’ subdirectory (which I add to PDF::Writer’s search paths, keeping it all nice and clean. I’d recommend an absolute path, constructed from __FILE__, though).

require 'rubygems'
require 'pdf/writer'

PDF::Writer::FONT_PATH << "./fonts"
PDF::Writer::FontMetrics::METRICS_PATH << "./fonts"

pdf = PDF::Writer.new
pdf.select_font "MyFont.afm"
pdf.add_text 100, 700, "Text with embedded font."
pdf.save_as "embedded_font_example.pdf"

Tags: code snippets, embedding, font, pdf, pdfwriter, prawn, ruby, ttf, ttf2pt1

Issue tracking with Ditz: a walkthrough

When it comes to tracking code issues (tasks/features/bugs) I’ve never been truly satisfied with the tools on offer. After using Trac for a long time, and switching to Lighthouse only recently, I still wasn’t happy: they are just too divorced from the code for me (despite the VCS hooks, e-mail client
integration, etc.).
I began to track certain type of issues in the code instead, using a custom Rake task that found and collated them all (just as ‘rake notes’ does for a Rails application).

Then I came across Ditz, a command-line issue tracker. Switching between code and issue management just got super quick. It’s easy to add new issues, assign them to specific people/releases/branches, track progress, and lots more. Everything you’d expect really - but it stores all of the issues in the repository itself, as flat files (YAML).

Try it for yourself! Here’s a quick primer on how to install it, use it, and have it play nice with Git:

Install:

$ sudo gem install ditz

Use:

$ cd projectx

This will walk you through your user and project setup. Trust me, it’s easy and obvious, but I’ll include an example here for those of you who aren’t following along!

$ ditz init

I wasn't able to find a configuration file ./.ditz-config.
We'll set it up right now.
Your name (enter for "Karl"):
Your email address (enter for "karl@example.net"):
Directory to store issues state in (enter for "bugs"): issues
Project name (enter for "projectx"):
Issues can be tracked across the project as a whole, or the project can be
split into components, and issues tracked separately for each component.
Track issues separately for different components? (y/n): y

Current components:
None!

(A)dd component, (r)emove component, or (d)one: a
Component name: gui

Current components:
1) gui

(A)dd component, (r)emove component, or (d)one: a
Component name: payments

Current components:
1) gui
2) payments

(A)dd component, (r)emove component, or (d)one: a
Component name: user

Current components:
1) gui
2) payments
3) user

(A)dd component, (r)emove component, or (d)one: d
Ok, issues directory created successfully.

With that done, let’s add an issue!

$ ditz add

Title: Don't forget to do this task!
Description (ctrl-d, ., or /stop to stop, /edit to edit, /reset to reset):
> Task description
> /stop
Is this a (b)ugfix, a (f)eature, or a (t)ask? t
Choose a component:
1) projectx
2) gui
3) payments
4) user
Component (1--5): 4
Issue creator (enter for "Karl "):
Comments (ctrl-d, ., or /stop to stop, /edit to edit, /reset to reset):
> ^D
Added issue user-1.
You may have to inform your SCM that the following files have been added:
issues/issue-f87a61786e74f311d8653f03ecb9091ff8cf96b7.yaml

Take note of that last line, we have an automated solution for that later!*

Now, let’s see what we’ve got:

$ ditz

Unassigned:
_ user-1: Don't forget to do this task!

$ ditz show user-1

Issue user-1
------------
Title: Don't forget to do this task!
Description: Task description
Type: task
Status: unstarted
Creator: Karl 
Age: three minutes
Release:
References:
Identifier: f87a61786e74f311d8653f03ecb9091ff8cf96b7

Event log:
- created (karl, three minutes ago)

Great. Now, all main operations in Ditz are time-stamped; this means that you can see the latest activity by just:

$ ditz log

date  : Thu Aug 28 21:47:32 +0100 2008 (six minutes ago)
author: Karl 
issue: [user-1] Don't forget to do this task!

created

Okay, let’s create a release to assign issues to.

$ ditz add-release

Name: 0.0.1 (Initial Alpha)
Comments (ctrl-d, ., or /stop to stop, /edit to edit, /reset to reset):
> ^D
Added release 0.0.1 (Initial Alpha).
You may have to inform your SCM that the following files have been modified:
issues/project.yaml

Every issue is internally stored against a project-wide unique ID (like Git’s commit hashes). Also (like Git), you can address these easier than using this hash. For example, our recently added issue is called user-1.

Let’s assign it to our initial release.

$ ditz assign user-1

Issue user-1 currently not assigned to any release.
Choose a release:
1) 0.0.1 (Initial Alpha) (unreleased)
Release (1--1): 1
Comments (ctrl-d, ., or /stop to stop, /edit to edit, /reset to reset):
> ^D
Assigned user-1 to 0.0.1 (Initial Alpha).
You may have to inform your SCM that the following files have been modified:
issues/issue-f87a61786e74f311d8653f03ecb9091ff8cf96b7.yaml

Listing the issues now reflects this.

$ ditz

0.0.1 (Initial Alpha) (unreleased):
_ user-1: Don't forget to do this task!

Unassigned:
No open issues.

How about a HTML report?

$ ditz html

Local generated URL: file:///Users/karl/Code/arabella/html/index.html

$ open html/index.html

Or you can view Ditz’s project status itself for a fuller report!

Anyway, back to your newly created issue tracking. With everything set up, let’s share it with our team! We’ll first modify our Git repository accordingly.

$ git status

# On branch newUI
# Untracked files:
#   (use "git add ..." to include in what will be committed)
#
#    .ditz-config
#    html/
#    issues/

We’ll add our issues to the repository, along with our .ditz-config file as a sample.

$ git add issues/
$ cp .ditz-config .ditz-config.example
$ git add .ditz-config.example

We’ll ignore our real .ditz-config file, as well as our html output directory.

$ echo ".ditz-config" >> .gitignore
$ echo "html/*" >> .gitignore
$ git add .gitignore

$ git status

# On branch newUI
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#    new file:   .ditz-config.example
#    modified:   .gitignore
#    new file:   issues/issue-f87a61786e74f311d8653f03ecb9091ff8cf96b7.yaml
#    new file:   issues/project.yaml

All sorted - send it off.

$ git commit -m "Set up Ditz (copy and edit .ditz-config.example to your own set up)."
$ git push

Et voila - you’re good to go. The basics at least. What next though?

Well, all the other commands are here:

$ ditz help

Ditz commands:
add: Add an issue
add-component: Add a component
add-reference: Add a reference to an issue
add-release: Add a release
archive: Archive a release
assign: Assign an issue to a release
changelog: Generate a changelog for a release
close: Close an issue
comment: Comment on an issue
drop: Drop an issue
edit: Edit an issue
grep: Show issues matching a string or regular expression
help: List all registered commands
html: Generate html status pages
init: Initialize the issue database for a new project
log: Show recent activity
reconfigure: Rerun configuration script
release: Release a release
releases: Show releases
set-component: Set an issue's component
shortlog: Show recent activity (short form)
show: Describe a single issue
start: Start work on an issue
status: Show project status
stop: Stop work on an issue
todo: Generate todo list
unassign: Unassign an issue from any releases
validate: Validate project status

Use 'ditz help ' for details.

…*you can set up hooks…

…or write a plugin.

Tags: code management, ditz, issue tracking, walkthrough