Comic.js: Cartoon style drawing for HTML5 Canvas and more

Comic.js is a JavaScript library that lets you create cartoon-style drawings for HTML5 Canvas, Raphael.js, D3.js, and SVG.js. You can use it either for drawing comic style shapes or for cartoonizing an already existing SVG.

Cartoon style drawing for HTML5 Canvas & Raphael.js & D3.js & SVG.js

Javascript library that acts as plugin for Raphael.js, D3.js, SVG.js or as lib for the HTML5 Canvas, providing functions for cartoon style drawing.

Provides either methods for drawing comic style shapes (cEllipse, cLine, cRect, ...) or the magic method for cartoonizing an already existing SVG. When using the magic method or drawing on a canvas no further libraries are required.

Examples

Cartoonized D3 examples: D3 Cartoonized!

Cartoon R widget built by Kent Russell using comic.js: R Cartoonized!

Raphael.js, D3.js, SVG.js, Canvas,

using "magic": on images, on drawings

.

Plyr is a simple HTML5 media player that offers WebVTT captions. It’s lightweight, accessible, and customizable, and works with all modern browsers.

Checkout the demo.

Why?

We wanted a lightweight, accessible and customisable media player that just supports modern browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.

Features

• Accessible - full support for VTT captions and screen readers.
• Lightweight - just 8KB minified and gzipped.
• Customisable - make the player look how you want with the markup you want.
• Semantic - uses the right elements. <input type="range"> for volume and <progress> for progress and well, <button>s for buttons. There's no <span> or <a href="#"> button hacks.
• Responsive - as you'd expect these days.
• Audio & Video - support for both formats.
• Embedded Video - support for YouTube (Vimeo soon).
• API - toggle playback, volume, seeking, and more.
• Fullscreen - supports native fullscreen with fallback to "full window" modes.
• i18n support - support for internationalization of controls.
• No dependencies - written in vanilla JavaScript, no jQuery required.

Oh and yes, it works with Bootstrap.

.

PatternPack: Easy pattern library creation and maintenance

PatternPack makes it easy to create and maintain pattern libraries. It’s a static site generator that lets you document your UI using Markdown and just one grunt task.

Trix: An open source rich text editor

오픈소스 에디터

Built for the Modern Web

Trix supports all evergreen, self-updating desktop and mobile browsers.

Trix is built with emerging web standards, notably Custom Elements, Mutation Observer, and Promises. Eventually we expect all browsers to implement these standards. In the meantime, Trix includes polyfills for missing functionality.

Trix is an open source rich text editor for everyday writing. It lets users compose beautifully formatted text from within your web application.

.

Offline.js is a library that automatically alerts users when they’ve lost internet connectivity. It then captures AJAX requests that were made while offline, and recreates them when internet connectivity is restored.

embed 소스 경로 교체하기

id가 audio_file 인 embed 태그가 있다. 소스를 변경하고 싶은데,  jQuery .attr() 로는 변경되지 않는다.

어떻게 할까?

<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file"  >

StackOverflow에서 찾았다.

해당 embed의 parent를 만든다. 부모를 만들어서 부모에 바인드 시키는 것이지.

그래서, 해당 embed를 지우고 다시 부모가 자식을 만들면 동일한 자리에 embed가 생성될 것이다.

var parent = $('embed#audio_file').parent();
var newElement = "<embed scr='new src' id='audio_file'>";

$('embed#audio_file').remove();
parent.append(newElement);

http://stackoverflow.com/questions/2493706/javascript-changing-src-attribute-of-a-embed-tag