Categories
Programming Languages

Practice…but not typing

A post by Karl Martino reminded me of Jeff Atwood’s We are typists first, programmers second. Atwood was responding, in hearty agreement, to a post by Steve Yegge, who wrote

I was trying to figure out which is the most important computer science course a CS student could ever take, and eventually realized it’s Typing 101.

The really great engineers I know, the ones who build great things, they can type.

As I wrote in Karl’s comments, saying that fast typing is what makes a great programmer is little different than saying what makes a good carpenter is how fast they swing their hammers.

Fast typing is a by-product of extensive creation, whether that creation is web page markup, a stylesheet, or code. The more we create code, web pages, and designs, the more efficient we get with all of the tools used, including but not limited to, typing.

In addition, times have changed. I have no doubts that today’s generation of kids are speed demons on the keyboard—whether it’s on their cellphone or attached to their computers. A typing class would most likely slow them down.

If anything, what we should be encouraging is more practice with problem solving—the ability to figure something out on one’s own, without having to Google an answer or ask friends on Twitter—not typing.

Categories
Programming Languages

Learning something new in PHP

Recovered from the Wayback Machine.

didn’t know the ?> closing tag was optional with PHP code only files, either. I did know about white space following the end tag. Probably every PHP developer knows about the white space following the end tag problem.

What header? What ******** header!?

Other useful stuff on PHP best practices at the Drupal site, with more detail on omitting the end tag.

Question to those who know Drupal: how is it on supporting XHTML? Both published and consumed via comments?

Categories
Graphics/CSS Programming Languages

Experiments in Color

I’ve written about this previously, but worth repeating. CSS can be dynamically created using a PHP application, as long as the content type is set to CSS:

<?php // declare the output of the file as CSS header('Content-type: text/css'); ?>

The style sheet can then be used directly or imported into another:

@import "photographs.php"; I use this feature to randomly assign a background image for my header and also to access the color of select pixels in the image in order to colorize the theme based on image. I based the points on the photographer’s “rule of thirds”, which puts the focus on the photo along an imaginary line, either along the top or bottom horizontal third, or the left or right horizontal third. I also pick a pixel directly in the middle of the image. I could test all pixels and find the most common colors used, but the amount of processing is prohibitive. I’ve haven’t seen this algorithm fail when it comes to creating a compatible color set, yet.
fishie.jpeg (JPEG Image, 818x195 pixels)

I use the built-in graphical GD functions in PHP to pick the color points, as well as find the size of my background image, and adjust the header accordingly. I could also have used IMagick, the PHP-based wrapper for ImageMagick, but GD is almost universally available on web hosts, while IMagick is not.

// create a working image 
$im = imagecreatefromjpeg($imgname);

// get image height and width
$height = imagesy($im);
$width = imagesx($im);

// sample five points in the image, based on rule of thirds and center
$rgb = array();

$topx = round($height / 3);
$bottomx = round(($height / 3) * 2);
$lefty = round($width / 3);
$righty = round(($width / 4) * 2);
$centerx = round($height / 2);
$centery = round($width / 2);

$rgb[1] = imagecolorat($im, $topx,$lefty);
$rgb[2] = imagecolorat($im, $topx, $righty);
$rgb[3] = imagecolorat($im, $bottomx, $lefty);
$rgb[4] = imagecolorat($im, $bottomx, $righty);
$rgb[5] = imagecolorat($im, $centerx, $centery);


// extract each value for r, g, b
$r = array();
$g = array();
$b = array();

$ct = 0; $val = 5000;
// process points
for ($i = 1; $i <= 5; $i++) {
   $r[$i] = ($rgb[$i] >> 16) & 0xFF;
   $g[$i] = ($rgb[$i] >> 8) & 0xFF;
   $b[$i] = $rgb[$i] & 0xFF;

   // find darkest color
   $tmp = $r[$i] + $g[$i] + $b[$i];
   if ($tmp < $val) {
       $val = $tmp;
       $ct = $i;
   }

}

   printf(".color1 { fill: rgb($r[1],$g[1],$b[1]); stroke: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".color2 { fill: rgb($r[2],$g[2],$b[2]); stroke: rgb($r[3],$g[3],$b[3]); }\n");
   printf(".color3 { fill: rgb($r[3],$g[3],$b[3]); stroke: rgb($r[2],$g[2],$b[2]); }\n");
   printf(".color4 { fill: rgb($r[4],$g[4],$b[4]); stroke: rgb($r[1],$g[1],$b[1]); }\n");
   printf(".color5 { fill: rgb($r[5],$g[5],$b[5]); }\n");

   printf("stop.begin { stop-color: rgb($r[1],$g[1],$b[1]); }\n");
   printf("stop.middle   { stop-color: rgb($r[5],$g[5],$b[5]); }\n");
   printf("stop.end { stop-color: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".nameExpanded, .nameCollapsed { background-color: rgb($r[4],$g[4],$b[4]); } \n");
   printf(".column-post h2, .column-post h2 a, .firstpost, 
                .firstpost a { color: rgb($r[$ct],$g[$ct],$b[$ct]); } \n");

To ensure that the title and title bars contrast strongly enough to be viewable, I test the selected colors for the ‘darkest’, ie the less saturated of colors. Adding up the RGB separate values does the trick: a value of RGB(0,0,0) totals to 0, while one for RGB(255,255,255) totals to 765. Everything else falls in between.

Again, the reason for doing this type of adjustment is not only to add an interesting, and changing element, to the site interface, but also to demonstrate what can be done with both images and CSS. Neither is static, and none of the modifications requires scripting on the client, and many of the modifications aren’t impacted by browser type.

For more details on the processing, access the viewable copy of the PHP program.

Categories
Programming Languages SVG

Color sampling and SVG gradients

More fun with SVG.

I’m rather surprised there isn’t more general ‘design’ work using SVG. True, you really should have your pages as XHTML and not many people are ready to jump on that bandwagon. Still, once you’ve bit the bullet, you can have a lot of fun with your pages and incorporating SVG.

My newest experiment is actually combining PHP image functions with dynamically generated CSS entries, which also control the random photo header. All the SVG elements are dynamically created based on colors sampled in whatever is the current header image. I used the photographer’s ‘rule of thirds’ to pick four outer points and then sampled the middle. I use the sampled colors to generate CSS values used to style 4 small circles in the top of my sidebar and rounded-corner gradient-filled ‘caps’ to my individual comment entries.

I had to make some tweaks to make the gradient comments work. First, the SVG element had to have the display setting set to ‘block’ in CSS; otherwise, the browsers generated space following the object. I’m assuming that the SVG element is treated like the IMG element is in strict XHTML mode: treated as an inline element, and given a ‘text descender’ space. Second, just as with images, fixed widths work best for gradients, and the viewport for each SVG element has to be fixed to work with Safari 3.

The gradients don’t work with Firefox 2.x if you access the page using a page fragment, such as clicking on a specific comment. This is a bug that has been fixed in Firefox 3.x. It does work with the latest Opera and Safari 3. The page degrades nicely for non-SVG browsers.

I’m not sure if I’ll keep the SVG effects, or even take it further with creating entire page color schemes based on color sampling of the image. I may look at embedding additional data directly in the images to control both the CSS and the SVG.

I do want to implement ‘caching’ for the ‘blog pulse’ I created earlier. The best time to cache the pulse would be each time a new comment is saved, probably to a database table I’ll create for other uses. The color sampling, though, may not need caching. The gradient effect can be a little slow, but most of the ‘slowness’ is from the fact that the header image is quite large. Then there’s the random selector for the image–I imagine this can be improved through the use of caching.

Frankly, I don’t load my sidebar with dozens of widgets, hook into that abysmal google syndication service, nor do I embed dozens of YouTube videos in my posts. My little use of SVG is nothing compared to all of this, and, unlike the other services, doesn’t impact on the loading of the page contents.

Still playing. I’ll worry about performance when I’m finished playing.

For your own playing: SVG is in page, PHP dynamic modification code, import into your CSS file using: @import “photographs.php”;

The only drawback to all of these changes is Internet Explorer. None of this is going to work with IE. None of what I’m doing, though, impacts on the page layout, or the text or even the generated CSS style settings. The IE users won’t get some of the effects, but they’ll get the weblog content. I’m not going to try and use Silverlight or VML or a plug-in to work around these issues, either. I figured if the Microsoft people don’t care that their users are missing out on the fun pieces of the web that’s Microsoft’s problem, not mine. That browser has killed too much of my fun over the years–enough is enough.

Categories
Programming Languages Technology Weblogging

Trackback technologies

Recovered from the Wayback Machine.

Trackback stuff.

First, to re-cap, this page covers how to add trackback to your individual pages, and to force page re-builds when a new trackback ping arrives for the specific page.

I put the code for the Recent Trackbacks and Backtrack into text files that you can download and use in your MT weblog. It’s worked nicely since I put it in, and is ready for others to try. Consider it beta, and it’s not wrapped up pretty, pretty, but tech is gritty. Pretty bows get in the way of the moving parts.

The first file is backtrack.txt, which contains the Backtrack technology. To use this, modify the HTML to create a layout you want and then rename the file to “backtrack.php”, putting it into your main weblog directly.

Next, modify the individual daily archive page template to call the file:

 

<MTPingsSent>
<a href=”http://weblog.burningbird.net/backtrack.php?ping=<
$MTPingsSentURL$>”><$MTPingsSentURL$></a><br />
</MTPingsSent>

 

That’s it for backtrack.

Last, the PHP/MySql code that displays the Recent Trackbacks in the sidebar can be found in this file. To use, copy it into your main index template where you want the recent trackback list to go. You will need to change the username, password, weblog id, and database name in the code to match your environment. The values that need to change are bolded below:

 

<?php

$link = mysql_connect(“localhost”, “user“, “password“)
or die(“database errors”);
mysql_select_db (“database_name“);

$query = “SELECT tbping_id, tbping_source_url, tbping_title,
entry_title, entry_id FROM mt_entry, mt_tbping, mt_trackback where tbping_blog_id = 2 and entry_id = trackback_entry_id and trackback_id = tbping_tb_id ORDER BY tbping_id desc limit 10″;

$result = mysql_query($query) or die(“database errors”);

while ($line = mysql_fetch_array($result, MYSQL_NUM)) {
$input = $line[4];
$input = str_pad($input, 6, “0”, STR_PAD_LEFT);
printf(“<a href=’%s’>%s</a> on <a style=’font-weight: normal’ href=’http://weblog.burningbird.net/fires/%s.htm’>%s</a><br />”, $line[1],$line[2], $input, $line[3]);
}

/* Free resultset */
mysql_free_result($result);

/* Closing connection */
mysql_close($link);
?>

 

Any suggestions to improve the code are welcome — feel free to leave in comments, or cross-post…with trackbacks, of course.

So, there you go. New Toys. Enjoy.