Using D3 or third party libraries with Polymer – simple example

Off late I have been exploring and working with Polymer a lot. One thing I tried recently was to create a custom element (a custom tag) that has a d3 chart integrated into it. So whenever I use this element in an application the chart renders.

For those who are not familiar with Polymer, let me tell you, it’s a game changer for the next generation of web applications. The web is getting componentized with the new standards that are coming along – Shadow DOM, custom elements, templating, HTML imports e.t.c. Polymer is a polyfill layer or as they call it a SUGARING layer on top of these web standards that allow you create custom web components easily. You do not need to go the the low level API’s to create a custom element. Just use the Polymer library and start creating your own components. Also it provides a heck of other features that can be used, such as two way data bindings. So go over to the Polymer site and check it out.

Coming back to our topic of discussion, one thing that can be a bit confusing to Polymer beginners is to use a third party javascript library with your polymer element. Here I have an example of using the D3 js charting library to create a custom chart component. Let’s call our custom element  my-custom-d3-chart. By the end of this discussion we will have a custom tag – <my-custom-d3-chart />. Yes a custom HTML tag. Our own tag. Yo!!!

Read More »

Cooler modal popup example – how to open multiple popups, scrolling pop ups per page

Some time back I came up with a cooler modal pop up window using CSS3 and JavaScript specifically for mobile webkit browsers. The example that I presented had only a single button, a click on it would open a modal pop up window.

In this post I have a similar example but this time multiple pop ups can be opened from the same page. Opening multiple pop up’s from a single page was requested by some of my readers. And here it is. I will not go deep into explaining the bits and parts of how to create a pop up window. You can go through my previous post for that. But first let’s check a demo (meant only for web-kit based browsers):

Demo link (open in iOS or Android’s browser, you can also test this in Chrome or Safari in your computer) :  http://rialab.jbk404.site50.net/coolermultiplemodalpopup/

Open multiple pops from a single page

How to run this in Firefox, IE and other browsers?
For this you need to make changes in the CSS file. Add CSS3 prefixes for other browsers similarly as it is there for -webkit- . CSS3 junkies would already know what I am talking about.

Authoring “Adobe Edge Inspect Starter”…

My book “Instant Adobe Edge Inspect Starter” on mobile web debugging and testing has been published and it is now available online. For more details and to purchase you can visit here.

My book on mobile web debugging and testing.

Mobile web testing is currently a really time consuming and cumbersome process as there are no direct debugging tools available with mobile web browsers. Since mobile devices vary so much it is important to ensure that your web page looks as intended across the multiple mobile devices that you are targeting for your audience. Edge Inspect is a perfect tool for web developers and designers who are developing for mobile devices, allowing them to simultaneously test on numerous devices in real time as they develop without learning anything new.

“Instant Adobe Edge Inspect Starter” is a practical, hands-on guide that provides you with a number of detailed steps, which will help you to get started on testing and previewing all your mobile web projects on multiple mobile devices. This book will also show you how to use all the other available features of Edge Inspect and make the entire testing process on mobile devices very simple, effortless, and faster.

This book starts with an introduction to Edge Inspect and will take you through a number of clear and detailed steps needed to set up a working installation, and get up and running with testing your web pages on mobile devices.

You will also learn why traditional ways of testing mobile web applications are not very helpful and how Adobe Edge Inspect overcomes it. You will have a look at connecting single and multiple mobile devices with your computer and how to browse in sync.You will learn about remotely inspecting and previewing mobile web pages on a targeted device and directly see the changes taking place on the device itself. The book discusses in detail about creating your very own simple mobile web application, running it from a local server and testing it across mobile devices. You will also take a look at how to use the Edge Inspect web inspector window and do some basic HTML, CSS, and JavaScript debugging. And then finally you will have a look at using your own local Weinre debug server with Edge Inspect and some other very important features. If you want to take advantage of Adobe Edge Inspect and make mobile web testing a lot easier, then this is the book is for you.

“Instant Adobe Edge Inspect Starter” will guide you in getting started with Edge Inspect and will make testing on mobile devices a lot simpler and faster. The book is packed with a lot of examples and diagrams that will help you to test all your mobile web projects without any hassle.

Who this book is for?
This book is for frontend web developers and designers who are developing and testing web applications targeted for mobile browsers. It’s assumed that you have a basic understanding of creating web applications using HTML, CSS, and JavaScript, as well as being familiar with running web pages from local HTTP servers. Readers are also expected to have a basic knowledge of debugging web applications using developer tools such as the Chrome web inspector. And of course you need some mobile devices for running the example in this book and testing it.

Reviews

Ben Forta (Adobe Systems Inc‘s Director of Developer Relations): http://forta.com/blog/index.cfm/2013/4/12/Instant-Adobe-Edge-Inspect-Starter

Creative and Codehttp://creativeandcode.com/review-adobe-edge-inspect-starter-ebook/


Handy eBook to have available – by Chris.M
Overall, the book does a great job of getting you up and running with Edge Inspect. The first couple of chapters focus on getting the application installed on your computer, and then getting it set up on your mobile devices. Though the installation is fairly straightforward, the instructions they provide are detailed with plenty of screenshots, so you should have no issues getting set up.
They also give an overview of the best features of Edge Inspect. I’ve been using Edge Inspect for a while now and even I learned a few new things. The application really does make mobile testing incredibly easy with remote inspection and console log.
The eBook wraps up with some great resources for using Edge Inspect. If you are thinking of working on Responsive Web Design, Adobe Edge Inspect is an invaluable tool. I think the eBook is super handy to have as a reference, and for 5 bucks, why not?

worth having it as a reference – by Siddarth Kalyankar
“Instant Adobe Edge Inspect Starter” indeed is a starter for developers who wish to explore the possibilites of using Adobe Edge Inspector tool during their day to day development activity. It talks about Step-by-step, hands-on recipes to debug, test, and preview web applications on multiple mobile devices with Adobe Edge Inspect (Previously known as “Adobe Shadow” ).
This book assumes that the person who reads this is already into mobile web development and address some of his/her problems which are faced during the development cycle. This book is not intended to help you start doing mobile web development, but if you are web developer and willing to do mobile web development, this could come in handy for you as well.
The books briefs you about what is Adobe Edge Inspect, What are the reasons to use it and What you can do with with it. The main focus is on installation of the required components on your computer, the Edge inspect client on mobile device , how to pair mobile device with your computer and how to debug and preview. I found this information quiet useful as the entire installation process has been very well illustrated with screen shots focusing on Mac/ Windows operating systems, and Android/IOS for mobile device. The author has also provided with the code which can be used by first time developers to get started on their mobile web development venture.
If you are looking at speeding up your mobile web development, Adobe Edge Inspect is the tool and this book is worth having it as a reference.

More reviews from – Amazon

Previewing JSBin output in mobile devices using Adobe Edge Inspect

When Adobe renamed Shadow to Edge Inspect, one of the major changes that happened was the integration of JSBin into Edge Inspect. What this means is that whatever proof of concepts (also called Bins as per JSBin terminology) you have created with JSBin, you can remotely preview it directly in your mobile devices without any additional set up required.

If you haven’t tried JSBin yet, then let me introduce it to you. JSBin is a free online tool with which you can create HTML based small POC’s, test examples or I should say small mockup kind of applications. You can edit the HTML, CSS, Javascript and see the changes real time in your browser itself. JSBin is kind of a development environment wherein it has the HTML, CSS and JS editors where you write code for your example app. It also has the console panel for viewing javascript console logs and the the Output panel for previewing the result of your code. All these panels are integrated into one place and as you make changes to your code you can see the result in real time. Very handy. I found it useful for my mobile web apps. But then it is a tool which is on the small scale development side. So it doesn’t have all the fancy features of a typical IDE. Once you create your POC’s or Bins you can even share them. So in case JSBin sounds interesting to you, go ahead and start using it. Create your account at http://jsbin.com/ and start making some apps. The interface looks like the image shown below, (all the help can be found online at jsbin.com)
Click to see larger image
Read More »

Use your own Weinre server with Adobe Shadow – Step by step

Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the wait time when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. So let’s see how to do it.

First of all you will need to have the Weinre server set up in your computer. For that you will need the weinre jar file and Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of my earlier post. So please have a look at it and set up the server. You can check out the “Configuring and running the Weinre debug server” section in the postAssuming that you have the server set it up on your computer, then you need to start it. You can check my previous post for that too. Its all there.

Then you can verify if the server has started. Open your browser and navigate to http://<yourip&gt;:port where <yourip> is your machine’s ip address and port is the port number where the Weinre debug server listens to. You can find out the port and the details from the command prompt after you have run the server. The screenshot below shows my instance,


Read More »

Cooler modal Popup window with fade effect – gradient colors, border, drop shadow and center position

In one of my earlier post I talked on creating a cool modal pop up window using CSS3 and JavaScript. It had fade effect upon opening and closing of the pop up. Based on the same lines, I have created a much cooler pop up, actually asked by one of my readers. It now has gradient colors, much more eye catching – vibrant color 🙂, it has a header, a content area, border, drop shadow and it is also now centrally positioned always, even if you go from portrait to landscape mode and vice-versa.

Look at the demo first, you can view in both mobile web-kit browsers (iOS ,Android) and desktop browsers (Chrome, Safari):

http://rialab.jbk404.site50.net/coolermodalpopup/

The concept remains the same. I have discussed it in details in my previous post. Just refer that in case it is not clear. In this post, I will just talk briefly on the changes that I have implemented.

HTML changes
No major changes. I just externalized the CSS and JavaScript. So they are now in external files, which I reference in the index.html file. The HTML code is very simple and self explanatory. Download the code and check it out. A download link is provided below.

JavaScript changes
I have made some changes in the architecture of the popup creation. The showPopUpMessage() function now takes a header, main content, width and height parameters.

//show the modal overlay and popup window
function showPopUpMessage(modalWindowHeader,modalWindowContent,width,height) {
     //code goes here
}

Since this new pop up has a header, so I have kept a separate method for the header. You can call a function to create the header content and then set it in the showPopUpMessage() function. This will help if you have multiple instances of pop up to create. Here is the function,

/* Common header for Pop Ups */
function createPopUpHeader(title)
{
  //return the header after creating
  //create header for modal window area
  modalWindowHeader = document.createElement("div");
  modalWindowHeader.className = "modalWindowHeader";
  modalWindowHeader.innerHTML = "<p>" + title + "</p>";

  return modalWindowHeader;
}

Similarly, I have kept a separate function to create the contents of the modal pop up. You can customize the method and change the contents. Again, this will help in creating more than one pop up window. Here is how I have done it for this example,

function createPopUpContent(msg)
{
  //return the content after creating
  //create modal window content area
  modalWindowContent = document.createElement("div");
  modalWindowContent.className = "modalWindowContent";

  modalWindowContent.innerHTML = "<p style='text-align:center; margin-top:10px;'>" + msg + "</p>";
  //create the place order button
  okBtn = document.createElement("div");
  okBtn.className = "redBtn okBtn";
  okBtn.innerHTML = "<p>OK</p>";
  okBtn.addEventListener(endEvent,function(){ hidePopUpMessage(); },false);

  modalWindowContent.appendChild(okBtn);
  return modalWindowContent;
}

And now once I have the header and the content I can call the showPopUpMessage() function to launch the pop up,

showPopUpMessage(createPopUpHeader("This is a cool popup"),createPopUpContent("I am a cool modal pop up. I have gradient colors, border colors, drop shadow and I am always positioned at the center!!"),250,300);

I have passed a width of 250 and a height of 300. You can change it as per your requirement.

Positioning the modal pop up always at the center

This is done by calculating the window width and height and then subtracting it by the popup width and height and then dividing by 2. This is how I did it,

modalWindowElement.style.left = (window.innerWidth - width) / 2 + "px";
modalWindowElement.style.top = (window.innerHeight - height) / 2 + "px";

Now, to keep the window always at the center, even when you resize the browser window or move from portrait to landscape and then back to portrait, I have registered a window resize event listener and then calculate the left and top position again as we did above. You can find this is inside the handleResize() function.

//when window is resized
window.addEventListener("resize",handleResize,false); //resizing is useful only when popups are opened

And finally one more change. In this example, if you see at the top of the javascript file, I have detected if the device browser is touch enabled. And then accordingly I register touch based events for touch devices and mouse events for desktop devices. So this is a common code and you do not have to hardcode anything. I have a separate post for this, you can go through it.

Style changes
Only new class selectors have been added for the modal window header, modal window content, gradient buttons. Rest of them is pretty simple and understandable.

So this is it. This is a much cooler pop up, better looking than my previous boring and dull pop up. Hope you have enjoyed it. Check out the demo or download the code.

Download
Download the source code here.

Updates
1) How to open multiple pop ups from one page – Check this post.