Наноблог Артёма Сапегина

Что важнее: код или продукт, и нужно ли скрывать свой код

Илья Бирман хорошо рассказывает, что важнее: сам продукт или его код. Во всём согласен, кроме сокрытия исходников и предположения, что туда никто не смотрит.

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

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

В последнее время я вижу всё меньше причин скрывать свой код. В этом есть немало плюсов, а минусов я пока не нашёл. Например, лучше получается выделять куски, пригодные для последующего использования; можно пользоваться прекрасным Гитхабом бесплатно. Есть и другие причины, но они уже зависят от популярности автора и проекта. (Хорошая заметка по теме — Open Source (Almost) Everything.)

Комментарии 0

Не надо больше социальных сетей

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

Сейчас я читаю две RSS-ленты (все ЖЖ, естественно, тоже в них), Твиттер и Фейсбук. Плюс на несколько сайтов захожу раз в неделю поглядеть (500px, Dribbble…). В каждой ленте по несколько сотен потоков. По многим причинам это ужасно неудобно.

1. Первая лента — Яндекс Подписки. Её я читаю по будням. Тут в основном про веб-разработку и прочее занудство. Сюда же попадают фотографы, к кому я редко заглядываю под кат (Подписки показывают его только по клику, это удобно). У Подписок есть некоторые недостатки (огромная нескрываемая панель слева и неработающая j/k-навигация, например), но в целом он довольно удобный.

2. Вторая лента — Гугл Ридер. Этой штукой нельзя пользоваться без напильника (в виде плагина minimalist для Хрома) — разработчики налепили столько горизонтальных панелей, что на сообщения просто не остаётся места. Здесь у меня в основном фотографы и фотосайты. Её я читаю раз в неделю.

3. Твиттер. Тут есть одно спасение — Slipstream, который убирает из ленты немало мусора: форскверы, ютубы, трекеры похудания и пробежек, ретвиты отдельных пользователей и всё то, что нормальный человек никогда не опубликует). В Слипстриме у меня уже несколько десятков правил.

4. Фейсбук. До недавнего изменения дизайна ленты читать её было совершенно невозможно. Сейчас уже кое как можно, правда приходится отписываться от ненужных событий (например, какое мне дело, кто с кем подружился) отдельно для каждого пользователя.

Ещё одна полезная штука — Instapaper. Раньше длинные статьи месяцами висели у меня в браузере, после чего я закрывал их, так и не прочитав. Сейчас я отправляю их в Инстапейпер (плагином для Хрома — это один клик), а раз в неделю мне на Киндл приходит «газета» с подборкой непрочитанных статей.

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

Комментарии 5

Стиль HTML-кода: HTML, XHTML и снова HTML

Лет 10 назад, когда я только-только начал заниматься веб-разработкой, то считал, что чем короче код, тем он круче (мы же в интернете, фигли). Да и вообще любил всякое ковбойство. Код я писал примерно такой:

<html><head>
<title>general protection fault group</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
<link rel=STYLESHEET type=text/css href=styles/styles.css>
</head>
<body bgcolor=#666666 text=#333333 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 marginheight=0 marginwidth=0>

Яваскрипт не отставал: односимвольные имена переменных, никаких комментариев и всё такое.

Потом я немного поумнел и понял, что так нельзя. Как раз тогда в моду вошёл XHTML с его строгим XML-синтаксисом, и я полностью перешёл на него. Закрывающий слэш, конечно, раздражал, но надо так надо.

А потом внезапно пришёл HTML5, и я в один день отказался от XML-синтаксиса. Как-то неожиданно пришло понимание, что суть не в следовании навязанным кем-то правилам (вспомним бессмысленные кнопки XHTML 1.0 и CSS 2.0, которые не так давно ставили на свои сайты все уважающие себя веб-разработчики), а в понимании того, что делаешь. Нет ничего хорошего в несемантичной вёрстке, даже если она проходит любую мыслимую валидацию. Но и нет смысла писать лишние закорючки, если есть более простой стандарт. При этом никто не запрещает закрывать теги и писать атрибуты в кавычках, хоть стандарт этого и не требует, просто потому, что это удобно.

Комментарии 0

О простых и сложных инструментах

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

С одной стороны нет смысла ставить/изучать Фотошоп, если задачи ограничиваются кадрированием и уменьшение для веба (сам до недавнего времени пользовался на работе сначала Пейнтом.Нет, а потом Фотошопом Элементс). Но с другой стороны, опытный фотограф в сто раз быстрее сделает это в Фотошопе, потому что Фотошоп он отлично знает. Ему нет смысла изучать ещё одну программу, которая позволит ему делать то же, что и Фотошоп, но будет запускаться на сотую секунды быстрее.

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

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

Комментарии 16

Чем отличается разработка собственного кода от использования чужой библиотеки?

В первом случае вы полдня пишете код без остановки; а во втором — полдня ищете, какие нужно написать две строчки, что всё заработало (если библиотека хорошая, вы их находите).

Комментарии 3

Тестирование моделей с FileField/ImageField в Django

Оказалось, что тестирование моделей с файлом (поле FileField) или картинкой (поле ImageField) в Django не так уж очевидно. Допустим, у нас есть модель:

class MagicPony(models.Model):
	photo = models.ImageField(_('Photo'), upload_to='uploads/ponies')

При загрузке файла через HTML-форму проблем не возникает, но, чтобы загрузить изображение с диска, нужно дополнительно обернуть наш файл в объект File:

from django.core.files import File

class PonyTest(TestCase):
	def test_magic_power(self):
		file = open('pony.jpg', 'rb')
		file = File(file)
		pony = MagicPony.objects.create(photo=file)

		# Теперь можно писать любые проверки (наличие магической силы,
		# количество копыт и т. п.)

Комментарии 0

Курс по подготовке идиотов (цитаты из книги «Искусство оформления сайта»)

Искусство оформления сайтаМне всегда было интересно, где люди учатся делать те самые безвозвратно ужасные сайты, которыми полнятся интернеты. И кажется я нашёл ответ. Это книга С. Н. Бердышева «Искусство оформления сайта», изданная издательством Дашков и Ко в 2010 году. Не судите об этой книге по обложке — она совершенно не даёт представления о том, насколько она ужасна. Больше всего в книге удивляют пересказы умных книг о веб-дизайне и юзабилити с последующим созданием страницек-уродцев, полностью им не соответствующим. Судя по содержанию, книге уже лет 10, хотя все скриншоты сделаны в Висте, а список литературы составлен из книг 2008 года издания. Кстати, у автора почти два десятка книг о различных аспектах рекламы, маркетинга, бизнеса и других предметов. (Кстати, меня тоже пытались учить плохому, но я удержался.)

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

(После того, как ссылка на пост появилась на Хабре, какой-то шутник заново зарегистрировал сайт, на который ссылается автор книги, и разместил там всё правду о ней.)

Читать дальше…

Комментарии 76

Анимация цвета с помощью плагина jQuery.Color()

Недавно команда jQuery выпустила бета-версию обновлённого плагина для анимации цвета jQuery.Color(). Плагин позволяет работать с цветовыми моделями RGBA и HSLA; читать и изменять (как на абсолютные значения, так и относительно текущего) отдельные компоненты цветов; анимировать цвет фона, текста и рамки.

Например, можно плавно изменять оттенок (hue) от 0 до 359 (т. е. от красного до красного со всеми остальными цветами между ними). (Первый пример по ссылке.)

(function animate() {
	var block = $('#c1');
	block.animate({backgroundColor: $.Color(block.css('backgroundColor')).hue('+=179')}, 3000, animate);
})();

А вот более полезное применение: обратная связь при клике. Блок как бы зажигается на мгновение. Это достигается плавным увеличением яркости (lightness) на 40%. При этом скрипту не нужно задавать никакие цвета: он сам определяет и начальный цвет, и конечный. Я недавно использовал такой эффект в пятизвёздочном рейтинге — смотрится хорошо. (Второй пример по той же ссылке.)

$('#c2').click(function(e) {
	var block = $(e.target);
	var color = $.Color(block.css('backgroundColor'));
	block.animate({backgroundColor: color.lightness('+=0.4')}, 300, function() {
		block.animate({backgroundColor: color}, 300);
	});
});

Комментарии 0

Подсветка кода в WordPress с помощью highlight.js

Решил заменить в блоге серверную подсветку кода (плагин wp-syntax) на клиентскую (highlight.js). Знаю, что для последнего уже есть несколько плагинов для Вордпресса, но мне показалось, что проще самому написать 10 строк кода.

Читать дальше…

Комментарии 4

CSS3 transition фона: кое-какие детали

Читая книгу «Stunning CSS3» обратил внимание, что стандарт CSS3 запрещает делать transition свойства background. Можно использовать только background-color, background-image (почему-то только для градиентов) и background-position. Однако, как было написано в книге, большинство браузеров должны понимать и просто background.

Я решил проверить, так ли это на самом деле, и сделал небольшой тест. На данный момент все браузеры, кроме Оперы, делают переход цвета фона, даже если написать просто background.

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

Проверку переходов background-position оставляю читателю в качестве домашнего задания.

Комментарии 0

Вёрстка примеров кода с индикаторами переносов строк

Задача: сверстать примеры кода с переносами строк и индикаторами переноса в конце строк. Без картинок и JavaScript.

Читать дальше…

Комментарии 2

Обмен данными между окнами с помощью localStorage

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

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

Читать дальше…

Комментарии 0

Что внутри у сайта?

Два плагина для Хрома для любопытных: Chrome Sniffer и HTML5 Powered. Первый показывает, какой движок и какие JavaScript-фреймворки используются на сайте, а второй просто определяет, используется ли новый короткий доктайп HTML5.

Chrome Sniffer HTML5 Powered

Комментарии 1

Самое тупое сообщение об ошибке на свете

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

Ошибка авторизации

В этом окне была единственная кнопка «ОК», а в предыдущем — «Продолжить». Замкнутый круг.

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

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

А ещё совершенно не обязательно употреблять такие слова как «ошибка» (я всё делал правильно) и «авторизация» (я даже не должен знать, что это такое).

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

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

Комментарии 4

Маленький пример использования Deferred-объектов в jQuery 1.5

Недавно у меня была такая задача: нужно было выполнить несколько аяксных запросов и показать на странице индикатор загрузки. Причём, индикатор должен был крутиться не меньше некоторого времени, чтобы у пользователя не было ощущения, что после нажатия на кнопку ничего не произошло. После завершения всех запросов нужно было выполнить некоторое действие. Код тогда получился излишне объёмным и не очень красивым. Deferred-объекты, появившиеся в jQuery 1.5, позволяют решить такую задачу гораздо проще и элегантнее.

Читать дальше…

Комментарии 2