Google Polymer project held an event in London to learn about Polymer and meet other developer. It was a fantastic experience, where there was lots of information about new technologies and ways to develop.
Arriving at the venue, the branding was everywhere, and it was possioble to find the venue by simply following the crowds of people from the station.
I was to go to the main desk where I checked in, collected my pass, shirt and was directed to the breakfast lounge.
Arriving early at 8AM breakfast was served, this was free and seats were provided around the venue in a typical Google fashion, it encouraged conversation between developers. It was fascinating to meet professionals much better than I had ever expected.
It was at this point people were discussing what the days events were going to be able what they were most looking forward to, people were crowding around these moniters, checking out the days itinery.
At 9AM the doors opened and the opening speech began, luckily I managed to get one of the front row seats.but looking back there were the 700 attendies from over 100 different countries.I spent the day watching talks on cutting edge web technologies.I also attended workshops where I would get involved with coding apps.When the days coding was over, Google had an open bar with free drinks and food to allow for conversations between coders.
This test was a really important stage because it stopped me from doing what I planned to do. I wanted to use the grid system for the homepage which looked really nice and had fluid animations between the different screens. You can see a working model of the example I was working on here.
It looked really good, inital testing showed that should be a reasonably simple example to work with. The only issue I had encountered so far was the mobile version would need to be completely different as it looks so compacted when in the mobile version as can be seen here;
I tried to create a div with a set id of #test2, then I created a string connected to the div using ;
The x-card component includes some really important things that can be furthewr implemented into my coachella redesign. to check these out I experimented with the demo file and got it working like so…
On this page the animations worked really well as can be seen here
When editing the code I was able to add a third button but then change it into an image. You can see this here;
Next i coded this image to animate with a red background instead of grey;
Then when you finally land on this new page I created a text button that took you back to the original page;
It was a little tricky to understand at first but it was a valuable learning curve that helped me understand how to use the elements in the x-card component that I needed to use. You can see breakdown of all the code in this project below;
By it’s pure nature, designing a project that uses Polymer is going to be demanding and restrictive. The important part to note is not only does Google specify many of the design techniques to be used, but the project is, put simply, a framework. Add into the mix the fact that I am learning how to use it at the same and it becomes a very complicated and difficult project to attempt, let alone complete.
So with this in the back of my mind at all times, it is important I try to use the components that are available to me and don’t try to make things too complex for myself. Therefore I need to note the elements that are available to me, here are the different elements that are available to me;
These are layouts and animations that I am able to use in my project, it is import to understand the elements available to me too!!
Using the Google elements that come with the Polymer project is reasonably easy, it is just important to remember that we are dealing with pre built elements and we need to treat them in this way. While they are customisable, there are limitations to what you can do. Below you will see my first efforts to create a page which experiments with the use of Polymer Project elements.
Now I have looked at custom components and ability to nest them inside each other, it was time to move on to practicing with the Polymer Project elements. The aim of this was to understand how to use them, but because I had already learnt so much I knew it would be reasonably simple.
It was simple, allI needed to do was import the code, use the element tag for the google map and add the map attributes to the code and it was done!
As you can see the map is now implemented into the page exactly as coded.
Now I knew the basics a little bit, it was time to step it up and create a slightly more complex custom component. This time I created a custom component that was connected within another custom component that could be used as a whole custom component. Check out the results below!!
First step is to create the backbone by setting up the layout and the content specifications.
Next up, I added the specific content and made sure my custom element would repeat for all sets of data.
The best part of components is that even with all this complex code going on in the background the index file is super clean, it just included the custom component tag.
With the addition of some simple structural css, the end product looks like this.
This was the most important stage, it allowed me to understand the basics of the Polymer Project and how the concept would work. This first test was to get used to concept of components by writing my own and connecting it to another file. The aim of this was to create a component that would allow the user to add text into a box and let allow it to become applied in a sentence on the screen, the technical term for this is two way data binding.
This file is the actual component, it is what is referred to from the index.html.
This is how I implement the custom element.
As you can see below, the outcome was exactly as expected.