Всем привет.
Под катом — перевод статьи Джеффа Атвуда, в которой он приводит список 25 наиболее опасных ошибок в программировании от Common Weakness Enumeration со своими комментариями.

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

Недавно я писал про поиски способов получения иконок доменов в нормальном формате (т.е. png) и о желании написать свой отдельный сервис для этого, поскольку общедоступные конверторы от Google и Yandexа обладают существенными недостатками.

И вот он готов.

Fugue Icons 1.2.5

Да-да, теперь это не "1000 замечательных иконок для веб страниц" а целых 1,263 иконок. Многие иконки были перерисованы и много добавилось новых. Появились такие востребованные иконки как user или иконки элементов интерфейса: «button, checkbox, slider» и т.д. В общем обновление шикарное, хотя до сих пор нету таких иконок как cut, copy и paste. Иконки по прежнему распространяются по лицензии Creative Commons Attribution 3.0 license а для вопросов: «Зачем кнопка purchase?» читаем это.

Прямая ссылка — 4,9Мб
Набор разработчика 7,6Мб
Пред просмотр — 1980px × 2263px 1,4Мб
Сайт

P.S. Предыдущий пост был написан давно и я решил написать новый чтобы привлечь внимание этому сету, а не использовал UPD.

UPD: Фугия снова обновилась. Теперь версия 1.2.5, вот изменения:

• Обновлена <application_table>
• Обновлена <document_excel_table> и <document_table>
• Добавлена <door_open>
• Добавлена <feed_document>
• Обновлена <folder_open_table>
• Обновлена <inbox_table>
• Обновлена <mail_open_table>
• Добавлена <server*>
• Обновлена <table*> and <tables*>
• Добавлена <traffic_light*>

Следите за обновлениями топика

Мало кто знает, что в HTML есть специальный символ для «мягкого» переноса — ­. Работает он так: если попадает на конец строки — появляется символ переноса, если не попадает — ничего не отображается. Очень удобно, но, к сожалению, вручную вставлять в текст такие символы — занимает слишком много времени. Сегодня обнаружил интересный сервис для автоматической расстановки.

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

Хотел бы сразу отметить, что статья достаточно объемная и часть информации уже была опубликована мной на Хабре. Цель данной статьи объединить максимальное количество информации про новую версию Internet Explorer и представить ее в приемлемом объеме.

В комментах принимаю замечания и исправления.

Эта статья продолжение первого варианта файлового менеджера.

FCKfsys — файловый менеджер для визуального редактора для web FCKeditor. Мне в FCKeditor все нравится, кроме файлового менеджера. Так что надо както исправлять это самому.
Подробная информация о плагине на моем сайте и там же можете посмотреть пример работы.

Выглядит файловый менеджер с превьюшками:



UPD: Доработки сделаны, теперь надо над интерфейсом поработать. По моему ориентир должен быть на Windows-проводник, чтобы было привычно. То есть немного причесать надо.

Эта тема в сети не новая, но тут статью об этом не нашла. Оказывается, у IE, начиная с версии 7, есть поддержка интерполяции (режима масштабирования) изображений и управления им через CSS-свойство -ms-interpolation-mode, описанного в MSDN.

Свойство имеет 2 значения:
— nearest-neighbor (менее качественный режим) — по умолчанию
— bicubic (более качественный бикубический метод)

W3C рекомендует использовать это свойство с префиксом -ms.

Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled".

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

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

Постановка задачи

В проекте есть на данный момент 2 зоны:

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

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

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

Мне известны два способа решения этой проблемы:

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

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

Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом (спасибо dreamhelg за лаконичное описание сути происходящего в данном случае).

Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.

Эта статья о мирном атомеXSS. Заставим зло работать на добро!

А зачем?

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

Методы организации XSS

1. Через тэг iframe
2. Через тэг script
3. Через flash<->javascript
4. Через window.name + iframe + form
5. Через CSS хак
6. Через canvas + img
7. Через прокси

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

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

длинный-длинный-длинный-длинный-длинный-длинный-длинный-длинный-длинный-длинный-длинный-длинный код в тэге <pre> заползает на правую колонку

Чинится очень просто:

pre {
    white-space: pre-wrap; /* Последние Opera, Firefox, Safari, Chrome*/
    white-space: -o-pre-wrap; /* Старая Opera (8?) */
    word-wrap: break-word; /* IE 5.5+ */
}

А тем временем, баг с широкими картинками был исправлен в CSS самого Хабра. Теперь нет нужды в UserCSS.

Обновлено: Баг исправлен. Рад видеть, что мои замечания не пропадают даром.

Описание

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

Рассмотрим параметры, которые есть у Wayfinder. Указанные параметры относятся к первой версии.

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

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

Raphaël — это небольшая JavaScript библиотека с простым синтаксисом для работы с векторными форматами: SVG и VML (для IE). Впрочем, как я успел заметить у разработчика возникают проблемы с VML (когда многие вещи в SVG делаются очень просто в VML не всегда есть простая альтернатива)

CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.

Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:

При проектировании интерфейсов пользователя когда-нибудь обязательно встанет задача использования таймеров, и в этой статье я хочу рассказать о замечательном плагине jQuery Timers, который значительно облегчит работу по созданию и применению таймеров в Ваших приложениях.
jQuery Timers — это высокоуровневая абстракция методов setTimeout и setInterval. Используя jQuery Timers, Вы сможете «прикреплять» таймеры к элементам непосредственно в Вашем коде и использовать еще некоторые возможности.
Как обычно, сначала посмотрим пример, а потом разберем исходный код.

Пример и исходный код скачать можно здесь