Сегодня мы будем воссоздавать прогресс-бар из программы установки Adobe Flash Player средствами CSS3, используя градиенты и тени.



Под хабракатом весь код и ссылка на рабочий пример.

Поисковый гигант сегодня в рамках Google Initiative представил новый инструмент Go Mo, назначение которого — проанализировать «дружелюбность» (friendly) сайта для отображения на мобильных устройствах.

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

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

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

Видео для оценки возможностей Go Mo:



[Источник]

Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.

Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

К написанию сей заметки меня сподвигло то, что я устал делать развёрнутые замечания на эту тему в комментариях к статьям, где в качестве части инструкции по сборке и настройке чего-либо для конкретного дистра предлагают выполнить make install.

Суть сводится к тому, что эту команду в виде «make install» или «sudo make install» использовать в современных дистрибутивах нельзя.

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

Кадры с сайта. Слева на право — Пароль «Рыба-меч», Пираты Карибского моря: Проклятие черной жемчужины, Чак и Лари: Пожарная свадьбы.

Только Яндексу ежемесячно приходится отвечать на 50 тыс. запросов — «Какой фильм посмотреть?» и на более чем 4,5 млн. с формулировкой — «Лучшие фильмы».

Дилемму выбора очередного фильма каждый решают по-своему: кто-то идет в Топ-250 лучших фильмов Кинопоиска, кто-то ищет по любимому актеру или режиссеру, кто-то по лауреатам кинопремий и т.д. Однако, раз за разом делать выбор становится все труднее.

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

Несмотря на простой геймплей, игра пользовалась популярностью, так как:
— у любого школьника или студента всегда под рукой есть тетрадка и ручка;
— одну игру можно играть очень долго. У фанатов можно было обнаружить несколько склеенных листов, вырезанных под ширину поля, то есть такие ленты, доходящие до метра и больше.
— игра сама по себе интересная и затягивающая. 40 минут урока — без проблем, две пары на 3 часа тоже ерунда. Сложнее оторваться от игры, чтобы выйти на перемену. :)

Школьные и институтские годы давно прошли и этим летом в разговоре с друзьями я вспомнил эти цифры-числа. Благо был iPad под рукой, полезли смотреть, есть ли такая игра для iOS? Хм… нет ничего. Тем лучше, ведь мы как раз искали идею нашей первой программы для iPhone. Отличное будет начало!

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

Так вот, неделю назад, во время очередного отключения света в нашем провинциальном городе, мне пришла мысль создать интернет-радио, в эфире которого играет только фортепианная музыка.



Откладывать задумку в долгий ящик не стал.

Т.к. с недавних пор сервис документации по html5 diveintohtml5.org Марка Пилгрима лежит — я решил поднять свой с преферансом и дамами на платформе гугла. Все доки оказались доступны на гитхабе и там лишь статические файлы, потому никаких проблем не возникло. Единственно из-за ограничений гугле на максимальный размер файла 10МБ не влезли два видео, но влезла их копия в формате webm.
Наслаждаемся.
UPD: заменил видео на более мелкие тех же форматов, и поправил пару недочетов с API геолокации гугла.

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.

Эти способы не являются ноу-хау или чем-то в этом духе. Тем не менее, они могут помочь начинающим дизайнерам и web технологам в реализации задуманных ими идей. Каждый из предложенных вариантов можно обыграть по-своему.

Проверял лично и убедился в том, что исправно работает под следующими браузерами:

IE7+, Opera 10.5+, FF 3.6+, Chrome 12+ (linux), Chrome 13+ (windows), Safari 5+(win) исходя из личного опыта, предполагаю о том, что работать исправно будет во всех свежих версиях Safari, FireFox, Opera и Chrome.

С помощью CSS можно построить вот такие вот симпатичные варианты:

У каждого дизайнера наступает момент, когда ему надоедает заново рисовать одинаковые элементы на сайтах. Например, иконки социальных сетей или стрелочки для галерей. Также, технологам надоедает каждый раз нарезать «гиф» или «пнг» одного и того же элемента.

Чтобы упростить себе эту работу мы сделали шрифт, в котором каждая буква — символ (как правило, часто используемый).

Ну и собственно почему-бы им не поделиться со всеми?

Web Symbols

Раннее мы уже писали про наш сервис для создания «прелоадеров» (анимированные изображения — индикаторы для подгрузки данных) Preloaders.net. В новой версии мы решили добавить сразу несколько новых возможностей, главная из которых — создание прелоадеров в формате APNG (Animated PNG).

В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.

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

Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.

И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:

• работает стабильно
• выглядит очень стильно
• написан на jQuery

Имя этому чуду – Imperavi.
Попробуйте сами и думаю, что вам понравится.

Скриншот:


UPD
Более новая версия редактора: http://imperavi.ru/redactor/.

Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()

(версия для jQuery)

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

Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

Несколько дней назад мы с TheShock создали топик в котором собирали ваши вопросы, касательно JavaScript (архитектура, фрэймворки, проблемы). Настало время ответить на них. Мы получили очень много вопросов, как в комментариях так и по email. Эта первая часть ответов — те вопросы, которые достались мне.

Около 2-х месяцев назад я и TheShock собирали вопросы по JavaScript в теме FAQ по JavaScript: задавайте вопросы. Первая часть, те вопросы, которые достались мне, появилась буквально через несколько дней JavaScript F.A.Q: Часть 1, а вот вторая часть все не выходит и не выходит. TheShock сейчас переезжает в другую страну и поэтому ему не до ответов. Он попросил меня ответить на его часть. Итак вторая часть ответов — те вопросы, которые достались тоже мне.

Не болейте. Решил сделать обзор интересного плагина и заодно дать рекомендации к использованию.

Для самых нетерпеливых — получится у нас так.

Плагин называется jQuery 2D Transformation Plugin. Он позволяет использовать анимацию свойств CSS 2D Transforms.

Обзор с описанием свойств — в конце топика.

Посмотрев на цены готовых ардуин в нашей стране я пригорюнился.
Но потом задался вопросом… А какого черта?! Ведь там используются обычные AVR микроконтроллеры, доступные россыпью на радио рынке за нормальную стоимость.
А почему бы не собрать свое и не сидеть на готовеньком?
Тем, кому интересен процесс сборки и настройки своей простейшей Arduino, прошу под кат.

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

Но что делать, если хочется чего-то большего? Если надоело писать однотипные классы для онлайн-казино, ковыряться в Joomla/Drupal/PHPBB очередного заказчика?

Статья написана в 2009 году, и с тех пор многое изменилось, в том числе появились некоторые альтернативные шрифты для программирования, например, Anonymous Pro.

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

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