Многие сегодня применяют прототипирование, разрабатывая в самом начале проекта прототипы интерфейсов. Хорошо известно, что исправлении ошибки на этом этапе стоит в разы дешевле, чем на более поздних этапах.

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

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

Сразу после окончательного релиза 14 марта сырого Internet Explorer 9 в Твиттере появился аккаунт ie9bugs, в котором собираются значительные для веб-девелопера баги. И хотя есть баг-трекер Микрософта, но там чёрт ногу сломит, а тут в одном месте достаточно кратко описаны и даны ссылки на интересные нюансы. Нам скоро придётся вступить в это говно работать с передовым браузером от Microsoft, потому, имхо, вполне полезно знать все эти грабли. Особенно, зная, с какими темпами Микрософт их закрывает. Предлагаю присоединиться к этому сообществу, рассказать интересные моменты, которые у вас уже есть и прочитать то, что они уже открыли. Из того, что «порадовало» меня больше всего:

• IE9 понимает не больше 4095 селекторов в одном CSS-файле
• Можно подключить не более 31 CSS-файла
• События не цепляются к элементам, у которых background:transparent;

Особо радует первый баг, теперь большие таблицы стилей не объединишь в один файл) Микрософт нам, верстальщикам и JavaScript-программистам, приготовил ещё огромное количество работы, костылей и головной боли, выпустив IE9, радуемся)

Ну и много ещё чего найдено за две недели, читайте сами.

UPD:

A reliable exploit for Internet Explorer 9 on Win7 SP1 is now available for our Gov customers. Unpatched vuln + ASLR/DEP/Sandbox bypass

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

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

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

CSSO (CSS Optimizer) является минимизатором CSS, выполняющим как минимизацию без изменения структуры, так и структурную минимизацию с целью получить как можно меньший текст.
CSSO написан на Javascript, выполняется как в браузере, так и в командной строке (с помощью NodeJS).
Распространяется под лицензией MIT.

Сегодня попробуем написать небольшую игру Понг используя html5 тег canvas. Те кто не хочет читать пост тот может сразу ИГРАТЬ.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…

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

Часто (в том числе и на хабре) всплывает вопрос освещения, особенно «нанотехнологиченого» светодиодного и зачастую говны священных войн «светодиод» против люминисцентных ламп начинают подбурливать. Больше года я уже собирался написать статью о свете, и оно наконец свершилось.
Из этой статьи вы узнаете почему в фотостудиях не снимают с люминесцентными лампами, почему светодиоды до сих пор не захватили мир и стоит ли ими освещать улицы. Поехали!

Продолжаем тему операторов, на этот раз вас ждет рассказ об операторе запятая.

Начнем с забавного твита:



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

Что она делает?

Оператор запятая выполняет оба операнда (слева направо) и возвращает значение второго оператора. (MDC)

var a = (7, 5);
a; //5

var x, y, z
x = (y=1, z=4);
x; //4
y; //1
z; //4

Сегодня в рассылке DayliJS я открыл для себя одно прекрасное расширение — jQuery Sausage, которое позволяет добавлять на страницу очень удобную схему навигации — блоки, разделенные заголовками, масштабируются относительно высоты контента и отображаются как diff-аннотации в WebStorm или NetBeans (нечто подобное можно видеть слева поста).


Картинка кликабильна ведет на пример jQuery Sausage

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

Практически все Javascript-программисты пользуются консолью в браузерах. Консоль встроена в Хром, Оперу, IE и устанавливается с Firebug в Фоксе.
Но у неё есть пару неудобств, которые можно очень легко исправить. Это:

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

Исправим эти проблемы легко и быстро!

Увидела свет новая версия UMPlayer 1.0

UMPlayer — это кроссплатформенный мультимедия проигрыватель. В данный момент есть версии для Linux, Windows и Mac Os.
UMPlayer по сути это форк SMplayer, и так же как и родитель тоже является фронтендом для Mplayer.
Немного интересного под катом.

Хочу поделиться радостью от проделанной сегодня успешной работы (на интуитивном уровне) по доработке алгоритмов подсчета кармы и рейтинга пользователей в Drupal 6. Но для начала надо немного рассказать о моем уровне подготовки, чтобы стало понятно, насколько универсализация API и принципы ООП украшают жизнь людям. Надеюсь, будет полезно для новичков, вроде меня и поможет им преодолеть первые трудности на пути освоения Drupal. Кто хочет сразу перейти к сути статьи, листайте до заголовка «Долгожданные оценки и карма».

Вокруг нас появляется все больше людей, которые знают, чем дефис отличается от минуса, минус от тире, а знак дюйма от кавычек. Что там говорить, мне вчера секретарша прислала письмо, оформленное типографически точно. Для того, чтобы немного приблизиться к совершенству, не обязательно отягощать себя открытым окном «дополнительные символы» и унылым копипастом оттуда.
Большинство проблем в современных оконных менеджерах решается штатными средствами. Но что делать тем, кто хочет иметь возможность в одно нажатие набирать какие-нибудь экзотические символы, наподобие знака бесконечности (∞), интеграла (∫) или карточных мастей ()?
Под катом я расскажу и как настроить клавиатуру для правильной типографики («—») штатными средствами, и как расширить возможности до быстрого набора любых символов.

Храните мелкие картинки, которые нельзя засунуть в спрайты, в data:image base64 в CSS — это экономит кучу запросов к вебсерверу.

Буду собирать тут первоапрельские шутки веб-разработчиков за 2011 год.
Если хотите найти их самостоятельно — лучше не заходите в пост.

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

Crosspixel — небольшая программка на Javascript (около 15 Кб), которая показывает макет поверх вёрстки; как PixelPerfect для Firefox, только работает в любом браузере :)
Работает так:

1. скачайте crosspixel.js и подключите в ваш html-файл;
2. укажите путь до вашего файла-макета и его размеры;
3. в браузере появится панелька, которая позволяет показывать/скрывать макет (при показе меняет размер окна браузера под макет, при сокрытии восстанавливает прежний размер), менять его прозрачность.

Проект на GitHub

Когда количество машин, на которые я постоянно заходил по ssh достигло 3х, я понял, что просто быстрой авторизации мне мало, и пора перетащить bash-алиасы, конфиги к редактору и прочие элементы окружения на удаленные системы. С другой стороны, нужен был способ не путаться в многочисленных вкладочках с терминалами. В итоге я пришел к связке из scp, screen и цветовой дифференциации хостов :)
Скриншоты результатов:
Домашняя система:

Одна из удаленных машин:

Команда для синхронизации профиля:
$ profsync
Подробности под катом.

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

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

_{Предисловие переводчика.  «Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смысле без «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз — 13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выход PIE 1.0 beta 3 состоялся 6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься, во-первых, об апгрейде PIE (во имя ускорения работы сайтов), а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.}

Она подготавливалась долгое время, но вот третья бета PIE 1.0 наконец вышла! Этот выпуск содержит множество изменений; вот некоторые из крупных улучшений в нём:

• Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода PIE, и многие из них подверглись оптимизации. Результаты ошеломляют: скорость PIE выросла до четырёх раз в сравнении со второй бетою, особенно заметно — в IE8. И это принесёт ускорение обработки страниц и вам, и читателям ваших сайтов!
   
• Ленивая инициализация — Даже с учётом всех улучшений скорости, если ваша страница весьма длинна, она может содержать сотни PIEфицированных элементов, которые суммарно приведут к заметной задержке. Однако есть шанс, что лишь немногие из них видны в окне просмотра изначально (после загрузки страницы), чего же тогда тратить время на обработку остальных элементов, прямо сейчас не видимых? Теперь вы можете задавать специальное свойство -pie-lazy-init: true в CSS, и тем самым откладывать инициализацию всех PIEфицированных элементов за пределами видимой области загруженной страницы. Они будут проинициализированы и отображены после того, как читатель до них допрокручивает страницу.
   
• PIE.js: отдельная версия на джаваскрипте — Теперь есть два способа использования PIE: традиционный (PIE.htc и behavior) и новый (отдельный джаваскриптовый файл PIE.js). Хотя указание файла .htc и свойства behavior останется рекомендуемым подходом, JS-версия позволяет употреблять PIE в некоторых таких ситуациях, в которых behavior не в состоянии сработать. Поглядите в документации по PIE.js подробности о том, когда и как вы можете пожелать прибегнуть к JS-версии.
   
• Работает с табличными элементами — Теперь применение PIE к элементам <table>, <th> и <td> приводит к корректной обработке и впредь не грозит бесконечным циклом.
   
• Работает с изображениями — Теперь вы можете использовать PIE для закругления уголков элементов <img>.
   
• -pie-png-fix — Теперь вы можете использовать PIE в качестве общего исправления альфа-прозрачности PNG для IE6, используя новое специальное CSS-свойство -pie-png-fix: true. Подробности изложены в документации по -pie-png-fix. Эту функциональность обеспечил Felix Gnass.
   
• Отключено в IE9 — Так как IE9 самостоятельно поддерживает множество тех же свойств и значений CSS3, что и PIE, и так как ещё не ясно, что IE9 будет поддерживать в окончательной версии, то на время PIE будет отключаться при работе в IE9; это временное решение будет пересмотрено по мере дальнейшего развития событий.
   
• position:fixed — Теперь PIE располагает свои элементы отображения корректно, когда применяется к элементам со свойством position:fixed (это никак не касается IE6, поскольку IE6 не поддерживает свойство position:fixed самостоятельно).
   
• Печать — Теперь PIE самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
   
• Множество других исправлений и улучшений — см. логи правок кода.

Скачайте PIE 1.0 beta 3 прямо сейчас!

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

К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.

Почему валидация формы со стороны браузера?

Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.