Thingy Ma jig

Forcing New Relic into Kiosk Mode

Nick — Fri, 09 Mar 2012 15:05:31 +0000

New Relic is a great bit of kit - nobody can deny that. I recently needed to configure it on a standalone box so it could be open on a large screen so my colleagues and I could see the current status of our sites. New Relic has a Kiosk Mode which strips out some of the navigation from the page an optimises it for "viewing only". Very handy.

I wanted a setting to force (or at least default) the page into Kiosk mode so that when I opened the bookmark on the browser, I didn't have to scroll to the bottom, click it, scroll back up and then refresh any other relevant tabs. It didn't look like there was a feature for this and the Kiosk Mode link was just a java function call; there was no URL.

So I turned to GreaseMonkey.

Enter GreaseMonkey

GreaseMonkey is a Firefox Addon which allows you to bind custom JS scripts to all (or specific) pages. There is a repository of over 74,000 scripts which let you customize all kinds of sites (Twitter, Gmail, Facebook, etc) including Drupal.

However there was nothing for New Relic.

Until now.

Using GreaseMonkey with New Relic

As it turns out, the script is very simple.

// ==UserScript==
// @name            New Relic Kiosk Mode
// @namespace       http://www.thingy-ma-jig.co.uk/
// @icon            http://www.thingy-ma-jig.co.uk/sites/thingy-ma-jig.co.uk/files/greasemonkey/NewRelic_inline_small.png
// @description     Force New Relic into Kiosk mode by setting the cookie on page load if ?kiosk is in the URL
// @include         https://rpm.newrelic.com/*?kiosk
// @updateURL       http://www.thingy-ma-jig.co.uk/sites/thingy-ma-jig.co.uk/files/greasemonkey/newrelic-kioskmode.user.js
// @version         1.0
// ==/UserScript==
 
unsafeWindow.RPM.kioskMode._setCookie();

Once the cookie is set, New Relic handles the rest. All you need to do is append "?kiosk" onto the URL (maybe in your bookmarks?) and the page loads in Kiosk mode.

You can install the script by clicking on this button.

Install Kiosk Mode Script

Find It On UserScripts.org

I have also added the script to UserScripts.org, for those that are interested.

Exporting a Git Repository

Nick — Thu, 15 Dec 2011 16:14:07 +0000

Drupal, git and webdev

Have you ever needed or wanted to pull a remote Git Repository on Drupal.org down as a zip or tarball? You know, the way Github does? Most project releases have fairly recently built tarballs which is awesome - but Sandboxes do not (so it seems - please correct me if I'm wrong!).

The following snippet lets you "archive" a remote repository, pull it down as a tarball, and extract it in-place:

git archive --format=tar --prefix=PROJECT/ --remote=USERNAME@git.drupal.org:sandbox/USERNAME/123456789.git BRACH | tar -xf -

Some important notes:

The prefix is very important - without it, tar extracts to the current folder.
The number (next to .git) references the sandbox Node ID.

I have tried using the "zip" format, however the unzip bash command doesn't accept stdin as a source. It looks like funzip might hold some promise thought…

Quick Tip: Drupal Hook Commenting Using Vim

Nick — Mon, 14 Nov 2011 17:50:52 +0000

vim, Drupal and programming

According to the Drupal Coding Standards for Documenting Hook Implementations, its considered a good practice to quickly chuck a comment before any function which implements a Drupal hook (eg, hook_menu). This helps someone reading your code quickly see that the function is actually linked with a hook in Drupal and isn't just a function in your module to be called directly.

But… Well… The thing is… Does anyone else get bored of writing the following over and over again? I know do…

/**
 * Implements hook_menu().
 */

Wouldn't it be nice if you could just type in "menu" and Vim could just fill it our for you? Here follows a little Vim script for inserting a "hook implements" comment at the current cursor position.

function! DrupalImplementsComment(hook)
  set paste
 
  exe "normal! i/**\<CR>"
  \          . " * Implements hook_" . a:hook . "()\<CR>"
  \          . " */\<Esc>"
 
  set nopaste
endfunction
 
map <C-C><C-C><C-C> :call DrupalImplementsComment(input("Enter Hook name:"))<CR>

Wherever your cursor is, press Ctrl+C 3 times, you then get prompted to enter the hook name. When you press enter, a comment gets inserted. Hopefully this will save someone some time - its already saving me time!

To install the script, I just have it in a file called DrupalCommenting.vim inside my ~/.vim/ folder. Then, inside my ~/.vimrc file, I have a line which imports the source file, eg: so ~/.vim/DrupalCommenting.vim.

Any improvements very welcome!

JQuery Table Sorter Bookmarklet

Nick — Tue, 25 Oct 2011 09:49:04 +0000

javascript, programming, webdev and jquery

Christian Bach has made an awesome JQuery plugin to turn any HTML Table into a real-time sortable table using Jquery. I recently needed to turn this into a Bookmarklet so that I could embed it onto a page to sort a large table (I did not have access to the server-side code for this table).

If you drag the following link into the bookmarks toolbar of your browser, you can turn any table on any website into a sortable table!

Table Sorter Bookmarklet

Select 5 most recent items from some categories

Nick — Wed, 14 Sep 2011 13:07:32 +0000

mysql, tips and Drupal

Ever needed to build a list which "sub-selects", say, 5 items from a given list of categories? This snippet should help.

Assume the following schema…

CREATE TABLE content (
  id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL DEFAULT '',
  body LONGTEXT NOT NULL,
  status INT(11) NOT NULL DEFAULT '1',
  created INT(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (id),
  KEY content_created (created)
);
 
CREATE TABLE tags(
  id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL DEFAULT '',
  PRIMARY KEY (id)
);
 
CREATE TABLE content_tags (
  tid INT(10) UNSIGNED NOT NULL,
  cid INT(10) UNSIGNED NOT NULL,
  PRIMARY KEY (tid, cid),
  KEY content_id (cid)
);

Now we can insert some dummy data…

TRUNCATE content;
INSERT INTO content (title, STATUS, created) VALUES
  ('Ut Secundum Modo',             1, UNIX_TIMESTAMP('2011-09-12 12:00:00')),
  ('Quidem Accumsan Facilisis',    1, UNIX_TIMESTAMP('2011-09-14 17:00:00')),
  ('Vel Ut Oppeto Interdico ',     1, UNIX_TIMESTAMP('2011-09-10 09:00:00')),
  ('Iustum Nimis Venio',           1, UNIX_TIMESTAMP('2011-09-11 12:30:00')),
  ('Consequat Defui Verto Macto',  1, UNIX_TIMESTAMP('2011-09-13 19:00:00')),
  ('Quae Natu Facilisis Ille Jus', 1, UNIX_TIMESTAMP('2011-09-09 21:15:00')),
  ('Abico Meus Ullamcorper',       0, UNIX_TIMESTAMP('2011-09-01 00:00:00')),
  ('Ulciscor Antehabeo Gravis',    1, UNIX_TIMESTAMP('2011-09-05 11:00:00'));
 
TRUNCATE tags;  
INSERT INTO tags (title) VALUES ('alpha'), ('beta'), ('gamma'), ('delta');
 
TRUNCATE content_tags;
INSERT INTO  content_tags(tid, cid) VALUES
  (1,1), (4,1),
  (2,2), (3,2), (4,2),
  (1,3), (3,3), (4,3),
  (3,4), (4,4),
  (2,5),
  (3,6), (4,6),
  (1,7), (4,7),
  (1,8);

The TRUNCATE's are only there to ensure these test tables are empty and that the auto incrementing ID's starts from 1.

Now if you run the following query, you will get a list of up to 3 of the most recent posts from each category.

SELECT tag_id, tag_name, content_id, content_title FROM (
  SELECT
    CASE
      WHEN @id != t.id THEN @row_num := 1
      ELSE @row_num := @row_num + 1
    END AS rownum,
    t.id tag_id,
    t.title tag_name,
    c.id content_id,
    c.title content_title,
    @id := t.id
  FROM tags t
  INNER JOIN content_tags ct ON ct.tid = t.id
  INNER JOIN content c ON c.id = ct.cid
  JOIN (SELECT @id := NULL, @row_num := 0) a
  WHERE c.status = 1
  ORDER BY t.id ASC, c.created DESC
) r
WHERE rownum < 4

This produces…

*Note how the **beta** tag only has 2 items; this is due to the INSERT's above.*
tag_id	tag_name	content_id	content_title
1	alpha	1	Ut Secundum Modo
1	alpha	3	Vel Ut Oppeto Interdico
1	alpha	8	Ulciscor Antehabeo Gravis
2	beta	2	Quidem Accumsan Facilisis
2	beta	5	Consequat Defui Verto Macto
3	gamma	2	Quidem Accumsan Facilisis
3	gamma	4	Iustum Nimis Venio
3	gamma	3	Vel Ut Oppeto Interdico
4	delta	2	Quidem Accumsan Facilisis
4	delta	1	Ut Secundum Modo
4	delta	3	Vel Ut Oppeto Interdico

How to use in Drupal

The above example could easily be adapted for a Drupal site; to list the 4 most recent items in all terms in a given vocabulary…

SELECT term_id, term_name, node_id, node_title FROM (
  SELECT
    CASE
      WHEN @id != td.tid THEN @row_num := 1
      ELSE @row_num := @row_num + 1
    END AS rownum,
    td.tid term_id,
    td.name term_name,
    n.nid node_id,
    n.title node_title,
    @id := td.tid
  FROM term_data td
  INNER JOIN term_node tn ON tn.tid = td.tid
  INNER JOIN node n ON n.vid = tn.vid
  JOIN (SELECT @id := NULL, @row_num := 0) a
  WHERE n.status = 1 AND td.vid = 1
  ORDER BY td.tid ASC, n.created DESC
) r
WHERE rownum < 5

Export a single row from a database as MySQL

Nick — Mon, 11 Jul 2011 14:21:14 +0000

mysql, tip and programming

Nathan Rambeck has a great simple snippet of how to export a single row from a table however it didn't QUITE do what I needed it to. I needed to export a variable from {variable} as I was working on an update script which pulled data from a variable and into a database schema. I got fed up of re-populating the variable data each time.

Here is my version of Nathan's suggestion:

mysqldump -uUSER -pPASSWORD --compact --no-create-info --where="COLUMN_NAME='FILTER_VALUE'" DB_NAME TABLE_NAME

Values in capitals are variables which you should alter with your own values, for example:

mysqldump -udrupal -pdrupal --compact --no-create-info --where="name='theme_settings'" drupal_d6 variable

This produced a line like this:

INSERT INTO `variable` VALUES ('theme_settings','a:1:{s:21:\"toggle_node_info_page\";b:0;}');

The --compact produces a less verbose output (it doesn't drop or lock the table and skips comments). The --no-create-info stops the dump including SQL to recreate the table.

How to get Load AVG for remote server on loop

Nick — Wed, 11 May 2011 14:51:46 +0000

bash, linux and howto

This handy script will allow you to get the current Load Average (loadavg) for a remote server over SSH. It will stream the result set back to you, which you can then pipe into a file if you need to.

This would be handy for monitoring the load of a server while stress testing, for example.

ssh example.com 'while true; do L=$(awk '\''{ print $1 }'\''  /proc/loadavg); D=$(date +%H:%M:%S); echo -e "$D\t$L"; sleep 1; done'

One point of note is the escaping single quote technique. This is based on the suggestion on Muffin Research on how to escape single quotes within single quotes.

As the result is tab-separated, it would be very easy to get the data into a spreadsheet and generate a graph of it.

Nice Dates - A How To

Nick — Tue, 10 May 2011 11:24:56 +0000

Drupal and howto

I've had several people ask me recently how I managed to get the nice date effect on my blog headers. It's quite simple really. All you need is:

An Image - A background image (a CSS Sprite) which contains the days, months and years.
Some HTML - A VERY basic HTML template.
Some CSS - To align the image sections.
A PHP Snippet - A Drupal preprocess function.

How to make a Nice Date block

The Image

The image I use here was knocked up in Photoshop. It's just a grid of "output". Everything must be lined up pixel perfect to make the CSS easier to generate.

As you can see, on the left we have the Months (Jan -> Dec), then the Days (01 -> 31) and finally the years. You can also make out the grid layout; months are "2 rows per day" and day is "2 rows per year".

Using CSS, we can specify which "section" of the image appears in the HTML template. This is known as "spriting". It's a technique for clipping bits of a single image. Without the spriting technique, we'd need 12 (months) + 31 (days) + 7 (years) = 50 images!

The HTML

Using the following simple HTML, we can apply CSS to style appropriately.

<div class="nice-date">
  <div class="month m-{MONTH_SHORT}">{MONTH_LONG}</div>
  <div class="day d-{DAY_SHORT}">{DAY_LONG}</div>
  <div class="year y-{YEAR_SHORT}">{YEAR_LONG}</div>
</div>

In the above, the values in curly braces are variable placeholders which should be replaced by appropriate data. SHORT implies a shortened date (eg, the year 2011 shortens to 11, the month January shortens to 01). LONG is the opposite of SHORT and is only there so that Search Engines and screen readers have some content to use (ie accessibility).

For example, 1st January 2011 would result in:

<div class="nice-date">
  <div class="month m-01">January</div>
  <div class="day d-01">1st</div>
  <div class="year y-11">2011</div>
</div>

With CSS disabled (or to a Search Engine), this still reads January 1st 2011.

The CSS

The following CSS is used to align the sprite images into the HTML above.

.nice_date {
  float:right;
  position:relative;
  width:41px;
  height:40px;
}
 
.nice_date .month,
.nice_date .day,
.nice_date .year {
  position:absolute;
  text-indent:-1000em;
  background:transparent url(i/dates.png) no-repeat;
}
.nice_date .month { top:5px;  left:0;  width:25px; height:10px; }
.nice_date .day   { top:20px; left:0;  width:25px; height:20px; }
.nice_date .year  { bottom:0; right:0; width:15px; height:40px; }
 
.nice_date .m-01 { background-position:0     0; }
.nice_date .m-02 { background-position:0  -10px; }
.nice_date .m-03 { background-position:0  -20px; }
.nice_date .m-04 { background-position:0  -30px; }
.nice_date .m-05 { background-position:0  -40px; }
.nice_date .m-06 { background-position:0  -50px; }
.nice_date .m-07 { background-position:0  -60px; }
.nice_date .m-08 { background-position:0  -70px; }
.nice_date .m-09 { background-position:0  -80px; }
.nice_date .m-10 { background-position:0  -90px; }
.nice_date .m-11 { background-position:0 -100px; }
.nice_date .m-12 { background-position:0 -110px; }
 
.nice_date .d-01 { background-position:-25px      0; }
.nice_date .d-02 { background-position:-25px  -20px; }
.nice_date .d-03 { background-position:-25px  -40px; }
.nice_date .d-04 { background-position:-25px  -60px; }
.nice_date .d-05 { background-position:-25px  -80px; }
.nice_date .d-06 { background-position:-25px -100px; }
.nice_date .d-07 { background-position:-25px -120px; }
.nice_date .d-08 { background-position:-25px -140px; }
.nice_date .d-09 { background-position:-25px -160px; }
.nice_date .d-10 { background-position:-25px -180px; }
.nice_date .d-11 { background-position:-25px -200px; }
.nice_date .d-12 { background-position:-25px -220px; }
.nice_date .d-13 { background-position:-25px -240px; }
.nice_date .d-14 { background-position:-25px -260px; }
.nice_date .d-15 { background-position:-25px -280px; }
.nice_date .d-16 { background-position:-50px      0; }
.nice_date .d-17 { background-position:-50px  -20px; }
.nice_date .d-18 { background-position:-50px  -40px; }
.nice_date .d-19 { background-position:-50px  -60px; }
.nice_date .d-20 { background-position:-50px  -80px; }
.nice_date .d-21 { background-position:-50px -100px; }
.nice_date .d-22 { background-position:-50px -120px; }
.nice_date .d-23 { background-position:-50px -140px; }
.nice_date .d-24 { background-position:-50px -160px; }
.nice_date .d-25 { background-position:-50px -180px; }
.nice_date .d-26 { background-position:-50px -200px; }
.nice_date .d-27 { background-position:-50px -220px; }
.nice_date .d-28 { background-position:-50px -240px; }
.nice_date .d-29 { background-position:-50px -260px; }
.nice_date .d-30 { background-position:-50px -280px; }
.nice_date .d-31 { background-position:-50px -300px; }
 
.nice_date .y-06 { background-position:-75px      0; }
.nice_date .y-07 { background-position:-75px -040px; }
.nice_date .y-08 { background-position:-75px -080px; }
.nice_date .y-09 { background-position:-75px -120px; }
.nice_date .y-10 { background-position:-75px -160px; }
.nice_date .y-11 { background-position:-75px -200px; }
.nice_date .y-12 { background-position:-75px -240px; }
.nice_date .y-13 { background-position:-75px -280px; }

As you can see, the first part just sets up the element sizes and positions. The last chuck of code defines the background offsets for the sprite.

Note: You may need to adjust bits of this based on your own settings. For example, if you remake the Dates PNG Sprite, you will need to adjust ALL the background positions (unless you keep to the same grid).

The PHP

The following PHP is used to embed the HTML Template into a Node.

function THEMENAME_preprocess_node(&$vars) {
  $vars['nide_date'] = _THEMENAME_nice_date($vars['created']);
}
function _THEMENAME_nice_date($timestamp) {
  // Nice Date
  $ys = date('y', $timestamp);
  $yl = date('Y', $timestamp);
  $ms = date('m', $timestamp);
  $ml = date('M', $timestamp);
  $d  = date('d', $timestamp);
 
  return "<div class="nice-date">
  <div class=\"month m-{$ms}\">{$ml}</div>
  <div class=\"day d-{$d}\">{$d}</div>
  <div class=\"year y-{$ys}\">{$yl}</div>
</div>";
}

You've probably guessed, but you should replace THEMENAME with the name of the theme (eg, this theme is currently called "tmj2"). You now have a variable, $nide_date to print into your node.tpl.php.

You can also use the same function in hook_preprocess_comment too, if your site has comments enabled.

Other Tips

You could bundle this up into a module to re-use across several sites. The preprocess hooks in Drupal 6+ are accessible from Modules.
You could alter the Sprite PNG to use a different font; I used Helvetica to fit with the site's clean/simple font design. Someone like Morten (the King of Denmark) might prefer to remake it using Bello to match his blogs header title.
Altering the layout is possible too; maybe you're prefer to the date along the top and the month on the side?

If you implement this on your site, please share your link below! (Note to spammers, my site uses No Follow and I check for link spam, so save us both some time ;-) hehe).

Batch Revert Views

Nick — Wed, 16 Feb 2011 11:33:30 +0000

Drupal, code and tips

Isn't it a pain when you have dozens of Views setup and they are all marked as "overridden" because you just pulled in an updated feature file from somewhere. Features doesn't always notice when the Views on your site aren't up to date.

The following snippet (which you should use with caution) will batch "delete" (or Revert, once the view is in code) all Views which are marked as Overridden. This took a few seconds to run on our development machine.

$views = views_get_all_views();
 
foreach ($views as $view) {
  if ($view->disabled) continue;
 
  if ($view->type == t('Overridden')) {
    $view->delete();
    views_object_cache_clear('view', $view->name);
  }
}

I ran this from the Devel PHP page (http://www.example.com/devel/php). It essentially does the same as the view module does when you individually revert views, but this does it without confirming on ALL VIEWS MARKED AS Overridden. I cannot stress enough - use at your own risk, and backup your database first!

Entity Encode Text Using PHP

Nick — Mon, 07 Feb 2011 14:06:57 +0000

code and programming

Ever needed to Entity Encode a block of text (maybe to partially protect it from spam bots or just hide/obfuscate the content?). I did. It's pretty easy.

If it's just based Entity Encoding, you can always use htmlentities - however this only does the "important" characters such as quotes, ampersands and angle brackets.

If you want to entity encode ALL characters from a string, try this:

$phone_number = mb_encode_numericentity('0123 456789', array(0x00, 0xff, 0,  0xffff), 'UTF-8');

That produces:

&#48;&#49;&#50;&#51;&#32;&#52;&#53;&#54;&#55;&#56;&#57;

This is pretty useful if you want to hide a phone number from things like the Skype auto-highlighter.