Prework starts on Monday

Just a short update that the official pre-work for the Brazil 13 team in Belo Horzionte will start on Monday, May 14th. There are 15 team members from 11 different countries, grouped together in one #ibmcsc brazil team….

Hierarchical WordPress pages menu

For a Web project I am working on I wanted to use WordPress as a CMS for flat pages only. No blog posts, no categories, simply a hierarchical page tree (too complicated for the user). Thus I installed the CMS Tree Page View plugin, set some permissions and tried to render a hierarchical menu in the navigation bar of the Web site.

Well, I tried. It is not as simple as it seems to render a hierarchical menu in WordPress that does the following:

  • always display all top level (root) pages
  • always display the current path down to the current page
  • always display all child pages of the current page
  • always display siblings of the current page

This is pretty much the behavior I’d expect from a hierarchical menu in a CMS.

Unfortunately it seems this is not very easy to implement in WordPress. The wp_list_pages function with all its options does not allow to render a page tree that goes up to the top level. And none of the samples on the page is the right solution (on a side note: the advanced samples on the page are not targeting the latest WordPress releases and won’t work out of the box as they target the wrong database tables) – they render the current parent page or siblings or… something.

Anyhow, here is a short snippet that provides a hierarchical page menu in WordPress, simply add this to the template where ever you would otherwise just have the call to wp_list_pages:

I hope this helps someone who runs into the same issue… and – if there is a better, simpler solution that I did not see or find, please leave a comment!

;;⁏⁏ ;;⁏ ;;;;;;⁏⁏;⁏⁏⁏⁏

Finally, there is a programming language that consists of only semicolons:

See the homepage of Semicolon to see what the above prints…

(Thanks to Vlad for sharing – yes, this might end the stupid question if there should be a Semicolon or not in JavaScript…)

It feels like doing stuff

What did you do today? Did you really accomplish anything? Or was it “stuff” that did not bring you forward?

I all these activities “time eaters”, and thanks to the Internet it is very easy to spend a lot of time doing basically nothing… filling your brain with “stuff”, with useless Facebook entries and pictures on Pinterest. Would’t it be better to focus on the real world instead? On the one with real people, real friends, real problems? (Are they really problems?) And the real fun? Just an idea…

Anyhow, I’ll stop writing here now, I have to check out what’s new on Facebook…

Image (c) Joy Of Tech

A few words on the rich and the poor

A few words from Dan Millman:

Most of us have heard the chatter about the 1% and the 99%, referring to the 1% as “the wealthy elite or super-rich — bankers, hedge fund managers, and so forth — and the 99% as the “rest of us.” So I offer following reminders:

We in the developed world forget how wealthy we are: From a global perspective, anyone who earns more than $34,000 a year is part of the 1%. Even if you’re currently unemployed — even if you’ve experienced economic setbacks or hardship — you’re probably not scrabbling in barren soil, trying to grow a few crops, or searching for drinkable water, or searching for a few bites of food for yourself or your family. You’re not likely among that half of the world’s population making less than $1.25 a day. You probably have shelter, clothing, and enough to eat. Even if you’re going through a rough patch, you have reason to hope for, and work, for a better life and improved conditions.

Especially true for us in Austria. So do not waste your time complaining but use it to change your environment for the better…. just some thoughts…

Reset a ThinkPad USB Portable Secure Hard Drive

I am using one of those hardware-encrypted disks that have a keypad on it and need you to enter a 8-digit keycode before they show up as disk on the computer… Should be fairly simple, but somehow I managed to destroy the disk multiple times.

The behavior is that neither Windows nor Linux or Mac OSX even recognize that the disk is attached to the computer (no entry in the syslog, no lsusb entry, nothing). Tried USB and eSATA. Same result. On multiple machines. How to replicate? No idea, it somehow just happens.

So if this happens, here is how you reset the disk (but be aware, all your data will be gone!):

  • Press the red “x” key while attaching the drive any power source. The LED will flash blue and red.
  • Press and hold the red “x” + the green “lock” + “2″ for 10 seconds – until the LED will turn green for 3 seconds.
  • After the drive has been reset the combination to unlock will be 12345678.

That worked. But what’s scary – the drive is now sometimes detected *once* so it can be repartitioned and reformatted, but as soon as it is plugged in somewhere else it is not being detected. Same on the computer that just formatted it. But as I said, only happens sometimes…

So be aware, those disks might have some bug that might eat all your data…. but you have a backup, right?

Image (c) Lenovo

SASS and reactive CSS rock

As some might have noticed I recently launched another site and this blog also has a new design since a few weeks now. In both cases I used the redesign and the creation to learn new technologies and I want to share some thoughts and tricks here.

feelinghands.at as seen on the iPhone

HTML5

For both designs I used HTML5 but tried to be as backwards compatible as possible… this meant that I used <div>-tags inside the new tags (i.e. <header> or <footer>). While this is not really beautiful it works fine in all major browsers (and yes, I dumped IE6 support, no-one should care about this browser any longer!).

Overall using the HTML5 structural tags without using them in the CSS does not really make sense, but the tags are there in case they are needed in the future. Or in case Google wants to see them. The HTML5-DocType works out fine and as I said above, the sites work in all browsers without any problems related to HTML5.

SASS

While I am more a programmer and not so much a designer I really enjoyed working with SASS. Basically SASS is a CSS preprocessor, and each CSS file is also a perfectly valid CSS file. By using SASS the developer can use variables, nesting, functions (called mixins) and a few other tricks that make working with CSS actually fun.

So all $color: #fff; definitions end up on top of the file and the variables can be used throughout the code. Code is properly nested and through the indention it is easy to spot the level of an element. //comments can start using double-slashes, files can be imported etc. etc. I highly recommend checking out the SASS homepage and I swear you will love SASS for CSS! No more project without SASS!

mbaierl.com as seen on the iPhone

Reactive CSS

The new designs are reactive, which means that they adopt themselves on mobile devices with a smaller screen. You can see some sample screenshots of mbaierl.com and feelinghands.at as they would look on an iPhone in this article on the right hand side. All of this is done only with a single CSS file (or multiple ones that are imported using SASS), so there is no different HTML structure or different URL to use for the user. It simply works out of the box if you visit the site.

To achieve this effect all you need to do is to override styles within an @media query:

The above query will target i.e. the iPad and all CSS rules within the @media query will only apply for screens smaller 700px. If you also add this rule:

it will target the iPhone, so the same CSS file can contain iPhone, iPad and Desktop rules.

As a special hint, if you want to have high resolution icons for the iPhone 4 Retina display or the new iPad you can target those devices using this rule:

That way the images will show up sharp and not blurry on devices with a Retina display.

Another very neat trick with SASS is inheritance…. to make my designs reactive I had to reset tons of positioning I did for the elements on the page… doing that manually would have been a pain so I created a .mobileReset class and extended from it in all absolute positioned elements, i.e.:

Within the @media section for the mobile devices I declared the .mobileReset class:

SASS will now do the right thing and add all elements that extend the class to the .mobileReset definition within the @media query, effectively resetting all positioning. This allows me to define the mobile classes independently of the elements.

I can’t close this section without writing about possible drawbacks of using reactive CSS – file size and downloads. Of course adding more and more styles will increase the overall CSS file size, but this should not be that much of an issue any longer (research shows that the download of a 10k vs. 12k file does not really matter that much). However, the mobile device will download and cache all your images, so even if they will never be shown on the mobile device, the files are still downloaded. And the number of hits has a huge impact on the performance of a site. So make sure you do not use too many images and use CSS sprites where possible.

Conclusion

If you build a new site there is absolutely no reason to *not* use HTML5. It is ready for mainstream, and if you only use it to have a shorter DOCTYPE – use it.
Also for new and even existing sites I highly recommend the use of SASS – it makes CSS development more fun than it is (no, does not save you from the cross-browser hassles, but at least there are variables and routines and nesting and imports…).
And for reactive – if the site does not have a dedicated mobile site it is a great way of giving your mobile users a better experience, so there should also be no excuse for not building in at least a few rules for mobile devices so the site looks good on those devices too!

Legacy code

Recently, on top of a file:

Somehow it reminded me of this Dilbert… fixing 12 year old code is not really fun, especially if basically everything changed since then (Operating system version, Perl version, Oracle version etc. etc.). But anyhow, it worked…. 1 line of code fixed the issue, took 2 days to figure it out….

Comic (c) dilbert.com.

rpm quick hints

As I am recently dealing a lot with rpm I want to share some useful commands:

To view a list of files within an rpm file use:

To extract the files from the rpm use this command

(use cpio -t to list the files)

To extract the pre/post install scripts from the rpm use:

Happy hacking & have fun with rpm!

Multiple Tomcat instances on RHEL (rpm-installed)

Usually Tomcat is really simple to handle – download, extract, start and forget about it. If you need multiple instances of Tomcat on the same machine for performance reasons (if i.e. the database or the file system is the bottleneck) then you usually simply copy the extracted tree, modify some config (server.xml to have different HTTP ports), start it and forget it.

However if you want to rely on the standard rpm (“yum install tomcat5″) this approach does not work very well – the rpm install distributes the tomcat files across the file system. Some parts are in /usr/share, some in /etc/ and the logs are of course in /var/log/. So how do you modify this system to be able to run multiple instances and also benefit from updates that Redhat releases? (And btw, this guide should also apply for other systems, i.e. Ubuntu or CentOS.)

Here is how to do it:

  1. Copy the config files from /etc/tomcat5 to this folder: /etc/tomcat5.1
  2. Modify the /etc/tomcat5.1/server.xml to have unique ports
  3. Create a log directory: /var/log/tomcat5.1 and make sure the group is set to tomcat
  4. Create cache directories /var/cache/tomcat5.1/temp and /var/cache/tomcat5.1/work and make sure the group is set to tomcat
  5. Create a copy of the /usr/share/tomcat5 directory as /usr/share/tomcat5.1 and modify the symlinks in there to point to the newly created folders (conf, logs, temp, work) and remove the bin/ directory and symlink it to /usr/share/tomcat5/bin
  6. Copy /etc/sysconfig/tomcat5 as /etc/sysconfig/tomcat5.1 and replace all instances of “tomcat5″ with “tomcat5.1″ within that file
  7. Copy the /etc/init.d/tomcat5 as /etc/init.d/tomcat5.1 and  replace all instances of “/tomcat5″ with “/tomcat5.1″ within that file

Once these steps are executed you can start the new instance using “service tomcat5.1 start”. This works for any number of instances and will share the Web apps as well (so no multiple deployments needed) and should improve performance if you use Apache + mod_jk in front of Tomcat.

Older posts