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



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

Здравствуйте, уважаемые читатели! В своей статье я хочу произвести анализ компаний, предоставляющих услуги «облачного» хостинга на территории РФ. Анализ проводится с точки зрения среднестатистического пользователя, перед которым встала задача приобретения хостинга в облаке. Основные критерии по которым будет производиться анализ — поддержка, стоимость, гибкость(как один из основных критериев), прозрачность ценовой политики т.д.

www.ilovepsd.ru — небольшой справочник по «Фотошопу» для веб-дизайнеров, но будет полезен и верстальщикам. Например, если вы занимаетесь версткой, то можете ссылаться на него, как на требования к макетам дизайнера.

Справочник призывает работать в «Фотошопе», соблюдая правила хорошего тона. Цель проекта — ускорить процесс дизайна, улучшить чтение файлов проекта и облегчить процесс верстки.

Полезные (и по делу) советы от комментирующих будут добавлены в проект. Велкам.

UP. Сделана фейсбук пейдж для желающих отписаться.

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

Когда я начинал разбираться с Facebook SDK примерно год назад, еще была версия, которая называлась facebook-iphone-sdk. Она и сейчас работает. Но я стал замечать странные сбои в приложении и решил, проверить не вышло ли что-то нового. Оказалось этот проект законсервирован, а разработчикам рекомендуется теперь использовать facebook-ios-sdk, где как утверждалось все еще проще. И как оказалось, не соврали.

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

Инвентарь

Нам понадобится текстовый редактор (я выбрал Gusto, хотя можно было использовать, например, Textastic), графический редактор (установил на всякий случай сразу два: Adobe Photoshop Express и PhotoPad, оба бесплатные), приложение Яндекс.Фотки для загрузки картинок в интернет, и CSS3Machine — про нее расскажу прямо сейчас.

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

Disclaimer
Этот пост появился здесь по нескольким причинам:
1) Меня попросил сам Boomburum
2) Есть предположение, что на хабре всё-таки есть люди, имеющие прямое отношение к IT, но при этом имеющие весьма отдалённое представление о пользе SSH и её извлечении из обычного домашнего роутера, и которым, надеюсь, будет весьма интересно и полезно об этом узнать.

Хабралюдям, познавшим Дао IOS, tun, VPN, *wrt, WOL… etc, предлагается на выбор:
А) Закрыть топик, заняться делом и не выводить себя из нирваны чтением этой любительской фигни.
Б) Потратить время на конструктивную критику и полезные дополнения в комментариях.
Специально для GrammarNazi:
Пишите пожалуйста об ошибках в личку — обещаю исправиться.

Бла-бла-бла, а топик-то о чём?
Итак, я обещал рассказать «как поднять ssh-туннель домой без необходимости оставлять включённым домашний ПК» и, как правильно догадался peter23 речь пойдёт про ssh-сервер на роутере.

_{Предисловие переводчика.  «Костыль» 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 прямо сейчас!

Есть у меня проект, который работает на основе карт от Яндекса. Выбрал я их потому, что там документация на русском, хорошее качество карт наших городов и приятный интерфейс. Позже, как оказалось, еще и большие возможности.
И вот я заметил, что некоторые места Яндекс спутник показывает в слишком маленьком масштабе, что не годиться для построения маршрутов.
Изначально, я сделал два отдельных файла со скриптами, в одном из которых – была логика работы с Яндексом, а во втором – с Google. Переключение происходило в профиле и действовало на весь сайт, а вся работа с картами на сайте была в псевдокоде(прокси).
Esosedi.ru использовали как раз такой подход с переключением карт, но без перезагрузки. Однако такой вариант мне не подходил потому, что используются маркеры и ломанные линии, к тому же вести два разных файла трудно.

И вот я решил поискать другой вариант.

О назначении модуля можно догодаться из названия. О HandlerSocket говорят много и на разных языках (в основном на японском, английском и последнее время немного на русском).
Модуль NGX_HTTP_HANDLERSOCKET_JSON_MODULE обращается к данным MySQL через протокол HandlerSocket и отдает данные в формате JSON. Область применения AJAX.
Исходники

О конфигурации, особенностях и ограничениях можно почиать ниже.

Управлять вашими фотографиями в Picasa Web без открытия браузера и без установки Wine-совместимого Picasa Photo Editor можно с помощью Picapy — написанного на python файлового браузера для Веб-альбомов Picasa.

Picapy работает как файловый менеджер. После входа в систему — что вам будет предложено при первом запуске — вы увидите окно, содержащее список веб-альбомов Picasa. Здесь вы можете добавлять, редактировать или удалять выбранные папки. Чтобы изменить или удалить несколько папок, нужно использовать CTRL + Click.

На хабре уже писали про OAuth 1.0, но понятного объяснения того, что такое OAuth 2.0 не было. Ниже я расскажу, в чем отличия и преимущества OAuth 2.0 и, как его лучше использовать на сайтах, в мобильных и desktop-приложениях.

Что такое OAuth 2.0

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

Приветствую!

Некоторое время назад Yastrebon опубликовал найденную фичу отправки sms\mms через шлюз Мегафона. Причем отправлять со своего номера и оплачивать со своего-же счета (включая разные бонусные программы и пакеты).

Выдалось свободное время и я решил написать библиотечку-враппер над этим сервисом.

Вступление

Не секрет, что на ВКонтакте можно найти огромное количество видео. Это и фильмы, и сериалы в различном качестве, и многое другое. Но посмотреть, например, новую серию House M.D. просто так не получится — необходим полный Flash Player последней версии, который имеет, пожалуй, далеко не каждое android-устройство. Существует также HTML5 версия плеера, но для ее поддержки необходим браузер с поддержкой MPEG-4, которой не имеют в полном объеме даже многие настольные браузеры. В этом топике будет описан метод просмотра любого видео ВКонтакте на практически любом девайсе с андроидом.

Android-фоны однозначно в тренде, но мало кто готов вступать в клуб «кому за 30», где 30 – цена гаджета в килорублях. Специально для них я отыскал все приличные гуглофоны в пределах 12000 рублей. И это было непросто!

Не знаю кого как, а меня уже задрали запросы на авторизацию через ICQ — приходят по 10-20 штук в день. Наконец-то нашёл способ как это всё отключить полностью. На jabber аккаунты в том же экземпляре пиджина запросы авторизации приходить будут. Когда подобного рода спам доберётся и до джаббера, надо будет придумывать новые меры защиты.

Если вам хочется работать с JSONP, но нет желания подключать для этого большие фреймворки, то JSONP.js ваш выбор.
Либа весит 216 байт и имеет всего одну функцию, которой мы передаем url и callback.

По своей работе я часто имею дело с почтой, размещенной у разных хостинг-компаний. Несмотря на то, что за хостинг платятся вполне приличные деньги, качество услуг в разы проигрывает «бесплатным» почтовым серверам. Мало того, что под почту дают мало места, так и доступность её чаще всего хромает. Но когда мне довелось с почтой, размещенной у Хостинг-центра РБК, количество проблем достигло такого уровня, что было принято решение перейти на какой-либо альтернативный сервис.

Выбор был невелик – «Почта Для Домена» Яндекса или «Gmail для предприятий».
После недолгих размышлений было принято решение в пользу Google, т.к.:

1. Это «Корпорация зла», а все бизнесмены – адепты зла :)
2. Почта располагается за рубежом, что немного усложняет получения доступа к почте третьих лиц.
3. Масса дополнительных сервисов, как стандартных (Docs, Calendar), так и дополнительных.
4. Возможность подключения дополнительных возможностей за деньги (больше места, маршрутизация почты и пр.).
5. Возможность создания нескольких администраторов для управления всем сервисом.
6. Известная стабильность и качество сервиса.
7. Всё таки, ПДД Яндекса – это клон Gmail для предприятий.

Ниже предлагается перевод статьи, обращающей внимание на, на мой взгляд, довольно острую проблему в эпоху web 2.0, а именно чистоту URL-адресов.

На примере сайта Lifehacker.com показано какими проблемами может обернуться слепое следование state-of-the-art технологиям, погоней за SEO и отрицание принципа «прогрессивного улучшения» (progressive enhancement).

На прошлой неделе, в понедельник, сайт Lifehacker.com был недоступен по причине неработающего JavaScript. Lifehacker.com, наряду с остальными сайтами компании Gawker, отображали пустую главную страницу без контента, рекламы и всего остального. Переход с результатов поиска Google на подстраницы переправлял обратно на главную.

Javascript-зависимые URL

Gawker, как и Twitter до него, перестроил свои сайты на полную зависимость от JavaScript'а, включая URLы его страниц. JavaScript не смог загрузиться, что привело к отсутствию контента и сломаным URLам.

Новые адреса страниц выглядят теперь следущим образом: http://lifehacker.com/#!5753509/hello-world-this-is-the-new-lifehacker. До понедельника, адрес был тем же, только без #!..

Привет, Хабр!
Всё больше статей появляется про Canvas, и это не может не радовать. Основы, будем надеяться, уже изучены, а мне хотелось бы поделиться примером возможного практического использования canvas, а именно создать анимированный индикатор прогресса.

Для нетерпеливых результаты эксперимента можно посмотреть здесь: http://pastehtml.com/view/1d7z824.html, а также скриншот конечного результата:


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

За подробностями прошу под кат.

С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @font-face, чтобы шрифты из Паутины загружались во всех браузерах. Может ли существовать лучший путь? Вполне изящный и совместимый с будущими браузерами?

Вкратце об истории вопроса

В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face

А вот таким этому коду следовало бы быть с самого начала. Чистым, ясным и простым:

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.

Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает