• Создание забавных и привлекательных анимаций простыми функциями Spine (внутри тяжёлые gif)

    • Перевод


    (Прим. пер.: 1. Spine — это проприетарный кроссплатформенный пакет для создания двухмерных скелетных анимаций с поддержкой различных игровых тулкитов.
    2. Осторожно, в посте есть около 38 МБ gif'ок, все они спрятаны под кат.)


    Как создать плавное переключение или поворот спрайтов?


    Создание плавного и естественного переключения и поворот спрайтов при работе со Spine или любым другим инструментом интерполяции анимации часто бывает трудной задачей. Оно может развалить порядок анимации и сделать окончательный результат дёргающимся или неуклюжим.

    Я обычно использую следующий подход: маскирую момент поворота или переключения с помощью деформаций, например, добавляю эффект упругости к анимации в течение ключевых кадров (увеличивая и уменьшая масштаб спрайта), когда выполняется поворот ассета или переключается спрайт.
    Читать дальше →
    • +28
    • 10,9k
    • 7
  • Ресайз картинок в браузере. Все может стать еще хуже

       


      Знакомьтесь, это Маня. Маню поразил страшный недуг и теперь она нуждается в вашей помощи. Маня росла обычной девочкой, жизнерадостным счастливым ребенком. Но чуть больше года назад врачи поставили ей страшный диагноз — алиазинг. И она стала выглядеть вот так.



      Как выяснилось, виной тому стала жадность и алчность производителей браузеров, которые решили сэкономить на алгоритмах ресайза изображений и применить самые низкокачественные фильтры. Тогда Маню удалось спасти — она прошла курс последовательных не кратных двум уменьшений, что снизило алиазинг и вернуло её былую резкость. Но теперь ей снова угрожает опасность.

      Читать дальше →
    • Ресайз картинок в браузере. Все очень плохо

        Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как холст (<canvas>). На него можно нанести изображение нужных размеров. Пять строчек кода и картинка готова:

        function resize(img, w, h) {
          var canvas = document.createElement('canvas');
          canvas.width = w;
          canvas.height = h;
          canvas.getContext('2d').drawImage(img, 0, 0, w, h);
          return canvas;
        }
        

        Из холста картинку можно сохранить в JPEG и, например, отправить на сервер. Можно было на этом закончить статью, но сперва давайте взглянем на результат. Если вы поставите рядом такой холст и обычный элемент <img>, в который загружена та же картинка (исходник, 4 Мб), то вы увидите разницу.

        img
        Читать дальше →
      • Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 1: письмо, идея, прототип

          image

          Началось так: мне написали из Envato, что они запускают раздел с шаблонами Скетча в Themeforest, а раз уж я такой идейный пользователь, то было бы неплохо, если бы я на открытие нарисовал шаблон какой-нибудь. Я, естественно, отказываться не стал.

          Шаблон получился вот такой.

          Дальше я опишу, что и как делал в процессе. Статья традиционно будет в нескольких частях.
          Читать дальше →
        • Интерполяция данных: соединяем точки так, чтобы было красиво

            Как построить график по n точкам? Самое простое — отметить их маркерами на координатной сетке. Однако для наглядности их хочется соединить, чтобы получить легко читаемую линию. Соединять точки проще всего отрезками прямых. Но график-ломаная читается довольно тяжело: взгляд цепляется за углы, а не скользит вдоль линии. Да и выглядят изломы не очень красиво. Получается, что кроме ломаных нужно уметь строить и кривые. Однако тут нужно быть осторожным, чтобы не получилось вот такого:

            Читать дальше →
          • ipgeobase в Nginx

              Когда возникает задача — по адресу посетителя получать его город и налоговый (автомобильный) код региона, кажется — да это же просто, в инете полно таких штук!
              А потом смотришь: одни платные, другие нельзя у себя развернуть, третьи можно, но это ресурсозатратно, четвертые о регионах РФ ничего не знают…
              И тут на помощь спешит больной мозг программиста с навязчивой идеей: «Нет у других — сделай сам»

              Читать дальше →
              • +22
              • 13,3k
              • 9
            • Мысли вслух о разработке javascript-приложений на примере небольшого Line Of Business фреймворка

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

              Не так давно мы сами себе поставили задачу — построить SPA-приложение. Сложное, большое, быстрое, с поддержкой множества устройств, без утечек памяти. К тому же, постоянно развивающееся, чтобы его было легко поддерживать. В общем, как мы и любим — всё и сразу.

              Тема SPA-приложений и javascript-приложений в целом не нова, но нам не удалось найти даже на платных ресурсах основательных руководств по разработке приложений. Они являются скорее рассказом о той или иной MV*-библиотеке, чем примером для подражания. При этом не рассматриваются примеры разбиения по слоям, построения иерархий наследования и тонкостей наследования в javascript и т.д.

              Мы попробуем зайти с другой стороны и описать, скорее, ход мыслей при разработке (с кодом и ссылками), чем какой-то конкретный инструмент. Начать мы вынуждены с уровня hello world, чтобы задать одну стартовую точку для читателей и писателя. Но уже со второго раздела повествование резко ускорится.

              Мы считаем, что данная статья будет полезна:

              1. Front-end разработчикам, у которых уже есть небольшой опыт, но хочется вырасти.
              2. Back-end разработчикам, которым в какой-то момент пришлось начать заниматься js-разработкой и которые чувствуют некую неуверенность при работе с javascript.
              3. Верстальщикам, которые начали заниматься js-разработкой и хотели бы прокачать свои навыки.



              Чтиво получилось весьма объемистым, но надеемся, что настолько же полезным.
              Читать дальше →
              • +5
              • 17,7k
              • 8
            • Жизнь разработчика (в картинках)

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

                Когда я показываю босу, что окончательно пофиксил баг



                Когда проджект-менеджер входит в офис



                Читать дальше →
              • 10 шагов для добавления сайта в Яндекс.Новости и Google News

                  Яндекс.Новости и Google News являются крупнейшими новостными агрегаторами в России. Так, по данным TNS Russia в июне 2009 года Яндекс.Новости в день посещало чуть более 1,1 миллиона человек. Представьте, какой трафик на сайт могут дать подобного рода системы. И в отличие от, например, News2 и Smi2, новости попадают туда автоматически. Причем, для Google News не нужно совершенно ничего делать — главное, чтобы ваш сайт индексировался Гуглом. Для Яндекса нужно делать полнотекстовый фид со некоторыми тонкостями.
                  Читать дальше →
                • Как веб-дизайн катится прямо в Ад

                    Забавный и весьма жизненный комикс Мэтью Иннмана «How a web design goes straight to Hell» уже несколько раз упоминался на Хабрахабре в разных топиках, и наверное многие хабралюди уже с ним знакомы. Мы с моей коллегой, Юлей Лисевич (у нее пока нет акаунта на Хабре) решили сделать его перевод на русский язык. Зачем? Те, кому ежедневно приходится сталкиваться с ситуациями, подобными описанным в комиксе, смогут показать его заказчикам. Возможно это поможет им найти общий язык. :) Итак…

                    Как веб-дизайн катится прямо в Ад
                    Читать дальше →