SASS and CSScaffold

SASS for CSSI think the concept that SASS brings to the table (or CSScaffold, for that matter) is one we’ve all had when we play with CSS and think, “Gee, I would be nice if you could use variables and constants here, and if you could duplicate less code.” And then we would think of splitting our CSS up into many little files, since they’re easier to organize by function, only to find that that wasn’t such a hot idea because a browser will have to make a new HTTP connection for each one to download it.

So here’s SASS/CSScaffold adding just those features that CSS was missing. But is it all good news? I’d say on the whole, yes, but here’s a few points:

SASS requires that you compile your stylesheets every time you update them. My typical development cycle is make a little change to CSS (one one monitor) and hit refresh in my browser (other monitor) to see if the change did what I wanted it to do. That would have to change: now I would need to compile my CSS before I hit refresh. Not insurmountable, but it’s one more thing I can and will forgot and then I’ll think, “Hey, now why didn’t that change do anything?” only to find out after some head-scratching that I forgot to compile. Read more


Dynamic CSS through PHP

When writing CSS,you will find yourself repeating information a lot, which is always a bad thing in programming. CSS 2 lacks constants, which would allow us to define a value once and refer to it many times. Instead, we are forced to repeat the actual value many times, making updating CSS a process that is prone to errors.

Also, in order to reduce the number of connections a client must make to the server, it’s necessary to place all CSS in a single file. But this may mean that you end up with a lot of possibly unrelated CSS in a single file, making it difficult to navigate while you’re developing. There are times when it’s simply handier to have lots of  small files instead of one big file, but it’s just not practical for download by your visitors.

These two problems can be resolved by loading your CSS through PHP. Instead of serving the CSS file directly, i.e.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

you can have the server load a PHP script that produces CSS like so:

<link rel="stylesheet" href="css/style.css.php" type="text/css" media="screen"/>

Note that this will only work if the scripts emits a text/css header:

<?php
  header("Content-type: text/css");
  ...
?>

Now your PHP script can define some constants that you simply insert into your CSS:

<?php
   header("Content-type: text/css");
   $mycolor = "#aaa";
?>
 
p {
  line-height: 1.1em;
  color: <?php echo $mycolor; ?>
}

Your script could also load various CSS files for processing and output the result in one go, solving the second problem we found. But we can do better still. You can have your PHP script use Smarty to produce the CSS, making the use of contants easier (and prettier):

<?php 
  header("Content-type: text/css"); 
  require_once "../smarty/Smarty.class.php";
  $smarty = new Smarty();
  $smarty->template_dir = "../smarty/templates";
  $smarty->compile_dir = "../smarty/templates_c";
  $smarty->cache_dir = "../smarty/cache";
  $smarty->config_dir = "../smarty/configs";
  $smarty->compile_check = true;
  $smarty->caching = 0;
  $smarty->display("file:style.css");
?>

The file style.css would be the main style sheet manifold; it could load other (sub-) stylesheets. For instance:

{assign var="defaultfont" value="normal 11px/1.2em Arial, sans-serif"}
{assign var="thinborder" value="solid 1px #aaa"}
{assign var="inputcolor" value="#666"}
{include file="sys/global-reset.css"}
{include file="sys/base.css"}
{include file="sys/loader.css"}
{include file="control/accordion.css"}
{include file="control/ajaxtable.css"}
{include file="control/button.css"}

The values that were assigned to defaultfont, thinborder and inputcolor can be used in the sub-stylesheets like so:

input
{
  border: {$thinborder};
  color: {$inputcolor};
}

FireFox 4 does not like script.aculo.us builder

script.aculo.usAfter upgrading to FF4 I noticed that some of my JavaScript, which had been working perfectly fine, stopped working. I was able to isolate the problem to the use of the script.aculo.us Builder class to create a script element, like so:

 

 

var head = $$("head")[0];
js = Builder.node("script", { type: "text/javascript", src: path });
js.onreadystatechange = function() { if (js.readyState == 'loaded'
  || js.readyState == 'complete') js.onload(); };
js.onload = function() { console.log("loaded!"); };
head.insert(js);

However, the onload event would never be triggered. In fact, Firebug indicates that the JavaScript file I’m trying to load is never actually loaded from the server.

Read more


What to do about PHP 5.3′s timezone compaints

If you’ve just upgraded to PHP 5.3, your scripts will probably generate a bunch of errors in this vein:

Warning: date(): It is not safe to rely on the system's timezone settings.
You are *required* to use the date.timezone setting or the
date_default_timezone_set() function. In case you used any of those methods
and you are still getting this warning, you most likely misspelled the
timezone identifier. We selected 'Europe/Helsinki' for '2.0/no DST' instead.

Obviously, the solution is to use the date_default_timezone_set() function, but that means you need to change scripts that ran perfectly well and warning-free previously.

There’s another approach. You can set the default time zone in PHP’s configuration file so that it won’t bother you again (at least on your server). To do so, fine the date.timezone setting in php.ini and change it thusly:

date.timezone = Africa/Maputo

Now the warnings will be gone.


Creating a Forward Proxy with WEBrick

RubyBuilding a simple forward proxy in Ruby with WEBRick requires very little code. Here is a small sample that forwards all requests but for the example.com domain, which it blocks.

 

 

 

require 'webrick/httpproxy'
 
def handle_request(req, res)
  puts "[REQUEST] " + req.request_line
  if req.host == "example.com" || req.host == "www.example.com"
    res.header['content-type'] = 'text/html'
    res.header.delete('content-encoding')
    res.body = "Access is denied."
  end
end
 
if $0 == __FILE__ then
  server = WEBrick::HTTPProxyServer.new(
    :Port =&gt; 8123,
    :AccessLog =&gt; [],
    :ProxyContentHandler =&gt; method(:handle_request))
  trap "INT" do server.shutdown end
  server.start
end

The interesting bit is the handle_request method. WEBRick provides us with the request and response instance for each request, so that we can check what’s being requested and block certain URLs. Since the response is also already available, we can even perform content filtering.


Get local machine’s MAC address in C#

Here’s a way to get the local machine’s MAC address in C#. Note that there may be various MAC addresses (Ethernet cards, local loopback devices, hooked up 3G devices etc.), so we try to find only the Ethernet MAC address:

static string GetMacAddress()
{
  string macAddresses = "";
  foreach (NetworkInterface nic in NetworkInterface.GetAllNetworkInterfaces())
  {
    // Only consider Ethernet network interfaces, thereby ignoring any
    // loopback devices etc.
    if (nic.NetworkInterfaceType != NetworkInterfaceType.Ethernet) continue;
    if (nic.OperationalStatus == OperationalStatus.Up)
    {
      macAddresses += nic.GetPhysicalAddress().ToString();
      break;
    }
  }
  return macAddresses;
}