Bibakis.com

You will start by creating web interfaces using HTML, CSS and a little bit of jQuery. As this is a junior position you are not required to have corporate experience. However we expect that you are familiar with the above technologies so you can start your training on a solid foundation.

You are expected to have a programming/computing related education of any type and have familiarity with the fundamental concepts of programming. You will start using PHP, CodeIgniter and Drupal very soon to create powerful websites and web applications.

Fluent use of English is a bonus. A passionate approach on the web and your willingness to learn new technologies and concepts is a bigger one. Email your CV and/or personal portfolio at contact at bibakis dot com.

After some real testing on real production websites I've made some fixes and a few additions to the Mainframe CSS framework. What is it ? Read the release post for a bit more information here. Changelog:

• New: The .hidden class
• New: Photoshop PSD & PNG templates for the fixed versions of the layout
• New: Documentation & changelog
• Updated: Updated the demo page
• Fixed: Some bug fixes with strong tag & cleaners
• Fixed: Lists were not showing up correctly (reset bug)

Please note that I'd love to have some feedback on this. My gmail is bibakisv@... Don't hesitate to drop me a line with your observations and ideas. Thank you. Without further delay here is the link to...

Download Mainframe CSS framework 0.2

One of the biggest challenges in web development is making multilingual websites. The easy part is having common functionality across all available versions. The hard part is making sure you don't have blank spots. And that means that if you got an English-French website, you shouldn't have French words appearing in the English version and vice versa.

<!--more--> The oldest solution I can remember used in PHP is the use of constants. For example instead of writing Home page in your HTML, you write __HOME_PAGE__. Then you got a file for every language with constants that you include in every "visible" PHP script. An if block takes care of including the proper constants file for the currently active language. The major problem of this technique is that if something is left untranslated you get ugly __CONSTANTS__ all over the place. There are few things that can make a website look more amateur.

In CodeIgniter there is the language class that takes care of this issue. Instead of using constants you simply do $this->lang->line('Home page') to get the translation for the words Home page. Then you got files in the "application/language" folder with all the translatable items.The problem with this approach is that when something is left untranslated you don't know how to find it easily.

I recently took over a multilingual e-shop platform project for an agency. A great friend and colleague there came up with a solution for this which is to extend the language class and add the ability to the line method to add marks before and after a string in case there is no translation available. For example Home page becomes !-- Home page --!. Although this time we are more organized and flexible since we can for example enable/disable/customize the !-- --! marks you will notice that practically we are still in the footprints of the ugly constants trick. We still get !-- Ugly --! stuff in our website in case a translation is forgotten. The worst part is that we still have to scan the entire site by hand and hunt down every little !-- untranslated word --!.

To overcome all of the above problems there are two simple things we can do. The first one is to add semantics to all strings we want to translate. This way Home page is different from home page and we can ease the guy/girl translating our content who won't have to figure out when a word starts a sentence or not.

The best part is that we can have all the items we want to translate gathered automatically without the need for spot marks (!-- --!). To achieve this you need to follow these steps

1. Create a simple two column table in the database called translations (id INT, item VARCHAR 1024)
2. When the line method of the language class finds an item that doesn't have a translation available make a check to see if this item is stored in the translations table.
3. If it is not stored then create a line with the exact text you use in your language files. In our case this is $lang['Home page'] = '';
   Insert this line in the translations table.
4. Create two pages. One called something like 'translations' and another called 'translations_clear'. The translations page should run a simple select query to get all the items and just display them in the browser. The translations_clear page should just empty the translations table.
5. Run a spider against your page to make sure all links are visited. Any decent offline browser should do the trick. Windows users can use Httrack and linux users wget.
6. Visit the translations page after the spider is done. You will get a page with all the items inside an array ready to be translated. Simply copy the entire page to your language file and start translating.

This way you can have web pages that are translated in one step, right before you fire your FTP client for the final upload. Also when something is added later but is not translated you won't get __UGLY__ stuff in your page. You don't have to use CodeIgniter to use this technique. All it takes is that you use a function to fetch the translated items.

One of the problems that came up with the rising dependency on Google and SEO in general is the use of www. On the one hand there is no reason to use www anymore. 100% of modern browsers use the HTTP protocol by default so you don't need to specify that you need to access the web part of a domain. It makes your site's address larger and harder to remember, more ugly, less likely to fit alongside a logo. Also many suspect that it has an effect on your keyword density, therefore harming your search engine rank just a little bit. On the other hand most of the users still keep the old habit of typing www.site.com in the address bar. <!--more--> I try to redirect to the "clean" version of the domain on all my sites. Even if the user uses the www he's not harmed at all. In fact most of the times nobody even notices. One way or another there is a solution to this. Whether you want to get rid of that 90s annoyance or you want to keep your domain a classic www there is an easy way to do this in codeigniter. First create a hook in /application/config/hooks.php

$hook['post_controller_constructor'][] = array(
	'class'    => 'Utils_hook',
	'function' => 'redirect_to_base',
	'filename' => 'utils_hook.php',
	'filepath' => 'hooks'
);

This tells CodeIgniter to execute the "redirect_to_base" method before the controller starts executing it's own methods. Then you need to create the file /application/hooks/utils_hook.php and place the following code inside

Class Utils_hook {
	function redirect_to_base(){
		$ci = & get_instance();
		$uri = $ci->uri->uri_string();
		// recreates the URL
		$location = substr(base_url(),0,strlen(base_url())-1).$uri;
		
		$active_base_url = 'http://'.$_SERVER['SERVER_NAME'].'/';
		
		if (($active_base_url != base_url()) && ($_SERVER['SERVER_ADDR'] != '127.0.0.1')){
			Header( "HTTP/1.1 301 Moved Permanently" );
			Header( "Location: $location" );
		}
	}	
}

This way the visitor is always redirected to the URL version you want even if he entered through an old bookmark such as http://www.sitename.com/action/example/

I just completed an early version of a CSS framework which I think can ease a lot of the pain in modern web design. It's name is Mainframe. The key features are

• CSS reset: all things are reset to what should be the "defaults". This includes fonts, borders, margin, padding and others.
• Some Internet Explorer specific CSS bugs and annoyances are fixed
• Mainframe uses "spacers". Clear classes with a bottom margin. Very convenient
• Some classes you can use to display errors, warnings and information boxes in a stylish way. I call these "AJAX helpers" because that's what I use them for.
• 3 predefined containers for your content. 12 columns at 960px, 16 columns at 960px and a fluid one at 100% of the page width. PSD files for graphic designers are under development.
• The 960 grid system.
• It is free to use and modify under the terms of the Creative Commons Attribution-Share Alike 3.0 Unported License.

Download Mainframe CSS framework 0.1

Mainframe uses code from YUI Grids CSS & the 960 Grid System.

Just got back from a small journey to Scotland. I'm selecting photos from a huge pile of 1500. Till I got the full wallpapers set ready enjoy a small iphone wallpapers pack. Download here.

I just modified a great GDM theme for my Linux box. Without further delay here is the download link. Download

One of the most annoying stuff for CodeIgniter developers is to include a header/footer/etc part in each and every view. CodeIgniter out of the box does not include template support (in the sence of a Joomla template or Wordpress theme). I have created a small library to assist you in using "templates" in CodeIgniter.

Download

Download Templates for CodeIgniter 0.1

How to use 1) First copy the file MY_loader.php to your application/libraries folder. 2) Check the example folder to see how a template should look like. 3) Simply do:

$this->load->template('template_name', $data);
$this->load->view('view_name', $data);

The template loading is done in pretty much the same way as the views loading. However please read the comments inside the MY_loader.php file. It takes one minute and you'll get the whole picture about how you can pass $data arrays containing variables.