• Эллиптическая криптография: теория

    • Tutorial

    Привет, %username%!
    Недавно на хабре была опубликована очень спорная статья под названием «Эксперты призывают готовиться к криптоапокалипсису». Честно говоря, я не согласен с выводами авторов о том, что «голактеко опасносте», все скоро взломают и подорожает гречка. Однако я хочу поговорить не об этом.
    В комментариях к той статье я высказал мнение, что кое в чем докладчики правы и переходить на эллиптическую криптографию уже давно пора. Ну в самом деле, кто-нибудь видел в интернете ECDSA сертификат? Хотя стандарту уже без малого 13 лет, мы продолжаем по старинке использовать старый добрый RSA. В общем сказал я это, и как это часто бывает, задумался а так ли необходим переход на «эллиптику»? Да и что это за зверь такой эллиптическая криптография? Какие имеет плюсы, минусы, тонкости. Одним словом, давайте разбираться.
    Читать дальше →
  • Проблемы CSS. Часть 1

    • Translation
    От переводчика
    Статья большая решил разбить на две части.

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

    Для многих вещей, css, не был предназначен изначально, например для таких как: многоколоночность, отзывчивый веб дизайн и т.д. Вот почему он стал языком полным хаков и глюков, как какая-то древняя машина с кучей расширений.

    В лучшем случае — работу с css можно назвать веселым занятием. И это то, благодаря чему мы имеем работу. Потому что, как я считаю, генерация эффективных и кроссбраузерных css стилей невозможна и не будет возможна в ближайшее время.
    Читать дальше →
  • Сдвиг частот для SDR-радиоприемника — Ham it up v1.2 upconverter

      Некоторое время назад я писал об универсальных радио-приемниках за 20$ из TV-тюнеров на rtl2832. Самым большим их недостатком было то, что они не могут принимать ничего ниже 50Мгц (e4000 — не работает ниже 50Мгц, R820T — ниже 24Мгц), а в этом диапазоне — 3/4 всего интересного, что можно услышать в радиоэфире за счет того, что короткие волны отражаются от ионосферы — и дальность связи уже не ограничена прямой видимостью.

      Устранить этот недостаток можно добавив к нему конвертор частоты. Сделать качественный (со всеми фильтрами) конвертер своими руками — достаточно сложно и дорого, потому пришлось купить готовый: Ham-it-up v1.2 c кварцем на 125Мгц (42.95$, из США шло чуть дольше месяца). Краткие результаты тестирования и несколько хитростей для успешного приема на коротких волнах — под катом.
      Читать дальше →
    • Карта с проекциями из Proj4js на Canvas

      Идея


      Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbCartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер. Собравшись с силами и вооружившись документацией от W3C, я переписал часть функционала компонентов, которые мы используем в работе, на JavaScript, оформив это в проект dbCartajs на GitHub. Код реализован в виде объекта dbCarta, чтобы использовать его как виджет на страницах без копирования частей исходного кода.
      imageimage
      Виджеты с dbCarta
      Читать дальше →
    • Замена фона в Гимпе — рабочее решение

      • Tutorial
      В комментариях к посту Clipping Magic... я посетовала на невозможность качественно отделить объект от фона в Гимпе. Я с мая искала рабочий способ замены фона, чтобы не мучиться с фотошопом в убунту, которая давно уже является у меня единственной осью на десктопе. Прочитав сотни уроков (в том числе уроков по ручному созданию подобных масок в фотошопе, т.к. маски в гимпе почти не отличаются), я так и не нашла способа, который был бы таким же быстрым и качественным, как Refine Edges в CS5-6. А вчера в каталоге плагинов на официальном сайте Гимпа был выложен плагин, который наконец-то справился с задачей.
      Итак, встречайте:
      Читать дальше →
    • Используем поисковые движки для проверки корректности фраз

      По работе мне часто приходится вести переписку на английском, и в силу недолеченного перфекционизма, пользоваться для этого оффлайн/онлайн переводными/толковыми словарями. В целом они со своей работой справляются, пока дело не доходит до проверки правильности словосочетаний или целых фраз. Хочешь ввернуть что-нибудь из разряда продвинутого владения языком, но нет уверенности, что правильно помнишь (большой привет предлогам и фразовым глаголам).

      Есть парочка ресурсов, для поиска фраз, но заточены они в основном под общеупотребимые словосочетания, пословицы и фразеологизмы на отдельно взятом языке. К тому же не известно пользуются ли люди искомой фразой или употребив её вы поставите в тупик даже носителя языка.
      Читать дальше →
    • Оптимизация графики для Retina-экранов

      • Translation
      После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

      Для начала разберемся в терминологии.

      Физические пиксели


      Читать дальше →
    • simpleTooltip: HTML начиненный CSS и приправленный jQuery

      • Tutorial


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

      На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…
      Ознакомиться с рецептом
    • Yaxy — proxy-сервер для веб-разработчика

        Yaxy — proxy-сервер, подменяющий различные части HTTP-запросов и ответов на указанные в config-файле значения. Я не буду здесь описывать, как поставить, настроить и запустить сервер, это всё описано в readme репозитория. Здесь я опишу различные случаи, в которых Yaxy очень помогает, а то и вовсе незаменим.

        Под катом 9 примеров использования Yaxy
      • Верстка: переход к семантической разметке — главная цель HTML

          Первоначально технология HTML (hypertex markup language) была предназначена для описания смысловой структуры веб-документа, то есть для определения частей текста, в которых находятся различные по типу и содержанию части страницы как например заголовки, абзацы, сноски, иллюстрации, гиперссылки и так далее. Говоря академическим языком, HTML создан для семантической разметки документа.

          Напомню, что семантика — это раздел языкознания изучающий отношения и способы выделения смысловых структур в речи. К примеру определение членов предолжения (подлежащее, сказуемое, дополнение, определение), изучение отношений и заложенного в них смысла (что является субъектом/объектом действия, а что уточняет их описание и т.д.).

          До HTML задача семантической разметки документов решалась с помощью:
          • TeX (технологии 1978го года) для макетирования академических публикаций
          • SGML (технологии 1968го года) для более широкого спектра задач. SGML очень похож на своего потомка XML за исключением ряда правил, которые в некоторых случаях заметно усложняют чтение разметки, как например разрешение не ставить угловые скобки в тэгах.

          Другими словами, если TeX был адаптирован строго под нужды макетирования университетских докладов, научных работ и тому подобного, SGML позволял создавать структуры информации подобные Реляционным Базам Данных, то есть реализоваывать ER-модели (entity-relationship).
          пример ER-модели
          (пример ER-модели)
          пример ER-отношения
          (пример ER-отношений)

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

          Тим Бернерс Лии создавая Web в конце 80ых, взяв за основу SGML, упростил синтаксис, создал перечень предопределенных тэгов для макетирования веб-страницы, правила использования которых задал с помощью DTD (технология из семейства SGML которая регламентирует порядок использования тэгов — то есть перечень разрешенных атрибутов, вложенных тэгов, разрешение на текстовый контент и так далее) и мы получили HTML 1.0

          Таким образом HTML основанный на SGML первоначально был призван для описания структуры документа в контексте ER-отношений ее частей, то есть определения структуры и содержания документа в терминах сходных к базам данных.

          Теперь представьте ситуацию, когда в прикладной программе для того чтоб подвинуть GUI-кнопку на несколько пикселей в какую-либо сторону Вам приходится редактировать структуру базы данных. Парадоксально, но в соверменном вебе это в порядке вещей — очень часто для того чтоб визуально подвинуть какой-либо элемент (GUI-кнопку) приходится изменять HTML-структуру (базу данных)!
          Читать дальше →
          • +4
          • 23.9k
          • 9
        • Алгоритм seam carving для изменения размера изображения

          • Tutorial
          Seam carving это алгоритм для изменения размера картинки, сохраняющий важный контент и удаляющий менее значимый. Он был описан в статье S. Avidan & A. Shamir. Он дает лучший результат, чем обычное растягивание изображения ввиду того, что не меняет пропорций значимых элементов изображения. Две фотографии ниже демонстрируют работу алгоритма – исходное изображение имеет размер 332x480, в то время как модифицированное seam carving'ом 272x400.


          В данной статье я опишу работу алгоритма используя псевдокод и код Matlab. Оригинал статьи, написанный мной на английском доступен тут, исходный код на гитхабе.
          Читать дальше →
        • 4 способа как создать блоки одинаковой высоты

          • Translation
          fourmethodsbanner
          Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.
          В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.
          Читать дальше →
        • Для этого есть карта

          • Translation
          Не так давно мы начали рендерить 3D-модели на Гитхабе. Сегодня мы с удовольствием объявляем о новейшем прибавлении в семействе визуализаций — о геоданных. Любой файл .geojson в репозитории на Гитхабе теперь станет автоматически отображаться в качестве интерактивной карты (с возможностью листания), снабжённой вашими геоданными.

          [скриншот 2013-06-13 10:23:32]

          Люди ужé используют Гитхаб для хранения разных геоданных, от почтовых индексов Чикаго и до радиостанций сообществ да путей движения известных в истории ураганов, так что мы с нетерпением ожидаем увидеть дальнейшие плоды сотрудничества сообществ.

          «Под капотом» мы используем Leaflet.js для отображения данных geoJSON поверх специальной версии базового слоя карты улиц MapBox упрощённого, чтобы данные ваши на нём воссияли. Лучше же всего — то, что картооснова использует данные OpenStreetMap; так что, если пожелаете улучшить какой-либо участок её, редактируйте тотчас же.

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

          Читать дальше →
        • 5 правил верстки email-писем от Печкина


            Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:
            • веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
            • десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
            • мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)


            К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

            Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?
            Посмотреть 5 правил верстки email
          • Justify Grid — новое слово в разметке


              Доброго времени суток уважаемые хабражители. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.

              Проблема


              Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout или Flexible Box Layout, но эти решения не поддерживаются на большинстве браузеров.
              Читать дальше →
            • Сравнение эффективности минимизаторов CSS- и JavaScript-кода

                Логотипы модулей-минимизаторов из Bundle Transformer

                Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.

                В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.
                Читать дальше →
              • Реализация стилей подчеркивания в LESS через генерацию png в data-URI

                  Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок — чтобы просто делать полупрозрачные подчеркивания, регулировать паттерн в dashed/dotted-border, делать волнистые подчеркивания и вообще иметь настройки CSS3 text-decoration, которые еще ни один браузер не умеет.



                  В результате получился генератор PNG в data-URI на LESS.

                  Демо.



                  Подробности реализации
                • HabraPack возвращается

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

                    image

                    Я буду обновлять иконки раз в день, большим количеством иконок. А пока можете СКАЧАТЬ и спокойно пользоваться, если вдруг найдутся люди, кому понравится.

                    .PSD файл прилагается.
                  • Обзор инструментов для сжатия изображений



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