Jefim Borissov » Web dev

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!

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

WebDeveloper add-on for Firefox 3.* (all betas and stuff)

Jefim — Tue, 08 Jan 2008 12:06:29 +0000

Update: Web Developer addon now officially supports Firefox 3. Check out history (version 1.1.5). Download the new version here.

Old post about my hack:

Just a note that there are a number of features that do not work correctly in Firefox 3. I am working on fixing these and putting together a new release. You are free to use this hacked version of course, but just a word of warning.

Chris Pederick - Author of Web Developer

Today I tried out the brand new Firefox 3 Beta 2. Nice. I like the new address bar and the ability to resume downloads after closing Firefox. The only thing I needed was WebDeveloper add-on (extension), which, unfortunately, does not work in FF3 yet. So, since I had a bit of add-on development experience I decided to change the max version inside the add-on. No problems occurred. Grab the .xpi (change file extension from "jpg" to "xpi" and open it with FF):

That is all

Zend Studio 5.5 – Antialiasing the font (tested on Ubuntu 7.04

Jefim — Fri, 18 May 2007 18:16:32 +0000

Hi! Today I am very happy to announce that I am now running Ubuntu 7.04!

Now, no long preludes, since this post is about "How the do I get those antialiased fonts to word in Zend Studio?!". That was the question for me about 5 minutes ago. Well, I really thought that Zend was perfect - usually, if they have this checkbox - it works without tweaking. Now here's the disappointment part - that Tools -> Preferences -> Desktop -> Use Antialised Fonts didn't really work. I asked my best friend (his name's Google) -oh, whyyyy?... Google was silent... he didn't know. Fortunately, Google remembered that Zend has a forum! Yay! Searched the forum and found the answer.

Here goes:

"... in /bin, edit ZDE.lax adding the following line at the end

lax.nl.java.option.additional=-Dswing.aatext=true

restart ZDE and you should have antialiased fonts... " (c) pkoebbe

That worked like magic. No problems at all! So, I hope that this helps someone and that my friend Google will soon cache this post.

PS The original post on Zend forums is here.

A great HTML comparison tool for Linux!

Jefim — Mon, 16 Oct 2006 07:26:24 +0000

Ok, I'm writing this post in english to make it international.

What it this post about?.. It's about a HTML/XML file comparison tool called rfcdiff. Why is it so great? Well there are several reasons:

1) It is free.

2) It generates very nice output.

3) It is easy to install and to use.

4) It is a Linux tool.

It took me about 5 minutes to install rfcdiff. The instructions:

1) Download rfcdiff script from it's site (it's a script, just right-click on the Current version link and save it anywhere you want.
2) sudo apt-get install diff wdiff (these are the requred packages)

3) chmod+x rfcdiff

4) Run rfcdiff by typing "./rfcdiff file1 file2" in terminal and open the output file with your favourite browser! That's all!

I'm sure - you won't be disappointed in this handy tool!

DMN + Intranet

Jefim — Wed, 15 Mar 2006 20:13:36 +0000

На данный момент классовая библиотека для проекта DMN (мой с братом CMS), включающий в себя Intranet, составляет ~3600 строк кода. Это при том учитывая, что Intranet сделан ещё процентов на 10%.

Это самый большой проект, который я когда-либо писал.

Новостной скрипт для сайта группы Inferno

Jefim — Mon, 13 Mar 2006 08:39:00 +0000

На днях сделал простенький скрипт для добавления/удаления новостей на сайте группы Инферно. В будущем запланированы сдедующие изменения:

Добавление возможности редактирования новостей.
Создание скрипта для управления галлереей.
Редактирование концертных дат, их добавление и удаление

А вообще, скорее всего все эти вещи появятся с результате переустановки сайта на мой CMS.