Кілька цікавих і корисних для веб-розробника # 18

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

Dat

 Dat — data package management. Це інструмент, який дозволяє обмінюватися великими наборами даних з метою побудови спільного робочого процесу, подібно git з вихідними файлами. Важливо згадати, що поточний статус проекту pre-alpha .
 
npm install dat -g

 
 
 

GestureKit

 
Дуже цікава штука для не менш цікавих UI / UX завдань. Інтерфейс сервісу дозволяє вам намалювати будь-який довільний жест, після чого GestureKit згенерує ключ для вашого жесту, за допомогою якого ви зможете звертатися до обробника даної події. Плюс до всього це доступно не тільки для iOS або Android, а й для вебу завдяки gesturekit.js . Тобто загалом це якийсь провайдер неординарних подій.
 
 

Remark

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>

 
 

Velocity.js

 
Velocity.js — це jQuery плагін, який грунтовно змінює уявлення про JavaScript DOM анімації і з часом має стати заміною класичного $. Animate (). Вся справа в тому, що Velocity працює значно швидше. Це пов'язано не тільки з продуктивністю, але і з візуальним сприйняттям анімації людиною. Погодьтеся, практично вся DOM анімація недостатньо плавна і трохи подлагівает. Проблема вирішується за допомогою двох прийом: синхронізація DOM (Preventing 'layout thrashing' ) і кешування запитів щоб звести до мінім кількість звернень до DOM. Поділюся ще статтею на цю тему від David Walsh — «CSS vs. JS Animation: Which is Faster »?
 
 

Quill

 
Quill — це сучасний багатий сумісний і розширюваний текстовий редактор від відомої компанії Salesforce.com. У зв'язку з безліччю проблем зв'язкова з WYSIWYG люди все частіше стали використовувати Markdown, але слів розробників «Перо» було розроблено з метою відрізнитися від усіх WYSIWYG редакторів і позбутися від безлічі проблем пов'язаних з ними. Насправді Quill дуже гнучкий і дуже дуже модульний. Варто подивитися документацію до API, після чого відразу буде зрозуміло, що написаний проект по-розумному.
 
 

EpicEditor

 
Функціональний Markdown редактор на JavaScript. У EpicEditor передбачено автосохранініе за допомогою HTML5 LocalStorage, робота в оффлайн режимі і багато інші, Володіє гнучким API і гранично простий у використанні.
 
<div id="epiceditor"></div>

 
var editor = new EpicEditor().load();

 
 

Picker

 
Безумовно колорпікер не є часто зустрічається завданням, але в певних місцях це дуже зручне рішення для користувача. І особисто я не знаю жодного нормального скрипта колорпікера незалежного від jQuery. Тепер такий дуже простий і зручний є — Picker .
 
 

Західні думки або що варто було б перевести на Хабре:

  
 

Наостанок:

 
     
  • Jest від Facebbok — менше головного болю при JavaScript Unit Testing
  •  
  • CSV.js — CSV парсер.
  •  
  • Filtrex.js — бібліотека для «фільтрації» даних за допомогою заданих виразів.
  •  
  • Isomer.js — бібліотека для створення ізометричних проекцій подібно Obelisk.js, але тільки крутіше
  •  
  • CSS Shapes Polyfill
  •  
  • DynCSS — програмований CSS.
  •  
  • Phở Devstack 1.0 — ще один складальник, але на Gulp, Yeoman, Bower від Source.
  •  
  • b l.ocksplorer.org — крупней колекція прикладів на d3.js
  •  
  • CodeGrabber — дуже простий спосіб вбудовування початкових кодів віддаленого файлу на сторінці.
  •  
  • Recognizer — як вам такий концепт просунутих інструментів для розробника?
  •  
  • Любіть командний рядок і хочете говорити по англійська? Юзайте Betty (English-like interface for your command line).
     
    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)
 
Приношу вибачення за можливі помилки. Якщо ви помітили проблему — напишіть будь ласка в личку.
 
Спасибі всім за увагу.
 
  

    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.