m0n01d

javascript:(function()%7Bfunction%20e(e)%7Bvar%20t,n,r=this;this.options=%7Btarget:window%7D;if(typeof%20e===%22object%22)%7Bfor(t%20in%20e)%7Bn=e%5Bt%5D;this.options%5Bt%5D=n%7D%7DsetTimeout(function()%7Br.init()%7D,1e3)%7De.prototype=%7BgetDistance:function()%7Bvar%20e=this.options.target;return%20e===window?window.scrollY:this.getTarget().scrollTop%7D,getHeight:function()%7Bvar%20e=this.options.target,t=document.body,n=document.documentElement;return%20e===window?Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight):this.getTarget().scrollHeight%7D,getTarget:function()%7Bvar%20e=this.options.target;return%20e===window?window:document.querySelector(e)%7D,init:function()%7Bvar%20e=this,t=window.innerHeight;var%20n=document.createElement(%22input%22);n.type=%22range%22;n.min=t;n.max=this.getHeight();n.value=this.getHeight()-this.getDistance();n.id=%22scrollBar%22;n.step=1;document.body.appendChild(n);n.onchange=function()%7Be.$scroll(this.max-this.value);if(this.value===this.min

m0n01d

(function() {
  var scale=Number((screen.width/window.innerWidth).toFixed(1)), cssWidth = 35 / scale;
    function _scrollBar_(target) {
        var option, value, that = this;
        this.options = {
            target: target || window
        };

        setTimeout(function() {
            that.init();

m0n01d

JavaScript

JavaScript Basics

• Javascript fundamentals 7- hours
• Udacity Javascript Basics
• NodeSchool.io - Javascripting

Intermediate JavaScript

• The JavaScript Triology by Douglas Crockford
• Udacity Object-Oriented JavaScript
• Crockford on JavaScript

m0n01d

const viewFiles = ['src/js/**/*.html', '!src/js/**/*.async.html'];
const asyncViewFiles = 'src/js/**/*.async.html';

gulp.task('asyncViews', function () {
  return gulp.src(asyncViewFiles)
    .pipe(gulp.dest('./build/templates'));
});

gulp.task('views', ['asyncViews'], function () {
  return gulp.src(viewFiles)

m0n01d

/*
index.html
<div>
  <div id="btns">
    <button data-query="cats">cats</button>
  </div>
  <input id="add-topic" placeholder="add a topic" />
</div>
<div id="gifs"></div>
<script src="giphy.js"></script>

m0n01d

import React, { Component } from 'react';

const TodoItem = ({ text, handleClick }) => (
  <li>{text} <button onClick={handleClick}>x</button></li>
);

class App extends Component {
  constructor(props) {
    super(props);

m0n01d

viewSnippet language title snippet =
    div [ class "relative my-8" ]
        [ p [] [ text title ]
        , Html.node "vertol-snippet"
            [ Attributes.attribute "snippet" snippet ]
            [  pre
                []
                [ code
                    [ class <| "language-" ++ language
                    ]