Степан Резников

Hunting for geeks

2011-08-04T20:26:00.003+04:00

Помню в Яндекс.Почте мы прикололись и вывели в консоль браузера сообщение:
«Любишь заглядывать в консоль? А может и js умеешь писать? http://company.yandex.ru/job/vacancies/interface_dev_mail.xml».

А сегодня случайно заметил на TechCrunch в response headers:
X-hacker: If you're reading this, you should visit automattic.com/jobs and apply to join the fun, mention this header.

Nice.

Что мне не хватает в Гугл+, Твиттере, Фейсбуке и многих других сервисах

2011-07-21T01:17:00.005+04:00

Слишком много шума.

В основную ленту попадают все посты от всех людей, которых я зафрендил/зафоловил. Я же хочу видеть там посты только от близких друзей и супер-интересных мне людей. Все остальное, менее важное, я посмотрю потом, когда поеду на метро и вдруг забуду дома книжку.

Покажите главное сначала. Дайте мне возможность контролировать что важно для меня.

Нет, все сервисы устроены наоборот — сначала вываливают тебе все говно на которое ты подписался, а ты продираешься сквозь него к важным для тебя постам. Почему ни один сервис не дает возможность начеррипикать важные для меня источники, сформировать must-read-ленту и поставить ее как основную?

Да, в Гугл+ можно сделать круг «Супер», а в Твиттере — список «Пупер». Дайте мне поставить это по-дефолту, чтобы я видел это сразу, заходя в сервис с любого компа и любого устройства.

Неблокирующая загрузка кнопки +1

2011-07-14T17:16:00.004+04:00

Хотите установить на свой сайт гугловую кнопку +1? Имейте в виду, что она может негативно повлиять на скорость загрузки страниц. В частности, оригинальный сниппет содержит тег <script>, который блокирует рендеринг и загрузку последующих ресурсов на странице. К счастью, эта проблема легко решается.

<g:plusone></g:plusone> остается в том месте где должна появиться кнопка. Код неблокирующей загрузки лучше поместить перед закрывающим тегом </body>:

<script>
(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.async = true;
    g.src = 'https://apis.google.com/js/plusone.js';
    g.text = '{lang:"nl"}';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>

Код неблокирующей загрузки написан Матиасом, пофиксен для IE мной.

UPDATE: Гугл выпустил неблокирующую версию кнопки +1.

Книги по клиентской оптимизации

2010-02-25T02:04:00.002+03:00

Эти две книги Стива Содерса я прочитал еще осенью прошлого года. Вообще для меня вопросы клиентской оптимизации вышли на передний план в прошлом году, что отчасти связано с переходом в Яндекс, где степень повернутости на оптимизации гораздо выше, чем в Студии, отчасти с тем, что сейчас это в целом мощный тренд, и все сообщество веб-разработчиков повернуто на этой теме.

Steve Souders - High Performance Web Sites: Essential Knowledge for Front-End Engineers

Думаю, что эта книга обязательна к прочтению всеми фронтэндерами. Она небольшая и содержит 14 правил, которые помогут сделать ваш сайт быстрее. Конечно, многие правила вы наверняка уже знаете или хотя бы слышали о них, однако после прочтения этой книги все обрывки знаний уложатся в систему, восполнятся какие-то пробелы. Скажем, для меня новыми стали знания про CDN (Content Delivery Networks) и ETags. В завершение Стив устраивает своеобразную «порку» десяти крупнейших сайтов и на примере показывает, как определять требующие улучшения места, и каких результатов можно добиться, применив описанные в книге правила.

Steve Souders - Even Faster Web Sites

Хотите выжать из своих сайтов еще больше производительности и каждая миллисекунда у вас на счету? Вторая книга Содерса предлагает нам самые передовые идеи по убыстрению сайтов. В первую очередь она понравится тем, ~~у кого шило в одном месте~~ кто любит экспериментировать. Зачастую в книге предлагается проблема, возможные подходы к ее решению, за и против каждого подхода, потенциальные засады и пути обхода, и под конец Стив суммирует все свои тесты в дерево решений, которое позволяет выбрать подходящий подход в зависимости от обстоятельств. Несмотря на то, что Содерс сам умеет увлекательно излагать материал, шесть глав написаны приглашенными экспертами (Крокфорд, Закас, Стефанов), что, несомненно, бодрит.

***

Тем временем загрузил в свою читалку две книги Николая Мациевского — «Разгони свой сайт» и «Реактивные веб-сайты». Плюс очень жду новую книгу Николаса Закаса High Performance JavaScript.

Cоздание элементов из HTML-строк в jQuery 1.4

2010-02-12T10:20:00.002+03:00

Еще немного на тему простого шаблонирования в JavaScript

Используя jQuery, я довольно часто создаю элементы из HTML-строк с последующим добавлением атрибутов и навешиванием обработчиков событий. Примерно так:

$("<input/>")
    .attr({
        type: "text",
        name: "city"
    })
    .val("Moscow")
    .focusin(function() {
        $(this).addClass("active");
    })
    .focusout(function() {
        $(this).removeClass("active");
    })
    .appendTo("form");

В jQuery 1.4 есть приятное нововведение: вторым аргументом можно передать объект со свойствами создаваемого элемента. Код становится проще и аккуратнее:

$("<input/>", {
    type: "text",
    name: "city",
    val: "Moscow",
    focusin: function() {
        $(this).addClass("active");
    },
    focusout: function() {
        $(this).removeClass("active");
    }
}).appendTo("form");

Этот объект может содержать любые свойства понимаемые методом attr(), там же можно навесить обработчики событий, а также, не отходя от кассы, можно задать значения для методов val, css, html, text, data, width, height и offset.

Кроме того, в такой записи неплохо смотрится и более сложный шаблон с вложенным элементом:

$("<a/>", {
    href: "/test/",
    "class": "my_link",
    html: $("<img/>", {
        src: "test.gif",
        width: 60,
        height: 30
    }),
    click: function() {
        doSomething();
    }
}).appendTo("body");

JavaScript Shortcuts Library

2010-01-27T17:57:00.007+03:00

Выложил библиотеку для создания клавиатурных шорткатов JavaScript Shortcuts Library (jQuery plugin). Пригодится при разработке больших веб-приложений, а также написании игр на JavaScript.

Библиотека приятна и проста в использовании. Добавляем шорткат:

$.Shortcuts.add({
    type: 'down',
    mask: 'Ctrl+A',
    handler: function() {
        debug('Ctrl+A');
    }
});

Добавляем еще один:

$.Shortcuts.add({
    type: 'up',
    mask: 'Shift+B',
    handler: function() {
        debug('Shift+B');
    }
});

Начинаем реагировать на шорткаты:

$.Shortcuts.start();

Поддерживаются три типа событий, по которым могут срабатывать обработчики:

down — на нажатие клавиши или сочетания клавиш
up — на отпускание
hold — на нажатие и удержание (обработчик будет вызван сразу после нажатия и потом будет вызываться с некоторой периодичностью пока нажата клавиша)

Строка задающая сочетание клавиш должна состоять из имен клавиш разделенных плюсами. Может быть не более одной клавиши отличной от Ctrl, Shift или Alt. Строка нечувствительна к регистру. Примеры: "Esc", "Shift+Up", "ctrl+a".

Кроме того, можно создавать несколько списков шорткатов, а затем, в зависимости от ситуации на странице, активизировать определенный список.

Добавляем шорткат в список "another":

$.Shortcuts.add({
    type: 'hold',
    mask: 'Shift+Up',
    handler: function() {
        debug('Shift+Up');
    },
    list: 'another'
});

Переключаемся на список шорткатов "another":

$.Shortcuts.start('another');

Также можно удалять шорткаты:

$.Shortcuts.remove({
    type: 'hold',
    mask: 'Shift+Up',
    list: 'another'
});

Останавливаем работу шорткатов (делается unbind навешенных обработчиков событий):

$.Shortcuts.stop();

Поддерживаемые клавиши:

Модификаторы: Ctrl, Shift, Alt
Цифры: 0—9
Буквы: A—Z (case-insensitive)
Специальные клавиши: Backspace, Tab, Enter, Pause, CapsLock, Esc, Space, PageUp, PageDown, End, Home, Left, Up, Right, Down, Insert, Delete, F1—F12, ? (знак вопроса), минус, плюс

Буду рад замечаниям и предложениям по улучшению.

Простое шаблонирование в JavaScript

2010-01-22T14:44:00.003+03:00

Задача: в JS на основе имеющихся данных сгенерить блок (кусок хтмл), заполнить его этими данными и вставить в DOM.

Например, нам нужно создать простой блок с превьюшкой и подписью. Для него мы каким-то образом получили вот такие данные:

var data = {
    url: '/test/',
    thumb_src: 'test.gif',
    thumb_width: 60,
    thumb_height: 30,
    caption: 'Трам-парам!'
};

В итоге для этих данных хотим получить вот такой хтмл:

<div class="preview"><p class="image"><a href="/test/"><img src="test.gif" width="60" height="30"/></a></p><p class="caption">Трам-парам!</p></div>

Встают вопросы: в каком виде хранить шаблон и как впердолить в этот шаблон наши данные?

Вручную создавать элементы (createElement) и аппендить их (appendChild) довольно муторно. Получается громоздко и шаблон размазывается тонким слоем по JS-коду.

Часто делают конкатенацию кусочков шаблона вперемешку с данными:

var result = '<div class="preview"><p class="image"><a href="' + data.url + '"><img src="' + data.thumb_src + '" width="' + data.thumb_width + '" height="' + data.thumb_height + '"/></a></p><p class="caption">' + data.caption + '</p></div>';

Тоже не ахти — постоянно путаешься в этом нагромождении одинарных и двойных кавычек, к тому же хочется все-таки иметь шаблон в чистом виде.

Я использую способ, который подсмотрел в лекциях Дугласа Крокфорда. Добавляем в прототипы объекта String метод supplant, который в строке ищет выражения заключенные в фигурные скобки {}. Каждое найденное выражение используется как ключ к переданному объекту, и, если по этому ключу лежит строковое или числовое значение, то выражение в фигурных скобках заменяется этим значением.

/**
 * supplant() does variable substitution on the string. It scans
 * through the string looking for expressions enclosed in {} braces.
 * If an expression is found, use it as a key on the object,
 * and if the key has a string value or number value, it is
 * substituted for the bracket expression and it repeats. 
 */
String.prototype.supplant = function(o) {
    return this.replace(/{([^{}]*)}/g,
        function(a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

Теперь мы можем сделать так:

var template = '<div class="preview"><p class="image"><a href="{url}"><img src="{thumb_src}" width="{thumb_width}" height="{thumb_height}"/></a></p><p class="caption">{caption}</p></div>'; var result = template.supplant(data);

Еще один пример (подстановка данных в сообщение пользователю):

var template = 'Take train {number} from {from} to {to}.';

var data = {
    from: 'Madrid',
    to: 'Barcelona',
    number: '78A'
};

var result = template.supplant(data);

Coders at Work

2010-01-05T14:18:00.008+03:00

Этот сборник интервью с известными программистами я решил прочитать по совету Джеффа Атвуда, автора клевого блога Coding Horror. Умение Питера Сибела задавать животрепещущие вопросы, помноженное на 15 самых влиятельных программистов, дало на выходе захватывающую книгу, от которой с трудом отрываешься только в четыре часа ночи.

Какие скиллы важны для программистов, и как их улучшить? Насколько важно образование, полученное в учебном заведении? На что собеседники Сибела обращают внимание при поиске и найме программистов? Как разобраться в чужом коде? Как улучшить совместную работу с коллегами? Эти и многие другие темы затронуты в книге. Помимо обсуждения общих вопросов, чуваки рассказывают увлекательные истории о проектах, благодаря которым они стали известными.

Чуть ли не всю книгу хочется цитировать. Я понавыписывал целую кучу цитат, и несколькими из них хочу поделиться с вами (из первых трех интервью с Завински, Фитцпатриком и Крокфордом).

Читать цитаты

Jamie Zawinski

Author of XEmacs and early Netscape/Mozilla hacker

О работе в компании Netscape

It was really a great environment. I really enjoyed it. Because everyone was so sure they were right, we fought constantly but it allowed us to communicate fast. Someone would lean over your cubicle and say, “What the fuck did you check in; that’s complete bullshit—you can’t do it that way. You’re an idiot.” And you’d say, “Fuck off!” and go look at it and fix it and check it in. We were very abrasive but we communicated fast because you didn’t have to go blow sunshine up someone’s ass and explain to them what you thought was wrong—you could say, “Hey, that’s a load of shit! I can’t use that.” And you’d hash it out very quickly. It was stressful but we got it done pretty quickly.

О запуске первой версии Netscape

That first night when we put up the .96 beta, we were all sitting around the room watching the downloads with sound triggers hooked up to it—that was amazing. A month later two million people were running software I’d written. It was unbelievable. That definitely made it all worthwhile—that we’d had an impact on people’s lives; that their day was more fun or more pleasant or easier because of the work we’d done.

Overengineering и запуск проектов

Zawinski: [...] They were being extremely academic about their project. They were trying to approach it from the DOM/DTD side of things. “Oh, well, what we need to do is add another abstraction layer here and have a delegate for this delegate for this delegate. And eventually a character will show up on the screen.”

Seibel: Overengineering seems to be a pet peeve of yours.

Zawinski: Yeah. At the end of the day, ship the fucking thing! It’s great to rewrite your code and make it cleaner and by the third time it’ll actually be pretty. But that’s not the point—you’re not here to write code; you’re here to ship products.

Seibel: Folks engaged in overengineering usually say, “Well, once I’ve got this framework in place everything will be easy after that. So I’ll actually save time by doing this.”

Zawinski: That is always the theory.

Seibel: And there are times when that theory is true, when someone has good sense and the framework isn’t too elaborate, and it does save time. Is there any way you can tell which side of the line you’re on?

Zawinski: [...] If you spend the time to build the perfect framework that’s going to do what you want and that’s going to carry you from release 1.0 through release 5.0 and everything’s going to be great; well guess what: release 1.0 is going to take you three years to ship and your competitor is going to ship their 1.0 in six months and now you’re out of the game. You never shipped your 1.0 because someone else ate your lunch.

Your competitor’s six-month 1.0 has crap code and they’re going to have to rewrite it in two years but, guess what: they can rewrite it because you don’t have a job anymore.

О сходстве программирования и писательства

Seibel: Do you find that programming and writing are similar intellectual exercises?

Zawinski: In some ways, yeah. Programming is obviously much more rigid. But as far as the overall ability to express a thought, they’re very similar. Not rambling, having an idea in your head of what you’re trying to say, and then being concise about it. I think that kind of thinking is the overlap between programming and writing prose.

О комментариях в коде

I always wish people would comment more, though the thing that makes me cringe is when the comment is the name of the function rephrased. Function’s called push_stack and the comment says, “This pushes to the stack.” Thank you.

You’ve got to say in the comment something that’s not there already. What’s it for? Either a higher-level or a lower-level description, depending on what’s most important. Sometimes the most important thing is, what is this for? Why would I use it? And sometimes the most important thing is, what’s the range of inputs that this expects?

Не нужно стесняться собственного незнания чего-либо (моя любимая цитата)

[...] I think one thing that’s really important is to not be afraid of your ignorance. If you don’t understand how something works, ask someone who does. A lot of people are skittish about that. And that doesn’t help anybody. Not knowing something doesn’t mean you’re dumb—it just means you don’t know it yet.

О самом главном навыке программистов

Seibel: Is there a key skill programmers must have?

Zawinski: Well, curiosity—taking things apart. Wanting to know what’s going on under the hood. I think that’s really the basis of it. Without that I don’t think you get very far. That’s your primary way of acquiring knowledge. Taking something apart and looking at it is how you learn to build your own. At least for me. I’ve read very few books about computers. My experience has been digging through source code or reference manuals. I’ve got a goal and, alright, to do this I need to know what this thing does and what this thing does. And I’ll just sort of random-walk through that until I find where I’m going.

Снова о сходстве программирования и писательства

Zawinski: [...] So math was never really my forte.

But I wouldn’t go so far as to say you don’t need that to be a programmer. There’s obviously different kinds of programming. Without people who are not like me none of this would exist. But I’ve always seen much more in common with writing prose than math. It feels like you’re writing a story and you’re trying to express a concept to a very dumb person—the computer—who has a limited vocabulary. You’ve got this concept you want to express and limited tools to express it with. What words do you use and what does your introductory and summary statement look like? That sort of thing.

The issue of taste really fits in there. You can have a piece of text describing something that describes it correctly or it can describe it well, with some flair. And the same thing’s true of programs. It can get the job done or it can also make sense, be put together well.

Seibel: And why does that matter? Is that just for the satisfaction of it or is tasteful code also better in some practical way?

Zawinski: To a large degree, tasteful and maintainable are similar. Or very closely related. One of the things that makes a piece of writing tasteful is if it’s structured in a way that’s easy to grasp. Are the facts loaded up at the front or are they scattered around? If you’re referring back—if you’re flipping through a book, can you figure out where in the book is the thing you kind of remember? “This was somewhere near the middle because that’s where he talked about this thing.” Or is it just scattered all through. And that’s the same sort of thing that goes on with programming a lot.

Brad Fitzpatrick

Writer of LiveJournal, OpenID, memcached, and Perlbal

Отличный совет программистам

Seibel: Do you have any advice for self-taught programmers?

Fitzpatrick: Always try to do something a little harder, that’s outside your reach. Read code. I heard this a lot, but it didn’t really sink in until later. There were a number of years when I wrote a lot of code and never read anyone else’s. Then I get on the Internet and there’s all this open source code I could contribute to but I was just scared shitless that if it wasn’t my code and the whole design wasn’t in my head, that I couldn’t dive in and understand it.

О соглашениях по стилю написания кода

Seibel: [...] What are the first warning signs of bad code?

Fitzpatrick: Well, I’m particularly snooty now, having worked at Google with really strict style guidelines in all languages. On our top six or seven languages, there’s a really strict style guide that says, “This is how we lay out our code. This is how we name variables. This is how we do spacing and indentation, and these patterns and conventions you use, and this is how you declare a static field.”

We’ve started putting these online too, just as a reference for external contributors contributing to our projects. We wanted to have a documented policy so we don’t just say, “We don’t like your style.”

Now when I work on projects in C, the first thing I do is add a style guide. Once a project is mature and has a lot of people hacking on it, they’ll have a style guide. It’s not even always written, but the programmer just respect the style of code written already. Maybe they don’t like the brace style, but fuck it, it’s more important to have it consistent within a file, within a project, than to do it your favorite way.

Как устроен процесс рецензирования кода в Гугле

Seibel: What about code ownership? Is it important for people to own code individually or is it better for a team to share ownership?

Fitzpatrick: I don’t think code should be owned. I don’t think anyone really thinks that. The way it works within Google is that it’s one massive source tree, one root, and one unified build system across all of it. And so anyone can go and change anything. But there are code reviews, and directories have owners, always at least two people, just in case some quits or is on vacation.

To check in you need three conditions met: You need someone to review it and say it looks good. You need to be certified in the language—basically you’ve proven you know the style of this language—called “readability.” And then you also need the approval above from somebody in the owner’s file in that directory. So in the case that you already are an owner of that directory and you have readability in that language, you just need someone to say, “Yeah, it looks good.” And it’s a pretty good system, because there tends to be a minimum of two, up to twenty, thirty owners. Once you work on a code base for a while, someone just adds you to owners. I think it’s a great system.

Быть энтузиастом и иметь свои проекты

Seibel: So you’ve hired for your own company, and I assume you’ve been involved in hiring at Google. How do you recognize a great programmer?

Fitzpatrick: I often look for people that have done, like, a lot of stuff on their own that wasn’t asked of them. Not just their school project or just what their previous employer had them do. Somebody who was passionate about something and had some side project. How did they maintain it and how serious did they get with it? Or do they do a lot of quick hacks and abandon them?

Все приложения уйдут в веб

Seibel: Do you have any interest in writing better desktop software?

Fitzpatrick: The problem is, no one uses it. You want to write stuff people use, which comes down to web apps. I lost my laptop the other day and people were like, “Oh, my God, did you lose stuff?” I had no files on there. It was an Internet terminal. And it was an encrypted disk so I’m not worried about my password or cookies or anything like that. People won’t download programs, I don’t think.

Быть общительным

Seibel: And are there skills apart from programming itself that you think would-be programmers should develop?

Fitzpatrick: There’s communication, but I’m not sure that’s something you can really practice. Deal with people on mailing lists a lot. Written communication style goes a long way. But that’s a general life thing, right? There was some study about who was successful after high school. Was it the smart kids or the social kids? It turned out that it was the social kids who ended up making all the money in life, not the people with the good grades. I thought that was interesting.

Douglas Crockford

JSON founder, JavaScript architect at Yahoo!

Читаем код (очень понравилось, предложу ребятам в Яндексе)

Seibel: These days you’re a JavaScript architect and evangelist here at Yahoo!, so part of your job, presumably, is to tell Yahoo! JavaScript programmers, “Here’s how you should do it.” Does your job also cover general good design practice and good coding practice?

Crockford: One of the things I’ve been pushing is code reading. I think that is the most useful thing that a community of programmers can do for each other—spend time on a regular basis reading each other’s code. There’s a tendency in project management just to let the programmers go off independently and then we have the big merge and if it builds then we ship it and we’re done and we forget about it.

One of the consequences of that is that if you have weak or confused programmers you’re not aware of their actual situation until much too late. And so the risks to the project, that you’re going to have to build with stuff that’s bad and the delays that that causes, that’s unacceptable. The other thing is that you may have brilliant programmers on the project who are not adequately mentoring the other people on the team. Code reading solves both of those problems.

Seibel: Can you talk a bit about how you conduct a code reading?

Crockford: At each meeting, someone’s responsible for reading their code, and they’ll walk us through everything, and the rest of us will observe. It’s a really good chance for the rest of the team to understand how their stuff is going to have to fit with that stuff.

We get everybody around the table; everybody gets a stack of paper. We also blow it up on the screen. And we all read through it together. And we’re all commenting on the code as we go along. People say, “I don’t understand this comment,” or, “This comment doesn’t seem to describe the code.” That kind of stuff can be so valuable because as a programmer you stop reading your own comments and you’re not aware that you’re misdirecting the reader. Having the people you work with helping to keep your code clean is a huge service—you find defects that you never would’ve found on your own.

I think an hour of code reading is worth two weeks of QA. It’s just a really effective way of removing errors. If you have someone who is strong reading, then the novices around them are going to learn a lot that they wouldn’t be learning otherwise, and if you have a novice reading, he’s going to get a lot of really good advice.

And it shouldn’t be something that we save for the end. Back in the old days, we would schedule a code reading just as we were finishing a project and usually it would be canceled because we were late. I now believe that code reading should be happening all the time throughout the life of the project. That’s something that took me a while to figure out but there are so many benefits that come from that.

For one thing it makes it easier to track the project, because we can actually see what progress people are making. And we can see much sooner if they’re going off the rails or not.

I’ve managed projects where we’re up against a deadline and we had people saying, “Yeah, I’m almost done,” and then you get the code, and there’s nothing there, or it’s crap, or whatever, and they’re nowhere close to done. In management, those are the experiences you hate the most and I think code reading is the best way of not getting trapped like that.

Seibel: So say we’re doing a code reading of some of my code. I bring printouts and we put it up on the screen. Then what? Do I literally read it out loud?

Crockford: Yeah, go through it line by line, and you’ll be doing commentary on it. This is what’s supposed to be happening here. If we have time, we’ll go line by line.

Seibel: Do you find that you have to teach people how to do code readings? I can imagine it’d be hard to find the right balance of being critical enough to be worthwhile without making the code’s author feel personally attacked.

Crockford: Yeah, it requires a lot of trust on the part of the team members so there have to be clear rules as to what’s in bounds and what’s not. If you had a dysfunctional team, you don’t want to be doing this, because they’ll tear themselves apart. And if you have a dysfunctional team and you’re not aware of it, this will reveal it pretty quickly. There’s a lot that you can learn, a lot that’s revealed by this process. It feels unnatural at first, although once you get into the rhythm of it, it feels extremely natural.

Another aspect is writing your code such that it can be read. Neatness counts, as it turns out, and style is important. And all of those things will increase the quality of the code base going forward and increase the competence of the programming community.

Читабельность прежде всего

[...] I think it’s really difficult to write good code in a sloppy manner. By good code, I mean it’s going to be readable. At one level, it doesn’t matter what it does to a machine if I can’t figure out what it does, so it might turn out that the code is amazing in terms of its efficiency, or its compactness, or some other metric which I don’t care about.

Readability of code is now my first priority. It’s more important than being fast, almost as important as being correct, but I think being readable is actually the most likely way of making it correct. So I think it’s probably not good code and they probably made the wrong trade-offs if the code turned out to be in the state that it’s not easily readable.

Собираем программы из готовых блоков

I think the next leap, we don’t know what the name of it is yet, but I think it’s something related to mash-ups where we can casually take bits of program and put them together and immediately make new programs. We’ve been talking for decades about a model of programming in which we snapped programs together like LEGO and make stuff. That hasn’t happened yet. But I think it is starting to happen now and the place it’s happening is in JavaScript, which is the least likely place.

Снова о том, что надо быть общительным

Seibel: When you’re hiring programmers, how do you recognize the good ones?

Crockford: The approach I’ve taken now is to do a code reading. I invite the candidate to bring in a piece of code he’s really proud of and walk us through it.

Seibel: And what are you looking for?

Crockford: I’m looking for quality of presentation. I want to see what he thinks is something he’s proud of. I want to see evidence that in fact he is the author of the thing that he’s defending. I find that is much more effective than asking them to solve puzzles or trivia questions. I see all that kind of stuff as useless. But how effectively they can communicate, that’s a skill that I’m hiring for.

Seibel: What about advice for someone who’s actually getting a C.S. degree who wants to work as a programmer?

Crockford: I would focus on the communication aspect. Learn to write; learn to read.

My advice to everybody is pretty much the same, to read and write. I generally don’t hire for specific skills. Until very recently, you couldn’t hire good JavaScript programmers. They were extremely rare. There are a lot of really good ones out there now, but that’s a fairly recent thing. So until that happened, I would just hire for quality. Are you a good Java programmer, a good C programmer, or whatever? I don’t care. I just want to know that you know how to put an algorithm together, you understand data structures, and you know how to document it. If you can do that, you should be able to figure out JavaScript.

input type="file" multiple

2009-12-21T16:16:00.005+03:00

Оказывается, Safari 4, Chrome 3 и Firefox 3.6 Beta 4 поддерживают выбор сразу нескольких файлов с помощью атрибута multiple.

<input name="att" type="file" multiple="true"/>

Сафари рядом с кнопкой показывает количество выбранных файлов, плюс при поднесении мышки вылезает тултип с названиями файлов:

Еще более удивительно то, что Opera уже давно поддерживает multiple-файлы с помощью атрибутов min и max.

<input name="att" type="file" min="1" max="99"/>

При этом в Опере меняется название кнопки.

Обычный инпут:

С атрибутами min и max:

Очень хочется верить, что multiple заимплементируют в IE 9. Тогда можно будет, наконец, полностью отказаться от дурацкой флешки.

Результаты домашки №1

2009-11-02T00:50:00.006+03:00

Ну что же, давайте подведем итоги первой домашки :)

Задача 1

Эта задача вызвала некоторые затруднения почти у всех принявших участие. Я заметил несколько типичных проблем:

1. Велосипедизм. Как верно заметил nop, задача сводится к классической задаче поиска подстроки в строке. Многие это почувствовали, однако поленились погуглить и решили изобрести свой велосипед. Существует огромное количество алгоритмов поиска подстроки, самый простейший (brute force algorithm) можно закодить так:

var subArrayIndex = function(haystack, needle) {
   var i, j;
   var m = haystack.length;
   var n = needle.length;

   for (i = 0; i <= m - n; i += 1) {
      for (j = 0; j < n && needle[j] === haystack[i + j]; j += 1);
      if (j >= n) {
          return i;
      }
   }

   return -1;
};

2. Проверка написанного кода только на входных данных приведенных в задании. Каждое второе решение выдавало правильный результат для массивов приведенных в задании в качестве примера, но оказывалось неработающим при небольшой модификации входных данных. Никогда не стоит сразу успокаиваться, получив верный результат для одного набора входных данных. Нужно подумать, в чем в задаче может быть засада и проверить всякие «дерьмовые» случаи — не сломают ли они ваш алгоритм.

3. Сравнение с приведением типов. Практически все для сравнения элементов массивов использовали == и !=. Ребята, если вы еще не знаете, знайте: в яваскрипте == и != делает приведение типов. Это означает, например, что 1 == '1' выдаст true. Для сравнения без приведения типов используйте === и !==.

Задача 2

Вторая задача была на замыкание и проблем не вызвала. Просто приведу свое решение:

var toArrayOfFunctions = function(array) {
    var makeFunction = function(item) {
        return function() {
            return item;
        };
    };
    var i;
    var len = array.length;
    var functions = [];
    for (i = 0; i < len; i += 1) {
        functions[i] = makeFunction(array[i]);
    }
    return functions;
};

UPD: В одном из решений второй задачи заметил еще проблему, которую назовем «порча входных данных». Нужно помнить, что объекты (массивы в том числе) передаются по ссылке, а не по значению. Если в функции вы делаете какие-то хирургические операции с принятым в аргументах объектом, то вы меняете непосредственно переданный объект.

Пример:

var add1 = function(array) {
    for (var i = 0; i < array.length; i += 1) {
        // Трах-бабах-хуяк - портим переданный массив
        array[i] = array[i] + 1;
    }
    return array;
};

var a = [1, 2, 3];
var b = add1(a); // a и b теперь один и тот же массив [2, 3, 4]

Домашка №2

2009-10-23T20:41:00.002+04:00

Уважаемые яваскриптеры и яваскриптизерши, держите новую домашку на выходные. На этот раз кодить ничего не нужно. Предлагаю ответить вам на один вопрос. Что вам нравится и не нравится в яваскрипте? Пожалуйста, похвалите и поругайте яваскрипт. Вознесите его к небесам и опустите в низины кала.

Нет отрицательной логике

2009-10-20T22:36:00.004+04:00

Что общего у этого кусочка яваскрипта (время от времени встречаю такое в чужом коде):

function init(noLoginForm) {
    if (!noLoginForm) {
        ...
    }
}

и этого фрагмента формы (постоянно сталкиваюсь на сайтах):

Как вы уже, конечно, догадались, это отрицательная логика переменной и чекбокса. Не знаю как вы, а я иногда подвисаю, пытаясь разобраться, как это работает. Во всяком случае, чтобы врубиться в отрицательную логику, мне приходится затратить немного больше мозгового процессорного времени, поэтому я всегда предпочитаю положительную логику:

function init(showLoginForm) {
    if (showLoginForm) {
        ...
    }
}

(Не вижу ничего плохого в том, чтобы по умолчанию чекбокс был зажженным.)

Кстати, думаю, именно по этой причине в Гугл Ридире чекбокс Mark as unread переделали в Mark as read.

Домашка №1

2009-10-15T16:37:00.003+04:00

По примеру Сергея тоже хочу загрузить вас домашкой :) Не пугайтесь, задания не сложные (пока). Итак, сегодня две задачки по яваскрипту.

Задача 1

Написать метод, который принимает два массива в качестве параметров и возвращает позицию, начиная с которой второй параметр входит как подмассив в первый параметр.

Пример. Первый массив: [4, 8, 15, 16, 23, 42], второй массив: [15, 16], результат: 2

Задача 2

Есть массив с числами. Нужно написать метод, который трансформирует исходный массив в массив функций, которые возвращают исходные числа.

Пример. На входе: [4, 8, 15], на выходе: [function() {return 4;}, function() {return 8;}, function() {return 15;}]

Откуда берутся веб-разработчики?

2009-10-10T17:42:00.000+04:00

Думаете это обычный гимнастический мяч валяется возле моего рабочего стола? А вот и нет! Это яйцо, из которого скоро вылупится новый веб-разработчик.

Ajax со вкусом апельсина

2009-09-10T19:03:00.004+04:00

Купил на днях в калифорнийском магазине вот такое средство для мытья посуды :)

Улыбаемся и машем

2009-08-28T01:05:00.004+04:00

На мотив Yellow Submarine: «Запустили мы видеописьмо, видеописьмо, видеописьмо. Вместе дружно пробуем его, тестируем его, о-го-го-го-го!»

Теперь прямо в Яндекс.Почте можно записать видеоролик, который выложится на Яндекс.Видео, а секретная ссылка на этот ролик вставится в письмо. Все вместе это называется «видеописьмо».

Однопиксельные прозрачные уголки

2009-08-06T15:12:00.003+04:00

Часто (особенно для небольших блоков) достаточно лишь обозначить скругления. Сделать это можно однопиксельными уголками, которые обычно реализуют с помощью четырех элементов абсолютно спозиционированных по углам блока.

Есть более крутой способ, суть его в следующем:

Упрощенный код для понимания идеи:

.corners {
    background-color: #80aaff;
    margin: 0 1px;
    padding: 1px 0;
}

.corners-i {
    background-color: #80aaff;
    margin: 0 -1px;
}

Чтобы применить этот подход к инлайновым и флоатным элементам и добиться кроссбраузерности, нужно написать еще немного CSS. Я подготовил страничку, где можно посмотреть детали реализации.

Достоинства способа:

Всего лишь один доп. элемент.
Уголки получаются прозрачные, а значит не нужно их «красить» в цвет фона.
Нет JS, экспрешенов, спрайтов.

Недостатком, конечно, является ограничение радиуса скругления в 1 пиксель :)

Рассмотренный способ отлично сочетается с бордер-радиусом, то есть, в браузерах поддерживающих border-radius используем border-radius, в остальных браузерах задействуем доп. элемент .corners-i и делаем однопиксельные уголки.

border-radius спешит на помощь

2009-06-24T22:30:00.015+04:00

В соавторстве с Вадимом Макишвили

Для реализации скругленных уголков мы искали максимально легкое решение — отсутствие дополнительной разметки, минимум CSS и JS. Конечно, есть очень мощные средства, например, rocon, но нам они показались избыточными и громоздкими.

Идея была в том, чтобы использовать CSS-свойство border-radius, которое поддерживают некоторые прогрессивные браузеры:

Firefox начиная с версии 1.0 (~24% пользователей)
Safari начиная с 3.0 + Chrome (~2%)
Konquerer (~0,05%)

Итого, для ~25% пользователей уголки можно рисовать средствами браузера — уже неплохо.

Смешно, но свойство border-radius, которое есть в CSS3, пока не поддерживается ни одним браузером. Однако, некоторые браузеры поддерживают аналогичные проприетарные свойства, например, -moz-border-radius в Firefox.

.corners {
    /* Возможно какой-нибудь браузер в будущем, будем надеяться IE */
    border-radius: 4px;
    /* WebKit (Safari/Chrome) */
    -webkit-border-radius: 4px;
    /* KHTML (Konquerer) */
    -khtml-border-radius: 4px;
    /* Возможно Opera в будущем */
    -opera-border-radius: 4px;
    /* Gecko (Firefox) */
    -moz-border-radius: 4px;
}

Для остальных браузеров, не поддерживающих border-radius, будем яваскриптом вставлять доп. элементы для реализации уголков.


// Проверяет, поддерживает ли элемент elem CSS-свойство border-radius.
var isBorderRadiusSupported = function (elem) {
    var s = elem.style;
    return typeof s.borderRadius === "string" ||
           typeof s.WebkitBorderRadius === "string" ||
           typeof s.KhtmlBorderRadius === "string" ||
           typeof s.OperaBorderRadius === "string" ||
           typeof s.MozBorderRadius === "string";
};

// Добавляет внутрь элемента elem доп. элементы реализующие уголки.
var wrapInCorners = function (elem) {
    // Реализуем уголки любым известным способом
    $(elem).prepend('<i class="lt"/><i class="rt"/><i class="lb"/><i class="rb"/>');
};

// Реализует закругленные уголки с помощью доп. элементов
// для браузеров не поддерживающих CSS-свойство border-radius.
var checkCorners = function () {
    // Ищем все элементы с классом corners
    $('.corners').each(function () {
        // Если для данного элемента браузер не поддерживает border-radius
        if (!isBorderRadiusSupported(this)) {
            // Добавляем внутрь элемента доп. элементы реализующие уголки
            wrapInCorners(this);
        }
    });
};

// DOM загрузился и готов к обходу и манипуляциям
$(function () {
    checkCorners();
});

Плюсы решения:

HTML льется чистый, без доп. элементов, и, соответственно, лишняя разметка не мозолит глаз ни в статической верстке, ни в XSL-шаблонах.
В прогрессивных браузерах (примерно у четверти пользователей) уголки рисуются средствами браузера (максимально быстро).
Есть задел на будущее — если IE или Opera надумают реализовать border-radius, то наше решение готово к этому радостному событию.

UPD: В комментариях указали на слабые стороны этого решения. Также откликнулись мои коллеги и помогли улучшить решение по производительности. Спасибо всем! Для этого мне и нужен блог — поделиться решением, собрать фидбек и найти более удачный вариант.

1. Не нужно проверять поддержку border-radius для каждого элемента. Сделаем эту проверку один раз в теге <head> до загрузки контента и добавим соответствующий класс у элемента <html>.

// Проверяет, поддерживает ли браузер CSS-свойство border-radius.
var isBorderRadiusSupported = function () {
    var s = document.documentElement.style;
    return typeof s.borderRadius === "string" ||
           typeof s.WebkitBorderRadius === "string" ||
           typeof s.KhtmlBorderRadius === "string" ||
           typeof s.MozBorderRadius === "string";
};

document.documentElement.className += isBorderRadiusSupported() ?
        " border-radius" : " no-border-radius";

2. Создавать из строки ноды под каждый уголок недешево, а зааппендить их в DOM еще дороже. Вставка каждого уголка это рефлоу блока, в который он вставляется. Выгоднее просто отдавать доп. разметку сразу в HTML. Задействовать доп. разметку будем в зависимости от класса, который мы выставили у элемента <html>.

.no-border-radius .corners .lt {
    // Стили для уголков
}

3. На текущий момент в Опере нет поддержки border-radius. Не стоит гонять балластный код ради неизвестного будущего. Поэтому отрываем -opera-border-radius: 4px; и соответствующую проверку в JS.

UPD2: Opera 10.50 pre-alpha поддерживает border-radius, причем без префикса. Ура!

Не хватает слов? Нарисуй письмо!

2009-06-16T21:11:00.009+04:00

Выкатили сегодня пакет обновлений Яндекс.Почты. В нем есть киллер-фича — рисовалка! Не отходя от ~~кассы~~ формы нового письма, теперь можно нарисовать картинку и приложить ее к письму.

Подробности в блоге новой Яндекс.Почты.

P.S. Кстати, по-украински «Рисовалка» будет «Малювалка» :) Можете включить украинский язык интерфейса и проверить :)

/**
 * По-хорошему, объем комментариев должен быть не меньше
 * объема самого кода или даже больше. Я вообще стараюсь
 * сначала комментарий написать, а потом уже кусок кода.
 * Если русским языком не можешь сформулировать, что хочешь
 * чтобы код делал, значит рано еще сам код писать. Скажу
 * больше, акт написания комментария заставляет мозг
 * напрячься и обрести ясность мысли, что способствует
 * написанию стройного и четкого кода. Вы не замечали
 * за собой такого?
 */

Сайт «Музея советских игровых автоматов»

2009-06-03T12:51:00.006+04:00

http://www.artlebedev.ru/everything/15kop/

Уже три с половиной месяца не работаю в Студии, а проекты с моим участием продолжают выходить :)

В детстве больше всего мне нравился автомат «Магистраль». Помню, когда мы жили в Витебске, постоянно бегал на вокзал и спускал в этот автомат все карманные деньги. Сначала я всегда выбирал учебный режим, зарабатывал на нем призовую игру, и уже призовую игру ехал на сложном режиме :)

В процессе работы над сайтом особый кайф я получил от создания страницы «Ночной рейс». Мега-крутая фишка получилась!

Новая Яндекс.Почта

2009-05-28T12:21:00.009+04:00

Та-дам! Дорогие друзья, свершилось знаменательное событие! Команда Яндекс.Почты запустила новый интерфейс (Нео). Всем срочно бежать смотреть и тестировать.

Обо всех проблемах сообщайте нам через форму обратной связи, а также не забудьте отправить нам бочку меда или ложку дегтя. Спасибо :)

Поздравляю вас/нас с этим волнующим событием! Ура!

Будущее яваскрипта: ECMAScript 5

2009-05-22T13:30:00.006+04:00

Очень впечатлился выступлением товарищей из ECMAScript о грядущих изменениях в языке. Рекомендую посмотреть всем яваскриптерам.

Слайды презентации

Гигапедия

2009-05-20T21:23:00.007+04:00

Открыл для себя Гигапедию — сайт, где можно найти любую книгу в электронном виде и бесплатно ее скачать. Есть всё — техническая литература, художественная, аудиокниги, даже ноты. Это просто счастье какое-то! Нужно зарегистрироваться, тогда у вас появится поиск по Гигапедии.

Накачал новых книг по яваскрипту (Стефанова, Закаса), Набокова на английском, нот для бас-гитары. Где бы теперь еще время взять, чтобы всем этим насладиться? :)

Трабл с попапом с закругленными уголками поверх селекта в IE6

2009-05-15T20:15:00.004+04:00

Уважаемые читатели, помогите кто чем может. (Сами мы не местные.)

Как известно, в IE6 селекты (однострочные и многострочные) всегда поверх любых других элементов на странице. Чтобы это побороть, нужно в вытаскиваемый наверх попап положить iframe, который в IE6 как бы «убивает» под собой селект.

Однако, если у попапа есть закругленные уголки и фон страницы отличный от белого, то возникает проблема. Если закругленный уголок попапа находится над селектом, то там просвечивает цвет фона страницы, а не белый от селекта.

Выглядит это так:

Что происходит:

iframe полностью прозрачный {filter: alpha(opacity=0);}
он «убивает» под собой селект
и начинает просвечивать бекграунд (черный)

Тестовая страница

Кто найдет решение, тому респект и уважуха :)

UPD: в каментах есть решение.

Gmail: Двоеточие в id-шнике

2009-05-12T23:13:00.004+04:00

Продолжение статьи «Особенности верстки Gmail».

Мой коллега Иван Широков заметил, что все id-шники в верстке Gmail начинаются с двоеточия.

Хочу поделиться с вами своими соображениями, зачем это может быть сделано.

Во-первых, чтобы нельзя было (даже по ошибке) навесить стили для такого id-шника, потому что #:my {color: red;} не работает. Своеобразная защита, которая как бы подчеркивает, что id-шник используется только в яваскрипте.

Во-вторых, и в главных, чтобы элемент не был доступен по идентификатору в глобальной области видимости (global namespace). Когда мы пишем <div id="my">test</div>, этот дивчик становится доступен через идентификатор my в глобальной области видимости. То есть alert(my.tagName) выдаст «DIV» (сюрприз, сюрприз!). А если писать с двоеточием <div id=":my">test</div>, то уже хренушки — нет такого идентификатора в глобальной области видимости. При этом элемент по-прежнему можно достать через document.getElementById(':my'). На самом деле это очень круто, так как уменьшается вероятность коллизии в глобальной области видимости.

Все это лишь мои догадки. А вы что думаете?

Дилемма о загрузке JS-файлов

2009-04-08T12:39:00.002+04:00

С одной стороны, конечно, хочется накладывать JS сразу по мере загрузки HTML. Иными словами, хорошо бы делать инициализацию JS-кода компонента сразу после загрузки HTML-кода компонента:

<div id="something">
    ...
</div>
<script>
    Something.init();
</script>

Понятно зачем — чтобы свести к минимуму задержку между двумя событиями: 1) HTML компонента отобразился и 2) JS компонента загрузился и инициализировался.

Например, чтобы псевдоссылка сразу вела себя как порядочная псевдоссылка и показывала спрятанный за ней контент, а форма сразу умела валидироваться в тот самый момент, когда она полностью вывелась на экран.

Разумеется, для этого нужно грузить JS-код компонента вперед HTML-кода (обычно это делают в <head>).

***

С другой стороны, следуя рекомендациям ведущих специалистов по борьбе с тормознутостью сайтов, хочется вынести загрузку всех JS-файлов в конец страницы (перед закрывающим тегом <body>).

Тоже понятно зачем — чтобы первым делом загрузился и показался контент, и у пользователя возникло ощущение, что сайт грузится быстро.

Однако, минус очевиден — увеличивается задержка между рассмотренными выше событиями 1) и 2). То есть мы получаем, что пользователь дольше видит HTML с еще не наложенным яваскриптом.

***

Что делать? Я думаю, что правильный путь — это все-таки вынести загрузку всех JS-файлов в конец страницы, при этом в <head> грузить один маленький легковесный скрипт, который при попытке пользователя взаимодействовать с компонентом при еще не наложенном JS, будет сигнализировать ему, что, мол, все окей, подожди чуть-чуть, JS грузится и скоро наступит счастье.

Вот и Мэтт Снайдер похожим путем идет. А как вы решаете эту дилемму?

JSLint

2009-04-05T02:00:00.005+04:00

Валидировали, валидировали, да не вывалидировали.

Думаю, многие пробовали программу JSLint — валидатор для проверки корректности JavaScript-кода. Однако блиц-опрос знакомых разработчиков показал, что почти все пользуются им лишь изредка, и едва ли кто задумывался о том, чтобы сделать JSLint неотъемлемой частью процесса разработки.

JSLint — сверхценный инструмент в арсенале JavaScript-разработчика. Должен сказать, что с тех пор, как я стал систематически им пользоваться, мой код стал значительно лучше. Ведь помимо отлова мелких багов и опечаток, JSLint способствует написанию стройного, слаженного, читабельного кода.

Главное — не перегибать палку

Не стоит принимать отчет JSLint как истину в последней инстанции и сразу бросаться править код. Это всего лишь рекомендация, поэтому нужно включить у себя в голове thinking mode и по каждой ошибке в отчете решить самому — согласиться с JSLint или нет. Благодаря тому, что у JSLint есть множество опций, позволяющих указать какие ошибки искать, а какие игнорировать, этот инструмент можно легко настроить на свой вкус.

Варианты использования

1. Самый простой — пойти на сайт JSLint и скопипейстить свой код в форму валидации.

2. Виджеты JSLint Widget, JSLint Multi widget, JSLint Dashboard widget for Mac OS X.

Можно драгндропнуть JS-файл или целую папку в окошко виджета, и получить отчет JSLint. В настройках виджета есть полный комплект опций JSLint.

Чем больше объем JS-кода, тем больше хочется интеграции со средой разработки (IDE). Также для крупных проектов желательно сделать валидацию рутинной операцией, выполняющейся автоматически, например, на этапе сборки и упаковки JS-кода.

3. В Aptana есть встроенный JSLint, который изначально выключен. Включить можно в настройках: Preferences → Aptana → Editors → JavaScript → Validation. После этого код будет валидироваться по мере того, как вы его печатаете.

К сожалению, у JSLint в Аптане нет опций.

4. Плагин к Eclipse. В начале этого года компания RockstarApps выпустила JSLint Eclipse Plugin. Опции все есть, но нет возможности указать predefined global variables, что, конечно, обломно.

5. Rhino и Windows Script Host. На одном из проектов мы используем Rhino для запуска JSLint. Написали скрипт, который обходит все проектные JS-файлы, для каждого из них вызывает JSLint и формирует общий отчет — очень удобно! Пожалуй, надо будет написать отдельный пост про это :-)

JSLint продолжает развиваться. Следить за обновлениями можно в группе JSLint, куда часто пишет сам Крокфорд, автор JSLint.

А вы валидируете свой JavaScript-код?

Электропочта

2009-03-15T23:45:00.003+03:00

Инбокс

Для меня инбокс — это фактически туду-лист. Пока я не решил затронутую в письме проблему, письмо сидит в инбоксе. Как только по письму все сделано, оно немедленно отправляется в папку (или в Gmail навешивается метка и архивируется). Я часто сам себе пишу письма чтобы что-то не забыть, потому что знаю — если есть в инбоксе, то задача не промандится. Вообще не понимаю, как живут и работают люди, у которых все письма хранятся в инбоксе.

Фильтры

У меня настроено множество фильтров, с помощью которых все второстепенные, не имеющие непосредственного отношения к работе, письма минуют инбокс и расфасовываются по папкам, где они ждут, когда для них появится свободная минута. Прежде всего, это всевозможные рассылки и уведомления.

Периодичность проверки почты

Часто почта отвлекает и мешает плодотворной работе. Особенно, когда приходит новое письмо — так и тянет пойти посмотреть что же там пришло. Поэтому я выставляю достаточно большой интервал проверки новых писем, минимум — 30 минут. А когда требуется полное погружение в решение задачи или я чувствую, что работа спорится и не хочу отвлекаться, то вообще вырубаю почту.

Еще есть обратная болезнь — постоянно заходить в почту и нажимать на кнопку «Доставить почту». Эта зараза нападает, когда не охота что-то делать, и ищешь повод хоть немного отложить решение насущной проблемы. Лекарство — воспитывать силу воли.

Черновики

Активно пользуюсь черновиками. Помимо незаконченных писем, храню в них заготовки писем, различные варианты подписей, а также использую просто как записную книжку для записывания мыслей, идей, составления листа желаний.

А у вас какие приемы работы с почтой для повышения собственной эффективности?

Передача параметров из HTML в JavaScript

2009-03-15T19:26:00.007+03:00

Часто при инициализации JS-компонента нужно найти определенный DOM-элемент с которым компонент будет работать, а также достать из HTML параметры (настройки). О способах хранения и передачи в JS этих параметров я и хотел бы поговорить.

Раньше я решал эту задачу так: простые параметры передавал через классы, сложные — через дополнительные (не всегда валидные) атрибуты или дочерние элементы.

Предположим, у нас есть DOM-элемент:

<span id="test">тест</span>

При клике на этот элемент мы хотим показывать некий попап. Для показа попапа нужно задать следующие параметры: ширина, высота, таскаемость попапа и текст. Раньше я написал бы примерно следующее:

<span id="test" class="width_250 height_150 draggable"><span class="text">Трам-парам!</span>тест</span>

Потом я бы долго и муторно получал значения этих параметров путем выпарсивания их из классов и доставания из дочерних элементов.

Так бы и мучился дальше, если бы мой коллега Дима Филатов не подсказал гораздо более элегантное решение — прописать атрибут onclick в котором возвращать объект с настройками.

<span id="test" onclick="return {width: 250, height: 150, draggable: true, text: 'Трам-парам!'};">тест</span>

Как достать этот объект:

var element = document.getElementById('test');

// Забираем параметры
var options = element.onclick instanceof Function ? element.onclick() : {};

// Заметаем следы - обнуляем onclick
element.onclick = null;
element.removeAttribute('onclick');

// Навешиваем обработчик onclick для показа попапа
element.onclick = function () {
    showPopup(options);
};

По сути, для передачи настроек используется формат JSON в котором есть шесть типов значений: объект, массив, строка, число, булевское значение и null. Используя эти типы, можно передавать довольно сложную структуру данных, немыслимую для передачи через классы.

По-моему, очень круто. Блин, почему я сам не додумался до этого? :)

Особенности верстки Gmail

2009-02-21T15:45:00.009+03:00

Изучал на досуге верстку Gmail, и хочу поделиться с вами некоторыми наблюдениями.

1. Названия классов

Первое, что бросается в глаза, это нечеловеческие названия классов у элементов, например, xN0XZb или z1IiMc. Думаю, при выкладке в продакшн по названиям классов проходится обфускатор и скукоживает их до минимальной длины обеспечивающей уникальность.

2. Несемантическая верстка

Например, список папок сделан не ul>li, а дивчиками (адепты семантической верстки содрогнулись от ужаса). Однако, учитывая что все генерится яваскриптом, не вижу в этом большой проблемы.

3. Спрайт с фоном

Картинка со всеми иконками содержит фиолетово-голубой паттерн-бэкграунд.

Очевидно, сделано это для того, чтобы сразу заметить съехавшее на пиксел позиционирование иконки. Такая самотестирующаяся верстка получается. Круто, но я бы не решился отдавать в продакшн такую картинку. Мало ли что :)

4. Скругленные уголки

Думаю, в какой-то момент (вероятно, когда делали Themes) чуваки заманались вырезать эти уголки и сделали сервис, который генерит картинки на лету.

http://mail.google.com/mail/rc?a=af&c=c3d9ff&w=4&h=4
http://mail.google.com/mail/rc?a=af&c=black&w=32&h=16

Параметры: c — цвет в RGB или словом, w — ширина (от 1 до 64), h — высота (от 1 до 64). Что означает параметр a=af я не осилил.

Smart folks, those Google people :)

Пока, Студия! Привет, Яндекс!

2009-02-16T23:50:00.001+03:00

Сегодня был мой первый рабочий день в Яндексе.

Некоторое время назад я принял непростое решение покинуть Студию Лебедева. Мне нравилось в Студии. Можно сказать, это был мой второй дом. Однако, после почти 7 лет настала пора двигаться дальше.

Cпасибо Студии за все, что между нами было. Мне будет вас не хватать. Удачи!

JavaScript!

2009-02-14T00:33:00.002+03:00

Не перестаю удивляться сложности задач, которые можно решить с помощью JavaScript.

Один чувак написал распознавалку капчей сайта Megaupload. Джон Ресиг разобрал как это сделано.

Другой чувак заебошил карту мира на канвасе.

(Ну не говоря уже про Gmail, Google Reader и Google Docs.)

JS: image.onload

2008-12-29T18:22:00.005+03:00

Делал прелоадилку картинок и столкнулся с проблемой — в Опере у картинки иногда не срабатывал обработчик события onload.

Оказалось, проблема была в том, что я сначала задавал src и потом навешивал обработчик onload, а нужно делать наоборот. Причина проста: если картинка находится в кэше, то в Опере после задания src она загружается мгновенно, и событие onload срабатывает еще до того, как мы навесили обработчик onload.

Я наблюдал этот эффект только в Опере, хотя не исключаю, что может проявиться и в других браузерах.

Правильный код:

var image = document.createElement('img');
image.onload = function () {
    // вызывается всегда
    alert('image loaded');
};
image.src = 'test.jpg';

В общем, логика такая: сначала нужно задать обработчик события, и только потом делать действия, которые могут привести к возникновению этого события.

Книги по JavaScript

2008-11-11T13:55:00.008+03:00

За последние пару лет появилось много хороших книг по яваскрипту, что не может не радовать. Еще совсем недавно можно было посоветовать только «наименее плохую» книгу (Флэнагана). Сегодня же я могу порекомендовать вам три отличные книги.

John Resig
Pro JavaScript Techniques
Книга недавно вышла на русском языке

Джон Ресиг (JavaScript-евангелист в Mozilla Corporation и автор библиотеки jQuery) в своей книге рассказывает об объектно-ориентированном JavaScript, написании кода для повторного использования, тестировании и отладке, DOM, Events, Ajax.

К сожалению, в книге невероятно много опечаток, в том числе в примерах кода, что особенно неприятно. Также не понравилось, что иногда вместо подробного объяснения какой-либо темы, Ресиг приводит ссылки на статьи в интернете (на того же Крокфорда) где эта тема раскрыта. Я люблю уютно устроиться долгим зимним вечером в обнимку с книгой, и хочу чтобы книга была самодостаточна, чтобы не нужно было ползти за ноутбуком.

Оценка: 4

Не смотря на эти недостатки, я собираюсь заказать следующую книгу Ресига — Secrets of the JavaScript Ninja, выход которой запланирован на конец 2008 года. Оглавление выглядит впечатляюще и многообещающе.

Douglas Crockford
JavaScript: The Good Parts

Дуглас Крокфорд (главный по JavaScript в Yahoo!) хорошо известен как один из самых крутых специалистов по JavaScript. Дуглас — автор формата обмена данными JSON и сервиса по проверке корректности кода JSLint. Надо сказать, что его мегамощные лекции и статьи меня реально торкнули, поэтому его книгу я ждал с особым нетерпением.

Книга невелика по объему (всего 145 страниц), но насыщена информацией. Крокфорд пишет просто и понятно, без многословных и замысловатых выражений. Я не всегда стопроцентно с ним согласен, тем не менее, его аргументы весьма разумны, а его мнение стоит того, чтобы к нему прислушаться.

Что мне особенно понравилось в книге Крокфорда (а также в JSLint) — это внимание к стилю написания кода, как сделать код максимально ясным, кратким, однозначным, как уменьшить шанс возникновения ошибок.

Оценка: 5, must read

Ross Harmes, Dustin Diaz
Pro JavaScript Design Patterns

Супермегаохуенная книга о применении паттернов проектирования в JavaScript. Я давно мечтал прочитать такую. Организация кода, уменьшение зависимостей компонентов, как сделать код более гибким — вот главные темы книги.

Очень понравилось как авторы четко расставляют все по полочкам — для каждого паттерна приведены за и против его использования, какой выигрыш паттерн может дать, и в чем при этом можно потерять.

Оценка: 5+, must read

Типовой лейаут страницы

2008-11-01T17:00:00.008+03:00

Особенности:

Standards mode
Минимальная и максимальная ширина
При растяжении больше максимальной ширины макет центрируется
Футер всегда прибит к низу страницы

Тестовая страница

Простой пример использования

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Sample layout</title> <link rel="stylesheet" type="text/css" href="main.css"/>  </head> <body> <div id="outer"> <div id="header">header</div> <div id="content">content</div> </div> <div id="footer">footer</div> </body> </html>

main.css

html, body { margin: 0; padding: 0; height: 100%; } body { color: #000; background-color: #fff; font-family: Arial, sans-serif; font-size: 0.8em; line-height: 1.4; text-align: center; } #outer { min-height: 100%; } #outer, #footer { min-width: 700px; max-width: 1400px; margin: auto; /* center it */ text-align: left; } #header { background-color: #66cc66; } #content { padding-bottom: 3.2em; } #footer { height: 2.6em; margin-top: -2.6em; background-color: #ff8080; }

main-ie6.css

#outer { height: 100%; } #outer, #footer { width: expression(document.documentElement.clientWidth < 700 ? '700px' : document.documentElement.clientWidth < 1400 ? '100%' : '1400px'); }

Новый iepngfix.htc

2008-10-19T17:39:00.007+04:00

Наверняка многие из вас пользовались популярным скриптом iepngfix.htc, который исправляет полупрозрачные PNG в IE 6. Скрипт умеет фиксить как PNG-изображения <img>, так и PNG заданные бекграундом. Основным недостатком этого инструмента было отсутствие поддержки background-position и background-repeat — эти параметры игнорировались. К счастью, Angus Turnbull, автор iepngfix, недавно выпустил новую версию v2.0 Alpha 3, лишенную этого недостатка. В новой версии добавился еще один файл iepngfix_tilebg.js, в котором находится метод IEPNGFix.tileBG.

UPD. Коллега наткнулся на еще одну JS-библиотеку для исправления полупрозрачных PNG в IE 6 — DD_belatedPNG. Также есть поддержка background-position и background-repeat, но подход принципиально другой: вообще отказ от AlphaImageLoader и вместо этого использование VML.

XSL: применение шаблона с «внутренним» условием

2008-10-12T12:03:00.001+04:00

Часто бывает нужно применить шаблон для элемента только если этот элемент (или его содержимое) удовлетворяет некоторому условию. Простой пример: применить шаблон для элемента <Brands> если внутри есть хотя бы один элемент <Brand>. Рассмотрим несколько вариантов как можно сделать эту проверку.

Вариант 1

<xsl:template match="Something"> <xsl:if test="Brands/Brand"> <xsl:apply-templates select="Brands"/> </xsl:if> </xsl:template> <xsl:template match="Brands"> <h2>Производители</h2> <ul> <xsl:apply-templates select="Brand"/> </ul> </xsl:template>

Неудачное решение, поскольку, написав проверку в шаблоне для <Something>, мы поместили в этот шаблон знание об особенности трансформации <Brands>.

Вариант 2

<xsl:template match="Something"> <xsl:apply-templates select="Brands[Brand]"/> </xsl:template> <xsl:template match="Brands"> <h2>Производители</h2> <ul> <xsl:apply-templates select="Brand"/> </ul> </xsl:template>

Немного компактнее, но проблема первого варианта осталась.

Вариант 3

<xsl:template match="Something"> <xsl:apply-templates select="Brands"/> </xsl:template> <xsl:template match="Brands"> <xsl:if test="Brand"> <h2>Производители</h2> <ul> <xsl:apply-templates select="Brand"/> </ul> </xsl:if> </xsl:template>

Гораздо лучше. Шаблон для <Something> просто вызывает шаблон для <Brands>, не заморачиваясь о внутреннем устройстве <Brands>. Шаблон для <Brands> сам разбирается как трансформировать <Brands>.

Вариант 4

<xsl:template match="Something"> <xsl:apply-templates select="Brands"/> </xsl:template> <xsl:template match="Brands"/> <xsl:template match="Brands[Brand]"> <h2>Производители</h2> <ul> <xsl:apply-templates select="Brand"/> </ul> </xsl:template>

Я предпочитаю этот вариант. Он также хорошо работает и в случае с несколькими условиями — вместо громоздкого <xsl:choose> мы получаем компактные шаблончики.

<xsl:template match="Brands"/> <xsl:template match="Brands[Brand]"> <h2>Производители</h2> <ul> <xsl:apply-templates select="Brand"/> </ul> </xsl:template> <xsl:template match="Brands[count(Brand) > 10]"> <h2>Много производителей</h2>  </xsl:template>

Ссылка цветом текста

2008-09-24T23:27:00.003+04:00

Задача: сделать ссылки цветом текста. При этом в разных блоках на странице цвет текста может меняться.

Сначала я указал цвет ссылки отдельно для каждого блока.

body {color: black;} a.glossary {color: black;} #shurum, #shurum a.glossary {color: red;} #burum, #burum a.glossary {color: green;}

Потом я подумал, что ведь цвет ссылки можно наследовать от блока.

body {color: black;} a.glossary {color: inherit;} #shurum {color: red;} #burum {color: green;}

Радости моей не было предела, пока я не открыл страницу в IE. Фак! Оба осла (6 и 7) не поддержали мою гениальную задумку и ни хрена не пронаследовали цвет. Тогда я ~~достал большую базуку и замочил IE вдребезги пополам~~ написал маленький экспрешн.

a.glossary {color: expression(this.parentNode.currentStyle.color);}

Лучше, конечно, написать одноразовый экспрешн (не стал здесь так делать для наглядности).

IE 6 занял место Netscape 4

2008-09-15T23:00:00.008+04:00

Лет 6—7 назад все ненавидели Netscape 4. Чтобы добиться нормального отображения страницы в Netscape 4, верстали исключительно таблицами, делали распорки, а о семантической верстке не шло и речи. Как только его не обзывали — Нетшкаф, Нетглюк, Нафигатор. Но постепенно сайты отказывались от A-grade поддержки Netscape 4. Я помню этот радостный момент, когда Студия объявила о прекращении полноценной поддержки Netscape 4 — все технологи со слезами на глазах обнялись и поздравили друг друга.

Сейчас место «браузера-изгоя тормозящего развитие веба» занял IE 6. Хотя говорить о прекращении A-grade поддержки IE 6 еще рано (думаю, придется еще пару лет с шестым ослом помучиться), тенденция к этому уже наметилась — все чаще встречаются сайты где что-то отвалилось или разъехалось в IE 6.

Ссылка по теме: Graded Browser Support

JavaScript: область видимости переменных

2008-09-01T22:10:00.005+04:00

В JavaScript область видимости переменных не ограничивается блоком {}, а ограничивается только функцией. Например, переменные объявленные внутри for или if продолжают жить после того, как эти for и if отработали.

for (var i = 0; i < 10; i += 1) { var a = i * i; // do something } document.writeln(i); // 10 document.writeln(a); // 81

if (true) { var b = "test"; // do something } document.writeln(b); // test

Поэтому, лучше явно обозначить это в коде.

var i, a; for (i = 0; i < 10; i += 1) { a = i * i; // do something }

var b; if (true) { b = "test"; // do something }

Во многих языках программирования рекомендуется объявлять переменные как можно ближе к месту первого использования. В JavaScript все используемые в функции локальные переменные лучше объявлять в самом начале функции.

var myFunction = function () { // Объявление всех локальных переменных, включая переменные циклов // Код функции }

Простое правило для маргинов

2008-08-04T23:05:00.005+04:00

При задании отступов у блоков я придерживаюсь простого правила — задаю отступы справа и снизу.

Если первый блок будет вдруг отсутствовать, второй блок прижмется к левой/верхней границе.

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

Это правило позволяет уменьшить зависимость блоков от окружения, то есть повышает универсальность верстки.

Элементы с id порождают глобальные переменные в JS

2008-08-02T12:27:00.005+04:00

Для всех элементов с атрибутом id в джавасрипте создается глобальная переменная. Следующий пример во всех браузерах выдаст алерт с "DIV".

<html> <head> <script> window.onload = function () { alert(myDiv.tagName); }; </script> </head> <body> <div id="myDiv">test</div> </body> </html>

Это плохо, но в принципе не страшно, если вы:

Избегаете создавать свои глобальные переменные.
Не забываете объявлять свои переменные. Если вы забыли объявить переменную (var myVar), то джавасрипт считает, что это глобальная переменная (implied global variable).

Названия картинок

2008-07-04T22:18:00.003+04:00

Советую не использовать в названии обычных картинок слова banner, promo и ad. У многих пользователей стоят блокировщики рекламы (например Adblock), которые не показывают такие картинки. Кстати, веб-разработчику не помешает проверять свои сайты в браузере с установленным блокировщиком рекламы.

Названия баннеров, наоборот, нужно честно начинать со слова banner, чтобы их не видели те, кто не хочет их видеть.

JavaScript + CSS

2008-06-30T01:05:00.001+04:00

Задача: Подружить JavaScript и CSS, чтобы при отсутствии JavaScript применялись немного другие стили.

Предположим, что у нас есть блок <div id="block">блок</div>, который изначально должен быть скрыт и появляться по нажатию на псевдоссылку <span id="link">псевдоссылка</span>. Если же джаваскрипта нет, то блок должен показаться сразу, а псевдоссылка спрятаться с глаз долой.

Вариант 1. С использованием тега `<noscript>` (олд скул)

<style type="text/css"> #block {display: none;} </style>

<noscript> <style type="text/css"> #block {display: block;} #link {display: none;} </style> </noscript>

Это работает, но приходится создавать отдельный кусок стилей. К тому же валидатор ругается что есть сил, поскольку <style> запрещен внутри <noscript>, а <noscript> запрещен внутри <head>. Плохой способ, не рекомендую так делать.

Вариант 2.

Гораздо лучше пойти по пути последовательного улучшения (progressive enhancement), суть которого заключается в том, что сначала мы добиваемся корректной работы в самом простом, доступном окружении (в данном случае — в браузере с неработающим джаваскриптом), а затем постепенно улучшаем наше решение, добавляя функционал для повышения удобства пользователей в браузерах поддерживающих этот функционал.

Это означает, что стили изначально должны быть настроены для случая отсутствия джаваскрипта. Далее загружается джаваскрипт, находит наш блок и скрывает его, находит псевдоссылку и показывает ее. Недостаток такого решения в том, что блок может «моргать» — пользователь может увидеть его на какое-то короткое время (пока загружается и выполняется джаваскрипт).

Вариант 3.

Как можно побороть моргание блока? Я использую такое решение. В теге <head> добавляем простую строчку:

<script type="text/javascript">document.documentElement.className = "js";</script>

Если джаваскрипт включен, элементу <html> присвоится класс js. Что важно, это произойдет до загрузки контента. Теперь можно написать такие стили:

#link {display: none;} .js #link {display: inline;} .js #block {display: none;}

Ретрахинг кода (refucktoring)

2008-06-16T12:18:00.003+04:00

Выработал привычку: каждый рабочий день начинаю с ревизии кода, написанного за предыдущий день.

Keyboard navigation

2008-06-16T00:07:00.005+04:00

Некоторым людям (особенно с двигательными расстройствами) сложно пользоваться мышью для просмотра веб-страниц. Вместо мыши они используют предоставляемую браузерами клавиатурную навигацию при помощи клавиши Tab. Добавляя на страницу JavaScript, нужно подумать об этих людях и предусмотреть навигацию с помощью клавиатуры.

По-хорошему, для каждого обработчика действия мышью должен быть соответствующий обработчик для клавиатуры. Например, если есть обработчик события onclick, по идее, нужен и обработчик для onkeydown.

Код на jQuery:

$("#test").click(function () { doSomething(); }); $("#test").keydown(function (event) { // Allow the Enter key to activate that element return event.keyCode != 13 || doSomething(); });

Далее, хорошо бы прописать стили для псевдокласса :focus. Хотя бы такие же, как и для :hover.

#test:hover, #test:focus {color: #cc0000;}

Чтобы также ховерилось и фокусировалось в IE, нужно навесить обработчики для событий onmouseover/onfocus и onmouseout/onblur в которых, соответственно, нужно добавлять и убирать какой-нибудь класс.

Все круто, но с помощью таба можно пройтись только по ссылкам и элементам форм. Другие элементы по умолчанию не получают фокус. Что делать, если активный элемент, на который мы навесили onclick и onkeydown, не ссылка, а <span>?

Для этого существует атрибут tabindex.

tabindex="0" — разрешает элементу получать фокус в порядке в котором он идет в документе.

tabindex="5" — положительное значение позволяет изменить порядок получения фокуса элементом при навигации табом.

tabindex="-1" — отрицательное значение исключает элемент из навигации табом.

Проверил, работает в IE и Firefox. Опера и Сафари, к сожалению, вообще пока не поддерживают навигацию табом.

Пример клавиатурной навигации: ездилка на сайте вакансий Евросети.

P. S. Кстати, а знаете ли вы, что Shift + Tab перемещает фокус в обратном порядке?

Резюме в виде облака

2008-06-15T13:31:00.005+04:00

Наткнулся на забавный онлайн-сервис: Wordle — генератор красивых облаков из слов. Запостил в эту штуку свое резюме:

Крокфорд жжет

2008-06-07T11:42:00.004+04:00

Как известно, многие врачи используют книги по программированию как мощное средство при лечении тяжелых случаев нарушения сна. Люди, страдающие от страшной бессонницы, засыпают после прочтения всего лишь нескольких страниц. Помимо сухих и скучных теоретических выкладок, многие книги изобилуют занудными неживыми примерами.

Другое дело — книга Дугласа Крокфорда «JavaScript: The Good Parts». Душа радуется!

Пример вложенного объекта:

var flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2004-09-22 14:55", city: "Sydney" }, arrival: { IATA: "LAX", time: "2004-09-23 10:42", city: "Los Angeles" } };

Пример добавления метода у массива:

Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; }; Array.method('reduce', function (f, value) { var i; for (i = 0; i < this.length; i += 1) { value = f(this[i], value); } return value; }); ... // Create an array of numbers. var data = [4, 8, 15, 16, 23, 42]; // Define two simple functions. One will add two // numbers. The other will multiply two numbers. var add = function (a, b) { return a + b; }; var mult = function (a, b) { return a * b; }; // Invoke the data's reduce method, passing in the // add function. var sum = data.reduce(add, 0); // sum is 108 // Invoke the reduce method again, this time passing // in the multiply function. var product = data.reduce(mult, 1); // product is 7418880

Только недавно досмотрел второй сезон. Я не тормоз, просто смакую :)

Developers, developers, developers!

2008-06-06T13:08:00.005+04:00

В IEBlog проскочило упоминание, что, начиная с момента выпуска IE8 Beta 1, было сделано более двух миллионов скачиваний. Первая бета была адресована разработчикам и, я уверен, что большинство скачавших так или иначе занимаются сайтостроением. То есть можно прикинуть, что в мире порядка двух миллионов веб-разработчиков!

Браузеры на моем десктопе

2008-05-31T02:06:00.002+04:00

Еще в виртуальной машине есть IE 8 Beta 1 и Firefox 2, плюс в стареньком G4 Cube живут маковские Safari и Firefox.

Третий Firefox пока не ставил и не щупал (что-то я туплю на самом деле, надо поставить). И для полного счастья еще не хватает Konqueror (надо бы тоже на досуге поставить).

Вообще я стараюсь повседневно использовать более старые браузеры и не ставить последние версии как основные. Например, я был последним из могикан в Студии у которого дефолтный IE был версии 5.5.

Скажи мне, какой у тебя браузер

2008-05-29T02:12:00.010+04:00

Изучал тут статистику использования браузеров за май 2008 года...

Сайт нашей Студии

Firefox	43,58%	тыдыщ
IE 6.0	17,56%
IE 7.0	14,37%
Opera 9.x	18,36%
...
IE 5.0	0,55%
IE 5.5	0,07%

Сайт банка

IE 6.0	47,37%	тыдыщ
IE 7.0	30,72%
Firefox	10,64%
Opera 9.x	8,45%
...
IE 5.0	0,33%
IE 5.5	0,12%
IE 4.0	0,09%	фигасе

Интернет-магазин

IE 6.0	30,89%
IE 7.0	25,61%
Opera 9.x	25,46%	тыдыщ
Firefox	14,91%
...
IE 5.5	0,07%

Можно сделать несколько интересных выводов. Во-первых, видно, что статистика использования браузеров сильно зависит от сайта. Статистику, которую обычно предлагают нам всякие «исследования аудитории Рунета» можно назвать средней температурой по палате.

На сайте Студии зашкаливает Firefox. Ну оно и понятно. Кто ходит на сайт Студии? Веб-дизайнеры, веб-разработчики и прочие веб-интересующиеся — «продвинутые» ребята, использующие «правильный» браузер.

Банковский сайт — засилье Internet Explorer, причем с уклоном в сторону более старых версий. Кто ходит? Офисные работники на старых, давно не апгрейженных компах.

25% Оперы в интернет-магазине? Моя теория такая. Добросовестный человек занимается интернет-шоппингом в свободное от работы время с домашнего компьютера. По всей видимости, Опера — выбор многих рядовых пользователей для серфинга из дома.

Примерно от трети до половины пользователей IE проапгрейдились до IE 7.0. И это хорошо. Признаюсь, я стал уже немного забивать на IE 6.0. Скажем, на неработающий в IE 6.0 псевдокласс hover не у ссылок. Раньше писал джаваскриптик, который ловил onmouseover/onmouseout и навешивал/убирал класс hover. А сейчас забил.

Тем не менее, еще около полпроцента пользуются IE 5.0 и IE 5.5. И это до хрена! При посещаемости 50 000 в день, это 250 человек. Обязательно нужно проверять сайт в этих браузерах. Контент должен читаться, навигация должна работать, человек должен мочь выполнить свою задачу с которой он пришел на сайт.

JavaScript: контекст для вложенных функций

2008-05-23T15:01:00.004+04:00

that и this сидели на трубе…

Как известно, this внутри вложенных функций (inner functions) равен глобальному объекту (global object). Из-за этого приходится писать нелепую конструкцию var that = this; (господи, сколько же раз я написал эту строчку!)

Пример:

var test = { init: function () { this.txt = 'Test!'; var that = this; window.setTimeout(function() { alert(that.txt); }, 1000); } };

Как же избавиться от ненавистного that?

Для этого попробуем воспользоваться методом apply, который позволяет задать контекст (чему будет равен this) у функции. Однако, применить apply к callback-функции передаваемой в setTimeout нельзя, поскольку apply сразу выполняет функцию к которой он применен. Поэтому напишем вспомогательный метод scope.

Function.prototype.scope = function (o) { var fn = this; return function () { return fn.apply(o, arguments); }; };

Теперь перепишем наш пример, используя метод scope.

var test = { init: function () { this.txt = 'Test!'; window.setTimeout(function () { alert(this.txt); }.scope(this), 1000); } };

Ура, мы избавились от that!

Плюсы:

Выкинули var that = this;
В inner function используем «родную» переменную this вместо трижды злоебучей that
Мне кажется, код стал выглядеть элегантнее

Спорные моменты:

Экономии объема кода нет, может быть даже небольшое увеличение
Возможно, ухудшилась читаемость кода, поскольку, не дочитав до конца определения функции, непонятно, на что же ссылается this

Изначально хотел опубликовать эту заметку в Техногрете, но передумал — не могу с высокой трибуны рекомендовать решение, которым, возможно, сам не буду пользоваться :)

Nightmare.xsl

2008-05-20T15:00:00.003+04:00

Вчера ночью, засыпая, подумал: «Так, по какому XSL-шаблону сон выводить будем?» Крыша поехала, ага :)

Про ошибки

2008-05-19T14:05:00.002+04:00

Tell me about your worst professional mistake you’ve made and what you learned from it.

Tough Interview Questions and How to Handle Them

Дело было в далеком 2002 году. Я только пришел в Студию и занимался в основном поддержкой существующих сайтов, в том числе одной очень уважаемой автомобильной компании.

Передо мной стояла задача: добавить на сайт еще одну модель автомобиля — описание, технические характеристики, фотогалерею, короче говоря, несколько страниц с картинками.

Сайт был устроен таким образом, что все картинки заливались через систему администрирования (сделанную не мной), которая присваивала каждой картинке id-шник, переименовывала их по этому id-шнику (получалось, например, 157.jpg) и складывала в папку /images/.

У нас была копия сайта на локальном сервере, где я и выполнил задачу. Настало время переноса на рабочий сайт. Вот тут-то и пробил роковой час — не долго думая, я скопировал все содержимое папки /images/ с локального сервера на живой. Набрав в браузере адрес сайта, чтобы проверить все ли хорошо после переноса, я потерял дар речи и замер в ужасе. Сайт выглядел просто феерически. Все картинки перепутались: на месте логотипа было колесо, вместо слогана — кусок бампера, вместо изображений автомобилей вылезли навигационные плашки, одним словом, наступил пиздец.

Как позже выяснилось, локальная копия сайта на самом деле, сука, не была «копией» в прямом смысле этого слова. Локальная и живая версии сайта уже давно разошлись. Что самое западло, названия картинок не совпадали. Чтобы перенести картинки на живой сайт, нужно было залить их через админку живого сайта.

Что же было дальше? Мы с менеджером побежали к админам, и они, дай им бог здоровья, все восстановили из последнего дампа. В общем-то все обошлось, но люди, зашедшие на сайт в эти полчаса, наверное, выпали в осадок от увиденного :)

Чему же научила меня эта ошибка? Самое главное, всегда подвергать сомнению и проверять все свои предположения. В данном случае я не проверил свое предположение об идентичности локальной и живой версий сайта, за что и поплатился.

А еще, я стал бекапить файлы, которые собираюсь перезаписать на живом сайте. Дамп админов — хорошо, а свой бекап тоже не помешает :)

Ресайз окна браузера

2008-05-17T19:00:00.011+04:00

Занимаясь веб-разработкой, часто требуется посмотреть как выглядит сайт при определенном разрешении. Переключать разрешение монитора долго и муторно, гораздо проще подогнать размер окна браузера. Обычно это делают с помощью плагина или специальной программулины.

Уже очень давно для ресайза окна браузера я пользуюсь закладками в самом браузере — удобно, всегда под рукой и не нужно держать постороннюю приблуду для этого. Решение работает в Firefox, IE, Safari. Не работает в Opera. Вот пошаговая инструкция.

1. Поставьте закладку на любую страницу, хотя бы на страницу, которую вы сейчас читаете.

2. Откройте свойства новой закладки.

3. В поле Name напишите 1024x768. В поле Location введите javascript:window.resizeTo(1024,768);

Готово! Нажмите на получившуюся закладку и окно браузера изменит свой размер на 1024×768.

Аналогично можно сделать закладки для остальных разрешений.

У меня в Firefox и IE настроено так: для самого популярного разрешения 1024×768 закладка находится в тулбаре, для остальных разрешений закладки в меню.

Кроме того, в Firefox для закладки можно задать ключевое слово. Если потом набрать это слово в адресной строке браузера и нажать Enter, то сработает соответствующая закладка. Например, для 1024×768 я задал ключевое слово «1». Удобно для любителей работать с клавиатурой: F6 (фокус в адресную строку), 1, Enter. Вуаля! Ресайз менее чем за 1 секунду!

На десерт:

развернуть окно на всю ширину экрана (maximize): Alt + Space, X
вернуть прежний размер окна (restore): Alt + Space, R или Alt + Space, Enter

Модель времени

2008-05-14T02:45:00.007+04:00

Когда-то читал интервью с каким-то монстром программирования, где он упомянул, что проводя собеседования с устраивающимися на работу программистами, всегда просит их описать свою модель времени, как они видят себе год, неделю, день. По его мнению (с которым я согласен), в голове у каждого программиста обязательно должна быть четкая модель времени. Это такой своеобразный индикатор, что человек умеет структурировать окружающую его информацию — совершенно необходимый навык для программиста.

Год представляется мне в виде таблицы из трех строк с четырьмя месяцами в каждой строке.

Важны переходы на новую строку, особенно переход декабрь—январь, очевидно, связанный с Новым годом, и переход август—сентябрь — начало учебного года. Переход апрель—май явно не выражен и размыт. Ощущение такое, что как будто апрель иногда хочет перелезть на вторую строку или, наоборот, май пытается запрыгнуть на первую. Апрель вообще какой-то особенно безликий месяц, при мысли о нем он не сразу визуализируется на схеме. Вероятно, это от того, что в моей жизни не было важных событий в апреле.

Дни недели устроены в моей голове точно также, как они были устроены в школьном дневнике. Подозреваю, что большинство жителей нашей страны представляют себе именно такую схему недели. Неделя четко поделена пополам. В первом столбце — понедельник, вторник, среда. Во втором — четверг, пятница, суббота. Воскресенье — в уме. Я использую адресацию слева/справа, сверху/снизу/посередине. Скажем, планируя что-то на четверг, я мысленно помещаю событие в ячейку «справа, сверху».

Со временем суток дела обстоят сложнее — четкой и однозначной модели у меня нет. Есть довольно туманная схема, в которой день поделен на неравные плавающие уровни.

А как устроено ваше время?

Если контент говеный, никакая разметка его не спасет

2008-05-13T12:37:00.004+04:00

Для рядового читателя все эти рассуждения о «семантической верстке» по большому счету до лампочки. Они приходят за контентом, а не для того, чтобы проверить правильность верстки. Какие в исходном коде теги и классы их абсолютно не волнует. Если сайт интересный, его прочтут при любой разметке. Если товар охуенный, его закажут не смотря на отсутствие семантики в верстке. Информация, которую создатели сайта хотят донести до людей, гораздо важнее и требует большего внимания, чем верстка этой информации.

Поэтому, когда я получаю для вывешивания на сайте скучный неинтересный на хуй никому не упавший текст, я очень огорчаюсь.

Разумеется, хорошая «семантическая верстка» повышает доступность сайта и видимость поисковыми системами. Конечно, правильная разметка выгодна самим разработчикам, т. к. облегчается поддержка проекта — новому кодеру легче вникнуть и найти место где нужно поправить.

Но интересный контент в тысячу раз важнее. Первых кого должна нанять студия веб-дизайна или интернет-компания, это копирайтера и редактора. Потом уже кодера.

Дробный рейтинг

2008-05-05T00:15:00.009+04:00

Задача. Сделать для интернет-магазина Евросети средний рейтинг товара в виде звездочек с дробными значениями. Например, средний рейтинг = 3,6. Четвертая звездочка должна быть закрашена на 60%.

Очевидно, что нагенерить картинок для всех значений рейтинга невозможно. Поэтому, будем химичить в HTML и CSS.

Для начала нам потребуются две картинки: пустая звездочка и закрашенная .

Делаем дивчик высотой в одну звездочку, шириной в пять звездочек и бекграундом у него пускаем пустую звездочку. Внутрь кладем еще один дивчик такой же высоты с закрашенной звездочкой бекграундом. А вот ширину внутреннего дивчика высчитываем по формуле: rating * 100 / 5 (я сделал это XSL-ем на сервере, но можно и яваскриптом сделать). Получилось:

<div class="rating"> <div style="width: 72%;"></div> </div>

Для версии без стилей внутрь наших дивчиков добавим текст «Оценка: 3,6». В обычной версии со стилями этот текст скроем.

Последний штрих — добавим тайтл, чтобы можно было посмотреть точное значение рейтинга.

Итого:

<div class="rating" title="3,6"> <div style="width: 72%;">Оценка: 3,6</div> </div>

CSS:

div.rating { width: 85px; background: url('star-0-big.gif') repeat-x 0 0; } div.rating div { height: 17px; background: url('star-1-big.gif') repeat-x 0 0; font-size: 1px; text-indent: -9999px; }

Оценка: 3,6

Элементарно просто можно адаптировать для:

звездочек большего размера, сердечек, кружек пива и других форм;
рейтингов по 6-ти, 10-ти или сколько угодно бальной системе.

Рейтинг этой заметки:

Оценка: 5,0

;-)

Вращение автомобиля на сайте ZAZ Sens

2008-04-26T19:48:00.007+04:00

Не вдаваясь в подробности реализации, хочу поделиться парой идей, лежащих в основе вращения автомобиля на сайте ZAZ Sens.

1. Для каждого цвета все восемь ракурсов автомобиля собраны в одном файле JPG. Вот, например, файл для цвета «Зеленый мох»:

Почему я решил объединить все ракурсы в один общий файл? Во-первых, размер общего файла получается меньше. Во-вторых, меньше обращений на сервер. И, наконец, JavaScript-код для прелоада и управления одним файлом проще, чем для прелоада и управления восемью.

Эта картинка стоит бэкграундом у дивчика размером с один ракурс автомобиля. При вращении меняется background-position у дивчика и показывается соответствующий ракурс:

2. Очевидно, что прежде чем давать пользователю вращать автомобиль определенного цвета, нужно дождаться полной загрузки файла, иначе во время вращения будут неприятные эффекты в виде обрезанного автомобиля или пустоты на месте недогруженных ракурсов.

Поэтому изначально все цвета задизейблены, а в JavaScript я ставлю картинки с собранными ракурсами на загрузку (для всех цветов). По событию onload соответствующий цвет энейблится (код упрощен для наглядности):

var oImage = document.createElement('img'); oImage.onload = function(){ /* включаем зеленый цвет */ }); oImage.src = '/f/1/car-sea-green.jpg';

Таким образом цвета включаются по мере загрузки цветовых файлов.

Моей ошибкой стало то, что я ставлю на загрузку все цветовые файлы сразу, в результате чего они грузятся браузером параллельно. Получилось, что браузер долго грузит, потом почти одновременно включаются все цвета.

Если бы я сделал последовательную загрузку, то есть чтобы следующий цветовой файл начинал загружаться только по завершению загрузки предыдущего, для пользователя это было бы лучше — он быстро бы получил возможность вращать один цвет, а пока он его вращает, догрузились бы остальные. К сожалению, руки так и не дошли переделать.

Три составляюшие веба

2008-04-25T02:42:00.005+04:00

В порядке важности:

Доступность (accessibility)
Удобство (usability)
Дизайн (design and aesthetics)

Именно в таком порядке. Каждая последующая составляющая основывается на предыдущей.

Имея недоступный контент (например, текст захерачили картинкой или без яваскрипта не показывается какая-то часть информации), нет смысла говорить об удобстве пользования сайтом. Какое удобство, если некоторые люди вообще не могут воспользоваться сайтом?

Также бессмысленно рисовать красивые иконки и кнопки, делать закругления и прочие модные дизайнерские штуки, если сайт недоступный и/или неудобный. Алан Купер в своей книге The Inmates Are Running the Asylum очень метко назвал это painting the corpse.

Government web standards

2008-04-22T13:55:00.002+04:00

Очень надеюсь, что и российское правительство когда-нибудь дорастет до того, чтобы всерьез заняться составлением стандартов для сайтов правительственных организаций.

Амазон каюк

2008-04-22T00:33:00.008+04:00

Американский Амазон отменил дешевые доставки (Standard Shipping и Expedited Shipping) для России. В списке европейских стран напротив России появилась надпись Priority Only. Даже в Албанию отправляют обычной почтой, а в Россию теперь только самой дорогой курьерской доставкой.

Если раньше за доставку трех книг суммарной стоимостью 60 $ нужно было заплатить примерно 20 $ (Expedited Shipping), то теперь извольте отвалить все 50 $.

Связано это, очевидно, с плохой работой нашей российской почты — посылки часто теряются и не доходят, как случилось с одним из моих заказов. К чести Амазона, в ответ на мое сообщение о неполученной книге, они без всяких разбирательств и дополнительной оплаты выслали книгу повторно, причем ускоренной доставкой. Потом, кстати, через месяц от них пришла отбивка, что мол «первая посылка к нам вернулась, все нормально, чувак».

Решил попробовать британский Амазон. Они пока еще доставляют обычной почтой (Air Mail), но сами книги стоят дороже. Те самые три книги стоят 40 £ + доставка 14 £ = 54 £ = 107 $. Те же яйца.

Скоро рассвет, выхода нет

2008-04-13T15:08:00.022+04:00

Зашел я как-то в Одноклассники, поотвечал на сообщения, собрался выйти и привычным жестом потянулся в правую верхнюю часть окна чтобы нажать на ссылку «Выход». У меня уже отложилось где-то в голове, что для того, чтобы выйти, нужно нажать на последнюю ссылку на оранжевой плашке вверху.

Нажимаю и попадаю в раздел «Помощь». Что за черт? Какая еще помощь? Вчитываюсь в названия ссылок.

Хм, последняя ссылка в меню — «Помощь», а «Выхода» вообще нет. Туда, сюда — нет выхода. Что за ерунда?

Через какое-то время до меня доходит, что виной всему увеличенный размер шрифта в моем Фаерфоксе. Это меню сверстано таким «удивительным» образом, что при увеличении размера шрифта невлезающие пункты меню (им сказано float: left;) переносятся на вторую строчку и сливаются с фоном (ссылкам задан белый цвет).

При выделении ссылка проявляется.

При дальнейшем увеличении размера шрифта пропадают и остальные ссылки — «Помощь» и так далее.

В IE размер шрифта, конечно, зафиксировали.

Позор джунглей.

Виза ВТБ24

2008-04-03T12:49:00.005+04:00

Я уже давно забил читать книги по веб-разработке на русском языке. Хороших книг просто нет. Скажем по яваскрипту я знаю только одну более-менее нормальную книгу на русском — Флэнагана, да и та больше как справочник. Всем советую — если не хотите читать говеный перевод прошлогодних западных книг или дристню отечественных авторов, короче, если хотите быть на передовой — делайте карточку Визу и заказывайте книги на Амазоне.

Я много раз заказывал на Амазоне и все мои карточки работали безотказно. Однако, недавно Амазон отказался проглотить платеж по карте Виза банка ВТБ24. Пробую второй раз, третий — хуй вам.

Стал гуглить на тему возможных проблем. Выснилось, что с недавнего времени ВТБ24 стал требовать передачу CVC (CVV) кода. Позвонил в ВТБ24, спросил, дескать, что за нахрен. Мне ответили, что запрос CVV кода увеличивает секьюрность карты, и что об этом было уведомление на сайте банка. Видимо сотрудники ВТБ24 считают, что все владельцы карт прямо каждое утро начинают с чтения новостей ВТБ24, настолько они важные и интересные.

Написал в Амазон. Ответили:

I’m sorry, but our ordering system is not set up to accept the CVV2 security code associated with credit cards. I hope this will not prevent you from receiving your order. Some issuing banks do have stricter requirements for internet purchases. If your bank requires that the CVV2 code be submitted, unfortunately we can’t accommodate that request and you will need to use a different credit card or payment method.

Блять, придется переделывать карточку в другом банке — она мне по сути в данный момент только для заказов на Амазоне и нужна.

PSD2HTML

2008-04-02T00:45:00.010+04:00

Существует большое количество компаний специализирующихся исключительно на верстке сайтов. Подозреваю, многие такие компании состоят из одного-двух фрилансеров, но не в этом суть.

Вот, например, PSD2HTML. Особенно у них порадовала форма заказа с кучей опций.

И что поразительно: делают быстро и за какие-то копейки. PSD2HTML обещает порезать макет в течении 1 рабочего дня примерно за 150 долл. Поискал в блогах и на форумах — кто пользовался их услугами пишут, что на выходе качественный xhtml/css-код. Блять, уволить надо половину наших кодеров и пользовать PSD2HTML :-)

Вообще интересно было бы скормить в такую контору макет от нашего студийного дизайнера и посмотреть не подавятся ли :-)

Меня, признаться, самого посещали мысли о создании подобной компании, которая бы занималась преимущественно front-end веб-разработкой, ну может изредка и back-end. Крупнейшими клиентами такой компании могли бы стать студии дизайна и рекламные агентства не специализирующиеся на веб-дизайне, но тем не менее получающие время от времени заказы на сайты. Они в состоянии нарисовать макет сайта (есть дизайнеры с веб-дизайнерским прошлым), но держать команду веб-технологов для них невыгодно и бессмысленно.

5 копеек

2008-03-30T17:00:00.008+04:00

Гуляя сегодня по набережной Москвы-реки в Марьино, обнаружил престранное сооружение. В центре этой мраморной конструкции находится пятикопеечная монета. Вокруг монеты написаны названия московских вузов.

Что бы это значило? Мое предположение, что это сродни носу у собаки на станции метро «Площадь Революции» за который нужно подержаться перед сдачей экзамена. Здесь же, видимо, нужно встать в центр на пятикопеечную монету и мысленно сказать «халява на экзамене, приди!»

Второй вариант использования — для выбора вуза куда поступать. Становишься в центр, закрываешь глаза и бросаешь монетку вверх. На какой вуз попала — туда и пошел :-)

JavaScript: Closure

2008-03-27T13:05:00.005+03:00

На русский closure обычно переводят как «замыкание».

John Resig в своей книге Pro JavaScript Techniques, которую я сейчас читаю, привел ссылку на статью JavaScript Closures. Это очень мощная, пожалуй, самая глубокая и фундаментальная статья по JavaScript, которую я когда-либо читал. Респект автору, Ричарду Корнфорду.

Стал копать дальше, нашел еще замечательную статью: JavaScript Closures for Dummies. Написано очень понятно, с хорошими примерами. Рекомендую начать с этой статьи, если вы только осваиваете closure. Отдельно отметим оригинальную находку автора поместить кусочек JavaScript-кода на кнопку, который этот код запускает.

Также достойны вашего внимания еще две статьи о closure: на Википедии и Мартина Фаулера. В этих статьях речь идет о closure вообще как о концепции программирования, безотносительно к JavaScript.

Что касается книги Ресига, то я несколько разочарован. Материал изложен поверхностно, не хватает глубины как в статье Корнфорда. Много опечаток и ошибок. Как раз в одном из примеров на closure есть концептуальная ошибка, пример не работает. Не понятно как так можно, что он, не оттестировал примеры перед публикацией что-ли?

UPD: Ошибка в примере на closure (листинг 2-16) есть только в исходном коде, который можно скачать с сайта книги. В самой книге этой ошибки нет.

Жду книгу Дугласа Крокфорда. Надеюсь, старина Крокфорд не подведет :-)

XSLT: сборная солянка

2008-03-26T19:31:00.018+03:00

Несколько неочевидных моментов по XSLT.

1. avg, min, max

В XSLT нет агрегатных функций avg(), min(), max(). Есть только count() и sum().

Предположим, у нас есть такой XML:

<list> <item>10</item> <item>5</item> <item>25</item> </list>

Среднее значение можно посчитать так:

<xsl:variable name="avg" select="sum(/list/item) div count(/list/item)"/>

Минимум и максимум чуть сложнее. Бежим по отсортированным по возрастанию/убыванию нодам и берем первую:

<xsl:variable name="min"> <xsl:for-each select="/list/item"> <xsl:sort data-type="number" order="ascending"/> <xsl:if test="position() = 1"><xsl:value-of select="."/></xsl:if> </xsl:for-each> </xsl:variable>

<xsl:variable name="max"> <xsl:for-each select="/list/item"> <xsl:sort data-type="number" order="descending"/> <xsl:if test="position() = 1"><xsl:value-of select="."/></xsl:if> </xsl:for-each> </xsl:variable>

2. `current()`

current() внутри квадратных скобок позволяет выйти из контекста ноды к которой применены эти скобки и вернуться к контексту текущей ноды (которая была заматчена шаблоном или заселекчена <xsl:for-each>).

То есть вместо того, чтобы создавать переменную:

<xsl:template match="navigation"> <xsl:variable name="status" select="@status"/> <xsl:value-of select="/captions/caption[@status = $status]"/> </xsl:template>

можно написать так:

<xsl:template match="navigation"> <xsl:value-of select="/captions/caption[@status = current()/@status]"/> </xsl:template>

3. `concat()`

Работает быстрее:

<xsl:value-of select="concat(@Name, ' ', @Surname)"/>

чем:

<xsl:value-of select="@Name"/> <xsl:value-of select="' '"/> <xsl:value-of select="@Surname"/>

Потому что в первом случае происходит только одна операция вставки в результирующее XML-дерево.

Не говоря уже о том, что первый вариант компактнее.

4. `not()` vs. `!=`

В некоторых версиях XSLT-процессоров есть разница:

not(@name = 'Stepan')

<a name="Stepan"/> => false <a name="Leechy"/> => true <a/> => true

@name != 'Stepan'

<a name="Stepan"/> => false <a name="Leechy"/> => true <a/> => false

Пару раз когда использовал != сталкивался с тем, что вылезала бага при переносе кода с разработческого сервера на хостинг, где стоял другой XSLT-процессор. Поэтому рекомендую всегда использовать not().

5. Глобальные переменные → ускорение

Переменная Regions вычисляется каждый раз при вызове шаблона для <MuscatRow>:

<xsl:template match="MuscatRow"> <xsl:variable name="Regions" select="/Imprimatur/Element[@Name = 'Regions']/Document"/> <xsl:value-of select="$Regions[@Name = current()/@Name]/content"/> </xsl:template>

Используя глобальную переменную можно добиться некоторого ускорения. Переменная Regions вычисляется один раз:

<xsl:variable name="Regions" select="/Imprimatur/Element[@Name = 'Regions']/Document"/> <xsl:template match="MuscatRow"> <xsl:value-of select="$Regions[@Name = current()/@Name]/content"/> </xsl:template>

Актуально при большом количестве <MuscatRow>.

6. Отсчет preceding-sibling-ов

preceding-sibling[1] — это ближайший предыдущий элемент.

Получается вот что:

preceding-sibling[last()] ... preceding-sibling[2] preceding-sibling[1] current item following-sibling[1] following-sibling[2] ... following-sibling[last()]

HTML: контейнеры

2008-03-26T16:09:00.012+03:00

Как бы вы заверстали копирайт? Варианты ответов:

<p id="copyright">(с) 2005 Company Inc.</p> <div id="copyright">(с) 2005 Company Inc.</div> <div id="copyright"> <p>(с) 2008 Company Inc.</p> </div>

Первый вариант ограничивает нас только одним абзацем. Если со временем потребуется добавить второй абзац копирайта, то верстку придется переделать. Кроме того, представим, что вдруг потребовалось вставить в копирайт блок с какой-то сложной версткой (очередное дизайнерское извращение). Тег <p> не может содержать блоковых элементов, поэтому опять-таки придется переделать.

Поэтому добавляем контейнер, в который мы сможем засунуть любое количество параграфов и вообще любой фрагмент HTML. Второй вариант уже лучше.

Однако, я выбираю третий вариант, не смотря на то, что он самый длинный. Тег <p> добавляет еще немного семантики — получается «параграф текста внутри блока копирайта».

Еще один плюс: в версии без стилей блоки текста не слипнутся.

Простой пример.

В версии без стилей текст слипнется:

<div id="some_additional_info">Some additional info.</div> <div id="copyright">(с) 2008 Company Inc.</div>

А так не слипнется:

<div id="some_additional_info"> <p>Some additional info.</p> </div> <div id="copyright"> <p>(с) 2008 Company Inc.</p> </div>

Кстати, проверять верстку с отключенными стилями вообще очень полезно. Если сайтом по-прежнему можно пользоваться, значит сверстано семантически грамотно.

Про компромиссы

2008-03-21T23:49:00.001+03:00

Важно уметь найти компромисс.

— Делать работу с учетом возможных будущих изменений, но с другой стороны не ковыряться слишком долго, делая универсальный вариант, который потом никому не понадобится.

— Найти приемлимый баланс между семантически идеальным кодом, сверстанным по стандартам, и тем, как это отображается в различных браузерах.

— Сделать админскую часть сайта простой и понятной, и вместе с тем достаточно мощной для решения необходимых задач.

— Знать грань, когда лучше пойти договориться с дизайнером, чтобы он немного перерисовал, вместо того чтобы умирать, верстая ебанистический макет.

XSLT: sort

2008-03-21T19:55:00.026+03:00

Используя <xsl:sort> нужно иметь в виду два момента.

— При хождении от текущего элемента по осям preceding-sibling и following-sibling, мы ходим по исходному дереву.

<xsl:for-each select="item"> <xsl:sort select="name" />  </xsl:for-each>

— position() после <xsl:sort> возвращает позицию в отсортированном дереве.

CSS: line-height

2008-03-21T19:43:00.014+03:00

Как-то я долго мучился с line-height.

Задавал его в em и процентах у body и были жуткие глюки с наследованием.

Я уже было отчаялся и решил жахнуть стиль для звездочки:
* {line-height: 1.4em;}

Но тут, коллега подсказал мне, что line-height нужно указывать без единиц измерения.

Оказывается, если указывать line-height в em или %, то при наследовании браузеры не пересчитывают line-height в зависимости от размера шрифта текущего элемента. Из-за этого у меня в <h1> слипались строчки.

А если указывать просто число без единиц измерения, то пересчитывают. То есть берут размер шрифта текущего элемента, умножают на это число и получается высота строки текущего элемента.

Правки в чужом коде

2008-03-21T17:27:00.007+03:00

Когда меня просят помочь по какому-либо проекту, я всегда сначала потрачу 15 минут на изучение особенностей написания кода в данном проекте. Как именуются классы и айдишники в CSS, переменные и методы в JavaScript, шаблоны и моды в XSL. Как отбиваются блоки кода пустыми строками, где стоят пробелы, а где нет. И постараюсь сделать в этом же стиле, как бы он не был мне противен.

Никто не любит править чужой код. Но также неприятно открыть свой код и увидеть, что кто-то нагадил там в другом стиле :-) Это все равно как если бы Зюсмайер, дописывая «Реквием» Моцарта, вставил бы туда какую-нибудь отсебятину, пусть и хорошую. Хорошо, но не в кассу. Нужно уважать автора и его стиль программирования.

JavaScript: return this;

2008-03-21T10:50:00.014+03:00

Если в методе не нужно возвращать некое значение, то лучше сделать чтобы этот метод возвращал this. Это позволяет программировать в каскадном стиле:

myObj.prepare().activate();

Напомню, что если метод явно ничего не возвращает, то он возвращает undefined. Исключение составляют конструкторы, которые по умолчанию и так возвращают this, то есть указатель на новый созданный объект. Поэтому в конструкторах не нужно писать return.

Смотреть в будущее

2008-03-20T17:02:00.008+03:00

Хороший технолог всегда закладывается на то, чего по утверждению дизайнера или менеджера на сайте никогда не будет. Потому что знает — скоро все именно так и будет.

27 июня 2005 года эта фраза висела на главной странице Студии.

Мысли по поводу организации работы

2008-03-19T16:01:00.012+03:00

Неопытный технолог думает как вообще решить задачу хоть как-нибудь. Опытный же технолог имеет багаж решений, которые он может применить. Скорее всего, он уже решал похожую задачу, возможно, не один раз. Поэтому, его цель — не просто решить задачу. Опытный технолог думает шире. Он ищет решение наилучшим образом интегрирующееся с остальными частями системы. Он смотрит в будущее, стараясь сделать так, чтобы модификация и развитие кода были максимально безболезненны. Он заботится о технологах из отдела поддержки, чтобы ребята не сломали себе голову, разбираясь как работает код. Он думает о возможных экстремальных ситуациях и закладывается на них в коде.

Я за такую схему работы: более опытный технолог начинает проект, задает направление, закладывает фундамент, создает базовые шаблоны, основные механизмы и прочее. Менее опытный технолог затем продолжает, а более опытный присматривает и корректирует («ведет») менее опытного.

Нельзя давать человеку одному делать новый проект на незнакомой для него системе (CMS). Человеку сложно сходу придумать хорошую архитектуру решения в новой для него среде разработки. Вопросов которые нужно решить много: где как что хранить, как структурировать шаблоны и прочее. Дай мне сейчас новую систему, отличную от Имприматур I или II, и если мне никто не поможет, я скорее всего тоже сначала сделаю не лучшим образом.

Можно проводить семинары, это, конечно, дает какой-то результат. Однако после семинара человек остается один на один с системой и начинает «ваять».

У менее опытных технологов возможно поначалу будет «ломка». Привыкать к чужому стилю программирования и структурирования информации не просто. Зато они чему-то научатся и не сделают проект, который потом придется переделывать.

Переключение режимов в IE8

2008-03-19T13:53:00.012+03:00

Кстати, если кто еще не знает. Микрософт передумали и теперь IE8 по умолчанию будет рендерить в режиме IE8 Standards. Но с помощью <meta> ему можно будет сказать «рендери как IE7». Ранее анонсировалось обратное поведение.

Итого в IE8 будет 3 режима: Quirks, IE7 Standards и IE8 Standards.

Поведение такое:

1. Задан DOCTYPE для стандартного режима или неизвестный DOCTYPE — включается IE8 Standards mode

2. Задан DOCTYPE для режима Quirks или DOCTYPE отсутствует — Quirks mode

3. Есть <meta equiv="X-UA-Compatible" content="IE=7"> — вне зависимости от DOCTYPE, включается IE7 Standards mode

Ссылки по теме:
Microsoft's Interoperability Principles and IE8
The Default Layout Mode

Степан Резников

Hunting for geeks

Что мне не хватает в Гугл+, Твиттере, Фейсбуке и многих других сервисах

Неблокирующая загрузка кнопки +1

Книги по клиентской оптимизации

Steve Souders - High Performance Web Sites: Essential Knowledge for Front-End Engineers

Steve Souders - Even Faster Web Sites

Cоздание элементов из HTML-строк в jQuery 1.4

JavaScript Shortcuts Library

Простое шаблонирование в JavaScript

Coders at Work

Jamie Zawinski

О работе в компании Netscape

О запуске первой версии Netscape

Overengineering и запуск проектов

О сходстве программирования и писательства

О комментариях в коде

Не нужно стесняться собственного незнания чего-либо (моя любимая цитата)

О самом главном навыке программистов

Снова о сходстве программирования и писательства

Brad Fitzpatrick

Отличный совет программистам

О соглашениях по стилю написания кода

Как устроен процесс рецензирования кода в Гугле

Быть энтузиастом и иметь свои проекты

Все приложения уйдут в веб

Быть общительным

Douglas Crockford

Читаем код (очень понравилось, предложу ребятам в Яндексе)

Читабельность прежде всего

Собираем программы из готовых блоков

Снова о том, что надо быть общительным

input type="file" multiple

Результаты домашки №1

Задача 1

Задача 2

Домашка №2

Нет отрицательной логике

Домашка №1

Задача 1

Задача 2

Откуда берутся веб-разработчики?

Ajax со вкусом апельсина

Улыбаемся и машем

Однопиксельные прозрачные уголки

border-radius спешит на помощь

Не хватает слов? Нарисуй письмо!

Комментарии

Сайт «Музея советских игровых автоматов»

Новая Яндекс.Почта

Будущее яваскрипта: ECMAScript 5

Гигапедия

Трабл с попапом с закругленными уголками поверх селекта в IE6

Gmail: Двоеточие в id-шнике

Дилемма о загрузке JS-файлов

JSLint

Главное — не перегибать палку

Варианты использования

Электропочта

Инбокс

Фильтры

Периодичность проверки почты

Черновики

Передача параметров из HTML в JavaScript

Особенности верстки Gmail

1. Названия классов

2. Несемантическая верстка

3. Спрайт с фоном

4. Скругленные уголки

Пока, Студия! Привет, Яндекс!

JavaScript!

JS: image.onload

Книги по JavaScript

Типовой лейаут страницы

Тестовая страница

Простой пример использования

index.html

main.css

main-ie6.css

Новый iepngfix.htc

Вариант 1. С использованием тега `<noscript>` (олд скул)

2. `current()`

3. `concat()`

4. `not()` vs. `!=`