Category ‘Web Development’
GeSHify has moved
My syntax highlighting extension for ExpressionEngine has moved to a new home:
My syntax highlighting extension for ExpressionEngine has moved to a new home:
Posted in Web Development | No Comments »
GeSHify, the syntax highlighting extension for ExpressionEngine has been updated.
I updated my ExpressionEngine extension GeSHify. New features are a French translation (thanks to Fabien Amann) and a German translation (which I did myself). Packaged with GeSHify 0.3.6.1 are GeSHi 1.0.7.22 and GeSHi 1.1.2alpha4dev (both checked out from the release branches of GeSHi’s SourceForge.net Subversion repository).
Since I switched from getting the releases of GeSHi manually to using svn:externals definitions I no longer have to download the GeSHi releases manually — they will be pulled from the SourceForge Subversion servers on every update. Using this technique it is technically possible to automate building new GeSHify packages as soon as a new GeSHi version is released (and I will probably set this up soon).
Proceed to download.
Posted in Web Development | No Comments »
A List Apart has published the 2008 survey for people who make websites. If you work in the web business, you should go ahead and take the survey as well.
Posted in Web Development, Personal | No Comments »
RFC 2177 defines IDLE, an extension to the IMAP protocol allowing mail clients to change into an idle mode while keeping the TCP-connection open. This allows the servers to notify the clients of new mails on arrival (the so-called push e-mail).
Not all e-mail providers support IMAP IDLE, though – you should check whether your mail provider supports it by opening a telnet connection to the IMAP server (standard port for IMAP is 143) and sending 001 capability. If the answer contains „IDLE” your server supports IMAP IDLE.
GMail for example answers
* CAPABILITY IMAP4rev1 UNSELECT IDLE NAMESPACE QUOTA XLIST CHILDREN XYZZY
001 OK Thats all she wrote!
There's one thing to look out for, though – Thunderbird only sends the IDLE command (effectively enabling push e-mail) if you disable the „check for new mail every nth minute”-option. I could not find any documentation on that feature – however using Help » Mozilla Thunderbird Help causes a 404 File Not Found error for me anyway (using the German version of Thunderbird).
Steve Jobs would say: „Exchange for the rest of us” – using GMail, IMAP and Thunderbird.
Posted in Web Development, Personal | No Comments »
There’s a certain trend in so-called web 2.0 design to have ever bigger icons for RSS feeds (What are RSS feeds?).
Now I recently saw an RSS icon that beats the pants of all other RSS icons I’ve ever seen before: ImageShack’s RSS icon (screenshot):
![]()
This icon is a whooping 403 per 336 pixels large - that’s 135,408 square pixels!
Posted in Web Development | 1 Comment »
You register for a new service, type in all your details, choose a password - and after 16 characters the password field stops accepting your input.
Whenever I see a password field that’s limited in it’s length I loose some trust in the organization providing the form. Why? Because the only valid reason I see to limit the length of a password is unencrypted or reversible encrypted storage. This requires some insight knowledge on how data is stored in databases: when defining a text field you usually have to choose it’s maximum length - obviously you could just choose whatever maximum length was possible, but that’s not the point of a well designed database. It would take me too long to explain that here, but there are some reasons why you certainly wouldn’t want to define fields longer than needed.
There are several different approaches to password encryption; the first and probably worst method is no encryption. It’s advantages are that you will be able to mail the password out to the user in case he forgets it and that it doesn’t require a lot of storage (estimating the average password length at about 10 chars from personal experience here). However it’s downsides are huge: in case you have some security flaw in your application all passwords will be leaked.
The second way is to use some encryption algorithm, e.g. AES or DES (those two might be a bit overkill, but there’s others). Strings encrypted with such an encryption algorithm generally tend to use up a lot more storage than the unencrypted string. You still have the advantage of being able to send the password to the user and if your database is leaked, the passwords will still not be decryptable (as long as the encryption key isn’t leaked).
However, there’s a better solution: hashing the password will give you a fixed-length string (which is great if you’re working with databases) from a variable-length string (=password) and it’s non-reversible. Theoretically you’d be able to calculate a so-called “collision”. Because a hash function is mapping an endless amount of strings to a finite amount of hash values there’s multiple strings with the same hash value. However given a certain minimum length of the password (which can be enforced by padding the string with random data you also store, the so-called “salt”) the effort to calculate such a collision is that large that it’s virtually impossible to hit one while your site is online (assuming you to re-setup the system once in 100 years here). Maybe you’d ask how to compare passwords on login if they’re stored using a non-reversible encryption? Actually you wouldn’t. You would instead hash the password the user entered with the salt stored for the user and compare it to the stored encrypted password. That way the unencrypted password is never in the server RAM and not in any log files either.
And what if a user forgets his password? Well, instead of mailing him his password, you could just generate a new password, encrypt it, store it into the database and send the new password to the user.
Also the hashing method allows you to enter virtually every character regardless of things like the encoding the database uses internally. Because hashing functions work with binary data and usually return a string using 0-9 and a-f (which are always the same in any encoding relying on ANSI) there won’t be any problems with the database encoding to deal with either.
So, why is there still services not allowing long passwords and all characters in passwords?
Posted in Web Development | No Comments »
9-slice scaling is a technique from Adobe’s Flash product line and has been adapted into Fireworks. It is used to scale certain parts of a symbol different from others when resizing the symbol (i.e. not scaling the corners at all) to make corners and borders look the same at every size of the symbol. With a little CSS and HTML this can be done in browsers, too.
The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:
First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):
![]()
Here’s the HTML you’ll need. Read the comments in the code for explanation.
<div class="content"> <!-- this is the overall container --> <div class="content-top"> <!-- this contains the top left, top right and top center slices --> <div class="content-top-left"></div> <div class="content-top-right"></div> <!-- notice the top center or top repeat slice needs to be at the end --> <div class="content-top-repeat"></div> </div> <div class="content-repeat"> <!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me --> <div class="content-repeat-left"> <div class="content-repeat-right"> <!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it --> <div class="content-repeat-center"> <!-- /** this is where you'd place the content **/ --><div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
</div> </div> </div> </div> <div class="content-bottom"> <!-- this contains the bottom left, bottom right and bottom center slices --> <div class="content-bottom-left"></div> <div class="content-bottom-right"></div> <!-- as above the bottom center div must be after the bottom left and right divs --> <div class="content-bottom-repeat"></div> </div></div>
Posted in Web Development | No Comments »
I just read an article in Alex’ Soapbox on IT professionals and their motives to quit a job at a certain company. Having just finished a 6-month-internship at a local new media agency this article came right on time. I don’t want to judge neither the article nor the company I’ve been working at, but the theory mentioned in “Up or Out: Solving the IT turnover crisis” is absolutely worth reading if you haven’t already.
Personally I think Alex Papadimoulis’ findings are a bit too black-and-white (as he admits near the end of the article: “Obviously, this article has painted some incredibly broad strokes, the largest being the stark dichotomy between skilled and unskilled developers, and the lack of distinction between organizations.”), but they are true nonetheless.
Posted in Web Development | No Comments »
Bug tracking in software development can be a pain - especially when there doesn’t seem to be any logic behind the bug.
So we had that navigation tree at work consisting out of two category levels, for simplicity let’s call them Level-1-Category and Level-2-Category. Level-1-Categories could contain other Level-1-Categories and Level-2-Categories, while Level-2-Categories could only contain Level-2-Categories. The navigation was built, caching was implemented, everything seemed fine from a logic viewpoint, however it behaved weird where it would sometimes display the Level-2-Categories in a particular Level-1-Category and sometimes not or in different order.
When we finally found the bug (after hours of debugging) the scales fell off our eyes:
<?php $cacheID = md5($level1Cat->id.$level2Cat->id); ?>
md5(‘112’); - and trying to open a $level1Cat with ID 11 and a $level2Cat with ID 2 it would read the cache md5(‘112’);. Unfortunately these classes did have the same interface, so no errors were thrown.<?php $cacheID = md5($level1Cat->id.'-'.$level2Cat->id); ?>
Posted in Web Development | 1 Comment »
Ads - That’s how you make money on the Internet. And since everybody wants money ads are spilled all over the Internet. What if…
Semantics is the reason why HTML exists: there are elements to tag headlines, tables, lists and countless other types of text to give the text a structure. I know ad providers wouldn’t even consider this, since it would make their ads easily blockable by ad-blockers like Adblock Plus for Firefox, but seeing German sites are required by law to mark advertisements and make them stick out of the text flow why isn’t there an <ad> element (or at least one on the to-do-list for HTML5) to make that tag machine-readable?
The only way to make ad providers use such an element would probably to require it by law - and given the expertise the German government has recently shown in laws concerning information technology and the Internet years will be passing by without an <ad> element *sigh*
Posted in Web Development | No Comments »
Jing is a small application allowing you to create screenshots and screencasts up to 5 minutes - nothing revolutionary here. The new thing is, that Jing is capable of storing these files at either screencast.com, Flickr, a custom FTP server or your local hard drive (or network drive) and inserting a link to the file into your clipboard. This way you can share screenshots with your mates over IM or Email almost instantly.

After installation Jing docks to your screen edges and reveals it’s features on mouseover. Jing makes it super-easy to take screenshots and share them, once you’ve tried it, you’ll like it. Jing also comes with a screenshot/-cast history that allows you to delete old files to save some space. However, there are two downsides:
Jing is available for Mac and PC at http://www.jingproject.com/
Posted in Web Development, Personal | 1 Comment »
Using Google Analytics and wondered how many clicks you add to your site(s) on your own? Here’s an old way to keep yourself out updated for the new Google Analytics JavaScript.
Based on Count me out on Analytics Talk I’m keeping myself out of my sites’ statistics. However Google released a new version of their tracking JavaScript in December and they’re no longer adding new features to the old urchin.js. So updating is a god idea, but I still want to keep my hits out of my site statistics.
A quick glance at the Google Analytics help center told me there was a way to set custom variables in the new JavaScript, too, so I modified my keep-me-out files:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>removing you from GoogleAnalytics...</title>
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript"> var pageTracker = _gat._getTracker("UA-XXXXXXX-X");pageTracker._initData();
pageTracker._trackPageview();
</script><script type="text/javascript">function setSegment(next) { pageTracker._setVar('someSpecialTextYoullUseInACustomFilterInGoogleAnalytics'); if (next.length > 0) {document.location.href = next;
} else {window.close();
}
}
</script></head><body onload="setSegment('http://location.of/the.same.script.on.another.site.of.yours.to.redirect')"></body></html>Posted in Web Development | No Comments »
I recently wanted to post some source code on this Expression Engine-powered blog - I thought about some syntax highlighting to improve readability. However, after asking Google and the Expression Engine forums search it turned out there had been several attempts to integrate a syntax highlighter into Expression Engine, but these plugins or extensions were either outdated or not available anymore. *sigh*
Update: GeSHify has moved! Visit it's new home http://geshify.com/. This page is probably outdated!
So I figured out it would end as it always does (notice how I exaggerate here to keep the pathos of the text) - I had to do it my way. And here it is: GeSHify for Expression Engine.
GeSHify supports the following features:
<?phpfunction activate_extension()
{global $DB;
$DB->query($DB->insert_string('exp_extensions',
array(
'extension_id' => '',
'class' => 'Geshify',
'method' => 'pre_typography',
'hook' => 'typography_parse_type_start',
'settings' => serialize($this->settings_default),
'priority' => 8,
'version' => $DB->escape_str($this->version),
'enabled' => 'y'
)));
$DB->query($DB->insert_string('exp_extensions',
array(
'extension_id' => '',
'class' => 'Geshify',
'method' => 'post_typography',
'hook' => 'typography_parse_type_end',
'settings' => serialize($this->settings_default),
'priority' => 8,
'version' => $DB->escape_str($this->version),
'enabled' => 'y'
)));
}?>Posted in Web Development | No Comments »
I've been listening to Technikwürze Podcast, Episode 104 (a german podcast about design and webstandards) and they've been talking about WuFoo, an online service to create HTML forms. You can create forms using drag and drop on their site. If you want their server side validation, their statistics and their database power, you can purchase a paid subscription plan, but what I want to point out today is their XHTML/CSS export feature.
When you create a form, click the code-button and choose “XHTML/CSS code only” on the right they'll serve you the correct XHTML and CSS code for the form you designed ready somewhat ready to include it into your web site. I moved all their CSS rules into some kind of “namespace” so they wouldn't interfere with my site's CSS rules (particularly my CSS files require the form to be in an element with class “wf” assigned to it and the IDs being used in the form are prefixed with “wf_”). I added some jQuery JavaScript for the cool eye candy-effects and that's it. Now I can easily insert WuFoo-generated forms in my site (and oh boy, I will).
Note that you will have to take care of form validation yourself - you're not using the WuFoo guys' servers and I didn't include client-side validation in my JavaScript.
If you'd like to use my modified CSS file and my jQuery JavaScript code scroll down for a highlighted version or get it here: CSS and jQuery JavaScript. The CSS and XHTML code has been released under a CreativeCommons Attribution 2.5 license and I'm hereby releasing the jQuery code under the same license.
Posted in Web Development | No Comments »
Do you know the HTML Entity Character Lookup at Left Logic (leftlogic.com)? It comes in pretty handy, when you need special characters and their HTML entites, and it’s much faster than scanning through hundreds of rows of characters. I made an Adobe AIR Flash version.
The HTML Entity Character Lookup was originally developed by Remy Sharp as a HTML + JavaScript (i.e. web app) as well as an OS X dashboard widget. The only possibility for windows users to use that app offline was the HTML Entity Character Lookup Firefox plugin made by Yining. I wanted something different, so here it is: The first release of my Adobe AIR HtmlEntity widget. Now updated for AIR 1.0! In order to run this, you’ll need to install the Adobe AIR runtime available at http://adobe.com/go/getair. Once you got the runtime, you can install HtmlEntities by clicking the button below.
The application is licensed under a Creative Commons ShareAlike 3.0 License. As far as I know the CreativeCommons licenses are not compatible with (or at least not recommended for) software, but since Remy Sharp licensed his app under this ShareAlike license I have to use the same license.
Posted in Web Development | 1 Comment »
Are you a Facebook member? Did you join MySpace for some of your friends don’t have Facebook accounts? There’s a solution, and it’s called OpenSocial.
OpenSocial is an API for social networks. There’s nothing new about APIs, but the Google is taking a flying leap by standardizing the different APIs of different social networks into one API. You might ask: “Why Google?” Actually Google is just developing the OpenSocial API, but it’s not an idea Google had on their own - they have a couple of influential partners in the social web business: hi5, MySpace, Ning, Facebook and Xing, just to name a few.
I can already hear some people moan about Google doing it - but in this case the fear-mongering that Google will soon know everything about us doesn’t seem quite eligible. To quote one of the social networking companies’ CEOs that was giving a demo of an OpenSocial app at the Google Campfire One: “This is Flixter working directly with MySpace. [...] Google doesn’t control the data in any way” (Joe Greenstein, CEO of Flixter, approx. 55:00 on Campfire One: Introducing OpenSocial on YouTube)
I can’t wait to see what developers are going to do with OpenSocial - would be nice, if Google got everyone together using OpenSocial.
[via Kaffeeringe]
Posted in Web Development | No Comments »
There’s quite a market for YouTube clones, it seems. I’ve been recently working with three of these scripts, namely the commercial ClipShare Pro 2.0, the free PHPmotion and the Real Estate Video Upload Software I wrote a while ago. My experiences with these scripts are quite mixed, though.
All of the scripts are based on PHP and MySQL - there might be other solutions out there, but since my clients all had the traditional LAMP setup I didn’t bother searching for alternatives.
For encoding, all of the scripts named use the same combination of MEncoder, ffmpeg to support the Flash video format, the ffmpeg PHP extension and FLVTool2.
Installing these software packages isn’t that hard unless you’re on something different than a .deb-based Linux system: The Debian multimedia repository provided me with the MEncoder and FFmpeg packages, I installed Ruby to run FLVTool2 (which is a Ruby script) and installed ffmpeg-php from Atomo64’s Debian Repository (thanks to Raphaël for this one).
If you’re on another system, you might end up with a lot of compiling, though.
Once you got all these things in place and made sure your php.ini settings allow the exec(), shell_exec() and system() functions you can start doing the real installataion.
Posted in Web Development, Linux | No Comments »
© 2006 - 2012 by Clemens Lang