Hide outline border on A tag focus

Thursday, October 15, 2009

Filed under: HTML and CSS, jQuery, javascript, web-development — Tags: , , , , — Dmitri @ 09:01

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar toyota

This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }

IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:

CSS expression solution

input, a {
  outline:expression(hideFocus='true');
  outline:none;
}

jQuery solution

$("a, input").each(function() {
  $(this).attr("hideFocus", "true").css("outline", "none");
});

Internationalization in Rails 2.2

Tuesday, October 13, 2009

Filed under: Ruby, Ruby on Rails, web-development — Tags: , , , — Dmitri @ 08:41

This tutorials is about Internationalization in Ruby on Rails 2.2 and later. You don’t need to invent a wheel from scratch all stuff for internationalization and localization of your application is available in standard Rails package since version 2.2.

Complete internationalization tutorial

Notify bar

Wednesday, May 27, 2009

Filed under: PHP, jQuery, javascript, web-development — Tags: , , , — Dmitri @ 12:11

‘Notify Bar’ plugin

Simple plugin (basically it’s not a plugin, but widget) to show notify bar
(like on Twitter’s webpage).
It’s very simple to use:

      
$(function () {
  $.notifyBar({
    html: "Thank you, your settings were updated!",
    delay: 2000,
    animationSpeed: "normal"
  });
});
      
    

and to your html page stylesheet:

<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  />

$.notifyBar can pass next parameters:

Parameter Description Type Default
html What text will be inside bar, can be HTML String [optional] “Your message here”
delay How long bar will be delayed, doesn’t count animation time. Integer [optional] 2000
animationSpeed How long this bar will be slided up and down String | Integer [optional] “normal”
jqObject Own jquery object for notify bar jQuery object [optional] null
cls You can set own CSS class for ‘Notify bar’. There is too premade clasess “error” and “success” String

See demonstration or download source.

Plugin ‘Minify’ for Frog CMS

Wednesday, May 20, 2009

Filed under: PHP, web-development — Tags: , , — Dmitri @ 11:25

About Minify

‘Minify’ is a plugin to minify JavaScript and/or CSS code and combine it
into one file on the fly. This will increase performance of website.
So you don’t need to do dozens HTTP request for every JavaScript or CSS file.
Minify plugin is more useful and faster with Funky cache plugin.

How it works and how to use it.

Internet Explorer intepolation mode for images

Wednesday, February 11, 2009

Filed under: HTML and CSS, web-development — Tags: , , , , — Dmitri @ 15:09

Every self-respecting web-designer and web-developer know that when scaling images browser makes picture smaller or larger by definite “magic” algorithms. All browsers except IE, do that much-less correctly.

In Internet Explorer you should setup that algorithm manually as CSS property.

img { -ms-interpolation-mode:bicubic }

So here is result, screenshot are taken in IE7 with
image scale about 50-60%.

Without algorithm
Bicubic algorithm disabled (default)

Without algorithm
Bicubic algorithm enabled

Read more on MSDN website about this issue.

Enabling interpolation algorithm is useful for any kind of *boxes like Fancy Box, Shadowbox, Light Box, etc…

NB! Enabling algorithms can decrease IE’s performance up 2 times!
Nice joke, BILL!

IE session bug is solved

Thursday, February 5, 2009

Filed under: HTML and CSS, PHP, web-development, work — Tags: , — Dmitri @ 11:07

IE has bug which deletes session data and brakes functionality of website. In other browsers all is working fine.
Here is example in PHP:

<?php
print_r($_SESSION);
//output:
//Array ()
?>

After half day of breaking brain and Google really fantastic solution for this problem, but no one of them didn’t solved our problem. So Mika found that if markup have empty src attribute, IE makes an empty request which breaks session data. So solution is simple check if there any empty src attributes and hrefs in link tag.

Was:
<img src="" alt="An image" id="img" />

You need to remove this empty attribute or if you don’t need this for javascript remove IMG tag at all.
<img src="" alt="An image" id="img" />

That’s really stupid.

Generate static websites with Ruby (webby)

Monday, January 19, 2009

Filed under: HTML and CSS, Ruby, web-development, work — Tags: , — Dmitri @ 14:00

Often we need to generate some websites with static content, for example without any line of PHP code or without Ruby on Rails, just need to have plain HTML files. As for Me I hate to edit 50 HTML pages manually. I found a nice solution. It’s Webby

This is a great solution to complete such task.

You can check how it’s work here or there (old version).

There are more tools like Webby, Nanoc and jekyll. I have didn’t tried them, but I guess the functionality is the same.

Official Estonian currency rates with PHP

Thursday, December 18, 2008

Filed under: PHP, Wrong world, jQuery, me, web-development, work — Tags: , , — Dmitri @ 13:35

I had a bit free time today and I have written a PHP class which gets the official rates for Estonian crown. This class will be useful for internet shops or any other commercial organizations who need to keep their courses fresh.

You can download or check source. This stuff is really simple as hell, anyway there is a small documentation inside archive.
Here you can see the most fresh Estonian currency rates

TextMate for linux

Monday, December 1, 2008

Filed under: Linux, web-development — Tags: , , — Dmitri @ 21:19

Of course TextMate is the best text-editor ever. It has a lot of eseful features and nice syntax highlighting stuff and code autocompetition features.

Windows has an official TextMate clone — E-texteditor. But *nix and linux don’t.

I have read tens of useless articles how to set up gedit as the web IDE and no one was very useful. Moreover almost in every article’s comments some *nix nerds advise to use Vim or Emacs. These editors are so confusion for beginner and you need to spend days to learn how they works. So I explain how to setup gedit to behave like TextMate in 2 minutes.

Lets go!

If you don’t have already installed gedit (in GNOME it’s default text editor), so type in terminal:
sudo apt-get install gedit

Next step is install gedit-plugins:
sudo apt-get install gedit-plugins
That’s all what you need to install.

Open gedit and go to Edit > Preferences and choose “plugins” tab. You will see that plugins’ choice is much larger than standard, it’s good idea to check next plugins:

  • Bracket completion
  • Change case
  • Code comment
  • Color picker
  • Snippets
  • Insert date/time
  • Indent Lines
  • Join/Split lines
  • etc. (what you wish)

If you like dark color scheme go to “Font&Colours” tab and select “Oblivion” scheme it’s look very good. (Anyway if you’re config freak you can download a lot of other themes, just google it).

During the work you can save your most useful code with “snippets” plugin and use them again and again.

Restart gedit.

TextMate for linux is ready for you. Have a nice coding!

Why Obama has won?

Friday, November 7, 2008

Filed under: PHP, web-development — Tags: , , — Dmitri @ 10:52

New US. president Barack Obama wins elections because his site is written on PHP, but John McCain has ASP.NET site, so they are:

Obama vs McCain.

:-)

Older Posts »

© 2008 Dmitri Smirnov