Another web component - upper88-title

In the weekend I published my second web component - upper88-title. Like my first one this is a vanilla JS web component, that does not use Polymer or any other library, apart from the web components polyfill. It might also be the smallest web component ever in terms of lines of code...

What it does is very simple: it allows you to tag some html in your web page as title, and the web component will grab the text (skip html tags) and set it as document title. So you don't have to type the same text over again - and can avoid the risk of forgetting to update the document title, it will always show the same text as that displayed in the actual page.

A little more advanced is that you can use Polymer data binding (even if the component itslef does not depend on Polymer) to set the content of both the HTML tag and document title at the same time. 

Tried to publish it on customelements.io but it seems like the job that updates the site is broken, so you can't see it there yet.

Polymer summit 2015

During the day I've followed Polymer Summit 2015 over the net. Lots of good talks and useful information. I do belive that the approach of Custoim HTML elements is the future, but even though Polymer is on it's way, I don'ät think tehey are really there yet.

Pros:

• the approach of components that can be reused, extended and combined into new components
• some really awesome components are available out there, both from Google and others

Not cons, but stuff they have to work on:

• dependencies,build system etc: when you start a polymer project, bower will download that feels like half the internet for you, not really manageable, and my previous experiences from build system have not been to good. You really need a good build system, and preferanbvle a CDN so you don'ät have to manage all this
• the kiving of HTML, CSS and javascript in one file seems like a step backward.

But yes,. I do think web components is the future, I only wonder when we will be there....

Web Components: no size in attachedCallback

When I made the upper88-wordclod web component everything worked fine when I had hard-coded sizes in the beginning. The library worked well and gave the ouput I expected (well, actually a bit better, it's an awesome library).

But when I switched to a size set with CSS it stopped working. After some debugging I realized that the element had no size yet. When attachedCallback(which is the place where you would render your element for the first time) is called, the element has no size set yet, so if your code (or a library you might use) relies on getting the height or width of the element ity won't work.

The recommended way is to remove all sizing from javascript and do it in CSS instead, which will work, but in my case that was not an option. Instead I had to add a call to setTimeout to make the actual rendering take place a bit later, after sizes have been calculated. That seems to work well, you don't actually see the delay and I have had no problem with the solution.

First web component published - upper88-wordcloud

Yesterday I published my first web component, It is a custom component called upper88-wordcloud. Very basic so far, you set the data using the attribute rows and optionally minimum and maximum font size using an options attribute.

An example:

Goldmedals from Track and Field World Championship 2015

Html for this:
<upper88-wordcloud options='{"maxFont":60}' rows='[["Kenya", 7], ["Jamaica", 7], ["United States", 6], ["Great Britain", 4], ["Ethiopia", 3], ["Poland", 3], ["Canada", 2], ["Germany", 2], ["Russia", 2], ["Cuba", 2]]'>
    </upper88-wordcloud%gt;

Size, background color etc are set using CSS.

For rendering the actual word cloud the component uses a library available on GitHub, wordcloud2.js by Tim Dream. A great library, and it supports rendering the wordcloud as a set of HTML span's, which feels like the best way to go for a custom element.

So far the component is very basic and doesn't expose much of the flexibility that the library has. There is definitely room for improvement.