POST DIRECTORY
Jsconf 2018

It’s been 3 weeks since I got back from my first-ever JSconf. The conference was a blast, with an unusual format and WAY too many excellent speakers to list here. For 3 days in sunny southern California I stretched my mind to encompass a barrage of new ideas, tools and possibilities in the JavaScript ecosystem. Now that I’m back settled in and writing real-life JavaScript in the real world, I wanted to share some of the things that really stuck and still have me thinking.

Day 1 Highlight

npm and the Future of Javascipt with Laurie Voss

Easily the most compelling talk of day 1 at JSconf was “npm and the Future of Javascipt” with Laurie Voss, COO of npm. Voss reported on usage statistics for the package manager, and on data collected in a survey of 16,000 JavaScript developers.

JavaScript devs reported that the number 1 reason they chose JavaScript over another programming language was the availability of libraries; and that is apparently a massive incentive, as Laurie reported that 97% of code in a modern web app is hosted on npm. He reported that downloads of the major frameworks: React, Angular, Ember and Vue are all on the rise, with Vue adoption truly meteoric and Ember making a (highly unusual) comeback.

Voss finished his talk by making some data-backed suggestions for making technical stack choices in 2019.

Bet on React…The best framework is always the one with the most users…React is a triumph of modular design.

In addition to praising React, Laurie suggested that it’s about time you learned TypeScript if you haven’t already, and, he says, you probobly have, if 3 million weekly downloads are any indication. TypeScript compiles to JavaScript and can be used anywhere you use JS. The main benefit of adding types to JavaScript is that the compiler can catch errors that would cause failures at runtime.

Voss thinks you should learn GraphQL, Facebook’s open-source library providing a clean syntax for clients to interact with data sources. With GraphQL, the client sends requests containing the precise data-shapes it wants returned to a single endpoint.

So what is Laurie Voss excited about? Next.js, a new kitchen sink framework for static and server‑rendered applications with a React component library.

Day 2 Highlight

NodeBoats!

JSConf US is unique in that its 2 days of talks are broken up by “Choose Your Own Adventure Day”, offering social activities ranging from a trip to the zoo to surfing. I chose ‘NodeBoats’, obviously!

What could be better than mixing electronics with water? Take to the open seas by building your very own JavaScript-powered boat. Join a worthy crew (or cross the seas solo) to hack together a boat (or a boat-like floaty object) using Node.js to bring the seas under your control.

In a nutshell, the boats we built were controlled via a bluetooth module with an Arduino board controlling a drive motor and any number of servo motors for steering (or special effects). Boat hulls were built with a mishmash of craft supplies, hot glue and styrofoam. Programming the Arduinos with JavaScript was achieved using Johnny-Five, an IoT and Robotics programming framework. When a Johnny-Five program runs, a REPL opens up with your code injected, so that you can control your device with keyboard or mouse events.

Here’s my team’s program

const five = require('johnny-five')
const keypress = require('keypress')

const board = new five.Board({
  port: '/dev/tty.orca-DevB', // path to bluetooth connection
})

board.on('ready', function() {
  const esc = new five.ESC(10) // the drive motor
  const servoA = new five.Servo(11) // 2 servos controlled rudders on either side of the hull.
  const servoB = new five.Servo(9)

  this.repl.inject({
    esc: esc,
    leftServo: servoA,
    rightServo: servoB,
  })

  function controller(ch, key) {
    let isThrottle = false
    let speed = esc.last ? esc.value : 56

    if (key && key.shift) {
      if (key.name === 'up') {
        speed += 1
        isThrottle = true
      }
      if (key.name === 'down') {
        speed -= 1
        isThrottle = true
      }
      if (key.name === 'a') {
        console.log('-LEFT: up')
        servoA.move(0)
      }
      if (key.name === 'z') {
        console.log('-LEFT: down')
        servoA.move(180)
      }
      if (key.name === 's') {
        console.log('-RIGHT: up')
        servoB.move(180)
      }
      if (key.name === 'x') {
        console.log('-RIGHT: down')
        servoB.move(0)
      }
      if (isThrottle) {
        console.log('NEW SPEED:', speed)
        esc.speed(speed)
      }
    }
  }

  keypress(process.stdin)

  process.stdin.on('keypress', controller)
  process.stdin.setRawMode(true)
  process.stdin.resume()
})

And here’s our boat!

Our ill-fated boat entry

It performed perfectly for about 1 minute until the bluetooth module got wet (who would have guessed!). Despite this setback, The workshop was enormously fun and mind-opening. I came away with a page-turner programming book called ‘JavaScript on Things - Hacking Hardware for Web Developers’ by Lyza Danger (and she gave it to me!) and a new item on my holiday wishlist - Sparkfun’s Johnny-Five Inventor’s Kit.

Day 3 Highlight

How to be an a11y - Creating Accessible React Apps with Neha Nivedita

The final day of talks at JSconf 2018 was as jam-packed as it was bittersweet. The talk that still has me thinking with every line of code I write is ‘How to be an a11y - Creating Accessible React Apps’ with Neha Nivedita. Nivedita detailed the why and how of making React apps accessible along with the accessibility pitfalls common to all of the major JavaScript frameworks.

Nivedita makes the case that everyone should be able to access and use your app, regardless of physical ability, and that by thinking of accessibility as a nice-to-have, but not-right-now feature, we may be excluding as many as 15% of web users from using our sites and apps. The trouble with JavaScript frameworks like React is that they use syntactic sugar to produce div after div, rather than semantic HTML, and they manipulate the DOM, sometimes silently, so that people using screen readers are unable to find meaning in the hierarchy of your markup.

Luckily, it’s dead easy to make a big change in the accessibility of your React app with a minimum of effort.

  • Use ARIA, React supports it natively.
  • Use React.Fragment. With it, you no longer need to wrap markup in meaningless divs. You can write 100% semantic HTML in React.
  • Use buttons for buttons, links for links, tables for tables and headings h1 - h6 to create hierarchy.
  • Set page titles. This is the first thing that a screen reader reads. In a SPA app it should be updated in componentDidMount.
  • Add image alt attributes.
  • Use SVG, as they can be zoomed in on by users with low vision. Add title and desc tags on svgs, especially if they are used as buttons or links.
  • Manage focus. In a SPA app, set keyboard focus in componentDidMount for users who navigate with a keyboard.
  • Don’t rely solely on color to convey meaning. Use high contrast. Provide contextual information along with the color that conveys meaning.

The above is just a sample of the good advice that Neha shared in her talk. Complete slides are available here. In them, Nivedita includes lots of code examples, including how to build a ChangeAnnouncer, a class meant to announce changes in the state or routing of your app that might otherwise go unnoticed by visually-impaired users.

Did you make it to JsConf 2018 in Carlsbad, CA? What did you think, and what did you come away thinking about?

''