Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

CSS3 PIE достиг версии 1.0 beta 4. Этот бета-выпуск в основном посвящён исправлению ошибок. Вот основные исправления:

• Исправлена ошибка JavaScript при печати.
   
• Переменилось обнаружение IE9: теперь PIE срабатывает в режимах соместимости и quirks, но отключается в стандартном режиме IE9.
   
• Исправлены ошибки в отображении border-image, в отображении изображений нулевого размера, и некоторые другие (спасибо, Keith Gable).
   
• Предотвращено многократное скачивание изображений, используемых на странице многократно.
   
• Добавлена поддержка ключевых слов цветов CSS3 (спасибо, Don Retzlaff).
   
• Исправлено поведение ключевых слов border-width (таких, как «medium»).
   
• Исправлено позиционирование элементов внутри RTL-текста.
   
• Добавлено новое особое CSS-свойство -pie-poll, которое позволяет указать, что PIE должен периодически проверять, не изменилось ли положение и размеры элемента. Это полезно в тех случаях, когда IE не создаёт события «onmove» и «onresize», хотя и должен.

Глядите полный список изменений и скачивайте PIE 1.0 beta 4 прямо сейчас.

После этой четвёртой беты разработка в основном будет сосредоточена на внедрении в IE9 корректной поддержки свойств CSS3, там отсутствующих — прежде всего «linear-gradient» и «border-image».

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

• создать паука, выполняющего GET запросы,
• извлекать данные из HTML документа,
• обрабатывать и экспортировать данные.

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

Первый способ

Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
Они превращают существующий код

function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }
    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

В какой-то такой вид:

function MyClass(){this.foo=function(c,b){var d=parseInt(c)+parseInt(b);return d};var a=function(){}};

Или такой:

var _0xd799=["\x66\x6F\x6F"];function MyClass(){this[_0xd799[0]]=function (_0xefcax2,_0xefcax3){var _0xefcax4=parseInt(_0xefcax2)+parseInt(_0xefcax3);return _0xefcax4;} ;var _0xefcax5=function (){} ;} ;

Или вот такой:

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4 0="3 5!";9 2(1){6(1+"\\7"+0)}2("8");',10,10,'a|msg|MsgBox|Hello|var|World|alert|n|OK|function'.split('|'),0,{}))

Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.

Все это были цветочки под катом жесткие методы обфускации.

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

Привет, Хабражители!

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

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

Зачем нанимать «одного» тестировщика, если можно получить сотню и оплачивать только интересные баги.

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

HTML — язык, объединяющий всемирную сеть. Всего лишь посредством набора простых тегов, человечеству удалось создать несравнимую ни с чем по своим масштабам систему связанных между собой страниц и веб-узлов: от Amazon, eBay и Википедии, до личных блогов и сайтов, посвященных котам, похожим на Гитлера.

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

Как и всемирная сеть вообще, HTML — язык разметки гипертекста (HyperText Mark-up Language) — является детищем сэра Тима Берненс-Ли (Sir Tim Berners-Lee). В 1991 году он написал работу, озаглавленную «HTML Tags», в которой описал чуть меньше двух дюжин тегов, предложенных им для разметки веб-страниц.

Идея использовать для этого кодовые слова внутри треугольных скобок, впрочем, не принадлежит сэру Тиму. Такая система на тот момент уже существовала и использовалась в SGML (Standard Generalised Markup Language, стандартный обобщённый язык разметки), и вместо того, чтобы изобретать что-то с нуля, сэр Тим посчитал более рациональным взять за основу уже существующие решения. Аналогичный подход применялся и вообще на всем пути к HTML5 в процессах разработки.

Кажется войне 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.

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

Loudtalks — это голосовой мессенджер push-to-talk. Вместо того чтобы печатать сообщения, как в ICQ или звонить как в Skype, вы нажимаете горячую клавишу, говорите и звук в реальном времени транслируется собеседнику. Получается быстро и во многих случаях удобнее звонков или IM.

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

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

Самый первый разговор, после запуска новой версии состоялся на канале Lobby между мной, весельчаком-немцем из Баварии и программистом Google из Сан-Хосе.

Сегодня трудно найти человека, который хотя бы раз в жизни не создавал на компьютере презентацию. Немало и тех, для кого это — обычное ежедневное занятие. Как правило, для этих целей используется пакет Microsoft PowerPoint, входящий в состав пакета офисных приложений. И всё бы ничего, но чтобы использовать данное ПО, его надо купить (просьба не смеяться). Правда, есть вариант использовать бесплатный аналог OpenOffice.org, но не всегда презентации, созданные в MS Office корректно отображаются в OOo и наоборот. Между тем, существует ещё один способ — создавать презентации прямо в браузере. Для этих целей используются стандартные технологии — HTML и CSS, что максимально упрощает работу людей, хоть немного знакомых с веб-разработкой.

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

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

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

Мы с моей командой, наконец, запустили такую штуку — photl.com
Все в стадии бэта, ну вы в курсе (;

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

UPD: Хабраэффект. На некоторое время закрываемся, сорри. Кому не терпится, можно посмотреть скриншоты тут

UPD1: Идет доработка правовой информации. Будут учтены некоторые комменты. Скоро откроемся.

UPD2: На photl.com сделали форму для почты для тех, кто хочет узнать, как только откроемся.

UPD3: Снова открыт для всех!

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

Вот такие необычные часы сделал с помощью JavaScript и MooTools какой-то француз со смешным ником TOKI WOKI.

Исходый код часов

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

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

Всех у кого хоть раз болела голова при написании/чтении javascript кода прошу под кат.

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

Решил поставить и себе, попробовать на вкус, результат в картинках смотрите сами.

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

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

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

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

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