DocuView - document management system http://docuview.co.uk revolutionary web 2.0 document management system Fri, 23 Oct 2009 02:45:46 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Custom login form (authentication) to Basecamp (using PHP, no cURL!, no OpenID) http://docuview.co.uk/index.php/2009/10/custom-login-form-authentication-to-basecamp-using-php-no-curl-no-openid/ http://docuview.co.uk/index.php/2009/10/custom-login-form-authentication-to-basecamp-using-php-no-curl-no-openid/#comments Fri, 23 Oct 2009 02:44:15 +0000 Martin Korych http://docuview.co.uk/?p=395 I have been scouring the internet for the last two days and have finally come up with a custom login form (understand: one doesn’t have to go through http://mycompany.basecamphq.com/login screen) to be deployed on almost every site (even Wordpress 2.8+). I was reading the Basecamp forum, browsing through their API but to no avail. There are references to certain “Stickman’s method” and masses (masses! + more + here a little) of people looking for the very same solution. How does one embed/create their own login form to Basecamp on a 3rd party (one’s own) website?!

Well I’m very proud to say I have managed to achieve it. Partly by trial and error, partly through research. I have looked at libraries/wrappers such as “Basecamp PHP API” and “HTTP class for PHP“, both have their advantages but didn’t do what I needed out-of-the-box. I have studied these guys’ code and ended with a few (< 10) lines of my own solution which currently works. 100%. Bulletproof. I say currently because I suspect it might not be intended functionality of the authentication script. But I am also hoping that by the time 37 signals (Basecamp development team) change/disable it they will either PROPERLY describe how to achieve so (using PHP, no cURL and without using OpenID – which not everybody has).

Slightly hesitant to publish the solution not to bring Basecamp’s attention to it, but since I know there are LOADS of people looking for the solution I will tell you how. All I’m after is enough (say 25+) comments here requesting the functionality. Only then I will share. Promise! :)

It is surprisingly easy, the only clue I’ll give you for now is to study the headers the login form sends and follow the redirections.

Demo will follow soon!

]]> http://docuview.co.uk/index.php/2009/10/custom-login-form-authentication-to-basecamp-using-php-no-curl-no-openid/feed/ 2 customise the default size of avatars in WordPress 2.8+ http://docuview.co.uk/index.php/2009/08/customise-the-default-size-of-avatars-in-wordpress-2-8/ http://docuview.co.uk/index.php/2009/08/customise-the-default-size-of-avatars-in-wordpress-2-8/#comments Mon, 31 Aug 2009 17:59:03 +0000 Martin Korych http://docuview.co.uk/?p=329 You know the drill: backup, upgrade WordPress, check plugin compatibility, verify everything is up and running and… reapply your hacks to the core of WP. I have talked about displaying the post excerpt in the recent posts widget few weeks ago, today I’m going to talk about resizing the Avatar image file displayed in comments.

So you’ve just finished upgrading, everything went smooth and you now have some time to amend the core of WordPress to accommodate for the hacks and workarounds you have implemented over the time. You have styled, laid out and customised your comments, you have changed the default size of Gravatar, Avatar or any other user pictures you display only to find them going back to default (32px × 32px) as soon as you upgrade.

Worry not! In order to change it back to what it was, head to: “wp-includes/comment-template”, locate line #1322 (function wp_list_comments()) and change the defaults array value (“avatar_size”) from 32 to anything you like (we use 50px), so the result will read:

$defaults = array('walker' => null, 'max_depth' => '', 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all',
'page' => '', 'per_page' => '', 'avatar_size' => 50, 'reverse_top_level' => null, 'reverse_children' => '');

And zet is zit. Save and refresh your comments page and enjoy, your user icons and images are exactly big (or small) as intended.

Helpful? Drop me a line here.

]]> http://docuview.co.uk/index.php/2009/08/customise-the-default-size-of-avatars-in-wordpress-2-8/feed/ 0 styling forms – the 21st century way http://docuview.co.uk/index.php/2009/08/styling-forms-the-21st-century-way/ http://docuview.co.uk/index.php/2009/08/styling-forms-the-21st-century-way/#comments Thu, 13 Aug 2009 18:09:18 +0000 Martin Korych http://docuview.co.uk/?p=354 Based on an amazing article from ZURB I recommend you have a look at I have revisited their technique to:

  • deliver the same solution in jQuery
  • use a bit more flexible CSS (at least in my view)
  • redesign our search box

Up until now we have been using a simple JavaScript solution:

<form id="search" action="/index.php" method="get">
<div>
<input class="search_string" type="text" name="search_string" id="search_string" onfocus="if (this.value == this.defaultValue) this.value = '';" onblur="if (trim(this.value) == '') this.value = this.defaultValue;" onmouseover="this.focus();" value="search DocuView" />
<input class="search_submit" type="submit" name="search_submit" id="search_submit" value="" />
<input class="hidden" type="hidden" name="page" value="search" />
</div>
</form>

It worked just fine. Displayed the desired value in the input field and on focus it’d replace it with cursor… We use that in combination with:

<body class="documents" onload="document.forms[0].elements[0].focus();">

which would automatically focus on the form’s search field upon loading the document AND:

function trim(string)
{
return string.replace(/^\s+|\s+$/g, '')
}

The sought after not built-in JavaScript trim function (there is a jQuery alternative, see below).

Since then I have also read this article on optimising and styling the submit/search button in IE6/IE7 or generally any browser not supporting text-indent on button elements.

Now for the NEW code

I have used more or less the same code as seen at ZURB.

<form id="search" action="/testing/label.php" method="get">
<div>
<label for="search-string" class="overlay"><span>search Docu<strong>View</strong></span></label>
<input class="search-string" type="text" name="search-string" id="search-string" value="search]" />
<input type="submit" name="search-submit" id="search-submit" value="search DocuView" />
</div>
</form>

I have used an id for the form to make the CSS specific, easier to insert and start using immediately. I have to admit I have tried to omit the extra class on the label but the jQuery code stopped working (and frankly I do not know why yet – I’m hoping some of you will help me shed some light on it/I’ll figure out why soon). Anywho…

Coding the form behaviour

I have used relative units (em) to ensure the form scales with the size of the font. Also our tweaked version of Eric Meyer’s Reset CSS is used. The result is acceptably similar in all major browsers (IE7/8, Firefox 3.5, Opera 9, Safari 4, Chrome 2, IE6 is having a problem displaying the submit button as defined – maybe some of you will know how to solve that). In Opera the input field is *slightly* lower than I’d like it to be. I have tried cheating it: converted all the values from relative to fixed (em -> px), using 16px font (.75em = 12px, .5em = 8px, .25em = 4px) + I had to add “invisible” (white) borders to both the search-string input field and the span contained in the label but to no avail. At this point there does not seem to be a way to achieve pixel perfect overlay between the input field and the span (in XHTML Strict). Yet!

Apart from converting the JavaScript from the Prototype to jQuery I have also added validating and styling the label when user deletes the contents of the input field OR loads the page with AutoFill/submitted form values in it. Also instead of using the not-yet-100%-supported opacity/transition all I’m changing is the color of the font in the span.

$(document).ready(function()
{
// Select all textboxes and assign them to an array
var input	=	$('#search-string');
var label	=	$('label.overlay');

if (!$.trim(input.val())	==	'')
{
label.addClass('focus').addClass('hastext');
}
else
{
label.removeClass('focus').removeClass('hastext');
}

// Fade the label back when a field gains focus
input.focus(function()
{
if ($.trim($(this).val())	==	'')
{
label.addClass('focus');
}
else
{
label.addClass('hastext');
}
});

// Fade the label back when the user starts to type
input.keyup(function(e)
{
//	empty? label->focused
if ($.trim($(this).val())	==	'')
{
label.removeClass('hastext').removeClass('focus').addClass('focus');
}
else
{
label.addClass('hastext');
}
});

// Check if a field is empty when the user switches out
input.blur(function()
{
if ($.trim($(this).val())	==	'')
{
label.removeClass('focus').removeClass('hastext');
}
});
});

Don’t forget to include the jQuery library! I have devised a demo and have started implementing this throughout our software. As ZURB warned: do not overuse it. I was happy to find semantically friendlier and in a way much better solution than we have used so far.

Finally: the CSS

body { font-size: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }
strong { font-weight: bold; }
#search { width: 20em; color: white; background-color: black; margin: 2em; }
#search div { position: relative; height: 3em; }
#search input { border: 0 none; font-family: Helvetica, Arial, sans-serif; font-size: 100%; }
#search label { position: absolute; left: .5em; top: .5em; width: 19em; height: 2em; background: white; z-index: 1; font-size: 100%; }
#search span { color: black; display: block; padding: .25em 0 0 .25em; border: 0 none; /*border-left: 1px solid white;*/ /*border-top: 2px solid white;*/ }
#search .focus span { color: #ccc; }
#search .hastext span { color: white; }
#search #search-string { position: absolute; z-index: 10; top: .5em; left: .5em; width: 87%; height: 2em; background: none; padding: .25em 0 0 .25em; /*border-top: 2px solid white;*/ }
#search #search-submit { background: transparent url(http://img.docuview.co.uk/sprite/search.png) no-repeat center center; height: 100%; width: 13%; font-size: 0; text-indent: -9999px; line-height: 0; display: block; position: absolute; top: 0; right: 0; z-index: 10; overflow: hidden; }

Thank you, ZURB guys, for the inspiration, I absolutely love the idea! I hope you find the implementation as useful as I have.

]]> http://docuview.co.uk/index.php/2009/08/styling-forms-the-21st-century-way/feed/ 0 Display post excerpt in recent posts widget in WordPress http://docuview.co.uk/index.php/2009/07/display-post-excerpt-in-recent-posts-widget-in-wordpress/ http://docuview.co.uk/index.php/2009/07/display-post-excerpt-in-recent-posts-widget-in-wordpress/#comments Thu, 16 Jul 2009 12:08:13 +0000 Martin Korych http://docuview.co.uk/?p=318 Everytime we upgrade to the latest version of WordPress (currently 2.8.1) we lose a bit of customising. Whether it’s the value of the search button in the search widget (hidden because of IE6’s and IE7’s disability to apply text-indent to form buttons) or the excerpt of our posts displayed in the widget on most of the pages disappears. For future reference and for people who don’t want to be searching for widgets to do that for them I’ve decided to describe how to quickly and easily get the job done – yourself!

First of all: the following only applies to WordPress 2.8 and later.

  1. Open the default-widgets.php (to be found in the “wp-includes” folder of your blog)
  2. Insert “<?php    the_excerpt();    ?>” on line 553 (straight after 
    <li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a></li>
  3. Save
  4. Refresh a page with the widget displayed

Whilst I did look into installing a widget that would do this for me automatically I couldn’t find one that’d satisfy me. If you are using one please let me know which one, I’d love to consider automating the process. The reason I wrote this post is also because Google didn’t offer accurate enough or up-to-date results.

Helpful? Drop me a line… :)

]]> http://docuview.co.uk/index.php/2009/07/display-post-excerpt-in-recent-posts-widget-in-wordpress/feed/ 11 CSS line-height http://docuview.co.uk/index.php/2009/07/css-line-height/ http://docuview.co.uk/index.php/2009/07/css-line-height/#comments Thu, 16 Jul 2009 11:07:53 +0000 Martin Korych http://docuview.co.uk/?p=316 I do not normally repost or write about someone else’s blogs, but this one is far beyond what I consider useful and I wanted to share it. Pasting the link here so even I can come back to it in the future is far less than I’d like for such an article, but I’ll start with spreading the word. Educate, enlighten, encourage to explore, you’re ticking all my boxes!

Well, here goes. A class, superb article on CSS line-height. We’re definitely testing and implementing this as of the next version of DocuView.

]]> http://docuview.co.uk/index.php/2009/07/css-line-height/feed/ 0 Microsoft Office 2010 (codename v14) in the wild http://docuview.co.uk/index.php/2009/07/microsoft-office-2010-codename-v14-in-the-wild/ http://docuview.co.uk/index.php/2009/07/microsoft-office-2010-codename-v14-in-the-wild/#comments Mon, 13 Jul 2009 00:03:19 +0000 Martin Korych http://docuview.co.uk/?p=303 A trailer for a movie that does not even exist came out few days ago. And then I came across a link to a BETA Technical Preview of the new Office 2010. Just wanted to let you know that we will commence testing pretty soon and will prepare DocuView to be able to translate the new Office 2010 documents – when it launches – into PDF.

Currently we handle all Office 97-2007 Word (*.doc, *.docx) + Word containing Visio, Excel (*.xls, *.xslx), text files (*.txt), rich text format (*.rtf), OpenOffice 1+ all formats, image files (*.png, *.jpeg/jpg, *.gif, *.bmp…). We’re adding support for media files (wav, mp3, mp4, swf, mov) over the next three months using our bespoke media player. We’re also currently testing Microsoft Works and various Mac/Linux related document formats.

We will be releasing a comprehensive list of all document formats supported before the end of July – so stay tuned!

]]> http://docuview.co.uk/index.php/2009/07/microsoft-office-2010-codename-v14-in-the-wild/feed/ 0 Printing support throughout modern browsers http://docuview.co.uk/index.php/2009/07/printing-support-throughout-modern-browsers/ http://docuview.co.uk/index.php/2009/07/printing-support-throughout-modern-browsers/#comments Sun, 12 Jul 2009 16:54:23 +0000 Martin Korych http://docuview.co.uk/?p=300 Quite a lot of effort went into our print stylesheet of DocuView based on various superb articles on Smashing Magazine or A List Apart. We boldly advertise the fact that we support all major browsers (even the unsafe, unfriendly and ancient ones -yes IE6, I’m talking about you!) – but to my surprise after thorough testing on both Mac and Windows I have to consider including a disclaimer in our marketing: “we cannot guarantee the results in Safari, Chrome and Opera, neither in Windows nor Mac OS”.

At this point I am still hoping we are doing something wrong, we are overlooking something – to be honest it mainly affects the printing of distribution lists – as we do not experience our users to be printing out anything else other than the documents… I have read up about css property “page-break-after” and its usage and support throughout various browsers and am achieving the desired effect in all Internet Explorers (6+) and in all Firefoxes (Mac & Win), but because we cannot force printing background graphics, images or backgrounds in Safari nor Chrome (Opera seems to offer a little not-so-clear-what-they-meant-by-that option) and we are not expicitly given the option to preview what we’re about to print we cannot debug and tweak 100%.

Googling for a solution didn’t bring desired results either, so until we fix it (or 100% confirm it is not out our fault) we will have to discourage the use of the aforementioned browsers if you intend to print out of DocuView anything else but the documents. Are you experiencing the same or is it solely only our problem?

]]> http://docuview.co.uk/index.php/2009/07/printing-support-throughout-modern-browsers/feed/ 0