Broonix Rants

Migrating my blog to Astro (with Claude)

Wed, 20 May 2026 12:00:00 GMT

So it's been ages since I posted or updated this blog. I don’t know what the root cause was, but life just got busy, and I didn’t have time for this blog.

Now I plan to restart blogging; the practice of learning and writing has been helpful in growing as a developer. Given that the software development landscape is changing, expect many posts on AI.

Now, if you’ve been to this blog before, you might notice it looks a little different, works a little faster, and renders a bit better. I wish I could take credit, maybe I can, but I haven’t touched a single line of code. I’ve been riffing with Claude. The LLM has done all the work, and I’ve been directing.

I’ve fixed countless bugs that crept into the previous version. I’ll be honest, that was my fault. I had left this blog to rot. It was countless versions behind the Gatsby ecosystem.

You’ll see this blog is now on Astro. It renders with zero CLS. It's been migrated to Tailwind. For me, this has been an exercise in working with LLMs. If you haven’t read Steve Yeege’s Gas Town, here are his ‘The 8 Stages of Dev Evolution To AI’

I’m somewhere between 6 and 7. I’m still not sure how I feel about all this. We have for sure found a new way of working. I just hope token costs do not become a limiting factor. Even my fun little blog refactor has easily eaten up my 5-hour token limits in 45 minutes.

Going forward, the deal here is simple: I won't write code for this blog again, Claude will. But every word you read is mine. No LLM drafts, no "polish this paragraph," no ghostwritten ideas. The writing is the part I'm not outsourcing. Expect to see more posts as I stumble my way into this new AI era.

Brooksmarks Feb 14th 2020

Fri, 14 Feb 2020 08:00:00 GMT

Here are a few things I read over the last month that I wanted to share.

Your online activity is now effectively a social ‘credit score’

https://www.engadget.com/2020/01/17/your-online-activity-effectively-social-credit-score-airbnb/

Technical Debt Is like a Tetris Game

https://www.fluentcpp.com/2020/01/17/technical-debt-is-like-a-tetris-game/

Why do we fall into the rewrite trap?

https://www.justindfuller.com/2020/01/why-do-we-fall-into-the-rewrite-trap/

Burnout: 'Sick and tired of feeling sick and tired'

https://www.bbc.com/news/technology-50604035

Setting up source maps (NextJS 9, BugSnag)

Sat, 04 Jan 2020 08:00:00 GMT

I recently set up bugsnag and had to fiddle around to get source maps working. I wanted to share my setup in case it is useful to anyone else out there. I'm using NextJS 9 and hosting my application on Heroku. This guide assumes you have already installed and configured bugsnag in your NextJS app.

Generating source maps

Zeit provides a nice plugin to generate source maps as part of your build: https://www.npmjs.com/package/@zeit/next-source-maps. To setup source maps install this package.

npm install --save-dev @zeit/next-source-maps

or if you are using yarn

yarn install --dev @zeit/next-source-maps

Then in your next.config.js import the plugin and configure it. I'm using a few other plugins here withOffline for PWA support, and withBundleAnalyzer to check the size of the resulting bundle. The key items are withSourceMaps and setting devtool: 'hidden-source-map'.

const withOffline = require('next-offline')
const withSourceMaps = require('@zeit/next-source-maps')

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withSourceMaps(withOffline(withBundleAnalyzer({
  devtool: 'hidden-source-map',
  publicRuntimeConfig: {
    BUG_SNAG_KEY: process.env.BUG_SNAG_KEY,
    STAGE: process.env.STAGE,
    VERSION: process.env.HEROKU_RELEASE_VERSION || 'dev',
    COMMIT: process.env.HEROKU_SLUG_COMMIT || 'dev',
  },
  workboxOpts: {
    ...
  },
})))

Uploading source maps post build on Heroku

The first thing you should do is enable dyno metadata. This will give you access to the build and dyno metadata so we can properly link releases to their code.

heroku labs:enable runtime-dyno-metadata -a <app name>

Now if you pull your app's config you should see some additional metadata.

$ heroku config -a <your app>
=== <your app> Config Vars
BUG_SNAG_KEY:           hidden
HEROKU_APP_ID:             hidden
HEROKU_APP_NAME:           <your app>
HEROKU_RELEASE_CREATED_AT: 2020-01-04T08:00:00Z
HEROKU_RELEASE_VERSION:    vNN
HEROKU_SLUG_COMMIT:        <some_sha>
HEROKU_SLUG_DESCRIPTION:   Deploy <some_sha>

Next lets install bugsnag's upload CLI.

npm install --save-dev bugsnag-sourcemaps

or if you are using yarn

yarn install --dev bugsnag-sourcemaps

Sweet, now we have all the info we need to tell bugsnag about this release. We can set up a post build task that runs a script to upload our source maps. Lets add that to package.json:

{
  ...
  "scripts": {
    ....
    "postbuild": "./scripts/upload-sourcemaps.sh"
  }
}

Then in the post build script /scripts/upload-sourcemaps.sh:

./node_modules/bugsnag-sourcemaps/cli.js --api-key $BUG_SNAG_KEY --app-version $HEROKU_RELEASE_VERSION --upload-sources --directory ./.next/ --overwrite

That's it, next time you release on heroku you should see source maps uploaded during the build process.

Brooksmarks January 2nd 2020

Thu, 02 Jan 2020 08:00:00 GMT

Here are a few things I read over the holidays that I wanted to share.

Alienated, Alone And Angry: What The Digital Revolution Really Did To Us

https://www.buzzfeednews.com/article/josephbernstein/in-the-2010s-decade-we-became-alienated-by-technology

Why Your Brain Needs Exercise

https://www.scientificamerican.com/article/why-your-brain-needs-exercise/

I asked my students to turn in their cell phones and write about living without them.

https://www.technologyreview.com/s/614934/teenagers-without-cell-phones/

Designing accessible color systems

https://stripe.com/gb/blog/accessible-color-systems

NextJS: Fallback image

Sat, 31 Aug 2019 09:00:00 GMT

Quick post on a problem I recently had to solve. I was looking to have an image tag fallback to a different image if the image set in the src property doesn't load.

Now normally you can handle this all on the client side using the image tags onError listener. There is a bit of a trick to get this idea to work with NextJS. The onError event may not be fired when rendering via SSR. This is because the image content may load before ReactDOM has completed hydration.

Once simple way to work around this issue is to force this to happen after ReactDOM has completed hydration. This can be accomplished by forcing the fallback to always happen on the client side.

const renderImage = (image, fallbackImage) => {
  const onerror = `this.onerror=null;this.src=this.dataset.fallbackImage;`
  return (
    <div dangerouslySetInnerHTML={{
      __html: `<img onError="${onerror}" data-fallback-image=${fallbackImage} src="${image}" />`
    }}>
    </div>
  )
}

I created a small demo of this idea in GitHub: https://github.com/brookslyrette/image-with-fallback

Happy coding!

Brooksmarks Aug 18th 2019

Mon, 12 Aug 2019 09:00:00 GMT

Here are a few things I read this week that I wanted to share.

Work Together Anywhere: What Great Remote Teams Look Like

https://www.infoq.com/presentations/work-remotely-team/?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global

Frontend Design, React, and a Bridge over the Great Divide

http://bradfrost.com/blog/post/frontend-design-react-and-a-bridge-over-the-great-divide/

GitHub stars won’t pay your rent

https://medium.com/@kitze/github-stars-wont-pay-your-rent-8b348e12baed

One job, many roles. The different skills needed to be a successful CTO

https://madewithlove.be/one-job-many-roles-the-different-skills-needed-to-be-a-successful-cto/

NextJS & Heroku: HTTPS by default

Mon, 05 Aug 2019 09:00:00 GMT

I recently ran into the case where I wanted to ensure all traffic to my NextJS site was happening over HTTPS. Since my site is deployed using next start on heroku, I ended up implementing this using a custom server that checks all requests are https before handling them.

Here is the completed server.js implementation.

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const port = process.env.PORT

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    if (!dev && req.headers['x-forwarded-proto'] != 'https') {
      const { host } = parse(process.env.HOSTNAME)
      res.writeHead(302, {
        Location: `https://${host}${req.url}`
      })
      res.end()
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

The redirect only fires in production mode and it uses a environment variable that contains the servers hostname. You'll notice that it does not check the requests URL or protocol. This is because all traffic from Heroku's router to your server happens over HTTP. You can see if the request is https by checking the value of the x-forwarded-proto header that Heroku adds.

You'll also have to update your start script to run your server and not the nextjs default.

...
"scripts": {
  "dev": "next",
  "build": "next build",
  "export": "next export",
  "start": "NODE_ENV=production node server.js"
}
...

Notes and Limitations:

This does not support sites hosted using next export
Changes to server.js are not hot reloaded.

Remote working: Six months in

Sat, 09 Mar 2019 09:45:00 GMT

So I've been back to working remotely for 6 months. I figured it was time to write a post about what it has been like getting back to working remotely.

First a little background. This is not my first time working remote. I worked with a great company out of New York from 2007 - 2016. The last 7 years there I worked remotely from my home office in Ottawa. In 2016 I was looking for a change and ended up taking a role that required me to trek across the city to an office.

For me at least, the cons of office work out weight the pros. The largest con was that my daily commute took 35 - 90 minutes each way depending on traffic. I'm a guy who loves cars, but getting to and from work isn't a pleasure drive it's commuting. I even adjusted my hours to try to minimize the time I lost daily sitting in a car staring at the bumper in front of me.

Now office life isn't that bad. Over two years I worked at two companies both with different types of offices. The first was an open office. I quickly learnt that I'm just not built to work in an open office. It's just too noisy and I get constantly distracted. Headphones really helped, but if you're going to isolate yourself with sound why not just find a quiet spot to write code? Cubicle land was much less distracting. I had the pleasure of working with some great developers and I still miss impromptu chats in the kitchen or around the coffee machine. Those organic moments of human interaction don't happen working remotely.

I'm in love with my new remote work schedule. All that time I was losing to my commute is now my time again. No more 7 am drives across the city to beat traffic. My morning is now fresh coffee at home, a workout and I'm at my desk by 9 am. When I wrap up all I'm already home.

There are a few things I'm keeping an eye on though, remote work isn't all roses. It can be hard to decompress when you wrap up your workday. Without a clear separation between work and play, life can get monotonous. I'll post another update in a few months.

Styling with CSS variables

Sat, 16 Feb 2019 19:45:00 GMT

This weekend I've messing around with CSS variables. I figured it might be fun to see if I could build a way to style this site using only CSS variables.

What are CSS variables? Well after all these years we finally have a way to define a value and reuse it in other places. Sure SASS and LESS gave us access to something similar, but compile down to CSS. Variables are dynamic in CSS so we can even be redefine at run time. Their syntax is nice an simple.

Quick note: This post is best viewed in a modern browser that supports css variables.

Defining a new CSS variable looks like this:

.some-css-selector {
  --primary-text-color: #666;
}

Then when you want to use that value:

.another-css-selector {
  color: var(--primary-text-color);
}

You can also provide a fallback value in the case the variable is not defined:

.another-css-selector {
  color: var(--primary-text-color, #777);
}

Right now this blog is a mix of pair CSS files and Emotion for component styling. The CSS files are reset.css which is a generic CSS reset file to ensure a standard look and feel between browsers and theme.css which styles things like links, code blocks and inline code.

Updating everything to use CSS variables was ridiculously simple. I worked out the list of all colors used on my blog and their function. I defined all the new values I need as part of the :root element of my document in theme.css:

:root {
  --primary-text-color: #666;
  --secondary-text-color: #777;
  --heading-text-color: #333;
  --link-text-color: #333;
  --inverted-text-color: #f8f8f8;
  --body-bg-color: #fff;
  --highlight-color-dark: #0d6186;
  --highlight-color-light: rgba(13, 97, 134, 0.45);
  --footer-text-color: #b3b3b3;
  --footer-border-color: #ddd;
  --code-background-color: #fbfaf8;
  --code-inline-color: #c25;
  --code-block-color: #000;
  --code-border-color: rgba(0, 0, 0, 0.15);
}

Then all I needed to do was update any usages of these colors in my CSS files and Emotion styled components. Here's what the Tag component now looks like:

const StyledTag = styled.span`
  display: inline-block;
  text-transform: uppercase;
  margin: 0 4px;
  font-size: .65rem;
  transition: all 350ms;
  position: relative;
  top: -1px;

  a {
    color: var(--inverted-text-color);
    text-decoration: none;
    padding: 3px 5px;
    border-radius: .25rem;
    background-color: var(--highlight-color-light);
    transition: all .5s;
    white-space: nowrap;

    &:hover {
      background-color: var(--highlight-color-dark);
    }
  }
`

Now to the viewer this blog it more or less looks the exact same as before, but one of the coolest things about CSS variables is that you can redefine them at runtime. Given my new blog format I can now create much more interactive demos. Something like this:

You can load any theme and browse around my blog. The theme will remain active until you reload the page. If you are wondering how my ThemeChanger control works here's the source code.

themeChanger.js:

This component handles updating the DOM and state when our CSS variables change.

import React, { useState } from 'react'
import styled from '@emotion/styled'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit } from '@fortawesome/free-solid-svg-icons'

import { themes, cssVarList } from './themes'
import ColorEditor from './colorEditor'
import ThemeButton from './themeButton'

const prettyLabelName = label => label.substring(2).replace(/-/g, ' ')

/**
 * Sets new values for all CSS variables the sites theme uses.
 */
const updateCssVars = theme => {
  const body = document.documentElement
  cssVarList.forEach((variable, i) => {
    body.style.setProperty(variable, theme[i])
  })
}

export const ThemeChanger = () => {
  // hook that stores the active theme
  const [activeTheme, setActiveTheme] = useState(themes['Default Theme'])
  // hook that stores the active edit pane
  const [activeEditor, setActiveEditor] = useState(-1)

  const changeTheme = theme => {
    setActiveTheme(theme)
    updateCssVars(theme)
  }

  const toggleEditor = index => {
    setActiveEditor(activeEditor === index ? -1 : index)
  }

  return (
    <Wrapper>
      <h2>Theme Switcher</h2>
      <p>
        Select theme an existing theme or create your own!
      </p>
      <ThemeButton themeName="Dark Theme v1" setTheme={changeTheme} />
      <ThemeButton themeName="Dark Theme v2" setTheme={changeTheme} />
      <ThemeButton themeName="Default Theme" setTheme={changeTheme} />
      <ThemeButton themeName="Green Theme" setTheme={changeTheme} />
      <ThemeButton themeName="Orange Theme" setTheme={changeTheme} />
      <div>
        <h2>Custom Theme Builder</h2>
        {activeTheme.map((setting, i) => (
          <StyleSettingContainer key={i}>
            <StyledLabel>{prettyLabelName(cssVarList[i])}</StyledLabel>
            <StyledInput onClick={() => toggleEditor(i)} readOnly type="text" value={setting} />
            <EditIcon open={i === activeEditor} onClick={() => toggleEditor(i)} icon={faEdit} size="1x" />
            {activeEditor === i ? (
              <ColorEditor
                setting={setting}
                index={i}
                setActiveEditor={setActiveEditor}
                setTheme={changeTheme}
                activeTheme={activeTheme}
              />
            ) : null}
          </StyleSettingContainer>
        ))}
      </div>
    </Wrapper>
  )
}

const StyleSettingContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
`

const StyledLabel = styled.label`
  text-transform: capitalize;
  width: 200px;
  text-align: right;
  margin-right: 6px;
`

const StyledInput = styled.input`
  width: 200px;
  border-radius: 6px;
  padding: 5px;
  border: 1px solid #bebebe;
`

const EditIcon = styled(FontAwesomeIcon)`
  position: relative;
  left: -25px;
  color: var(${ ({ open }) => open ? '--highlight-color-dark' : '--highlight-color-light' });
  cursor: pointer;

  &:hover {
    color: var(--highlight-color-dark);
  }
`

const Wrapper = styled.div`
  text-align: center;
  padding: 16px 0;
`

themeButton.js:

A button element that loads a pre-made theme.

import React from 'react'
import styled from '@emotion/styled'
import { themes } from './themes'

const ThemeButton = ({ themeName, setTheme }) => {
  const selectedTheme = themes[themeName]
  return (
    <StyledThemeButton
      type="button"
      color={selectedTheme[6]}
      onClick={() => setTheme(selectedTheme)}
      value={themeName}
    />
  )
}

const StyledThemeButton = styled.input`
  background-color: ${ ({ color }) => color };
  border: 1px solid ${ ({ color }) => color };
  color: #f8f8f8;
  margin: 2px 5px;
  height: 32px;
  border-radius: 6px;

  &:hover {
    cursor: pointer;
    color: ${ ({ color }) => color };
    background-color: #f8f8f8;
  }
`

export default ThemeButton

colorEditor.js:

Opens a react-color color picker and handles updating the color.

import React from 'react'
import styled from '@emotion/styled'
import { SketchPicker } from 'react-color'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'

const handleColorPickerChange = (index, color, activeTheme, setTheme) => {
  // use hex if the color is solid, else use rgba() so we can include the alpha channel.
  const value = color.rgb.a === 1
    ? color.hex
    : `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`
  const updatedTheme = activeTheme.map((themeValue, i) => {
    if (i !== index) {
      return themeValue
    }
    return value
  })

  setTheme(updatedTheme)
}

const ColorEditor = ({ setting, index, activeTheme, setTheme, setActiveEditor }) => (
  <Wrapper>
    <Editor>
      <CloseButton onClick={() => setActiveEditor(-1)} icon={faTimesCircle} size="1x" />
      <SketchPicker color={setting} onChange={color => handleColorPickerChange(index, color, activeTheme, setTheme)}/>
    </Editor>
  </Wrapper>
)

const Wrapper = styled.div`
  position: relative;
`

const Editor = styled.div`
  position: absolute;
  top: -42px;
  left: 0px;
`

const CloseButton = styled(FontAwesomeIcon)`
  position: relative;
  right: -117px;
  top: 8px;
  z-index: 1;
  color: var(--primary-text-color);
  cursor: pointer;
`

export default ColorEditor

themes.js

The list of pre-made themes and variables used for this sites theme.

export const themes = {
  'Dark Theme v1': [
    '#dedede',
    '#b8b8b8',
    '#fafafa',
    '#dedede',
    '#dedede',
    '#02111D',
    '#6c6ca3',
    'rgb(88, 110, 128, 0.45)',
    '#dedede',
    '#dedede',
    '#142534',
    '#6c6ca3',
    '##f8f8f8',
    'rgba(255, 255, 255, 0.15)'
  ],
  'Default Theme': [
    '#666',
    '#777',
    '#333',
    '#333',
    '#f8f8f8',
    '#fff',
    '#0d6186',
    'rgba(13, 97, 134, 0.45)',
    '#b3b3b3',
    '#ddd',
    '#fbfaf8',
    '#c25',
    '#000',
    'rgba(0, 0, 0, 0.15)'
  ],
  'Dark Theme v2': [
    '#dedede',
    '#b8b8b8',
    '#fafafa',
    '#dedede',
    '#dedede',
    '#02111D',
    '#ff3366',
    'rgb(255,51,102, 0.45)',
    '#b3b3b3',
    '#ddd',
    '#142534',
    '#ff3366',
    '#f8f8f8',
    'rgba(255, 255, 255, 0.15)'
  ],
  'Green Theme': [
    '#666',
    '#777',
    '#333',
    '#333',
    '#f8f8f8',
    '#fff',
    '#038c36',
    'rgb(3, 140, 54, 0.45)',
    '#b3b3b3',
    '#ddd',
    '#fbfaf8',
    '#038c36',
    '#000',
    'rgba(0, 0, 0, 0.15)',
  ],
  'Orange Theme': [
    '#666',
    '#777',
    '#333',
    '#333',
    '#f8f8f8',
    '#fff',
    '#ff9900',
    'rgb(255, 127, 0, 0.45)',
    '#b3b3b3',
    '#ddd',
    '#fbfaf8',
    '#ff9900',
    '#000',
    'rgba(0, 0, 0, 0.15)',
  ]
}

export const cssVarList = [
  '--primary-text-color',
  '--secondary-text-color',
  '--heading-text-color',
  '--link-text-color',
  '--inverted-text-color',
  '--body-bg-color',
  '--highlight-color-dark',
  '--highlight-color-light',
  '--footer-text-color',
  '--footer-border-color',
  '--code-background-color',
  '--code-inline-color',
  '--code-block-color',
  '--code-border-color'
]

There you have it, my blog can now be easily themed via CSS variables. If you have any questions or comments let me know below. Happy coding!

More notes on migrating my blog to Gatsby

Sat, 02 Feb 2019 15:38:59 GMT

I've nearly completed porting my blog to Gatsby. In my last few posts I outlined how I ported my ghost.io blog to GatsbyJS. Last week I pointed traffic at the new Gatsby version soft launching the new Gatsby version.

Since then, I've been still hacking away at the code. While I'm really happy with the result, my solution of using the exported JSON files from ghost.io isn't really useful when creating new posts. Last week I ended up creating my post in a Markdown editor then converting that to a one-line string for a JSON config file. That's not a user-friendly or scalable way to blog.

So I spent a little time today converting this blog to use a new format. I ended up discarding most of the old blog data and using a single JSON file to define all the posts. I've moved the content of each post out to its own Markdown file. This is the first post I'm writing with this new format and so far it is a pretty nice way to blog.

The next few things I plan to work on are:

Fixing up a few small bugs.
Improving mobile support.
Documentation.

At the end of all this, I'm hoping to open source the code that powers this blog.

New Blog! Powered by Gatsby

Mon, 28 Jan 2019 14:58:31 GMT

Okay, I know I've been negelecting this blog for too long. Why did my blogging slow down? It's complicated, I ended up leaving the remote workforce in 2016, which left me with a little less time for things like blogging. I do have good news, I'm back to working remotely and I'm hoping to blog a little more this year.

This is my first post since relaunchign my blog. I've replaced my old hosted ghost.io blog. It's now powered by GatsbyJs and hosted on Netlify. I gotta say it's been a great toolset to work with. I was able to use the exported data from ghost.io to preserve all my historical posts.

I've also tweaked the design a little. Here is a comparison of old vs new:

My next big blog project will be updating this new blog to a new format. I'd like to replace the legacy ghost.io data import with a simpler data format. Something more flexable and focused on my blogging use-case.

Displaying Expo Snacks Gists in React and Gatsby

Sat, 05 Jan 2019 14:58:31 GMT

I'm still in the process of rebuilding my blog in GatsbyJS. The project so far is going really well. In last weeks post, I outlined how I was loading data into Gatsby and rendering the basic pages. This week I've been working on rendering the Gists and ExpoSnacks I have embedded in most of my posts.

The data export from my old blog uses a mix of Markdown and HTML. Post content looks like this:

## Creating a navigator

We will use a StackNavigator for this example. 

<Gist id="brookslyrette/bf3df2ad046a3fa0f464203a6c0b7e2d" />

Above we create a StackNavigator with three screens. We provide it with...

After I finish getting my old posts on the Gatsby version of my blog, I'll want to create new posts. Now I don't want to again use a mix of Markdown and HTML. My hope is to mix Markdown and React. I'm hoping new posts will look something like:

## Creating a navigator

We will use a StackNavigator for this example. 

<Gist id="bf3df2ad046a3fa0f464203a6c0b7e2d" />

Above we create a StackNavigator with three screens. We provide it with...

I'm using markdown-to-jsx to render Markdown. This library will let me easily handle both cases. We will use overrides to look for script tags or div that should be replaced with a Gist or ExpoSnack to handle old posts. We'll also setup overrides to which will let us use React components in new posts.

First lets look at handling just the case of replacing script tags that represent a Gist.

To handle the case of new blog posts all we have to do is add one more line of configuration. Now, lets set up Gist as a component override.

If you load a post now you'll see Gists rendered within posts.

Here's the final version which also handles ExpoSnacks and converts img tags to gatsby images.

Some notes on migrating my blog to Gatsby

Tue, 01 Jan 2019 18:18:27 GMT

I've been kicking around the idea of porting my blog to Gatsby. It's not that I'm unhappy with my current blog set up, it's more of an excuse to play with Gatsby. If you haven't heard of Gatsby, it's a React based static site generator that creates blazing fast websites.

In this post we will cover:

Exporting data and images from my old Ghost blog.
Using this data in Gatsby.
Create an index and blog post pages.

Exporting existing data

My blog is currently powered and hosted by Ghost. Ghost's admin tools make it really easy to get an export of your blog's underlying data. The only thing that was a bit suboptimal was having to email their support team to get an export of the images used on my blog.

Ghost's export data format is JSON based. It contains a bunch of data we won't need. Here's what the export looks like:

Using this data with Gatsby

One of the reasons I'm excited to try out Gatsby is that it uses GraphQL, but before we can start querying data we must first import this data into something Gatsby can use. Luckily Gatsby ships with gatsby-transformer-json which reads in JSON files.

I decided to break up the JSON export into multiple files. I extracted posts, tags and posts_tags into their own JSON files. This is so that we can have a bit more flexibility when query and filter this data.

Now all you have to do is configure Gatsby to read in these JSON files. Configuration is very simple, just tell Gatsby where to find the files by adding this to your gatsby-config.js:

Here's where I ran into a small issue. The export from Ghost uses numbers as ID's. Gatsby expects all ID's as strings. Now there are many ways to handle this, I ended up forking Gatsby and forcing it to convert any non-string IDs to a string: https://github.com/brookslyrette/gatsby/commit/50570fc9028297f1e508bf03da38f9c8f85bb922.

Now you should be able to query your data using Gatsby's built-in GraphiQL browser. You'll have root objects for posts, tags, etc.

Creating an index page

If you are using any sort of Gatsby starter project you'll already have a file called pages/index.js. Any file in pages will get converted to a static page by Gatsby. Let's update this page to query our data and list all blog posts.

Now if you navigate to http://localhost:8000 you'll see a page listing every post in the data set.

Creating pages for posts

Now we can create the pages for each post. Unlike our index file, these are dynamically created based on our data. We'll use createPages from Gatsby's Node API. createPages will be called after initial sourcing, transformation of nodes and creation of the GraphQL schema is complete. Now we can update gatsby-nodes.js to query all posts and create pages using a template called /src/templates/post.js.

The data exported from Ghost contains the markdown for each post. All we need to do is pass that content to markdown-to-jsx to render a post.

Clicking on any article now will show you a nicely formatted blog post.

There we go, my Ghost blog is more or less working on Gatsby. There are however a bunch of outstanding items to be dealt with. Embedded scripts such as Gist's and Expo Snacks aren't being rendered, we need to add some paging to the homepage etc. Stay tuned for future posts as I add features and explore Gatsby.

Font Shadows in React-Native

Sun, 20 May 2018 12:56:27 GMT

A nice effect you can you in react native is text shadows. This works exactly as it does in HTML CSS but the setting names are just a little different.

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#555',
  },
  shadow: {
    color: '#fff',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 1,
    textShadowColor: '#000',
  },
});

const Example = ({ children }) => (
  <SafeAreaView style={styles.body}>
    <Text styles={styles.shadow}>Shadow Text</Text
  </SafeAreaView>
);

Setting up Google Home on a Google Apps for Business domain

Sat, 30 Dec 2017 14:00:06 GMT

So I recently setup a Google Home for one of my @lyrette.ca domain users. Sadly the process was not seamless and I had to stumble around the internet to figure out why.

So here are the two things I needed to enable to get actually setup a Google Home device on my domain.

Under your domain admin navigate to Additional Google services.

##Enable Voice Services

##Enable Web & App Activity

Enabling Web and App Activity was the step it took me forever to figure out. Hopefully this saves someone a ton of Googling for answers.

Adding coverage reports to a React Create App using Coveralls.io

Sat, 14 Oct 2017 12:27:28 GMT

In my last post, we covered creating a CI pipeline using TravisCI and GitHub Pages. Now let's add coverage reports to the build setup.

Setting up Coveralls.io

We will use coveralls.io to provide the reporting. They provide this for free to any public GitHub project. Head over to their site and create an account. After setting navigate to 'Add Repos' and toggle it to on for your project.

Now hit 'details' to get the token for this repo. You can ignore the instructions shown here. You just want to token. They don't apply to a project built with react-create-app.

Setting up TravisCI

Your token is private and you shouldn't check it into a public repo. So we will use TravisCI's build settings to pass it into our build system. This way the token remains secure.

Adding Coveralls to your project

You'll need to bring in the coveralls package.

yarn add --dev coveralls # yarn users
npm install --dev coveralls # npm users

Project configuration changes

Now we need to make a few tweaks to the project files. First, let's make sure coverage gets ran with each build and that we upload the report to TravisCI.

Add a new target to packages.json that defines a coveralls task to parse the coverage files.

This is done in .travis.yml. We will make two changes. The first tells the tests to include coverage reporting, the second uploads the coverage report after each build.

Now commit and push these changes to GitHub. Once your build has completed you should see your first coverage report in Coveralls.io!

There you have it, now every new build includes a coverage report. You can even take the badge generated in coveralls and add it to your projects README.md.

You can see this setup in action here: https://github.com/brookslyrette/react-sudoku-solver

If you have any questions please leave them in the comments below. Happy Coding!

Building and Deploying a React Create App to GitHub Pages Using TravisCI

Fri, 13 Oct 2017 01:33:00 GMT

It is surprisingly simple to deploy a public react-create-app built project on GitHub. In this post, we will look at how to set up a continuous integration pipeline using TravisCI and GitHub Pages.

Setting up Continuous Integration Builds

Continuous integration (CI) makes deploying an updated app so simple you don't even have to think about it. After your commits are pushed to GitHub, a new build will get kicked off.

You will need to create a TravisCI account. After creating your account. You'll be able to select which of your GitHub projects.

I'll be setting up this CI pipeline for my sudoku solver app. The first step is to enable builds for this project.

Now that we have configured the project to be built. We have to tell TravisCI how to build our project. We will define how our project is built in a file called .travis.yml.

Commit this file and push your changes to GitHub. In a few minutes, you'll see an automatic build kicked off.

Setting up auto deployment to GitHub Pages

Now that we have the app building on every commit, let's auto deploy it to GitHub Pages. You will need to create a GitHub access token with the repo security level in order for this to work. To create this token, login to GitHub and create a token here: https://github.com/settings/tokens/new

Copy the value of this token. This is a private token that gives access to your GitHub repos. Never check this token into a public repo.

Now we can tell TravisCI about this token. You can do so from the build screen. Navigate to settings and define a token called github_token setting the value to the token you created.

Now we can add the deploy step to our .travis.yml.

We also need to let our app know what it's URL will be. This is done in the projects packages.json file. For my project this gets set to:

  "name": "sudoku-solver",
  "version": "0.1.0",
  "homepage": "https://brookslyrette.github.io/react-sudoku-solver/",
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2"
  },
  ...
}

The format is https://<usename>.github.io/<repository_name>/

Commit and push these changes to your repository. Once the build is complete your application will be deployed.

You can see this in action here: https://github.com/brookslyrette/react-sudoku-solver

If you have any questions please leave them in the comments below. Happy Coding!

Getting started with React Navigation

Sun, 20 Aug 2017 19:51:40 GMT

I recently had some time to try React Navigation. It's a very nice routing solution to use in your React Native applications. Let's walkthrough a simple example of using React Navigation in a project.

Project Setup

We will use create-react-native-app for this demo. Ensure you have it installed via npm install -g create-react-native-app. We will start by creating a new project:

$ create-react-native-app ReactNavigationDemo
# cd ReactNavigationDemo

If you run yarn run ios you'll see a simple single page demo application.

Adding React Navigation

We will install React Navigation using yarkpkg:

$ yarnpkg add react-navigation

Adding Screens

React Navigation lets us easily route from one screen to an other. So let's start by creating a few simple screens to start.

In the example above we create three components that render a view. Each of these will become a screen in our app that we can navigate to.

Creating a navigator

We will use a StackNavigator for this example.

Above we create a StackNavigator with three screens. We provide it some coloring and a default title. I'll elaborate a bit more on styling the navigation bar later in this article.

If you load up the app you should now see Screen1 with a navigation bar.

Well, we are 1/2 there already. We now need to add some navigation so we can move between screens.

Navigating

Now we will expand Screen 1 so we can click a button to navigate to Screen2 or Screen2.

As you can see we are binding the onPress event to navigate to the other screens in our app.

Note: this.props.navigation is not available to the child components on a given screen. You'll need to pass it down to the child components if you want to navigate from them.

Styling React Navigation

Here are what all style related properties I passed into the StackNavigator do:

navigationOptions: {
  headerTitle: 'Default App Title', // Title shown when a screen does not have a title
  headerTitleStyle: {
    color: '#FFF' // Color of the text in the header
  },
  headerStyle: {
    backgroundColor: '#f57c00' // Background color for bar
  },
  headerBackTitle: null, // Text for 'back' button. `null` sets this to an empty string
  headerTintColor: '#FFF', // Color of the text used in the back button/icons
}

Completed Demo

And here you have it. A rather simple example of how to get started using React Navigation in a React Native project.

If you want to check out this code and run it locally, I've also uploaded this demo to GitHub: https://github.com/brookslyrette/ReactNavigationDemo

AppleTV 4 Netflix UI Review

Sat, 08 Jul 2017 11:46:50 GMT

I've posted before about how much I like the new AppleTV. Now that I have used it for a few months I wanted to expand on my review of the Netflix app.

The Good

The Netflix app has to be one of the most polished apps on the platform. The attention to details is wonderful. Navigating you can see the little details are obsessed over. Sound effects pan based on the direction you are scrolling. Highlighting a shows poster and using the Siri remote's touchpad and you can see the lighting move based on your input. Scrolling feels smoother and more natural that any other app on the platform.

The Bad

There are two bugs in this UI that drive me BONKERS. With such a polished experience these US issues seem like odd stand outs.

Issue #1: After watching which you started playing on the 'show details' screen. The UI returns to that same screen on the same episode. I get why this seems like the correct UI, but it is not. If I just finished that episode why show me a screen to play the same episode? This should be loaded with the next episode ready to play.

Issue #2: When returning to the 'home listing' screen, the UI redraws your 'recently' watched list. It might just be a slow connection but this seems off to me. There is a good 2-3 second pause after navigating back to this UI before it attempts to redraw. This leads me to try to navigate before the UI is ready.

Overall

Overall this is still the most polished app on AppleTV. It even outshines Apple's apps in overall UI and UX.

Apple TV 4 Review

Sat, 20 May 2017 11:38:25 GMT

I've been waiting for ages to update my Apple TV 3 to the latest version. I recently finally found an excuse to upgrade! So here is my one week review of Apple's latest TV device.

The new Apple TV really shows off its speed and power with faster start-up times. V3 took 10-15 seconds to start up at times, while V4 is on in a fraction of that time.

The setup is ridiculously smooth. Hold your iPhone or device near your Apple TV and it downloads the configuration to your WiFi and other needed settings. All I had to do is enter my iTunes password and my new device was setup!

The Siri remote is a cute addition. Voice to text makes input and searching very seamless on the new device. Siri at times can still get confused but that might be my Canadian accent.

App, Apps and more Apps! Having an App store is a great addition. No more waiting for updates to maybe bring a new app or two. Most of the games are novel at best, but I do think kids will really enjoy them. I'll update my review after my nieces visit with their take on a few games.

My only complaints so far are not Apple related. I find the V4 Netflix app a bit lacking compared to V3. No more ratings (0 - 5 stars), shows no longer show a list of related items, and you can no longer see 'My List' from your Apple TV.

All in all, I'd recommend the upgrade if you are a heavy Apple TV user.

Git status in your BASH prompt

Wed, 22 Mar 2017 21:56:15 GMT

I'm a command line git user. I do 99% of my git related stuff without a GUI. I know the world is split about 50/50 between GUI users and command line users. But if you are like me, you'll love this post.

Anytime you go to do any command with git, you'll start with git status. You have to know what branch you are one and what the local state of your repo is. I've been using bash-git-prompt for a while to provide this info without needing to type anything. You can check out the project here: https://github.com/magicmonty/bash-git-prompt

Installing

Installation is dead simple:

cd ~
git clone https://github.com/magicmonty/bash-git-prompt.git .bash-git-prompt --depth=1

Then add this to your ~/.bash_profile:

GIT_PROMPT_ONLY_IN_REPO=1
source ~/.bash-git-prompt/gitprompt.sh

My customizations

I'm not a huge fan of the default settings. So I added a few customizations to my setup. I disabled remote fetching to speed up the prompt. I prefer a single line for my prompt. I use stashes for work in progress code so I don't want my stash count included in the prompt.

Customizations added in ~/.bash_profile

GIT_PROMPT_FETCH_REMOTE_STATUS=0   #avoid fetching remote status
GIT_PROMPT_THEME=Single_line_Ubuntu #better theme
GIT_PROMPT_IGNORE_STASH=1 #ignore any stashes.

This leaves my prompt looking like:

Upgrading to react-router v4

Sun, 19 Mar 2017 14:09:00 GMT

My previous article on upgrading to react-router alpha4 is still getting a lot of traffic. Below is an updated version of that post for the release version of react-router v4.

I decided to take a little bit of time and migrate my reactit demo app to v4 of react-router. I'll outline what changes I had to make for v4 as well as my thoughts on the new approach.

Migrating

Well, first things first. I installed the new version of react-router using npm.

npm install --save react-router
npm install --save react-router-dom

The big reason for this rewrite was 'Declarative Composability'. This means that routes are now just components. You might want to re-read that last sentence. This works really well in my demo app. The components themselves now define the composition of the UI.

Before all my routing was done in index.js. This is the same routing you see in most v2 apps.

The first thing I realised is that I can get rid of all this routing in index.js. We can just render the app and compose the UI based on the route. After removing all the routing index.js now looks like this:

When using v2, it was the route in index.js that injected the correct children to be rendered based on the route.

This is where v4 starts to shine. Now I can compose the UI based on the path as part of the App component. This is a much more concise way to define what is happening in the application.

While this is a very simple example with only two routes, you can quickly see the amount of forward thinking that has been put into v4. I'm already seeing some great use-cases that will be simpler (ex: side menus). It also feels more 'react' to have your routes be components.

Testing

In order to give routes to my components during testing, I simply wrapped them in <MemoryRouter/>.

As always this code is available on GitHub. You can see the commit that updates 'reactit' to react-router v4 right here: https://github.com/brookslyrette/reactit/commit/12c03798710b2e47eeb24a4b743d5cf5e7d2a86a

Getting Started with React Native and Redux

Sun, 26 Feb 2017 13:38:42 GMT

It's been far too long that I've been saying to myself: "Brooks you really should give React Native a try". So I've whipped up a quick 'how-to' article from my first foray into React Native. In this tutorial, we will create a new React Native project, integrate Redux and deploy on Android and iOS. To keep this first project simple we'll be remaking the Redux counter example.

Getting Started

You will have to install and configure React Native. You can find that documentation here: http://facebook.github.io/react-native/docs/getting-started.html

I recommend setting up both Android and iOS if you want to see the final product on both platforms.

We will call our project 'ReactNativeCounter'. To create a new project use this command:

~$ react-native init ReactNativeCounter

Integrating Redux

We will need Redux and React Redux. Redux integrates smoothly with React Native so you can pull these in via npm.

~$ cd ReactNativeCounter
~$ npm install redux
~$ npm install react-redux

Design

We will cover 5 basic React/Redux concepts. In three sections:

Actions
Stores/Reducers
Containers and Components

Actions

An action is sent when something has happened that will change our applications state. In this example, we will have 3 actions: 'INCREMENT', 'DEINCREMENT' and 'RESET'.

Stores and Reducers

A store is an object that represents the state of your application. In our case, the store for our application is simple a Number. This is the current counter value shown in the application.

Reducers handle actions. They are responsible for updating the applications state based on the action being handled. Reducer functions must be pure functions.

Containers and Components

To increase testability and ensure we properly separate concerns, I recommend using containers and components when creating renderable parts of a React application.

Containers

Containers are responsible for fetching data and rendering their components.

Components

Components are responsible for rendering data to the screen.

While our application is simple this is a React best practice so I've included it anyways.

App Layout

We'll add all our app related code in a new folder called 'App' in the root of our newly created project. Create theses folders as you follow along with the code below.

The code!

First, we will look at our reducer and the store it creates:

The reducer handles 3 simple actions. We should also write some tests for our reducing function.

Our reducer isn't that useful unless something generates actions. We will bind our actions and app state to our components via their containers.

Now our component only needs to render its view and bind the action generating functions we passed into it.

Now that we have all the moving pieces, we can wire them together. In App.js we connect our application to the Redux store and render a CounterContainer.

Now all that remains is configuring React Native to render this application for iOS and Android. There are two index files representing what each operating system will render. In our case we want both to render the application we designed above. This will be the code for BOTH index.ios.js and index.android.js.

If you have already configured Xcode and Android Studio you can see the resulting by running:

~$ react-native run-ios      #Launch iOS
~$ react-native run-android  #Launch Android

Clicking the up and down buttons will change the counter, clicking the counter will reset it to zero.

If you want to check out the code it's here on GitHub: https://github.com/brookslyrette/ReactNativeCounter

Happy Coding!

An Another New Year

Mon, 02 Jan 2017 13:30:10 GMT

So 2016 was a year for change for me. I started blogging weekly, quit my job at Dotsub to join Amazon and achieved some of my personal finance goals.

Looking back at 2016, I think I accomplished what I set out to do, be happier and enjoy life more. Blogging was once a chore but now I enjoy typing out a post with a morning coffee. Leaving Dotsub was a hard decision but so far it has been for the best.

This year I'm setting a few more goals than last. I'm also blogging them to have a better record to compare to next new year. So onward to 2017!

I want to find time to exercise 4-5 times a week. This use to be part of my routine last year. I could make excuses, but I simply need to get back to this!

Improve my guitar playing. I've been playing the guitar since I was a teenager. My skill level plateaued a long time ago. This is only because I don't use a structured practice routine. I just pick up the guitar and noodle. This year I'll set out to learn a few solos from my guitar heroes. This should improve my guitar chops.

I want to try using daily meditation. Maybe I've been listening too much Tim Ferriss, but I think meditation might be right for me. I'm addicted to this always on always connected existence we call life. Learning how to disconnect, even temporarily, will be good for me.

Ensure I stay in touch with old friends. I'm the worst at this, I'm such an introvert that I often forget to cultivate my existing friendships. I'm making it a goal to change this habit! In 2017 I'll be sure to stay in touch with those people I enjoy talking to.

Take more time to enjoy the little things. Be it a walk in the woods with my dog, spending time with family or any other little joy. I need to more actively acknowledge these small moments that I enjoy. What is life if it is not a small series of joys?

I look forward to a great 2017. I'll revisit this post next year to see how I did. Happy New Year!

Git commands everyone should know

Fri, 30 Dec 2016 13:45:43 GMT

Git is a phenomenal source control system. Having used some of its predecessors, SVN, CVS and SourceSafe, I'm always impressed at how much better things have gotten. If you have not seen Linus Torvalds talk about why he created git you should take an hour and watch it.

I do think too many developers just gloss over Git. They learn the basic commands they need day to day but miss out on some of the robust features Git has.

So here is my list of my most used and helpful Git commands.

Most used

I checked my bash history and the list is exactly what you'd expect. These are the commands everyone knows and uses day to day:

git status  #show the status of your working copy

git checkout <branch_name> #switch to another branch

git checkout -b <new_branch_name> #create a new branch

git add . #add everything from your working copy to be committed

git commit -m "<commit message>" #commit changes 

git pull #push your copy to the remote repository 

git push #pull any changes from the remote repository

Most useful

Here is my list of commands I use much less often but are very useful in a pinch.

Merging branches

git merge --squash <branch_name>

You should be using a branching model during development. This how to merge one branch into another. --squash is optional. Using it will squash all the commits into a single commit on the target branch.

Merging remote branch

git merge origin/<branch_name>

Not need to switch to and update a branch before merging it. Just git pull and merge the remote URL.

Squashing Commits

git rebase -i HEAD~<number_of_commits>

Forgot a file in the last commit? Did you do a lot of commits to track your work but want to roll them into just one commit? Use rebase to squash them together!

Cherry picking a commit

git cherry-pick <commit_hash>

Want to bring over one commit from another branch into yours? Well, that's what cherry pick is for! It'll just bring over the selected commit to your branch.

Resetting your local copy

git reset --(hard/soft) (<commit_hash>/<branch_name>)

We've all completely fucked up our local copy at least once. It's always fixable with git. Resetting hard will drop your changes, while soft will keep them as staged files. You can also use remote URL's here to reset to the server's working copy.

Create a patch file

git diff > a_file.patch 
git diff --cached > a_file.patch # if staged

Working remotely and want to have someone look at some code for you? Send them a patch file.

Apply a patch file

git apply --stat a_file.patch

Apply a patch to your local copy.

Stashing

This is my most used Git feature. I'd always surprised when I see people not using stashes. Stashes gives you a way to save local changes then restore them later.

This makes a few git tasks much easier. Need to switch tasks to work on something else? Stash your changes! Need to merge a branch into your local copy but you have active changes? Stash your changes! Tried an idea that didn't work out but what to revisit the code later? Stash your changes!

Saving a stash

git stash save "Optional Description"

Listing stashes

git stash list

Apply a stash

git stash apply <stash_index>

There you have it, a few commands to add to your git toolkit.

Netflix and it's missing content

Fri, 23 Dec 2016 12:32:58 GMT

I've been a long-time Netflix user. I signed up back in 2010 when they first launched their Canadian service. It's always been a product I've told people they should be using, but as we approach 2017 I'm really worried about their future offering.

First some background. When I signed up back in 2010 there was very little content in the Canadian market. I nearly cancelled after the first three free months. I really only stayed signed up because I discovered how to access the US library. From 2011 to 2015 I was a border hopper. Accessing the huge content library Netflix offered in the US.

My viewing habits might not be the norm. I always have a show that the wife and I watch together. But late at night, I love to watch random documentaries, off-beat shows and even a cheesy action movie or comedy once and a while.

This was simple and easy on US Netflix. It was workable on Canadian Netflix, but it's getting harder to do. Why you might ask. It's simple Netflix has bet huge on their own produced content.

Netflix has invested billions of dollars to produce over 100's shows this year. They have bet big on making their own content. In order to do this, they have had to cut spending elsewhere.

The amount of quality content on Netflix that is not owned by Netflix is slowly dwindling. Right now only a few are noticing it, but if this trend continues it'll be interesting to see what reaction the user base has.

My fear is that Netflix is becoming what we all tried to get away from with Cable. Large media companies (ABC, NBC, CBS) were once able to ram whatever crap down our throat they decided to put in a timeslot. There was no real alternative. Now you see Netflix, CraveTV, Shomi and most competitors in this market setting themselves up to be the new gatekeepers of media.

New URL!

Sun, 18 Dec 2016 13:06:05 GMT

I promised myself that if I blogged for an entire year, I'd get a proper domain for my blog. Well, that new URL should be active now! Welcome to rants.broonix.ca!

My posts are likely going to become monthly. While I still love blogging, I have a bit less free time with my new job.

One Week Post Remote

Sat, 26 Nov 2016 12:32:56 GMT

So I did it, just like the normal people. I got up a drove to an office 5 days this week. After so long working remotely it is quite an adjustment. I figured it'd be good to follow up my Remote Working post with an update after working at an office again.

The Bad

Commuting still sucks. This has to be the worst part. I do know this is my own fault, I knew when accepting the offer that the office would be the complete opposite side of town. I have been trying to make my commute time useful by listening to podcasts. I'm quickly running out of podcasts!

The Good

There so far is a lot more good than bad. I love the work thus far. Our team is a great group of people.

It's great to have a reason to leave the house. I know that sounds silly, but every person working remotely has had a week whereby Wednesday they are not sure if that have or have not left the house. Sometimes I'd even go work at a coffee shop just to make sure to get out.

Getting up to speed is also much easier. It's great to just have to walk a few feet or have someone be able to come over to your desk. No more fumbling with screen shares or posting screenshots to slack.

So far I think I made the right decision. It's going to take a while to adjust. I do have the bonus of a job that lets you work from home. So if I really miss being remote, I can just work from home.

No longer working Remotely

Sat, 12 Nov 2016 13:37:31 GMT

So after 7+ years I'll be going into an office to work. I know that is surprising since everyone wants to work remotely these days. While I've enjoyed the experience, I think it's time to switch back. I know commuting across the city will suck, but there will be some nice changes.

Leaving the house is something most people do every day. When you work remotely you often don't. Sure you might work a few hours from a coffee shop, but you can't stay there 4+ hours. You get a little bit of cabin fever after a while. My wife is, of course, the opposite. Having to leave home to go to work every day, she looks forward to getting back home after work. I'm the complete opposite, having been in the house all day, the first thing I want to do after work is to get out of the house.

Collaboration is almost never real-time when you work remotely. Sure you can schedule calls, use slack, and screen share, but it is just not the same as being in the same room collaborating on a whiteboard. I didn't realize how much I missed this until I started having to whiteboard answers in interviews.

The same goes for having off tasks. It's a lot more complicated to hand off work remotely. This is compounded when there are also timezone differences. You might have a 2-3 hour window at most to interact with some of your coworkers. You also might have to wait until the next day to get a reply for even a simple question.

The lines between work and home get blurred no matter how hard you try. I did lots to help keep the line between work and home well defined, but there is always some cross-over. My office never gets used on the weekend, simply because when I'm in there I feel like I'm working. Even if I'm coding up something fun, it feels like work. There is even some research that shows this increases work related stress.

Maybe this is all a case of 'The grass is always greener on the other side'. I'll let you know if it is in a month or two!

My thoughts on the new MacBook Pros

Sun, 06 Nov 2016 13:21:00 GMT

Apple announced new MacBook Pros last week. The new models are caused quite a stir in the tech community. While Pros feel abandoned by the new MacBook, Apple is saying they have record pre-orders.

The must-read review, in my opinion, is by Owen Williams: "Apple just told the world it has no idea who the Mac is for". Most of my complaints fall right in line with Owens.

Touchbar

Yea, I get that it's a 'cute' addition, but did you see the UX of using it? Here let me hunch over my computer staring at a little strip of light below the screen. It's 2016 and the best Apple can do is a small strip of screen interaction? There have been touchscreen Windows models for a few years and this is all Apple add to 'revolutionize' the new MacBook?

How is it possible to ship something like that without a few Apple developers mentioning how shitty it is to lose the hardware escape key?

They did keep a model that retains the hardware escape key and function keys. So at least there is that. Most Pro's I know will likely go with that option. So the revolutionary 'touchbar' is just not in line with what MacBook Pro users really need.

Cables, Adapters, and Ports

Apple is right, USB-C is likely the future. The only problem is, the future isn't now. No, people do not want to shell out $300 bucks for a pile of adapters they have to carry around!

I'll use myself as an example, when working I have the following plugged into my MacBook: 2 Display Port displays, MagSafe Charger, USB Display, USB iPhone connection and my headphone jack is plugged into my office speakers. Let's price these adapters out.

2 x Thunderbolt 3 (USB-C) to Thunderbolt 2 Adapter $70.00
USB-C to Lightning Cable (1 m) $25.00
USB-C to USB Adapter $10.00
USB-C Digital AV Multiport Adapter $59.00

That gives me the 5 adapters I need for my office, and an AV Multiport adapter to carry around. Since adding a goddamn HDMI port wasn't in Apple's design plans.

Don't even get me started on how the hell the MacBook Pro got a headphone jack, while the device designed to play music is without one! I'm glad they included one. I'm only angry since no headphone jack is one of the number one reasons I've skipped the iPhone seven. I guess if I'm already trucking around my 5 MacBook adapters one more for any iPhone isn't that much extra.

Why?

Why this is happening is pretty obvious if you ask me. The Mac product line use to fall into 3 categories for 3 distinct types of users.

MacBook Air: Light and sexy with enough power for a basic user's needs. This is what your mom or that guy in marketing needs. Enough to check your emails and update spreadsheets and documents.
MacBook: The laptop for the 'normals'. The amateur hobbyists. They might write a little code, they might do photography or video on the side. They need a bit more power than the Air, but since they don't do their day to day work on this computer they don't need to upgrade to the Pro.
MacBook Pro: The machine for the makers. The coders, the photographers, the video editors. Those who use their machine to create and make new things. They need high powered machines to get shit done.

With the new MacBook Apple has one and only one idea in mind. "How can we get people who use to buy our $1,500 laptop to buy a $2,000 laptop?". This is why sales numbers are up. However, in doing so they have abandoned their previous core audience.

Gource: Visualize a Repositories Commits

Thu, 03 Nov 2016 20:31:08 GMT

Who doesn't love interesting data visualizations? One of the neatest looking ones is visualizing commits to a git repository. Gource is my go-to tool to create these types of visualizations.

Here is a step by step on how to generate a video on MacOS.

Setup

First, you'll need to install gource and ffmpeg. I use brew as my package manager. Installing gource and ffmpeg is as simple as:

$ brew install ffmpeg
$ brew install gource

This might take a long time depending on what other packages you have installed.

Using Gource

Gource is very simple to use. Just type gource in the root of any git project.

There are also a ton of options you can enable and disable. I recommend setting a better resolution, disabling the bloom effect and hiding filenames. The bloom effect is horrible when you create a video. It gets very pixelated when the video is compressed.

You also might want to tweak seconds-per-day and auto-skip-seconds depending on how old the repo is.

Making a video

You can just pipe the output from gource into ffmpeg by doing:

$ gource -1280x720 -o - | ffmpeg -y -r 60 -f image2pipe -vcodec ppm -i - -vcodec libx264 -preset ultrafast -pix_fmt yuv420p -crf 1 -threads 0 -bf 0 <filename>.mp4

Here is one of the main repositories I committed to from 2007 - 2016. I used these settings to highlight my name and make it go a bit faster.

$ gource --hide bloom,filenames,dirnames --follow-user "Brooks Lyrette" --file-idle-time 15 --seconds-per-day 0.075 --auto-skip-seconds 1  --highlight-users --stop-at-end -1280x720

Is it just me or is everything a bit more dramatic when you set it to a classical waltz?

Dotsub: Any Video any Language

Wed, 02 Nov 2016 17:43:21 GMT

So after 9+ years at Dotsub, I figured it would be fitting to write a small post about my time there.

I can't believe it was that long ago that I joined a small team here in Ottawa to build the second version of Dotsub.com. Dotsub' founder Michael Smolens knew someone here in Ottawa that I had worked with on a consulting project. A few phone conversations later, I was ready to take the plunge and join a small startup.

There was a PHP prototype site in place, our plan was simple. Rewrite the site to be scalable and more extensible. Here is what Dotsub looked like in 2007.

In a few months, we hacked together a great foundation to build on. Two of us hacked away at the user interface and backend code, while one other hacked at the flash player. People don't remember how much more complex web video was in 2008. There was no <video> tag, CDNs were insanely expensive, there were very few decent flash players. Accessibility on the web seemed like an afterthought at best. Most of the video players on the market did event support subtitles/captions.

All our effort paid off in our maiden release. Just before we planned to release the first version of our implementation of Dotsub, a video went viral. Now the PHP version of the site wasn't that bad, but it was completely unable to handle any type of load. We had to quickly release our version before the PHP site melted. One of the other developers did some brilliant tweaks to the PHP site to buy us a week or two to release.

Then a few weeks later, we released our version of Dotsub.

We stayed up all night to migrate the data and direct traffic to the new site. On release, the site endlessly crashed. After a few hours of cursing and coffee, we had isolated the issue. Turns out we had a single line of code that was getting needlessly executed and eating up all the CPU cycles. It just goes to show you, no first release is ever smooth.

While a lot has changed since that initial release, it was this version that was the foundation for so many of the amazing things we accomplished at Dotsub.

There are too many exciting things to list them all. So I'll pick out a few of my personal highlights.

Most people don't know this, but a Dotsub video titled 'Twitter in Plain English' was on Twitters homepage.

This was before Oprah joined Twitter. The 'Watch a video!' button played this video:

This video has over 9 million views and 99 different translations. All generated by Dotsub users and seen by millions of Twitter visitors.

We also participated in the TED Talks translation project. Translating thousands of TED Talks into hundreds of languages. This was all done by tens of thousands of TED volunteers. This project truly embodied Dotsub mission. We helped to spread knowledge across the barriers of language and culture. Helping them share their content with tens of millions of non-English speakers around the world.

Those are just two examples of the global impact Dotsub and it's users have made. From my back of the envelope math, we have shown captions almost 1 billion people in the world.

On top of all the great work completed by our user community, don't forget we are a business. Dotsub's platform coupled with our amazing professional services. Have provided captions and translations to some of the largest companies in the world. Amazon, Google, Microsoft, IBM, and many others have used Dotsub to caption and translate their videos.

While my journey at Dotsub has come to an end, I'll never forget the amazing things we accomplished.

Exciting new opportunity

Thu, 27 Oct 2016 20:40:55 GMT

I know I haven't been giving my blog the amount of time it deserves of late! Things have just been crazy busy, I haven't been able to keep up my previous pace of a post a week.

Why might you ask? Well, I'm proud to say I've taken a new job! I'll be joining the Amazon Alexa team. I'll be starting in a few weeks.

Working on the Internet of things (IoT) ecosystem will be an exciting new challenge. I can't wait to see what I get to help create!

My blog content might change a little in the next few months! Don't be surprised to see a bit more mobile and IoT content.

Upgrading to react-router v4

Sun, 09 Oct 2016 15:59:08 GMT

This article was written when react-router alpha4 was the most recent release. If you are using the 4.0.0 release or higher please read this post: http://rants.broonix.ca/updated-upgrading-to-react-router-v4-2/

About a month ago, the react-router team released version 4 of react-router. This version is a complete rewrite of how routing is handled. This new version has been mostly well received, with a few vocal complaints.

I decided to take a little bit of time and migrate my reactit demo app to v4 of react-router. I'll outline what changes I had to make for v4 as well as my thoughts on the new approach.

==Note: At this time react-router v4 is alpha. You should not be using this in production. If you are using this post as a migration guide, you can't say I didn't warn you!==

Migrating

Well, first things first. I installed the new version of react-router using npm.

npm install --save react-router@next

Before all my routing was done in index.js. This is the same routing you see in most v2 apps.

The first thing I realized is that I can get rid of all this routing in index.js. We can just render the app and compose the UI based on the route. After removing all the routing index.js now looks like this:

When using v2, it was the route in index.js that injected the correct children to be rendered based on the route.

This is where v4 starts to shine. Now I can compose the UI based on the path as part of the App component. This is a much more concise way to define what is happening in the application.

Testing

In order to give routes to my components during testing, I simply wrapped them in <MemoryRouter/>.

As always this code is available on GitHub. You can see the commit that updates 'reactit' to react-router v4 right here: https://github.com/brookslyrette/reactit/commit/9cba5c3ac3205c7e3a36620a809d3c00fdb5ec20

Animations with React

Sun, 02 Oct 2016 14:26:38 GMT

I've been working on a demo app to keep my 'react fu' strong. You can check out the app here: https://github.com/brookslyrette/reactit/

The app is a react front end for Reddit. It uses a standard stack that includes react-router and redux.

This week I'm going to look at how to add some simple animations to this app. React provides a library to use for these types of animations: https://facebook.github.io/react/docs/animation.html

First, install the package with npm.

npm install react-addons-css-transition-group

Now lets defined the CSS for this transition. When animating two classes will be added to the control. .{transitionName}-{transitionType} first, then .{transitionName}-{transitionType}-active. The appear transition will start with opacity 0.01 and transition to being fully visible.

.items-appear {
  opacity: 0.01;
}

.items-appear.items-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

Then to enable this transition we need to add it to the components markup. I'll be animating the ListingItem.js component. Now that the transition timeout in the component and CSS should match. Here they are both set to 300ms.

render() {
  return (
    <ReactCSSTransitionGroup transitionName="items" 
          transitionAppear={true} transitionAppearTimeout={300}>
       {/* old jsx for control */}
    </ReactCSSTransitionGroup>
  );
}

Here is the commit that adds this feature my reactit demo app: https://github.com/brookslyrette/reactit/commit/1a8adb231ad63f5083eb12e39ccd388e107567b3

Happy coding!

Development Workflow

Sun, 18 Sep 2016 12:25:26 GMT

This week GitHub released some great new features. The new review feature finally makes code review a first class member of GitHub's feature set. This is one of the final bits we wanted for our build process at work.

I've blogged about bits and pieces of our workflow, but this week I'm going to outline the entire process end to end.

All our developers use a 'branch and pull request' model. Every change or new feature is developed on its own branch in our git repository. No developer can commit their changes to the main branch. They can only submit a pull request to be merged into the main branch.

Any pull request can only be merged if:

The build was successful on our CI server.
The build passes PMD, EsLint, CheckStyle and FindBugs checks.
The code has been reviewed and accepted by one other developer on the team.

This ensures two sets of eyes have looked at an approved every change. PMD and FindBugs provide static analysis for bugs and code quality issues. While EsLint and CheckStyle ensure our code meets a common set of formatting. We also check the code coverage numbers for every build.

When set up in GitHub. Our branch looks like this.

Now any pull request (PR) can only be merged if all the above is met. Here is an example PR where all checks passed but code review found one issue that blocks a PR from being mergeable.

If you are wondering about how these checks or process is implemented see some of my past posts:

Java: Code coverage with Gradle and JaCoCo

Migrating to Travis-CI from Bamboo

Updating GitHub Status from Bamboo

Automated Acceptance Testing with Selenium

Continuous Deployment with Spring-boot and Travis

Renaming Database Constraints with Liquibase

Tue, 13 Sep 2016 21:36:32 GMT

We used hibernate to set up our initial database schema. Hibernate generates constraint names like: fk_jwy3ip299dvht6bhrf7kxnmap and fk_bc7w4arbgsiasoufirt1ec0na. While these are unique and of a length that works on all databases, they are not very descriptive.

We are using H2 and Postgres for our database (test, production) both of which support longer constraint names. Since we use Liquibase to deploy our database changes, this gave me a great way to rename all these constraints.

First I went into our Postgres instance and got a list of all the foreign key constraints.

SELECT
  tc.constraint_name, tc.table_name, kcu.column_name,
  ccu.table_name AS foreign_table_name,
  ccu.column_name AS foreign_column_name
FROM
  information_schema.table_constraints AS tc
  JOIN information_schema.key_column_usage AS kcu
    ON tc.constraint_name = kcu.constraint_name
  JOIN information_schema.constraint_column_usage AS ccu
    ON ccu.constraint_name = tc.constraint_name
WHERE constraint_type = 'FOREIGN KEY';

I exported this query to CSV. This gave me a file in this format:

key_name,table,column,join_table,join_table_column

We have over 50 constraints on our tables. There was no way I was planning to type out all of these changes in YAML. I ended up creating two python scripts to output the needed YAML.

Drop constraints


import csv

template = """      - dropForeignKeyConstraint:
          baseTableName: %s
          constraintName: %s"""

datafile = open('./constraints_file.csv', 'r')
datareader = csv.reader(datafile)
data = []
for row in datareader:
    data.append(row)

for row in data:
    print template % (row[1], row[0])

Add back Constraints

import csv
template = """      - addForeignKeyConstraint:
          constraintName: %s
          baseTableName: %s
          baseColumnNames: %s
          referencedTableName: %s
          referencedColumnNames: %s"""

datafile = open('./constraints_file.csv', 'r')
datareader = csv.reader(datafile)
data = []
for row in datareader:
    data.append(row)

for row in data:
    name = "fk_%s_%s_%s_%s" % (row[1], row[2], row[3], row[4])
    print template % (name, row[1], row[2], row[3], row[4])

Selenium Screenshots in Continuous Integration

Thu, 08 Sep 2016 20:56:28 GMT

There is nothing worse that when your tests fail only on your continuous integration server. This non-deterministic behaviour can be a pain to debug. This is compounded when testing with Selenium. If you can't see the state of the browser when a test fails how can you fix the issue?

This week we had an issue with a test that kept failing only on CI. In order to fix the issue, I ended up writing a jUnit test watcher that will take a screenshot of the failure and email it out to our team.

I've talked about our automated acceptance testing before. http://broonix-rants.ghost.io/automated-acceptance-tests/. Lubos, from our development team, wrote a nice how-to that replicates a minimalistic version of our setup. https://lkrnac.net/blog/2016/01/run-selenium-tests-on-travisci/. The code below builds on this setup.

Our setup is pretty standard. Our app (Java/React) is built with Gradle on Travis-ci. While this how to will focus on our setup. It should be adaptable to any other build system.

I'm going to use Lubos' code from the link above as a starting point. Here is a basic test class that uses Selenium.

We'll implement screenshot capture using a jUnit test watcher. Our watcher will look to see if we are running on Travis-ci and if the failure is Selenium related. If it is a screenshot will be taken (if possible) then emailed out to the team.

So far this has proven a rather useful addition to our test setup.

Great Developers are Passionate but in Different ways

Thu, 01 Sep 2016 20:31:46 GMT

Phil DeJarnett from Qualified.io wrote a great article this week called: Great Developers Don't Need To Be "Passionate". It really resonated with me. While Phil's point is 100%, I think a lot of people confuse passion with obsession.

Like a lot of people, early in my career I lived ate, slept and breathed code. I wanted to prove I could master my craft. Code sessions would run into the wee hours of the night, just to fix a bug or ship that feature on time. Email from a client at 11pm on a Friday? Sure let me handle that! Sunday morning and nothing to do? I'd wander off and work on a new feature or a personal project.

Great developers have a drive to create, iterate and improve everything they do. It's that drive that makes them so good at what they do. Always being willing to roll up their sleeves and make things work.

But this passion can easily become an obsession. Too much of anything is not good for you. I think this is a large contributor to burnout in our industry. Coding sessions start bleeding together in an endless stream. Your day starts looking like:

while(true) {
    wake();
    eat("breakfast");
    travel(work);
    code(workProject);
    eat("lunch");
    code(workProject);
    travel(home);
    eat("supper");
    code(personalProject);
    sleep(21600);
}

Your personal projects don't get touched, you're too sick at looking at code to code more. Your 9-5 might even suffer. One can easily code so much that the fun goes away. Without the fun of coding, the drive to create is just not the same.

I learnt the hard way that ==passion can easily become an obsession.== Obsessions are never fun.

I'm very passionate about writing software, but I channel some of that passion into other hobbies. I feel that this ends up making me a better developer in the end and a more rounded individual.

Getting started with create-react-app

Sat, 13 Aug 2016 13:36:24 GMT

Setting up a react app has always been a little complex. I've joked about it on this blog and twitter. The react team knows this is a pain point for the community and have been awesome enough to provide us with create-react-app.

Create-react-app differs slightly from most boilerplate react projects. It uses just a single dependency to keep initial configuration as simple as possible.

Let's go over the steps to get started on a react app using this great new tool.

First install create-react-app as a global library.

npm install -g create-react-app

Now to create an app use create-react-app <app-name>. I'll call the app for this blog post 'react-app'. So my command looks like.

create-react-app react-app

Now you'll have to wait a few minutes as npm downloads all the dependencies. Once npm has done it's magic, all you need to do to start the app is:

cd react-app
npm start

Provided you followed all these steps you should now see your app.

The app created is rather simple. It hides the setup details really well. Here is App.js, index.js and package.json.

You might be worried that create-react-app locks you into its configuration. Since all the details are hidden how can you edit things like webpack configuration?

Luckily you can 'eject' your app at anytime. Eject is a one way trip, once you have done so you can't go back. Let's eject this demo app and see what happens. To eject just do this.

npm run eject

Now you have complete control over all the configuration. You can see how much framework create-react-app provides.

There you have it a quick primer on create-react-app. It is a great way to get started on your first react app.

Dependency Hell

Thu, 04 Aug 2016 20:49:04 GMT

It seems like every few years we recreate a new version of dependency hell. Old school linux users and coders know this pain well. Why do we keep doing this to ourselves?

First some history; like a lot of developers in their 30's the first time I saw dependency hell was on a linux box. Dependency hell on linux normally manifests due to conflicting library versions. I'm sure there are a ton of Gentoo, RedHat or Debian users that can relate. Spending hours patching or finding the perfect combination of dependencies to appease the RPM or GCC gods. Luckily the community did everything it could to fix this: side-by-side installations of versions and smart package managers all but negated the problem.

It was quite a while before I found another instance of dependency hell. Most of my first programming jobs were on Java systems. For those of you who are not Java programmers we have our own version of dependency hell: Jar Hell. Jar Hell is caused when projects a metric shit ton of dependencies. Package management systems like Gradle and Maven have improved the situation, but every now and again you end up with two version of the same library on the classpath.

Now I'm living a new dependency hell: NPM/JavaScript. The community has grown so fast in such a short period of time. While the ecosystem is robust, app setup and dependency management is getting a bit crazy. Here is how it feels to setup a new app:

Reacts new create-react-app installs 700+ dependancies. 700!! It's not just react that's crazy like this, don't forget the left-pad fiasco. Dependency hell seems to be compounded by Javascripts fundamental lack of a decent set of core libraries. So far language updates to Javascript feel more like putting lipstick on a pig than improving the core of the language.

So the question is how do we fix it? Right now I honestly don't know. It's a pain point for tens of thousands of developers. As Javascript matures it will get better. More common libraries will be used, reducing the number of dependencies. Couple that to some much needed improvements in npm and a large pain might become more bearable.

Simple HTTP Server for any folder via python

Wed, 27 Jul 2016 20:01:07 GMT

Ever need to have create a web server for an arbitrary folder on your Mac? Python provides a super nice and quick one liner to do this:

python -m SimpleHTTPServer 8080

Boom! A running server in whatever folder you typed that command in.

Continuous Deployment with Spring-boot and Travis

Sat, 16 Jul 2016 12:10:24 GMT

One of the more interesting things I've setup lately has been continuous deployment for Spring-boot using Travis. We are deploying to Elastic Beanstalk with our database running on Amazon RDS. Our current process creates a database snapshot and updates the app when the master branch is updated.

Deploying Spring boot

This is pretty simple thanks to dpl the deployment library travis uses. Elastic Beanstalk is supported so deployment is as simple as adding some confirmation to your .travis.yml file. Here is what our war deployment looks like.

While our current process is deploying master, you can also control what branch gets deployed by adding. This would only deploy a branch called staging to elastic beanstalk.

Backing up the database

Amazon's RDS does have a robust backup system, but we want to ensure we have a snapshot backup before deploying. We do this using the before_deploy hook. We fire a script that creates a snapshot.

We do have to install the awscli tools. We use pip to install these then run our script.

There you have it, continuous deployment with database backups to elastic beanstalk. I do still plan some small additions to our process. I'm hoping to have travis post to Slack that the app was updated and include a change log. Automation FTW.

Deploying Spring-Boot to Amazon Elastic Beanstalk

Thu, 07 Jul 2016 20:30:38 GMT

While there are a ton of guides on how to use spring boot, I was not able to find anything about how to deploy different configurations on Amazon's Elastic Beanstalk. Here is a how to on some of the options you have when deploying to Elastic Beanstalk. It does not matter if you are deploying via a jar or war the configuration methods are essentially the same.

The first thing we had to ensure is that we could override the configuration. This way we can provide settings specific to any one deployment. Spring-boot offers many ways to do this. There are several options for externalized configuration.

Using Spring Application JSON

The first option I looked into was using SPRING_APPLICATION_JSON to configure the properties for the installation. While this does work, there are several limitations when deploying to Elastic Beanstalk.

The first lesson I learned is that you can not set this value in the user interface. You can see my report here on stack overflow: http://stackoverflow.com/questions/38208301/spring-boot-amazon-elastic-beanstalk-ignores-spring-application-json/38224046#38224046. You can get this configuration to work using an .ebextensions folder and configuration in your jar/war.

Here is an example configuration file.

Don't forget to have gradle insert this into your war/jar file!

We ended up not going with this idea. The configuration JSON would up getting rather complex as we expand the config options with in our application.

Using Spring Profiles

Enter spring boot profiles. This is exactly the feature you should be using for this type of deployment.

Profiles allow you to provide a set of default settings, then override any settings you need to for a given environment. This is essentially the same as using the JSON config, but lets you have these settings in a config file not a JSON string.

The profile setting can be provided in Elastic Beanstalk's UI without any issues. Here is our production profile being loaded into the JVM:

You can also load this via a system property called SPRING_PROFILES_ACTIVE.

To override any of your default settings just provide the profile specific value in that profile's configuration file. When using the default settings this is application-${profileName}.properties.

Things to watch for!

Be sure your default configuration is not setting spring.profiles.active this will override your provided profiles. If you want to ensure a given profile is also being loaded use spring.profiles.include.

Testing with React context

Wed, 29 Jun 2016 19:09:49 GMT

Last we I outlined how to use react's context feature in an application. This week I'll show you how to ensure you can test components that use react context.

Our test setup uses jsDom and Chai to render and test our components. You need to wrap any component so that it can access a mock context.

Our wrapper code ended up looking like:

This takes any component and lets you wrap it with a context. In our tests we can provide a context and then wrap the control.

This renders a DOM based on the context. We can then assert that the proper items are rendered.

React: Context

Wed, 22 Jun 2016 20:17:36 GMT

React context is one of those features I discovered later that I should have. It's perfect place to hold your apps user context object. In this post I'll outline how to place a user object into the context and access it from any component in your app.

The app context is like a global variable. While global variables are often misused, they do have some useful applications. Like most apps we need to hold on to the user who is currently logged in. We do this by placing this user into the app context.

Now this user object can be used by any component in the app. If we wanted to render a user edit form, we can pull the user from the context.

You can also access the app context from stateless functional components. Here is the same control written as a function.

The main draw back of using context is that data flow becomes harder to follow. The alternative would be to use props to pass this data, this would be a more explicit method. Don't overuse context, there are only a few use cases where its application is correct!

Happy coding!

React: Containers and Components

Tue, 14 Jun 2016 20:13:23 GMT

At work we've been using React heavily on one of our new projects. Like most projects we are using redux to load data from the server. In doing so testing becomes a bit more difficult. In order to make our components more testable we are using containers.

You might have heard of containers before, they are also called 'Higher Order Components'. Theses are components that wrap other components. They isolate the redux logic outside of the component doing the rendering. This makes testing the components that render your views much simpler.

Lets look at a practical example. Let's say you have a view that component a video's details. We'll break this into two parts. The container that loads the video from the server and the component that renders the data.

First off we use react router to nest our views. Our router configuration would look like this.

This nests the component within the container. This ensures the container is called, it also also for simple reuse if you have other view that load the same object. Here is an example if you also had an edit view that need to load a video.

Now lets look at a container. A container loads the object via an action. It connects that object to its children via props.

As you can see on componentWillMount an action is dispatched to load the video. I'm ignoring what happens in action creators, middleware and stores for this demo. If you do want to learn more about that, I suggest reading the redux docs. The container passes the video to the props of all its children.

This leaves you to only do the rendering in the component.

The component does not need to know about loading objects or redux. It's purely for rendering. This makes testing simpler as well as giving you proper separation of concerns.

Oculus CV1 Review

Sat, 04 Jun 2016 12:30:06 GMT

Well after months of waiting it is finally here! My Oculus CV1 arrived last week while I was in NYC. I pre-ordered on January 6th and my CV1 arrived May 24th. Well, it was worth the wait.

The packaging

Compared to the DK2 the packaging is beautiful. The box was sturdy and very functional. The presentation of the device is very Apple like. The CV1 comes with: A headset, position sensor (for head tracking), a Xbox one controller and a small remote.

Setup

Set up was fairly smooth. The CV1 contains a very nice set of built-in earphones, which freed up a USB port since it replaced my existing razor set. I honestly could have done without the Xbox one controller. I already had the same setup using a Xbox 360 controller, the Xbox one controller adds nothing over its predecessor.

After getting everything plugged in I did notice one odd issue. My Logitech wireless keyboard no longer works and my wireless mouse is now sporadic. I have not been able to get they keyboard working so I had to revert back to an old wired one. The mouse is rather frustrating to use. From what I've read on the oculus forms, there is some driver conflict between the Oculus and Logitech.

First impressions

The CV1 feels so much lighter on you head than the DK2. The new strap design feels much better than the ski goggle strap the DK2 used. The earphones built into the headset are surprisingly powerful. The audio is crisp and clear and the design breaths better than my previous headset. I haven't done any 2-3 hours sessions yet in the CV1, but the feel of the new device makes me think I easily could.

Bundled software

The CV1 is bundled with Oculus Home, Lucky's tale, EVE:Valerie and Farlands. I have not tried out Farlands yet, but I can cover everything else.

Oculus home is a launcher for your VR games as well as a store. Think of it as 'Oculus' version of Steam. The library is pretty small but helpfully it will begin growing soon.

Home does include 'Oculus Dreamdeck' which has some great demos that show off VR. If you are introducing someone to VR I suggest starting here. Nothing makes you believe in VR like getting chased by a T-Rex or landing on an alien world.

I almost didn't install Lucky's Tale. It's a 3rd person platformer (think Mario clone). Not a game I'd ever go out and purchase, but since it came for free I installed it.

I'm really glad I installed it. The experience is much more compelling that I could have imagined. Hovering over you character and navigating from above feels more natural that I had expected. This game has me craving more like this. Please Nintendo: Mario 64 VR remake! You have to!

EVE:Valerie is still amazing, they've polished it quite a bit since the beta. This game in CV1 fulfills my childhood fantasy of being a spaceship pilot. With the CV1's better resolution and 90hz refresh rate you are pulled into the experience. In the middle of a dogfight you might forget you are just in VR. Since I had previously played this with the DK2 it make a nice experience to show off the advantages of the new headset.

Other software

I also tested out Assetto Corsa. If you've read my blog you know I'm a huge fan of sim-racing. Assetto Corsa is not my favourite racing game, but when testing its the only one that currently supports the CV1.

The CV1 again shines over the DK2. In the DK2 the resolution did make it often hard to find decent break markers. The increased resolution makes fine details a bit easier to pick out. The resolution could still be improved but I no longer feel at a disadvantage to the non-VR racers on the track.

God rays

If you've been following the rather messy launch Oculus is having you are wondering about this. Some users are reporting that when UI's have white on black there is some haze or light tearing in the lenses. My headset does also seem to have this issue. I'm not bothered by it. It only happens in very specific circumstances. It's a bit disappointing that this issue exists, but all in all I can work with the device as is.

Conclusion

I recommend the CV1. If you are into VR in any capacity this is a great headset. Be warned: If you start gaming in VR you might not be able to go back!

Self Driving Cars vs Air Travel

Sun, 29 May 2016 13:12:54 GMT

Could self driving cars replace local air travel? It's a question I was asking myself this week. Having traveled from Ottawa to NYC for our company retreat.

Air travel is not the glamours as it was once was. Those images from the 60s and 70s of lovely meals and ample legroom are no more.

We are now packed into a plane as close as possible. Every year they sneak away another 4-5cm of legroom. Hell, I've heard some airlines have worked out how to stack seating! Sounds like a comfy idea doesn't it?

Don't forget what you have to go through to even get on a plane. Have to arrive 1-2 hours before your flight to get through security. Security has been getting slower and slower and more and more invasive; Metal detectors, full body scanners and pat downs! There's nothing more enjoyable that walking through security with no shoes or belt.

I had to drive 30 minutes to the airport. My flight was about 1h of flying time. I arrived about 2 hours before hand to ensure I got through security. I also spent another 30 minutes at customs waiting in line. So for my 1 hour flight, I spent 3-4 hours total traveling. Since there are a limited number of flights I had to base my schedule of the flights available.

Now what if I had taken a self driving car? First let us assume that a self-driving car travels at the same speed as current cars. We'll also assume it takes the same amount of time to pass through customs at a land border. The drive from Ottawa to NYC is about 6.5 hours. So it would be about a 7h drive with a border crossing.

Now lets look at the advantages of taking a self driving car. First and foremost you can leave when you want. No more getting up at 4am for a flight or taking a 1am red eye. You can time your travel around your schedule. You'd get to skip the circus that is airport security.

I think i'd pick the self-driving car. More room, more flexible schedule and no unwanted pat downs. Sure the total travel time is a bit longer, but you can make good use of that time. Get it a few hours of work, or watch a movie. With the extra space you can actually be productive.

Company Retreat

Sat, 21 May 2016 11:53:47 GMT

No big post this week. I'm off in Sag Harbor NY for our yearly company retreat.

When you are a remote company you really have to make the most of the times you all are together. Our team has flown in from Argentina, Canada, Italy, Slovakia and Great Britain.

We spend a week here discussing the previous year, making plans for next year.

Creating a videojs plugin

Sat, 14 May 2016 13:53:10 GMT

At Dotsub we work with a lot of video. For the last couple years we have been using videojs as our sites main video player. This week I've been updating some of our plugins to the latest videojs version (5.9.2) and also open sourcing them!

This week lets walk through how to create a videojs plugin. We'll make a simple watermark plugin that displays the company logo on a video.

Getting Started

The folks at videojs do provide a yeoman generator as an initial starting point. You can check out that project here: https://github.com/videojs/generator-videojs-plugin

To create the initial framework just install and run the generator.

$ npm install -g yo generator-videojs-plugin
$ yo videojs-plugin

I enabled the following for the watermark plugin.

{
  "generator-videojs-plugin": {
    "bcov": false,
    "scope": "",
    "name": "watermark",
    "description": "Adds a watermark image the video player",
    "author": "Brooks Lyrette <hidden>",
    "license": "apache2",
    "changelog": true,
    "sass": true,
    "docs": false,
    "lang": false,
    "bower": false
  }
}

You now have a ready to go project that uses grunt to build, karma and qunit to test. The plugin code is under src/plugin.js and src/plugin.scss.

You can make sure everything is working fine by typing npm test in your console.

**Note: **If you need to be able to use ES6 imports check this out: https://github.com/videojs/generator-videojs-plugin/pull/69#discussion_r62665092

Making the plugin do something

Now comes the fun part, making the plugin do something useful. The requirements are pretty simple for this plugin:

Show a configured image in the video player.
When the video is played for the first time wait the pre configured number of seconds to fade the logo out.
After the initial fade out, the logo should be shown when the player's controls are shown.
The logo can be a clickable link.
The logo position should be configurable (the four corners).

Defaults, Options and configuration.

Videojs provides a nice way deal with configuration. As the plugin developer you can provide a set of defaults, the user will input their settings using options and you can merge the two using a function the provide called: videojs.mergeOptions(defaults, options);. Based on the requirements our plugin will use the following settings with these defaults:

const defaults = {
  position: 'top-right',
  fadeTime: 3000,
  url: undefined,
  image: undefined
};

image: The URL to the image to be used as the watermark.

position: The location to place the watermark (top-left, top-right, bottom-left, bottom-right). Defaults to 'top-right'.

fadeTime: The amount of time in milliseconds for the initial watermark fade. Defaults to 3000.

url: A url to be linked to from the watermark. If the user clicks the watermark the video will be paused and the link will open in a new window.

Coding the plugin

We'll need some DOM elements added to the video player. If you look at the generated code in src/plugin.js you'll see there is already a function listing for onPlayerReady. This is where we will add the needed DOM elements. onPlayerReady is an event videojs throws when the player is setup and ready to go.

const watermark = function(options) {
  this.ready(() => {
    onPlayerReady(this, videojs.mergeOptions(defaults, options));
  });
};

Let's add a call to a new function setupWatermark(player, options);. In that function lets setup the required DOM.

const onPlayerReady = (player, options) => {
  player.addClass('vjs-watermark');

  // if there is no image set just exit
  if (!options.image) {
    return;
  }
  setupWatermark(player, options);
  player.on('play', () => fadeWatermark(options));
};

As you see above we exit if there is not image configured. If there is one we continue on and set up the DOM. The setup ends up looking like:

const setupWatermark = (player, options) => {
  // Add a div and img tag
  const videoEl = player.el();
  const div = document.createElement('div');
  const img = document.createElement('img');

  div.id = 'vjs-watermark';
  div.classList.add('vjs-watermark-content');
  div.classList.add(`vjs-watermark-${options.position}`);
  img.src = options.image;

  // if a url is provided make the image link to that URL.
  if (options.url) {
    const a = document.createElement('a');

    a.href = options.url;
    // if the user clicks the link pause and open a new window
    a.onclick = (e) => {
      e.preventDefault();
      player.pause();
      window.open(options.url);
    };
    a.appendChild(img);
    div.appendChild(a);
  } else {
    div.appendChild(img);
  }
  videoEl.appendChild(div);
};

We only add a a tag if there was a url provided in the configuration. To handle the logo positions we have a CSS class for each location. Let's write the SCSS for the plugin. We will us absolute positioning for the image container.

// Sass for videojs-watermark
.video-js {
  &.vjs-watermark {
    display: block;
  }
  .vjs-watermark-content {
    opacity: 0.99;
    position: absolute;
    padding: 5px;
  }

  // pre-defined positions
  .vjs-watermark-top-right {
    right: 0;
  }
  .vjs-watermark-top-left {
    left: 0;
  }
  .vjs-watermark-bottom-right {
    right: 0;
    bottom: 30px;
  }
  .vjs-watermark-bottom-left {
    left: 0;
    bottom: 30px;
  }
}

For the bottom logo positions the 30px of padding is to account for the height of the controlbar.

We've covered almost all of the requirements, you can configure the image, its location and an optional URL to link to.

Implementing fade out

We will want the logo to fade in and out. This will look smoother than having it just disappear. We will do this using CSS transitions. To do this we will animate the opacity from 1 to 0 over 1 second.

Since one of the requirements is that the logo remains visible on the initial play we can use a timeout to wait the correct amount of time.

const onPlayerReady = (player, options) => {
  ...
  player.on('play', () => fadeWatermark(options));
};

const fadeWatermark = (options) => {
  setTimeout(
    () => document.getElementById('vjs-watermark').classList.add('vjs-watermark-fade'),
  options.fadeTime);
};

Once the vjs-watermark-fade fade class is attached to the element it will start fading in and out. For the SCSS I recommend using a mixin that covers all the browser prefixes.

// cross browser mixin
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

// Sass for videojs-watermark
.video-js {
  &.vjs-watermark {
    display: block;
  }
  .vjs-watermark-content {
    opacity: 0.99;
    position: absolute;
    padding: 5px;
    @include transition(visibility 1.0s, opacity 1.0s);
  }
  ...
  //fade out when the user is not active and the video is playing.
  &.vjs-user-inactive.vjs-playing .vjs-watermark-fade {
   opacity: 0;
  }
}

There you have it. A working simple videojs watermark plugin. You can check out the completed project here: https://github.com/dotsub/videojs-watermark (Apache 2.0 licenced)

The final version includes Qunit tests and ES6 support.

Testing a NPM package locally

Mon, 09 May 2016 14:45:40 GMT

I ran into this today. I had a pain of a time figuring out how to install a local NPM package for testing.

Here is a quick how to.

From the local package you want to install, package the module. You can do this via npm pack. This will create a tgz file of the package.

Change directories to where you want to install your test package. You can install the package via npm install /path/to/packaged-file.tgz.

Star Wars intro in CSS

Sun, 08 May 2016 12:54:27 GMT

In celebration of Star Wars day, I thought it'd be fun do walk-through how to recreate the movies intro with CSS animations. May the force be with you on this journey of learning.

Parts of the intro

We will focus on the three main parts of the into animation:

The blue 'A long time ago..'.
A shrinking Star Wars logo.
The scrolling story text.

A long time ago...

The first part of the intro fades in and out the epic starting line of ever Star Wars movie.

Here is the starting HTML. It's just a simple div for the intro text.

Now we have to style it. I took a guess at the font color and found a similar font for the text.

Now to animate! There are two animations for this part of the intro. The text fades in on a black background, then fades out ~5 seconds later. We can achieve this by animating an opacity change. Fade in is done by animating opacity from 0 to 1 and fade out is the inverse.

Now these css classes by themselves do nothing. We do need to attach them to the intro div. We'll do this via Javascript.

Shrinking Logo

The next part of the intro displays a huge Star Wars logo and has it slowly shrink to nothing. I grabbed a nice SVG copy of the logo from Wikimedia.

Let's add the logo to the HTML. We will start it off as hidden.

Now we will add some small styling to add margins and ensure the logo is with width of the screen. The shrink animation is created using the scale CSS property. By scaling from 1.0 to 0 the logo will start huge and shrink into nothing.

We also have to add this to the Javascript to trigger it after the blue intro text.

Scrolling story text

This is the most complicated part of the intro. The original was done without computer animations. Lucky for us we don't have to resort to the type of tricks they needed in 1977 to animate this.

I'll add three divs to the HTML for the story text. The first to allow me to change the CSS perspective, the second to tilt backwards into the view and the third to allow me to scroll the text.

Here is what the styling looks like. I again guessed the text color and found a similar font.

The tilt effect is achieved by changing the perspective on the first div by 185px. Then to have the text scroll into the view, I use a rotate transform on the X axis of the tilt div. This gives a similar perspective to what we see in the movie intro. To get the text to scroll, the inner most div is positioned relatively. We can animate the scroll of it's top position. By changing the top value from 50 to -2000 over 60 seconds, we get a decent recreation of the intro scroll.

All that's left to do is add this to the javascript. I start the scroll just before the logo has fully shrunk as we see in the original movie intro.

I've checked the completed demo into github if you want to check it out:

https://github.com/brookslyrette/starwars-intro

What is planned for ES7?

Sat, 30 Apr 2016 13:15:24 GMT

Like all things javascript, things move fast. While a lot of us are just starting to get ES6 into production, ES7's draft is almost complete. ES6 was a small update, but ES7 looks to be a huge step forward. Here are some highlights on the goodness ES7 will bring.

Object Rest/Spread Properties

After introducing the spread operator for arrays in ES6, this operator will also support Object in ES7.

// Rest Example
let { a, b, ...c } = { a: 'foo', b: 'bar', z: 1, y: 2 };
console.log(a); // 'foo'
console.log(b); // 'bar'
console.log(c); // { z: 1, y: 2 }

// Spread Example
let example = { a, b, ...c };
console.log(example); // { a: 'foo', b: 'bar', z: 1, y: 2 }

Object.values/Object.entries

We already have Object.keys but we all turn to lodash, jQuery or some other 3rd party library to get access to an object's values or entry set.

const example = { a: 'foo', b: 'bar', z: 1, y: 2 };

// Values
console.log(example.values); // ['foo', 'bar', 1, 2];

// Entries 
console.log(example.values); // [[a: 'foo'], [a: 'bar'], [z: 1], [y: 2]];

String.prototype.padStart/String.prototype.padEnd

Javascript Strings are a pain to deal with. This is mostly due to some missing string manipulation features like padding. I'll stay away from the left-pad fiasco we had just a few months back. I'll only say that this is a much needed core language feature.

// End
'As if JS lacks this'.padEnd(25); // 'As if JS lacks this      '
'As if JS lacks this'.padEnd(2); // 'As if JS lacks this'

// Start
'As if JS lacks this'.padEnd(25); // '      As if JS lacks this'
'As if JS lacks this'.padEnd(2); // 'As if JS lacks this'

Async Functions

Async function promise to clean up all the promise code. While promises where a vast improvement over callbacks, Async will remove even more boiler plate.

async function asyncExample(elem, animations) {
  let ret = null;
    try {
      for(const anim of animations) {
        ret = await anim(elem);
      }
    } catch(e) { 
      // handle error here if need be
    }
  return ret;
}

Array.prototype.includes

Sick of writing foo.indexOf(x) != -1? Good, so are the rest of us! ES7 will add a includes function. You can finally write foo.includes(x) to properly express what you are trying to do.

Conclusion

This only scratches the surface of what is being proposed for ES7. These will be welcome additions to the language. Love it or hate it, the web runs on Javascript. Only time will tell if ES7's changes make writing Javascript better. Sometimes I do wonder, are only putting lipstick on a pig?

Further reading: ES7 Spec: https://tc39.github.io/ecma262/
ES7 Status: https://github.com/tc39/ecma262
ES7 Examples: https://github.com/hemanth/es7-features#exponentiation-operator (a bit out of date but useful)

Advertisers: It's not me, it's you

Sat, 23 Apr 2016 12:35:21 GMT

Almost 200,000,000 internet users are blocking ads. This number has been growing year over year and will likely continue doing so. I am one of these users. I've been blocking ads for years. The reason is not that I hate seeing advertisements, It's that I'm sick of being followed around the internet.

It's a wonder some people don't realize this. Have you ever google something and found you started seeing the same ads over and over again? Well that is because you are being followed by all the major ad networks. Think of them as a creepy dude following you around, looking over your shoulder as much as possible. Trying to get every little tiny bit of data about you.

#####But why? How did this happen?

Google was one of the first companies to perfect this tracking into a business model. Google was the greatest search engine of its time, but that does not make a penny for the company. What does create revenue are ads. Google realized that if you know what a person searches for, you can show them paid ads for what they are looking for. This does not stop at search results. Google's ad network is large and is in use almost everywhere.

A friend of mine learned this the hard way. When he was shopping for engagement rings he googled for local retailers, designs, etc. At the time he and girlfriend shared a computer. The ads shown on the computer quickly changed: engagement rings, wedding planning ads, diamond vendors. Luckily she never noticed, but he was noticing and praying the surprise would not be ruined!

Google has taken this much further. Google scans every bit of data about you it can get it's hands on. Got a gmail account? They scan that. Watch videos on YouTube? That's in the data. Use Google+?.... just kidding no one uses Google+. Google packs every little bit they can about you into your profile. Even data about the pages they already showed ads to you on, even if those are not google sites!

While Google was the first to perfect user tracking into a business model, Facebook is the new king.

The crazy thing about Facebook is that we willingly give them tons of data. Age, sex, likes, friends, posts. They pair this will tracking similar to google. This builds the perfect profiles to advertise too. Want to target 20 something males who are single and like cars? How about 30 something females with no children who like romantic comedies and jazz? Facebook has the data to target like this, and it is us who gave it to them willingly.

#####So what can we do?

Not much sadly. There is no good way to block only targeted ads without blocking everything. If you keep using Facebook, Google and other services you should be aware on what they are doing with your data. You can install ad blockers or tracker blockers. Maybe if enough of us refuse to be tracked we can force these companies to stop following us.

You stop following me and I'll turn off my ad blocker.

Linting in ES6

Sat, 16 Apr 2016 12:23:24 GMT

I've talked about linting before and it's benefits. After updating all our code to ES6 we had to update our linting rules.

We are using the AirBnB style guide, which has also been updated with some nice ES6 defaults. There was a ton of updates to make, but it's worth it to have clean consistent code.

Here were our most common linting errors and why they should be corrected.

Template Literals

Template literals are a cleaner way to combine strings. You should never be writing 'foo' + x in ES6. Templates make string concatenation a breeze `foo${x}`. Our linting rules enforce us to use literals when concatenating strings, but also for us to not lazily use string templates when there is not any concatenation taking place. `Some string` is an error!

Object Literal Shorthand

There is a lot of enhancements in ES6 to let you write shorter and more concise code. This includes object literal shorthand. How often do you see code that looks like:

const name = 'Some Name';
const title = 'A title';

this.setState({ name: name, title: title});

Shorthand makes this a bit more concise:

const name = 'Some Name';
const title = 'A title';

this.setState({ name, title});

Arrow Functions

One of the best additions to ES6 is arrow functions. Inheriting the local this of the code surrounding them make arrow functions very useful. Enforcing that we use arrow functions cleans up a ton of code.

The old:

let foo = function() {
  return this.bar;
}.bind(this);

Becomes:

let foo = () => this.bar;

Other changes

We did have a multitude of other linting changes. The rest however are cosmetic. We turned on comma dangle, added spacing around { object } brackets and enforced a line length. These changes are purely visual and just help our code look consistent.

If you are not using a linter on your Javascript code I suggest you start now. The longer you wait the more refactoring you'll have to do!

Porting React Components to ES6

Sat, 09 Apr 2016 12:11:19 GMT

I've been meaning to do this for a while, but we finally ported all our React code to ES6 classes. The migration was pretty simple, but I figured sharing my notes might help someone out there.

Class creation

We had been using React.createClass, but with ES6 this changes to extends React.Component.

Old

const Widget = React.createClass({
   // code is here
});

New

class Widget = extends React.Component {
   // code is here
}

PropTypes

PropTypes are no longer part of the code within the class. They are defined afterwards.

Old

const Widget = React.createClass({

  propTypes: {
    fn: React.PropTypes.func,
    thing: React.PropTypes.object
  }

});

New

class Widget = extends React.Component {
   // code is here
}

Widget.propTypes: {
  fn: React.PropTypes.func,
  thing: React.PropTypes.object
};

Initial State

Initial state is now set in the constructor.

Old

const Widget = React.createClass({

  getInitialState() {
    return {
      foo: 'bar'
    };
  }

});

New

class Widget = extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      foo: 'bar'
    };
  }

}

Function Binding

You might not know, but React does some magic internally when you use createClass. This includes auto-binding this to your functions. If you have a function that needs access to the component, you now need to bind it in the constructor.

Old

const Widget = React.createClass({

  doSomeWork() {
     return this.props.foo;
  }

});

New

class Widget = extends React.Component {

  constructor(props) {
    super(props);
    this.doSomeWork = () => this._doSomeWork();
  }

  _doSomeWork() {
     return this.props.foo;
  }

}

Other issues

Mixins are not supported in ES6. Most libraries are already moving away from them. We did have to update react-router and react-intl.

Happy porting and welcome to ES6!

The Threat

Sat, 02 Apr 2016 12:26:40 GMT

I honestly can't believe it happened. My company got a Distributed Denial of Services attack (DDoS) ransom note.

The note

The note itself was short and to the point. Send us X Bitcoins or we attack you. If you do not comply by Z date the price will go up every day by Y while we attack. The message was sent via an encrypted anonymous email service.

The Ransom

They are rather smart about the ransom amount. It's not a crazy impossible sum of money. It's right at the point where if you didn't know better you might think about paying it.

Is it real?

The first question we had to ask ourselves was is this a legitimate threat? This answer is impossible to know conclusively.

It could just as easily be a copycat. Using the same email without the intent to ever attack. It could be a script kiddie with a few rudimentary tools at their disposal. It could also be the group the email claims it is.

After comparing the ransom note to others. It seems probable that it may be legitimate.

Even if there is a 5% chance this is real we have to act on it. Like most small companies, a day of outage would not be acceptable. It is just not a chance you want to take.

What to do?

First things first: What ever you do, do not pay the ransom. Why? Even it did stop the attack, what's to say they won't be back asking for more? You'll just be added to a list of people who will pay up. The threats will never stop. If you give a bully your lunch money, they will come back for it every day.

You should get yourself protected. There are a ton of companies that provide DDoS protection. While this does cost a bit of money, it is worth the peace of mind.

Happy Easter

Sat, 26 Mar 2016 11:58:05 GMT

No real post this week. My goal is still to blog about something (technical or nontechnical) once a week for a year. But with the holidays this week I just never found the time.

I'll be back next week with something interesting. I'm pretty happy with my posts so far 21/52 weeks completed!

Machines will take your job

Sat, 19 Mar 2016 13:05:27 GMT

It's not even a bold or futuristic thing to say. Machines will slowly replace all of us. It's who is next that might surprise you most.

How soon and how fast is still up for debate. NPR has a great interactive article where you can see an estimate on how long you it might take to automate your job.

So who's surprisingly next?

Long Distance Trucking

Sadly these new truckers will not be as amazing as the transformers. All the advances we are seeing in self-driving cars has amazing commercial application in the transportation field. There are approximately 3.5 million truck drivers on the road today.

The US and UK are already experimenting with this idea. A robot truck would never need to stop to rest. It's only reason to stop working is to fuel. Advances in the next 5-10 years should eliminate most of the long haul trucking jobs between cities. Leaving the human drives small 'city' or last mile drop offs.

Wall Street Traders

If you compare the number of humans on the floor of the New York stock exchange now and fifteen years ago, you'll see a shocking decline in humans on the floor. The people you see on the floor now are just supervising the computers that are now doing the majority of the trading.

The next casuality on Wall Street will surprise you: Analysts. That's right, the big guys, college educated and making $300-$500k a year.

Everyone on Wall Street has heavily invested in artificial intelligence and machine learning. They are starting to get the returns on their investments. An AI can easily crunch a company's financials, parse thousands of news articles all while monitoring social media and other trade data and instantly act on financial moves. We humans just can't keep up.

There will still be a small number of analysts remaining at most firms, but you will see a drastic shrinking in their numbers on Wall Street.

What will the future look like?

That's just a small sample of what jobs might be replaced in the next 5-10 years. Some estimates say 50%-80% of the existing jobs might be replaced. The retail and services industries will be the hardest hit.

What this all means for society is up in the air. Distopian future? Creative utopia? Only we, not the machines, can decide that part.

I'm still bullish on Twitter

Sat, 12 Mar 2016 13:37:20 GMT

It seems like every few weeks someone writes an article about the demise of twitter. User growth has started to taper off but revenue has continued to increase. I'm not saying they are in the best position they could be in, but they are far from failing.

Twitter needs to start owning what they do well and ignoring all the crap people think they should be doing.

Twitter is not Facebook

Investors keep trying to compare Facebook and Twitter as if they are the same thing.

I believe this is why you keep seeing rumors of Twitter replacing the timeline with algorithmically ranked content. People seem to think that if you made Twitter look more like Facebook, you'd see the same growth and return on investment.

Going head to head with Facebook on their turf would be like invading Russia in the winter. You just can't win that fight.

So what does Twitter do well?

Twitter is a great app for more than it gets credit for. Here is why enjoy using twitter.

The here and now.

Twitter is the ultimate network for keeping up with that is happening now. It's not just about your social network either, your Twitter feed keeps you in touch with the world.

I'm amazed how many important world events I found out about from my Twitter feed. From Steve Jobs death to terrorist attacks, I opened Twitter and found out about these things. Then and only then did I flick on the news. Twitter is the ultimate discovery tool.

Technical Support

It might seems a little funny on this list but it's something more people should be aware of.

If you tweet at most of these small startups they almost always reply. They are about their social footprint and Twitter public nature seems to ensure they act faster.

Sports and Events

If you've ever been to a hockey, football or baseball game, you know there is one thing fans love doing: Yelling. It doesn't even matter at what sometimes. The ref is blind!, Your team sucks!, My team rules!, Did you see that play!?!

This experience moves almost seamlessly to Twitter. During the 2015 Stanley Cup playoffs I loved the interaction I had with other fans.

Sports stars have really embraced Twitter. A Nascar driver even got fined for tweeting during a race

We've seen sports stars hash out differences over Twitter as well as congratulate others on their accomplishments. As a fan it's amazing to see these interactions and to feel like a part of the conversation.

So what is next for Twitter?

They need to embrace and monetize what they do well. Focus on their core competencies of connecting people to the events that are happening around them in real time. With users inside and outside of their social circle.

Sim-Racing: My favorite hobby

Sat, 05 Mar 2016 13:37:26 GMT

I've talked before about how much I enjoy VR, but never have I talked about why I almost exclusively play racing games. Here is the history and the how and why I love racing.

How I got started

The first racing games I remember playing were on the NES. Games like Rad Racer, RC-Pro Am instantly come to mind. It wasn't until I was a bit older that I realized I had an obsession for racing. It came from the oddest of games: Super Mario Kart.

How did I get obsessed? It's pretty simple. I'd set a fast time trial lap on Mario GP or Ghost Valley and my father would beat it. I'd set another fast lap and he'd beat it again. It finally got to the point where we were eking out laps that were tenths or thousands of a second better. I was hooked, no matter the game I wanted to be the fastest.

I graduated to much more complicated games. The series by Papyrus Design Group were always some of my favorites. From Indycar Racing to Grand Prix Legends to Nascar 2003 and now iRacing. I even found all these classics in a drawer at my parents place.

Why not race a real car?

There is an old saying in racing:

What is the Best Way to Make a Small Fortune in Racing? Start with a large one, and work down from there.

I'd love too, but racing makes a drug addiction look cheap. Maybe one day, but for now real racing is a hobby beyond my means.

But why? What is it about sim-racing?

It's hard to put it into words, but I'll give it a try.

There is a moment when racing where every thing else in the universe disappears. There is no work, stress or anything else to think about. It is zen. All you mind can think about is: brake, turn-in, apex, accelerate.

Facebook is getting Emotional

Sat, 27 Feb 2016 13:36:17 GMT

Well there you have it, after 12 years Facebook changed its secret sauce. Gone are the days of a simple Like replaced with the wide variety of: Like, Love, Haha, Wow, Sad and Angry

Call me old fashioned, but I really enjoyed the simplicity of only being able to Like. It was simple, streamlined and looked a bit less cluttered. Now every post has a small rainbow of colors.

This new model really brings in 4 new emotions: Laughter, Shock, Sorrow and Anger. Love is really just hitting the 'Like' button harder. You can see why Facebook has added these. No one wants to like a post about a lost family member or a bad day, Anger and Sorrow work better in these situations.

People have been asking for a 'Dislike' button for years. I can easily see why Facebook did not include this interaction. Facebook has always been a place for positive interactions. Can you only imagine the trolling that could be done with a 'Dislike' button? If you can't, I suggest joining Reddit. Getting downvoted to oblivion can invoke a negative emotional reaction. Facebook would never want this type negative connotation with their product.

I do wonder what Facebook's long term plan is with this feature. While you might think this feature is for you the user. I'd be really surprised if it was. People often forget Facebook is free because you are the product.

Facebook has already admitted to intentionally experimenting with it's users emotions. They have even repeatedly crashed their app to see what your patience level is. Now they have added a new data point for users to openly share with them.

How you emotionally react to something is gold to advertisers. Facebook is adding another data point to be packaged up a sold back to advertisers. Who knows what other ideas they might dream up with this data.

I stand with Apple

Sat, 20 Feb 2016 14:05:09 GMT

So it happened, the US government is trying to compel Apple into creating a backdoor into iOS. This is a dangerous precedent. Sure they'll pass it off as an 'issue of national security' but it's just not that simple.

iOS is designed to be secure. This means there is no way for even Apple to access the encrypted data on the device. This is a practice we call 'secure by design'. Apple has done their best to ensure there is no way into the data on the device.

The US government asked for an IPSW file to access the phone. This file would contain a security hole that would give them access to a phone. The mere existence of such a piece of software makes iOS no longer secure by design.

What would stop this software from falling into the wrong hands? Do you honestly think such a tool would not be used in spycraft? After all that has come to light on warrantless spying using 'Stingray devices' do you even trust them with such a tool?

On Uber...

Sat, 13 Feb 2016 16:43:50 GMT

Uber is in the news a lot here in Canada of late. It's one of those topics I'm torn on.

On one hand Uber is a good thing. It directly connects drivers and riders. It streamlines payments and is so convenient.

On the other hand, the drivers who are licenced taxi drivers are taking a huge hit. They were already being screwed by a semi-corrupt licensing system. As always it's the last person in the economic chain that gets squeezed the most. The fact that it was a tech startup that implemented this idea give you idea on how stagnant the taxi business had become.

Taxi licenses have become a business. Since there are finite number of licenses in most cities, investors would buy them up. Since new licenses are rarely issued, they could see these as an investment. These people do not own taxis, do not drive taxis, hell they do not even own taxi companies. This is what drove up the prices of these licenses upwards of millions in some place. They just milk the value of their holdings.

Here is why I feel bad for the real taxi drivers. In most cities here in Canada UberX is illegal. You can not be a driver for hire without the proper business insurance and license. Drivers who are doing everything right in the shitty system they have are being squeezed out by UberX thieves. Of course not having insurance lowers the prices you charge! It's an unfair advantage. Same goes of all the other costs a licensed cab driver must endure.

What we really need is a middle ground between what Uber has become and what traditional cabs are. There has to be a small amount of oversight, insurance and regulation. I think removing cab licenses as a investment can really affect some change. It would also allow a company like Uber to purchase cab licences and join a more level playing field.

Virtual Reality is the Future

Sat, 06 Feb 2016 13:03:07 GMT

If you get a chance to try an Oculus Rift, HTC Vive or any VR headset for that matter, DO IT!

I was lucky enough to have my friend David Orban convinced me that I should get a DK2. My DK2 arrived in September 2014. From the first moment I put that headset I was sold on VR.

I've landed on the moon. Raced an F1 car at Monza. Had spaceship fights in space. Had my mind blow with demos like SightLineVR.

The problem with telling others about VR is that no matter how well you try to explain it, you can't properly convey what it's like. VR is an experience. Given the right game the immersion can be picture perfect. I've raised my hands to protect my face or braced my body for an impact only seconds later to realize that I'm just gaming.

I've always been an avid sim-racer. I've used a triple monitor set up for quite some time. Lots of racers use setups like this to maximize the immersion and give you a better field of view for racing. This is what my setup looked like:

I prefer the Rift so much that I got rid of my triples. All those screens got replaced with this:

That's my father trying out my DK2 in iRacing.

VR really nails the 'cockpit' style gaming experience. Racecar, airplane, spaceship it's a perfect match. I recommend spending a little on a wheel for driving games or a flight joystick. It really adds to the experience.

Non-cockpit games like FPS's are fun but using a keyboard/mouse or joypad steals away a bit of the experience. There are a lot of companies trying to improve on this. I'm sure this year we will see a lot of innovation in regards to FPS controls when using a VR headset. Oculus Touch looks promising as well as Leap Motion.

The technology is not perfect at the moment. Resolution is just a little lower than you'd like. The CV1, The first consumer version of the Riff, will improve upon this. I already have my order in for a CV1 and I hope to tell you the resolution change has really improved the product. I think for near perfect immersion a 4k resolution will be required. At the rate this technology is progressing that can't be more than a couple years aways.

We are just scratching the surface of what VR can and will do. VR will be a must have item before you know it.

Automated Acceptance Testing with Selenium

Sat, 30 Jan 2016 13:34:06 GMT

More testing is never a bad thing. Automating that testing is even better. We recently added automated acceptance testing to a spring-boot application.

There were a few small hiccups to getting it implemented. Which I'd like to share the solutions to.

Multiple Application Contexts

The first issue we ran into was defining the application context for our testing. We wanted to ensure our Integration and Unit tests were not interfering with our Acceptance tests. At first this was causing all kinds of problems. Spring's test runner was merging the two contexts we defined into one.

This can all be fixed if you name the context for your acceptance test class. Just provide a name = value to the @SpringApplicationConfiguration annotation.

This made sure the two contexts were not getting merged.

H2 not Resetting

Even if you add the @Transational annotation to the tests executed by selenium changes will not be rolled back. They are not being done with in the transaction of the test case. Luckily H2 is simple to backup and restore.

That's all you need to backup and restore. The overhead is minimal so we can do this before and after each test.

If you want to persist date for the whole test class use @BeforeClass and @AfterClass. I do not recommend this since your tests might become order dependent.

Continuous Integration (Travis-CI)

We use travis to automate our builds. Travis already has built in support for Firefox. All we had to do is add a few lines to our travis config.

Java: Code coverage with Gradle and JaCoCo

Fri, 22 Jan 2016 21:22:04 GMT

There are so many great metrics to help you improve a project's quality. One of these metrics is code coverage.

In this post we will go over why this measurement is important, how to measure coverage using JaCoCo. I'll also wrap up with some info on coveralls.io which allows you to mesure this metric between builds.

What is code coverage?

Code coverage is a measure of how much for your application's code has been executed in testing. This covers not only seeing which lines of code have been executed, but also checking that all branches have been covered.

The a coverage tool will ensure your tests sent at least 3 cases:

a = true
b = true
a = false, b = false

Why measure code coverage?

The more code that you have covered the lower the probability of potential bugs. Coverage is not a cure all for bug free code, but does force you to think about writing more tests.

After adding coverage reports to several work projects, I can tell you all of a sudden every developer on the team seems to commit a few more tests. No one wants to be the one that commits a large amount of untested code.

Setting up JaCoCo

I'll add coverage to a simple spring-boot web application. I have a pre-made simple boot app on git hub: https://github.com/brookslyrette/spring-boot-demo-starter. You can use this as a starting point. First download the code or clone the git repo git clone https://github.com/brookslyrette/spring-boot-demo-starter.git

You do not have to to add much to build.gradle to generate a JaCoCo report.

All you need to do to run your tests and generate a coverage report is gradle test jacocoTestReport

You can see I don't have proper coverage! I better add some more tests. Here is a small test for the DemoController

Now if we run our coverage results again, we get a nice improvement:

You can see the final product here in GitHub: https://github.com/brookslyrette/gradle-jacoco-coverage

Coveralls.io

While having coverage reports for the current code is great, it's even more useful to track changes in coverage over time. I stumbled onto a great tool for this http://coveralls.io.

It's free for any open source projects on GitHub or BitBucket and reasonably priced for private projects.

It keeps track of how code coverage changes over each build.

Configuring this is as simple as adding this plugin to your build: https://github.com/kt3k/coveralls-gradle-plugin

Remote working: 6+ Years Later!

Thu, 14 Jan 2016 21:58:00 GMT

It's hard to believe it, but I've been working remotely for 6+ years now. Back in 2009 Dotsub closed its Ottawa office and I started working remotely. It's been an amazing journey. Now Dotsub has remote employees in Canada, The United States, Argentina, The United Kingdom, Italy, and Ireland.

Remote working is becoming more and more prevalent in the tech sector. I figured it might be useful to share some of the lessons I've learned over the years.

You still should 'commute' to work. When you don't have to physically travel to an office to work it becomes easy to pick up some bad habits. You can literally roll out of bed, grab your laptop and start working. I've found that over the long term this can adversely affect my mood and productivity.

Have a routine for your time before work. Get dressed and make yourself look presentable. Have some breakfast and watch the news. In the nice summer months I'll even take the dog for a morning walk. I've talked to other people who will drive to get their morning coffee.

Take a real lunch. You should not sit computer and eat everyday. Get out of the space you are working in and eat a good meal. Breaks a good for your mental health and an important part of any work day. I made this mistake for far too long. It was only after I started walking our dog on lunch that I learn how important taking a lunch break is.

Have a start and end time for your work day. I love to code and sometimes I forget to stop. While it is great to be passionate about what you do, you can easily burn yourself out. Make sure you know when to call it a day.

If possible Have a designated work area. I've found it very helpful to have a space just for work. It makes it a bit easier to keep a work-life balance if you are not working and playing in the same space.

Use remote communication tools. It is pretty easy to feel isolated when working remotely. Email is a pretty poor tool to bring a remote team together. We by using Campfire in 2012 and later switched to Slack. These tools help by not only creating a spot for meetings and work related chats, but a fun space to get to know everyone on your team. Our #General and #Random channels are our companies watercooler.

Enjoy working remotely. No more being stuck in traffic before and after work. You'd be amazed how much time you win back by not commuting. I still smile a little when I hear the morning traffic report while sitting in my home office.

XKCD Substitutions [Chrome Extension]

Fri, 08 Jan 2016 21:03:25 GMT

XKCD was at it again with another funny substitutions comic.

I figured it would be fun to create a Chrome extension that does this. Truth be told there are already a ton of extenstions that do this in the Chrome Store. XKCD even links to the most popular one: XKCD substitutions offered by alec.posney. Since there are already so many competing plugins I decided to do this:

I've never written a Chrome extension before so here we go!

After reading over the Getting Started guide and a little of the documentation. It seemed logical to break this into two parts.

A background file to keep track of the plugins state and a content script to do the substitutions. I also made a few icons to denote the plugins state and of course a manifest file that defines the plugin.

First let's dive into manifest.json:

You can see this defines the name of and default icon of the extension. It also loads up background.js and substitutions.js, where all the work is done.

It also defines what privileges we will need when running. This plugin needs access to:

The active Chrome tab.
The ability to run a background script.
Access to storage to save the plugins state.

The first thing I got working was the ability to store the plugins state and show the correct contextual status icon. This is all handled in background.js.

The code is pretty self explanatory, when the user clicks the icon we toggle the plugins state. We save the new state to local storage and display the correct on or off icon. We also reload the webpage, this is to allow the content script to run if it needs to.

Now for the fun part: substitutions.js. This the content script that does all the on page work. Content scripts do have a limited amount of permissions so I do recommend reading the documentation. In manifest.json we set our content script to run on <all_urls> on the document_idle event. This happens after page content is loaded and javascript has run.

If the plugins state is enabled the makeItBetter function is ran to do all of XKCD's replacements. It walks all the text nodes in the DOM and does a two step replace. I had started with a one step replace but it caused some issues due to "Years ➜ Minutes" and "Minutes ➜ Years".

The results are pretty amusing!

My version is here on GitHub: https://github.com/brookslyrette/chrome-xkcd-substitutions.

All credit for this being interesting or funny goes to XKCD.

Building a Universal Translator

Fri, 01 Jan 2016 14:02:00 GMT

Earlier this year, some of us around the office were rather impressed with Skype Translator. It's a very cool feature that shows just how far realtime translation has come in the last few years.

When I first saw this cool feature, I told my co-workers: "I'm pretty sure we could build something similar to that in a few hours". I didn't want to look like I was just bullshitting them, so I set aside a few hours and built it.

This post outlines how you can build your own universal translator with nothing but Javascript. It's not nearly as feature rich as what Skype is doing. It goes give you an idea of what can be done with existing Javascript API's in Chrome.

TL;DR:
Demo [Chrome only]: https://universal-translator.dotsub.com/ Code: https://github.com/dotsub/universal-translator

First let's decompose the steps required. The universal translator needs to do three things:

Recognise what the user is saying.
Translate the spoken phrase.
Speak the result.

Speech Recognition

Google Chrome has a built in speech recognition engine. Their implementation is based on the w3 speech-api community group specification. Using this engine is very simple.

It is important to properly set recognition.lang. To the language the user is speaking. Now we have the spoken input from the user. This is all we need to complete step one.

Machine Translation

We will use Google's Translation API to translate our text. The code is a bit ugly, I stole it out of one of my old projects.

Speech Synthesis

The w3 speech-api also includes a speech synthesis engine. It only takes a few lines to get the browser to speak any line of text.

var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);

Here is the full synthesis part of my universal translator. It takes input from the user translates it and speaks the result.

Conclusion

There you have it, less than 150 lines of Javascript that makes a universal translator. The finished demo here: https://universal-translator.dotsub.com/. You can look over the code here: https://github.com/dotsub/universal-translator

Happy Holidays!

Sat, 26 Dec 2015 14:46:44 GMT

Due to traveling and spending time with family, there will not be an in depth post this week.

Happy holidays to everyone!

Migrating from Refluxjs to Redux

Fri, 18 Dec 2015 20:03:00 GMT

Unless you have been living under a rock. I'm sure you are aware of all the buzz behind React. Our latest project at work is React based. It's been so much fun to get our hands on a new UI framework.

We built out the initial proof of concept using React, React-Router and Refluxjs. Refluxjs was a great way to get the project started quickly. But we quickly started noticing some things that got us worried.

It seems like development on Refluxjs is stalled. Refluxjs lacks es6 support. It does not currently support universal apps. While it does have simplicity over other Flux implementations, these all come at a cost. By eliminating the global dispatcher you lose out on the ability to apply middleware. It promotes the use of this.state in components.

Redux on the other hand seems to have a huge community around it. It's development is very active. It has support for universal apps. It's creator Dan Abramov was recently hired by facebook.

Since we hope to have our current project around for a long time, we decided it would be best to migrate to Redux.

How it worked in Refluxjs

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║------>║ Stores ║------>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └--------------------------------------┘

How it works in Redux

╔════════════════╗       ╔════════════╗       ╔════════════╗
║ Action Creator ║------>║ Dispatcher ║------>║   Reducer  ║
╚════════════════╝       ╚════════════╝       ╚════════════╝
         ^                                           |
         |                                           |
         |                                           v
╔═════════════════╗                              ╔════════╗ 
║ View Components ║ <--------------------------  ║ Store  ║
╚═════════════════╝                              ╚════════╝

Notes on the migration

There is now just one store. It does seem like a good idea to be able to represent the state of your app in one object.
There is only one reducer. You can however logically separate your code using combineReducers and creating a root reducer.
Reflux maps properties from the stores as this.state. This was convenient, but React advises keeping your components stateless.
If you are dealing with data from a server you are going to need some middleware. Right now we have been using redux-thunk to add data to the server before dispatching the events to update the state.

Migrating to Travis-CI from Bamboo

Sat, 12 Dec 2015 13:25:02 GMT

At work we have been using Bamboo for a little over a year. It has served us well in the past, but for our newest project it has just not be working well. The cloud version seems to be severely limited.

Want to upload your app to AWS after it's built? Yes, there is a plugin for that but it does not support Bamboo cloud. Headless browser testing? Well it is possible, but you have to configure your own EC2 instances.

Bamboo just does not seem to be moving forward. As a tool it was starting to get in our way. We decided it was time for our team to try something new.

I've been looking for a opportunity to give Travis-CI a try. Travis-CI builds over 200,000 project and has over 100,000 users. They must be onto something. It almost feels like every GitHub project is building with Travis-CI.

In less than a few hours we migrated to Travis-CI. It was quick and painless.

How we migrated

Unlike Bamboo, Travis-CI keeps the build configuration in your project. .travis.yml is where all the magic happens. This file controls everything.

Step 1: Create an account

You of course have to set an account with Travis-CI. They use your GitHub credentials to login. Then just enable your repository in Travis-CI: https://travis-ci.com/getting_started

Step 2: Building

To have your project build you first need to add a .travis.yml. Our project is Java 8/Gradle so the initial file looked like this:

Step 3: Migrating status scripts

I wrote some status scripts that I covered in a previous blog post. I won't go into their functional details here, but I will cover the migration changes.

Travis-CI also lets you run scripts. These scripts have to be part of the repository. This is a really good idea, build scripts are code and all code should be in your repository. I added the script to our project under src/main/scripts/post-build.sh. I had to replace the Bamboo variables with their Travis-CI equivalents.

All we have to do now is tell Travis-CI to call this script after the build. This is done with the after_success setting.

That's all it took. Six lines of configuration and moving our post build scripts.

Future topics

Setting up the new build took so little time that I ended up setting up a few extras:

Coveralls coverage reporting.
Slack Notifications for Travis builds.
Automatic deployment of our builds to Amazon Elastic Beanstalk.

I'll cover those three and headless browser testing in a future post!

Are you linting yet?

Thu, 03 Dec 2015 21:27:00 GMT

If you aren't you should be! If you are like me, you have a love and hate relationship with Javascript. It's used to do so much, but it's loose rule set makes it a potential nightmare.

At work we already were using Checkstyle and FindBugs for our Java code, so why not apply the same idea to our Javascript and React code?

There a few options, but we chose to go with eslint. It has a large number of plugins and support for React.

Setup was dead simple. Create a .eslintrc file in the project root. Then add gulp-eslint to the gulp build chain.

We decided to follow the airbnb style. We did make some small alterations.

Now what happened next was not as simple:

Clean up was pretty easy. Most of those errors and warnings were the use of var or small style violations. After a couple of hours we now have a much cleaner, consistent and more maintainable Javascript and React code.

Practice Practicing

Sun, 29 Nov 2015 14:34:16 GMT

We heard it all so many times in our lives. Practice, Practice, Practice or Practice makes perfect. But sometimes you have to remember it's not just about the act of practicing but you ned to learn to practice properly.

This is something I've always been poor at. I'll pick up a guitar to 'practice' but will just end up noodling for an hour or so. I'll do the same sim-racing, I'll just load up a track and blast out a few laps and consider it as a practice. Neither of these are really practice.

I've been trying to improve how I practice, I've done this by adding a few things to my practice routines.

Goals
Plan
Analysis
Back to #1

Never sit down and practice mindlessly. You should have a goal before you sit down to practice. It could be something simple like learning a small riff in a song you like or in racing it can be something like improving your lap times or consistency.

From these goals you can define a plan on how to practice. Find the tabs you need to learn, the scales you need to practice. Load up the right car/track combo to get rolling.

Now comes the most important part, you need to be able to analyse your practice session vs your goal. For my racing hobby this is very easy. There are a ton of online tools to analyse every turn and lap you do in a session. You can even compare your laps against some of the fastest in the world. This gives you a great way to set your goals for the next practice.

For my guitar playing, I've started recording all my practice sessions. I can go back and listen to everything to see what is and is not working. From there you can figure out your next goals.

So far it's been paying off.

Spring-Boot: Building Bootstrap with Gulp and Gradle

Sat, 21 Nov 2015 14:03:46 GMT

Bootstrap is one of my favorite CSS frameworks. I've used it in many of my Java projects. One problem I've often ran into is how to include Bootstrap in your project.

I've seen it done in quite a few ways. The most popular are. Added as a static library or importing it via webjars.

To me both these options miss out on the best part of bootstrap. It's not about the CSS but about the LESS/SASS that compiles into bootstrap's CSS. This makes it so simple and quick to customize.

##Getting Started

We'll start with a simple spring-boot web application. I have a pre-made simple boot app on git hub: https://github.com/brookslyrette/spring-boot-demo-starter. You can use this as a starting point. First download the code or clone the git repo git clone https://github.com/brookslyrette/spring-boot-demo-starter.git

##How it all works

We are going to make bootstrap a first class member of our spring-boot projects build. We will use gulp to build a customized version of bootstrap.

##Building First we will add node and gulp to our gradle build. This will give us the tools we need to build bootstrap. There is already a great plugin for this: https://github.com/srs/gradle-gulp-plugin . Configuration is pretty simple. Just add the plugin and configure when it runs in the build. You can see my comments on what does what in the gist below.

You how have to to add a packages.json file. This will install all the node packages our gulp build chain will use. You can use npm to create this file via npm init. You can just hit return or enter values for all the questions npm will ask. Now you should have a packages.json file that looks something like this.

We will be building from the SASS bootstrap sources. We can install this using: npm install --save bootstrap-sass. You'll see packages.json now contains this dependency. We will also install gulp-sass with npm install --save gulp-sass

####The SASS file

We should now add a SASS file that will contain our own styles and bootstrap customizations. We will add this file under src/main/sass and call it global.scss. We can leave this blank for now.

####gulpfile.js

Our gulpfile will let us do two things. First it will have a build task that gets called by gradle. Second a watch task that lets us run gulp and have any changes we make instantly compiled into our CSS files.

Now we have everything in place! You can run this empty build with gradle bootRun. You'll see the project now creates and copies css into src/main/resources/static to be used in your project.

##Using and Customizing Bootstrap has a great theme demo page. I've made it thymeleaf compatible so we can test our customized theme. You can just cut and paste this into home.html

Lets launch with grable bootRun and see how it all looks.

Well that's not too pretty. How about we open up global.scss and pull in bootstrap. All we need to do is add the import into the file.

Now when we rerun the app we see a much prettier picture.

Now we can customize some of the styles. Bootstrap has a variable for everything. Lets tweak the navbar's color and some of the buttons.

Be sure to add all customizations before the bootstrap import. Here is my custom theme for this post.

Now the demo page looks like.

Any customization is now just a line or two of SASS away.

You can download the completed project here: https://github.com/brookslyrette/sass-gradle-gulp

Updating GitHub Status from Bamboo

Sat, 14 Nov 2015 16:15:34 GMT

GitHub has a great Statuses API. This gives you a great way to update the information from your automated build process. Giving you a quick overview of the status of a branch.

At Dotsub we use Bamboo to build our applications. Bamboo does not have a native GitHub integration so we had to create our own.

We wanted to ensure that our unit tests, findbugs report and checkstyle reports were reflected in the GitHub branch status.

This is pretty simple to set up. We'll use two small scripts and cURL. First let's add a Script task at the start of our build. This will update the branch status so we know it's building.

Add this task at the very start of the build.

The script looks like this:

This updates GitHub and shows that branches status as 'building'.

Now all we have to do is update the build at the end as well. We will use grep to count the errors in the reports. This was we can include this on the branch details.

This updates GitHub will the status and the number of each type of error. You instantly know the status/mergeability of any branch in your repository.

There you have it. A quick and simple way to set up Bamboo to update GitHub with build statuses. Your team will always know the status of every branch in your repo.

Why a blog?

Wed, 11 Nov 2015 01:20:34 GMT

It's been ages since I told myself "You should really start a blog". I'm finally making good on that idea today.

First a little about me. I'm a software engineer from Ottawa Canada. I am the CTO at Dotsub a very amateur guitarist and avid sim-racer. Like most Canadians I enjoy hockey and beer.

On this blog I hope to share a few random thoughts. Maybe a few how to articles.

You'll have to excuse my spelling and grammar. You know the old joke:

This idea may or may not pan out, but for now I'm hoping to blog at least once a week.

Let's see how this goes!

I'm pretty sure no one will read this.