I choose the display-rss component because it’s simple and has most of the use cases you would find in a web component.

What the component does basically loads any RSS feed and displays it

Starting up

We’ll be using Polymer as the library for the polyfills and creation of the element, and the help of Yeoman the tool I told you about in another post, and you will need to have NodeJS installed too.

We’ll begin by stalling Yeoman:

npm install -g yo

Then we’ll install the Polymer Generator

npm install -g generator-polymer

Then create a new folder mkdir my-element && cd $_

And start the generator yo polymer

This will create the base app structure, and will also install grunt and bower, go make a cup of tea.

Once all dependencies are downloaded we can create our element using:

yo polymer:element my-element

This command will ask us if we want to include a constructor, we mark the check, and we also mark that we want to import to our index.html using HTML imports.

Then it will ask if we want to import local elements, we leave blank.

Then it will ask if we want to import installed Bower elements, we are going to write polymer-json since we’ll be using it later.

Finally this will create our element in app/elements/my-element.html.

Since we said we wanted the polymer-jsonp element we have to install it: bower install --save Polymer/polymer-jsonp

The --save option ensure that this gets added to your bower.json file, if you are asked to choose a suitable version for polymer, I usually choose the one that specifies a version number.

Web Components had become my latest obsession, I read about them a long time ago, but it wasn’t until the major players on the web arena embraced them that I really saw them as something I could use today.

When I say major players I mean Mozilla and Google, both of them started writing javascript libraries that provide polyfills for the features needed to make web components work today.

Searching for tools

I’ve been searching and trying new workflows when starting a front end project/project phase, there are a lot of interesting open source projects for rapid prototyping ‘static’ websites in a reusable, collaborative, optimised and intelligent way.

I’ve been trying tools like:

• Grunt for automating build tasks like optimising images, minifying and uglifying javascript, css and html.
• Bower a package manager for the web (meaning front end).
• Compass I know it can do a lot of things but I’m using it only to compile Sass files.

But it wasn’t until I found Yeoman that everything came toghether.

It’s a tool that scaffolds, downloads and prepares all these tools for you doing the tedious configuration part and using best practices approach in all parts.

Hello World!

I’ve lost the count on how many blogs I started and abandoned, and I always tell myself, “this is going to be the one, I’m gonna crush it with this one”, and the farthest I get is 10 posts or less. This is because I normaly enjoy more setting up, designing, customizing the blog than actually writing on it.

But hey, this one is going to be different, I’m gonna crush it with this one!

I will honestly try to put in here the things I learn and use in a daily basis, new technologies, techniques and stuff that obsesses me for a briefly amount of time.

This blog is being served from Github using Jekyll and Octopress.