css | Dmytro Shteflyuk's Home

Weekly Link Dump #2

Dmytro Shteflyuk — Tue, 22 Sep 2009 13:51:04 +0000

Time to post some interesting stuff I’ve found in Internet last week. Today we going to talk about CSS font stacks, Ruby structs, extract_options! method came from Active Support, bash scripting, software version control visualization.

Guide to CSS Font Stacks: Techniques and Resources

by Cameron Chapman

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.

But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

When I started posting links, I decided not to mention articles posted by Smashing Magazine, thoughtbot and other sites which everyone reads. But this is totally awesome: a complete guide on font faces, list of font tools and articles about typography. I promise, I will not publish links from Smashing Magazine ever again.

Structs inside out

by Robert Klemme

Today we’re back to normal blog mode, where each article stands for itself. Muppet Labs are closed and we will be continuing our journey across the Ruby universe starting with an indepth look at Ruby’s Struct class — Ruby’s Swiss army knife for structured data.

Struct can be used without any additional require statement — it’s just there. This means it comes with zero additional overhead during initial interpreter startup — one of the many advantage of using Struct. But first let’s look at the basics.

Great Ruby Struct class usage examples.

Inside Ruby on Rails: extract_options! from Arrays

by Simone Carletti

How many times did you see a method call like the following one in your Rails application: my_method :arg1, :foo => true?

What makes my_method quite special is the ability to pass an arbitrary number of parameters (:arg1, :arg2…) followed by a list of keyword/value options.

This is made possible by a really helpful method provided by ActiveSupport called extract_options!. What this core extension does is to extract the options from the given set of arguments. When no options are available, the method returns a blank Hash.

Nice Ruby on Rails method I didn’t know.

Advanced Bash-Scripting Guide

by Mendel Cooper

The shell is a command interpreter. More than just the insulating layer between the operating system kernel and the user, it’s also a fairly powerful programming language. A shell program, called a script, is an easy-to-use tool for building applications by “gluing together” system calls, tools, utilities, and compiled binaries. Virtually the entire repertoire of UNIX commands, utilities, and tools is available for invocation by a shell script. If that were not enough, internal shell commands, such as testing and loop constructs, lend additional power and flexibility to scripts. Shell scripts are especially well suited for administrative system tasks and other routine repetitive tasks not requiring the bells and whistles of a full-blown tightly structured programming language.

Old good guide for the bash scripting. Must read for any developer.

gource — software version control visualization

by Andrew Caudwell

Gource is a software version control visualization tool for Git and CVS.

Software projects are displayed by Gource as an animated tree with the root directory of the project at its centre. Directories appear as branches with files as leaves. Developers can be seen working on the tree at the times they contributed to the project.

This freaking awesome tool produces animated visualization of source code history based on Git or CVS reporsitory. Also take a look at the code_swarm project, which does very similar things.

PS. Did you notice a new threaded comments structure in this blog? Also I have rewritten theme layout a little, so there is HTML5 here now.

[lang_ru]
ЗЗЫ. Журналисты WebStream.com.ua взяли у меня интервью. Читаем здесь.
[/lang_ru]

The post Weekly Link Dump #2 first appeared on Dmytro Shteflyuk's Home.

Weekly Link Dump #1

Dmytro Shteflyuk — Mon, 14 Sep 2009 09:48:01 +0000

This is a first link dump in this blog, where I will list all interesting links that I have found in Internet. I plan to post link dumps once a week, so stay tuned to read most useful stuff with no effort. Todays topics are: organizing your CSS, top mistakes made by WordPress plugins authors, ways MySQL uses indexes, and the git version control advantages over the Subversion.

Beautiful CSS: Organizing Your Stylesheets

by Matthew Griffin

When I first took the plunge into CSS several years ago, one of my biggest frustrations was stylesheet organization. I scoured source code from popular sites trying to figure how they accomplished various layout effects. But tracking back and forth from stylesheets to HTML proved to be a difficult task. Unfortunately , that separation of style and content that makes CSS so awesome can also make it difficult to understand. Adding to that difficulty is the fact that each designer may have a different way of organizing stylesheets. If you inherit someone else’s site, this can cause some problems. In a perfect world everyone’s CSS would be well-organized, easy to scale, and easy to understand. We may not be able to attain such CSS Nirvana but we can at least make it easier on ourselves and those we work with by following this set of guidelines.

A nice article about organization of your CSS code. Author recommends to split your CSS code to several sections (universal styles, library styles, template layouts, individual page styles.) Also he proposes to indent styles related to nested HTML elements.

Top 10 Most Common Coding Mistakes in WordPress Plugins

by Ozh

As promised, I’m going to share a list of the most common mistakes, errors, misunderstandings, bad habits or wrong design decisions I’ve encountered while reviewing all these 43 plugins. Some are highly critical stuff (I’ve contacted 3 plugins authors after finding serious security holes in their plugin), some are more potential annoyances than real bugs, or are just causing a waste of server resources that could be avoided, but all have something in common: they’re trivial to fix. I’ve classified them in two parts: 10 bad code signs, plus a bonus with design decisions that suck. If you consider yourself a semi experienced coder or better, be sure to skip this article, you’re not going to learn a thing.

A comprehensive list of common pitfalls of WordPress plugins authors. If you maintain a plugin, please read this article carefully, most of mistakes are quite common (yes, I found several issues with my ones

3 ways MySQL uses indexes

by Peter Zaitsev

I often see people confuse different ways MySQL can use indexing, getting wrong ideas on what query performance they should expect. There are 3 main ways how MySQL can use the indexes for query execution, which are not mutually exclusive, in fact some queries will use indexes for all 3 purposes listed here.

You should read it. Period! Article covers all ways how MySQL uses indexes: filtering rows, sorting data, and reading data.

Why You Should Switch from Subversion to Git

by Scott Chacon

You may have heard some hubbub over distributed version control systems recently. You may dismiss it as the next hot thing, the newest flavor of kool-aid currently quenching the collective thirst of the bandwagon jumpers. You, however, have been using Subversion quite happily for some time now. It has treated you pretty well, you know it just fine and you are comfortable with it – I mean, it’s just version control, right?

Yet another article about git and what features make it so wonderful tool for any developer. Author covers main features of this version control system, and explains how it could improve your work and boost your productivity. Hey Subversion (SourceSafe, CVS, etc) users, I do not accept any excuses, you definitely should read it. Yes, right now!

The post Weekly Link Dump #1 first appeared on Dmytro Shteflyuk's Home.

fb:editor FBML tag in Facebook applications

Dmytro Shteflyuk — Wed, 16 Jan 2008 18:59:56 +0000

Some time ago I have started posting about Facebook Application Platform (see my posts about setFBML and Facebook libraries for .NET). Today’s topic is fb:editor. As you may see, Facebook has nice look and feel, and all applications usually adapted in some way to its interface. fb:editor FBML tag allows you to create forms which looks just like native ones, but it has great limitation: it generates it’s own form tag, so can’t be used within ASP.NET server form. In this short post I’ll show HTML generated by fb:editor and a way how to use it in your ASP.NET application.

Here is example from fb:editor documentation:

First we need to include fb:editor tag to the page to force loading of CSS files:

1	<div style="display:none">/></div>

Now we should define basic structure of the form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table class="editorkit" border="0" cellspacing="0" style="width:400px">
<tr class="width_setter">
<th style="width:50px"></th>
<td></td>
</tr>
<tr>
<th class="detached_label">
<label for="login">Login:<br><small>(required)</small></label>
</th>
<td class="editorkit_row">
<input name="login" id="login" />
</td>
<td class="right_padding"></td>
</tr>
<tr>
<th></th>
<td class="editorkit_buttonset">
<input type="submit" class="editorkit_button action" value="Submit" />
</td>
<td class="right_padding"></td>
</tr>
</table>

BTW, we have several enhancements in the original layout: we have specified for attribute for the label tag (now if you would click to the label, corresponding input would be selected), and added ability to mark required fields with required text (it’s impossible with fb:editor).

The post fb:editor FBML tag in Facebook applications first appeared on Dmytro Shteflyuk's Home.

JavaScript optimization Part 3: Attaching events

Dmytro Shteflyuk — Wed, 09 May 2007 23:41:55 +0000

This is a third part of the JavaScript optimization tutorial, and today I’m going to talk about events. Sorry for a long delay between posts, I hope remaining parts would not be delayed so much.

Scenario: you have some elements and you need to add some actions to them (for example, when user moves mouse cursor over element, or clicks on elements).

This is pretty usual task in web-development. And the first thing that everybody knows is a different event attaching syntax in Internet Explorer and Firefox: first uses element.attachEvent, second — element.addEventListeners. Therefor you need to add code, which would detect what browser is being used and what method to use in each case. In the most popular client script library Prototype it is already standardized and you can always use Event.observe. Let’s benchmark a little.

I’m going to start attaching events from manual detection of which browser is being used:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Attaching events
for (var i = items.length; i--; ) {
if (items[i].addEventListener) {
items[i].addEventListener('click', e_onclick, false);
} else if (items[i].attachEvent) {
items[i].attachEvent('onclick', e_onclick);
}
}
// Detaching events
for (var i = items.length; i--; ) {
if (items[i].removeEventListener) {
items[i].removeEventListener('click', e_onclick, false);
} else if (items[i].detachEvent) {
items[i].detachEvent('onclick', e_onclick);
}
}

This approach shown best times: 188 and 203 ms in Internet Explorer 6 and 7, 125 and 141 ms in Firefox 1.5 and 2.0, and 63 ms in Opera 9, but there is one problem with it — memory leaks: Internet Explorer usually forget to clean up memory, used by event listeners, when you navigating to another page. Therefor all JavaScript frameworks which implement event attaching/detaching functions, provide functionality for removing listeners when you navigating to another page. Let’s test them.

Code for testing Prototype library:

1
2
3
4
5
6
7
8

// Attaching events
for (var i = items.length; i--; ) {
Event.observe(items[i], 'click', e_onclick, false);
}
// Detaching events
for (var i = items.length; i--; ) {
Event.stopObserving(items[i], 'click', e_onclick, false);
}

This is very slow, 6453 ms in Internet Explorer 6 and looks like some memory leaks are still exists (it became slower and slower with the lapse of time) and 365 — 653 ms in other browsers.

There are tons of problems and solutions with adding events (just look at the Advanced event registration models). Some time ago even PPK’s addEvent() Recoding Contest was over (but do not use the winner’s solution because of it’s inefficiency and memory leaks).

Instead of winner’s solution, I decided to test incredible and impertinent solution from Dean Edwards, which even does not use the addeventListener/attachEvent methods, but it is entirely cross-browser!

Used code:

1
2
3
4
5
6
7
8

// Attaching events
for (var i = items.length; i--; ) {
addEvent(items[i], 'click', e_onclick);
}
// Detaching events
for (var i = items.length; i--; ) {
removeEvent(items[i], 'click', e_onclick);
}

Results are as much impressive as when we used manual events attaching, and this approach is extremely fast to use it in real-world applications. Of course, you would say: “Stop, what you are talking about? I don’t want to use additional methods while Prototype is already used in my code!” Calm down, you don’t need to do it, just download Low Pro library (current version is 0.4, stay tuned). Ruby on Rails developers could use UJS Rails Plugin in their applications to improve performance — it uses Low Pro inside.

No	Method	IE 6	IE 7	FF 1.5	FF 2.0	Opera 9
1	`manually`	203	188	125	141	63
2	`prototype.js`	6453	653	547	469	365
3	`addEvent`	783	344	94	141	62

You can review benchmark and get your own results here.

Conclusions

Always use Low Pro along with Prototype.js (of course, if your application uses rich client logic).
Use manual events attaching when you need to get as much as possible speed from your application (for example, when you handling hundreds of elements). But don't forget about memory leaks!
Avoid events attaching whenever it's possible (for example, use :hover CSS selector instead of onmouseover event).
Keep your eyes opened, maybe tomorrow somebody would post another great performance optimization tip.

Links to other parts

Part 1: Adding DOM elements to document
Part 2: Applying styles to elements
Part 3: Attaching events
Part 4: Multiple anonymous functions (will be published soon)
Part 5: Attaching events on demand (will be published soon)
Part 6: Element hide and show (will be published soon)
Part 7: Elements collection enumeration (will be published soon)

The post JavaScript optimization Part 3: Attaching events first appeared on Dmytro Shteflyuk's Home.

JavaScript optimization Part 2: Applying styles to elements

Dmytro Shteflyuk — Tue, 27 Mar 2007 20:02:41 +0000

This is second part of articles cycle devoted to JavaScript optimization. In this post I’ll cover dynamic elements styling and explore a little HTML-rendering process. Also you will find here some tricks on how to make your applications faster.

Scenario: you have elements in your document and you need to change their color, background, or something else related to theirs style. For example, highlight table rows on mouse over or mark them when corresponding checkbox is checked.

And again I know two ways: using styles or set foreground(or background) color directly from JavaScript. Let’s test them before discussion:

1
2
3
4

var items = el.getElementsByTagName('li');
for (var i = 0; i < 1000; i++) {
items[i].className = 'selected';
}

The average result is 187 – 291 ms, for the InternetExplorer 6 it is 512 ms, and in Opera 9 it is 47 ms.

1
2
3
4
5

var items = el.getElementsByTagName('li');
for (var i = 0; i < 1000; i++) {
items[i].style.backgroundColor = '#007f00';
items[i].style.color = '#ff0000';
}

I got results starting from 282 ms in Opera and ending with 1709 ms in Internet Explorer 6.

Result are clean and easy to understand:

No	Method	IE 6	IE 7	FF 1.5	FF 2.0	Opera 9
1	`element.className`	512	187	291	203	47
2	`element.style.color`	1709	422	725	547	282

You can view benchmark test and get your own results here.

Looks like this is simplest optimization tip, but... there is one issue with Internet Explorer -- page update. Are you remember scenario described in the beginning of chapter, about onmouseover? When you change element's class name, your code is much faster, but the page would not be updated immediately. Look at this example. Try to click "Generate elements" when "element.className" radio button is selected. Then move your mouse pointer over the items, scroll list to the bottom, move mouse again (for slow machines items number would be less than default, for fast ones - greater). Have you noticed, that background changes not so fast as the mouse pointer moves? Now switch selected radio button to "element.style.color". Background changing smoothly, right?

At the bottom of page you see the number of onmouseover events triggered and average time spent to dispatch them. As you noticed, first radio button works two times faster! Why it looks slower? I think it is because when you changed className property Internet Explorer isn't actually updates UI, but placed event in update queue. If you have other ideas, please post comments.

Anybody, who read article up to this place, would probably say: "Hey, guy, you are cheating. Where is the :hover?". I'm hurry up to fix this shortcoming and describing this case right now. First, this thing is not working in the Internet Explorer 6 (and don't ask me "who need it?"). But this is not most difficult problem, performance of this issue is much worse. Even don't want to comment it, just select third radiobutton on previously given page and move your mouse in Internet Explorer 7 and Opera 9 (Firefox works great).

Conclusions

Use className when it's possible. It grants you more flexibility and control over site look.
If you have many items in your container element, and you need really fast UI, set styles directly through element's style property.

Links to other parts

Part 1: Adding DOM elements to document
Part 2: Applying styles to elements
Part 3: Attaching events
Part 4: Multiple anonymous functions (will be published soon)
Part 5: Attaching events on demand (will be published soon)
Part 6: Element hide and show (will be published soon)
Part 7: Elements collection enumeration (will be published soon)

The post JavaScript optimization Part 2: Applying styles to elements first appeared on Dmytro Shteflyuk's Home.

Ruby on Rails related cheat sheets

Dmytro Shteflyuk — Fri, 17 Nov 2006 05:32:47 +0000

There are couple of cheat sheets about Ruby on Rails and related technologies can be found in the web. I decided to collect all of them (almost all) in one post just to keep them in mind. All of them are in full color PDFs or PNGs.

Ruby on Rails Development Cheat Sheets

JavaScript Development Cheat Sheets

Databases / SQL Cheat Sheets

MySQL Cheat Sheet

Web Development Cheat Sheets

Other Cheat Sheets

The post Ruby on Rails related cheat sheets first appeared on Dmytro Shteflyuk's Home.