SaraVieira

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

https://reactiveconf.com/

zz85

// This is @zz85's attempt to understand and annotate the greenlet.js lib
// from https://github.com/developit/greenlet/blob/master/greenlet.js

/** Move an async function into its own thread.
 *  @param {Function} fn	The (async) function to run in a Worker.
 */
export default function greenlet(fn) { // greenlet takes in a function as argument
    let w = new Worker( //  creates a web worker
        URL.createObjectURL( // that has a local url
            new Blob([ // created from a blob that has the following content

developit

lit-html + unistore

import { html, render } from 'lit'
import { provide, connect } from './unlit'

const app = provide(store)( () => html`<div>${counter}</div>` )

const counter = connect('count', {

adactio

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

// HTML files: try the network first, then the cache.
// Other files: try the cache first, then the network.
// Both: cache a fresh version if possible.
// (beware: the cache will grow and grow; there's no cleanup)

const cacheName = 'files';

ForsakenHarmony

.background {
  will-change: opacity;
  transition: opacity 250ms;

  visibility: hidden;
  opacity: 0;

  position: fixed;
  top: 0;
  left: 0;

monokrome

import React from 'react'
import styled from 'styled-components'

function flex(name, defaultValue) {
  return (props) => {
    let value = props[name]
    if (!value && typeof defaultValue === 'undefined') return ''
    if (!value) value = defaultValue
    return `flex-${name}: ${value};`
  }

philmander

import { h, Component } from 'preact';
import { Link } from 'preact-router/match';

class Nav extends Component {

    constructor() {
        super();
        this.state.title = 'Navigation'
    }

drufball

Infinite list: Automatically lazy-loads content from a data source as the user scrolls, view-recycling as necessary.

Lazy-load image: Won't load the resource until it is on or near the screen.

Pull to refresh: Recreate the "pull down to refresh" UI from iOS and Android.

Carousel: Side scroller that handles lazy-loading and optionally snaps to elements.

Multi-line ellipsis: Automatically hide text and replace with a fade/ellipsis after a specified number of lines.

trueadm

// "counter.react"

import {format} from 'externalLib';

state {
  // acts like default state
  counter = 0;
}

props {

developit

if (typeof window!=='undefined' && navigator.serviceWorker && navigator.serviceWorker.controller) {
	let reloadOnNext = false;

	let pushState = history.pushState;
	history.pushState = function(state, title, url) {
		pushState.call(this, state, title, url);
		if (reloadOnNext===true) location.reload(true);
	};

	navigator.serviceWorker.controller.addEventListener('statechange', e => {