Веб-разработка *

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

Покопавшись, можно найти что-нибудь типа связки xvfb (виртуальный фреймбуффер) с каким-нибудь браузером, например xvfb+opera, или khtml2png, который тянет за собой фигову тучу kde'шных либ. А ведь так хочется какого-нибудь легкого standalone скриптика...

Решив посвятить немного времени изучению вопроса, обстоятельно исследовал имеющийся инструментарий.

Я только что прочитал очередную версию мифа о том, как какой-то эзотерический язык программирования (чаще всего Lisp или Haskell) может стать секретным оружием, позволяющим команде на порядки превосходить ожидания. Пол Грэм глобально распространил это миф (Побеждая посредственность / Beating the Averages), и миф передавался из поколения в поколение. Но это враньё. Еще хуже то, что он усиливает настоящий бич нашей индустрии – интеллектуальный элитизм.

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

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

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

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

Количество элементов на одной странице

Разбиваете список на страницы? Как будет выглядеть вторая страница для списка из 101 элемента, если ваше волшебное число 100?

ModularGrid — это небольшая программка на javascript (около 30 КБ), которая облегчает труд HTML-верстальщика.

Основные возможности ModularGrid

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

С недавних пор главная страница ozon.ru перестала корректно отображаться в Chrome (я пробовал как stable сборки, так и dev).


Решив помочь любимому магазину я воспользовался обратной связью, написав в службу поддержки:
«ОШИБКА на сайте: не отображаются картинки на главной в браузере Chrome (Windows 7 | Linux)»

Думаю, все знают, что это такое. Некоторые браузеры, в частности, Фаерфокс и Интернет Эксплорер 8 рисуют однопиксельную пунктирную рамку вокруг ссылок и внутри кнопок, когда пользователь нажимает на них. Если сайт состоит из голого html, скорее всего, дискомфорта они не доставят. Но если все ссылки как-то стилизованны, вам (или вашему дизайнеру), скорее всего захочется избавиться от этого. Тем более, что эта рамка может отобразиться в неподходящем месте:

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

Web-шрифты на данном этапе развития невозможно применять без геморроя. Они придуманы для того, чтобы дать пользователям возможность видеть страницу такой, как её задумал автор сайта. Что на самом деле видит посетитель?

Google Font API — API для подключеня нестандартных шрифтов.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

Кажется войне Theora против H.264 пришёл конец. В битве между свободным и лучшим победило свободное и лучшее.

Как мы помним, Google недавно купила компанию On2. Это компания известна не только тем, что открыла VP3, который лёг к основу свободного кодека Theora, но и тем, что создала отличный видео-кодек VP8 который вполне может потягаться с текущим лидером H.264. Компании Google (как и многим другим) очень не выгодна война кодеков вокруг тега <video> в HTML5. Поэтому как только On2 была куплена сразу начали говорить, что VP8 скоро откроют, что и произошло недавно (лицензия BSD).

Однако VP8 — это только видео-код. Чтобы смотреть фильм, нужно ещё кодировать звук и собрать все потоки данных в один файл. Поэтому был предложен набор WebM: Vorbis в качестве аудио-кодека (известен некоторым под неправильным названием Ogg) и Matroska в качестве контейнера (известен из раздач торрентов, обладает кучей функций и основан на бинарном XML).

Конечно же новый стандарт не захватит мир сразу — он ещё в статусе dev preview, надо добавить поддержку в браузеры, на сайты и в чипы мобильных устройств. Поддержка уже есть в ночных сборках Firefox, Chromium, Opera и ffmpeg. А YouTube уже отдаёт видео в WebM (нужно включить HTML5 и добавить &webm=1 в URL) и наверняка на него перейдёт Википедия, потому что он свободный. Процесс пошёл и победа WebM — лишь вопрос времени.

Адрес проекта: webmproject.org.

В мире существуют тысячи CMS для самых разных целей, самого разного качества, самой разной перспективы, стоимости, распространённости и так далее. Серьёзно опробовать их все — нереально. Поэтому когда я только знакомился с миром движков для сайтов, выбирать приходилось наугад. Ниже я опишу свои впечатления от знакомства с теми или иными движками для тех или иных целей. К некоторым приложу краткое описание особенностей, впечатление о прочих состоит только из заглядывания в админку. Заметки эти составлялись и редактировались в течении долгого времени, но сейчас я решил, что лучше опубликовать их в нынешнем виде, чем ещё полгода-год по чуть-чуть редактировать не добавляя ничего принципиально нового.
Преимущество отдаётся бесплатным движкам. Платные будут рассматриваться только для сравнения или от безысходности, т.е. если нет бесплатных аналогов. Также ограничение на технологии: php. О движках на перле и питоне я не более чем слышал, на шарпе и джаве имел дело с самописными.
Итак, рассматриваются

• CMS общего назначения. Информационные сайты, визитки, блоги…
• Многофункциональные монстры.
• Галереи.
• Социальные сети.
• Форумы.
• Интернет-магазины.

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

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

Сегодня доля Internet Explorer 6 составляет примерно 7-8% и продолжает падать. Однако популярность этого браузера все еще достаточно велика, чтобы лишать его пользователей возможности пользоваться вашими сайтами. Большинство разработчиков все еще проверяет каждую функцию на совместимость с этим браузером, кто-то даже бьется над попиксельным соответствием верстки с макетом. Но почему-то многие забывают про другой набирающий популярность браузер. Речь идет об Opera Mini. С развитием мобильных технологий люди все чаще выходят в интернет со своего мобильного. Если верить liveinternet.ru, Opera Mini используется для серфинга уже чаще, чем пресловутый IE6! Может быть займемся тестированием наших сайтов в самом популярном мобильном браузере? Тем более, что для этого не нужен мобильный телефон.

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

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

Примерно неделю назад принимал участие в конкурсе на открытую вакансию Microsoft. И провалился. Прошла неделя, мысли в голове (как же так? не может быть!) немного улеглись и я сделал некоторые выводы из этого опыта, коими и хочу поделиться с хабражителями.

QR-code, уже давно распространен повсеместно, во всех сферах человеческой жизни. Вроде такая популярная вещь, а нормальной библиотеки (Open Source) на PHP — нет. Товарища deltalab, очень напрягла эта проблема и он решил переписать имеющиеся в наличии С библиотеки ibqrencode от Kentaro Fukuchi, на более привычный ему язык PHP.

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

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

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

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

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

Как так? Кому он понадобился кроме меня? Почему так быстро? Вопросов было много.

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