Jesse Harlin


Mobile Hybrid Apps

Innovative Business Software

Mapviz and Dataviz

Virtual Reality

Interactive Art

<script type="text/javascript">// workaround for IE table layout bugs
 function tableWorkaround(cols) { 
   if (document.all) { 
    document.write('<tr>'); for (var i = 0; i < cols; i++) { 
    document.write('</tr>') }; 
function tableWorkaround2_colheader() { 
  if (document.all) { 
    document.write('<col width="0">') }; 
function tableWorkaround2(rowHeight) { 
  if (document.all) { 
    document.write('<td height="' + rowHeight + '">'); 
    document.write('</td>') }; 
  • 1x1.gif
  • PixelFonts
  • This thing:


  • DD_roundies

(thankfully mostly don't)


  • Standardization efforts begin
  • Actionscript added in Flash 5
  • Browser wars ignite
    • Firefox (2002)
    • IE6 (2001)
  • Poor Developer tooling
  • Really mostly CSS/HTML
YAHOO.util.Dom.setStyle('test', 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity'); = function() {
	var privateVar = 'Something';
    return {
    	publicThing: 'whatever'

"Did you like Java? Sure you do. You'll love this. Sorta."

var Animal = new Class({
    initialize: function(age){
        this.age = age;
var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        this.parent(age); // calls init of Animal class = name;
var myCat = new Cat('Micia', 20);
alert(; // alerts 'Micia'.
alert(myCat.age); // alerts 20.

"Modular, Object-Oritented. Feels ...uh..classy"

$$("div p a").each( function(element){
        // 'this' refers to the DOM element on which the event occurred.
    } );
} );

Try.these(Function...) -> firstOKResult

"We have a bling-bling function"

  function basicFadeinSetup(){
     //Style the dom node to opacity 0;"basicFadeNode", "opacity", "0");

     //Function linked to the button to trigger the fade.
     function fadeIt() {"basicFadeNode", "opacity", "0");
        var fadeArgs = {
          node: "basicFadeNode"
     dojo.connect(dijit.byId("basicFadeButton"), "onClick", fadeIt);
  • One foot in the world of 'classical' programming, another in the world of Dom selection
  • YUI, Dojo, Prototype, and Mootools have differing worldviews about JS
  • Most 'rich' web interaction, you're expected to use Flash
  • There are also competing technologies coming out to "mirror desktop" development, such as ASP.NET (2002), which is to replace ASP (Active Server Pages)

$('.my-carousel').carousel({visible: true})
  • Suddenly New plugin Ecosystems
  • Paid for Plugin Ecosystems
  • Jquery UI (patterns for plugin lifecycle)
  • (Eventually, Bootstrap)
  • Very popular in the Frontend for many years

not everyone who uses JavaScript is a software developer with an eye for good code ...all sorts of ugly JavaScript code perpetuates itself on the Internet.

a quick and dirty approach (is taken) to writing JavaScript. It's only script code, after all, and just slapping the code into a text editor to get the desired result is all we need. It's not until we have to untangle a mess that we realize a more disciplined approach would have ultimately saved us time.

With all of these problems in the JavaScript environment – why do we still want to torture ourselves by writing JavaScript code?

- Scott Allen

"Microsoft Bruh", circa 2007

Don't write it, buy it.

  • Need ways to actually organize the code
  • Backbone, Marionette, Knockout
  • Clear patterns, MVC, MVVM, MV* and so on
  • 'Data Binding'
  • Strong shift to client side control and routing
  • Node.js really kicks off, Express
  • Strong developments in unit testing
  • Templating frameworks explode
  • D3 and visualization
  • Rapid progress everywhere


timeline by Adam Bradley


    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });


  • Packaging delivery and ecosystem of code
  • Web is firmly no longer 'just include a script tag', build steps are normal.
  • Grunt, Gulp, Bower, Skeleton, Webpack and others
  • Preprocessors and transpiled languages like coffescript, typescript and esoteric ones like 'Arnold C'
  • Linting tools
  • Node now has many frameworks, Express, Hapi, etc.



module.exports = function(grunt) {
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']

  grunt.registerTask('default', ['jshint']);
// Transpile, concatenate and minify scripts
function scripts() {
  return (
      .pipe(webpackstream(webpackconfig, webpack))
      // folder only, filename is specified in webpack config

const js = gulp.series(scriptsLint, scripts);
//By the way they're never this simple.
var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
gulp.task('bundle', function () {
    var bundler = browserify(config.js.src)  // Pass browserify the entry point
    .transform(coffeeify)      //  Chain transformations: First, coffeeify . . .
    .transform(babelify, { presets : [ 'es2015' ] });  // Then, babelify, with ES2015 preset

    bundle(bundler);  // Chain other options -- sourcemaps, rename, etc.

Google Closure Compiler
Google Web Toolkit

  • React and Vue
  • React Native, and Hybrid Mobile
  • Sophisticated Videogame Tooling
  • Web GL
  • Wasm
  • Robots (Johnny 5, etc)
  • Folks, there's a lot out there now....



(but here's some advice)

Putting it together






Practice Daily

or at least regularly

  • Window-shop Frameworks
  • 'spike' ideas in tools like
  • Experiment
  • Read the quick start
  • Twitter Follow devs
  • Blog-Reading counts
  • Mentally categorize as you go


Talent is a Pursued interest

anything you're willing to practice, you can do.

Gear Up

Old Problems, New Tools

  • Use a good editor, like VS code
  • Ignore pointeless 'aesthetic arguments'
    • Vim v Emacs
    • Spaces/tabs
    • semicolons?
  • Use prettier or some linter
  • Es6 is worth it to learn.
  • Get familiar with github, CI and things like that
  • Use the new tools to fix legacy code
    • Don't assume old code is 'sacred'



Professionally. Personally.

  • Firstly, your literal health
    • your eyes
    • are you moving enough?
    • what are you sitting in
  • Think like like an athlete
    • (instead of feeling sore, we get stress)
  • Your skills : can you add value to others?
    • It doesn't have to be new and shiny, but knowing how to translate old things to new things is useful
  • Consider an hour tracker, or even text files
  • Set aside time for research.


Maintain a Lifeboat

Metaphorically Speaking.

  • Try to build up and hold a 'jetpack fund'
  • Always be applying and looking
    • 3 years is a long run at a company
  • Gather your accomplishments regularly
  • Spend time connecting with other devs
  • Don't let your job be tightly coupled to your identity
    • Think "like a gigging musician"


Don't Give Up!


Javascript we sill gotta deal with in 2019

By Jesse Harlin

Javascript we sill gotta deal with in 2019

  • 2,062