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

в 3:00, , рубрики: css, html, javascript, веб-дизайн, Веб-разработка

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

Firefox для iOS

Пока это еще только наработки, но затея просто великолепная.

SVG Edit

Несколько интересностей и полезностей для веб-разработчика #34 - 1
Отлиный инструмент для редактирования SVG прямо в браузере. Вообще с распространением дисплеев с высоким разрешением, сообщество веб-разработчики все чаще и чаще обсуждает всевозможные способы взаимодействия с SVG. Идея еще одного простого и открытого редактора очень даже уместна, а функционал способен удовлетворить все потребности фронтендеров. Исходники тут. Также хочу добавить, что проект не стоит на месте и постоянно развивается.

PhotoSwipe

Качественный скрипт для создания адаптивных галерей. Поддерживает все уже привычные нам жесты зума, перелистывания и закрытие лайтбокса свайпом вверх (отличное UX решение, которое первыми стали использовать в Facebook если я не ошибаюсь). Поддержка History API, управление клавиатурой, индикатор загрузки, умная ленивая подгрузка и кнопки для расшаривания.

var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'https://placekitten.com/600/400',
            w: 600,
            h: 400
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];
    
    // define options (if needed)
    var options = {
			 // history & focus options are disabled on CodePen        
      	history: false,
      	focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0
        

ProgressBar.js

Несколько интересностей и полезностей для веб-разработчика #34 - 2
Хорошее решение для создания красивых и отзывчивых индикаторов загрузки. ProgressBar.js предоставляет 3 основных вида индикатора (линия, круглый и квадратный) и множество опций для анимации: цвет, толщина, функция смягчения, продолжительность и тд. Все максимально просто:

var circle = new ProgressBar.Circle('#example-circle-container', {
    color: '#FCB03C',
    strokeWidth: 2,
    fill: '#aaa'
});

circle.animate(1, function() {
    circle.animate(0);
})

WordPress Plugin Boilerplate

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

Astral

Удобный сервис для агрегирования интересностей и полезностей смайл. Astral синхронизируется с GitHub и позволяет создавать теги для всех ваших застареных звезданутых проектов.
Несколько интересностей и полезностей для веб-разработчика #34 - 4

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

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

Напоследок:

  • Gifify — конвертирует видео в оптимизированные .gif.
    image
  • Yosemite San Francisco Font
  • io.js — форк NodeJS.
  • Awesome Public Datasets
  • txt.js — стилизуем шрифты с помощью JavaScript и Canvas.
  • perfBar — аналитический инструмент для оценки производительности проекта.
  • Laroux.js еще один компактный аналог jQuery для современных браузеров.
  • Flexie — полифил для поддержки flex-box.
  • Charted.js — еще одна библиотека с графиками.
  • SVG Morpheus — скрипт для анимации SVG при деформации.
  • Flow — статический анализ типов в JS от Facebook.
  • Format.js — библиотека для локализации от Yahoo.
  • CSSplot — графики на CSS.
  • Yumpu ePaper — WordPress плагин, которые генерирует из вашего блога электронную книгу в формате ePub.
  • http2 — поддержка HTTP2 для Go.
  • Comcast — в рамках тестирования создает искусственные подключения к серверу.
  • Kuma — проект от Mozilla на Django, на котором построена MDN.
  • Rocket — App Container runtime.
  • youtube-dl — утилита для скачивания видео из Youtube и других аналогичных сайтов.
  • Detekt — lalware triaging tool на Python.
  • Spider — новый язык программирования или JavaScript без сюрпризов.
  • Очень прикольный ролик от ФРИИ — «Будни стартапера».

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

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

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

Автор: ilusha_sergeevich

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js