Welcome Back, O' Sleeping Dreamer

Well hello! It's been a long time. Hope you are doing well! It's been a long time since I've written anything, but I wanted to get back to writing. So what have I been up to these past few years?

Departed from Ember and Dove Into React

In 2018 I took a role at a company called LifeOmic which was my first dive into using React. I was there for almost 4 years, which is the longest I've stayed at any one company. It was overall a really great learning experience for me. I was convinced I'd only use Ember for a long time in my career, but I had some great friends working at LifeOmic and they thought I could bring a lot to the table by joining LifeOmic. Working in React was quite nice and a good change of pace. Like all programming languages, libraries, frameworks, etc. I definitely have some complaints, but overall I enjoyed my time using it.

Built a Design System

While I was at LifeOmic, I built our Design System called Chroma with a good friend, Doryan Algarra. I initially built it in private, on our private Bitbucket (and eventually GitHub) to iron out some kinks, but eventually took it public on GitHub. You can find it today still on GitHub!. Chroma was used across all of the LifeOmic products to help designers and developers build web products quickly, with consistent UX. We focused on all the things you'd expect from a Design System - consistent UI/UX, a11y standards, etc. I was really proud with it by the time I left, and was happy to see how great the adoption was. I learned a lot by taking a Design System public - moreso less about code, but more how to convince people Design Systems are a good idea, how to get buy-in from upper management, etc. - I may write about this!

You can find out more here!

Built an Icon Set

If you have a Design System, why not build your own icon set as well? That's exactly what we did. I built Chromicons with Doryan which is our take on a custom icon set. Doryan is an excellent artist and someone I really admire. One day we were reviewing something with Chroma and we started talking - "what if instead of using feather icons, we just build our own?". That question took off like a rocket and we ran with it to build Chromicons.

One of the things I was proud of building was the process for adding icons. The icons were made in Figma. You'd export them to an SVG file and put them in the lined directory. After that, React components would get generated automatically via SVGR:

"generate:react-components": "svgr --template svg-template.js src/raw/lined --out-dir src/build/react/lined --typescript",

Essentially you point SVGR to a JS template to use to convert the SVG file to a component, tell it the directory of your icons, and then tell it where to output the React components. For the template, we are setting the viewbox, adding a data- attribute for testing, and setting the aria-hidden attribute to true as these are things we wanted all icons to have.

// from https://github.com/lifeomic/chromicons/blob/master/svg-template.js

/**
 * This template allows us to modify the generated React component template.
 */

function template(
  { template },
  _,
  { imports, componentName, props, jsx, exports }
) {
  jsx.openingElement.attributes = [
    ...jsx.openingElement.attributes,
    {
      type: 'JSXAttribute',
      name: { type: 'JSXIdentifier', name: 'viewBox' },
      value: { type: 'StringLiteral', value: '0 0 24 24' },
    },
    // Currently documentation folks at LifeOmic use `data-icon` to identify
    // which icon is being used so they can import it in their app
    {
      type: 'JSXAttribute',
      name: { type: 'JSXIdentifier', name: 'data-icon' },
      value: { type: 'StringLiteral', value: componentName.name },
    },
    // For our generated React components, we think this makes sense
    // to do by default: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute
    {
      type: 'JSXAttribute',
      name: { type: 'JSXIdentifier', name: 'aria-hidden' },
      value: { type: 'StringLiteral', value: 'true' },
    },
  ];
  return template.ast`
    ${imports}
    const ${componentName} = (${props}) => ${jsx}
    ${exports}
  `;
}

module.exports = template;

Became a Dad

Probably the highlight of this time being away - I became a dad! I've always wanted to be a father, so this was a dream come true. Seeing my son grow every day is such a treat and I am very thankful for the time I got to spend with him while he was a baby during the COVID lockdowns. I will cherish it forever!

Back to Ember

After almost four years of React, I'm back working in Ember! I took a job at CrowdStrike to work on their Design System and UX Foundations team. I'm really excited about this opportunity and have loved my time thus far. I'm looking forward to what we accomplish!

Talk Soon?

That's really about it in a nutshell! I hope to write more frequently now that I've redone my personal site here. Hopefully hear more from me soon! Cheers!