Hello, JS

Welcome to my blog!

This is just a place for me to vent about various JavaScript problems and solutions that I've experienced. Maybe you've experienced them too...

Recent Posts

What the Lit-Element

Fri, Jun 1, 2018
Lit-Element is the next step in the Polymer journey. Gone are the days of 2 way data binding. The library size has gone down too. Everything seems to have been built around lit-html. This post will be a bit of guide around using Lit-Element and we’ll be making a clone of the Netflix UI. Unfortunately, Lit-Element hasn’t hit a production ready release and the tools for starting a project are a bit lacking.

What the Polymer?

Fri, May 11, 2018
So I’ve just finished watching several of the Google IO 2018 talks and I was left a bit stunned. It appears Polymer 3 is somewhat dead on arrival since it’ll be released and only ever receive maintenance updates after that. Let’s start on what Polymer 3 gives us and discuss lit-element in the next post. Polymer 3.0 To paraphrase the Polymer blog: “Polymer 3.0 is about moving from HTML Imports to ES Modules and from Bower to npm”.

Composing Web Components

Thu, Apr 26, 2018
Last week I was attempting to build a searchable dropdown box using Polymer. I knew that composability was important and decided to pull in [iron-input]() and [iron-dropdown]() and started coding the two pieces together. I managed to coble something together but it was pretty rough and required looking for all sorts of edge cases. I pulled in one of our other Polymer devs and found out about a few more components that we have published.

Polymer Tweet

Mon, Apr 23, 2018
Today we consume our tweets with polymer. If you prefer to checkout the code, I’ve posted it here. I’ll post what will be returned from the API so we know what we’re working with: tweets/1 const tweet = siren({ class: ['tweet'], properties: { text: 'Here is my tweet', updatedAt: '10:16 AM - April 23, 2018' }, entities: [{ class: ['user'], rel: 'rels/user', href: 'users/1' }], links: [{ rel: ['self'], href: `tweets/1` }], actions: [] }) users/1 const user = siren({ class: ['user'], properties: { username: 'GoHugo.

Siren Sub Entities

Thu, Apr 19, 2018
One of the guiding principles of HATEOAS is that every entity has a single route to access it. If I need to get a specific tweet I will hit the api route /tweets/1 and that will contain the data about that tweet for as long as that tweet exists. This may sound obvious for anyone who has done REST APIs but it becomes a little less obvious when discussing things like search, sort, and filter.

Building an API

Wed, Apr 18, 2018
This is going to be a quick post about actions using siren-writer. I’m in the process of building a twitter clone powered by Siren and Polymer and on the API front I make heavy use of siren-writer. When returning an entity from the API we need to make sure that it has all the required information the client side will need to render properly. This includes sub-entity links, actions, etc.

The New Stack

Sat, Mar 31, 2018
This is going to be a multi-part series about the new stack at D2L. We’ve decide to move in the direction of Hypermedia API (Siren) powering Polymer web components. Unfortunately, documentation for Siren is pretty sparse. Side note, if anyone knows a good tutorial or guide on getting started, feel free to send it my way. This series is going to start off talking about the benefits of the stack and exploring whether those benefits pan out.

Monkey Patching

Sat, Dec 16, 2017
A rather unfortunate bug occurred at work this week that perplexed a few of us. We had a button that, when clicked, opened a dialog. Our product is fairly old and so it has gone through several partial refactorings. We have new pages (MVC) and legacy pages. We also have client side feature flags to turn on / disable certain features. New UI Flag Legacy MVC On Works!