JSFiddle

  • i18n

    A small internationalization example

    // Change this to try me: (en, es, jp)
    let language = 'jp';
    
    let translations = {
    	'I am $1 $2!': {
      	en: 'I am ...
  • Shopping Cart Voice #2 is the latest revision

    Voice controlled shopping cart

    let listen = (opts, cb) => {
    	if (!cb) {
      	cb = opts;
        opts = {};
      }
    	if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window))
        throw new Error('Your browser is not supported');
    
    	let speech = webkitSpeechRecognition || SpeechRecognition;
      var recognition = new ...
  • User auth example

    How user auth could be done

    // Definition
    let log = (...args) => {
    	let message = args.map(arg => JSON.stringify(arg, false, 2)).join('\n');
      $('pre').html($('pre').html ...
  • Auto markdown

    Automatically parse markdown in any page

    [...document.querySelectorAll('common-mark, .common-mark')].forEach(el => {
      let lines = el.innerHTML.split('\n');
      let min = parseInt(el.getAttribute('spaces'));
      min = min ...
  • Alive #1 is the latest revision

    Listen to the changes in any part of the subtree of an object

    function alive (object, cbs, path = []) {
    	for (var key in object) {
        if (object[key] instanceof Array ||
        		object[key].toString() === '[object Object ...
  • Companies Logos

    Easily add companies logos by leveraging modern libraries

    [...document.querySelectorAll('.logify > [data-company]')].forEach(div => {
      let domain = div.getAttribute('data-company');
      if (!domain.match(/\./)) domain = domain + '.com';
      let link = div ...
  • Comments Network

    Example of using http://comments.network/

    <comment-box class="border" hackernews="8315616" add="hackernews"></comment-box>
  • Texty

    Text analysis

    function texty(text, callback, opt){
    	if (typeof text !== 'string') {
      	opts = callback;
        texty.middleware.push(text);
        return texty;
      }
      
      texty.middleware.reduce ...
  • Nested Template literals

    Showing what they are capable of

    var a = '1';
    var b = '2';
    alert(`a ${ a + ` x ${b}` } b`);
  • SVG Example

    No-Library (pure JS), HTML, CSS, JavaScript

    var svg = document.querySelector('svg');
    
    setTimeout(function(){
      svg.classList.remove('mountain');
    	svg.classList.add('sea');
    }, 2000);