npm install error – ECONNRESET – IONIC INSTALL – npm install -g ionic fails with ECONNRESET


Here is the solution to ECONNRESET issues while working with npm

  • npm install -g ionic fails with ECONNRESET
  • npm ERR! network read ECONNRESET

It is a quite common error which occurs while installing modules using npm e.g. ionic

npm ERR! network read ECONNRESET
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" 
"C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" 
"install" "-g" "cordova" "ionic"
npm ERR! node v4.2.2
npm ERR! npm v2.14.7
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! syscall read

 

What is the solution?

This can be resolved by updating npm registry protocol from https:// to http://

How?

$ npm config get registry
    https://registry.npmjs.org/
$ npm config set registry http://registry.npmjs.org/
$ npm config get registry
    http://registry.npmjs.org/

 

 

 

ZAjax – a Javascript library to send Ajax request – GET/POST – JOSN


Hello Developers,

I have written a library which helps to send and process AJAX requests with JSON data. Right now it accepts HTTP GET and HTTP POST Json requests. You can download from below repository

https://github.com/swagatblog/zAjax

You also can extend this to your requirement like POST stream, GET custom object etc.

Sample code to use this:

****************************************************************

 var url=’http://yourapiurl.com/getinfi’;

var requestType=’GET’;

var data={id:1120}; //JSON data

var successCallback= function(response){

//implement your code

};

var failureCallback= function(response){

//implement your code

};

var contentType = ‘application/json’;

ZScript.Ajax.send-request(url, requestType, contentType, data, successCallback, failureCallback);

This is a very simple to use library and sample shows how to send a GET request .

Best Regards

Swagat

Basic sample HTML 5 drawing app using FabricJS


I have been working on so many canvas libraries which enables us to build robust drawing app with unconditional customization to the library.

Found FabricJS as the best library till now, which supports multiple touch based devices and obviously most of the HTML 5 supported browsers.

You can find a sample application in below repository and can download also

https://github.com/swagatblog/FabricJS_Drawing/

This application would give an idea about building a simple and powerful drawing app using HTML 5 canvas. Few of the components have been used in this app

1) Drawing a rectangle

2) Drawing a circle

3) Drawing an image

4) Enable and disable drawing

5) Enable and disable pan

6) Zoom in

7) Zoom oou

8) Reset zoom

Ref: Official sites for fabricjs

1) http://fabricjs.com/

2) http://fabricjs.com/events/

3) http://fabricjs.com/demos/

 

Send me a note if you need any info/help on this library.

 

Best Regards

Swagat

Color Picker Tool in Visual Studio IDE


Hello Developers,

I just thought of sharing a nice ‘n’ cool feature of Visual Studio IDE, i.e. Color Picker tool. In day to day life developer needs several color codes to give a nice look to their pages or sites. And they struggle to get it and at last they download some external tools to do this job for them.

But its something we can do within the VS IDE itself, which is cool n hidden(not known to maximum) developers, as its a bit of trick to enable the color picker. One you do it, you would love this. Let me explain the steps for the same.

STEP 1:

Right click on your any of the CSS class and choose “Build Style” option as below

STEP 2:

Choose “Color” option either from font tab or background tab

STEP 3:

Click on “Select

STEP 4:

Hit Alt + Tab to come out of Visual Studio IDE and go to the doc/any pic/ desktop/any where to pick you color. Then hit again Alt + Tab to get the above window.

STEP 5:

Click on “Select” and take the picker to your selection. Now you should be able to get the color code.

 

Try yourself and enjoy !!!!!

With Personal Regarrds

Swagat

 

 

Image Optimization technique to increase your Web Site performance!!!


Hello Web Developers,

This might be a very interesting topic to debate with. For all web developers Web Site performance is only one area, where we get struck by looking into different aspect to deal with. Some of are like Code Refactoring, DB Transactions, Server Performance etc.

But, I should say the major performance gaining area would be the amount of content we display. The less we display, the better is the performance…Is not it???

Generally, there are two kinds of content we display

1) Internal Resources

2) External Resources

Internal Resources are like the text we display on a Web Page. And the external resources, which are getting called from out of the Web Page, like Images, CSS, JS files.

So, most of the Web Sites have their 90% of content as External Resources. These resources cannot be ignored. How about we decrease 90%  to 10-15% or even 1% with considering all resources?

Sounds cool!!!  Now think about, how would it affect your performance????

In this article, I’ll concentrate upon one resource optimization i;e Image Optimization.

Image plays the major part to give richness to the Web Sites. We can not ignore this either. However we can optimize the images. For this we can use different Image Optimization techniques like CSS Sprite, Inline Base-64 Encoding Image Optimization.

We already have a ready to go framework in-hand to implement with, developed by Microsoft.NET. Its ASP.NET Sprite Image Optimization Framework.

The objective of this image optimization technique is to minimize the HTTP request for the HTML page to load. So, ultimately this framework gives us the way to reduce the external resources (images).

Microsoft.NET has built this framework using below technologies

1)      Sprite Image Optimization

2)      Inline Base-64 Encoding Image Optimization

This framework is built in order to automate some of the process, which normally consumes development time and providing the optimized image (sprite or inline) based upon browser detection.  CSS Image Sprite is the core concept to achieve through this framework. This can also be achieved without using this Framework. How? : Using only CSS. Below link can give you the basic idea upon CSS Image Sprite. But in this case we need to do manually, which is automated in this framework as below

  • Generating Sprite Image
  • Positioning

CSS Image Sprite: http://www.w3schools.com/css/css_image_sprites.asp

Here I’ll give a brief note on both the techniques..For more details you always can refer the links mentioned at the end of this article.

Sprite Image Optimization:

This approach will reduce the number of requests to the server. And oppose the traditional way of requesting server each time the external resources (Image) loads.

So, the performance of the web application would definitely be better than the traditional approach.

You can find the difference between Sprite and traditional way of loading images in the below examples. In-case of SPRITE, there are only 2 HTTP GET Requests which can be easily compared with the screen with multiple images loading with multiple GET Requests.

Some of the advantages are like

  1. Image is loaded without any quality loss. Image compression level can be configured with the help of optimization settings.
  2. Multi browser support.
  3. Better performance for low-end Mobile Browsers.
  4. Rich User Interface can be achieved, as the images always add richness to the application.
  5. Sprite framework automatically generates the CSS and markups for displaying the image and can determine which of the two approaches to use based on the user’s browser.

Primary Challenges

  1. While combining the various images into a single sprite isn’t rocket science, it can be a challenging and time-consuming task for a developer who lacks the image editing tools or experience to create a sprite, and
  2. Correctly displaying a particular image in the sprite requires knowing the image’s dimensions and offset within the sprite, as well as knowing the appropriate CSS rules to display just that portion of the sprite.

Inline Base64 Encoding Image Optimization

This technique allows us to embed the image into the Web Page, so that there will not be any external resource and web page will treat Images as internal elements. Using this we can reduce the number of HTTP requests to null.

But this technique is not much reliable to the lower version of browsers. This works for latest WebKit and Mozilla. So, in case of Mobile application, it would be the biggest limitation as maximum devices would not have these browsers support. And images are ignored by web crawlers.

For more detail with example you can refer to the below links:

1) http://www.4guysfromrolla.com/articles/101310-1.aspx 

2) http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx#s5-displaying-images-using-css-sprites

Cheers!!!!

Swagat

Caching On BlackBerry Browsers


Hello Mobile Web Developers,

As we all know BB mobile devices are one of the most popular and widely used by Mobile Users all over the world. So, this is obvious for any mobile web developer to build the Application to run on BB browsers. While testing on BB devices or emulators you’ll see mostly rendering issues. But I am not going to explain about those issues. Here I’ll share something “Good to Know” concept very specific to BB browsers caching.

BlackBerry browser has built in caching mechanism. In general caching mechanism is used to increase the UI experience and reduce reloading the content again and again. So, for this reason BB has done a good thing by introducing this default caching.

But think about the dynamic content on your application and needs to load based upon user selections or inputs. In these cases the caching will cause issue by not refreshing on page refresh. No matter what, the page will get the old data on each refresh. This is not GOOD!!!!! Right…

So, what’s the solution to this????

We need to tell the browser that the particular page in not asking for caching…Means we need to modify the particular page request header with no-caching elements.

This can be done by adding the <META> tag or through code-behind also.

**************************************************************************************************

<meta http-equiv=”CACHE-CONTROL” content=”NO-CACHE” />

<meta http-equiv=”EXPIRES” content=”0″ />

**************************************************************************************************

 

But this could not be the solution for all BB models. So its better to include the below lines of code into your MasterPage or BasePage, if you want it for entire site. Else do it for particular pages.

 

**************************************************************************************************

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);

 HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);    

HttpContext.Current.Response.Cache.SetNoStore();   

Response.Cache.SetExpires(DateTime.Now.AddSeconds(0));

**************************************************************************************************

 

Cheers!!!!!

Swagat

 

JQuery Mobile (jQuery Mobile 1.0 Beta 3 Released!)


Hello Mobile Web Developers,

After reading lots of article, posts and trying out few samples in JQuery Mobile, I found it would be a great technology and idea to share with.

JQuery Mobile is a new generation scripting language framework specifically built for Smart Phone devices. This framework aims at building dynamic touch based User Interface, which can very much compete with the Smart Phone Apps.

JQuery Mobile framework has considered the below points to deal with

  • Seriously cross-platform & cross-device
  • Touch-optimized layouts & UI widgets
  • Theamable designs: Bigger and better

You must be worried about the device support….No worries !! Just CLICK HERE and see the list of device support this Framework.

Here I would like to share few cool posts/articles about JQuery fundamentals and design guides…Let go through the below links and try out some cool stuffs on your own..

1) http://jquerymobile.com/

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design

2) http://www.ibm.com/developerworks/web/library/wa-jqmobile/index.html

jQuery Mobile is a touch-friendly web UI development framework that lets you develop mobile web applications that work across smartphones and tablets.  The jQuery Mobile framework builds on top of jQuery core and provides a number of facilities, including HTML and XML document object model (DOM) traversing and manipulation, handling events, performing server communication using Ajax, as well as animation and image effects for web pages. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.

Cheers!!!!!!!!!

Swagat