• Как улучшить выбор страны из списка

    • Translation
    • Tutorial
    Представляю вашему вниманию перевод статьи под названием "Redesigning The Country Selector" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

    Выбор страны. Обычно он встречается тогда, когда вы регистрируетесь на новом веб-сервисе, оформляете заказ в интернет-магазине, или же оформляете участие в конференции. Что обычно представляет из себя выбор страны? Выпадающий список с перечнем всех доступных стран.



    Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.

    Читать дальше →
  • LESS: программируемый язык стилей

    Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
    Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
    Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.
    Так что же такое LESS?
  • Float'омагия: пробуем не «плавать» в спецификации, чтобы не утонуть в потоке

      Пример действия float IRLНедавняя статья про float-ы и реакция хабрасообщества на нее показали, что «сладкая парочка» CSS-свойств float и clear, несмотря на свою давнюю и колоссальную популярность в верстке, для многих остается чем-то загадочным и таинственным. Однако затронута в ней оказалась лишь верхушка айсберга, теряющегося в пучине мутных вод загадочной спецификации CSS 2.1. А есть и «подводные рифы», в спецификации не описанные. Не желаете ли продолжить увлекательное погружение в этот мир удивительных открытий и добраться до самого дна, полного сокровищ? Если да, то…
      добро пожаловать на борт!
    • Обфускация JavaScript

        В статье собраны всем известные методы и предельно извращенные. Эту статью я решил написать после недавнего прочтения поста в блоге Badass JavaScript и решил её дополнить своими находками.

        Первый способ


        Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
        Они превращают существующий код
        function MyClass(){
            this.foo = function(argument1, argument2){
                var addedArgs = parseInt(argument1)+parseInt(argument2);
                return addedArgs;
            }
            var anonymousInnerFunction = function(){
                // do stuff here!
            }
        }

        В какой-то такой вид:
        function MyClass(){this.foo=function(c,b){var d=parseInt(c)+parseInt(b);return d};var a=function(){}};

        Или такой:
        var _0xd799=["\x66\x6F\x6F"];function MyClass(){this[_0xd799[0]]=function (_0xefcax2,_0xefcax3){var _0xefcax4=parseInt(_0xefcax2)+parseInt(_0xefcax3);return _0xefcax4;} ;var _0xefcax5=function (){} ;} ;

        Или вот такой:
        eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4 0="3 5!";9 2(1){6(1+"\\7"+0)}2("8");',10,10,'a|msg|MsgBox|Hello|var|World|alert|n|OK|function'.split('|'),0,{}))

        Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.

        Все это были цветочки под катом жесткие методы обфускации.
        Читать дальше →
      • Почему WAT

        • Translation
        Недавний доклад Гарри Бернхардта на CodeMash оказался довольно популярен (прим. пер.: в том числе и на хабре). В докладе он шутит по поводу некоторых особенностей поведения ruby и javascript.
        Вряд ли я смогу вас убедить, что есть какой-то смысл в том, на что жалуется Гарри. Тем не менее, надеюсь, я смогу вам объяснить, почему javascript ведёт себя именно так.
        Читать дальше →
      • Использование cdn Amazon Cloudfront в wordpress в картинках


          Однажды в студенную летнюю пору решил я прикрутить к блогу отдачу файлов из cdn Amazon CloudFront. Инфы как всегда мало и сделал все методом быстрого научного тыка.
          Статья изобилует большим количеством пояснений и картинок.
          Читать дальше →
        • Class-based views — зачем и как использовать

            В Django версии 1.3 были представлены class-based views — способ описания view в виде классов. Документация, однако, касается только generic views, не описывая общую технику написания «вьюх» в виде классов. Начав использовать generic views и затем пытаясь изменить их поведение, я постепенно дошел до того момента, когда мне пришлось смотреть исходный код, чтобы понять, как что-то сделать. Поэтому я решил написать этот текст. Цель его — объяснить, как использовать class-based view и чем это может быть полезно.
            Читать дальше →
          • Чёртова дюжина советов начинающим верстальщикам. Часть вторая

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

              О том, что вы читаете


              Вот оно и свершилось — перед вами продолжение советов начинающим верстальщикам. Если вы не читали первую часть, то можете сделать это прямо сейчас.
              В данной части вы ознакомитесь ещё с 11 советами (именно столько в моей второй заметке их находится).
              Сперва мы пройдём нововведения в визуализации, а затем пофилосовствуем на тему семантики.

              Ещё немного лирики


              После выхода первой части я получил огромное количество feedback'a. Если честно, я не ожидал такого желания изучить что-то новое. Да-да, быдлокодеры там тоже есть. Но сейчас не об этом…
              Также, как вы можете заметить, что количество человек, добавивших мой топик в избранное достигло миллиона, достаточно велико, что не может не свидетельствовать об огромном интересе к HTML5. Итак, поехали.
              Читать дальше →
            • Чёртова дюжина советов начинающим верстальщикам. Часть первая

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

                Введение


                Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.
                Читать дальше →
              • Float'омания: разъяснение как работает css свойство float


                  После того как меня шестьдесят восьмой раз спросили почему блок с float отображается неправильно, я решил написать эту заметку, которая объяснила бы типичные ситуации, с которыми сталкивается начинающий верстальщик, а так же для того, чтобы в следующий раз просто дать ссылку на эту статью.
                  Читать дальше →
                • Gephi как средство визуализации данных

                    Так уж случилось, что я оказался ассистентом у профессора в университете. Никогда не думал, что прийдётся сталкиваться с оценкой рисков и визуализацией данных, будучи, по призванию, криптографом. Курс называется «Информационные сети» и включает в себя: анализ случайных процессов, моделирование малых миров; компьютерные алгоритмы для оценки свойств сети; экспериментальные исследования крупных сетей, а также анализ рисков, которые трудно предсказать.

                    В виду того, что курс читается в основном для ИТ-шников, лектор сделал ставку на то, чтобы дать достаточно теории с минимумом математики и большим количеством практики. Для большинства вышеупомянутых задач подходит программа NetLogo. Она включает собственный язык программирования высокого уровня, который позволяет с лёгкостью моделировать различные случайные процессы. Для визуализации разнообразных данных была выбрана программа Gephi.

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

                    Собственно постановка задачи была таковой: визуализация каких-либо реальных данных средствами Gephi.

                    Читать дальше →
                  • Выбор цветовой палитры по фотографии

                      Дизайнер Джессика из компании Seed Design Consultancy занимается подбором оригинальных цветовых палитр для сайтов и предлагает несколько методов, в том числе по произвольному цвету, по рубрикатору тем (осень, минералы, природа). Сейчас она придумала ещё один способ, который несложно реализовать самостоятельно методом статистического анализа.

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


                      Читать дальше →
                    • Tarantool: как обрабатывать 
1,5 млрд запросов в сутки?

                        Доклад «Tarantool: как обрабатывать 
1,5 млрд запросов в сутки?» — очередной в серии расшифровок с Форума Технологий Mail.Ru 2011. Подробности о том, как работает система расшифровки докладов — см. в статье «Изнанка» Форума технологий Mail.Ru: Хай-тек в event-management. Там же, а также на сайте Форума (http://techforum.mail.ru) — ссылки на расшифровки других докладов.


                        (Скачать видеоверсию для мобильных устройств — iOS/Android H.264 480×368, размер 170 Mb, видеобитрейт 500 кбит/с, аудио — 64 кбит/с )
                        (Скачать видеоверсию большего разрешения H.264 624×480, размер 610 Mb, видеобитрейт 1500 кбит/с, аудио — 128 кбит)
                        (Скачать слайды презентации, 520К)

                        Представлять данного докладчика тяжело, потому что его все знают. Каждый из вас, я уверен, пользуется продуктами, к которым Костя приложил руку. Это, в первую очередь, MySQL. Костя на протяжении многих лет занимался разработкой этой популярной базы данных, которую используют если не 100%, то 90% российских сайтов точно. Сегодня Костя работает в компании Mail.Ru Group. Костя нам сегодня расскажет о том, что мы сделали, как это работает и главное — какую производительность это позволит получить на ваших сервисах.



                        Добрый день. Вас сегодня очень много. Cпасибо, что пришли! Меня уже представили, поэтому я бы только хотел добавить, что я в душе и по делу все-таки инженер. Я, скорее, не руковожу, а активно участвую в разработке Tarantool, поэтому, если вам это интересно, у вас сегодня есть возможность узнать про него абсолютно всё. Так или иначе, этот доклад, помимо философствования на тему будущего СУБД, о Tarantool.
                        Читать дальше →
                      • Kinetic ScrollBar

                        Эффект кинетической прокрутки сейчас можно встретить практически везде. Это действительно удобно при управлении пальцами или стилусом и довольно забавно при прокрутке мышкой.

                        В вебе такой эффект пока только приживается. Да и не так уж просто придумать, где он будет удобен… В голову приходят пожалуй лишь scroll bar’ы, которые используются для прокрутки некоторого контента, в основном картинок, внутри страницы. Для примера, можно посмотреть реализацию галереи практически на любом сайте. Согласитесь, было бы значительно интереснее, если бы ползунок не останавливался сразу, как только отпустили кнопку мыши, а продолжал бы двигаться дальше по инерции, постепенно останавливаясь…
                        Я попытаюсь рассмотреть процесс создания такого эффекта «кинетического» scroll bar’a. Что получилось в итоге можно посмотреть здесь
                        Читать дальше →
                      • Ещё 10 батареек для джанго


                          Продолжаем делиться своим опытом использования полезных батареек для Django.
                          Первая часть
                          Ещё рекомендуем «Сумбурные заметки про python и django» и «Django проект PR Hero: что внутри и полученный опыт».

                          Для Django написано огромное количество пакетов. Из них мы выбрали 10, которые использовали сами в своих последних проектах и которыми остались довольны. Все они есть на PyPI. Они продокументированы и покрыты тестами, где-то больше, где-то меньше. Исключение составляет django-sphinx, о котором отдельно.

                          Читать дальше →
                        • Оформление тултипов со стрелками на CSS с помощью символов

                          Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.
                          Читать дальше →
                        • Как сделать один сайт для всех устройств (Responsive Web Design)

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

                            «Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление

                            Почему это глупо


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



                            Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

                            Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

                            Как сделать один сайт для всех устройств

                            Читать дальше →
                          • CSS кнопки с помощью псевдо-элементов

                            • Translation
                            • Tutorial


                            Здравствуйте, друзья. За последний месяц я экспериментировал с псевдо-элементами, особенно, с их использованием в создании кнопок. Таким образом, удалось создать крутые эффекты, которые раньше можно было сделать только со спрайтами.

                            В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.

                            Читать дальше →
                          • Оформляем тултипы с помощью CSS3

                              image
                              Всем привет!
                              Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени. Можно, конечно, все запилить на картинках, но ведь это старомодно непрактично. Хотя бы из-за кучи оберток, для того, чтобы все тянулось во все стороны.
                              Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного фантазии.
                              От слов к делу.
                              Читать дальше →