Attending Google Polymer

 

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.IMG_1144.JPG

I was to go to the main desk where I checked in, collected my pass, shirt and was directed to the breakfast lounge.

IMG_1145.JPG

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.IMG_20161017_0844219.jpg

4f295292-b944-49a8-af75-524d16fe65ef.jpg78a26f76-a3aa-44bb-a42b-5782265c1025.jpgIMG_1146.JPG

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.IMG_1147.JPG

At 9AM the doors opened and the opening speech began, luckily I managed to get one of the front row seats.IMG_1155.JPGbut looking back there were the 700 attendies from over 100 different countries.img_1156img_1157I spent the day watching talks on cutting edge web technologies.img_20161017_1100091img_20161017_1814150img_20161017_1013256I also attended workshops where I would get involved with coding apps.8a37397f-7474-4e9c-bafe-3216be405a94.jpgWhen the days coding was over, Google had an open bar with free drinks and food to allow for conversations between coders.img_20161017_1905222img_20161017_1843083img_20161017_1843134

Advertisements

FOURTH POLYMER PROJECT TEST

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;

Screen Shot 2016-03-22 at 18.28.51.png

Then I tried to work with the code itself. While I had read an entire book ( JAVASCRIPT & JQUERY written by Jon Duckett) on reading and writing javascript code, it still managed to beat me. I believe that though using online forums etc to double check my code it was in fact correct but unfortunately the javascript I wanted to use clashed with the Polymer project and returned the user a blank screen.

TEST-4.png

I tried to create a div with a set id of #test2, then I created a string connected to the div using ;

 document.getElementById("test2");

This would pull the information from the div through the javascript. Therefore, it appears  through trail and error and online feedback that this just wouldnt work in this scenario.

References;

https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages&view=demo:demo/index.html

Understanding the x-card component

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;

Screen Shot 2016-03-21 at 12.36.06.png

Next i coded this image to animate with a red background instead of grey;

Screen Shot 2016-03-21 at 12.38.20.png

Then when you finally land on this new page I created a text button that took you back to the original page;

Screen Shot 2016-03-21 at 12.39.25.png

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;

code-explained.png

 

Design Stage.

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;

THE LAYOUTS

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!!

Learning Polymer Project

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.

The Code;

collaborator.png

The Result;

Screen Shot 2016-03-12 at 11.43.54.png

Third POLYMER PROJECT TEST

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.

The Code;

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!

google-maps.png

The Result;

As you can see the map is now implemented into the page exactly as coded.

Screen Shot 2016-03-12 at 09.55.33.png

SECOND POLYMER PROJECT TEST

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!!

The Code;

First step is to create the backbone by setting up the layout and the content specifications.

contactlisting1

Next up, I added the specific content and made sure my custom element would repeat for all sets of data.contactlisting2

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.contactlisting3

 

The Result;

With the addition of some simple structural css, the end product looks like this.

Screen Shot 2016-03-12 at 09.39.24.png