Design Principles For The Web

The opening presentation from An Event Apart Online Together: Front-End Focus held online in August 2020

It’s a typical Jeremy Keith talk with many things mentioned, all converging to what he described before in his blog post Robustness and least power (and also covered in other talks). Definitely worth your time.

Hit the link for a full transcript, audio-only download, and the slides.

Design Principles For The Web →

Spectacle CodeSlide: Present code with style

spectacle-code-slide

Present code with style using spectacle.

Awesome way to present code, and putting the focus of the reader where it needs to be. It also lets you jump to specific lines even if they’ve already been displayed before (because code tends to jump).

import React from 'react';
import { Spectacle, Deck } from 'spectacle';
import CodeSlide from 'spectacle-code-slide';
import shiaLabeoufMagicGif from "./shiaLabeoufMagic.gif"
import preloader from "spectacle/lib/utils/preloader";

preloader({
  shiaLabeoufMagicGif
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={0} progress="bar">
          // ...
          <CodeSlide
            transition={[]}
            lang="js"
            code={require("raw!../assets/code.example")}
            ranges={[
              { loc: [0, 270], title: "Walking through some code" },
              { loc: [0, 1], title: "The Beginning" },
              { loc: [1, 2] },
              { loc: [1, 2], note: "Heres a note!" },
              { loc: [2, 3] },
              { loc: [4, 7], image: shiaLabeoufMagicGif },
              { loc: [8, 10] },
              // ...
            ]}/>
          // ...
        </Deck>
      </Spectacle>
    );
  }
}

Spectacle CodeSlide (GitHub) →
Spectacle CodeSlide Demo →

In the past – when I was still working in education – I worked with snippets that fade in when advancing, or code that is executed inline. Spectacle CodeSlide would’ve been a great addition to these two techniques, and could’ve formed a replacement for the laser pointer.

Responsive Principles

Responsive web design has engendered a wider conversation about how we build products that accommodate an increasing breadth of connected devices. This talk will suggest a framework within which we can model this continuing discussion, and outline the principles needed for our work to better respond to a rapidly changing world.

A PDF with presenter notes is also available.

JavaScript: Break all the Rulez

This talk will demonstrate that, whether its double-equals coercion, iteration without hasOwnProperty, augmenting native prototypes or even fraternizing with the evil eval and with, there is a time and place for virtually every feature of JavaScript and taking the time to study and understand their potential will enrich the programming experience, just as a broader vocabulary enriches the speaking experience.

The final advice is rock solid:

It’s OK to break a rule if you understand why the rule exists and you can mitigate (or safely ignore) the concerns of the rulemakers and breaking the rule would add value

PHP CLI, The Other SAPI

Most developers use PHP in a web context and run their code via Apache. The command line interface (CLI) is another approach to run PHP without the overhead of your webserver. This talk not only illustrates the usage of the PHP binary, but also some use cases for which the CLI is the better tool.

Enlightening talk at PHPNW11 by Thijs Feryn. Video also available.