Jefim Borissov

CodeIgniter – Cart crap with Cyrillic characters

Jefim — Fri, 11 Dec 2009 02:51:00 +0000

Ok, now this is so ridiculous that I have to blog about this even though I do not want to. CodeIgniter just blew my mind some time ago when I upgraded to 1.7.2 for the new Cart library. I realize, that it is a basic functionality, yet still... It does not support cyrillic characters in the product name! It is freaking 2009, almost 2010 and one of the most popular MVC frameworks does not support cyrillic? And I bet any other "strange" characters too, because basically they have a filter there with a regexp:

var $product_name_rules	= '\.\:\-_ a-z0-9';

Now that is some serious shit!

Anyway, if you have trouble with the same thing - doing non-latin chars in product names just find and comment out the following part from system/libraries/Cart.php:

if ( ! preg_match("/^[".$this->product_name_rules."]+$/i", $items['name']))
{
	log_message('error', 'An invalid name was submitted as the product name: '.$items['name'].' The name can only contain alpha-numeric characters, dashes, underscores, colons, and spaces');
	return FALSE;
}

Also, if you are using a database table for your sessions - do not forget to check that the user_data field uses UTF-8 as its encoding (otherwise it won't let cyr chars into the field).

Enough ClearType! Go GDI++!

Jefim — Sat, 07 Nov 2009 16:46:40 +0000

Did you ever want to replace the ugly ClearType with something better? I know I have. And my prayers have been answered - meet GDI++ - the solution to all your font problems. Enough words, see it in action (this is Verdana, btw):

ClearType vs. GDI++

Well, I think that the difference is pretty obvious. So if you are ready to start you new font life - go here and download the file named gdi0870.zip (404kb). Extract anywhere you want and launch gditray.exe. Choose 'enable' from the context menu of the tray icon and voila - your font are rendered without the help of that ugly, ugly ClearType.

RoR: Session / login management

Jefim — Wed, 04 Nov 2009 15:01:32 +0000

This is basic yet not obvious in Ruby on Rails - I've been looking for info on this for a long time (a long time for this problem is anything more than 5 minutes).

So, this is the way you make sessions/logins work in ruby:

class SessionController < ApplicationController
  def login
    @session['logged'] = true
  end
  def logout
    @session['logged'] = false
  end
end

The @session variable is available anywhere. Use it anywhere. For example you could come up with the following view showing whether the user is logged in:

Logged in: <%= @session['logged'] %>

And that is it. Anything beyond that (like adding a User model etc.) is out of this post's target. There are many articles on those things yet no clear explanation where to find and how to init a session. As you can see - the answer is clear - you don't The session is already there. Just start using it.

Basic CSS layout

Jefim — Wed, 28 Oct 2009 23:39:49 +0000

The basic CSS layout I use in my work is plain simple - header, sontent, sidebar and footer.

The HTML:





  My page
  
  


  
    
      Header
    
    
      Content
    
    
      Sidebar
    
    
    
      Footer

And the CSS is very simple:

#wrap    { width: 960px; margin: 0 auto; }
#header  { }
#content { width: 700px; float: left; }
#sidebar { width: 260px; float: right; }
#footer  { }
.clr     { clear:both; height:0px; overflow:hidden; }

This is it. This code will show a simple page which is ready for hardcore modification. I know this is pretty basic yet it is one of the most used code snippets in my IDE. Good luck!

Image / file upload with CodeIgniter

Jefim — Mon, 26 Oct 2009 11:15:42 +0000

Image upload can be a pain in the *ss. And even though CI has a lot to offer (in the means of documentation) it still lacks a direct copy-paste code on their website so that people can just put it into their controller and use away.
Here we will have:

Image upload form with 5 images
And a controller function that will upload those
Thumbnails will be there too

Ok, lets start with the HTML form code, it is very basic:
views/upload_form.php

And now the controller:
controllers/Uploader.php

class Uploader extends Controller {
  function go() {
    if(isset($_POST['go'])) {
      /* Create the config for upload library */
      /* (pretty self-explanatory) */
      $config['upload_path'] = './assets/upload/'; /* NB! create this dir! */
      $config['allowed_types'] = 'gif|jpg|png|bmp|jpeg';
      $config['max_size']  = '0';
      $config['max_width']  = '0';
      $config['max_height']  = '0';
      /* Load the upload library */
      $this->load->library('upload', $config);

      /* Create the config for image library */
      /* (pretty self-explanatory) */
      $configThumb = array();
      $configThumb['image_library'] = 'gd2';
      $configThumb['source_image'] = '';
      $configThumb['create_thumb'] = TRUE;
      $configThumb['maintain_ratio'] = TRUE;
      /* Set the height and width or thumbs */
      /* Do not worry - CI is pretty smart in resizing */
      /* It will create the largest thumb that can fit in those dimensions */
      /* Thumbs will be saved in same upload dir but with a _thumb suffix */
      /* e.g. 'image.jpg' thumb would be called 'image_thumb.jpg' */
      $configThumb['width'] = 140;
      $configThumb['height'] = 210;
      /* Load the image library */
      $this->load->library('image_lib');

      /* We have 5 files to upload
       * If you want more - change the 6 below as needed
       */
      for($i = 1; $i < 6; $i++) {
        /* Handle the file upload */
        $upload = $this->upload->do_upload('image'.$i);
        /* File failed to upload - continue */
        if($upload === FALSE) continue;
        /* Get the data about the file */
        $data = $this->upload->data();

        $uploadedFiles[$i] = $data;
        /* If the file is an image - create a thumbnail */
        if($data['is_image'] == 1) {
          $configThumb['source_image'] = $data['full_path'];
          $this->image_lib->initialize($configThumb);
          $this->image_lib->resize();
        }
      }
    }
    /* And display the form again */
    $this->load->view('upload_form');
  }
}

And that is it. Customize it to your needs, the basics are there already. And good luck!

Komodo Edit tools – add style.css and reset.css

Jefim — Thu, 15 Oct 2009 05:28:49 +0000

Good morning, planet. Today I am going to share a very useful script I am using in Komodo Edit (it automates adding style.css). It is very (!) simple yet very effective for me and, probably for others who are doing a lot of HTML files and face a problem of repetitive actions.
This thing works as follows (the use case):

You create a new HTML file in komodo and save it in some directory.
You double-click the script in the Komodo Edit toolbox.
The script adds the following folders/files to the project (paths relative to the file currently in editor!)
- css/
- css/style.css
- css/reset.css
Also the file adds the following HTML code at the cursor in current opened file:

Voila. The needed action is done.

Now, the snippet code:

import sys
import shutil
import os
import os.path

# argv[1] - dir of cur project (%D)
# argv[2] - current file name (%F)
if os.path.exists(sys.argv[1]+'/css/') != True:
    os.mkdir(sys.argv[1]+'/css/')

# NB! Edit the paths to style.css and reset.css
# (these will be copied into your project)!
shutil.copy('C:/Work/__distributives/css/reset.css',sys.argv[1]+'/css/')
shutil.copy('C:/Work/__distributives/css/style.css',sys.argv[1]+'/css/')

print '
'
print '
'

Save this as a file somewhere (e.g. C:/Work/__scripts/add_style_css.py).
Open up Komodo Edit and add it to your toolbox (Toolbox->Add->New command...) with the following settings:

Command: python add_style_css.py %D %F
Insert output: check
Start in: whatever the script resides in (e.g. C:/Work/__scripts)
anything else should bet left as it is

Enjoy

How-To: Create a horizontal menu

Jefim — Mon, 12 Oct 2009 08:01:11 +0000

This is a tutorial on how to create a fully costomizable horizontal menu. Why another menu how-to? Well, mostly because there are situations when there are no suitable google results (based on my experience) and you have to come up with something yourself.

These are the features we will try to get into our menu:

It will be horizontal
It will have splitters (made with images)
It will have active class for rollover / selected item (background change)
Menu items will be of different size

This code works for Internet Explorer 6+, Firefox 2.0+, Opera 9+, Safari (at least on Safari 4 - tested on Windows version of it).

Here is a mockup that we have:

Menu mockup

NB! If you just want to see how to do it - go here for the demo / full code.

Ok, first, the HTML you need for this thing to happen:


 Menu item
 Longer item
 Short
 Finally

This is the needed thing. One more thing to add - if you lack one element for background (if

and are already having backgrounds and you need another one) - just wrap with a .

The CSS code for the menu:

html, body {
    font-family: "Trebuchet MS";
    font-size: 16px;
}
a       { text-decoration: none; color: #ffffff; }
a:hover { text-decoration: underline; }

#menu {
    margin:0;
    padding:0 12px;
    list-style-type: none;

    background: url(menu-bg.png) no-repeat;
    height:33px;
}
#menu li {
    float: left;
    display: block;
    margin-top:1px;
    background: url(menu-item-bg.png) no-repeat top right;
}
#menu li a {
    display: block;
    padding:4px 12px 4px 10px;
}
#menu li.active {
    background: url(menu-item-active-bg.png) no-repeat;
}
#menu li.active a {
    background:
        url(menu-item-active-bg-right.png)
        no-repeat top right;
}

Some explanations: paddings and heights are just to make this thing look better a bit. The most important things are float, display and background aligns! If you want to create the menu yourself - just change the images and change the paddings / heights to correspond.

Now, the list images we will have to use:

Menu background

Menu item background

Active menu item background

Right-handed chunk

Of course you may want it to be a rollover effect. This is very easy to accomplish by using JavaScript. I will use jQuery for this but you can pretty much use any framework or just plain JavaScript to do that. The code for the rollover effect in jQuery is as follows:

    $(document).ready(function () {
       $('#menu li').mouseenter(function ()
           { $(this).addClass('active'); });
       $('#menu li').mouseleave(function ()
           { $(this).removeClass('active'); });
    });

Finally, the whole stuff compiled together

The Web 2.0 craze

Jefim — Tue, 07 Jul 2009 02:31:48 +0000

The craze of Web 2.0 is consuming more and more developers and their customers. And, from my point of view, this is a good trend - websites are more clear, more usable and intercative - users are happy => site owners are happy => developers are happy. We are all happy.

On the other hand I must say that this craze is a bit over the edge. Why is that and how can it be seen? Well, from a dev perspective this mostly conserns HTML. Everybody wants valid (X)HTML today and I am not an exception. The other side of this is that everyone wants

vased websites with

elements. But can anybody explain to me what is this "oh-so-obvious" reason for making menus using

menus? I don't mind it, but let us be honest - this can be a pain sometimes when you want a decent menu.

I see a lot of enthusiasts voting for

I am, of course, not saying that tables should be used in every single menu, but I want to point is that tables are nothing to be afraid of. Do not listen to the masses, who scream one phrase all the time - think for yourself and decide which concept to use in a certain case of yours. Be reasonable.

Web development future

Jefim — Tue, 16 Jun 2009 03:21:21 +0000

As you may already know I work as a web developer. This means I encounter a lot of (X)HTML, PHP and JavaScript. There is no doubt that those are the most widely used tools for small/medium websites as well as there is no doubt that with all the new trends, with the increasing will to build the "Web 2.0" the developmet becms harder and harder. There is a tremendous amount of ways to implement things, a huge number of frameworks out there than say "Hey, use me! I am the best!". Obviously, this is very stressful for the developer. And what is more stressing is the complexity of the code.

Remember how you used to write those small pure HTML pages without caring about whether it passes the validity tests? Remeber how you didn't care about Mozilla, Opera and Safari? You only had to make sure that this will work in IE and put a small text on the front page - "This site was made for IE6".

After that came PHP, which was overwhelming. It is a great tool designed to make scripting pages with ease. Then came databases and object-oriented paradigms. That is the time when I first started to feel frustrated. The code did not fit into my head anymore. I had to review the classes I have, the functions that they have, members, deal with connections and other crap.

And the latest thing - AJAX. This thing has been terrorising every single web developer. When I hear AJAX I always have two conflicting feelings - it is cool and it is very unpleasant to make it happen. I mean JavaScript was so simple (and mostly unnecessary) until AJAX hit the internet (and Web 2.0, of course). All you did was getElementById and validate forms with it sometimes.

Where am I going with this? Well... It is simple. At the moment the whole web development process with HTML/PHP/JS is quite complicated if you want to make something exceptional. As I work I keep seeing that I am performing repeating actions now and then. And I think that now it is time to make something new. A new way, a new tool, tailored for the specific needs of the web developer community. I will be not surprised if it will be something ASP.NET-like. Let it be. It is time to either dramatically improve the web development tools we have now or to create a new all-in-one tool that takes the concepts of HTML, PHP and JS/AJAX together and puts them into a universal form.

Web development tools I use and recommend

Jefim — Fri, 12 Jun 2009 03:47:49 +0000

Ok, not being original here, but still... a web developer's blog is never complete without this. Maybe somebody will find at least something useful here. So here goes:

Tasks

slicing designs into images and cobining it to (X)HTML/CSS
script writing (PHP / JavaScript)
debugging
testing IE compatibility
quick editing
database handling
OS: Microsoft Windows
others

Slicing

Adobe Photoshop - using it mostly because the designs are in PSD files. I do not actually slice anything here. I just need this to take screenshots of the design to slice it with Paint.NET afterwards.

Paint.NET - a free, but absolutely awesome graphical editor without the tremendous amount of unnecessary functionality. I paste the screenshots from Photoshop here and select-and-crop them for slicing.

Creating (X)HTML/CSS

Adobe Dreamweaver - the most usable markup/style editor I have ever seen so far. Mostly because its autocomplete functions are so well thought-out. It is just a pleasure to use it. It is really worth the money Adobe wants people to pay for it.

Script Writing

Komodo Edit - a free tool, that has all the features I need. This is the only editor I know that has every feature that one might want in a script editor (PHP / JS autocomplete, code folding and project files) and does not have all those features that a regular person would use once a year max. Also, it is a very neat that Komodo has addons, which are implemented the same way as they are in Firefox. Very handy thing to have packed into a very familiar interface. Has the vertical selection feature, which is very important to me (just hold donw Alt+Shift while selecting). Can also be quite handy when need to change something in HTML/CSS and you do not want to bother opening up Dreamweaver.

Debugging

Firefox + Firebug and Web Developer addons - the best HTML/CSS/JS debugging tool. If you are not using those yet - you are now a web developer

I do not use any PHP debugging stuff. Still doing it the crappy way - echo'es and print_r's. And the messages from the PHP interpreter, of course.

Testing IE compatibility

Of course I test my sites in Firefox, Opera and Safari. But the only problem is Internet Explorer (I test 6, 7 and 8), so...

Multiple IE - adds shortcuts to IE versions (starting at version 3) to your quick-launch. Has PNG fix support. Nothing special, but I like it more than IETest.

Quick Editing

Notepad++ - hands down the most handy editor for some quick edits. Not for real production though, since there is just too much tweaking to be done in order to make it into a half-decent environment to work with. Editing some notes, viewing sources or creating a fast JS - Notepad++ makes it all happen for me.

Database Handling

MySQL GUI Tools - mostly the Query Browser and Administrator. No real alternatives here, so there is not much to argue about. Better than phpMyAdmin anyway

phpMyAdmin - the standart in hostings with MySQL databases, so I am simply forced to use it.

OS: Microsoft Windows

This is quite important to me. Even though I really lack multiple workspaces in Linux (and do not even dare telling me about those crappy emulators for Windows of this feature) I still think that Windows is a better enviroment for web developing. Actually, I think that some people go to do this on Linux just because there are tools on Linux that allow it (e.g. ADs cannot go there since there is no Photoshop there). It is just a trend. Want to be cool? Install Linux.

Well, I personally think that this is not true. Web development is much more comfortable for me in Windows because of the wide selection of tools (notice Notepad++, Dreamweaver and Paint.NET as well as the presence of normal IE). I do not dislike Linux though (I even have my lovely Ubuntu 9.04 installed). It is just that it does not provide me with all the tools to do my job in the most efficient way. Period.

Others

Of course there is a lot of other cool tools I use like Filezilla for FTP, Dia, MySQL Workbench and Visual Paradigm for modelling, Evernote for quick notes and so on. But they are quite small and sometimes completely unrelated to the topic of web development. Maybe someday I can write something about those little things that also help making the development process much more easy and less tiring.