Building and Publishing your Web Component in 9 Steps

Building and Publishing your Web Component in 9 Steps

This is a quick tutorial on how to build your Web Component, push it to GitHub with a demo and finally publish it to bower (optional). We will be building an upper-case tag, which will make the text-content inside it appear in upper case.

So let us get started.

If you are new to Web Components, refer Web Components – The Future Web and Web Components, PhoneGap Build and WordPress – A Hybrid App for your Blog.

Step 1 : Create a new folder where you would like to store all your Web Components. Let us call it myWebComponents and open terminal/prompt here.

Step 2 : Install the required dependencies globally. Run

Windows Mac/*nix
npm i -g bower yo generator-polymer    sudo npm i -g bower yo generator-polymer

Continue reading

Web Components, PhoneGap Build and WordPress – A Hybrid App for your Blog

Web Components, PhoneGap Build and WordPress

What started of as a “small experiment” ended up with me sleepless for 2 days straight.

It all started with this video

Pretty pumped up, I started off exploring the New Polymer. I used Polymer a couple of months ago and wrote a tutorial on Web Components and Polymer . Now, a lot has changed. So, super excited about the new way of developing Web Components, I quickly whipped out 3 new components (<upper-case><lower-case> and <capital-case>). Pretty basic, but gave me a decent hands on.

Then I started digging into their tutorial (a must read) and loved the way how components go hand in hand in building an actual application, yet the smaller pieces remain reusable. This got me thinking to make a Hybrid app for my blog using Web Components, PhoneGap and WordPress and this post is the on-going journey.

As of today I was not able to get the Hybrid app working on most of the devices. I was able to get it working only on an iOS emulator (did not test on iPhone/iPad device) and Android 4.4.2 (Android emulator).  but I have raised this issue with the Polymer folks.

The final app will look like

Screen Shot 2014-06-28 at 1.55.17 pm

You can take a digg at the demo here.

You can find the complete code here, the Installer source repo here and the PhoneGap installer here.

Note : I will be updating this post from time to time as things progress.

Contents

Continue reading

Web Components – The Future Web

Web Components & Polymers – The Fabric of Future

This blog post is about Web Components. What they are, why do we need them and how to go about creating a few of our own. We will also look at the browser support, make sure our Web Components work everywhere with the help of polyfills like Polymer. And finally, we will be using Yeoman to scaffold a Polymer project and using Yeoman sub-generators to scaffold new Web Components.

So, let’s get rolling.

Contents

The Examples in this tutorial can be found at GitHub. Continue reading