kpuputti

Gatsby

“blazing fast modern site generator for React”

• https://www.gatsbyjs.org/

Background: The CMS problem

• We really need CMSs

kpuputti

/**
 * A higher order component (HOC) that provides the current viewport
 * dimensions to the wrapped component as a `viewport` prop that has
 * the shape `{ width: 600, height: 400}`.
 */
export const withViewport = Component => {
  // The resize event is flooded when the browser is resized. We'll
  // use a small timeout to throttle changing the viewport since it
  // will trigger rerendering.
  const WAIT_MS = 100;

kpuputti

Brief History of Frontend Tooling

A few years ago, when the Frontend developer tooling craze hadn't yet started, techniques for building and optimizing JavaScript applications varied. Many were using shell scripts (cat to concatenate files etc.), tools provided by the web framework (like Play Framework's templates), or some generic Java-based tools. There might have been some manual operations (especially around minifying for production builds), and most of the tooling was not JavaScript-based.

Then Frontend developers started to notice that it was really hard to reason about lots of files that each rely on some globals (making the inclusion order significant) and expose a "namespace" (global variable) for other files to use. Then came AMD (Asynchronous Module Definition), which enabled making modules that define their dependencies and that explicitly exposed their exports. AMD modules were used together with the require.js tool and the r.js optimizer. The A in AMD (asynchronous) was a clear design choi

kpuputti

(ns aws-parser.core
  (:require [clojure.string :as str]))

(defn whitespace? [c]
  (str/blank? (str c)))

;; STATES: :default :whitespace :quoted

(defn- handle-char [{:keys [state result]} c]
  (cond

kpuputti

Promise patterns in large JavaScript applications

• understand the abstraction
  • understand then (fmap/monadic bind)
• know the difference of deferred and promise
• be sure not to swallow errors
  • either return or end chain
  • error in success handler ending the chain
• resolve with a single value (jQuery...)
• standard error object for rejecting

kpuputti

JavaScript projects

Packages and build process

Start simple, keep simple.

• CommonJS modules
• Browserify
• npm run scripts
• Makefile

kpuputti

/*eslint-env es6 */

// Inspired by the paper "A tutorial on the universality and
// expressiveness of fold" by Graham Hutton (available at
// http://www.cs.nott.ac.uk/~gmh/fold.pdf), implementing some generic
// list handling functions in JavaScript in terms of `fold`.

// Personally I had an enlightnening moment when I realised the
// beautiful interplay of cons lists and foldr during the FP101x
// Haskell course. JavaScript's syntax doesn't make this very apparent

kpuputti

/* @flow */

function wait(time: number): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(resolve.bind(null, 'resolved in ' + time + 'ms'), time);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    console.log('start');

kpuputti

Been studying a bit of Haskell during the previous (rather hectic) weeks. Learnings this far:

• Proper type inference (vs. Scala etc.) is wonderful and removes all the pain that have turned me off from traditional statically typed langs before
• Type classes and parametric polymorphism seems like a very good and natural idea, easy to understand (at least at face value) and very explicit without any big hassle (like the variance/covaricance/invariance things with subtyping)
• Monadic IO etc. are not as hard as I thought it to be with some background knowledge
• Curried functions with minimal function call syntax seem essential for proper FP-style programming (fn composition, point-free style, etc.)
• JavaScript seems even more dangerous now, I want me some type safety

I've favored dynamically typed languages for years now, but especially the good type inference takes most of the pain away. Using immutable values, recursion, and strong types seems very natural to me now.

kpuputti

SASS 3.3

• CSSconf.eu 2013: Chris Eppstein - The Mind-blowing Power of SASS 3.3
• Looking Into the Future of Sass

New SASS website: http://sass-lang.com/

• SASS 3.3 alpha available, official version should be coming "soon"
• Compass 0.13 alpha also available, but seems to use SASS 3.2.5
  • to use Compass: sass --compass --sourcemap --watch