На днях, занимаясь очередным внедрением reCaptcha для одного из проектов, столкнувшись с небольшой проблемой в области отображения нескольких защитных изображений на 1 странице с помощью AJAX я в очередной раз пошел на страницу официальной документации «reCaptcha» и обнаружил, что документация существенно отличается от предыдущих версий.
Воспользовавшись поиском стало ясным — в мир вышла «recaptcha 2.0» с обновленным API и визуализацией а так же рядом других «плюшек», о чем я и расскажу в данной статье.

Доброго {{timeOfDay}}

Как-то затихла тема canvas-а на Хабре…

Давайте вспомним солнечную систему на нём (начало, LibCanvas, Fabric.js) и напишем ещё одну версию? Теперь на graphics2d.js.

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

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

Такое ограничение сразу приводит к вычеркиванию из списка методов оплаты заполнение квитанции в Сбербанке. Да, это тоже метод, но метод небыстрый. Особенно, если на дворе поздний вечер, пользователь расслабился за бутылкой пива чашкой чая. Какой Сбербанк, тёпленьким его брать, тёпленьким!

В нашем проекте мы постоянно меняем основной лендинг или создаем дополнительные лендинги для направлений нашего сервиса. Каждый раз стараемся найти лучший вариант представления нашего продукта. Но что менять, а что оставлять, не всегда понятно с первого взгляда. Поэтому мы перевели статью, в которой препарируются 20 лэндингов известных стартапов.

Это как собрать идеальную девушку из топ моделей или любимых актрис. Только про лэндинги.
Итак, запаситесь чашкой кофе, понеслась.

Update: Версия 2.0 здесь.

Немного лирики:

Лет пять назад у меня появилась мечта самому сделать домашний мини сервер. Изучив существующие на то время железки, я остановил свой выбор на материнской плате Intel D945GSEJT с процессором Atom N270. Корпуса, которые были в продаже для этой материнской платы мне совершенно не понравились, по этому я привинтил все это дело к картонке вместе с жестким диском, поставил Хакинтош и повесил за шкаф. Все это дело провисело пару лет, интенсивно качая и раздавая файлы и интернет по всей квартире.
Все бы хорошо, но быстродействия этого агрегата хватало только на дать и взять, никакой речи о проигрывании, или конвертировании HD видео, или помощи при тонировании 3D графики речи быть не могло. А хотелось бы.
Мысль сделать домашний мощный-мини-сервер заела меня окончательно в начале этого года. Просто спать по ночам не мог. И что бы избавиться от этой навязчивой идеи было решено:
1. Сделать не так как у всех
2. Сделать самый маленький Desktop из ныне существующих
3. Сделать проект не индивидуальным, а с учетом промышленных стандартов, а так же с обоснованием адекватной стоимости дальнейшего серийного производства.

Главным героем сегодняшнего обзора стал девайс, который использует все 4 отверстия моего монитора с максимальной, на мой взгляд, пользой. О каких отверстиях я говорю? )



Нет…топ? Неа )

14 повседневных применений FFmpeg.

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

Возможные решения.

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

1. Нарушается один из принципов SOLID, «код должен быть открыт для расширения, но закрыт для изменений», т.е. мы берем и ломаем уже отлаженный выпущенный в продакшн код для того, чтобы добавить новую функциональность, а это всегда вызывает шквал ошибок и как следствие недовольство пользователей и заказчика.
2. В одном и том же коде смешивается логика получения данных и кэширование, что приводит к распуханию классов и беспощадному повторению кода.
3. Сделав так, мы лишаемся возможности получить живые данные в обход кэша (следующим шагом будет добавление флага $nocache).
4. Очень высокая трудоёмкость впиливания кэширования таким способом и ещё большая трудоёмкость выпиливания его потом.

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

1. Смешивание логики.
2. Размеры классов растут ещё больше, чем в предыдущем способе.
3. Очень высокая трудоемкость (добавить 50 новых методов, в нашем примере) + заменить везде в приложении вызовы старых методов, на новые, а если в будущем придется кэширование выпиливать, то еще и повторить все действия назад.

Третий способ «кэширующий прокси», очень простое и быстрое решение, поражающее своим изяществом и скоростью внедрения. Как его сделать – смотрим код.

Меня зовут Денис Чистяков, и я руковожу группой разработки интерфейсов в Екатеринбурге. Мы занимаемся фронтендом: делаем множество сложных, ярких и красивых страниц для приложений Яндекса.

Два года назад мы запустили свою Школу разработки интерфейсов, в рамках которой пытаемся в максимально сжатый срок превратить веб-разработчиков в крутых веб-разработчиков, готовых к специфике нашей компании, нашей инфраструктуре и нашим технологиям. Этот год тоже не стал исключением. В 2014 году ШРИ пройдет в Екатеринбурге и Минске.

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

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



Мы понимаем, что часто желающие поучиться у нас выкраивают время между учебой, работой и семьей. А мы не обычная школа и не вуз, где нужно обязательное присутствие на уроках и парах. У нас есть уверенность, что те люди, которые попадают в ШРИ, обладают здоровым азартом, ответственны и понимают то, для чего они начали путь обучения. (Да-да, мы знаем, что вы крутые :)

Поэтому, обобщив все вышеперечисленное, мы решили, что теоретический материал учащиеся будут осваивать самостоятельно в удобное для них время. Но чтобы почувствовать вкус создания интерфейсов, мало много читать и смотреть. Нужно еще много практиковаться и кодить. Поэтому второй — очной — частью обучения будут практические занятия (которых, важно заметить, не было в прошлых ШРИ).

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

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

Требования были следующие:

• бесплатность для любой стороны;
• работа из браузера;
• возможность шарить экран;
• запись трансляции;
• простота в освоении (важно).

Бегло просмотрев несколько существующих сервисов, я понял, что все не нравится: почти все они не бесплатны; многие не работают прямо из браузера; нет бесплатной возможности записать вебинар.

Доброго дня, недавно я решал проблему притормаживания скролла на страницах Почты Mail.Ru. Особенно эта проблема была заметна на retina-дисплеях. После простого анализа я пришел к выводу, что одна из основных проблем — это медленная отрисовка страницы.

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

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

Зачем вам это?

• Если вы знаете как делать сайт, этот метод поможет вам убедить заказчика, почему вы предлагаете ему именно этот вариант.
• Если вы заказываете сайт, то сэкономите от 2 до 10 часов объяснений что вам нужно и зачем.
• Если вы стартапер, то вся ваша команда сможет участвовать в создании нового сайта или лэндинга. Тот самый случай, когда одна голова хорошо, а команда лучше.
• Если вы учите стартаперов, то сможете помочь им выглянуть из позиции «я знаю как надо» и без сопротивления подвести их к началам CusDev-a.

Примечание от нас:

Не так давно на Хабре встретился комментарий о том, что целевые страницы начинают себя изживать. Но как кажется нам, учитывая тенденции забугорного интернета, этот вывод немного преждевременен. LP переживают период бурного расцвета и считаются чуть ли не панацеей для электронной коммерции, как B2C, так и B2B формата.

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

Немного об источнике.

Visual Website Optimizer – компания, которая занимается анализом и оптимизацией сайтов. Основным направлением деятельности является A/B тестирование, в ходе которого осуществляется комплексный анализ различных сторон процесса конвертации и всех факторов, которые на него влияют. Компания имеет огромный опыт и приличную клиентскую базу, в которой замечены Microsoft, Logitec и даже российский ресурс Ichance.

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

Картинки кликабельны, открываются в текущей вкладке

Несмотря на небольшие размеры выборки, народное голосование решило, что второй выкладке с пятью макетами от VWO быть.

Вся дополнительная информация представлена в первой части.

Кроме того, UglyKid подсказал, что неплохо было бы сделать привязку макетов к товарным группам, но для этого нам понадобится немного больше времени. Если мы найдем соответствующую информацию — обязательно представим ее в третьей части.

Картинки кликабельны, открываются в текущей вкладке

* Надеюсь, ilusha_sergeevich не обвинит меня в плагиате.
Если что, пост переименую.

[Тут была картинка для привлечения внимания]

• donut.js — микро-библиотека, рисующая бубликовые (donut chart) и круговые диаграммы
• Балалайка
• Функция procrastinate
• Противный зловред
• Идея: mousedown вместо click
• Совет: меньше используйте CDN
• Редактор SuitUp и чистка WYSIWYG от мусора
• Простейший полифил для addEventListener
• Репорт об опечатках на сайте
• vanillatree — ванильная замена jstree
• Немного опросов

Всем привет! За время работы постепенно накапливаются наработки, которыми можно было бы поделиться с сообществом. Но ни одна из этих наработок не тянет на большой полноценный пост. Поэтому я собрал все мелочи, что вспомнил, в одной статье: несколько простых опен-сорц проектов, пара советов и находок. Каждый из предложенных скриптов в этой статье поставляется как есть, под лицензией WTFPL (кроме Балалайки). С радостью приму пулл реквесты с исправлением багов или изменениями в README.

donut.js — микро-библиотека, рисующая бубликовые (donut) и круговые диаграммы

Во время работы над очередным проектом, появилась задача нарисовать много информативных бубликов на карте мира, и не просто нарисовать, а еще и поддержать ИЕ8, который, как известно, не умет SVG, а только безобразный VML. Первое, что приходит в голову, это Raphael. Порывшись некоторое время, я нашел это решение. К сожалению, автор проявил изобретательность простым хаком: на круговой диаграмме (pie chart) он нарисовал белый круг. Это решение не подошло, так как дырка бублика должна быть прозрачной. Изучение возможности рисования при помощи Raphael таких диаграмм мне показалось чересчур трудоёмким. Остальные скрипты на просторах интернета мне так же не подошли. Пришлось писать свой костыль, взяв за основу математику рисования арок этого проекта. Арки для VML версии нарисованы используя элемент arc.

var myDonutDiv = donut(options);

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

Когда вы будете искать сотрудников, помните, что нанимаете скорее совладельца, нежели работника. Их уровень компетентности в каких-либо вопросах должен быть на голову выше вашего. В противном случае вы нанимаете себе проблему, которую придется вам решать самостоятельно и при этом расти будет очень сложно.

В странах СНГ не менее 75-80% заказов приходятся на cash-and-delivery (оплата заказа при доставке). Это отличие российского и западного потребителя легло в основу редизайна оформления заказа Сотмаркета еще в 2012 году. Тогда впервые в России интернет-магазин перестал требовать авторизации или регистрации клиента перед совершением покупки.

Фоновая регистрация и авторизация пользователей

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

Это наблюдение легло в основу концепции фоновой регистрации и авторизации пользователей.

Привет, Хабр!

В своё время, бороздя просторы интернета на предмет рационального использования API Вконтакте, я не смог найти чего-то вразумительного, единственные библиотеки, которые были найдены мной были реализованы без использования каких-либо общепринятых практик и без красивого кода. Я решил исправить, сложившееся недоразумение и написал свою библиотеку для работы с API Вконтакте.
Животрепещущие подробности и подходы под хабракатом.

В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.

Composer (getcomposer.org) — это относительно новый и уже достаточно популярный менеджер зависимостей для PHP. Вы можете описать от каких библиотек зависит ваш проект и Composer установит нужные библиотеки за вас! Причём Composer — это не менеджер пакетов в классическом понимании. Да, он оперирует с сущностями, которые мы будем называть «пакетами» или библиотеками, но устанавливаются они внутрь каждого проекта отдельно, а не глобально (это одно из основных отличий от старого-доброго PEAR).

Кратко, как это работает:

1. У вас есть проект, который зависит от нескольких библиотек.
2. Некоторые из этих библиотек зависят от других библиотек.
3. Вы описываете в своём проекте те библиотеки, от которых непосредственно зависит ваш код.
4. Composer находит нужные версии требуемых библиотек для всего проекта, скачивает их и устанавливает в папку вашего проекта.

При создании Composer авторы черпали идеи и вдохновение из аналогичных проектов: npm для Node.js и Bundler для Ruby.

Изначально он был спроектирован и разработан двумя людьми Nils Adermann и Jordi Boggiano, сейчас в проекте участвует более двадцати контрибьюторов, Проект написан на PHP 5.3, распространяется под лицензией MIT и доступен на github.

Первые коммиты были сделаны апреле 2011 года и на сегодняшний день Composer находится в стадии «alpha3». Однако, он уже достаточно стабилен и используется многими популярными PHP проектами (например, Symfony 2). Список проектов использующих Composer можно посмотреть на сайте packagist.org — это официальный репозиторий Composer пакетов. Кстати, на недавней конференции Devconf 2012 разработчик фреймворка Yii в своём докладе упомянул, что Yii2 скорее всего тоже будет использовать Composer.

В этой статье я кратко опишу основные возможности Composer и мы попробуем создать демонстрационный проект использующий Composer для загрузки необходимых библиотек. Все примеры будут доступны на github.com и bitbucket.org.