Generators are powerful tools that help in quickly scaffolding project structures. You can use them to start off a new project or add new components to an existing project. Generally these projects are collections of best practices that a developer can consume directly. In this post, we will see how to build a simple generator that will create a boilerplate for a building static pages with auto reloading feature.
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.
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.
In this quick and dirty post, we will see how you can build a static Portfolio website for yourself. We will be leveraging the power of GitHub pages and the default sub-domain that you get when you create an account with GitHub.
In this post, we are going to build an End to End Hybrid App, that has a server component and a client component. Our server will be built on top of Node js, with Restify as the server side framework and MongoDB as the data persistence layer. Our Client is a Hybrid App, built with Ionic framework. We then are going to deploy the Ionic app using PhoneGap Build service to generate a Native installer.
The App we are going to build is a Bucket List app. Here a user can register and login. Then s/he can create a few bucket list items. Which would eventually result in
These images are taken from my Android Samsung Galaxy Note I device. And the performance was okay. But there is a lot of scope for improvement. If you want to dig into the app yourself, click here.
I have deployed the REST server on Heroku, DB on MongoLab and the client is the Ionic PhoneGap Native app!
List of all the REST service endpoints can be found here (needs some cleanup).
If you want to issue a PhoneGap build before diving in, you can fork this repo and submit it here. Download the installer and test it out. Or you can download the installer directly from here.
This is a quick start tutorial using PhoneGap 3’s contact API. I have written another post here explaining what PhoneGap 3 is, how is to set it up & what are the key differences between PhoneGap 2.x & PhoneGap 3.x. I recommend checking that out before continuing.
Step 1: Create a new GitHub repo (How to? – Here).
Step 2: Clone the repo to local
Step 3: Create new PhoneGap 3 project (assuming you have completed the setup from here)
Step 4: Update the newly created app & test in local.
Step 5: Commit Changes to GitHub repo
Step 6: Run PhoneGap Build, Install the app & validate(How to? – Here)
Step 7: Make changes to our project – add jQuery Mobile Framework (Must read) & Contacts API plugin.
Step 8: Commit changes back to the repo
Step 9: Issue a PhoneGap Build & BOOOOMMM!!! Install the app & validate
So lets get started!
PS:We are going to follow Mac/Windows – Android ADT based development.
The super awesome GitHub service allows you to host as many free static websites as you want. All you need to do is host your code on GitHub repo! In this post I will be describing two methods to host your static site for free.
If are not aware of what GitHub & Git are, how to set them up, you can refer to this post. I will be using the same myNodeApp repo for this tutorial too. You can do the below steps with any GitHub repo.
In today’s collaborative world, it is very essential that one understands the need for a Concurrent Versions System (CVS). A CVS is a simple revision system, that tracks all your changes. Imagine an ecosystem where you and a few other developers are working on a web application & updating html/css & js files asynchronously/separately. When you want to integrate the bits of code, you need to sit side by side and compare notes on what all you have done. What to add, what to remove etc. A Version control system is precisely for this purpose & Git is one such program. GitHub uses git to power itself.