Итак, сегодня мы соберём генератор миниатюрок на базе любимого народом веб-сервера — nginx-а. Что примечательно, сделаем мы это без единого гвоздя, т.е. без единой строчки кода, не считая конфигурации.
Никита Анатольевич @Nikitian
Пользователь
Мы это сделали — онлайн бухгалтерия для ООО
2 мин
Полгода назад я сделал свой первый пост на хабре, в котором рассказал о нашем проекте онлайн бухгалтерии, призванной упростить жизнь всему малому бизнесу. Концепция простая — онлайн бухгалтер, способный заменить живого и делающий всю бумажную работу — от расчета налогов до выставления счета клиенту.Скажу честно, тот пост для нас значил очень многое, и именно отличная реакция на хабре вдохнула в «Мое дело» жизнь: первые 100 активных пользователей, первые партнерские контакты, первые идеи об интеграции — все это мы получили благодаря хабру. Спасибо всем, кто присылал идеи по улучшению сервиса и находил баги в бета версии — благодаря Вам мы продолжаем двигаться вперед, продираясь сквозь идиотизм налоговых инспекций и бюрократические стремления нашей страны.
Сейчас мы уже обрели вес, и хотя так и не привлекли инвестиций (инвесторы, ау), чувствуем себя очень уверенно. И с кем, как ни с хабром делится главной новостью за последние полгода.
Бета версия бухгалтерии MoeDelo.org для ООО на УСН готова!
Мы перебрали более десяти различных вариантов представления всех ООО-ных заморочек в UI и наконецто пришли к решению.
Google представил API для кроссбраузерного подключения шрифтов
1 мин
Google Font API — API для подключеня нестандартных шрифтов.
<html>
<head>
<link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Заметки ИТ-стартапера
3 мин
Кто заинтересован в ИТ-стартапах?
Формально почти все — государство, инветиционные фонды, выпускники физико-математических вузов, заказчики не желающие платить безумные деньги за ИТ-проекты в гига-компаниях.
Фактически же мы видим огромное количество новых ИТ-компаний, с разным размахом (зависит от объема инвестиций) стартующих, но крайне редко достигающих результатов. И даже самые успешные проекты очевидно достигают менее значимых в финансовом плане результатов чем строительство, торговля, работа в госорганах и т.д. Четкой статистики не имею (да и нет ее), но сами решите — когда у Вашего дома паркуется автомобиль за 100-150 тысяч у.е. — какие первые десять профессий приходят на ум? а еще десять? а еще?… когда в списке тех кто потенциально может позволить себе такую машину появится владелец ИТ-компании?
Формально почти все — государство, инветиционные фонды, выпускники физико-математических вузов, заказчики не желающие платить безумные деньги за ИТ-проекты в гига-компаниях.
Фактически же мы видим огромное количество новых ИТ-компаний, с разным размахом (зависит от объема инвестиций) стартующих, но крайне редко достигающих результатов. И даже самые успешные проекты очевидно достигают менее значимых в финансовом плане результатов чем строительство, торговля, работа в госорганах и т.д. Четкой статистики не имею (да и нет ее), но сами решите — когда у Вашего дома паркуется автомобиль за 100-150 тысяч у.е. — какие первые десять профессий приходят на ум? а еще десять? а еще?… когда в списке тех кто потенциально может позволить себе такую машину появится владелец ИТ-компании?
Мобильная почта для домена
1 мин
Перевод
Яндекс.Почту для домена теперь можно проверять и с мобильных устройств.
«Доменная» мобильная почта поможет вам работать с письмами и вложениями на телефоне почти так же легко, как и на компьютере.
Новое приложение удобно для тех, кому важно всегда держать руку на пульсе: например, читать корпоративную почту, общаться с партнёрами и оперативно отвечать на запросы клиентов, даже будучи вдали от компьютера. Благодаря технологии push e-mail о новых письмах вы будете узнавать сразу же, как только они попадут в почтовый ящик. Вы сможете обмениваться не только письмами, но и мгновенными сообщениями, а также вкладывать и пересылать файлы.
Скачайте приложение на сайте http://mobile.yandex.ru/, следуя инструкциям или наберите адрес m.ya.ru/ymail в браузере вашего мобильного телефона. После того, как приложение установится на телефон, запустите его и введите ваши e-mail и пароль в окне авторизации.
Приложение доступно для трех платформ: Windows Mobile, Symbian и Java.
«Доменная» мобильная почта поможет вам работать с письмами и вложениями на телефоне почти так же легко, как и на компьютере.
Новое приложение удобно для тех, кому важно всегда держать руку на пульсе: например, читать корпоративную почту, общаться с партнёрами и оперативно отвечать на запросы клиентов, даже будучи вдали от компьютера. Благодаря технологии push e-mail о новых письмах вы будете узнавать сразу же, как только они попадут в почтовый ящик. Вы сможете обмениваться не только письмами, но и мгновенными сообщениями, а также вкладывать и пересылать файлы.
Скачайте приложение на сайте http://mobile.yandex.ru/, следуя инструкциям или наберите адрес m.ya.ru/ymail в браузере вашего мобильного телефона. После того, как приложение установится на телефон, запустите его и введите ваши e-mail и пароль в окне авторизации.
Приложение доступно для трех платформ: Windows Mobile, Symbian и Java.
Листалка страниц на HTML5 canvas
1 мин
Думаю, листалкой на Flash или Silverlight никого не удивишь — но что насчет листалки на HTML5 ? Вооружившись статьей Rick Barraza о листании страниц на Silverlight, я сделал вполне себе приятную листалку в виде jQuery плагина.
Проект доступен под лицензией MIT по адресу jpageflipper.codeplex.com Текущая версия — 0.9, пока не хватает теней и мелких плюшек, а также возможности ставить несколько листалок на страницу.
Демка доступна на dl.dropbox.com/u/7235888/index.html
Ну и, соотстветственно, раз уж это HTML5, в некоторых браузерах возможна некорректная работа (ну или ее полное отсутствие). Работает в Chrome 4+, Firefox 3.5+, Opera 9.6+, Safari 4+
UPD: выложил демку на dropbox.com по наводке otaqsun
Проект доступен под лицензией MIT по адресу jpageflipper.codeplex.com Текущая версия — 0.9, пока не хватает теней и мелких плюшек, а также возможности ставить несколько листалок на страницу.
Демка доступна на dl.dropbox.com/u/7235888/index.html
Ну и, соотстветственно, раз уж это HTML5, в некоторых браузерах возможна некорректная работа (ну или ее полное отсутствие). Работает в Chrome 4+, Firefox 3.5+, Opera 9.6+, Safari 4+
UPD: выложил демку на dropbox.com по наводке otaqsun
Быстрый старт с openID
3 мин
Добрый день, друзья.
Сегодня я хочу поделиться своим опытом внедрения авторизации по openID на своем книжном сайте «Мои книги». Статья рассчитана на начинающих, поэтому вряд ли заинтересует тех, кто уже знает все нюансы этой технологии. Основная ее цель – ответить на вопрос: «да, это удобно, но как же мне сделать такое в моем проекте?!!»
Сегодня я хочу поделиться своим опытом внедрения авторизации по openID на своем книжном сайте «Мои книги». Статья рассчитана на начинающих, поэтому вряд ли заинтересует тех, кто уже знает все нюансы этой технологии. Основная ее цель – ответить на вопрос: «да, это удобно, но как же мне сделать такое в моем проекте?!!»
Google Maps Javascript API V3 и управление маркерами
3 мин
Дело было глубокой осенью. Мне поручили разработку раздела, основной задачей которого является указание местоположения объектов фильтрации и поиска на карте. Что стало заметно сразу же — даже при отображении 10 объектов на карте, можно уменьшить зум до такого, при котором они просто сливаются. Если их будет 100 — появятся жутковатые наложения и тени. Не комильфо!
Решение очевидное, маркеры нужно группировать. В процессе поиска наткнулся на хабростатью, в которой рассмотрены различные способы группировки большого количества маркеров на карте. Нас вполне устраивали «костыли 1-2», то есть группировка маркеров на клиентской стороне, однако… если бы они подошли, не писал бы я сейчас статью ;)
Поиск решения
Решение очевидное, маркеры нужно группировать. В процессе поиска наткнулся на хабростатью, в которой рассмотрены различные способы группировки большого количества маркеров на карте. Нас вполне устраивали «костыли 1-2», то есть группировка маркеров на клиентской стороне, однако… если бы они подошли, не писал бы я сейчас статью ;)
Тонкости использования селекторов аттрибутов в CSS
4 мин
Перевод
CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:
Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:
<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>
Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:
h2[rel=friend] {
/* woohoo! */
}
Подводные камни при использовании кэширования в nginx
10 мин
В web-сервер и reverse-proxy nginx встроены очень мощные возможности по кэшированию HTTP-ответов. Однако в ряде случаев документации и примеров не хватает, в результате не все получается так легко и просто, как хотелось бы. Например, мои конфиги nginx-а местами написаны кровью. Этой статьей я попробую немного улучшить ситуацию.
В этой статье: а) подводные камни при полностраничном кэшировании; б) кэширование с ротацией; в) создание динамического «окна» в закэшированной странице.
Я буду предполагать, что вы используете связку nginx+fastcgi_php. Если вы применяете nginx+apache+mod_php, просто замените имена директив с fastcgi_cache* на proxy_cache*
Если выбирать, кэшировать ли страницу на стороне PHP или на стороне nginx, я выбираю nginx. Во-первых, это позволяет отдавать 5-10 тыс. запросов в секунду без каких-либо сложностей и без умных разговоров о «высокой нагрузке». Во-вторых, nginx самостоятельно следит за размером кэша и чистит его как при устаревании, так и при вытеснении нечасто используемых данных.
Если на вашем сайте главная страница хоть и генерируется динамически, но меняется достаточно редко, можно сильно снизить нагрузку на сервер, закэшировав ее в nginx. При высокой посещаемости даже кэширование на короткий срок (5 минут и меньше) уже дает огромный прирост в производительности, ведь кэш работает очень быстро. Даже закэшировав страницу всего на 30 секунд, вы все равно добьетесь значительной разгрузки сервера, сохранив при этом динамичность обновления данных (во многих случаях обновления раз в 30 секунд вполне достаточно).
В этой статье: а) подводные камни при полностраничном кэшировании; б) кэширование с ротацией; в) создание динамического «окна» в закэшированной странице.
Я буду предполагать, что вы используете связку nginx+fastcgi_php. Если вы применяете nginx+apache+mod_php, просто замените имена директив с fastcgi_cache* на proxy_cache*
Если выбирать, кэшировать ли страницу на стороне PHP или на стороне nginx, я выбираю nginx. Во-первых, это позволяет отдавать 5-10 тыс. запросов в секунду без каких-либо сложностей и без умных разговоров о «высокой нагрузке». Во-вторых, nginx самостоятельно следит за размером кэша и чистит его как при устаревании, так и при вытеснении нечасто используемых данных.
Кэширование всей страницы целиком
Если на вашем сайте главная страница хоть и генерируется динамически, но меняется достаточно редко, можно сильно снизить нагрузку на сервер, закэшировав ее в nginx. При высокой посещаемости даже кэширование на короткий срок (5 минут и меньше) уже дает огромный прирост в производительности, ведь кэш работает очень быстро. Даже закэшировав страницу всего на 30 секунд, вы все равно добьетесь значительной разгрузки сервера, сохранив при этом динамичность обновления данных (во многих случаях обновления раз в 30 секунд вполне достаточно).
Закрепляем jQuery — 25 отличных советов
19 мин
Перевод
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.
Далее все написано от имени автора оригинальной статьи.
jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.
Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).
Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.
Далее все написано от имени автора оригинальной статьи.
Введение
jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.
Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).
Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.
Содержание
- Загружайте фреймворк с Google Code
- Используйте «шпаргалку» (cheat sheet)
- Соединяйте все ваши скрипты и уменьшайте размер файла
- Используйте возможности Firebug для ведения логов
- Минимизируйте операции выборки в пользу кэширования
- Сводите манипуляции с DOM-деревом к минимуму
- Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
- Используйте «id» вместо классов, где это возможно
- Задайте контекст своим селекторам
- Используйте последовательности вызовов методов с умом
- Научитесь правильно использовать анимацию
- Научитесь назначать и делегировать события
- Используйте классы для сохранения состояния
- Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
- Пишите собственные селекторы
- Подготавливайте HTML и модифицируйте его, когда страница загружена
- Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
- Используйте служебные функции jQuery
- Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
- Как узнать что картинки загружены?
- Всегда используйте последнюю версию
- Как проверить, что элемент существует?
- Добавляйте класс «JS» в элемент «html»
- Возвращайте «false» для отмены поведения по-умолчанию
- Короткая запись для события готовности документа
Плагин авторизации через Вконтакте, Yandex, Google, OpenID и тп
1 мин
В недавнем моем посте «Javascript виджет авторизации OpenID» на хабре, я описал свою разработку виджет-consumer авторизации OpenID.
Прошло время, я получил много положительных отзывов, получил замечания и пожеланию по улучшению виджета. Среди пожеланий развития была просьба создать WordPress плагин и добавить поддержку Вконтакте OpenAPI.
Прошло время, я получил много положительных отзывов, получил замечания и пожеланию по улучшению виджета. Среди пожеланий развития была просьба создать WordPress плагин и добавить поддержку Вконтакте OpenAPI.
Хроника победы – интерактивные архивы ИТАР-ТАСС
1 мин
К юбилею победы открылся портал “Хроника победы”, на котором в интерактивном режиме представлены уникальные военные хроники ИТАР-ТАСС.Это и электронные копии газет, и впервые публикуемые фотографии, и аэрофотосъемка из Национального архива США, аудиозаписи государственного архива, оперативные документы СССР, США, Великобритании и Германии.
Согласно планам на портале всего будет размещено: более 11 тысяч страниц оцифрованного материала периодических изданий, около 600 уникальных видео- и аудиоматериалов, более 1700 фотографий из архивов ИТАР-ТАСС, более 400 стратегических карт и схем боевых действий.
Реализация эффекта Philips Ambilight в превью изображений
16 мин
Вчера в топике «Модификация изображений для сайта, или какие бывают превьюшки» в комментариях diGreez предложил, как мне показалось, очень интересный способ организации превьюшек изображений. Реализовал на PHP функцию, которая занимается созданием таких превьюшек.
Функция документирована комментариями.
Функция документирована комментариями.
уХХХуу.ru — попытка облегчить жизнь автомобилиста в большом городе
2 мин
С городами как с детьми: маленький город — маленькие проблемы, большой город — проблемы побольше
Я живу в Москве и я автомобилист. Автомобилистам в Москве нелегко. В основном, нам портят жизнь люди с полосатыми палками, пробки и парковки, а точнее их отсутствие. Можно переметнуться в лагерь пешеходов, но у тех свои проблемы. Приходится приспосабливаться. Мы оттачиваем мастерство общения с работниками ДПС, мы выезжаем пораньше, мы изучаем проулки и дорожки, мы паркуемся, блокируя других и оставляем на бумажках номера телефонов. уХХХуу — попытка сделать жизнь простого автомобилиста чуть проще.
Я живу в Москве и я автомобилист. Автомобилистам в Москве нелегко. В основном, нам портят жизнь люди с полосатыми палками, пробки и парковки, а точнее их отсутствие. Можно переметнуться в лагерь пешеходов, но у тех свои проблемы. Приходится приспосабливаться. Мы оттачиваем мастерство общения с работниками ДПС, мы выезжаем пораньше, мы изучаем проулки и дорожки, мы паркуемся, блокируя других и оставляем на бумажках номера телефонов. уХХХуу — попытка сделать жизнь простого автомобилиста чуть проще.
Генерируем QR-код на PHP
2 мин
QR-code, уже давно распространен повсеместно, во всех сферах человеческой жизни. Вроде такая популярная вещь, а нормальной библиотеки (Open Source) на PHP — нет. Товарища deltalab, очень напрягла эта проблема и он решил переписать имеющиеся в наличии С библиотеки ibqrencode от Kentaro Fukuchi, на более привычный ему язык PHP.
Быстрая реализация резервного копирования в Amazon S3
3 мин
Я устал испытывать определённые опасения за сохранность данных на выделенном сервере, наблюдая за происходящим у хостеров последнее время… 3FN, Agava, Hosting.UA, МакХост — тенденция получается очень нехорошая.
В итоге, МакХост стал последней каплей, и, чтобы не оказаться в числе тех, кто «уже делает бекапы», я перевёл систему бекапов своего сервера на Amazon S3. Получилось вполне себе быстро и прозрачно.
Хочу поделиться с общественностью простейшей реализацией.
В итоге, МакХост стал последней каплей, и, чтобы не оказаться в числе тех, кто «уже делает бекапы», я перевёл систему бекапов своего сервера на Amazon S3. Получилось вполне себе быстро и прозрачно.
Хочу поделиться с общественностью простейшей реализацией.
Javascript виджет авторизации OpenID
3 мин
Где то полгода назад я сильно увлекся OpenID и всем что с ним связанно. Моим главным занятием в это время стало — неспешное чтение спецификаций, форумов, блогов и хабрапостов OpenID тематики.
Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.
Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.
Собственно об этом далее.
Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.
Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.
Собственно об этом далее.
Обзор 30 хостингов изображений для быстрой публикации. Продолжение, выводы
16 мин
Продолжаем обзор хостингов изображений для быстрой публикации.
Начало статьи находится по ссылке habr.com/ru/blogs/hosting/89162, а потом переходим сюда.
Начало статьи находится по ссылке habr.com/ru/blogs/hosting/89162, а потом переходим сюда.
CSS Sticky Footer — новая версия
1 мин
Обновился код CSS Sticky Footer (мой перевод старой версии).
Автор отказался от clearfix-хака в пользу простого overflow: auto и двух селекторов для Оперы и IE8.
По его заверениям, футер надежно прилипает более чем в 50 браузерах.
Как и раньше, решение не подходит для тех, кому футер хочется сделать резиновым.
Автор отказался от clearfix-хака в пользу простого overflow: auto и двух селекторов для Оперы и IE8.
По его заверениям, футер надежно прилипает более чем в 50 браузерах.
Как и раньше, решение не подходит для тех, кому футер хочется сделать резиновым.