С выходом Sass 3.2 начал продвигаться в массы путь объектно-ориентированного CSS (OOCSS), принося с собой принцип DRY и программистское мышление. Media queries и OOCSS стали жизненно важны для современной фронтенд разработки.

Зачем я сделал ещё один велосипед?

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

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

7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.

И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.



Посмотреть этот фокус.

Ничего не предвещало беды, как вдруг в 2 часа ночи раздался телефонный звонок.

— Алло, милый! У меня youtube не работает!
— Прекрасно, иди спать!
— Нууу! Там новая серия вышла!
— Завтра всё сделаю!
— Ну Заяя, нуууу!
— Ладно! Ладно! Сейчас.
…

Из этого поста вы узнаете ответы на следующие вопросы:
Как спасти свою милую от стресса в 2 часа ночи? Как вернуть доступ к youtube.com, если ваш провайдер его заблокировал? Как быстро поднять VPN и настроить клиентские устройства (Android, Windows, Debian, dd-wrt) для работу с ним? Как безопасно серфить интернет на открытых точках доступа? Как заработать карму в глазах своей возлюбленной? Если вам это интересно, добро пожаловать под кат!

Доброго времени суток!

Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.

Наблюдая выводы таких команд, как top, htop, uptime, w и, возможно, других, пользователь наверняка обращал внимание на строку load average:

Недавняя статья про WebDriver напомнила мне немного рассказать об используемом нами комплексе для автоматизации тестирования Web-приложений.

Итак, в основе тестов лежит лежит связка RSpec + Watir WebDriver (для Rails-приложений более уместно будет взглянуть в сторону Capybara). При поддержке Bundler и локальных WebDrivers осуществляется лёгкая инсталляция на рабочем месте тестировщика (установить Ruby 1.9, Rubygems, Bundler, и выполнить bundle install). Исходник Gemfile:

source :rubygems

gem "watir-webdriver", "~>0.6.1"
gem "rspec-core", "~> 2.0"
gem "rspec-expectations", "~> 2.0"
gem "rr", "~> 1.0"
gem "ci_reporter", "~> 1.7"

За счет гема ci_reporter осуществляется интеграция с Jenkins CI, а за счёт гема parallel_tests и Selenium Grid распараллеливание тестов (на сегодня parallel tests пока не используются в production).

Вот пример теста:

describe "FirstSite" do
  before(:all) do
    site! "first"
  end

  # returns true on success; otherwise false.
  def login_as(data)
    browser.rel_goto "/"
    browser.title.should include 'example.com'
    browser.text_field(:id => 'login').set data[:login]
    browser.text_field(:id => 'password').set data[:password]
    submit_button = browser.button(:id => 'submit')
    submit_button.click
    browser.url =~ %r{/welcome$}
  end

  def logout
    browser.rel_goto "/"
    browser.button(:id => 'logout').click
  end

  describe :login do
    auth = fixture :auth

    describe :successful do
      after(:each) do
        logout
      end

      auth.keys.select { |key| key.kind_of?(Symbol) }.each do |key|
        next  if key == :wrong

        it "Logging in as #{key} should be OK" do
          login_as(auth[key]).should be_true
        end
      end
    end

    describe :wrong do
      it "Logging in with wrong credentials should fail" do
        login_as(auth[:wrong]).should_not be_true
      end
    end
  end
end

Тестируемые сайты и способ тестирования определяются в настройках.

Эта статья является продолжением более общей статьи «Что такое Selenium?», в которой объясняется, какое положение занимает Selenium WebDriver среди других инструментов автоматизации веб-приложений.

Здесь я постараюсь рассказать более подробно о том, что такое Selenium WebDriver, и почему его бессмысленно сравнивать с TestComplete, QuickTest Pro и другими инструментами автоматизации тестирования. И дело не только в том, что Selenium WebDriver бесплатный и открытый – его столь же бессмысленно сравнивать с другими бесплатными инструментами, такими как Sahi или Robot Framework.

Почему?

Потому что Selenium WebDriver – это не инструмент для автоматизации тестирования.

А что же это такое?

На этот вопрос можно дать несколько разных ответов, сначала я дам короткие ответы, а потом – более подробные.

Кроме того, я объясню, почему Selenium WebDriver имеет такой убогий и неудобный в использовании интерфейс (набор команд), почему он не генерирует красивые отчёты и почему несмотря на всё это он настолько популярен :)

На всякий случай оговорюсь, что хотя в этой статье речь идёт про WebDriver, многие аргументы справедливы и в отношении Selenium RC, но я не буду ничего говорить специально про эту устаревшую версию, потому что её место – на свалке истории.

Sphinxsearch является поисковым движком для быстрого fulltextsearch, может получать данные из mysql, oracle и mssql, может выступать сам хранилищем(realtime индексы). Также sphinx имеет режим работы через api и через sphinxql — аналог протокола sql(с некоторыми ограничениями), что позволяет подключить поиск через sphinx на сайте с минимальным изменением кода. Это один из немногих великих, крупных и открытых проектов разработанный в России. На моей жизни я видел как sphinx обрабатывает порядка 100-200 поисковых запросов на 2 миллиона записей из mysql и при этом сервер свободно дышал и его не тошнило, mysql начинает умирать уже на 10 запросах в секунду на аналогичном конфиге.

Основная проблема документации sphinx на мой взгляд малое количество примеров для большинства интересных настроек, сегодня постараюсь рассказать в примерах о них. Опции которые я затрону касаются в основном алгоритмов и вариаций поиска. Все кто плотно работает со sphinx не узнают ничего нового, а новички надеюсь смогут улучшить качество поиска на своих сайтах.

Sphinx содержит две независимые программы indexer и searchd. Первый строит индексы по данным взятым из базы данных, второй производит поиск по построенном индексу. А теперь перейдем к настройкам поиска в sphinx.

morphology

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

Пример нормализации слова стеммингом на русском.
Слова “яблоко”, “яблока”, “яблоку” будут обрезаны в “яблок” и любой поисковый запрос с вариацией слова “яблока” будет тоже нормализован и найдет записи со словами которые были описаны выше.

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

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

Всем привет!

В последнее время наметился интересный тренд — быстрое «распухание» веб-проектов до бесконечности. Объем данных многих популярных сайтов растет все быстрее и быстрее, их нужно куда-то девать, при этом эффективно бэкапить (весело будет, если файлы на 500Т потеряются :-) ), и конечно супербыстро раздавать клиентам, чтобы все их могли качать, качать, качать… на высокой скорости.

Для системного администратора задача даже редкого, ежедневного резервного копирования такого объема файлов навевает мысли о суициде, а менеджер веб-проекта просыпается в холодном поту от мысли о предстоящей профилактике датацентра на 6 часов (чтобы файлы перевести из одного датацентра в другой нужно пару раз загрузить багажник автомобиля винчестерами :-) ).

Коллеги с умным видом советуют приобрести одно из решений от NetApp, но, жаль, что бюджет у проекта в 1000 раз меньше, это вообще стартап… что делать будем?

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

UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.

В данной статье будет рассмотрено управление изображением с помощью Javascript и HTML тега canvas. Статья является переводом. Оригинал на phpied.com.

Сейчас многие покупают точки доступа 802.11n, но хороших скоростей достичь удается не всем. В этом посте поговорим о не очень очевидных мелких нюансах, которые могут ощутимо улучшить (или ухудшить) работу Wi-Fi. Всё описанное ниже применимо как к домашним Wi-Fi-роутерам со стандартными и продвинутыми (DD-WRT & Co.) прошивками, так и к корпоративным железкам и сетям. Поэтому, в качестве примера возьмем «домашнюю» тему, как более родную и близкую к телу. Ибо даже самые администые из админов и инженеристые из инженеров живут в многоквартирных домах (или поселках с достаточной плотностью соседей), и всем хочется быстрого и надежного Wi-Fi.
[!!]: после замечаний касательно публикации первой части привожу текст целиком. Если вы читали первую часть — продолжайте отсюда.

Сегодня, администрацией интернет-магазина Chrome было удалено расширение P2P YouTube, где данное расширение на протяжении последней неделе было одним из первых в рейтинге раздела " Набирающие популярность"

На данный момент его официальная страничка в маркете еще пока доступна, но вероятнее всего в ближайшее время она будет удалена или просто его уже невозможно будет обновить, так как его статус в панели разработчика указан " Удалено"

abstract: В статье описаны продвинутые функций OpenSSH, которые позволяют сильно упростить жизнь системным администраторам и программистам, которые не боятся шелла. В отличие от большинства руководств, которые кроме ключей и -L/D/R опций ничего не описывают, я попытался собрать все интересные фичи и удобства, которые с собой несёт ssh.

Предупреждение: пост очень объёмный, но для удобства использования я решил не резать его на части.

Оглавление:

• управление ключами
• копирование файлов через ssh
• Проброс потоков ввода/вывода
• Монтирование удалённой FS через ssh
• Удалённое исполнение кода
• Алиасы и опции для подключений в .ssh/config
• Опции по-умолчанию
• Проброс X-сервера
• ssh в качестве socks-proxy
• Проброс портов — прямой и обратный
• Реверс-сокс-прокси
• туннелирование L2/L3 трафика
• Проброс агента авторизации
• Туннелирование ssh через ssh сквозь недоверенный сервер (с большой вероятностью вы этого не знаете)

Ошибки типа «Состояние гонки» (race condition) редко встречаются на малонагруженных проектах, а с ростом нагрузки ситуация медленно, но верно меняется. И однажды обычное кеширование данных в файле, например, вот такое:

function getFlagFromFile($filename) {
    if (file_exists($filename)) {
        if (!$this->validate()) { // а не устарел ли файл?
            unlink($filename);
            return false;
        }
        else {
            return file_get_contents($filename);
        }
    }
    return false;
}

выдаёт ошибку в строке unlink(): файл $filename не существует!

На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

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



Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.

Вы когда-нибудь думали, как было бы здорово, если бы слитый в один файл и минифицированный яваскрипт код в production-окружении можно было удобно читать и даже отлаживать без ущерба производительности? Теперь это возможно, если использовать штуку под названием source maps.

Если коротко, то это способ связать минифицированный/объединённый файл с файлами, из которых он получился. Во время сборки для боевого окружения помимо минификации и объединения файлов также генерируется файл-маппер, который содержит информацию об исходных файлах. Когда производится обращение к конкретному месту в минифицированном файле, то производится поиск в маппере, по которому вычисляется строка и символ в исходном файле. Developer Tools (WebKit nightly builds или Google Chrome Canary) умеет парсить этот файл автоматически и прозрачно подменять файлы, как будто ведётся работа с исходными файлами. На момент написания (оригинальной статьи — прим. перев.) Firefox заблокировал развитие поддержки Source Map. Подробнее — на MozillaWiki Source Map.