• Konva.js — HTML5 2d canvas framework

      image

      Приветствую. Представляю сообществу проект Konva.js.

      Konva.js — это фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий.

      Кратко список особенностей выглядит так:
      1. Объектное API
      2. Вложенные объекты и «всплытие» событий
      3. Поддержка нескольких слоёв (нескольких canvas элементов)
      4. Кэширование объектов
      5. Поддержка анимаций
      6. Настраиваемый drag&drop
      7. Фильтры
      8. Готовые к использованию объекты, включая прямоугольник, круг, изображение, текст, линия, SVG путь, ..
      9. Простое создание собственных фигур
      10. Событийная архитектура, которая позволяет разработчикам подписываться на события изменений аттрибутов, отрисовки, и так далее
      11. Сериализация и десериализация
      12. Продвинутый поиск с помощью селекторов stage.get('#foo') и layer.get('.bar')
      13. Десктоп и мобильные события
      14. Встроенная подержка HDPI устройств
      15. и еще много разного


      Далее подробней рассмотрим возможности фреймворка с примерами кода.
      Читать дальше →
    • Выразительный JavaScript: Рисование на холсте

      • Перевод

      Содержание




      Рисование — это обман.
      М.К.Эшер


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

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

      Есть две альтернативы. Первая – SVG, масштабируемая векторная графика, также основанная на DOM, но без участия HTML. SVG – диалект для описания документов, который концентрируется на формах, а не тексте. SVG можно встроить в HTML, или включить через тег .

      Вторая альтернатива – холст (canvas). Холст – это один элемент DOM, в котором находится картинка. Он предоставляет API для рисования форм на том месте, которое занимает элемент. Разница между холстом и SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форма на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.
      Читать дальше →
      • +33
      • 87,2k
      • 3
    • Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

        Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
        Вы заказчик. Как убедиться, что работа выполнена качественно?
        Как оценить качество вёрстки?

        Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

        Итак что же это за список?

        Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

        История обновлений:
        • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
        • 2015/08/10: актуализирован список исключений для CSSLint
        • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
        • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
        • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
        • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
        • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
        • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
        • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
        • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


        Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
      • Выразительный JavaScript: Модули

        • Перевод

        Содержание




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

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

        Мастер-программист знает, когда нужна структура, а когда нужно оставить вещи в простом виде. Его программы словно глина – твёрдые, но податливые.

        Мастер Юан-Ма, Книга программирования


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

        В случае больших программ отдельные функции уже теряются в коде, и нам необходима единица организации кода больших масштабов. Модули группируют программный код по каким-то определённым признакам. В этой главе мы рассмотрим преимущества такого деления и техники создания модулей в JavaScript.
        Читать дальше →
        • +28
        • 72,9k
        • 3
      • Выразительный JavaScript: Тайная жизнь объектов

        • Перевод

        Содержание




        Проблема объектно-ориентированных языков в том, что они тащат с собой всё своё неявное окружение. Вам нужен был банан – а вы получаете гориллу с бананом, и целые джунгли впридачу.

        Джо Армстронг, в интервью Coders at Work


        Термин «объект» в программировании сильно перегружен значениями. В моей профессии объекты – стиль жизни, тема священных войн и любимое заклинание, не теряющий своей магической силы.

        Стороннему человеку всё это непонятно. Начнём же с краткой истории объектов как концепции в программировании.
        Читать дальше →
        • +25
        • 75k
        • 4
      • Расписание выхода статей на Хабре (на любую неделю)

          Понедельник
          • Новости: ученые изобрели машину времени, вышел новый ноутбук толщиной 80 нанометров, Google покупает Microsoft, Facebook увольняет 1000 программистов.
          • Вылез стартап. Попиарился, лёг под хабраэффектом, встал, собрал замечания, поблагодарил, пропал навсегда.
          • Вышла новая версия третьего слева линукса. Качать срочно.
          • Я негодую — счет за телефон оператор округлил до кратности числу Пи.

          Вторник
          • Опровержение новостей: ученые изобрели всего-лишь более точные часы, 80 нанометров — это техпроцесс, а не толщина ноутбука, Google покупает какой-то стартап, который отказался купить Microsoft, Facebook набирает 5000 программистов.
          • Начало холивара, модного на этой неделе (чай vs кофе, бинокль vs подзорная труба, черное vs белое)
          • Очень важный технический ресурс (ЖЖ, порнолаб, Sony Network) взломан (заДДОСен, конфискован УБОПом). Паника и отчаяние.

          Читать дальше →
        • История системных требований Windows

          • Перевод
          Товарищи с CybernetNews не поленились и провели исследование хронологии системных требований «горячо любимой» ОС Windows. Задумаемся о масштабах развития техники, произошедшего за эти годы.

          Windows 1.0
          Windows 1.0 выпущена 20 ноября 1985.
          — Видеоадаптер CGA/Hercules/EGA (или совместимый)
          — MS-DOS 2.0
          — 256 KB Ram
          — 2 дисковода или жесткий диск
          Читать дальше →
        • В интернет выложено 17 Гб приватных фото из MySpace

            17-гигабайтный файл, содержащий более полумиллиона изображений, скачанных из личных профилей пользователей MySpace, появился в сети BitTorrent. На данный момент это может стать самым большим нарушением частной собственности в одной из наиболее известных социальных сетей.


            Читать дальше →
          • Параллакс на чистом CSS

            В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

            Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame. Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?
            Читать дальше →
          • О размере экрана, пикселя и элемента



            Привет, username. Свой первый пост я хочу посвятить актуальной проблеме, связанной с появлением большого количества новых форматов дисплеев и непрекращающейся гонкой за плотностью пикселей. В свете появления таких устройств, как очки дополненной реальности, смартчасов, 4к-мониторов и еще более широкого спектра планшетов и ноутбуков, возникает вопрос: какой размер графического элемента/текста следует считать оптимальным и в чем его измерять. Android-разработчики, несомненно, тут же воскликнут: «Да, конечно, в dp!». Но практика показывает, что дела обстоят несколько сложнее.
            Читать дальше →
          • Революция дата-байндинга с Object.Observe()

            • Перевод

            Введение


            Грядет революция. Появилось новое дополнение к JavaScript, которое изменит всё, что вы когда-либо знали о дата-байндинге. Помимо этого, изменится и подход ваших MVC библиотек к наблюдениям за редактированием и обновлением моделей. Вы готовы?

            Хорошо, хорошо. Не будем тянуть. Я рад вам представить Object.observe(), который появился в бета версии Chrome 36. [ТОЛПА ЛИКУЕТ]

            Object.observe() является частью следующего ECMAScript стандарта. Он позволяет асинхронно отслеживать изменения JavaScript объектов… без использования каких-либо сторонних библиотек, он позволяет наблюдателю отслеживать изменения состояния объекта во времени.
            Читать дальше →
          • Изучаем Three.js.Глава 2: Работа с основными компонентами, из которых состоитThree.js-сцена

            • Перевод
            • Tutorial
            Всем привет!
            В предыдущей главе мы познакомились с основами бибилиотекиThree.js. Увидели несколько примеров и создали свою первую полноценную Three.js сцену. В этой главе мы немного глубже углубимся в эту библиотеку и попробуем более подробно объяснить основные компоненты, составляющие Three.js сцену. В этой главе вы узнаете о следующем:
            1. какие компоненты используются в Three.js сцене
            2. что можно делать с объектом THREE.Scene()
            3. какая разница между ортогональной и перспективной камерами

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

            Становится все интересней и интересней...
            • +20
            • 36,7k
            • 9
          • Web Components — будущее Web

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

            — Sam Stephenson, создатель Prototype.js, You Are Not Your Code

            Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().

            Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаос под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
            Читать дальше →
          • CSS 3 Timing Functions и с чем их едят

            • Перевод


            Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!


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

            Полетели!
            • +71
            • 64,8k
            • 8
          • О применении $.Deferred в работе с асинхронными задачами

            Привет всем!

            В данной статье я хотел бы поделиться с вами соображениями о том, как на практике можно использовать механизм работы с асинхронными процессами, предоставляемый библиотекой jQuery с версии 1.5 под названием deferred, «отложенный» (jQuery.Deferred), а также со связанными объектами и методами.

            Разумеется, уже написан не один десяток статей на тему работы с парой deferred/promise. Своей же я задался целью предоставить такой набор знаний, который дал бы новичку, во-первых, возможность забыть о своих страхах перед непонятным и сложным и, во-вторых, сделать еще один шаг к написанию понятного и хорошо структурированного кода, работающего с асинхронными процессами. Я бы хотел сосредоточить свое и ваше внимание на проблемах, которые легко разрешаются ипользованием deferred, на предпосылках и типовых схемах использования этого объекта.
            Читать дальше →
            • +26
            • 19,9k
            • 6
          • User Timing API

            Это перевод статьи Alex Danilo о User Timing API, опубликованной 21 января 2014.

            Высокая производительность веб-приложений является решающей для достижения хорошего user experience. В то время, как веб-приложения становятся все более сложными, понимание влияния производительности жизненно небходимо для создания конкурентноспособного user experience. За последние несколько лет в браузерах появились различные API, позволяющие анализировать производительность сети, время загрузки и т.д., но они не предоставляют необходимую информацию с достаточной гибкостью для поиска проблем, которые замедляют приложение. Использование User Timing API предоставляет механизм, позволяющий определить какая часть вашего приложения является наиболее медленной. В этой статье будет показана работа с User Timing API и примеры его использования.
            Читать дальше →
            • +18
            • 11,9k
            • 5
          • Генерация деревьев на HTML5 Canvas

            • Tutorial
            Здравствуй Хабр!
            Сегодня я хочу рассказать о генерации деревьев на HTML5 Canvas с помощью JavaScript. Сразу поясню, что речь идет не о деревьях ссылок или B-дереьях, а о тех деревья, которые мы каждый день видим у себя за окном, тех, которые делают наш воздух чище и богаче кислородом, тех, что желтеют осенью и теряют листья зимой, вообщем о тех самых живых, лесных, настоящих деревьях, только нарисованных на Canvas и пойдет речь.


            Такие вот деревья получаются

            Генерация деревьев нужна была мне для моей игры. Но некаких адекватных алгоритмов мне найти так и не удалось. Поэтому я написал свой генератор…

            Читать дальше →
          • Getters & Setters в Javascript

              Много людей знают, что такое getter'ы и setter'ы во многих языках программирования. Есть эти чудесные штуки и в JavaScript, хоть узнал я об этом совсем недавно (темень я необразованная). Речь пойдёт не только и не столько про методы getSomeProperty()/setSomeProperty(...), а про более интересную реализацию — псевдо-аттрибуты, при изменении которых будут вызываться функции-обработчики.

              Дальше...
            • Введение в оптимизацию. Имитация отжига

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

              Для понимания статьи Вам понадобятся минимальные навыки программирования и владение математикой на уровне 9 класса средней школы. Статья рассчитана на людей не знакомых с методами оптимизации или только делающих первые шаги в этом направлении.

              image


              Читать дальше →