Всего 7 заметок в категории: обзоры.

• web.archive.org обновился

  web.archive.org обновился

  Опубликовано в среду, 4-го мая 2011 в категориях: обзоры, новости.

  Периодически я посматриваю как выглядели раньше некоторые сайты, еще во времена своего зарождения. Как выглядела design.ru или яндекс. Отправиться в прошлое мне помогает машина времени под названием web.archive.org.

  Это наверное один из старейших и консервативных сайтов, аналогов у которого нет.

  В очередной раз зашел на него и был приятно удивлен. Ребята запустили в бета-тестирования новую версию интерфейса.

  На главной странице нас встречает форма ввода адреса сайта для отправки в прошлое.

  

  Теперь навигация по сохраненным страницам стала более удобной. Сверху страницы показывается меню с помощью которого можно перемещаться во-времени.

  Вот так например выглядел хабрахабр в самой первой его редакции. Интересно почему я тогда не зарегистрировался на нем?

• yepnope - асинхронный загрузчик js/css ресурсов

  yepnope - асинхронный загрузчик js/css ресурсов

  Опубликовано в среду, 9-го марта 2011 в категории обзоры.

  Что такое yepnope?

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

  Зачем использовать yepnope?

  Последние несколько месяцев были создано много различных загрузчиков ресурсов. Это удивительно и демонстрирует, что загрузчики дают реальную пользу для загрузки ресурсов или скриптов. Разработка yepnope была еще начата в ноябре 2010 на конференции JSConfEU. C тех пор yepnope позаимствовал лучшие приемы у других загрузчиков и упаковал в удобное API.

  Преимущества

  • yepnope.js весит всего 1.6kb — это один из самых маленьких размеров для такой функциональности;
  • yepnope.js позволяет загружать JavaScript и CSS;
  • yepnope.js имеет полную поддержку qUnit;
  • yepnope.js полностью отделяет загрузку от выполнения. Это означает что вы имеете полный контроль над исполнением, когда ресурс будет загружен;
  • API yepnope.js очень понятно и поддерживает логические объединение ресурсов;
  • yepnope.js модульный, поэтому вы можете добавить свою функциональност;
  • yepnope.js позволяет загружать только те ресурсы, которые будут использоваться;
  • yepnope.js интегрирован в Modernizr;
  • yepnope.js всегда выполняет загрузку ресурсов в том порядке, в котором они перечислены;
  • yepnope.js позволяет загружать зависимые ресурсы параллельно с основым:

    yepnope([
    {
        load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
        complete: function () {
            if ( ! window.jQuery ) {
                yepnope( 'local/jquery.min.js' );
            }
        }
    },
    {
        load : 'jquery.plugin.js',
        complete: function () {
            jQuery(function () {
                jQuery( 'div' ).plugin();
            });
        }
    }
    ]);
    

    Большинство загрузчиков сначала пытаются загрузить основной ресурс, а затем в зависимости от его доступности загружают зависимые ресурсы:

    someLoader('http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', function(){
    if ( ! window.jQuery ) {
        someLoader( 'local/jquery.min.js', 'jquery.plugin.js' );
    } else {
        someLoader( 'jquery.plugin.js' );
    }
    });
    

    Это не красиво, не соответствует принципу DRY и очень медленно.

  Вопросы и ответы

  Почему бы просто не объединить все ресурсы в один файл и не подключить его в конце страницы?

  Это не плохая практика, которая используется уже очень давно. Однако если вы объедините все свои ресурсы в один файл, то вы можете часто загружать большие куски кода, которые фактически не будут использоваться на странице. Кроме того на практике выявлено, что подгрузка загрузчиком нескольких ресурсов параллельно получается быстрее, чем загрузка единственного объединенного файла (Даже учитывая то, что создается несколько http запросов).

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

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

  Можно ли сделать тоже самое, только другими загрузчиками?

  Конечно же другие загрузчики тоже могут решить эти и другие проблемы. Большинство из них очень хороши.

  Что связывает вас с Modernizr?

  Что это имеет отношение к Modernizr? (или Каков Modernizr.load?) В настоящее время yepnope включается в специальную сборку Modernizr, потому что это такая замечательная библиотека для тестирования (проверка доступности функций). Результаты работы Modernizr отлично подходят для передачи в yepnope.

  Документация yepnope

  API

  Ядром yepnope.js является функция yepnope. Она очень проста в использовании. Всю сложную работу она берет на себя. Рекомендуется использовать массивы тестовых объектов. Однако если вы не нуждаетесь в нескольких тестовых группах, то вы, конечно, можете передать лишь один объект или просто строку с адресом ресурса.

  yepnope(resources /* string | object | array */)

  ##Что такое тестовые объекты? Тестовый объект представляет из себя литеральный объект с несколькими необязательными полями:

  yepnope([{
    test : /* boolean(ish) - Something truthy that you want to test             */,
    yep  : /* array (of strings) | string - The things to load if test is true  */,
    nope : /* array (of strings) | string - The things to load if test is false */,
    both : /* array (of strings) | string - Load everytime (sugar)              */,
    load : /* array (of strings) | string - Load everytime (sugar)              */,
    callback : /* function ( testResult, key ) | object { key : fn }            */,
    complete : /* function                                                      */
  }, ... ]);
  

  Напомню, что yepnope может загружать как css, так и js файлы. Все ресурсы считаются js файлами, если они не оканчиваются на ".css".

  Практическое использование yepnope

  yepnope();
  

  Аргументы: строка, объект, массив.

  Строка

  Наиболее простой способ использовния — это передача аргумента в виде строки:

  yepnope( '/url/to/your/script.js' );
  

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

  yepnope( 'js/jquery.js' );
            $.ajax(...); // NOPE
  

  Такой способ не будет работать. Если вы еще никогда не работали с асинхронным кодом, то чуть позже вы увидите как заставить код, приведенный выше, работать.

  Если вы хотите сделать что-нибудь после того, как ресурс будет загружен, то вы должны использовать callback функцию.

  Объект

  yepnope( {
              load : '/url/to/your/script.js'
  } );
  
  

  Этот код эквивалентен коду из примера с передачей строки. Но мы можем добавить еще некоторый функционал. Например, мы пожем добавить callback функцию, которая будет сообщать, что файл загружен. Добавление осуществляется просто с ипользованием ключа callback.

  yepnope( {
        load : '/url/to/your/script.js',
        callback : function ( url, result, key ) {
            // whenever this runs, your script has just executed.
            alert( 'script.js has loaded!' );
        }
    } );
  

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

  Одна из ключевых особенностей yepnope — это возможность использования тестов, которые определяют необходимость загрузки ресурсов. Yepnope's API позволяет использовать тесты так:

  yepnope( {
        test  : window.JSON,
        nope : 'json2.js',
        complete : function ( url, result, key ) {
            var data = window.JSON.parse( '{ "json" : "string" }' );
        }
    } );
  

  Суть этого кода в том, что если ваш браузер имеет поддержку JSON, то json2.js не будет загружен, в противном случае он загрузится.

  Вы можете для одного теста установить загрузку нескольких различных ресурсов:

  yepnope( {
        load : [ 'script1.js', 'style1.css' ],
        callback: function ( url, result, key ) {
            // Wait! What happens in here now?! Does this get called once or twice?
        }
    } );
  

  Callback функция становится немного запутанной, когда мы устанавливаем множественную загрузку. На самоме деле callback функция вызывается для каждого из загруженных файлов в тесте.

  Теперь мы можем изучть параметры, которые передаются в callback функцию.

  ...
    callback: function ( url, result, key ) {
        console.log( url, result, key );
    }
    ...
  

  • url — это url, который был загружен
  • result — это результат вашего теста
  • key — Если используется массив ресурсов, то это индекс, соответствующий вашему файлу. Если используется хэш, то это ключ. В случае, если используется строка, то ключ имеет значение 0.

  Следующий пример демонстрирует, как проверяется поддержка геолокации вашим браузером:

  yepnope( {
        test : Modernizr.geolocation,
        yep : 'regular-styles.css',
        nope : [ 'modified-styles.css', 'geolocation-polyfill.js' ],
        callback : function ( url, result, key ) {
            alert( url );
        }
    } );
  

  В данном примере мы получим два всплывающих сообщения, которые будут содержать адреса ресурсов из списка nope.

    yepnope( {
        test : Modernizr.geolocation,
        yep : 'regular-styles.css',
        nope : [ 'modified-styles.css', 'geolocation-polyfill.js' ],
        callback : function ( url, result, key ) {
            if ( url === 'modified-styles.css' ) {
                alert( 'The Styles loaded!' );
            }
        }
    } );
  

  в этом примере, в отличии от предыдущего появится только одно всплывающее сообщение.

    yepnope( {
        test : Modernizr.geolocation,
        yep : 'regular-styles.css',
        nope : [ 'modified-styles.css', 'geolocation-polyfill.js' ],
        callback : function ( url, result, key ) {
            if ( url === 'modified-styles.css' ) {
                alert( 'The Styles loaded!' );
                if ( result ) {
                    alert( 'The Test Passed!' );
                }
                else {
                    alert( 'The test Failed!' );
                }
            }
        }
    } );
  

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

  Массивы тестов

  yepnope( [
        {
            load : 'file1.js',
            callback : function ( url, result, key ) {
                alert( 'This is definitely file1!' );
            }
        },
        {
            load : 'file2.js',
            callback : function ( url, result, key ) {
                alert( 'This is definitely file2!' );
            }
        }
    ] );
  
  

  Вы можете использовать литеральные объекты для обозначения ваших ресурсов.

    yepnope( {
        test : Modernizr.geolocation,
        yep : {
            'rstyles' : 'regular-styles.css'
        },
        nope : {
            'mstyles' : 'modified-styles.css',
            'geopoly' : 'geolocation-polyfill.js'
        },
        callback : function ( url, result, key ) {
            if ( key === 'geopoly' ) {
                alert( 'This is the geolocation polyfill!' );
            }
        }
    } );
  

  Есть способ, позволяющий установить связь между загружаемыми файлами и callback функциями. Для этого нужно использовать массив callback функций в качестве значения ключа callback. Такая вот тавтология:

    yepnope( {
        test : Modernizr.geolocation,
        yep : {
            'rstyles' : 'regular-styles.css'
        },
        nope : {
            'mstyles' : 'modified-styles.css',
            'geopoly' : 'geolocation-polyfill.js'
        },
        callback : {
            'rstyles' : function ( url, result, key ) {
                alert( 'This is the regular styles!' );
            },
            'mstyles' : function ( url, result, key ) {
                alert( 'This is the modified styles!' );
            },
            'geopoly' : function ( url, result, key ) {
                alert( 'This is the geolocation polyfill!' );
            }
        }
    } );
  

  Только соответствующий callback будут вызван для соответствующего файла.

  Как же выполнить код, который должен быть выполнен, после загрузки всех ресурсов? Для этого нужно использовать complete callback:

    yepnope( {
        test : Modernizr.geolocation,
        yep : {
            'rstyles' : 'regular-styles.css'
        },
        nope : {
            'mstyles' : 'modified-styles.css',
            'geopoly' : 'geolocation-polyfill.js'
        },
        callback : {
            'rstyles' : function ( url, result, key ) {
                alert( 'This is the regular styles!' );
            },
            'mstyles' : function ( url, result, key ) {
                alert( 'This is the modified styles!' );
            },
            'geopoly' : function ( url, result, key ) {
                alert( 'This is the geolocation polyfill!' );
            }
        },
        complete : function () {
            alert( 'Everything has loaded in this test object!' );
        }
    } );
  

  Вместо заключения

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

  Пробуйте, тестируйте, делайте свои приложения быстрыми.

  • Скачать
  • Форкнуть

• About me

  About me

  Опубликовано в пятницу, 17-го декабря 2010 в категории обзоры.

  Недавно получил инвайт на замечательный сайт в котором отличное сочетается красивое название и соответствующий функционал. И сейчас я расскажу о стартапе about.me.

  Каждый из нас имеет множество аккаунтов в различных социальных сетях: facebook, Linkedin , Flickr и twitter. About.me поможет создать профессиональный профиль, объединяющий все сервисы, которые вами используются.

  About.me предоставляет две функциональные возможности: создание страницы и просмотр статистики по сервисам.

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

  Вот, например, страничка Вероники Бельмонт. А вот и моя.

  

  Если связать свой профиль в about.me с такими сайтами как facebook или twitter, то при клике на на соответствующую иконку на странице появится блок, в котором будет отображена агрегированная информация из этих сетей.

  

  Редактирование страниц

  Редактирование персональной страницы очень гибкое и предоставляемый интерфейс позволяет задать любые параметры для оформления страницы.

  Можно загрузить собственное изображение в качестве фоновой картинки или же выбрать понравившееся из галереи стандартных обоев.

  Невероятно, но на вкладке biorgraphy можно написать несколько слов о себе и позиционировать информационный блок произвольно на странице.

  Другие две вкладки позволяют подобрать шрифты и выбрать цветовые сочетания.

  Ну и на последнем этапе оптимизации страницы вы можете указать сервисы, которые используете.

  

  Статистика

  Кроме уже перечисленных особенностей about.me позволяет просматривать статистику посещаемости вашей персональной странички, а так же статистику активности в социальных сетях.

  

  

  Историческая справка

  About.me был создан в декабре 2009 Tony Conrad, Ryan Freitas и Tim Young.

  За время своего существования сервис получил $425k инвестиций как от частных инвесторов, так и от венчурных фондов.

  P.S.

  Кстати, сервис ещё не стал очень популярным, поэтому можно успеть получить красивые ники. Заполняете регистрационную форму и ждёте несколько дней для получения инвайта ;-)

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

• Поиск родственников в социальной сети по хромосомам от 23andMe

  Поиск родственников в социальной сети по хромосомам от 23andMe

  Опубликовано в четверг, 16-го декабря 2010 в категории обзоры.

  Пока Microsoft находится в аутсайдерах, партнерские сайты google задают все новые высоты.

  Основатели биотехнологической компании 23andMe Анна Войцицки (Anne Wojcicki) и Линда Эви (Linda Avey) дали большое интервью, в котором рассказали о сути своего уникального бизнеса, в котором впервые в мире сочетается веб-сервис персональной генетики и социальные сети. Компания 23andMe (можно перевести как «23 хромосомы и Я») получила солидное венчурное финансирование от Google вскоре после того как Анна Войцицки и Сергей Брин официально скрепили свою многолетнюю связь узами брака. Могло показаться, что таким образом Сергей просто отблагодарил женщину, которая приютила его и Ларри Пейджа в своём гараже давным-давно, когда у них ещё не было денег, чтобы снять офис для будущей компании Google. Но теперь понятно, что эти инвестиции сделаны совсем не по блату, а потому что компания 23andMe разрабатывает действительно революционные технологии. Начиная со вчерашнего дня каждый посетитель сайта 23andMe может заказать специальный приборчик для взятия генетического материала. Взятый образец отправляется в лабораторию (пока что лаборатория только в США, но в будущем будет открыта целая сеть по всему миру). Там происходит анализ материала, а вся информация поступает на персональный геном-аккаунт на сайте 23andMe. В этой социальной сети пользователи могут искать неизвестных родственников и определять общих предков вплоть до каменного века.

  viaхабрахабр

  Первая часть интервью.

  Первая часть интервью

  Вторая часть интервью.

  Вторая часть интервью

  Офис 23andMe.

  Ущё один ролик

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

  И некогда параноидальный ролик «Google master plan» уже не кажется таким параноидальным.

  google master plan

• Новый digg (от создателей digg.com) [+ раздача инвайтов]

  Новый digg (от создателей digg.com) [+ раздача инвайтов]

  Опубликовано в воскресенье, 22-го августа 2010 в категории обзоры.

  Создатели digg.com разрабатывают новую версию своего детища. И совсем недавно запустили новый дигг в публичное тестирование.

  

  Вы можете зарегистрироваться на новом диге с помощью инвайта. Ну и разумеется зафоловить меня на новом диге.

  Теперь разберемся с тем, что из себя представляет новый digg. За основу нового дигга была принята система фоловеров, придуманная командой твиттера. В это весь новый digg.

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

  

  Ваша домашняя страница на новом дигге

  По аналогии с твиттером, главной страницей отображаются ссылки от всех людей (или роботов), которых вы фоловите. Список людей отображается тут же в левом меню.

  

  Популярные новости

  На этой странице отображаются все новости, получившие наибольшее количество голосов. Всё как на старом дигге. Можно фильтровать ленту по тематикам или же по периодам времени (популярное за 24 часа, 7 часов, 30 дней)

  

  Добавление записей в ленту

  Отправить свой линк проще простого. Переводим курсор в поле "Submit new link", вставляем понравившуюся ссылку и нажимаем digg it! Digg автоматически загрузит все картинки со страницы и заголовок. Картинки можно пролистать и выбрать понравившуюся. Выбираем категорию в выпадающем меню и снова нажимаем digg it!

  

  Появляется ваш созданный digg.

  

  Настройки

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

  Это connections, позволяющая связать ваш аккаунт на новом дигге с твиттером, фэйсбуком или гуглом.

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

  Вместо заключения

  В порядке эксперимента предлагаю продвинуть этот обзор в новом дигге

  Интересно, как скоро появятся новые русские дигги :-)

  Благодарим techcrunch за предоставленный инвайт.

  PS. Зафоловить автора

  Оригинал обзора