Прекрасно понимая общую нелюбовь Хабравчан ко всему, где есть слово «SEO», отмечу, что правильная поисковая оптимизация является необходимой частью процесса создания и поддержания сайта, что отражено в соответствующих рекомендациях по созданию сайтов от Яндекса и Гугла.

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

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

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

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

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



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

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



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

Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript'ом.

Что же, начнём?

Одним из нововведений HTML5 стала возможность редактировать часть страницы прямо в браузере. Эта фича получила название content editable. Она работает во всех современных браузерах. Чтобы сделать часть страницы редактируемой, нужно поставить тегу атрибут contenteditable="true". Под тегом может стоять практически всё: текст с форматированием, картинки, списки и даже flash-ролики. Но пользователь может добавлять толко текст, остольное он может только удалять. В этом посте я покажу пример использования content editable на веб-сайте.

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

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

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

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

Инструмент: edit.php.net

В этом году Yannick Torrès (yannick) создал удобный web-инструмент для перевода документации PHP. edit.php.net позволяет каждому легко и быстро переводить любую страницу.

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

«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»

Почему это глупо

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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

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

Что будет в посте?

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

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

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

UPD: Добавил также вывод захабренных ссылок: habhab.ru/links

Появился ещё один полезный инструмент для веб-мастера — UnderTheSite. Он изучает заголовки HTTP, код страниц (краулер скачивает примерно десять страничек), JavaScript и CSS, чтобы идентифицировать характерные следы тех или иных технологий (matcher’ы). Один запрос — и на странице отображается сразу полный список, что удалось обнаружить. Можно сразу набирать URL вида underthesite.com/sites/habrahabr.ru. Например:

Google: Google Webmaster Tools Verification, Google Analytics, Google Web Server, UTF-8 Unicode charset, Google Web Fonts, HTML5, Google Website Optimizer, YUI Library.

Яндекс: jQuery, Nginx, Open Graph Protocol, OpenID, OpenSearch, UTF-8 Unicode charset.

Хабрахабр: Google Analytics, Nginx, MooTools, swfobject, UTF-8 Unicode charset.

Автор просит добавлять новые технологии для определения: каждый может сделать это самостоятельно после регистрации.

Да, вы совершенно правильно прочитали этот заголовок: в прошлые выходные Филип Олсон отправил в список рассылки php-internals предложение о начале постепенного ухода от расширения mysql в будущих версиях php. Это, однако, не означает, что mysql уже не будет в PHP 5.4, но с версии 5.5 уже начнётся работа по обновлению документации и добавлению E_DEPRECATED ошибок к функциям mysql.

В качестве замены текущему нативному расширению предпологается использовать расширение mysqli или PDO, а возможно mysqlnd.

В результате, в будущих версиях PHP5 (начиная с 5.5 или 5.6) вызовы таких функций, как mysql_pconnect, mysql_query и так далее будут пораждать весьма неприятные уведомления E_DEPRECATED, а уже в версии PHP 6 код этих функций будет, скорей всего, полностью удалён из PHP.

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

Мониторинг memcached — дело далеко не последней важности. Как на этапе тестирования, так и на этапе сопровождения уже работающего нагруженного ресурса. Средств «из коробки» для этого не так уж и много, а если вы работает с PHP, то зачастую ограничиваетесь средствами memcache (или memcached), а именно

Memcache::getStats()

$memcache = new Memcache;
$memcache->connect('localhost',11211);
print_r($memcache->getStats());


что возвращает типичный набор данных

Array ( [pid] => 25722 [uptime] => 4487286 [time] => 1308323074 [version] => 1.2.2 [pointer_size] => 64 [rusage_user] => 2646.005365 [rusage_system] => 17108.873237 [curr_items] => 37761 [total_items] => 10764857 [bytes] => 140070186 [curr_connections] => 5 [total_connections] => 17360659 [connection_structures] => 31 [cmd_get] => 89154830 [cmd_set] => 10764857 [get_hits] => 83452021 [get_misses] => 5702809 [evictions] => 0 [bytes_read] => 3527860756618 [bytes_written] => 4234517241183 [limit_maxbytes] => 2147483648 [threads] => 1 )

Вроде всё хорошо.
Мы видим, что у нас занято 133,5 Mb из 2 Gb выделенных под memcached и около 37 тыс. ключей.
Hits к misses относиться как 83/5, что тоже не внушает опасений.

Статья написана по материалам моего доклада на CodeCamp 2009.

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

У любого проекта всегда есть что оптимизировать: можно почитать советы по оптимизации на webo.in, установить eaccelerator, memcache, проиндексировать поисковые поля в базе данных. Я предполагаю, что все это уже проделано, а сайт по прежнему тормозит.

Пришло время оптимизировать nginx...

Однажды, nickivanov нарисовал миниатюры для кучи разных флагов и выложил их в свободный доступ. А недавно, artpolikarpov собрал их в один спрайт и написал к нему удобный css, который позволяет легко отобразить любой флаг просто указанием нужного класса.

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

И был бы этот топик топиком-ссылкой, да по необъяснимым причинам не разрешает Хабр в топиках-ссылках указывать авторов, заслуживающих похвал. Так что вот они ссылки:
Описание: artpolikarpov.ru/projects/flags
Архив с флагами: artpolikarpov.ru/projects/flags/flags.zip

Введение

Торжественно открываю новый блог на Хабре, посвящённый Arduino! Блог об универсальном opensource-микроконтроллере Arduino, который будет интересен всем любителям микроэлектроники, самодельных гаджетов и всем, кто не боится взять в руки паяльник.

Arduino представляет собой линейку электронных блоков-плат, которые можно подключать к компьютеру по USB, а в качестве периферии — любые устройства от светодиодов до механизмов радиуоправляемых моделей и роботов. Программы для него пишутся на простом и интуитивно понятном си-подобном языке Wiring (c возможностью подключения сторонних библиотек на C/C++, например, для управления LCD-дисплеями или двигателями), компилируются и загружаются в устройство одной кнопкой, после чего вы тут же получаете работающий автономный гаджет. Никакого ассемблера, никаких лишних проводов и дорогущих деталей и программаторов — чистое творчество, включай и работай!

Хочу поделиться хорошим способом хранения главного репозитория.

Делается это созданием bare—репозитория в папке Dropbox'a:

~/Project $ git init
~/Project $ git add .
~/Project $ git commit -m "first commit"
~/Project $ cd ~/Dropbox

~/Dropbox $ mkdir Repos/YourProject.git
~/Dropbox $ cd Repos/YourProject.git
~/Dropbox $ git init --bare
~/Dropbox $ cd ~/Project

~/Project $ git remote add origin ~/Dropbox/Repos/YourProject.git
~/Project $ git push origin master

Клонируем проект из Вашего репозитория, привязанного к Dropbox аккаунту:

clone ~/Dropbox/Repos/YourProject.git

Теперь можно совершать любые Git операции, которые будут синхронизированы со всеми рабочими машинами.
Все то же самое можно сделать с любым gui клиентом для Git.