Sugama's Tech BLOG

縮.jp is a URL shortening service. This genarates the shortest URLs in the world using multi-byte charactors for the URL. 

http://縮.jp

It also has REST APIs.

Recently I developed a syntax highlight engine called Syntax-Highlight-Engine-Simple. It is aimed at hilighting various program codes.

Here is a working example of This module.

http://jamadam.com/dev/cpan/demo/Syntax/Highlight/Engine/Simple/

I found some similar modules at CPAN such as Syntax::Highlight::Perl::Improved, Text::VimColor or Syntax::Highlight::Engine::Kate. The difference is as follows.

Simple

This architecture is very simple. It calles for highlight rules which defined with single array of regular expression. The following shows an example of rule definition for HTML.

use Syntax::Highlight::Engine::Simple;

my $highlighter = Syntax::Highlight::Engine::Simple->new();

$highlighter->setSyntax(
    syntax => [
            {
                class => 'tag',
                regexp => q!(?s)(?<=<).+?(?=>)!,
            },
            {
                class => 'quote',
                regexp => q@'.*?'@,
                allowed_container => ['tag'],
            },
            {
                class => 'wquote',
                regexp => q@".*?"@,
                allowed_container => ['tag'],
            },
            {
                class => 'number',
                regexp => '¥b¥d+¥b',
                allowed_container => ['tag'],
            },  
            {
                class => 'comment',
                regexp => '(?s)<!--.*?-->',
            },
            {
                class => 'url',
                regexp => q!s?https?://[-_.¥!~*'()a-zA-Z0-9;/?:@&=+$,%#]+!,
            },
        ];
);

$out = $highlighter->doStr(str => $in);

This definition works like this.

Here is one more example,  a sub class Syntax-Highlight-Engine-Simple::Perl. The entire rules for highlighting Perl language defined by such as simple structure data and keyword array. This sub class works like this. If you're familier with reguler expression, you can easily figure out what to do to define own rules.

Fast

This works much faster than Text::VimColor or Syntax::Highlight::Engine::Kate. I couldn't find out how to use Syntax::Highlight::Improved.

Flexible to expand

It's still flexible to expand sub classes. This module provides you some handy methods to develope such as array2regexp(), appendSyntax or getClassname(). Thorough document is coming soon.

See also

• Syntax-Highlight-Engine-Simple::Perl
• Syntax-Highlight-Engine-Simple::HTML
• Syntax-Highlight-Engine-Simple::PHP(developing)
• Syntax-Highlight-Engine-Simple::SQL(developing)
• Syntax-Highlight-Engine-Simple::CPP(developing)
• Syntax-Highlight-Engine-Simple::Javascript(developing)
• Syntax-Highlight-Engine-Simple::Java(developing)
• Syntax-Highlight-Engine-Simple::CSS(developing)

I developed a jquery plugin called clipstr.js. This plugin adjusts the innerText lengths to the parents width. You can see a working example on this Blog's right column, "Recent Entries" area and Comments area. This plugin also puts the original text into title attribute.

The plugin works with codes like this.

$('.boxsize_limited').clipstr({
    width       : 220,
    instead_str : '...',
    set_title   : false
});

You don't have to specify the width if the box width is limited. So all parameter's are optional.

source code

I'm not sure the namimg is valid or not. Should I call it 'collapsestr' or 'strlenLimitter'?

I changed the entry subject format from 'javascript: subject' to 'javascript - subject' because the former example, which also appears to the HTML title tag, do something bad with amazon associate. The program delivers the subject infomation in querystring  and some security softwares on user's computer assumes the communication to be XSS.

Amazon's javascript generates URLs in following format.

http://rcm-jp.amazon.co.jp/e/cm?.......&ref-title=[HTML title]&........

The value is well escaped so it's technically right, but to keep up with the trend of the times, I have to abandon to put any phrases 'script:' in HTML title tag to counter speculation.

I adopted a jquery plugin 'Easy Widgets' for my another BLOG system  to mimic the iGoogle's UI. This is very easy-to-use solution for the purpose I think.

Because the plugin has been released only last month, there wasn't any practical case example yet. I'm happy that my work would be the first one.

For smooth switching of operation system in future, I tend to choose multi platform softwares. I push the following softwares. All of them are also free.

I tried Thickbox3.1 to make the images on this blog clickable. The images shown in article areas are limited sized thumbnails. By clicking them, the original image appears in florting window.

It's laborious to put anchar tags for all images, which is needed to be done for running Thickbox. So I automated the markup.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    
    // Setup for thickbox
    $('.sentences img').each(function () {
        
        var url = $(this).attr('src').replace(/¥?.+/, '');
        var alt = $(this).attr('alt');
        
        $(this).wrap(
            "<a href='%1' title='%2' class='thickbox'></a>"
            .replace('%1', url)
            .replace('%2', alt)
        );
    });
});
//]]>
</script>

<script type="text/javascript" src="/lib/js/jquery.thickbox.js"></script>
<link rel="stylesheet" href="/lib/js/thickbox/thickbox.css" type="text/css" media="screen" />

Beacuse Thickbox plugin uses $(document).ready in itself, you shoud setup anchar tag before loading thickbox.js.

I developed a jquery plugin called jquery.newtooltip.js which is a revamped version of jquery.tooltip.js. It has been added some option, such as on/off handler, AJAX supports.

Hear is a working example.

By seting up as follows, every tags with title attribute obtains the ability of showing tooltips, and this is the easiest way to use newtooltip.js.

// Easiest way to use
$(document).ready(function(){
    
    $('.target').tooltip_setup();
});

Options(following values are default)

// Options
$.tooltip_setup({
    in_json     : false,        // use of json format
    auto        : true,         // use of title attribute
    handler_on  : 'mouseover',  // handler for showing tooltip
    handler_off : 'mouseout',   // handler for hiding tooltip
    track       : true,         // tracking mousemove
    fade        : 200,          // fade(msec)
    top         : 15,           // vertical distance from pointer
    left        : 15,           // horizontal distance from pointer
    id          : "TOOLTIP"     // ID for tooltip
    auto_css    : true,         // activate default CSS
});

newtooltip.min.js
PACKED File.

newtooltip.org.js
UNPACKED File.

I've been interested in so called BTS or Bug Tracking System these days, and found there exists huge amount of BTSs around the world. I tried right and left of them. Trac seems to be a good one for various use but not acceptable for Non-IT department. From this point of view, I think Bug Tracker is reasonable.

For my human environment, It'd be nice if the menu and some messages was shown in Japanese, but this feature is not supported for current version. So I prepare a Jpanaese language file as follows.

string.ja

This can be installed quite easily. Following is the direction for installation quoted from the official document.

For example, if you would like to add a string file for Japanese, just copy setup/string/string.en to setup/string/string.ja and translate into Japanese.

After finishing the translation, use your browser to connect to http://your.domain.com/bug/setup/string.php. You might have to change the URL according to the location of Bug Tracker.

The usage in translation may not be correct or appropriate enough. Any suggestion, send a comment on this blog so that the file would qualify to be included in the next version.

This blog works with following Perl module.

NudeableType

Here is the documentation. I'm working on it and not done yet.

By the way, I'm looking for career change. The purpose of this exhibition is just to demonstrate my ability of software developement. I don't think the module is something new or suitable for anyone of you.