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

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

    Ramjet


    image
    Нереально крутой скрипт, который производит морфинг DOM элементов. Выглядит потрясающе! Работает с HTML и SVG элементами, а также с изображениями. Ramjet содержит в себе базовую коллекцию функций анимации и максимально прост в использовании:
    <div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
    <div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>
    
    <script src='ramjet.js'></script>
    <script>
        // to repeat, run this from the console!
        ramjet.transform( a, b );
    </script>
    


    JSON Сервер


    Чрезвычайно удобный инструмент, который позволяет создавать полноценный REST API без написания кода, буквально за 30 секунд. «Сделано с любовью для фронтальных разработчиков, кто нуждается в быстром прототипировании серверной части».

    Создаем db.json файл:
    {
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        { "id": 1, "body": "some comment", "postId": 1 }
      ]
    } 
    

    Запускаем JSON сервер:
    $ json-server --watch db.json
    

    И теперь если мы перейдем на localhost:3000/posts/1, то получим:
    { "id": 1, "title": "json-server", "author": "typicode" }
    


    Elevator.js



    Вы все уже наверное множество раз встречали различные мини-библиотеки и jquery плагины с кнопкой «Наверх», которое прокручивают страничку к самому началу. Elevator.js делает тоже самое, но отличился своей оригинальностью. Помните лифты в старых американских высотках? Вот и прокрутка будет происходить с похожей анимацией и под ту винтажную мелодию ожидания.

    Также хочу упомянуть Egg.js для создания пасхалок в вашем проекте.

    var egg = new Egg();
    egg
      .addCode("up,up,down,down,left,right,left,right,b,a", function() {
        jQuery('#egggif').fadeIn(500, function() {
          window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000);
        }, "konami-code");
      })
      .addHook(function(){
        console.log("Hook called for: " + this.activeEgg.keys);
        console.log(this.activeEgg.metadata);
      })
      .listen();
    


    Deck of Cards



    Весьма необычный проект, с помощью которого на досуге легко и просто можно сделать любую карточную игру. Deck of Cards это полноценный API для отрисовки, учета и перемешки игральных карт. Пример ответа:
    {
        "success": true,
        "cards": [
            {
                "image": "http://deckofcardsapi.com/static/img/KH.png",
                "value": "KING",
                "suit": "HEARTS"
            },
            {
                "image": "http://deckofcardsapi.com/static/img/8C.png",
                "value": "8",
                "suit": "CLUBS"
            }
        ],
        "deck_id":"3p40paa87x90",
        "remaining": 50
    }
    


    Кстати, еще знаменитая компания Marvel с огромной хроникой всех своих супергероев относительно недавно анонсировала портал для разработчиков — developer.marvel.com.

    Wwwhere — огромная коллекция полезностей




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




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




    Напоследок:


    • HTML/CSS
    • JavaScript
      • Textures — замечательная библиотека для создания SVG текстур.
      • Watermark.js — водяные знаки на стороне клиента.
      • JSPM — пакетный менеджер для браузера.
      • ReadRemaining.js — прогресс бар чтения страницы.
      • Flummox — минималистичный, изоморфный Flux.
      • Brisket — да, опять MV* фреймворк, нот уже от Bloomberg.
      • jQuery.my — полноценный data binding для jQuery.
      • Zoom.js — jQuery плагин для зума изображений.
      • Justice — метрики производительности страницы.
    • PHP
      • Bolt — изящная, легковесная и простая CMS для редакторов и разработчиков.

      • Icicle — асинхронный функционал в PHP с помощью генераторов.
      • Unirest — HTTP клиент.
      • Sabre XML — библиотека для работы с XML.
    • Python
      • Neon — Deep Learning Framework.
      • Toolz — коллекция полезный функций для Python.
      • Pyvim — Vim клон на Python.
    • Ruby
    • Go
      • Journey — движок для блога, совместимый с темами для Ghost.

      • Pingo — система плагинов для Go.
      • Rtop — удаленная интерактивная система мониторинга, основанная на SSH.
      • Ccat — colorizing `cat`.
    • Разное


    За помощь в подготовке материала выражаю огромную благодарность Александру Маслову drakmail.

    Друзья бэкендеры! Я думаю, всем известно, что свои подборки я делаю полностью на альтруизме. Я всегда прошаривал кучу сайтов, чтобы мне всегда было удобно работать. А в один момент я решил делиться найденным материалом. Со временем подборки обрели некую популярность и значительно расширились в плане содержания. Отныне я буду четко структурировать блок «Напоследок», дабы людям не приходилось искать нужное. Для того чтобы разделы не были голыми и всегда наполнялись актуальной информацией, мне требуется ваша помощь. И проблема не только во времени, но и в компетенции. В плане бэкенда я скорее теоретик, чем практик.

    Пхпшник, рубист, питонист, гоущик, если ты уже мониторишь GitHub Trending, Reddit, HackerNews или Twitter в поисках интересностей и полезностей по своей теме, если найденное определенно имеет ценность, но не заслуживает внимание целого поста, если тебе не трудно раз в неделю/в две недели в зависимости от материала делиться парой килобайт ссылочной массы, то напиши мне в личку или любую соц. сеть из профиля. Писанина в основной раздел по желанию. Имя или контакты волонтеров в каждом посту обязательно будут указаны.

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

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

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

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    • +44
    • 37,9k
    • 3
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 3
    • +6
      В прошлом тысячелетии была выпущена книжка «Вебдизайн» под авторством Якоба Нильсена.
      И там были строчки про то, что нормально, если у тебя 10 килобайт страницы занимает текст, и 40-50 — графика.
      С тех пор прошло много лет, однако мне кажется, что всовывать гифку на 1.3 Мб без превью на страницу — не хорошо. Тем более учитывая, что в ленте будет не только она одна.
      • 0
        Elevator.js в действии можно посмотреть у Google events.google.com/io2015/about (прокрутите до низа и нажмите Back to the top)
        • 0
          Очень порадовала надпись: «Please try another browser».
          Теперь я понимаю людей с ограниченными возможностями.

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