- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Dat — data package management. Это инструмент, который позволяет обмениваться большими наборами данных с целью построения совместного рабочего процесса, подобно git с исходными файлами. Важно упомянуть, что текущий статус проекта pre-alpha.
npm install dat -g
[2]
Очень интересная штука для не менее интересных UI/UX задач. Интерфейс сервиса позволяет вам нарисовать любой произвольный жест, после чего GestureKit сгенерирует ключ для вашего жеста, с помощью которого вы сможете обращаться к обработчику данного события. Плюс ко всему это доступно не только для iOS или Android, но и для веба благодаря gesturekit.js [3]. То есть в целом это некий провайдер неординарных событий.
Remark.js позволяет создавать слайдшоу с помощью Markdown разметки. Поддерживает широкий диапозон подцветки синтаксиса. На выходе получаются отзывчивые слайды, подстраивающиеся под разрешение и совместимые с различными «трогательными» устройствами.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Title
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
---
# Introduction
</textarea>
<script src="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var slideshow = remark.create();
</script>
</body>
</html>
[5]
Velocity.js — это jQuery плагин, который основательно меняет представление о JavaScript DOM анимации и со временем должен стать заменой классического $.animate(). Все дело в том, что Velocity работает значительно быстрее. Это связано не только с производительностью, но и с визуальным восприятием анимации человеком. Согласитесь, практически вся DOM анимация недостаточно плавна и немного подлагивает. Проблема решается с помощью двух прием: синхронизация DOM (Preventing 'layout thrashing' [6]) и кеширование запросов чтобы свести к минимому количество обращений к DOM. Поделюсь еще статьей на эту тему от David Walsh — «CSS vs. JS Animation: Which is Faster» [7]?
[8]
Quill — это современный богатый совместимый и расширяемый текстовый редактор от известной компании Salesforce.com. В связи с множеством проблем связнных с WYSIWYG люди все чаще стали использовать Markdown, но слов разработчиков «Перо» было разработано с целью отличиться от всех WYSIWYG редакторов и избавиться от множества проблем связанных с ними. На самом деле Quill очень гибкий и очень очень модульный. Стоит посмотреть документацию к API, после чего сразу будет понятно, что написан проект по-умному.
[9]
Функциональный Markdown редактор на JavaScript. В EpicEditor предусмотрено автосохраниние с помощью HTML5 LocalStorage, работа в оффлайн режиме и многое другие, Обладает гибким API и предельно прост в использовании.
<div id="epiceditor"></div>
var editor = new EpicEditor().load();
[10]
Безусловно колорпикер не является часто встречающейся задачей, но в определенных местах это очень удобное решение для пользователя. И лично я не знаю ни одного нормального скрипта колорпикера независимого от jQuery. Теперь такой очень простой и удобный есть — Picker [10].
Datetime
betty what time is it
betty what is todays date
betty what month is it
betty whats today
Find
betty find me all files that contain california
Internet
betty download http://www.mysite.com/something.tar.gz to something.tar.gz
betty uncompress something.tar.gz
betty unarchive something.tar.gz to somedir
(You can use unzip, unarchive, untar, uncompress, and expand interchangeably.)
betty compress /path/to/dir
iTunes
betty mute itunes
betty unmute itunes
betty pause the music
betty resume itunes
betty stop my music
betty next song
betty prev track
betty what song is playing
(Note that the words song, track, music, etc. are interchangeable)
Предыдущая подборка (Выпуск 17) [27]
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите пожалуйста в личку.
Спасибо всем за внимание.
Автор: ilusha_sergeevich
Источник [28]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/61158
Ссылки в тексте:
[1] Dat: http://dat-data.com/
[2] GestureKit: http://www.gesturekit.com/
[3] gesturekit.js: https://github.com/RoamTouch/gesturekit.js
[4] Remark: https://github.com/gnab/remark
[5] Velocity.js: http://julian.com/research/velocity/
[6] Preventing 'layout thrashing': http://wilsonpage.co.uk/preventing-layout-thrashing/
[7] «CSS vs. JS Animation: Which is Faster»: http://davidwalsh.name/css-js-animation
[8] Quill: https://github.com/quilljs/quill
[9] EpicEditor: https://github.com/OscarGodson/EpicEditor
[10] Picker: https://github.com/suffick/Picker
[11] Data-binding Revolutions with Object.observe(): http://www.html5rocks.com/en/tutorials/es7/observe/
[12] Understanding Vector Shapes in Illustrator: http://mattdsmith.com/understanding-vector-shapes-in-illustrator/
[13] 5 principles for great interface copywriting: http://www.gv.com/lib/5-principles-for-great-interface-copywriting
[14] A Chat Application Using Socket.IO: http://www.sitepoint.com/chat-application-using-socket-io
[15] Responsive Images Done Right: A Guide To <picture> And srcset: http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
[16] Jest от Facebbok: https://github.com/facebook/jest
[17] CSV.js: https://github.com/knrz/CSV.js
[18] Filtrex.js: https://github.com/joewalnes/filtrex
[19] Isomer.js: https://github.com/jdan/isomer
[20] CSS Shapes Polyfill: https://github.com/adobe-webplatform/css-shapes-polyfill
[21] DynCSS: http://www.vittoriozaccaria.net/dyn-css/
[22] Phở Devstack 1.0: http://pho.madebysource.com/
[23] l.ocksplorer.org: http://bl.ocksplorer.org/#/search/d3.select
[24] CodeGrabber: http://andrekoenig.info/codegrabber/
[25] Recognizer: https://github.com/equiet/recognizer
[26] Betty: https://github.com/pickhardt/betty
[27] Предыдущая подборка (Выпуск 17): http://habrahabr.ru/post/220975/
[28] Источник: http://habrahabr.ru/post/224751/
Нажмите здесь для печати.