- PVSM.RU - https://www.pvsm.ru -

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

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

Walkway.js [1] и Vivus.js [2]

Несколько интересностей и полезностей для веб-разработчика #33 - 1
Вы видели этот великолепный лэндинг [3] посвященный анонсу 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 [4]
Потрясающая библиотека для работы с тяни-бросай, ресайзом и жестами. Мега круто еще то, что 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 [5] и Material UI [6]

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

450 lines language implementation [7]

Вы помните трендовую неделю ненормального программирования на Хабре год назад? Крошечная змейка на JavaScript (30 строк кода) [8], Крошечный Excel на чистом JavaScript (30 строк кода) [9] (и даже 5 строк от Дэвида Блейна [10]), Tetris [11], Арканоид [12], Гоночка [13], Пианино [14], Roguelike/RPG [15], Сокобан [16], Ханойская башня [17], Крестики нолики [18], Пятнашки [19], Сапер (1 [20] и 2 [21]), Цветовая пипетка на JS, 399 символов (не строк) [22], Генерация лабиринтов алгоритмом Эйлера [23], Игра в 30 команд Ассемблера [24], Minecraft на C# (19 строк кода) [25], Рисовалка под Windows на C++ (30+ строк кода) [26] и моя любимая хитрость Игра в 0 строк кода на чистом JS [27]. Пример своего языка программирования за 450 строк не плохое дополнение к этой подборке в этой подборке.

Particles.js [28]

Несколько интересностей и полезностей для веб-разработчика #33 - 3 [28]
Простая библиотека для создания «живых частиц». Имеет целый ряд различных опций и позволит вам сотворить приятное украшение для вашего фона. 

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 [29]

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

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

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

Напоследок:

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

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

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

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

Автор: ilusha_sergeevich

Источник [92]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/74640

Ссылки в тексте:

[1] Walkway.js: https://github.com/ConnorAtherton/walkway

[2] Vivus.js: https://github.com/maxwellito/vivus

[3] этот великолепный лэндинг: http://www.polygon.com/a/ps4-review/video_review

[4] Interact.js: https://github.com/taye/interact.js

[5] Materialize: https://github.com/Dogfalo/materialize

[6] Material UI: https://github.com/callemall/material-ui

[7] 450 lines language implementation: http://jsfiddle.net/osfnzyfd/

[8] Крошечная змейка на JavaScript (30 строк кода): http://habrahabr.ru/post/202476/

[9] Крошечный Excel на чистом JavaScript (30 строк кода): http://habrahabr.ru/post/202304/

[10] и даже 5 строк от Дэвида Блейна: http://habrahabr.ru/sandbox/74814/

[11] Tetris : http://habrahabr.ru/post/202628/

[12] Арканоид: http://habrahabr.ru/post/202530/

[13] Гоночка: http://habrahabr.ru/post/202556/

[14] Пианино: http://habrahabr.ru/post/202646/

[15] Roguelike/RPG: http://habrahabr.ru/post/202684/

[16] Сокобан: http://habrahabr.ru/post/202756/

[17] Ханойская башня: http://habrahabr.ru/sandbox/74692/

[18] Крестики нолики: http://habrahabr.ru/sandbox/74604/

[19] Пятнашки: http://habrahabr.ru/sandbox/74716/

[20] 1: http://habrahabr.ru/post/202758/

[21] 2: http://habrahabr.ru/post/202750/

[22] Цветовая пипетка на JS, 399 символов (не строк): http://habrahabr.ru/post/202852/

[23] Генерация лабиринтов алгоритмом Эйлера: http://habrahabr.ru/post/203478/

[24] Игра в 30 команд Ассемблера: http://habrahabr.ru/post/207964/

[25] Minecraft на C# (19 строк кода): http://habrahabr.ru/post/202840/

[26] Рисовалка под Windows на C++ (30+ строк кода): http://habrahabr.ru/post/202678/

[27] Игра в 0 строк кода на чистом JS: http://habrahabr.ru/post/203048/

[28] Particles.js: https://github.com/VincentGarreau/particles.js

[29] Firefox Developer Edition: https://www.mozilla.org/en-US/firefox/developer/

[30] Happy 10th, Firefox: https://medium.com/@johnolilly/happy-10th-firefox-33ddae0a5b42

[31] Overwhelmed by Code: http://alistapart.com/blog/post/overwhelmed-by-code/

[32] Hacker's guide to Neural Networks: http://karpathy.github.io/neuralnets/

[33] Cleaning Up The Mess: How To Keep Your Coding Workflow Organized: http://www.smashingmagazine.com/2011/01/19/cleaning-up-the-mess-how-to-keep-your-coding-workflow-organized/

[34] Responsive Images in Practice: http://alistapart.com/article/responsive-images-in-practice

[35] The $PATH to Enlightenment: http://alistapart.com/article/the-path-to-enlightenment

[36] Distributed On-the-Fly Image Processing and Open Source at Vimeo: https://hacks.mozilla.org/2014/11/distributed-on-the-fly-image-processing-and-open-source-at-vimeo/

[37] Create interactive JavaScript video effects: http://www.creativebloq.com/javascript/create-interactive-video-effects-111413405

[38] 5 Gotchas You’re Gonna Face Getting Inline SVG Into Production: http://css-tricks.com/gotchas-on-getting-svg-into-production/

[39] SVG Animation and CSS Transforms: A Complicated Love Story: http://css-tricks.com/svg-animation-on-css-transforms/

[40] Styling And Animating SVGs With CSS: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/

[41] Native JavaScript Data-Binding: http://www.sellarafaeli.com/blog/native_javascript_data_binding

[42] JavaScript Modules: Welcome to My Emo Hellscape: https://medium.com/trek/last-week-i-had-a-small-meltdown-on-twitter-about-npms-future-plans-around-front-end-packaging-b424dd8d367a

[43] Resizing and Cropping Images with Canvas: http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/

[44] Building single page apps using web components: https://www.polymer-project.org/articles/spa.html

[45] A Golden Age of Design: http://tmagazine.blogs.nytimes.com/2014/09/22/design-golden-age/?_php=true&_type=blogs&_r=1

[46] Framing Effective Messages To Motivate Your Users: http://www.smashingmagazine.com/2014/11/11/framing-effective-messages-to-motivate-your-users/

[47] Enabling Multiscreen Tracking With Google Analytics: http://www.smashingmagazine.com/2014/11/12/enabling-multiscreen-tracking-with-google-analytics/

[48] Using linked SmartObjects in combination with Layercomps in Photoshop CC: http://veerle.duoh.com/design/article/using_linked_smartobjects_in_combination_with_layercomps_in_photoshop_cc

[49] That Pixel Design is so Hot Right Now: http://alistapart.com/blog/post/pixel-design/

[50] Publish What You Learn: http://www.smashingmagazine.com/2012/03/30/publish-what-you-learn/

[51] «Лицензия для вашего open-source проекта»: http://habrahabr.ru/post/243091/

[52] marked-one: http://habrahabr.ru/users/marked-one/

[53] «Руководство по SVG-анимациям (SMIL)»: http://css-live.ru/articles/rukovodstvo-po-svg-animaciyam-smil.html

[54] оригинал на CSS Tricks: http://css-tricks.com/guide-svg-animations-smil/

[55] «Meteor. Разрабатываем TODO List»: http://habrahabr.ru/post/242943/

[56] movl: http://habrahabr.ru/users/movl/

[57] «Звоним на мобильные телефоны из браузера с записью разговоров»: http://habrahabr.ru/post/242191/

[58] sterx: http://habrahabr.ru/users/sterx/

[59] «WebGl: графические эффекты и фильтрация изображений под стероидами»: http://html5.by/blog/webgl-image-filters/

[60] «9 основных принципов отзывчивого веб-дизайна»: http://habrahabr.ru/post/243247/

[61] andrew-r: http://habrahabr.ru/users/andrew-r/

[62] «Подборка интересных CSS рецептов «Голые пятницы #3»»: http://habrahabr.ru/company/wargaming/blog/241903/

[63] Paul_King: http://habrahabr.ru/users/paul_king/

[64] «Изоморфные JavaScript-приложения с Catberry.js»: http://habrahabr.ru/company/2gis/blog/242909/

[65] pragmadash: http://habrahabr.ru/users/pragmadash/

[66] «JMeter как относительно удобное и практичное средство для тестирования API»: http://habrahabr.ru/post/243097/

[67] htc-cs: http://habrahabr.ru/users/htc-cs/

[68] «Работа веб-проекта в условиях нестабильного подключения»: http://habrahabr.ru/post/242161/

[69] Zav: http://habrahabr.ru/users/zav/

[70] «GamepadAPI или джойстик в браузере»: http://habrahabr.ru/post/242835/

[71] Louter: http://habrahabr.ru/users/louter/

[72] «Приглашаем на конференцию по web-разработке 29 ноября»: http://habrahabr.ru/company/mailru/blog/243147/

[73] TeamMRG: http://habrahabr.ru/users/teammrg/

[74] Screeps: http://www.screeps.com/

[75] Twemoji: https://github.com/twitter/twemoji

[76] SQL.js: https://github.com/kripken/sql.js

[77] PGweb.js: https://github.com/sosedoff/pgweb/

[78] Loki.js: https://github.com/techfort/LokiJS

[79] Dashboards: https://github.com/keen/dashboards

[80] Github Todos: https://github.com/naholyr/github-todos

[81] Higgs: https://github.com/maximecb/Higgs

[82] Raven: https://github.com/robotlolita/raven

[83] jQuery Autotab: https://github.com/Mathachew/jquery-autotab

[84] Deliver: https://github.com/KrauseFx/deliver

[85] Delve: https://github.com/derekparker/delve

[86] Deis: https://github.com/deis/deis

[87] Cockroachdb: https://github.com/cockroachdb/cockroach

[88] Home Assistant: https://github.com/balloob/home-assistant

[89] Nogotofail: https://github.com/google/nogotofail

[90] Skype теперь доступен в браузере: http://blogs.skype.com/2014/11/14/please-welcome-skype-for-web-beta/

[91] Предыдущая подборка (Выпуск 32): http://habrahabr.ru/post/241539/

[92] Источник: http://habrahabr.ru/post/243343/