Несколько интересностей и полезностей для веб-разработчика #33

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

    Walkway.js и Vivus.js




    Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus. Обе библиотеки максимально просты в использовании и применимы только для path элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset. Хоть и у Walkway значительно больше звезд на Гитхабе, зато Vivus предоставляет несколько вариантов отрисовки: Delayed, Async и OneByOne.

    //Walkway
    var svg = new Walkway('#test');
    
    svg.draw(function() {
      console.log('Animation finished');
    });
    
    //Vivus
    new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);
    


    Interact.js
    Потрясающая библиотека для работы с тяни-бросай, ресайзом и жестами. Мега круто еще то, что Interact позволяет таскать SVG и ключевые точки в SVG объектах. Работает во всех современных браузерах: Chrome, Firefox, Opera и Internet Explorer 8+ и поддерживает мобильные устройства. Не зависит от сторонник библиотек. Мощный API и событийная модель. Компактное решение на замену объемных jQuery + jQuery UI.

    var // x and y to keep the position that's been dragged to
        x = 0,
        y = 0,
        // vendor prefixes (prefices?)
        transformProp = 'transform' in document.body.style?
                    'transform': 'webkitTransform' in document.body.style?
                        'webkitTransform': 'mozTransform' in document.body.style?
                            'mozTransform': 'oTransform' in document.body.style?
                                'oTransform': 'msTransform';
    
    // make an Interactable of the document body element
    interact(document.body)
        // make a draggable of the Interactable
        .draggable({
            // on(drag)move
            // could also have done interact(document.body).draggable(true).ondragmove = function...
            onmove: function (event) {
                x += event.dx;
                y += event.dy;
    
                // translate the document body by the change in pointer position
                document.body.style[transformProp] = 'translate(' + x + 'px, ' + y + 'px)';
            }
        })
        // you should really add listeners like this if you want to add multiple listeners
        .on('dragend', function (event) {
            console.log('dragged a distance of ' + 
                Math.sqrt(event.dx*event.dx + event.dy*event.dy) + 
                ' pixels to ' + event.pageX + ', ' + event.pageY);
        })
        // allow inertia throwing
        .inertia({
            resistance: 15,
            zeroResumeDelta: true
        });
        // snap to the corners of the specified grid
        .snap({
            mode: 'grid',
            grid: {
                x: 100,
                y: 5
            },
            gridOffset: {
                x: 20,
                y: 10
            },
            range: Infinity // can also use -1 which gets changed to Infinity
        });
    
    
    // you can also listen to InteractEvents for every Interactable
    interact.on('dragstart', function (event) {
        console.log('starting drag from ' + event.x0 + ', ' + event.y0);
    });
    


    Materialize и Material UI



    Недавно мне повстречались два самодостаточных фреймворка, где все элементы и эффекты наследуют стилистку популярного Google Material Design. Materialize более богат различными интерфейсными решениями, а Material UI представляет из себя набор React компонентов.

    450 lines language implementation


    Вы помните трендовую неделю ненормального программирования на Хабре год назад? Крошечная змейка на JavaScript (30 строк кода), Крошечный Excel на чистом JavaScript (30 строк кода) (и даже 5 строк от Дэвида Блейна), Tetris , Арканоид, Гоночка, Пианино, Roguelike/RPG, Сокобан, Ханойская башня, Крестики нолики, Пятнашки, Сапер (1 и 2), Цветовая пипетка на JS, 399 символов (не строк), Генерация лабиринтов алгоритмом Эйлера, Игра в 30 команд Ассемблера, Minecraft на C# (19 строк кода), Рисовалка под Windows на C++ (30+ строк кода) и моя любимая хитрость Игра в 0 строк кода на чистом JS. Пример своего языка программирования за 450 строк — не плохое дополнение к этой подборке.

    Particles.js



    Простая библиотека для создания «живых частиц». Имеет целый ряд различных опций и позволит вам сотворить приятное украшение для вашего фона. Хочу также поделиться другими библиотеками для генерации различных объектов: Seen.js, Trianglify и Triangles.

    particlesJS('particles-js', {
      particles: {
        color: '#fff',
        shape: 'circle', // "circle", "edge" or "triangle"
        opacity: 1,
        size: 4,
        size_random: true,
        nb: 150,
        line_linked: {
          enable_auto: true,
          distance: 100,
          color: '#fff',
          opacity: 1,
          width: 1,
          condensed_mode: {
            enable: false,
            rotateX: 600,
            rotateY: 600
          }
        },
        anim: {
          enable: true,
          speed: 1
        }
      },
      interactivity: {
        enable: true,
        mouse: {
          distance: 250
        },
        detect_on: 'canvas', // "canvas" or "window"
        mode: 'grab',
        line_linked: {
          opacity: .5
        },
        events: {
          onclick: {
            enable: true,
            mode: 'push', // "push" or "remove" (particles)
            nb: 4
          }
        }
      },
      /* Retina Display Support */
      retina_detect: true
    });
    


    Firefox Developer Edition




    Западные мысли или что стоило бы перевести на Хабре:




    Говорят и показывают отечественные ИТ ресурсы:




    Напоследок:


    • Screeps — первая стратегическая MMO-игра для программистов.

    • Twemoji — коллекция Unicode Emoji смайликов от Twitter.
    • SQL.js — SQLite теперь доступен в JavaScript.
    • PGweb.js — PostgreSQL в браузере.
    • Loki.js — embeddable / in-memory database.
    • Dashboards — отзывчивые шаблоны «приборных панелей» на Bootstrap.
    • Github Todos — конвертирует ваш ToDo список в GitHub Issues
    • Higgs — JavaScript Virtual Machine.
    • Raven — текстовый редактор с акцентом на типографику.
    • jQuery Autotab — настраиваем табуляцию для форм.
    • Deliver — простой деплой скриншотов, даты приложений и обновлений в App Store на Ruby.
    • Delve — дебаггер для Go.
    • Deis — Your PaaS. Your Rules.
    • Cockroachdb — Scalable, Geo-Replicated, Transactional Datastore для Go.
    • Home Assistant — библиотека для программирования умного дома на Python.
    • Nogotofail — network security testing tool.
    • Skype теперь доступен в браузере


                                                             Предыдущая подборка (Выпуск 32)

    Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.

    Спасибо всем за внимание.

    Only registered users can participate in poll. Log in, please.

    Понравилась ли Вам подборка?

    • 91.8%Да535
    • 8.2%Нет48

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 5

      +3
      Интересная штука с этой ММО
      0
      Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus.


      У нас на сайте уже более года используется такая фишка: mustlab.ru )))

      По отзывам некоторую степень WOW-эффекта она придает. Как минимум, по аналитике, люди стали дольше задерживаться на странице, а судя по веб-визору, некоторые даже «играются» с паралаксами и рисовалками )))

      ps. очень надеюсь что никто не сочтет это упоминание за рекламу, ибо рекламировать на хабре outsource-компанию смысла мало, тут все сами с усами)))
      • UFO just landed and posted this here
          +1
          Если нашли ошибки на сайте, будем очень признательны, если ткнете носом. Лучше в личку)) Спасибо за положительный отзыв, приятно))

      Only users with full accounts can post comments. Log in, please.