Did You PHP Before Framework Era?

I tend to see many developers, that started out programming in PHP a couple of years ago and they started out with a framework, because it’s ‘easy’ and not knowing anything about optimization, performance, when should you use a framework and when you should leave it out…

Frameworks, just like mobile phones, are getting beyond their purpose. A framework should help developers code better and not to enforce it’s style of programming.

Kohana Layout Module

It’s frustrating that Kohana lacsk the same important feature that CodeIgniter does too. A layout system.

Back in the days I wrote a layout library for CodeIgniter, but the lack of modules made it rather difficult.

When I saw that Kohana lacks a layout too, I had the chance to port my CodeIgniter layout onto this platform and of course upgrade it a little.

I’ll write down what I think are the problems with Kohana View and what my Layout module does:

First of all, I saw a Template Controller in Kohana. View logic doesn’t suppose to be in the controller. Second, it’s a little confusing how to actually create partial views (views in views). The current Kohana View just passes data to the view files, I added a little logic of adding CSS and Javascript.

I lastly, what’s most frustrating is that each time I create a controller I have to rebuild all the View logic, the partial views, etc.

My solutions to the problems:

The Layout module extends the View_Core class, therefore having all the methods and properties of the View_Core.

It pulls out some additional structuring data to a configuration file. This helps to automatically rebuild all the partial view logic in each controller, with just a simple line.

$layout = new Layout('default');

The argument ‘default’ denotes the group of the particular layout. You can create different building logic for let’s say an administration panel or for a blogging system which requires different View elements.

Also the Layout module supports CSS and Javascript routing, which means that we can add CSS / Javascript to our views by reference, the actual paths to the files are centralized in the configuration file.

Another feature that I recently implemented (so it’s currently in alpha stage) that of combining the asset files (css, javascript) and routing through a combine controller. Like this:

PHP:

$layout->add_css('reset','fonts','about');

$layout->set_combine_css(true,'http://my-project.dev/combine/css');

You can define for the set_combine_css method the URL through which the assets are requested. This would be good if you want to add minifying and strip comments, or just want to use your own combining methods.

This would be included in the HTML file as follows:

<link href="http://my-project.dev/combine/css/public/css/reset.css,/public/css/fonts.css" media="screen,projection" rel="stylesheet" type="text/css"/>

Currently the combining is made in the Combine Controller, but eventually I will pull this out into a library in the Layout module.

How to set up the Layout Module:

You will need:

• Kohana framework, I didn’t included in my archive
• Layout Module - http://playground.primalskill.com/kohana-layout/

Create a fresh install of Kohana and copy the files with all the folders from the kohana_layout_module.zip

Now you can start examining the layout class. It’s in modules/layout/libraries/layout.php

The configuration file is in modules/layout/config/layout.php

The combine controller is in modules/layout/controllers/combine.php

Some additional sample files you can find at the application folder. (controllers, views)

If you have any question please leave a comment and I will respond. I hope you like this little module. New features will coming very soon.

Google’s Plan to Change The World

If you have an world changing idea and want to share it with Google…

then check out their new site called Project 10 to the 100th

It’s interesting, but I’d like to point out what’s in their ToS:

“As a condition of participation, you grant Google, its subsidiaries, agents and partner companies, a perpetual, irrevocable, worldwide, royalty-free, and non-exclusive license to use, reproduce, adapt, modify, publish, distribute, publicly perform, create a derivative work from, and publicly display your submission[...]“

5 Layer Spam Filter

It’s finally finished. I created a 5 layer secure spam filter for form submissions. With this method, in my opinion, 99.9% of spams will be filtered. And best of all, it doesn’t use any CAPTCHA.

First of all thanks to Allan Odgaard for his spam filtering method. I modified it a little though.

I will go through the security layers that the script uses and I’ll show you a little demo too.

Layer 1:

The main idea of securing a form is to create some extra form fields hidden for the human users, but visible for bots. And on form submission to simply check if the hidden fields were filled or not. Usually if we’re dealing with a human user than these fields shouldn’t be filled, but bots don’t know that.

The naming of form fields are very important, because spam bots are intelligent, they know what field are they dealing with (username, name, password, etc.).

This security layer picks a random name for every hidden field and on every request the field’s name is different.

$decoy = array('d_name','d_password','d_pw','d_user','d_username','d_comment');

$default_1 = $decoy[array_rand($decoy)];

Layer 2.

The second security layer is the actual extra text field that the human users can’t see. I didn’t used a hidden form field, because in my experience, spam bots doesn’t like them very much.

<input type="text" name="<?= $default_1 ?>" style="display:none;position:absolute; left:9000px; top:9000px;" />

As you can see the name of this field is random. It’s inline CSS is set to be out of the visibility of human users. I used positive values, because as I mentioned spam bots are intelligent…

Layer 3.

The idea of using a timer is simple. Spam bots are usually automatically fill in the form and submit it under 3 - 4 seconds which humans simply can’t do. So by creating a field that’s of course not visible for human users and saving the current time, we can later check if it corresponds to our settings. It’s a similar field like the other, except we save the time in the name of the field. Not in the value in case the spam bot fills this too. Same as with the other field, the script pick a random name for it.

This is the PHP part:

$timer = array('t_name_','t_pw_','t_username_','t_age_');

$default_2 = $timer[array_rand($timer)] .time();

This is the HTML part:

<input type="text" name="<?= $default_2 ?>" style="display:none;position:absoute; left:9999px; top:9999px;" />

Layer 4.

This one is tricky. Usually spam bots doesn’t use Javascript, they simply forge a POST header and submit it directly. I used Javascript to simply create a cookie with a simple value in it and to be more secure I set this variable in a .htaccess file as a $_SERVER variable. And from time to time it can be changed for added security.

This simple line is in the .htaccess file: SetEnv SPAM_SECRET “sp_secret”

This is the Javascript which is loaded along with the form:

function createCookie() {
document.cookie = "<?=$_SERVER['SPAM_SECRET']?>=1; path=/"
}

If the cookie value is set to 1 it mens the form was loaded in a Javascript enabled browser and hopefully, by a human user.

Layer 5.

After all the validations the form is sent to Akismet service which evaluates the content of the form fields. You will need a Wordpress API key to use the service. You can get one for free here: http://wordpress.com/api-keys/

Demo:

You can check it out at: http://playground.primalskill.com/spam-filter/

Download at: http://playground.primalskill.com/spam-filter/spam_filter.zip

What Makes a Good Developer

A developer doesn’t becomes a good developer simply by using a particular programming language.

The rapid development environments made this industry evolve faster than anything other I know today. This has positive and negative outcomes. Today’s developers can choose from a rich variety of programming languages, development tools and platforms, but it’s a lot harder to set up a secure, scalable environment. Hardware and software are getting more complex every day, it’s much harder to learn about new technologies today then it was yesterday.

In my personal opinion we shouldn’t  associate a good developer with the programming language he / she uses. To be a good developer means you can optimize a code to the max within the limitations of the programming language. A sane developer won’t start building a 3D first person shooter action game in Basic, instead he should choose C. But a bad programmer could write even worse code in C. It’s all about the experience and knowledge of the developer that results in clean, optimized code.

This is the case with web applications too. A good developer could write the same good code in Ruby, PHP or Java. The programming language is just a tool to help programmers achieve what they settled to do.

Applied PHP

I wanted to write a series of articles, reflecting PHP in the real world.

You can learn how to write functions and classes from hundreds of PHP related books, but how about using salting when storing passwords, how to manage database connections, how to optimize your script’s memory usage or why you should unset global variables ?

I will show you all the tips, tricks, patterns and best practices of using PHP in real world applications.

I’m thinking about covering the following stuff for now:

• password salting
• different database privileges for reading and writing data
• why it’s good to unset unused global variables
• why you should cast your variable types
• why you should unset and reuse variables
• what are database sessions and how to use them

This is the introductory article to the series of articles. You will find all the articles under applied, php categories.

If you have any suggestions, you’d want to be covered in the upcoming articles please share with me in the comments.

Interview with Top Designer Lucian Slatineanu

I have a great pleasure of having Lucian here with us. He is the owner of Emblematiq and he is among the top designers on the Internet.

First of all thank you for the opportunity of having you here. Could you tell us a little bit about yourself ?

LS: Thanks for having me. My name is Lucian Slatineanu, I am 27 years old, born in Iasi, and living in Chicago for the past 4 years. I started working as an interactive designer about 10 years ago and for the past 4 I’ve been running my own consultancy under the name Emblematiq, former badboy.media.design.

What do you do on a daily basis ? How do you start your day ?

LS: Work, work, study, play, and then work some more. Design really is a big part of my life. It’s not just work but more importantly a passion. That’s why most of my day revolves around it so you could say I truly am a workaholic.

My day usually starts with a big cup of coffee.

What made you to go to the US and why Chicago ?

LS: I guess it’s what made everyone else move to the US: the opportunities. Chicago? Well, it’s a really beautiful city, certainly big enough to get a taste of living in a metropolis, but not as crazy as some other big cities around here. Plus the weather is quite similar to what I’ve been used to back home.

How do you start a new project ? Do you inspire from books or research on the Internet first ?

LS: The beginning phase of a project can be quite boring actually as it involves lots of profilers, competitive analysis, planning, and so on. It’s only after establishing the roadmap and goals of the project that the fun begins. It’s the moment when inspiration comes into play and I tend to find it everywhere - books, internet, tv, outside.

Tell us the apps. you use when you design ?

LS: Whatever fits the bill for that particular project. Obviously, mostly used are Photoshop, Illustrator, and Dreamweaver.

Mac or PC ?

LS: PC (I know, I know…). The Mac is mostly collecting dust in a corner of my desk.

What, for you are the pros and cons of being a web designer ?

LS: What do you mean cons?

A definite pro for me is the fact that I get to create things that will get used by millions of other people and help them one way or another. It helps that it pays the bills in the meantime too.

What are your top 5 favourite websites ?

LS: Strictly in terms of design there are plenty of awesome sites out there and I just don’t think there’s a way to properly arrange them in a certain order. But since you wanted some links, I’ll point you to 2 incredibly awesome designers that have been a great inspiration for me: Folkert Gorter and Scott Hansen.

In terms of functionality, I’m just your average guy so if I were to make a top of the sites I visit the most, you’ll definitely get Google or Wikipedia in there.

As a final question, do you have any tips for newbie web designers?

LS: Just work harder!

Once again thank you for the opportunity and continue to make impressive designs.
LS: Thank you! I’ll do that!

Kohana - CodeIgniter on Steroids

I wanted to try Kohana for a long time now and today I finally tested it a little. It’s beautiful.

It doesn’t support PHP 4, which is nice. Full OOP. It has a lot of features similar to CodeIgniter, but upgraded.

The documentation is somewhat difficult if you don’t have a background in CodeIgniter.

It has a really small footprint. Only 700k on my machine. And what’s best of all it supports modules !

So, if you’re working with CodeIgniter and you think when will be the PHP 4 support dropped then head on to the Kohana website.

Let’s see some of the cool feature that this framework has:

• optional ORM for models
• modules like: Arhive, Auth, Payment
• improved session handling
• better localization then CodeIgniter

CodeIgniter is a little faster than Kohana, but clearly Kohana wins on the long term.

Why You Should Design For Smaller Screen Resolutions

As display technology evolves so as screen resolutions are getting bigger and varied, therefore giving a headache to website designers.

According to Wikipedia, standard screen resolutions are the following:

• VGA with 4:3 aspect ratio : 640×480
• SVGA with 4:3 aspect ratio: 800×600
• XGA with 4:3 aspect ratio: 1024×768
• WXGA with 16:9 aspect ratio: 1280×800
• SXGA with 5:4 aspect ratio: 1280×1024
• WSXGA+ with 16:10 aspect ratio: 1680×1050
• UXGA with 4:3 aspect ratio: 1600×1200
• WUXGA with 16:10 aspect ratio: 1920×1200

And according to w3schools.com as of January 2008 the most popular screen resolution on the Internet was 1024×768 with 48% and 38% was a higher resolution.

A designer should take in consideration two variables when designing the web site’s layout:

1. screen resolution
2. browser window size

These two variables only match when the browser is in full screen and that’s the problem with bigger displays (from the designer’s point of view, of course). In the old days, when 800×600 ruled it was always 100% sure that the browser window size would match with the screen resolution, but now, users not always browsing in full screen (or the browser windows fully expanded on the screen), therefore we should indeed take in consideration the browser window size too.

I almost tend to say that screen resolution got obsolete, because a user with the screen resolution of 1680×1050 not always opens the browser on that same size. Instead let’s say it’s browsing with a 1011×933 window size. The layout only knows this size.  So it’s a wise decision if a designer creates his/her layout to support at least 800×600 (generic) resolution. This means that the width of the layout should be at least 770 pixels wide (subtracting the scroll width, in my experience, generally around 30 pixels should do it).

From marketing point of view there’s the folding problem. Every bits of important information should be placed above the fold (that is the visible space,  when the vertical scroll is at the topmost position). This space tends to shrink too.

I haven’t seen an analytics tool that would record browser window size, they all record just the screen resolution. So if anybody knows such statistics please let me know in the comments.

Update: I put together a little poll which gathers browser window size data, please visit the following link if you want to contribute to this statistic: http://playground.primalskill.com/browser-window-size/

The results will be posted when enough data is gathered, check back soon.

Intelligent Website Design

Let me tell you the story behind my company’s website redesign. The old design was too ‘funky’ we have evolved a lot in almost 2 years (the company was founded in February 2007) and I had to redesign it.

It all started 3 months ago. I searched new design ideas, I looked at CSS galleries for inspiration, but I realized that it rather gave me an inspiration block. Then I thought what style should I use, what design elements to incorporate. I had around 10 - 15 idea. I really wanted a special design for my intended audience. Then it hit me. A design should help your visitors, they should leave your site with an impression, with a positive thought.

How can I incorporate my design to do just that ? Every visitor, every culture has it’s own little design styles. So I incorporated this into my design. That’s why I call it intelligent design. It looks to my site visitors and decides what type of design they like.

How is this achievable ? First it looks the country of the visitor, by geo-targeting their IP address. After this it figures out which season of the year we’re in. Then it combines these two variables, rendering a unique look.

First it searches the database of available backgrounds for the targeted country. For example a visitor from India would see a background image of his country. Further refining this search, it looks if a particular season is available from the resulting image stack. If so, then it picks one randomly. After this it associates a design style which would fit with the selected background image. For example if we’re in July that’s Summer then it selects a design with warm colors.

I think every designer should make interactive and intelligent designs. Figuring out what’s best for their visitors. Every design should communicate the philosophy of the whole site and the designers / developers behind it.

Here’s some screenshots of different background images and styles from PrimalSkill.com:

I hope you enjoyed reading this post. Make sure you visit my company’s website at http://www.primalskill.com