• Создаём проект c OAuth и NoSQL за $0,00

      Уже очень давно мне хотелось попробовать создать проект, который бы представлял собой настоящие JavaScript Application, а именно толстый клиент, без backend и своего хостинга, на основе open source и какого-нибудь BaaS/DaaS. К тому же я окончательно устал от jsperf.com, от этих бессмысленных двух шагов, от отсутствия хоть какого-то редактора кода и нормального поиска и от постоянной потери своих тестов, а история с капчой, которая не всегда срабатывает, окончательно добила меня. Я наконец выкроил время, чтобы осуществить давно задуманное и убить двух зайцев, реализовав альтернативу jsperf.


      Читать дальше →
    • Самые нужные плагины для Gulp



        Это пост можно сказать является дубликатом моей предыдущей подборки “Самые нужные плагины для Grunt”. Дело в том, что спустя много часов поиска я не нашел крутых плагинов для Gulp, которых нет для Grunt за исключением пары весьма специфичных утилит. Всё как раз наоборот, но проигнорировать множество пользователей Gulp я не мог. Все недостающие плагины я выделил, потому что Gulp умеет использовать их из Grunt, как и Grunt из Gulp.

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

        У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Gulp. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Gulp найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

        А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.
        Читать дальше →
      • Статичный хостинг: жизнь после смерти narod.ru

              В один прекрасный день я обнаружил, что narod.ru, наше все в области истории рунета и неисчерпаемый кладезь вырвиглазных сайтов, продался! Ucoz купил его. Невелика беда, подумал я, после того как перерегистрировал все свои старые сайты под ucoz и на время забыл о проблеме. Но вот недавно узнав о существовании изобилия генераторов статических сайтов я принял решение сделать еще один сайт ни о чем. Какого же было мое удивление, когда выяснилось, что Ucoz.ru более не поддерживает загрузку файлов html, обрекая вас использовать его конструктор сайтов помимо воли.

              Конечно, можно купить хостинг за пару долларов в месяц, можно найти бесплатный хостинг с perl, php и mysql. Можно даже идти в ногу с достижениями времени и воспользоваться heroku или google app engine, получив в нагрузку еще и поддержку передовых языков программирования. Но все это не то. Нет души. Разве может сравниться ламповая закачка обновлений по FTP с бездушной публикацией нажатием одной кнопки в Wordpress? Не может. Именно поэтому давайте посмотрим где и как сегодня можно сделать статический сайт.
          Читать дальше →
        • Вот что будет, если установить топ-10 программ с Download.com



          Мы установили десять самых популярных программ с Download.com, и вы не поверите, что произошло! Впрочем, наверное, вы и сами можете догадаться: что-то ужасное. Что-то ужасное — вот что произошло. Присоединяйтесь к нашему веселью!

          Уже не первый год мы сетуем на то, что нельзя спокойно порекомендовать скачать бесплатную программу, а недавно мы рассказали, как можно безопасно испытывать любое ПО при помощи виртуальной машины. И мы подумали: а почему бы не повеселиться и не посмотреть, что же, в самом деле, произойдёт, если скачивать программы как обычный ничего не подозревающий пользователь?

          Ради эксперимента мы будем просто прощёлкивать все экраны установки с настройками по умолчанию на чистой виртуальной машине. Мы установим десять приложений из списка самых популярных загрузок. И предположим, что наш персонаж — рядовой пользователь.
          Читать дальше →
        • 58 признаков хорошего интерфейса

          • Translation
          У хорошего интерфейса пользователя высокая конверсия и его просто использовать. То есть, он хорош и для бизнеса, и для использующих его людей. Вот список опробованных нами идей.

          1 Один столбец вместо нескольких


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

          image
          Читать дальше →
        • Как купить золото?

            Пенсия для ITшника.
            Тут нужно было бы писать «а что делать в старости?», «на государство недёжи никакой», «в наше время каждый должен...» и прочее бла-бла-бла и би-би-би. Но мне лень, потому — сразу к делу.

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

            А еще?
            А еще золото двигается в противофазе с рынком акций. То есть, когда в экономике тайфун — все инвесторы бегут в золото, как самый надежный актив. Ну и наоборот, естественно… Это делает золото идеальным инструментом для построения «портфеля простака».
            Читать дальше →
          • Обзор курьерских служб для интернет-магазина — 2

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

              Для написания первой статьи я посещал сайты компаний и собирал информацию оттуда. В этот раз я решил пойти другим путем и дать самим компаниям возможность рассказать о себе. К сожалению, попытка провалилась — ответило только 4 компании из 15. Честь им и хвала — Навигатор-Курьер, Аксиомус, О-Курьер, ЮниЭкспресс .
              Читать дальше →
            • Несколько интересностей и полезностей для веб-разработчика #29

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

                HumHub



                Открытая социальная сеть, построенная на Yii — достойный аналог Diaspora. Разработчики вообще говорят, что это фреймворк, который предоставляет инструменты для лёгкой и продуктивной командной работы. Гибкая модульная система и ряд плагинов: заметки, таск-менеджер, календарь, голосование, рассылки и др. Еще HumHub — это очень красиво. Клевый современный интерфейс, асинхронность, всплывающие подсказки и прочие детали.

                Читать дальше →
              • Ruby и криптоалгоритмы ГОСТ

                • Tutorial
                Логотип Ruby и суровый ГОСТовый навесной замокВ жизни далеко не каждого разработчика наступает момент, когда приходится взаимодействовать с государственными системами. И немногим из них приходится взаимодействовать именно с российскими государственными системами. И так уж сложились звёзды, что я оказался одним из этих «счастливчиков».

                Особенность российского государева ИТ в том, что везде, где нужно обеспечить безопасность (шифрование) и целостность (подпись) информации, необходимо использовать только отечественные криптоалгоритмы (которые стандартизованы и описаны в добром десятке ГОСТов и RFC). Это весьма логично с точки зрения национальной безопасности, но весьма больно с точки зрения разработки на не самом популярном языке (это джависты вон обласканы вниманием со всех сторон).

                И вот, когда встала перед нами задача весьма плотного обмена сообщениями с ГОСТовой электронной подписью с одной из таких систем, то предложенный вариант решения в виде сетевого SOAP-сервиса, подписывающего запросы (и ответы) мне не понравился от слова «совсем» (оборачивать SOAP в SOAP — это какой-то кошмар в квадрате). Наступили длинные майские выходные, а когда они закончились — у меня было решение получше…
                Что же это за решение?
              • Двухпанельный веб-файл менеджер Cloud Commander

                  Файловых менеджеров много, но есть один, о котором, думаю, будет многим интересно узнать. Ведь он двухпанельный, работает в браузере, оснащён редактором (с подсветкой синтаксиса) и консолью, состоит из клиента и сервера, а написан на JavaScript/Node.js.



                  Читать дальше
                • Несколько интересностей и полезностей для веб-разработчика (выпуск 6)

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

                    Zephir — Ze(nd Engine) Ph(p) I(nt)r(mediate). Зефир — это компилируемый высокоуровневый язык программирования, предназначенный для написания PHP расширений без использования C. Проект от создателей Phalcon (скомпилированный PHP MVC Framework). О Zephir на Sitepoint
                       

                    JSDB.IO — большая и качественная база нужных скриптов/библиотек/фреймворков на JavaScript. Все распределено по категориям: Animation, Application, Audio, Video, Games и др. Дабы собрать все популярные .js воедино добавлю еще три ссылки: Microjs (множество маленьких полезностей до 5кб), а еще jsdelivr и cdnjs, которые позволяют добавлять собственные скрипты.

                    Snap.svg — продукт от Adobe Webplatform. Недавно я рассказывал про "достойного конкурента Raphaël" и в комментариях оспоривали эту фразу из за отсутствия поддержки такого же множества браузеров. В разработке Snap участвует автор Raphaël — Дмитрий Барановский, а причина создания новой библиотеки для работы с SVG — невозможность поддерживать все возможности SVG в старых браузерах.

                    At.js — очень юзабельный скрипт для автозаполнения (в демо используется Emojify). А еще есть более функциональная библиотека для автозаполнения — Typehead от Twitter.
                    $('.atwho-inputor').atwho({
                      at: "@", data: ["one", "two", "three"],
                    });
                    

                    Читать дальше →
                    • +40
                    • 28.3k
                    • 9
                  • Несколько интересностей и полезностей для веб-разработчика (выпуск 5)

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

                      Stackedit



                      Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт.


                      App.io позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк для создания анимаций в UIKit от IFTTT.

                      Читать дальше →
                    • Yaxy — proxy-сервер для веб-разработчика

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

                        Под катом 9 примеров использования Yaxy
                      • Хранилище фотографий Topface теперь open source

                          У нас неплохо получается хранить фотографии, поэтому мы решили упростить жизнь и вам, если вы хотите соорудить свой tumblr, facebook или imgur. Дело на самом деле нехитрое, но есть тонкости, о которых лучше знать заранее. К тому же мы сделали всё на node.js, что не слишком характерно для хранилища с более чем 100 000 000 фотографий.

                          image
                          Обо всём по порядку
                        • Основы профессиональной верстки электронных писем

                          Верстка электронных писем
                          Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

                          Что нужно знать в начале?


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

                          1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
                          2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.


                          Каркас


                          Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

                          В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:
                          Шаблон письма для рассылки
                          Читать дальше →
                        • oEmbed. Делаешь веб-сервис? — Делай и oEmbed



                            Конечно вы видели этот эффект, когда вставляешь в фейсбуке или вконтакте ссылку, и в посте тут же начинает подгружаться какой-то контент с сайта, на который ведет ссылка. И я видел, но даже не представлял, насколько это легко можно сделать с oEmbed'ом.

                            oEmbed.com — впринципе, на этом можно было бы и закончить читать тем, кто хочет провести самостоятельное мини-исследование.
                            Но вот мой рассказ, как этим пользоваться и много ссылок
                          • 7 простых способов протестировать кроссбраузерную совместимость

                            • Translation
                            Эта статья предназначена для дизайнеров, верстальщиков, разработчиков и всех остальных людей, бьющихся с тестированием сайтов в нескольких браузерах.

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

                            В этой статье, мы рассмотрим 7 простых инструментов для тестирования кроссбраузерной совместимости; инструментов, которые справляются со своей задачей очень легко, и к тому же, каждый из этих инструментов можно использовать бесплатно.
                            Читать дальше →
                          • Typeface.js — не текст, а картинка (JavaScript + SVG/VML).

                              Достаточно часто случается так, что для оформления той или иной страницы требуется использование нестандартного шрифта. Если текст не генерируется динамически мы можем просто заготовить картинку с надписью. В противном же случае на помощь придет PHP c функцией imagettftext. Для выполнения же такой манипуляции на стороне клиента пригодится скрипт описанный в этой заметке.
                              Хочу знать как делаются такие делишки на стороне клиента.
                            • IE5+ и CSS3 — есть способ подружить!

                                Уверен, что найдутся на Хабре люди, которые уже знают о этом замечательном способе заставить «ненавистный» ИЕ понимать такие вещи, как min-width и ::after. Но лично я об этом способе не знал, и испытал настоящий восторг, когда наткнулся в сети на очень элегантное и эффективное на мой взгляд решение данной проблемы.
                                Читать дальше →
                              • Упрощаем разработку сайта с Site Helper

                                  Site Helper(SH) – тулза для помощи верстальщикам, а также хороший инструмент для общения верстальщик-программер-руководитель, а так же руководитель-клиент «не отходя от сайта» незаметно для обычных пользователей и в реальном режиме времени.

                                  Наверное, каждый, кто хотя бы разверстал пиксель в пиксель под каждый браузер, сталкивался с ситуацией, когда что-то едет, не совпадают высоты ширины блоков… ситуация знакомая.
                                  Тут может спасти PixelPerfect или сетка разметки на js или SH ;)

                                  Ещё очень распространенная ситуация, когда заказчик или тестер нашел баг и не может понятно объяснить, где он находится. Ну, или заказчик решил добавить блок баннеров и также не может внятно объяснить, что и куда.
                                  Читать дальше →