Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.
Игорь @igRo
QA engineer
Подготовка rails-окружения для установки Redmine используя RVM
3 min
5.8KДля корректной работы многих rails-приложении требуются конкретные версии состовляющих компонент, таких как версия ruby, версия самого rails, а так же rake, rubygems и т.д. И скорее всего в вашем дистрибутиве Linux (в моём случае это Ubuntu 10.04 LTS Server) версии этих компонент будут отличаться. Можно пойти простым путём — поставить ruby нужной версии из исходных кодов, а всё остальное с помощьью rubygems. Но мы же хотим получить надёжный и воспроизводимый результат, а систему, при этом не превратить в свалку.
+5
Удобство наблюдения, atop
3 min
111KДобрый день, сообщество,
На Хабре уже говорилось о всевозможных TOP- овых утилитах, на этот раз, я хочу попробовать рассмотреть поближе утилиту atop. Постараюсь немного сравнить ее с существующими утилитами наблюдения за производительностью и научиться читать выводы данной команды.
У системных администраторов задача наблюдения за производительностью встает чуть ли не каждый день, и конечно же хотелось бы все это сделать в рамках одной утилиты и без особых танцев с бубном, как мне кажется удобнее всего в таком случае использовать команду atop.
На Хабре уже говорилось о всевозможных TOP- овых утилитах, на этот раз, я хочу попробовать рассмотреть поближе утилиту atop. Постараюсь немного сравнить ее с существующими утилитами наблюдения за производительностью и научиться читать выводы данной команды.
У системных администраторов задача наблюдения за производительностью встает чуть ли не каждый день, и конечно же хотелось бы все это сделать в рамках одной утилиты и без особых танцев с бубном, как мне кажется удобнее всего в таком случае использовать команду atop.
+39
Kartograph — фреймворк для создания интерактивных карт
1 min
20KKartograph — это новый фреймворк для создания интерактивных картографических веб приложений без использования Google Maps/Bing Maps или любого другого сервиса. Он создавался с учетом потребностей дизайнеров и журналистов.
Можно поглядеть на демки, чтобы узнать на что способен Kartograph.
Можно поглядеть на демки, чтобы узнать на что способен Kartograph.
+65
Taobao.com. Инструкция по применению
5 min
167KИтак, для тех кто не в курсе, Taobao — крупнейший китайский интернет-аукцион, подобный американскому Ebay. Там ооОчень много всяких штук, и ооОчень все непонятно, но безумно интересно. Сейчас мы постараемся немного разобраться в иероглифах и составим план действий по удачному китайскому интернет-ориентированию.
Первое, что стоит сделать — это установить Google Chrome, если таковой еще не инсталлирован. Это значительно повысит скорость перевода страницы на более-менее русский. Не знаю как другие браузеры справляются с подобными задачами, этот делает все просто и быстро. Вот так:
Как вы можете увидеть, положение несколько поумнело.
Как здесь что-то найти?
Переходим в
Первое, что стоит сделать — это установить Google Chrome, если таковой еще не инсталлирован. Это значительно повысит скорость перевода страницы на более-менее русский. Не знаю как другие браузеры справляются с подобными задачами, этот делает все просто и быстро. Вот так:
Как вы можете увидеть, положение несколько поумнело.
Как здесь что-то найти?
Переходим в
+4
Готовим css-спрайт в Spritepad
1 min
7.2KКак мы часто составляем спрайты:
1) Выделяем отдельные элементы из PSD для групировки в спрайт.
2) Для точного нахождения координат элементов спрайта рисуем сетку из линеек для верстальщика.
3) И тупенько через alt+tab переписываем координаты в css.
Да, у всех может немного отличаться этот процесс. Можно воспользоваться гугловым сервисом групировки всех картнок в спрайт, но он не так гибок.
Еще один шаг к упрощению процесса верстки спрайтами нам предоставляют энтузиасты из Германии «We are kiss» с проектом Spritepad.
1) Вырезаете все что нужно из PSD-шки в png24 и закидываем по очереди в браузер.
2) Позиционируем, и справа получаем готовую css-ку, классы которой будут генерироваться на основе имен скинутых в браузер файлов.
+11
Пишем простенький веб-эмулятор терминала на PHP
6 min
18KЯ думаю, очень много людей думало над тем, чтобы сделать свой эмулятор терминала на PHP, и обычно останавливались на решениях вроде следующего:
Конечно же, такое решение вызывает целый набор проблем, самая незначительная из которых — это то, что ошибки на экран не попадают. Есть и намного более значительные вещи, например запуск vi просто «подвесит» выполнение команды и придется открывать новую консоль и писать
<?php echo '<form><input name="cmd" /></form>'; if(isset($_GET['cmd'])) system($_GET['cmd']);
Конечно же, такое решение вызывает целый набор проблем, самая незначительная из которых — это то, что ошибки на экран не попадают. Есть и намного более значительные вещи, например запуск vi просто «подвесит» выполнение команды и придется открывать новую консоль и писать
killall vi
. И что уж точно не получится сделать, так это выполнить команды ssh или sudo, которые требуют чтения пароля прямо с терминала. Я постараюсь показать способ, с помощью которого можно устранить большую часть описанных выше проблем.+57
Как мы делали настольную хабраигру и какие грабли при этом поймали
11 min
50KРазрабатывать настольную игру почти так же весело, как софт, плюс её потом можно пощупать. Под катом — обещанный рассказ разработку, немного нетривиальные вещи, процесс и грабли.
+72
CSS Sticky Footer / Прилипающий футер
4 min
77KTranslation
Как использовать прилипающий футер
Введение
В Гугле можно найти много реализаций прилипающего футера. Я перепробовал большинство из них, и обычно где-нибудь они да подводили. В основном из-за того, что предложенные методы были слишком старыми, и не срабатывали в новых браузерах. Но, поскольку страницы, предлагающие решения, довольно старые, на них давно ссылается много других сайтов, из-за чего они до сих пор находятся довольно высоко в поисковой выдаче Гугла. Вебмастеры находят их самыми первыми в своих поисках, и потом долго чешут репу, не видя ничего нового.
Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.
+41
Разгоняем портфолио сисадмина бесплатными сертификатами
3 min
125KИнформация будет особенно полезна тем, кто начинает свою карьеру. Обычно первое резюме пугающе пустое, кроме образования, практики и дипломной работы – в нём ничего нет. Практический опыт отсутствует, но есть энтузиазм и жажда знаний. Предлагаю вашему вниманию возможность не только получить знания, но и подтвердить их сертификатом, который можно будет приложить к резюме, добавив ему веса.
+81
Новый метод замены текста картинкой, или избавляемся от -9999px
3 min
37KХотелось бы поговорить о техниках замены текста изображением. Думаю, практически все сталкивались с моментами в верстке, когда, к примеру, для заголовка страницы нужно использовать графический объект, при этом сохранив под ним текст и для поисковых роботов, и для печатной версии. Да и в принципе, никогда не хочется ломать семантинку страницы.
Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:
Немного об истории решения этого вопроса.
Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:
+92
Продвинутые шаблоны редактора Wordpress
6 min
31KTranslation
Допустим, у вас стоит задача предоставить вашему клиенту для заполнения заранее сверстанный макет или форму, куда он может смело добавить текстовый материал, будь-то описание товара или услуги, разделенный на колонки. Да, эту задачу можно решить многими способами, но хотелось бы, что бы и человеку было проще пользоваться редактором, и к вам вопросов было поменьше. В конце концов WYSIWYG и был создан для того, что бы даже сферическая секретарша в вакууме понимала, что именно будет отображено на сайте в результате её работы в редакторе. Но, пойди, найди такую «секретаршу».
+38
Проблемы с округлением в CSS
2 min
9.8KTranslation
Посмотрите на эту страницу. Синим цветом выделены 4 плавающих блока с шириной равной 25% у каждого, которые находятся в контейнере с шириной 50px. Теперь вопрос: Какова ширина каждого блока?
Ширина эта должна быть равна 12.5px, но т.к. мы можем использовать только целые значения, то приходится округлять значения. И тут же возникает вопрос: В какую сторону округлять? В большую, в меньшую или в обе? Результаты думаю вас удивят, как и меня.
В итоге мы имеем три абсолютно разных лагеря.
— Округление в меньшую сторону — И Opera и Safari округлили значение ширины до 12px. В результате чего образовался 2-x пиксельный пробел (помечен зеленым цветом) справа от блоков. Если вы когда-либо озадачивались, почему ваша красивая навигация не заполняет все пространство контейнера, теперь вы знаете ответ.
— Округление в большую сторону — 6-й и 7-й Internet Explorer увеличивают ширину до 13px, что приводит к «поломке» структуры сайта.
— Округление в обе стороны — Firefox 2 и 3 сочетают оба подхода, округляя ширину одних блоков в меньшую сторону, а других в большую. Побочный эффект заключается в том, что ширина блоков теперь имеет разное значение, несмотря на то, что в CSS задано одно значение. К тому же, если получить значение ширины с помощью Javascript, то оно будет равно 12.5px, не давая понять в какую сторону было произведено округление. Есть и еще один неприятный момент. В Firefox 3 меняется порядок округления.
David Baron, один из разработчиков Mozilla, разъяснил ситуацию:
— Мы стараемся соблюдать все нижеописанные правила, которые, однако же, не могут быть удовлетворены одновременно:
1. 4 смежных объекта шириной/высотой 25% (например), начинающиеся у одного края внешнего контейнера, должны заканчиваться у другого. Не должно появляться никаких свободных или лишних пикселей.
2. Объекты, которые являются логически смежными, всегда должны визуально касаться друг друга. Не должно быть никаких пустых пробелов или наложений, возникающих из-за ошибки округления.
3. Объекты с одинаковой шириной должны занимать такое количество пикселей, которое было задано.
4. Границы объектов не должны быть размыты.
Эти правила могут быть полезными, но придется пожертвовать по меньшей мере одним из них, для того чтобы удовлетворить остальным.
Ширина эта должна быть равна 12.5px, но т.к. мы можем использовать только целые значения, то приходится округлять значения. И тут же возникает вопрос: В какую сторону округлять? В большую, в меньшую или в обе? Результаты думаю вас удивят, как и меня.
В итоге мы имеем три абсолютно разных лагеря.
— Округление в меньшую сторону — И Opera и Safari округлили значение ширины до 12px. В результате чего образовался 2-x пиксельный пробел (помечен зеленым цветом) справа от блоков. Если вы когда-либо озадачивались, почему ваша красивая навигация не заполняет все пространство контейнера, теперь вы знаете ответ.
— Округление в большую сторону — 6-й и 7-й Internet Explorer увеличивают ширину до 13px, что приводит к «поломке» структуры сайта.
— Округление в обе стороны — Firefox 2 и 3 сочетают оба подхода, округляя ширину одних блоков в меньшую сторону, а других в большую. Побочный эффект заключается в том, что ширина блоков теперь имеет разное значение, несмотря на то, что в CSS задано одно значение. К тому же, если получить значение ширины с помощью Javascript, то оно будет равно 12.5px, не давая понять в какую сторону было произведено округление. Есть и еще один неприятный момент. В Firefox 3 меняется порядок округления.
David Baron, один из разработчиков Mozilla, разъяснил ситуацию:
— Мы стараемся соблюдать все нижеописанные правила, которые, однако же, не могут быть удовлетворены одновременно:
1. 4 смежных объекта шириной/высотой 25% (например), начинающиеся у одного края внешнего контейнера, должны заканчиваться у другого. Не должно появляться никаких свободных или лишних пикселей.
2. Объекты, которые являются логически смежными, всегда должны визуально касаться друг друга. Не должно быть никаких пустых пробелов или наложений, возникающих из-за ошибки округления.
3. Объекты с одинаковой шириной должны занимать такое количество пикселей, которое было задано.
4. Границы объектов не должны быть размыты.
Эти правила могут быть полезными, но придется пожертвовать по меньшей мере одним из них, для того чтобы удовлетворить остальным.
+31
+2Гб для вашего DropBox аккаунта. Промо-акция Samsung Бразилия
2 min
13KЭто продолжение описаний серий промо акций от дропбокса и партнёров. Первое промо я уже описал в статье Vodafone AU, теперь на очереди Samsung.
На официальном сайте Самсунг Бразилия сейчас проходит промо акция дропбокса которая позволяет получить +2Гб на аккаунт. Для участия вам необходимо иметь один из телефонов купленных в Бразилии. Ниже представлен список аппаратов которые участвую в акции:
• GT-P7500 — Samsung Galaxy Tab 10.1"
• GT-P7510 — Samsung Galaxy Tab 10.1" Wi-Fi
• GT-P7300L — Samsung Galaxy Tab 8.9"
• GT-P1000L — Samsung Galaxy Tab 7"
• GT-I7500L — Samsung Galaxy
• GT-I5700L — Samsung Galaxy Lite
• GT-I5500L/GT-I5500B — Samsung Galaxy 5
• GT-I5510L — Samsung Galaxy 551
• GT-S5830B — Samsung Galaxy Ace
• GT-S5570B — Samsung Galaxy Mini
• GT-S5670B — Samsung Galaxy Fit
• GT-I9000B — Samsung Galaxy S
• GT-I9100 — Samsung Galaxy S II
• GT-I9220 (ou N7000) – Samsung Galaxy Note
Данная акция проходит до 2го апреля 2012года. Или же пока по акции не будет выдано 100.000Гб пространства.
+125
JavaScript. Оптимизация: опыт, проверенный временем
10 min
41KПредисловие
Давно хотел написать. Мысли есть, желание есть, времени нету… Но вот нашлось, так что привет, Хабра.
Здесь я собрал все идеи, которые помогали и помогают в разработке веб-приложений. Для удобства я разбил их на группы:
- Память
- Оптимизация операций
- Выделение критических участков
- Циклы и объектные свойства
- Немножко о DOM
- DocumentFragment как промежуточный буфер
- О преобразованиях в объекты
- Разбитие кода
- События перетаскивания
- Другие советы
Сейчас речь не пойдёт ни о каких библиотеках. Я постараюсь передать знания о механизмах самого языка, а не их реализациях в библиотеках.
Память
Хоть это и не должно волновать клиентского программиста, но не забываем, что память всё-таки не бесконечна и когда-нибудь может закончиться, например, когда запущено несколько массивных программ: офис, графический редактор, компиляция большой программы и др. Несмотря на то, что приведенный пример тривиален, у меня действительно такое случилось, хоть и не из-за браузера, но он тоже сыграл свою роль: 1,3 Гб оперативы (отладчик, около 30 вкладок), начались тормоза по перегрузке страниц ОП в файл подкачки.
Чтобы уменьшить расход памяти, я предлагаю несколько способов:
+71
Уязвимость в sudo
1 min
2.3KНаверное все заинтересованные лица подписаны на соответсвующие рассылки и нет смысла превращать блог в security-notifications, но тем не менее, уязвимость в sudo 1.8.0 — 1.8.3p1 потенциально позволяет выполнить от рута команду любому локальному пользователю, способному запустить sudo. CVE-2012-0809
Во FreeBSD уже пропатчились, линупсы пока спят, а в случае стабильных веток им всё равно — ветка sudo 1.7 уязвимости не подвержена.
Ошибка кроется в передаче vfprintf argv[0] в функции отладочного вывода.
С помощью ключа компиляции FORTIFY_SOURCE можно усложнить эксплуатацию бага, без него эксплоит совсем простой.
Оригинальное описание.
Во FreeBSD уже пропатчились, линупсы пока спят, а в случае стабильных веток им всё равно — ветка sudo 1.7 уязвимости не подвержена.
Ошибка кроется в передаче vfprintf argv[0] в функции отладочного вывода.
С помощью ключа компиляции FORTIFY_SOURCE можно усложнить эксплуатацию бага, без него эксплоит совсем простой.
Оригинальное описание.
+43
Как заставить сайт летать и сэкономить десятки часов системного администрирования
10 min
109K Скорость работы вашего сайта, его стабильность и отказоустойчивость всегда зависят от трех составляющих:
1. Платформа (CMS) и ее настройки, которые влияют на производительность (параметры кэширования и т.п.)
2. Конфигурация сервера (реального физического или виртуального) и настройки системного ПО (веб-сервер, база данных и т.д.)
3. Качество разработки, кода, интеграции с платформой.
Зачастую веб-разработчик может написать хороший качественный код, но при этом мало что смыслит в системном администрировании и настройке серверов. А хороший сисадмин редко бывает по совместительству еще и классным программистом.
В общем-то, это — совершенно нормально, каждый должен заниматься своим делом. Но, к сожалению, в небольших веб-студиях, которых большинство, редко есть админы в штате. Настройкам хостинга уделяется мало внимания. В лучшем случае — полагаются на суппорт хостера и настройки «по умолчанию».
В итоге сайт может «хромать» из-за проблем и «узких» мест в любой из составляющих: CMS, хостинг, разработка. Клиент в нюансы не вникает и остается не удовлетворен проектом в целом. Его негатив переносится на всех: «Тормозной хостинг! Ужасная система! Разработчики ничего не умеют!»
Такая картина нас, конечно, никогда не устраивала. И мы решили, что надо что-то делать…
1. Платформа (CMS) и ее настройки, которые влияют на производительность (параметры кэширования и т.п.)
2. Конфигурация сервера (реального физического или виртуального) и настройки системного ПО (веб-сервер, база данных и т.д.)
3. Качество разработки, кода, интеграции с платформой.
Зачастую веб-разработчик может написать хороший качественный код, но при этом мало что смыслит в системном администрировании и настройке серверов. А хороший сисадмин редко бывает по совместительству еще и классным программистом.
В общем-то, это — совершенно нормально, каждый должен заниматься своим делом. Но, к сожалению, в небольших веб-студиях, которых большинство, редко есть админы в штате. Настройкам хостинга уделяется мало внимания. В лучшем случае — полагаются на суппорт хостера и настройки «по умолчанию».
В итоге сайт может «хромать» из-за проблем и «узких» мест в любой из составляющих: CMS, хостинг, разработка. Клиент в нюансы не вникает и остается не удовлетворен проектом в целом. Его негатив переносится на всех: «Тормозной хостинг! Ужасная система! Разработчики ничего не умеют!»
Такая картина нас, конечно, никогда не устраивала. И мы решили, что надо что-то делать…
+15
«Загадочные отступы» между инлайн-элементами
15 min
31KКаждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.
В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и, конечно же, обсудим все их стороны.
В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и, конечно же, обсудим все их стороны.
+119
Автоматическое оповещение читателей о новостях с помощью ВКонтакте. Часть 4
2 min
15KНа хабре уже было несколько статей о работе с вконтактом (раз, два, три), однако оно производилось через простые запросы на страницы с последующим ее парсингом. Это ужасно неправильно, так как если верстка страницы либо порядок запросов поменяется — скрипт перестанет работать. Кроме того, если не ошибаюсь, это запрещено правилами сайта.
Для этого есть официальный API от вконтакте.
Для этого есть официальный API от вконтакте.
+3
Прокачиваем DropBox аккаунт почтой в зоне .EDU за 15 минут
2 min
90KМногие из нас имеют аккаунт в сервисе Dropbox, о данном сервисе написано много статей и лайф-хаков, но сегодня я хочу вам показать, как можно заполучить заветный e-mail в зоне .edu за 15 минут.
+76
Information
- Rating
- Does not participate
- Location
- München, Bayern, Германия
- Date of birth
- Registered
- Activity