• Roundabout — фреймворк для создания карусели на основе JQuery

    Совсем недавно я начал изучать JavaScript, затем JQuery, и теперь потихоньку перехожу к плагинам и фреймворкам построенным на основе вышеупомянутых технологий. Параллельно с изучением JS верстаю небольшие сайты-визитки, и вот у меня возникла необходимость сделать “карусель” из картинок. Оказалось, есть уже готовые решения, и об одном из них я хочу вам рассказать. Данная статья является выдержками с оригинального сайта фреймворка RounAbout.
    Читать дальше →
  • Жонглирование. Теория. Практика

      Настороженно отношусь к непрофильным топикам, но решил написать этот по следующим причинам:
      • У жонглирования есть своя теория — стройная и математически привлекательная!
      • Мы живем не только работой. Жонглирование — отличное развлечение и разминка после долгого сидения за компом.
      • В пятницу приятно немного расслабиться и почитать не очень серьезные статьи. К тому же, будет чем заняться на выходные, особенно если у вас не было определенных планов.

      Теория


      Утверждать, что жонглирование — это последовательность бросков, все равно, что сказать, что музыка — это просто последовательность нот. Нельзя назвать это неправдой, но любой, хоть немного знакомый с музыкальной теорией, возмутится последним определением — столь поверхностным и недалеким.
      Читать дальше →
    • Первая бета Phalcon 1.0.0

        Сегодня группа разработчиков Phalcon выпустила первую бета-версию фреймворка Phalcon 1.0.0. Для тех, кто не в курсе: Phalcon — это PHP-фреймворк, написанный на Си и работающий как расширение для PHP, прочитать про него на Хабре можно в статьях Phalcon — скомпилированный PHP MVC Framework и Phalcon: Давайте учиться на примере.
        Цель выпуска этой версии — получение обратной связи от сообщества и обнаружение максимума ошибок.



        Краткий анонс важных нововведений этой версии:
        1. Многоуровневое кеширование
        2. Улучшения в шаблонизаторе Volt
        3. Горизонтальный и вертикальный шардинг
        4. Запись состояния (Record Snapshots)
        5. Динамическое обновление
        6. Валидация

        Читать дальше →
      • Загадка выпадающего списка «Амазона»

          Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



          Запаздывание необходимо не только для того, чтобы сберечь ресурсы машины пользователя, но и по соображениям юзабилити: если не добавить задержку, то переводить курсор мыши на выпавшее подменю будет неудобно, придётся вести его сначала горизонтально в меню, не задевая другие пункты, и лишь после выбирать нужный подпункт.
          Читать дальше →
        • Произвольный вид поля file в html-форме, одинаковый во всех браузерах

            Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
            Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

            Как по умолчанию выглядит это поле?

            Читать дальше →
          • Европейцы и европейские языки: переводить или не переводить?

            • Translation
            Европа известна своим языковым разнообразием: в этой части света говорят на 23 официальных языках и более чем на 60 региональных языках коренного населения. К тому же согласно полному докладу Европейской комиссии от 2012 года «Европейцы и европейские языки» множество мигрантов, приехавших в Европу, разговаривают на своих родных языках.

            Как же при наличии такой пестрой языковой среды решить, насколько целесообразным будет перевод?

            Недавно компания TNS, которая проводит исследования общественного мнения и социальных сетей в 27 государствах Европейского союза, подготовила отчет о том, как европейцы используют и воспринимают языки. И мне хотелось бы ознакомить вас с несколькими самыми интересными выводами, сделанными в этом документе.
            Читать дальше →
          • От JQuery до Backbone

            imageВ данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.
            Читать дальше →
          • Ext JS 4 Grid «на пальцах»

            Добрый день, уважаемые хабрапользователи.

            С недавних пор я занимаюсь разработкой на Ext JS 4 и Zend framework 2.

            Пользуясь случаем, хотелось бы создать небольшую серию статей, «на пальцах» освещаюшую некоторые основные компоненты Ext JS 4, без которых не обойдется ни одно приложение на Ext JS (простите, серия,- громко сказано,- пишу из песочницы).

            Итак, Grid, часть 1.

            Читать дальше →
          • Meteor — Node.js для гуманитариев

            Введение


            На хабре уже несколько раз упоминали о проекте Meteor, основанном в 2011 году семерыми энтузиастами web-технологий из Сан-Франциско. По сути Meteor является просто надстройкой над node.js, который сам ещё даже не дошёл до релизной версии. Тем не менее проект собрал более семи тысяч подписчиков на github и получил 11 миллионов долларов инвестиций.
            С чего такая популярность? Дело в заявлении авторов о том, что они хотят кардинально переосмыслить способ написания современных web-приложений в сторону его упрощения. Не секрет, что написание кода на чистом node.js довольно сильно выворачивает мозг и вынуждает использовать различные костыли image в виде control flow средств. На Meteor, говорят авторы, писать крутые приложения сможет даже гуманитарий.
            Ну что же, проверим. Имеется: 1 гуманитарий-социолог, закрывший сессию и желающий после Парсонса и Зиммеля перейти на что-нибудь полегче, компьютер с Ubuntu 12.10 и установленный node.js (не спрашивайте, как он оказался у социолога).

            Вдохновимся обещаниями разработчиков, прекрасной девушкой-членом команды и начнём.
            Подробности
          • MVC система в Zend Framework 2

            Здравствуйте дорогие хабражители.
            Совсем недавно вышел в свет Zend Framework 2. Однако его изучение у многих усложняет отсутствие русской документации и единого сообщества. Так же во второй ветке этого фреймворка появилось множество нововведений и плюшек, про который обычный PHP программист раньше даже не слышал. Но их можно изучить особо не потея. А вот понять, как работает ZF2 без понимания логики работы его MVC системы достаточно затруднительно. Поэтому решил сделать перевод с официального сайта именно этого раздела.И так приступим.

            MVC в Zend Framework 2



            Zend\Mvc представляет собой совершено новую реализацию MVC системы для Zend Framework 2. Основное внимание было уделено производительности и гибкости.

            Слой MVC построен на основе следующих компонентов:

            1. Zend\ServiceManager — Zend Framework предоставляет набор различных сервисов, определенных в Zend\Mvc\Service. ServiceManager создает и настраивает экземпляр вашего приложения и рабочего процесса.
            2. Zend\EventManager – MVC является событиями. Данный компонент используется повсеместно. Для начальной загрузки приложения, возврата ответов (response) и запросов (request), настройки и получения маршрутов (routes), а так же для обработки (render) скриптов вида (views).
            3. Zend\Http – особый объект запросов (request) и ответов (response). Используется с Zend\Stdlib\DispatchableInterface. Все контроллеры представляют собой объекты «dispatch».

            В MVC слое используются следующие вспомогательные компоненты:

            1. Zend\Mvc\Router – содержит классы, обеспечивающие маршрутизацию запросов. Другими словами, перенаправляет запросы к нужным контроллерам.
            2. Zend\Http\PhpEnvironment – предоставляет набор декораторов объектов HTTP запросов и ответов, обеспечивающих инъекцию запросов в текущую среду (включая GET и POST параметры, HTTP заголовки).
            3. Zend\Mvc\Controller – набор абстрактных классов контроллеров с базовой функциональностью, такой как создание событий, диспетчеризацией действий и т.д.
            4. Zend\Mvc\Service – набор ServiceManager фабрик и определений по умолчанию для различных процессов приложения.
            5. Zend\Mvc\View – предоставляет стандартные возможности визуализации скриптов вида, регистрации помощников и многое другое. Так же предоставляет различные слушатели, которые «связывают» рабочий процесс MVC, обеспечивая такие функции, как автоматическое разрешение имен шаблонов, автоматическое создание модели вида и инъекций, т.д.

            Читать дальше →
            • +5
            • 30.9k
            • 5
          • В поисках идеального css-фреймворка. Требования, реализация, maxmertkit



              Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.
              Требования и реализация
            • Suit Up! Простой и легкий WYSIWYG

              • Tutorial


              Статья делится на три части:
              UPD Критика


              Вступление


              Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».

              Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

              Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.


              Простейший редактор


              Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:
              <div contenteditable></div>
              

              Редактор готов!
              Читать дальше →
            • Ключевое отличие AngularJS от Knockout

                imageЗа последнее время я несколько раз успел поучаствовать в дискуссиях о том, чем Angular лучше или хуже Knockout и других JS-фреймворков. И очень часто я сталкивался с тем, что есть некоторое непонимание сути различий в подходах, заложенных в эти продукты. Иногда дело доходило даже до того, что в качестве преимущества Knockout приводились валидные по умолчанию префиксы «data-», что ну просто совсем смешно (не говоря уж о том, что их можно использовать и в Angular).

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

                1. Модульная организация кода, тестируемость и жестокая война с любыми глобальными данными.
                2. Пропаганда декларативного подхода через создание собственных HTML-директив.
                3. Механизм проверки изменения данных в дата-биндинге без использования коллбэков.

                И третий пункт мне здесь видится наиболее сложным для понимания. Поговорим именно о нем.
                Читать дальше →
              • Вебсокеты: боевое применение

                  imageВебсокеты — это прогрессивный стандарт полнодуплексной (двусторонней) связи с сервером по TCP-соединению, совместимый с HTTP. Он позволяет организовывать живой обмен сообщениями между браузером и веб-сервером в реальном времени, причем совершенно иным способом, нежели привычная схема «запрос URL — ответ». Когда два года назад я присматривался к этому стандарту, он был еще в зачаточном состоянии. Существовал лишь неутвержденный набросок черновика и экспериментальная поддержка некоторыми браузерами и веб-серверами, причем в Файрфоксе он был по умолчанию отключен из-за проблем с безопасностью. Однако теперь ситуация изменилась. Стандарт приобрел несколько ревизий (в том числе без обратной совместимости), получил статус RFC (6455) и избавился от детских болезней. Во всех современных браузерах, включая IE10, заявлена поддержка одной из версий протокола, и есть вполне готовые к промышленному использованию веб-серверы.

                  Я решил, что настало время попробовать это на живом проекте. И теперь делюсь, что из этого вышло.
                  Что вышло
                • Обработка асинхронных ошибок с сохранением контекста запроса в connect/express

                    Те, кому приходилось разрабатывать более-менее большие web-проекты на node.js, наверняка сталкивались с проблемой обработки ошибок, произошедших внутри асинхронных вызовов. Эта проблема обычно всплывает далеко не сразу, а когда у вас уже есть много написанного кода, который делает нечто большее, чем выводит «Hello, World!».

                    Суть проблемы

                    Читать дальше →
                  • Ruby на вашем сервере может работать в 2 раза медленее из-за RVM


                      Просматривая сегодня «Ruby Inside», наткнулся на статью Justin Kulesza Is Your Application Running with Ruby – Slow?. Статья от 6 ноября, но на Хабре об этой ситуации ни слова. А суть статьи вот в чем: ребята переносили свое приложение с сервера на Solaris на сервер с Ubuntu и использовали RVM для компиляции Ruby. Однако после переноса они заметили, что приложение стало как-будто бы тормознутее. Сначала погрешили на железо, но быстро выяснили, что дело в RVM, а именно в том, что RVM совершенно не использует оптимизацию при компиляции.
                      Читать дальше →
                    • Сайт для программиста [на Node.js]. Просто. Стильно. Бесплатно

                      • Tutorial

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

                      Меня аккаунт Вконтакте, и даже в Фейсбуке в качестве своего сайта не устраивает. Слишком много лишнего, навязанный формат и прочие неудобства.

                      Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.

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

                      Некоторые знания HTML и JS вам пригодятся. Опыт работы с Node.js не обязателен.

                      Читать дальше →
                    • Загрузка файлов на сервер в 2012 году

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

                        Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

                        Читать дальше →
                      • SteelToe — object, не стреляй мне в ногу!

                        • Tutorial
                        SteelToe — небольшой javascript сниппет, призванный решить проблему доступа к неопределенным свойствам объекта. Это особенно важно при обращении ко вложенным свойствам. В нем также реализована возможность автовивификации, что порядком упрощает создание нужных свойств. В общем — довольно полезный сахар в OOP.
                        Читать дальше →