<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.7.3">Jekyll</generator><link href="https://blog.raffaeu.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://blog.raffaeu.com/" rel="alternate" type="text/html" /><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/</id><title type="html">Raffaeu’s Blog</title><subtitle>Software Architect with a passion for Kitesurf.</subtitle><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-23-work-permits-typologies-in-bermuda.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-23-work-permits-typologies-in-bermuda</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-23-work-permits-typologies-in-bermuda.html">&lt;p&gt;During this days I see a lot of People asking in the forums. What kind of work permits Bermuda government release?, so I have decided to help you and give you a little brief regarding actual Bermuda’s work permits.&lt;/p&gt;

&lt;h1 id=&quot;typologies&quot;&gt;Typologies&lt;/h1&gt;

&lt;h2 id=&quot;part-time-permit&quot;&gt;Part-Time Permit&lt;/h2&gt;

&lt;p&gt;A Part-time permit, allows a person (&lt;em&gt;who is still resident in Bermuda!!I)&lt;/em&gt; to work no more than 9 hours a week, also if the person is  a tutor or something like that.&lt;/p&gt;

&lt;p&gt;The application is around 293.00 $ (BSD).&lt;/p&gt;

&lt;h2 id=&quot;temporary-permit&quot;&gt;Temporary Permit&lt;/h2&gt;

&lt;p&gt;This kind of permit allow a person to be employed for a specific job, for no more than 3 months. In this case the person is considered like a visitor for Bermuda Government and there is no need to provide immigration questionnaire, x-ray chest and so on.&lt;/p&gt;

&lt;p&gt;In this case that person can renew the work permit (by a request from the employer) only one time, for a maximum of total 6 months.&lt;/p&gt;

&lt;p&gt;The application is around 293.00 $ (BSD).&lt;/p&gt;

&lt;h2 id=&quot;long-term-permit&quot;&gt;Long Term Permit&lt;/h2&gt;

&lt;p&gt;There are a lot of Long Term permits released by Bermuda Government, the first one is the classic one year work permit. If the person has to work for a period less than 18 months this is the right work permit.&lt;/p&gt;

&lt;p&gt;The application is 587.00 $.&lt;/p&gt;

&lt;h2 id=&quot;long-term-permit--more-than-one-year&quot;&gt;Long Term Permit : (more than one year.)&lt;/h2&gt;

&lt;p&gt;Ok I don’t want to explain all the kind of Long Term Work Permit. You have to know that there are a lot of, every one is distinguished by the period time of lease.
So check the table under there:&lt;/p&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Period&lt;/th&gt;
      &lt;th&gt;Min Period&lt;/th&gt;
      &lt;th&gt;Max Period&lt;/th&gt;
      &lt;th&gt;Application&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;1 Year&lt;/td&gt;
      &lt;td&gt;0 Months&lt;/td&gt;
      &lt;td&gt;18 Months&lt;/td&gt;
      &lt;td&gt;587.00 $&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2 Years&lt;/td&gt;
      &lt;td&gt;18 Months&lt;/td&gt;
      &lt;td&gt;30 Months&lt;/td&gt;
      &lt;td&gt;1.174.00 $&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;3 Years&lt;/td&gt;
      &lt;td&gt;30 Months&lt;/td&gt;
      &lt;td&gt;42 Months&lt;/td&gt;
      &lt;td&gt;1.761.00 $&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;4 Years&lt;/td&gt;
      &lt;td&gt;42 Months&lt;/td&gt;
      &lt;td&gt;54 Months&lt;/td&gt;
      &lt;td&gt;2.348.00 $&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;5 Years&lt;/td&gt;
      &lt;td&gt;54 Months&lt;/td&gt;
      &lt;td&gt;66 Months&lt;/td&gt;
      &lt;td&gt;2.935.00 $&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;h2 id=&quot;summary&quot;&gt;Summary&lt;/h2&gt;

&lt;p&gt;There are also other important notice and rules to know if you want to work in Bermuda Island. For example, you cannot request a work permit, only the employer can; also you cannot change your employer, It’s not easy!&lt;/p&gt;

&lt;p&gt;You can also find useful information directly visiting the Bermuda Immigration web site, at this URL: &lt;a href=&quot;http://www.customs.gov.bm&quot; title=&quot;http://www.customs.gov.bm&quot;&gt;http://www.customs.gov.bm&lt;/a&gt;.&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-23-waiting-perdiod-the-most-worst.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-23-waiting-perdiod-the-most-worst</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-23-waiting-perdiod-the-most-worst.html">&lt;p&gt;In this period, in principal the last week, I’m finishing my last job in Switzerland and I’m still waiting for my Temp Permit in Bermuda.
Yeah guys beleive me, this is the most worst period you can live!!
You still don’t know when you will relocate, but you cannot do anything.
You still don’t know the final date, but you are concious that your current job is finished, so you are unemployed!&lt;/p&gt;

&lt;p&gt;Oh Man I really don’t like wait.
But It seems to be normal in BM. So I have to get used.&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-22-some-nice-shot-can-convince-you.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-22-some-nice-shot-can-convince-you</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-22-some-nice-shot-can-convince-you.html">&lt;p&gt;It’s not easy to pick up your life and your family and start for a new adventure, but this is my idea!&lt;/p&gt;

&lt;p&gt;Many of you, can think. Why go out of Italy and start a new life in a really small Island like Bermuda is?’ You can find part of the answer in the photos bottom here.&lt;/p&gt;

&lt;p&gt;This is one of the reason that convinced me to relocate there!&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://farm1.static.flickr.com/55/190715605_e45f715086.jpg?v=0&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-22-not-only-e-moo.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-22-not-only-e-moo</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-22-not-only-e-moo.html">&lt;p&gt;Yeah off course, this is the truth! Many of you can think that only in &lt;a href=&quot;http://www.e-moo.com&quot;&gt;http://www.e-moo.com&lt;/a&gt; you can find personal announcement regarding House rent, Car sell, and more. This is not real because there is another interesting web site in Bermuda community where you can find useful announcements, the web site is:&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://sell.bm&quot;&gt;http://sell.bm&lt;/a&gt;. Just today they have publicized their web portal in the Royal Gazette web site. So.&lt;/p&gt;

&lt;p&gt;Try to enjoy it, maybe you can find what are you searching for!&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-21-the-island-of-bermuda.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-21-the-island-of-bermuda</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-21-the-island-of-bermuda.html">&lt;h1 id=&quot;bermuda&quot;&gt;Bermuda&lt;/h1&gt;

&lt;p&gt;As to start, Because in this forum I will post my new experience to my relocation to Bermuda, I think It’s correct to start by talking about this Island.&lt;/p&gt;

&lt;p&gt;As you can look at the picture below, Bermuda is a small Island. Bermuda is a British territory overseas, in the North Atlantic Ocean. It’s around 1800 Km far from Florida, south of Halifax. The territory is around 180 small island, and the total area is around 53 Km°.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2013/03/e10f50f4-ea80-4ac1-a8a3-fd81069bae6dbermuda_2.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;an-history-brief&quot;&gt;An History Brief&lt;/h2&gt;

&lt;p&gt;Bermuda was discovered by Europeans, around 1500, many books say around 1503. We are sure that was known by 1511 when Peter Martyr published his &lt;em&gt;Legatio Babylonia&lt;/em&gt;, wich talks about Bermuda also.&lt;/p&gt;

&lt;p&gt;For the next century, the island is believed to have been visited frequently but not permanently settled. Intentional settlement of Bermuda began with the arrival of the &lt;em&gt;Plough&lt;/em&gt;, in 1612.&lt;/p&gt;

&lt;p&gt;The Constitution of Bermuda came into force on &lt;a href=&quot;http://en.wikipedia.org/wiki/June_1&quot;&gt;June 1&lt;/a&gt;, &lt;a href=&quot;http://en.wikipedia.org/wiki/1967&quot;&gt;1967&lt;/a&gt; and has been amended in 1989 and 2003. Defence and foreign affairs remain the responsibility of the United Kingdom, which also retains responsibility to ensure good government. It must approve any changes to the Constitution of Bermuda. Bermuda now exists as an overseas territory of Britain, but it is the oldest British colony. In 1620, a Royal Assent granted Bermuda limited self-governance, thus making Bermuda’s Parliament the fifth oldest in the world, behind only England, the Isle of Man, Iceland and Poland.&lt;/p&gt;

&lt;h2 id=&quot;parishes&quot;&gt;Parishes&lt;/h2&gt;

&lt;p&gt;In the picture below you can find the actual Parishes structure of Bermuda Island.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://upload.wikimedia.org/wikipedia/commons/d/dc/Bermuda-divmap.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-21-relocating-relocating-relocating.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-21-relocating-relocating-relocating</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-21-relocating-relocating-relocating.html">&lt;p&gt;I have the pleasure to inform you that, if Everything will be ok, starting from the next month, I will relocate with my family.&lt;/p&gt;

&lt;p&gt;Now I’m working in Switzerland but I’m Italian and I live in Italy with my Wife and my sweet Dog.&lt;/p&gt;

&lt;p&gt;Now in Italy there are a lot of problems, some about politics, some about cost of living and more .. So because I’m a IT Specialist (Microsoft) I have decided to try to relocate in a new place for a better life!&lt;/p&gt;

&lt;p&gt;So stay tuned because starting from today I will share with you my experience and my trouble regarding relocating in a new Country!&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-04-21-find-a-job-in-bermuda.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-04-21-find-a-job-in-bermuda</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-04-21-find-a-job-in-bermuda.html">&lt;p&gt;One of the first duty you have to solve if you want to relocate in the Bermuda Island is to find a good Job. This is because the actual law in Bermuda say that &lt;strong&gt;You cannot relocate in Bermuda before you have a work Permit, to obtain a work permit you must have an employer that asks the permit for you.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In this post I want to help you giving some usefull Link regarding Web Portal where you can find job vacancies.&lt;/p&gt;

&lt;h1 id=&quot;url-to-find-a-job-in-bermuda&quot;&gt;URL to Find a Job in Bermuda&lt;/h1&gt;

&lt;p&gt;The first one is &lt;a href=&quot;http://www.jobinthesun.com&quot;&gt;www.jobinthesun.com&lt;/a&gt;, a very usefull web site where you can find updated job vacancies, job agencies and more. You can also find a usefull forum where you can find answer for your questions. Be aware because this service is not free. I have found job there, so for me, It works!&lt;/p&gt;

&lt;p&gt;You can also find job here, in &lt;a href=&quot;http://www.bermudashorts.bm&quot;&gt;www.bermudashorts.bm&lt;/a&gt;, one of the most popular web site ragarding the Bermudian Community. This is a free forum but It’s more difficult to find good Job!&lt;/p&gt;

&lt;p&gt;Another interesting link is &lt;a href=&quot;http://www.bermuda4u.com/&quot; title=&quot;http://www.bermuda4u.com/&quot;&gt;http://www.bermuda4u.com/&lt;/a&gt;, a usefull Web Portal regarding Bermuda Life Style, Companies, and also Employeer agencies. You can find here a lot of informations regarding relocation and Job Search!!&lt;/p&gt;

&lt;p&gt;In the next post I will say to you my personal experience with a Local Employeer agency and the fantastic Montreal girl who is in charge to relocate me. But everything the next time, so, stay tuned!!&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html"></title><link href="https://blog.raffaeu.com/2018/07/25/2008-02-06-translation-of-scott-guthrie-weblog.html" rel="alternate" type="text/html" title="" /><published>2018-07-25T18:56:08+00:00</published><updated>2018-07-25T18:56:08+00:00</updated><id>https://blog.raffaeu.com/2018/07/25/2008-02-06-translation-of-scott-guthrie-weblog</id><content type="html" xml:base="https://blog.raffaeu.com/2018/07/25/2008-02-06-translation-of-scott-guthrie-weblog.html">&lt;p&gt;Starting from today, you can Find a new SubDomain in my WebLog, called &lt;a href=&quot;http://blog.raffaeu.com/ScottGu/Default.aspx&quot;&gt;http://blog.raffaeu.com/ScottGu/Default.aspx&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the address of my new epic job!! I will be in charge to translate in italian language the Scott Guthrie webLog.&lt;/p&gt;

&lt;p&gt;Stay tuend!!&lt;/p&gt;</content><author><name></name></author></entry><entry><title type="html">Get started with Polymer 1.0 and Sublime Text 3.0</title><link href="https://blog.raffaeu.com/archive/2016/02/22/get-started-with-polymer-1-0-and-sublime-text-3-0/categories/%20-%20Agile%20-%20polymer" rel="alternate" type="text/html" title="Get started with Polymer 1.0 and Sublime Text 3.0" /><published>2016-02-22T14:18:17+00:00</published><updated>2016-02-22T14:18:17+00:00</updated><id>https://blog.raffaeu.com/archive/2016/02/22/get-started-with-polymer-1-0-and-sublime-text-3-0/categories/get-started-with-polymer-1-0-and-sublime-text-3-0</id><content type="html" xml:base="https://blog.raffaeu.com/archive/2016/02/22/get-started-with-polymer-1-0-and-sublime-text-3-0/categories/%20-%20Agile%20-%20polymer">&lt;h1 id=&quot;development-of-polymer-using-sublime&quot;&gt;Development of Polymer using Sublime&lt;/h1&gt;

&lt;p&gt;In a previous &lt;a href=&quot;/archive/2016/02/17/get-started-with-polymer-1-0-and-webstorm-11&quot;&gt;post I have explained&lt;/a&gt; how to get started with Polymer 1.0 and Webstorm 11. Unfortunately &lt;a href=&quot;https://www.jetbrains.com/webstorm/&quot;&gt;WebStorm&lt;/a&gt; is a &lt;strong&gt;paid&lt;/strong&gt; product and not all of my followers can purchase a license (&lt;em&gt;me neither, I am trying to see if JetBrains will grant me a teacher license for free&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;So, I decided to create a new tutorial which explains how to get started with &lt;a href=&quot;https://www.polymer-project.org/1.0/&quot;&gt;Polymer 1.0&lt;/a&gt; using &lt;a href=&quot;https://www.sublimetext.com/3&quot;&gt;Sublime Text&lt;/a&gt;, a power and free text editor also used by Google Polymer’s Team. In this tutorial I will use more tools than in the previous one because SublimeText is just a text editor (&lt;em&gt;powerful but still a text editor&lt;/em&gt;), so in order to run your app you also need an integrated web server like GULP and other tools.&lt;/p&gt;

&lt;h2 id=&quot;download-the-necessary-tools&quot;&gt;Download the necessary tools&lt;/h2&gt;

&lt;p&gt;First of all, in order to have the proper environment setup correctly, especially in Windows, you MUST download all tools before you start to download SublimeText or Polymer, otherwise you will start the nightmare of “path not found” errors and similar.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;GIT&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;GIT is a well-known command tool for managing GIT repositories. Even if you come from an SVN or TFS (Team Foundation Server) environment I would suggest you to get started on GIT because even companies like Microsoft are moving their source code into GitHub or BitBucket repositories and GIT is used by BOWER to download and synchronize components from Polymer.
&lt;a href=&quot;https://git-scm.com/&quot; title=&quot;https://git-scm.com/&quot;&gt;https://git-scm.com/&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;NODE.js&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node is a JavaScript runtime build on Chrome V8 JavaScript engine. If you work with Polymer your primary use of Node is with the command NPM, which will be used in parallel with BOWER.
&lt;a href=&quot;https://nodejs.org/en/&quot; title=&quot;https://nodejs.org/en/&quot;&gt;https://nodejs.org/en/&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;BOWER&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you come from Java you may be aware of “Maven Central” while if you come from .NET you may be aware of “Nuget”. Well BOWER is the same concept applied to web development. It allows you to download “packages” of CSS, JavaScript and HTML files packed as “components”. Without Node.js you can’t use BOWER because it requires the NPM (Node Package Manager) command tool.
&lt;a href=&quot;http://bower.io/&quot; title=&quot;http://bower.io/&quot;&gt;http://bower.io/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So at this point you have your core tools registered and working correctly. Now it’s time to download SublimeText 3.0 and configure it in order to get it setup correctly. The download link is available here: &lt;a href=&quot;https://www.sublimetext.com/3&quot; title=&quot;https://www.sublimetext.com/3&quot;&gt;https://www.sublimetext.com/3&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;configure-sublime-text-30&quot;&gt;Configure Sublime Text 3.0&lt;/h2&gt;

&lt;p&gt;After Sublime Text is installed you need to configure it in order to understand Polymer 1.0 and in order to being able to run Polymer using &lt;a href=&quot;http://gulpjs.com/&quot;&gt;GULP&lt;/a&gt;.&lt;/p&gt;

&lt;h3 id=&quot;step-01--sublime-package-manager&quot;&gt;Step #01 – Sublime Package Manager&lt;/h3&gt;

&lt;p&gt;Sublime provides an integrated console where you can run Sublime commands. You can open the console using two different techniques:&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;CTRL + Menu &amp;gt; View &amp;gt; Show Console&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;When the console is open, copy the script that will enable package manager, which is &lt;a href=&quot;https://packagecontrol.io/installation&quot;&gt;available here&lt;/a&gt;.&lt;/p&gt;

&lt;h3 id=&quot;step-02--install-sublime-plugins&quot;&gt;Step #02 – Install Sublime Plugins&lt;/h3&gt;

&lt;p&gt;Sublime comes out of the box with almost anything but in order to create a proper development environment for Polymer 1.0 we need some plugins:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; CTRL + SHIFT + P will open “Package Manager”&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/SNAGHTML12c1e91.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;&lt;em&gt;Below is a list of plugins that I personally believe you should have installed in order to be able to work with Polymer&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h4 id=&quot;autoprefixer&quot;&gt;Autoprefixer&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-11.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you want a quick way to add vendor prefixes to your CSS, you can do so with this handy plugin.&lt;/p&gt;

&lt;h4 id=&quot;emmet&quot;&gt;Emmet&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-12.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Add some useful keyboard shortcuts and snippets to your text editor.&lt;/p&gt;

&lt;h4 id=&quot;html-css-js-prettify&quot;&gt;HTML-CSS-JS Prettify&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-13.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;This extension gives you a command to format your HTML, CSS and JS. You can even prettify your files whenever your save a file.&lt;/p&gt;

&lt;h4 id=&quot;git-gutter&quot;&gt;Git Gutter&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-14.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Add a marker in the gutter wherever there is a change made to a file.&lt;/p&gt;

&lt;h4 id=&quot;gutter-color&quot;&gt;Gutter Color&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-15.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Gutter Color shows you a small color sample next to your CSS.&lt;/p&gt;

&lt;h3 id=&quot;step-03--create-a-new-project&quot;&gt;Step #03 – Create a new Project&lt;/h3&gt;

&lt;p&gt;Finally, we need to create a Sublime Text project in order to keep all our files in a good structure. First of all you need a folder, in my case I work in &lt;code class=&quot;highlighter-rouge&quot;&gt;C:\DEV&lt;/code&gt; and in this case I am going to have a project folder called &lt;code class=&quot;highlighter-rouge&quot;&gt;C:\DEV\Polymer_First&lt;/code&gt; where I will save my project structure.&lt;/p&gt;

&lt;p&gt;Open Sublime Text and point to the menu &amp;gt; Project &amp;gt; Save Project As:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image_thumb-16.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;This will create the new project with an extension of .sublime-project. Then go again into View Menu and choose Sidebar or simply press CTRL + K, CTRL + B.&lt;/p&gt;

&lt;h2 id=&quot;initialize-polymer&quot;&gt;Initialize Polymer&lt;/h2&gt;

&lt;p&gt;Now we can finally initialize our Polymer project.&lt;/p&gt;

&lt;p&gt;Click on Project &amp;gt; Add Folder to Project and choose your root folder so that your workspace and project structure are pointing to your root project.&lt;/p&gt;

&lt;p&gt;Open your SHELL or Command Prompt or TERMINAL and point to your Sublime Text root path, which is in my case &lt;code class=&quot;highlighter-rouge&quot;&gt;C:\DEV\Polymer_First&lt;/code&gt; and type &lt;code class=&quot;highlighter-rouge&quot;&gt;bower init&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-17.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Then download the basic setup for polymer using:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;nv&quot;&gt;$bower&lt;/span&gt; install &lt;span class=&quot;nt&quot;&gt;--save&lt;/span&gt; Polymer/polymer#^1.2.0bower 
&lt;span class=&quot;nv&quot;&gt;$install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--save&lt;/span&gt; PolymerElements/iron-elements
&lt;span class=&quot;nv&quot;&gt;$bower&lt;/span&gt; install &lt;span class=&quot;nt&quot;&gt;--save&lt;/span&gt; PolymerElements/paper-elements

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;At the end you should have this structure which includes the first .html filder (&lt;em&gt;Index.html&lt;/em&gt;):&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image-18.png&quot; alt=&quot;&amp;quot;&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Final step, which is the one I love most, is to install &lt;strong&gt;Sublime Server&lt;/strong&gt;, which is nothing more than a very simple Phyton local webserver.&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
CTRL + P &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; Install Package &lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; Sublime Server

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And voila’, now you can right click an .HTML file inside your Sublime Text editor and choose “View in Browser” which is by default &lt;em&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;&amp;lt;http://localhost:8080&amp;gt;&lt;/code&gt;&lt;/em&gt;.&lt;/p&gt;

&lt;h2 id=&quot;final-note&quot;&gt;Final Note&lt;/h2&gt;

&lt;p&gt;This is just an overview of how to setup Sublime Text but if you come from a complex IDE like Visual Studio or IntelliJ I would kindly suggest you to spend some time on Sublime and download all plugins that will make your life much easier. There are tons of useful plugins for web development and some specific for Polymer like the following:&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://packagecontrol.io/packages/Polymer%20%26%20Web%20Component%20Snippets&quot;&gt;Polymer and web components snippets&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://packagecontrol.io/packages/LESS&quot;&gt;LESS syntax highlighter&lt;/a&gt;&lt;/p&gt;</content><author><name>raffaeu</name></author><category term="android" /><category term="polymer" /><category term="sublime" /><summary type="html">Development of Polymer using Sublime</summary></entry><entry><title type="html">Polymer 1.0–Customize Style of existing components</title><link href="https://blog.raffaeu.com/archive/2016/02/18/polymer-1-0customize-style-of-existing-components/" rel="alternate" type="text/html" title="Polymer 1.0&amp;ndash;Customize Style of existing components" /><published>2016-02-18T15:30:00+00:00</published><updated>2016-02-18T15:30:00+00:00</updated><id>https://blog.raffaeu.com/archive/2016/02/18/polymer-1-0customize-style-of-existing-components</id><content type="html" xml:base="https://blog.raffaeu.com/archive/2016/02/18/polymer-1-0customize-style-of-existing-components/">&lt;p&gt;&lt;a href=&quot;https://www.polymer-project.org/1.0/&quot;&gt;Polymer 1.0&lt;/a&gt; comes with plenty of available components, especially if you are going to implement Material Design. The only problem is that they implement the default style which usually doesn’t fit with mine.&lt;/p&gt;

&lt;p&gt;In this post I want to show you multiple options of customizing a Polymer component together with the help of Polymer 1.0 &lt;a href=&quot;https://elements.polymer-project.org/&quot;&gt;documentation, available online&lt;/a&gt;.&lt;/p&gt;

&lt;h1 id=&quot;override-the-style-using&quot;&gt;Override the Style using&lt;/h1&gt;

&lt;p&gt;Let’s start by preparing a Polymer project, &lt;a href=&quot;/archive/2016/02/17/get-started-with-polymer-1-0-and-webstorm-11&quot;&gt;like explained in my previous tutorial&lt;/a&gt;, and we add a simple Toolbar with two icons:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/wp-content/uploads/2016/02/image_thumb-7.png&quot; alt=&quot;&amp;quot;image&amp;quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;And this is my markup to import and create a Toolbar with two paper-icon-buttons:&lt;/p&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;
&lt;span class=&quot;c&quot;&gt;&amp;lt;!-- Toolbar element --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bower_components/paper-icon-button/paper-icon-button.html&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;import&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bower_components/iron-icons/iron-icons.html&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;import&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;bower_components/paper-toolbar/paper-toolbar.html&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;import&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

&lt;span class=&quot;c&quot;&gt;&amp;lt;!-- Toolbar --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;paper-toolbar&amp;gt;&lt;/span&gt;
   &lt;span class=&quot;nt&quot;&gt;&amp;lt;paper-icon-button&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;icon=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;menu&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/paper-icon-button&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;title&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;My Toolbar&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
   &lt;span class=&quot;nt&quot;&gt;&amp;lt;paper-icon-button&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;icon=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;search&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/paper-icon-button&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/paper-toolbar&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Now, if I want to modify the background color of the Toolbar, first, I need to head to &lt;a href=&quot;https://elements.polymer-project.org/elements/paper-toolbar#Styling&quot; target=&quot;_blank&quot;&gt;the paper-toolbar documentation here&lt;/a&gt; and find out how I can do that.&lt;br /&gt;
The CSS property that we want to override in our case is called &lt;font face=&quot;Courier New&quot;&gt;–paper-toolbar-background&lt;/font&gt;.&lt;/p&gt;

&lt;p&gt;Inside the HEAD tag of your page, you can create a new &lt;style&gt; tag and override the style **globally** by using the selector &lt;font face=&quot;Courier New&quot;&gt;:root&lt;/font&gt;, like this example:&lt;/style&gt;&lt;/p&gt;

&lt;pre&gt;&lt;head&gt;&lt;br /&gt;&lt;br /&gt;    &lt;!-- Override globally --&gt;&lt;br /&gt;    &lt;style is=&quot;custom-style&quot;&gt;&lt;br /&gt;        :root{&lt;br /&gt;            --paper-toolbar-background: #FF6D00;&lt;br /&gt;        }&lt;br /&gt;    &lt;/style&gt;&lt;br /&gt;&lt;/head&gt;&lt;/pre&gt;

&lt;p&gt;&lt;a href=&quot;http://blog.raffaeu.com/wp-content/uploads/2016/02/image-8.png&quot;&gt;&lt;img title=&quot;image&quot; style=&quot;border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px&quot; border=&quot;0&quot; alt=&quot;image&quot; src=&quot;http://blog.raffaeu.com/wp-content/uploads/2016/02/image_thumb-8.png&quot; width=&quot;370&quot; height=&quot;103&quot; /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is important to use the attribute &lt;strong&gt;is=”custom-style”&lt;/strong&gt; which will inform Polymer that your style is going to override the normal Polymer CSS. Also, the tag style &lt;strong&gt;must&lt;/strong&gt; be inside the &amp;lt;HEAD&amp;gt; tag otherwise it won’t work because it will be loaded too late by polymer.&lt;/p&gt;

&lt;p&gt;Now, let’s say that this is too invasive for you and you want to override the toolbar background only for a specific scenario, for example, only for a certain webpage. We know that for the specific webpage the toolbar must be pink, so we can identify the toolbar id with a “pink” name:&lt;/p&gt;

&lt;pre&gt;&lt;style is=&quot;custom-style&quot;&gt;&lt;br /&gt;:root{&lt;br /&gt;--paper-toolbar-background: #FF6D00;&lt;br /&gt;}&lt;br /&gt;&lt;br /&gt;#pink-toolbar{&lt;br /&gt;--paper-toolbar-background: #E91E63;&lt;br /&gt;}&lt;br /&gt;&lt;/style&gt;
&lt;!-- Toolbar --&gt;
&lt;paper-toolbar id=&quot;pink-toolbar&quot;&gt;&amp;lt;/pre&amp;gt;

With this statement you are going to have all toolbars in your project with a background color equals to &lt;font face=&quot;Courier New&quot;&gt;#FF6D00&lt;/font&gt; except the one with id equals to **pink-toolbar** which will have a background color equals to &lt;font face=&quot;Courier New&quot;&gt;#e91e63&lt;/font&gt;.

[&lt;img title=&quot;image&quot; style=&quot;border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px&quot; border=&quot;0&quot; alt=&quot;image&quot; src=&quot;http://blog.raffaeu.com/wp-content/uploads/2016/02/image_thumb-9.png&quot; width=&quot;370&quot; height=&quot;105&quot; /&gt;](http://blog.raffaeu.com/wp-content/uploads/2016/02/image-9.png)

## Create a custom style component

Now, the best feature of Polymer is the capability of loading _components_, it is really helpful. Think about this, you have deployed an application which should be capable to load custom _themes_ based on the user logged in, so what about having a custom CSS component which will override all your UX settings? Well with Polymer 1.0 this is possible and is quite straight forward.

First of all, we need to create a custom component which we will call “raf-theme” as following:

[&lt;img title=&quot;image&quot; style=&quot;border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px&quot; border=&quot;0&quot; alt=&quot;image&quot; src=&quot;http://blog.raffaeu.com/wp-content/uploads/2016/02/image_thumb-10.png&quot; width=&quot;220&quot; height=&quot;104&quot; /&gt;](http://blog.raffaeu.com/wp-content/uploads/2016/02/image-10.png)

Then I am going to declare my DOM inside the page “raf-theme.html” as following:

&lt;pre&gt;&lt;dom-module id=&quot;raf-theme&quot;&gt;&lt;br /&gt;    &lt;template&gt;&lt;br /&gt;        &lt;style&gt;&lt;br /&gt;            :root{&lt;br /&gt;                --paper-toolbar-background: #FF6600;&lt;br /&gt;            }&lt;br /&gt;        &lt;/style&gt;&lt;br /&gt;    &lt;/template&gt;&lt;br /&gt;    &lt;script&gt;&lt;br /&gt;        Polymer({&lt;br /&gt;            is: &quot;raf-theme&quot;&lt;br /&gt;        });&lt;br /&gt;    &lt;/script&gt;&lt;br /&gt;&lt;/dom-module&gt;&lt;/pre&gt;

And now I can just use my custom theme as a normal Polymer component in the following way:

&lt;pre&gt;&lt;head&gt;&lt;br /&gt;    &lt;!-- import the style --&gt;&lt;br /&gt;    &lt;link href=&quot;bower_components/raf-theme/raf-theme.html&quot; rel=&quot;import&quot; /&gt;&lt;br /&gt;&lt;br /&gt;    &lt;!-- use it --&gt;&lt;br /&gt;    &lt;style is=&quot;custom-style&quot; include=&quot;raf-theme&quot;&gt;&lt;/style&gt;&lt;br /&gt;&lt;/head&gt;&lt;/pre&gt;

In my own opinion, the best way is to have multiple dom-element into your “theme” component, one per each part of the UX. For example inside raf-theme I have the following elements:

  * raf-toolbar-theme
  * raf-drawer-theme
  * raf-form-theme

and so on and I declare each theme only when I need it, plus everything is modularize so for me it’s easier to find a specific CSS property of a specific component and override it.
&lt;/paper-toolbar&gt;&lt;/pre&gt;</content><author><name>raffaeu</name></author><category term="css" /><category term="polymer" /><summary type="html">Polymer 1.0 comes with plenty of available components, especially if you are going to implement Material Design. The only problem is that they implement the default style which usually doesn’t fit with mine.</summary></entry></feed>