llynix.com » Code

The One Line Template Engine

Llynix — Mon, 15 Feb 2010 00:17:54 +0000

Bought to you by vincevincevince over at webmasterworld.

The engine itself:
print preg_replace(“/\{([^\{]{1,100}?)\}/e”,”$$1″,file_get_contents(“template.tpl”));

Format of template.tpl file:
{title}

`{header}`



{text}

Setting variables:
$title=”Example page”;
$header=”My Examples”;
$text=”See the placeholders replaced?”;

“/\{([^\{]{1,100}?)\}/e”,”$$1″
I’m delimiting the regular expression with / / and using the modifier ‘e’ which causes the second argument to be evaluated by php.

Explanation

The pattern looks for an opening curly-brace ( \{ ) – the end of the pattern is a closing curly-brace ( \} ).

In between the two braces I look for any character which isn’t an opening curly-brace [^\{], avoiding mistaken nesting of tags.

I match between 1 and 100 of these non-{ characters by writing {1,100} and then I make the match non-greedy (try to find the shortest strings between { and }, not the longest) by adding a?. (? after *, + or {a,b} expressions changes them to non-greedy – in other situations? means 0 or 1 of the preceding).

The full string of non-{ characters is matched and stored as string $1 by surrounding that part of the pattern with brackets ().

Finally, the second argument of the preg_replace is “$$1″, using variable variables. If the pattern encounters “{title}” then the matched string $1 is “title” and so $$1 is $title.

Php Parsing Script

Llynix — Fri, 04 Sep 2009 03:49:58 +0000

I was looking for a way to see how fast my pages were parsing. Came up with this code. Please note this only works for php5.

Put this at the beginning of your pages:

Put this at the end of your pages:
$endtime = microtime(1); $totaltime = $endtime - $starttime; ?>

Sideways Text

Llynix — Thu, 03 Sep 2009 17:01:48 +0000

Just upgraded to Firefox 3.5 and I have to test out the goods.

Sideways Text

If your on a cutting edge browser the text should appear sideways. I had to tweak a bit to get it to display properly, so obviously there are a few bugs or misconceptions. The code for the curious is:



  



  Sideways Text

IE8 Compatibility View

Llynix — Tue, 30 Jun 2009 21:48:52 +0000

Compatibility View

The latest incarnation of Internet Explorer 8 adds a new twist to standards compliant web pages. When viewing a webpage in standards mode the user is presented with a compatibility icon that can be toggled to view the page using the Internet Explorer 7 engine.

However, as web master you have ultimate control. By using the X-UA-Compatible meta tag in your documents you can choose which mode you want your page rendered in and hide the button from users.

Always uses the latest available rendering engine. Display using the IE8 rendering engine. Display standards mode documents in IE7 standards mode, quirks mode documents in IE7 quirks mode. Use IE7 standards mode.

Odd Programming Languages

Llynix — Thu, 10 Jul 2008 17:00:34 +0000

Piet Program

A few weeks ago a ran across an old bookmark outlining the esoteric programing language Piet. I spent a little time trying to grok this language along with a few others that I had run across.

Normally when any programmer decides to tackle a language such as this it isn’t for any purpose other then education and perhaps masochism. But I believe it helps in thinking outside the box and it provides a groundwork for greater programing topics such as Turing completeness.

I originally thought I’d write a simple list of odd programing languages I’ve found, but shortly into my search for languages I ran across a wiki about esoteric programming languages which seemed to do the job for me.

But just for fun I’ll post a few languages I’ve run across in my time.

Brainfuck: A language created by Urban Müller so that the compiler can be made as small as possible. He succeeded in writing a 240 byte compiler and others have since written some that are less then 200 bytes. Brainfuck consists of eight commands notated by the symbols <>+-.,[] all other characters are ignored.
INTERCAL: A tounge-in-cheak language which was designed to be as unlike any other programming language as possible. From the manual: ‘The full name of the compiler is “Compiler Language With No Pronounceable Acronym”, which is, for obvious reasons, abbreviated “INTERCAL”.’ To give an example the ‘PLEASE’ modifier in INTERCAL provides two paths of rejection. If a programmer does not use the modifier often enough the program is considered rude and will not run. If there are too many the program is considered too polite and will not run.
Piet: A language whose programs are written to look like abstract art. It utilizes eighteen colors which are cyclically related with the hue and lightness of the color, along with black and white which are used to control program flow.
Whitespace: Whitespace is a language which uses only spaces, tabs and newlines as its commands unlike other languages who usually ignore these characters.
Malbolge: A language designed to be as difficult as posible. The name is from the eigth layer of hell in Dante’s Inferno.
LOLCODE: A new joke language which is actively being developed.

Caps Lock to Shift

Llynix — Sun, 17 Feb 2008 14:12:09 +0000

Title says it all, found it on the net and it’s been invaluable on the laptop. Posting it for posterity.

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]
"Scancode Map"=hex:00,00,00,00,00,00,00,00,02,00,00,00,2a,00,3a,00,00,00,00,00

Javascript Countdown with PHP Fall Back

Llynix — Tue, 01 Jan 2008 04:22:34 +0000

Perhaps you have an event that happens on your webpage at a certain time, or you want to give a countdown to when the world ends. With this piece of JavaScript you can do this, and a PHP fall back will allow non JavaScript enabled browsers to still view the relevant information.

Let’s start with the JavaScript.

One of the issues here is that we don’t just want to display how much time is left, but also update that display continuously to provide our timer. There are two JavaScript functions that provide this ability, setTimeout which evaluates a function after a set amount of time and setInterval which continuously evaluates a function after a set amount of time.

Another issue we have to look out for is timing and accuracy. The examples on the internet all ran a small amount of code and then ran setTimeout after one second or very close to it. The problem is we don’t know exactly how long the code we are running takes, and this could and is different on every computer that runs the code.

So we need a slightly better approach. Here I’ve assigned a global variable which holds the time when the timer is complete and five times every second the display is updated to show the correct value. Perhaps we can take this further and set our interval uniquely each time based on millisecond comparison of the time? I leave that up to the reader.

The code is fairly self explanatory. The bulk of it is formating code to make the countdown look pretty. I’m not even sure it’s 100%. Onward with the code.

var launchtime = '';

// converts seconds into seconds, minutes, hours, days
function sec_to(secs, num1, num2) {
  return ((Math.floor(secs/num1))%num2).toString();
}

// Our actual function, cb_id is the id of the element to modify
// secs is the time until the event, and message is displayed after time has elapsed.
function countback(cb_id, secs, message) {
  // Our time initialization
  timenow = Math.floor(new Date().getTime() / 1000);
  if(launchtime == '') launchtime = timenow + secs;
  secs = launchtime - timenow;

  // We set up our default text strings
  var DisplayStr = '';
  if(message == undefined) message = 'Times Up!';

  // if we are there display our message
  if (secs < 0) {
    document.getElementById(cb_id).innerHTML = message;
    return;
  }

  // breakdown our time.
  var days = sec_to(secs,86400,100000);
  var hours = sec_to(secs,3600,24);
  var minutes = sec_to(secs,60,60);
  var seconds = sec_to(secs,1,60);

  // just some fancy code to make the time look pretty
  if (days > 0) DisplayStr += days + ' Day';
  if (days > 1) DisplayStr += 's';

  if (days > 0) DisplayStr += ', ';
  if (hours > 0) DisplayStr += hours + ' Hour';
  if (hours > 1) DisplayStr += 's';

  if (hours > 0) DisplayStr += ', ';
  if (minutes > 0) DisplayStr += minutes + ' Minute';
  if (minutes > 1) DisplayStr += 's';

  if (minutes > 0) DisplayStr += ', ';
  if (seconds > 0) DisplayStr += seconds + ' Second';
  if (seconds > 1) DisplayStr += 's';

  // Display our pretty time string
  document.getElementById(cb_id).innerHTML = DisplayStr;

  // Run this function five times every second
  setTimeout("countback(\"countback\"," + (secs) + ",\"" + (message) + "\")", 200);
}

Now for the people who prefer a server side approach. This function pretty much mirrors the JavaScript approach. The one occlusion is the auto-updating feature of the client side script. Our only real recourse here is a meta refresh tag on the top of our page. But at the very least it provides the proper time.

Here is the code:

 0) $displaystr .= $days . ' Day';
  if ($days > 1) $displaystr .= 's';

  if ($days > 0) $displaystr .= ', ';
  if ($hours > 0) $displaystr .= $hours . ' Hour';
  if ($hours > 1) $displaystr .= 's';

  if ($hours > 0) $displaystr .= ', ';
  if ($minutes > 0) $displaystr .= $minutes . ' Minute';
  if ($minutes > 1) $displaystr .= 's';

  if ($minutes > 0) $displaystr .= ', ';
  if ($seconds > 0) $displaystr .= $seconds . ' Second';
  if ($seconds > 1) $displaystr .= 's';

  return($displaystr);
}

?>

That’s it in a nutshell. You can see a working example of it here. I’d like to thank Robert Hashemain for his javascript countdown which served as the inspiration for mine.

Photo Slideshow – Part Two – Simple Slideshow

Llynix — Tue, 18 Sep 2007 04:18:06 +0000

After I got my photos resized it was time to move on to a simple slideshow. It doesn’t get more simple then this. I’ll go with the code first then provide a full explanation.




  Simple SlideShow
  




    
      < Previous |
       |
      Next >
    

    
      
        " alt="Picture" style="border:none;">
      
    

    
      < Previous |
       |
      Next >

This simple slideshow uses a GET request to do it’s work. This is going to dirty up our URL’s but it follows KISS. If ‘pic’ is not set it is set to 1.

Scandir reads into an array the files and directories from a directory. I cheat here and read in the directory backwards to avoid numbering issues and to get rid of the . and .. problem. Don’t put any directories in the originals or you’ll end up with a broken picture.

We subtract two from the total number of entries to get the number of pictures we have to show. I then set my previous and next buttons. This isn’t as simple as subtracting or adding one. We need to cycle around if we are at the beginning or end.

With that information it’s a simple matter of putting it on the screen. I have a small amount of CSS in there to center and remove a border. There are a lot of features that could be added and a few quirks to iron out. What do you guys think?

Photo Slideshow – Part One – Batch Resize

Llynix — Fri, 14 Sep 2007 05:14:30 +0000

The idea is simple, I want to be able to upload a directory full of pictures and have a slideshow. I have a few groups of photos to share with the world and more and more I’m keen on the idea of coding it myself rather then use a service like flickr or Picasa.

The first step was to upload my photos. I created a directory ‘images’ and inside that directory I created ‘originals’ and ‘700w’. I then uploaded all my pictures to the originals directory.

I then created a script to automatically resize all the images in my directory.

I saved this as ‘resize.php’ and ran it with ‘php resize.php’. After about a minute my 700w directory was full of resized images, and I’m all set up for the slideshow I want.

Javascript Error Check for File Uploads

Llynix — Tue, 26 Jun 2007 21:11:49 +0000

If your uploading a file of any decent size it will only annoy the user if they upload something wrong and get told afterwards. What we’d like to do is scan that file and make sure it’s kosher before it’s even uploaded, but unfortunately that isn’t possible with Javascript due to built in security restrictions.

Really all we know about that file is it’s name before we receive it. The only thing we can do is check the file extension to see if it is aligned with our wishes. Included here is a very simple file upload form with minimal PHP and the proper Javascript to complete this check.

Here is the HTML/Javascript




  Jpeg Upload
  
  




  
    Jpeg Image to upload:

It should be fairly straightforward. In the form remember to set the onsubmit=”return check_extension(‘image_file’);” where image_file is the name of your file input. You can modify extensions in the Javascript to your preferences.

For completeness here is a working example and the source.