«Население» Интернета уже больше 2 миллиардов человек. Что успевает сделать такое количество людей за минуту? Вот некоторые цифры:

за одну минуту —

• пользователи заливают на Youtube 48 часов видео;
• делают 2 миллиона запросов к Google;
• тратят в онлайн-магазинах 272 070 долларов;
• загружают 3125 фотографий на Flickr;
• создают 571 веб-сайт;
• отправляют 100 000 твитов;

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

10. Мини-приложения

Начать список мы решили не с одного, а сразу с набора приложений. Остановимся на тех, которые выполняют одну простую функцию, но выполняют ее отлично. Среди них Every Time Zone (показывает текущее время во всех часовых поясах), Umbrella Today? (сообщает, понадобится ли вам сегодня зонтик) и notepad.cc (минималистичный блокнот). Еще есть Spreeder, который позволяет вам читать текстовую информацию заметно быстрее обычного; SleepyTime — скажет, когда вам нужно лечь спать, чтобы проснуться в оптимальное время; а также SimplyNoise, умеющий генерировать так называемый белый шум.

За кадром осталось еще много “умных” и полезных веб-утилит, для описания которых нам здесь просто-напросто не хватит места. Но вот вам все же несколько вдогонку: 0to255, Mixest, PDFMyURL, и Copy Paste Character.

Здравствуй хаброчеловек!

Так уж случилось, что с этого семестра в своем вузе я записался на спецкурс по паттернам проектирования. Курс проходит в виде семинаров, на которых ты (студент) должен рассказать чему научился за неделю (имеется ввиду, какие паттерны изучил и применил на практике).

Здравствуйте.

У вас когда-нибудь возникала задача в определенное время запустить на сайте какой-нибудь видеоролик, с того же YouTube, к примеру? А нужно ли было сделать при этом так, чтобы пользователь, опоздавший к началу, смотрел с того момента, который смотрят все пользователи (которые начали просмотр с самого начала)?
Сразу скажу, что передо мной такой задачи не было, но что-то стрельнуло в голову и я решил попробовать сделать такую штуку.

С таким принципом можно сделать «реальный» онлайн кинотеатр, где опоздавшим зрителям не остается ничего другого, как продолжать смотреть фильм с текущего момента (в настоящем кинотеатре же не просят перемотать плёнку назад, верно?).

Приступая к кастомным фильтрам на CSS (Custom Cascading Style Sheets Filters)

Вступление

Кастомные CSS фильтры (далее CCSSF)(ранее известные как CSS шейдеры) — это новая браузерная фича, накладывающая созданные руками визуальные эффекты на элементы HTML документа.
Кастомные фильтры являются частью Filter Effects 1.0 specification. Они дополняют другую часть этой спецификации, определяющую некоторые общие CSS фильтры, уже встроенные в браузеры (blur, sepia, contrast, grayscale).

По просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов или хотите просто посмотреть ответы — добро пожаловать под кат.

var f = function() {
    this.x = 5;
    (function() {
        this.x = 3;
    })();
    console.log(this.x);
};

var obj = {x: 4, m: function() {
    console.log(this.x);
}};


f();
new f();
obj.m();
new obj.m();
f.call(f);
obj.m.call(f);

Разрешите представить datef — мини-JS-библиотеку вывода даты в разных форматах.
Вкратце опишу имеющиеся фичи:

• Выполняет одну и только одну задачу: вывод дат в разных, потребных юзеру форматах;
• Работает в nodejs и в браузерах. В браузерах может работать как requirejs/amd-модуль;
• Не мусорит в прототипах встроенных объектов;
• Написана в strict mode;
• Обильно аннотирована в js-doc-формате;
• Не имеет внешних зависимостей.

Примеры использования:

datef('dd.MM.YY', new Date()); // "13.08.12"
datef('dd.MM.YY'); // второй аргумент необязателен — берется «сейчас»

var d = new Date();
d.setFullYear(2045);
datef('dd.MM.YYYY', d); // "13.08.2045"

// есть несколько заранее заданных форматов:
datef.formatters.ISODateTimeTZ(); // "2012-08-13T15:01:29 -04:00"

// можно определить и сохранить свой…
datef.register('myFormat', 'd.M.YY');
datef.formatters.myFormat(); // "13.8.12"

// или просто получить его как отдельную функцию
var myFormat = datef.createFormatter('d.M.YY');

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

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

Дзен Angular

• Хорошо отделять манипуляцию DOM-ом от логики работы приложения. Это существенно улучшает тестируемость кода.
• Хорошо считать, что автоматизированное тестирование приложения настолько же важно, насколько и написание самого приложения. Тестируемость очень сильно зависит от того, как структурирован код.
• Хорошо отделять разработку клиентской части от серверной. Это позволяет вести разработку параллельно и улучшает повторное использование на обеих сторонах.
• Хорошо, когда фреймворк ведет разработчика по всему циклу разработки приложения: от проектирования UI через написание бизнес-логики к тестированию.
• Хорошо, когда распространенные задачи становятся тривиальными, а сложные — упрощаются.

AngularJS представляет собой комплексный фреймворк. В стандартной поставке он предоставляет следующие возможности:

• Все, что вам нужно для создания CRUD-приложений: data-binding, базовые директивы для шаблонов, валидация форм, роутинг, deep linking, повторное использование компонентов, dependency injection, инструменты для взаимодействия с серверными (RESTful) источниками данных.
• Все, что вам нужно для тестирования: средства для модульного тестирование, end-to-end тестирования, mock-и.
• Шаблон типового приложения, включающего в себя структуру каталогов и тестовые скрипты.

AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.

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

Что должно получиться

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

Демонстрация

В последнее время вебмастера используют семантическую микроразметку все чаще: по нашим данным, сейчас 10% страниц рунета размечены, и это число постоянно растет. А вслед за популярностью микроразметки растет и потребность вебмастеров в дополнительных ее видах. И не только тех, которые поддерживает Яндекс. Именно поэтому мы решили сделать валидатор микроразметки в Яндекс.Вебмастере универсальным. Для начала мы научили его проверять корректность всех типов разметки Schema.org и microdata.

Пример валидации разметки Product (Schema.org):

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

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.

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

Привет всем!

Хочу представить вам Карту Интернета или результат кластеризации более чем 350 тысяч сайтов в соответствии с переходами пользователей между ними. Размер круга определяется посещаемостью сайта, цвет – национальной принадлежностью, а положение на карте – его связями с другими сайтами. Если два сайта имеют стабильный поток пользователей между ними, то они будут «стараться» расположиться ближе друг к другу. После завершения работы алгоритма, на карте можно наблюдать скопления сайтов (кластеры) объединенные общими пользователями.



Например, если ввести в поиск habrahabr.ru, то можно увидеть, что dirty.ru и leprosorium.ru в том же «созвездии», а еще подальше livejournal.ru. Это говорит о том, что тот, кто сейчас читает этот текст, также с высокой вероятностью посещает эти сайты (относительно усредненного пользователя Рунета конечно).

Еще более интересный пример кластеризации можно увидеть внизу карты, между фиолетовой Японией и желтоватой Бразилией: там расположилась целая порнострана по размерам сопоставимая со всем Евронетом. Интересно, что будучи достаточно компетентным в рассматриваемом вопросе, внутри большого порнокластера можно различить тематические подкластеры меньшего размера.

Тем, кого интересует краткое техническое описание – добро пожаловать под кат

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

О неточностях, опечатках, ошибках пишите в личку — буду оперативно исправлять.

Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Релиз вышел совсем недавно, автор Ben «Cowboy» Alman, проект есть на github. В этой статье я рассмотрю основы Grunt, его установку и использование.

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



Понять последних можно, ведь большинство статей и agile-евангелистов говорят, примерно следующее: «Делайте так, как говорит методология, и ваш проект попадёт в рай. Если нарушите хотя бы одну из практик, то Agile покарает вас»

Я не умею программировать на объектно-ориентированных языках. Не научился. После 5 лет промышленного программирования на Java я всё ещё не знаю, как создать хорошую систему в объектно-ориентированном стиле. Просто не понимаю.

Я пытался научиться, честно. Я изучал паттерны, читал код open source проектов, пытался строить в голове стройные концепции, но так и не понял принципы создания качественных объектно-ориентированных программ. Возможно кто-то другой их понял, но не я.

И вот несколько вещей, которые вызывают у меня непонимание.

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

NounProject — лучшая и наибольшая коллекция SVG картинок

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

Codebeautifier — кроссбраузерная подготовка CSS файлов c уменьшением веса самого CSS файла.

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

Iterm2 — лучшая консоль для mac OS и замена страндартному терминалу.

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

Spritebaker — кодирует изображения и шрифты в base64 для последующей возможной вставки в CSS, что увеличивает скорость загрузки

Web developer — плагин для Firefox дающее множество возможностей.

Например, смотреть/вносить/редактировать куки, просматривать топографию для симметрии, инфо по картинкам и прочее.

ColorZilla — плагин для firefox позволяющий кликнуть мышкой на любой точке экрана и получить код цвета.

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

DataUrl — генерирует код из изображения.

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

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