Tips to effectively use Google chrome developer tool

While building Lightning Components in Salesforce, how to effectively use Google chrome developer tools to troubleshoot and analyze issue

Web based applications are dominating the software industry and various frameworks like Angular 2, React, polymer and Lightning are on rise. From movie Spider man, this dialogue stands very true – With great power comes great responsibility.

As a web developer, its our job to make sure the application implemented by us, stands on performance benchmark and at the same time development time is reduced. To achieve this, fast and effective troubleshooting of web application becomes integral part of project development. One of the best tool to troubleshoot web applications are available freely – Google chrome developer tools.

In this blog post, we will uncover lots of tips and tricks about using chrome developer tools.

To launch, chrome developer tools in chrome, use shortcut ctrl+shift+I or ctrl+shift+J. We can directly execute Javascript in chrome dev tools without creating any html or javascript file.

Console API

we will start with console API of chrome developer tool first.

Printing Debug statements in Javascript

we can use various methods of console in javascript to debug our code. Previously, if we wanted to debug JavaScript, alert methods were mostly used however they were very annoying. Below code snippet shows available methods to print debug statements in chrome console.

<script> 
	console.error('Google chrome dev tools - error');
	console.warn('Google chrome dev tools - warn'); 
	console.info('Google chrome dev tools - info'); 
	console.debug('Google chrome dev tools - debug'); 
	console.log('Google chrome dev tools - log');  
</script>

Below is output, how its displayed in chrome

Console.log levels
Console.log levels

As shown in above image, different log levels of console method printed in different color. error log level even prints complete stack trace of methods showing origin of error.

Continue reading “Tips to effectively use Google chrome developer tool”

Change Style of Console.log debug statements in JavaScript

Applying css style to console.log statements in JavaScript

Most of web developers or Salesforce Lightning Component developers are working on JavaScript. If they run into any issue and in need of debugging mechanism then Console.log is always there to rescue. Imagine your application has many debug statements and some of them are very important for problem solving, wouldn’t it be nice, if those statements can stand out from others ?

Recently, I noticed something amazing in Facebook console when I pressed “Ctrl+Shift+J” (Developer tools) as shown in below image.

Changed Style of Console.log in Facebook
Changed Style of Console.log in Facebook

Continue reading “Change Style of Console.log debug statements in JavaScript”

Addthis plugin for wordpress – serving request to b.scorecardresearch.com

Recently my website was slow and I tried to search for possible causes.

While checking network traffic in google chrome, I found that my website was making request to “b.scorecardresearch.com” and reputation is not good at all for this site. I did my research on wordpress forums and found that “addthis” plugin was making requests to this site and there is no way to restrict it.

I am writing this post, so that readers would know that one of WordPress plugins that makes request to “b.scorecardresearch.com” is addthis. I have decided to remove this plugin from my blog as I don’t want my visitors information to be traced and slow website.

Getting started with React

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , , , with Leave a comment on Getting started with React

React is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by “JavaScript syntax extension (JSX)“. React focuses on component based development where each components has its own life cycle. Once of exciting behavior of React is its unidirectional data flow from Parent to child components. React is different than AngularJs in such a way that React passes data in unidirectional however in angularJs data must be available to $scope variable (bidirectional binding). Reusable components in AngularJs should be created as Angular directive however in React every component can be reused.

React Javascript library by Facebook
React Javascript library by Facebook

In this article, I will show very simple Hello world program using React framework.

<html>
	<head>
		<script src="http://fb.me/react-0.13.1.min.js"></script>
		<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
	</head>
	<body>
		<div id="main"></div>
		<script type="text/jsx">
			var HelloWorld = React.createClass({
				render : function(){
					return (
						<h1> Hello World</h1>
						);
				}
			});

			React.render(<HelloWorld/> , document.getElementById('main'));
		</script>
	</body>
</html>

Output : Hello World in h1 tag. Continue reading “Getting started with React”

Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based

HTML5 Drag And Drop File
HTML5 based Drag And Drop File

You may find many ways to upload attachments in Salesforce using visualforce however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought to create one simple Visualforce component which can show progress bar and have drag and drop capabilities.

Initially i gave though to use visualforce remoting however challenge was how to show progress bar and same challenge was with custom controller or extension also. So, i decided to create one simple Apex REST API to upload attachment.

Continue reading “Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based”

Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file

In this article we will see how to use Camera and Audio recorder of mobile device in Visualforce and upload as chatter file. It may look that it is very tricky to access device camera and audio control in Visualforce however you may be right if there were no HTML5. Thanks to HTML5 for magic.

Visualforce Camera Access - Front Page
Visualforce Camera Access – Front Page
Visualforce Camera Access - Use Camera Prompt
Visualforce Camera Access – Use Camera Prompt

Continue reading “Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file”

Why to use Bower for your web developement

Author posted by Jitendra on Posted on under category Categories Node.js, Web Technology and tagged as Tags , , with 2 Comments on Why to use Bower for your web developement

What is Bower
It is client side package Manager and Great tool to manage all you web dependencies like JavaScript libraries and other assets.

Bower
Bower

What can be done from Bower
Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

# registered package
$ bower install jquery

# GitHub shorthand – download repository SOQLBuilder from user Jitendra on Git
$ bower install JitendraZaa/SOQLBuilder

# Git endpoint
$ bower install git://github.com/user/package.git

# URL
$ bower install http://somewebsiteURL.com/script.js

Continue reading “Why to use Bower for your web developement”

How to use PostgreSQL in Nodejs

Author posted by Jitendra on Posted on under category Categories Node.js, Web Technology and tagged as Tags , , , , , with 8 Comments on How to use PostgreSQL in Nodejs

I have written many articles on Node.js and AngularJs. In this article, I will demonstrate how to use PostgreSQL with Node.js and deploy on Heroku. I think you already smelled that this is one of starting article which will finally merged with Salesforce to create some cool application.

Assuming you already have some background knowledge on Node.js and Heroku, If not please visit previous articles of this blog or my Slideshare account. Using Angularjs is totally optional and you can use library like JQuery or plain JavaScript.

To connect PostgreSQL, we need “pg” module.

PostgreSQL in Node.js
PostgreSQL in Node.js

Continue reading “How to use PostgreSQL in Nodejs”

Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button

In this post, we will be creating a Salesforce Query (SOQL) Builder. It uses Google’s Angularjs MVC Javascript library and REST API provided by Salesforce. For Authentication, it uses OAuth2.

Node.js is used as a primary language and hosted on Heroku. If you want to directly deploy to your Heroku Account, You can use Heroku Button on this Git Repository.

We have many tools available online for Query builder, However none of them were satisfying me so though to create my own tool.

This Node.js application is used for building SOQL with following features :

  • Toggle between API name and Label Name
  • Search Objects or Fileds needs to build SOQL (In my case, it was primitive. I had more than 70 Objects and many of those objects has 300+ fields)
  • Checkboxes to select fields (No need to hold control button to select multiple fields)
  • Automatic Query Builder at Right side of page
  • Shows API count used by application
  • Search returned records
  • Sorting on Table Headers
  • Pagination

Note : You will need to create “Connected App” in Salesforce to allow OAuth as explained in this post.

Live Demo of application

Continue reading “Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button”

Pagination, Searching and Sorting of Data Table using AngularJS

We have already discussed “Basics of AngularJS” and “Simple Searching and Sorting“. In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard “OrderBy” filter provided by AngularJs framework, this time we have to create Javascript function inside Controller for Sorting purpose.

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

This post used “Custom Service”, so please read this article to understand Dependency Injection in AngularJs.

Searching Sorting and Pagination in Table using AngularJS
Searching Sorting and Pagination in Table using AngularJS

Continue reading “Pagination, Searching and Sorting of Data Table using AngularJS”