kott.fm/tomek/

Publish on Gallery 3 v1.1

Tomek — Sun, 08 Apr 2012 02:55:06 +0000

With Kevin’s posts about a firewall setting that prevented the internet check from working in the plugin, I have recoded the check to simply look for a response from the online gallery. If the response is received, the computer is deemed connected to the internet. Download the new install file here. I suggest that you uninstall the previous version first.

XMP Module Version 1.3

Tomek — Sat, 28 Jan 2012 20:51:10 +0000

I’ve released a new version of the XMP module due to a request by a user. You can now select to use the photo’s “caption” metadata to populate the title of the uploaded photo in Gallery. Download it here.

Publish on Gallery 3: Out of beta!

Tomek — Tue, 03 Jan 2012 16:03:57 +0000

Having fixed a bug with the help of Quirin in the forums, I’m releasing Publish On Gallery 3 as a “1.0″ piece of software. The bug fix was to deal with some different URL rewriting conditions that were causing a connection attempt to fail. The method proposed by Quirin was much more general and should work for more rewriting rules.

Automatic Category Lists in FarCry (a la WordPress)

Tomek — Sun, 04 Sep 2011 13:56:07 +0000

In this tutorial, I want to share how I went about using the tag from FarCry, combined with a custom function, to create an archive of similarly categorized items. This culd be considered similar to WordPress’s category or tag view, in which all the posts matching the category are shown. I’ve extended this idea for FarCry by allowing any number of different types to be shown.

Finished Product

Let’s take a look at the finished product first. In this screenshot, I’m showing news (dmNews) and events (dmEvents) that match the category “Free”. Additionally, in order to ensure that the page is not overwhelmed, a max of three results are shown on the ‘landing’ page. The rest of the events can be seen on a separately loaded page. Let’s get started!

Overview

In order to make this work, there are only a few pieces that are necessary. First, there is the “displayTypeBody” view for “dmCategory”. If you’re unfamiliar with the naming scheme for webskins in FarCry, I suggest looking here.

Second, there is the “displayBody” webskin, which will dictate how each specific category shows its results. This is where the brunt of the work is found.

Finally, there is the custom function, which will map some generic fields found in the “displayBody” webskin to the specific properties of the types we want to show.

Note that this is only one way to set this up, and which I chose in order to minimize the number of webskins that had to be coded. However, the more proper “FarCry way” would be to also have webskins, let’s call them “displayTypeCategory”, which will call “displayTeaserCategory” for each the types that we want to show. This would obviate the need for the custom function that I will set up, at the cost of having many more webskins to upkeep. It’s a trade-off.

Setting up dmCategory

First, let’s set up the two webskin files for the category type. First comes the “type webskin.” As a quick refresher, this is the one that should display multiple categories. Here, due to a feature enhancement I filed and which was adopted, we can simply use the tag with a category UUID instead of a dmNavigation UUID.

The code for this skin is super simple:

Basically, we do:

Specify name & cache parameters
Import tags we need to use
Make sure the URL parameters are present
Get the UUID of the root category
Display the categories as an unordered list

Next up, we set up the displayBody. Remember, this is for a particular category, so we need to decide how to go about displaying the information in a nice manner. Let me post the code in chunks, explaining as I go.

First, we specify some caching options, and load up the tags we will need later

Next, we set up and get default values for the url parameters. Namely, we need to know how many results we should be showing, whether we should be showing just one type or all of them, and we need to get the current friendly url so we can put together links easily.

Then, we check if there are any child categories for the one we are looking at, and if there are, we display them here so that users can drill down if they want to.

Category: #stObj.categoryLabel#





    Filter
Currently showing results for this categories
    and all sub-categories. Click on the sub-categories below to filter
    the results.

Finally, we hit the brunt of the logic. Here we get the data for each object, and place it in a structure that comes from the custom function (see the next section). Once all the objects have been found, we display them using some cfoutput, information from the custom fields. This is where, if you were following the “FarCry way”, you would probably not have the custom function, and instead of this piece of logic, you would simply have a webskin “displayTypeCategory” or something similar for each of the types nominated, and put the display logic there.


Categorized Items





    
    
        
    



    
        #stResults[type].name#
        
            Only showing newest #url.results# results. To show
            all #stResults[type].q.recordCount# results, click
            here.
        
        
            
        
        
        
            SELECT * FROM qTemp
            WHERE status in (#listQualify(request.mode.lvalidstatus, '''')#)
            ORDER BY #stResults[type].date# DESC
        
        
            
            #q.title#
            
                
                #q[teaserName][q.currentrow]# More about: #q.Title#
            
                More about: #q.Title#

Custom Function

The custom component (which I put in my packages/custom folder, and load into the application scope during the initialization process), has the following function.

As you can tell, it is straightforward: simply map normal names (date on which to order by, a nice name, whether a teaser is present, and what the category property is called) onto some properties so we can call the easy names without thinking about what we’re doing.

Download

Download the three files that go into this solution here, and put them in the projects folder (I think I got the folder structure right!).

For the next tutorial, I plan on discussing adding an automatic “Related Items” section to news and events items, based in part on the custom function outlined above. Stay tuned!

Seamless computing using Windows devices

Tomek — Wed, 31 Aug 2011 00:52:14 +0000

Now, some of the actions in this blog post / video are a bit hokey, but the idea of being able to seamlessly go from Windows Phone to Surface to Slate just sounds awesome. This is where Microsoft should spend … Continue reading →

Gmail copies Outlook

Tomek — Sat, 27 Aug 2011 23:50:31 +0000

This made me laugh when I saw it. Yup, gmail is gaining the ability to “preview” your email:

Sometimes, though, I want to see more than snippets, which is why I’m happy to announce that you can now preview messages in your inbox using a new feature in Gmail Labs called Preview Pane. It’s probably a very familiar layout to those of you who have used Gmail on a tablet device.

Sound familiar? Because hey, it seems like Microsoft actually knows what they’re doing with the whole email thing. Who would’ve known.

HTML Editing in Fossil: Tickets, Wiki, Comments & Events

Tomek — Thu, 25 Aug 2011 02:27:48 +0000

Do you want to use an HTML editor in Fossil, would like semantically correct code that is sanitized appropriately, but don’t want to clutter up your repository with useless javascript, css, and image files? Well, here’s a guide especially for you!

If you’re only interested in the skin configuration for the solution (including the ‘google code’ type styling in use on my repositories), jump here. If you’re interested in integrating things into your own skin, download this zip file, and then follow through the tutorial!

How to include png/gifs in CSS

Your first question, and the most relevant one, is how to have a nice icon based ui without resorting to any image files. For those that are smarter than me, they would have already muttered something about “base64″. For those that are as smart as me, we all turn to searching the web.

Apparently, it’s fairly straightforward to embed an image into CSS, HTML, or JS. When I searched, I found this StackOverflow posting, which then led me here, which is where I got the text data for the images I needed. Once you’ve translated a given .png or .gif file into text data, you can include it in CSS with something such as:

.teheader {
	height:31px;
	border-bottom:1px solid #bbb;
	 background:url(data:image/gif;base64,R0lGODlhAQAgAJEAAO3t7f///+vr6/Ly8iH5BAAAAAAALAAAAAABACAAAAIIzI6pIO3/QgEAOw%3D%3D) repeat-x;
	padding-top:1px
}

The above is actually taken from the solution’s css file. Now that we’ve got a method for ignoring gifs/pngs completely, we can move onto the javascript necessary for a full fledged WYSIWYG editor.

TinyEditor

When I was looking for bare-bones javascript editors, I first came across SpeckEdit. However, that seemed to not be very new, and I had a bit of trouble getting it to work right with two textareas on a page (such as the “Event” edit page in Fossil).

I then found “TinyEditor“. It looks nicer than SpeckEdit, and had a few more options, so off I went to integrate it! Really all I had to figure out, once I fixed one minor bug, was how to call the editor for each text area on an appropriate page (Events, Wiki, Tickets, etc.) and ensure that the “Submit” and “Preview” buttons properly picked up the changed text.

"Admin" Section of the Fossil UI

Let’s start integrating. To begin with, open up the header setup (under “Admin”, see image), and in between some “

Note that there are several configuration options you can choose when launching the editor, including height and width, among others. Take a look at the script home page for more details.

Now, go to any user page where there is a text area (such as the Wiki Sandbox or Events), and see your hard work:

TH1

For those that are curious, let me explain the “TH1″ script that is included above:

 if { -1 != [ string first $current_page "tktnew tktedit wikiedit wikiappend eventedit ci_edit" ] } { Html "…" }

First, we have to make sure to launch the TH1 interpreter. This is done by calling the tag “”. Naturally, we need to close the tag as well. Then, there is the overarching if statement:

If { expression } { do something }

The expression in this case really boils down to the following:

[ string first $current_page "tktnew tktedit wikiedit wikiappend eventedit ci_edit" ]

The “[ ]” tells TH1 to treat everything inside as a single command, and return that value to the next piece to be interpreted. That is, in the “-1 != […]” expression, TH1 would first interpret […], and then check “-1 != …”. Inside the square brackets, we have:

string first $current_page "tktnew tktedit wikiedit wikiappend eventedit ci_edit"

$current_page is a global variable available throughout Fossil that basically gives you the string corresponding to the first part of the url you are at. So, if you are at http://127.0.0.1:8080/eventedit, then $current_page is “eventedit”. Then, there is the expression

string first needle haystack ?startindex?

Citing straight from the TH1 manual.

The string first subcommand searches argument haystack for a sequence of characters that exactly match the characters in argument needle. If found, it returns a decimal string with the index of the first character in the first such match within haystack. If not found, it returns return -1. The optional integer argument startindex specifies the position where the search begins; the default value is 0, i.e. the first character in haystack.

So, if the current page is in any part of the list given, then the if statement will do something. Otherwise, nothing will happen.

Finally, the “html” part simply says, treat the string in quotes as an HTML string, and therefore do not change “<” to < etc. The on caveat is that the TH1 special characters “,{,},[,],$ are all interpreted, so they must all be escaped using the backslash. It comes out fine the other end though, without the escape characters.

Bug Fix in TinyEditor

There seems to be an error in the tinyeditor.js: edit.prototype.toggle function. The first part of the if statement has this bit for replacing “em”s with a style attribute, but it should be:

style="font-style: italic;"

not

style="font-weight: italic;"

Known issues

There is only one deficiency in the above method. By default, a “return” or “enter” will not start a new “

” tag, as should be proper in HTML. Instead, it will simply insert a “
”. While frustrating, it does not break it’s use for me, so I’ll happily use the WYSIWYG editor.

The Fossil config file

If you would rather just download the config file, here you go. Simply issue a

fossil config import tinyEditGoogleSkin.config

in an open repository, or

fossil config import googleSkinHighlight.config -R repositoryName

for any old repository. You can also use “fossil config merge” to have fossil attempt to merge your existing config with the one you’re importing. Your mileage may vary.

f.bat or f.exe: sometimes just use the easy solution

Tomek — Mon, 22 Aug 2011 23:45:21 +0000

This was supposed to be a short topic about running fossil from the command “f”. I mean short – like a paragraph introduction and then some code and bam, done. But noooo, I had to try to out do myself. First, why would I want to use “f” instead of “fossil”? Because I’m lazy. Pure and simple.

The aborted attempt

Using windows, the obvious thought occurred to me: “I’ll just create a shortcut!” Err. No, that doesn’t get recognized from the command line. The correct solution, of course, is to open trusty, trusty notepad, type in:

fossil %*

and save it as “f.bat” in some findable directory (I put it right next to fossil.exe). The “%*” above simply says, pass all command line arguments on.

That almost works. The problem is when you run “f ui” and then when you’re done, you want to kill the UI, so you hit CTRL-C:

Oops, you have to answer a question.

The better fix

The better solution is to fix the command line starter program, and create, in effect, an alias to “fossil”. On a UNIX machine, this would be easy — modify your “.bashrc” file with an alias command, and off you go. Not so simple in Windows.

Namely, under Windows, you must specify in the registry that you would like a file to be run every time you start the command prompt. As a rule, I avoid mucking around the registry myself. I figured there had to be a less prying way to do so.

Then it dawned on me, shortcuts! You see, if I start cmd.exe from the start menu or a shortcut, I can specify the effective command line parameters! So, let’s get started!

Open the start menu, and right click on “All programs”:
Click “Open” to open up the start menu as an explorer. Go to the “Accessories” folder, and right click on “Command Prompt”

and then select “properties”:
Append “/k autorun.bat” in the “Target” box. This will automatically look for a batch file named “autorun” in your home directory and call it when you open the shortcut. Now you’ve got your “.bashrc” equivalent!
The contents of autorun.bat are simple:

@doskey ls=dir $*
@doskey f=fossil $*

The doskey command is a combo of “alias” and normal scripting. The “@” above simply silences the printout of any response from the command line, so you start with a nice empty command line.

There, all done!

The really easy way

There is an easier way, since fossil is such a small executable. Copy fossil, paste fossil, rename “f.exe”. Done.

But I like the hard ways better anyway…

Updating my style

Tomek — Thu, 18 Aug 2011 02:01:35 +0000

Another summer almost gone. I got back from vacation a couple of weeks ago, and looked over this blog. I realized that when I started, I had meant to do a whole bit on integrating bbPress and Hybrid together into one kickass package. A year later, nothing had happened — it was time for a change.

As you can see, I’ve updated the blog to be more stylish. I did this in a simple way: updated to the default WordPress 3.2 theme: TwentyEleven. Then, I got rid of the header images. And that was it. Well, not quite. There were a couple of issues left to fix:

WordPress sidebar on single blog posts
Styling bbPress to look like the default bbPress supported TwentyTen theme.
WordPress sidebar on anything related to forums
Updating to the highlight.js syntax highlighting plugin: aka shortcode hell

WordPress Sidebar

The first thing I noticed when I changed the theme over to TwentyEleven, was the lack of the sidebar on single post pages. I can understand that — no distractions for the reader. However, considering how much info is generally held on the sidebar, I also found this puzzling. Apparently, though, so did a lot of other people.

I found two generic approaches, and at the moment, I’m actually using the first one:

Change the single.php template file, add some CSS.
Drop the ‘singular’ class from “the Loop,” thus avoiding the problem in the first place. The necessary change is described very well over at FutureWeb, and essentially get’s rid of the ‘singular’ styling on web pages.

If you’re interested in the first option, the longer answer is to create a child theme^[1], copy the needed template over, and modify it so that it overrules the parent theme. The necessary modifications are described here, but amount to adding a “get the sidebar” function to the template (that seems straightforward) and then adding some css code. The same had to be done for the “page.php” template file.

Styling bbPress

A year has gone by, and bbPress is now simply a plugin for WordPress. I’m fine with that — all I need is a forum type place for debugging and question answering for my plugins. There was only one last problem — the super ugly way that bbPress was now being styled due to a lack of compatible code in the TwentyEleven theme.

So, I set about fixing that. Basically, all I did was the following:

Create a child theme (partially done already above)
Copy all the theme files over from the bbPress themes folder
Change a few settings in the functions.php file
Figure out FF vs. Internet Explorer issues…

In the functions.php file, I deleted the following function:

if ( ! function_exists( 'bbp_twentyten_setup' ) ):
/**
 * Sets up theme support for bbPress
 *
 * If you're looking to add bbPress support into your own custom theme, you'll
 * want to make sure to use: add_theme_support( 'bbpress' );
 *
 * @since bbPress (r2652)
 */
function bbp_twentyten_setup() {

	// This theme comes bundled with bbPress template files
	add_theme_support( 'bbpress' );
}
/** Tell WordPress to run twentyten_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'bbp_twentyten_setup' );
endif;

and the “else” part of the css function:

else {

	// TwentyTen
	wp_enqueue_style( 'twentyten', get_template_directory_uri() . '/style.css', '', $version, 'screen' );

	// bbPress specific
	wp_enqueue_style( 'bbp-twentyten-bbpress', get_stylesheet_directory_uri() . '/css/bbpress.css', 'twentyten', $version, 'screen' );
}

Finally, I added the following code:

add_action( 'after_setup_theme', 'my_child_theme_setup' );
	function my_child_theme_setup() {
	add_theme_support( 'bbpress' );
}

Firefox vs. Internet Explorer

FireFox
Internet Explorer 9

What fixed everything is to get rid of the auto css loader from the added bbPress functions.php and simply include it inline in my style.css. There were two problems: one was that I was looking at the site in FireFox as a user, and in IE as an admin, while the other was an ordering issue^[2]. The above fixed both.

Forums Sidebar

Turns out by the time I started looking at how to add the sidebar to a topic, it seems that my changes from single.php and page.php did the trick! Woohoo, nothing to do!

Highlight.js and Shortcodes

First, I need to make an admission: I got sucked in by WordPress shortcodes. Huh? Turns out, I’m not the only one.

Let me explain. You see, a good portion of my entries deal with something related to coding. Hence, I need to add code to my posts. When I was first starting out, I found a WordPress plugin for highlighting, and away I went. Except that instead of relying on the HTML normal “

” sequence, it relied on the short code “[pre]“.
That didn’t bother me until I decided to change to the highlight.js library (as evidenced by it’s use in fossil). I go to the WordPress plugins, search for highlight.js, and here we go: WP-highlight.js. Oops, one problem — it requires “
”. So, now I was left with a shortcode that wasn’t useful. So, off I went to update all the posts by hand form “[pre]” to the proper html equivalent.
On an implementation note, I have found that specifying “haskell” for snippets from a command line (using 
), such as
fossil commit -m "commit message"
makes things appear nicer than just plain or “bash” styling. Go figure.
Final Note
This blog post actually took about two or three times as long mostly because when I kept looking for what I had changed, I realized I wanted to do things differently, and therefore had to change the blog post around, and then I would find that I had broken something, so I would need to fix that, and then the blog post…. It should all be correct now though!
^[1] WordPress documentation I think is very good to introduce the concept of child themes, so I won’t do it here. If you have any questions, ask away! ↩
^[2] Mind you, IE9 wasn’t doing anything wrong… I was just assuming that things worked the same.. Stupid assumptions ↩



Highlighting Code & Diffs in Fossil’s UI
Tomek — Thu, 23 Jun 2011 20:05:11 +0000
In a previous post and associated email on the fossil-users list, I had promised a write-up of how to get nice diff highlighting. Considering how long ago I wrote that post, I think it is obvious I might have forgotten about it. A recent email chain on the same list snapped me out of it. Thanks to this response to my original fossil styling tutorial on the user list, you will find a simple solution that doesn’t require committing anything to your fossil repository that will highlight your source code and your diffs.
Highlight.js
The javascript library that I chose to use is “highlight.js“. I looked at a bunch of different options (including jQuery based ones, SHJS, etc.), but settled on highlight.js for two very simple reasons:
all you need for all your highlighting (of 40+ languages) is one 24kB javascript file, and any associated css you would like. It fits the bill exactly when looking at integrating it into fossil. ^[1]
It automatically guesses the language that you are displaying and changes the styling accordingly
The one drawback is that highlight.js expects the code to be placed in “
”, rather than the single “” that fossil uses. We will take care of this later through some more (easy) javascript.
Thanks to Ivan’s comment, I took another look at the js code, and something clicked this time. There is, in fact, no problem with going with just the  tags. The javascript to put in the footer has been updated to reflect this.
So, download the highlight.js zip file (version 6!), and expand into any directory. We won’t actually be copying the files, so as long as you can open them in a text editor, we’re all set!
Changing your Fossil Repository
In fossil, we will be keeping things as simple as possible. For me, that means no committing some “/www” folder to the repository, and using the available “/doc/tip/www/*” url scheme that is available in fossil. Instead, we will be copy & pasting directly into the header and footer parts of fossil admin.Open the fossi web interface (“fossil ui”), and click on over to “Admin” and then “Header”.
Open the “highlight.pack.js” file in any text browser (somewhere you can copy from).At the bottom of your  tag, copy in the javascript form the packed file between some 
Make sure to hit “Apply Changes”
Finally, we need to make sure that everything is styled properly. Highlight.js comes with several css files for styling the generated output. I personally like the github style, so I used that. Pick one of the files and open it in a text editor.
Go to “Admin” > “CSS”. At the bottom of the text box, simply copy in the entirety of the relevant css file. Hit “Apply Changes”
 Note: for those of you who are using the “Google Code”-esque style that I described in my previous post, you will need to make some changes. Namely, that css has a bunch of “.title” css descriptors. However, that same CSS class is used in the context of “pre code .title”. So, to separate the two, go through and change every instance of “.title” to “div.title” where it is not part of the “pre code .title” blocks.
Done! As a bonus, there was no need for committing anything. Here are some examples from the XMP repository:
 PHP source highlighting:
 
 Diff highlighting:
 
Please let me know in the comments if you find anything wrong with the above instructions!
Fossil Repository Template
Since I like my Fossil skin & highlighting set up, I don’t want to go through the trouble of adding it to every new repository that I create. So I set up a template fossil repository. Everyone is welcome to clone it anonymously:
fossil clone http://kott.fm/cgi-bin/fossil/template template.fossil
Finally, you can download the skin with associated highlighting code.  (Unzip it) This is a combination of the Google Code-esque skin + the highlighting. I’ve corrected for the CSS title problems. Import it into your existing repository via
fossil config import googleSkinHighlight.config
in an open repository or
fossil config import googleSkinHighlight.config -R repo.fossil
if you don’t have your repository “repo.fossil” open.
^[1] You can choose which languages to include in the packed file. If you only want one or two specific languages, then the file will be smaller! If you want all supported languages, the file weighs in at 94 kB ↩