Google+

Tuesday, December 16, 2014

Powerful open-source Web Editor optimized for AngularJS and Web Design

In this article we describe Step by Step How to install Brackets , a Powerful open-source Web Editor optimized for AngularJS and Web Design.  
Brackets is a FREE code editor written completely in Javascript, CSS3 and HTML5, and comes with very useful features like Quick Edit (meaning that you can change CSS & JS code instantly from  the HTML file, no need to switch between different files) , and Live Preview : you can run your AngularJS App on the browser immediately from the code editor.
Brackets  looks like this:
Powerful open-source Web Editor optimized for AngularJS and Web Design



Powerful open-source Web Editor optimized for AngularJS and Web Design




To proceed to the installation, browse to Brackets and download the free editor:
Powerful open-source Web Editor optimized for AngularJS and Web Design 1

Download the latest version to your machine:

Powerful open-source Web Editor optimized for AngularJS and Web Design 2

Powerful open-source Web Editor optimized for AngularJS and Web Design 3


Powerful open-source Web Editor optimized for AngularJS and Web Design 5

After the setup, open the Brackets web editor :

Powerful open-source Web Editor optimized for AngularJS and Web Design 6

Relaunch Chrome and take a look to the AngularJS enhancements of this Web Designer, clicking the "Extensions Manager" button to the top right side :

Powerful open-source Web Editor optimized for AngularJS and Web Design 7

Proceed to install the "AngularJS for Brackets" and "Angular JS Snippets".
A very comfortable feature of this AngularJS Designer is the "Live Preview" , which allows us to immediately run the HTML5 and update it as you type code without hitting "save", switching to the browser, and then refreshing it to finally see the result:

Powerful open-source Web Editor optimized for AngularJS and Web Design 8

Another very powerful and useful feature is the "Quick Edit", which allows us to edit the CSS and javascript source files without switching files: just place your cursor on some HTML tag with CSS definitions, and right click to "Quick Edit" (Ctrl + E) :

Powerful open-source Web Editor optimized for AngularJS and Web Design 9

You can now see the source file (main.css) and proceed to edit the source code, without leaving the HTML file:

Powerful open-source Web Editor optimized for AngularJS and Web Design 10

After you finish, press "ESC" or click the "X" to close the dialog.
There is also a powerful "Search" functionality:

Powerful open-source Web Editor optimized for AngularJS and Web Design 11

Another useful thing is the displaying of the color or gradient as you hover over some HEX or RGB values:

Powerful open-source Web Editor optimized for AngularJS and Web Design 12

You can also open the Developer Tools from Brackets:

Powerful open-source Web Editor optimized for AngularJS and Web Design 13


Powerful open-source Web Editor optimized for AngularJS and Web Design 14

Enjoy your modern and powerful AngularJS code editor:

Powerful open-source Web Editor optimized for AngularJS and Web Design 15




In this article we learned Step by Step How to install an optimized AngularJS code editor. 
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן

Monday, November 24, 2014

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled'


In this article we see How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled', at the Server Side of our SPA application :
How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled'




 How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled'


The serialization error that we're taking care of here, is originated when a Data Model contains an object with a self-reference property , that means, it references an entity of the same type of the containing class, or the more usual case, when we have relationships between several objects, which are referenced by others in such a way that is created a circular reference.
For example, let's say that on our SPA's server side , we have the following data Model , in which a "Blog" has a reference to its "Blogger" , and this later owns in turn many "Blogs":

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 1

That means, if you open some Blog , and open its Blogger property, you will then see the Blogs that the Blogger owns, and , between them , the original Blog that you opened earlier, and that is a circular reference.
This can happen for instance, when you have a WCF service or a Web API which use eager loading:


How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 2

The corresponding MSDN article addressing this "contains cycles and cannot be serialized if reference tracking is disabled" error  takes on account only the former study case, in which an entity references itself: let's say, a "Person"  contains a property referencing some other "Person":

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 3

MSDN states that the solution is to append to the serialization DataContract Attribute the "IsReference" boolean value set to "true". But in most cases, you're prone to find the second XML-JSON serialization case, in which many objects are related by ONE-TO-MANY relationships between them, as the following:

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 4

To solve this problem,  make a list of the classes that are REFERENCED by other classes,  the entities which are at the " 0 .. 1 " side of the one-to-many relationships. In our example, there are just two classes that behave like that: the Blogger entity  and the Blog one, sonce the "Comment" class is not referenced anywhere.
Therefore, go to the classes files and append to the DataContract attribute the "IsReference" set to true, as follows:

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 5

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 6

Then the reference tracking will got enabled and the cycles will be fixed.
In addition, if you like, it's useful to define "Metadata classes" and set the Attributes there: something  like this:
How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 7



After re-running the SPA's Server Side REST service, the WCF or WebAPI will render the data avoiding cycles :

How to fix the Server Side Web API Error 'contains cycles and cannot be serialized if reference tracking is disabled' 8


The snapshot shows that a "Blog" containing a "Blogger" property,  has a self reference and tries to reference itself, but it will be use instead the reference " z:Id=i1 " , avoiding a cycle. 
The same thing occurs for the "Comments" object, while trying to reference the containing "Blog".

Hoping it will help you...


By Carmel Shvartzman

עריכה: כרמל שוורצמן

Sunday, November 23, 2014

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4

In this article we describe Step by Step How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4.  We'll use Visual Studio 2012 templates and scaffolding in order to create a fully functional SPA web application in just 10 minutes. Later, you could adapt this SPA application to your necessities. The server side will be a Web API using REST , while the client side will be a SPA app . Our SPA web page will look like this:

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4


From time now, everything has been moving undoubtedly from desktop applications to the Web World Apps. However, nowadays web applications are facing several problems like bad user experience due to web page re-rendering, poor performance because of page reloads and constant re-transmission of data on user interactions, and lack of offline support (meaning that no server connection implies no client alive).

Single-page applications (SPA), or single-page interfaces (SPI), are web applications built on a single one web page, with the intention of provide the user with a desktop application experience, replicating a desktop environment in the web browser. That means that all SPA code is rendered in a single web page load, and can be run on different devices like smartphones, tablets and of course desktops.  SPAs are written in JavaScript , do not require page reloading, and use specialized frameworks like AngularJS, Knockout and more.

Some examples of SPAs are Google Maps, Gmail,  iCloud, GitHub, Google Drive, Hotmail, and Soundcloud . The term "SPA" was first used by Steve Yen in 2005, but the first known experiments on SPA Apps are the 2002 Stuart Morris self-contained website at  slashdotslash   (works only on IE6)  ,  and the US patent by Lucas Birdeau, Kevin Hakman, Michael Peachey and Evan Yeh , describing a single page application implementation. 

SPA apps have therefore several important features like:

1) SPA apps respond like native applications : with minimal response time gained by moving data and processing from the server to the client, and moving business logic to the client : this way, only data validation and permanent storage are located on server side.

2) SPA's bandwidth is minimal : communication with the server Ajax's done , usually in very small JSON  requests. 

3) SPA render like desktop applications :  essentially without server round-trips to retrieve HTML.

4) SPAs are accessible applications : users can use SPAs from smartphones, tablets, laptops etc.

5) SPAs can keep working offline : a SPA can go offline if the server connection falls, and  synchronize the local data with the server afterwards. 

6) No need to download updates : all users need to do is to reload the browser to load the latest version.

7) Navigation between "different" pages is smooth : no page reloading is necessary, since new pages are generated on the fly, without calling the server.

8) SPAs are cross-platform: a SPA works on any operating system . 


Asp.Net  MVC4 comes with the Knockout.js framework, built upon the MVVM two-way data binding software pattern,  which goal is to isolate the UI from the business logic, making the data flow between a ViewModel and Binder in the middle, to synchronize data between the changes made on the View and the Model layer. The ViewModel code replaces the Controller, and makes automatically that synchronization, without knowing neither which View is being exposed, nor where is the data coming from.  

Schematically, MVVM can be put this way:
View: holds the user interface UI with declarative bindings

ViewModel: is a representation of the data, more a Model than a View, holds unsaved data,  and handles the application/presentation logic : as for MSDN, the ViewModel 
"decouples the View from the Model, and consolidates the business logic into the ViewModel and the Model where it can be tested"(MSDN)
The difference between presentation and business logic is, Business logic manages data, while presentation logic manages users behavior. 

Model: data validation business logic:

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 1

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 2





Build Single Page Applications (SPA) for mobile and tablets using MVC 4


First, open Visual Studio 2012 and create a new Asp.Net MVC 4 Web Application project :

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 3


Next, choose the "Single Page Application" option :

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 4



After creation, take a look at the new folders & files added to the project:

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 5



As you can see, several important files have been added: a CSS stylesheet , 2 Controllers, some .js script files, and most important, the Knockout.js framework.
As for the data Model, the files added are C# classes representing the entities that we'll be using:

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 6



The "ToDo" entity has only two properties , besides the ID index : "Title" and "IsDone" :

How to Build Single Page Applications (SPA) for mobile and tablets using MVC 4 7




It also has a foreign key which represents the Many-To-One relationship between a "Todo" object and the "TodoList" to which the object belongs. That means, every Todo object can belong to one and only one TodoList, and every TodoList can have one or many Todo objects in it.







Sunday, November 9, 2014

How to Update and Notify the Search Engines about new Content on your blog using Pingomatic

In this article we describe Step by Step How to Update and Notify the Search Engines about new Content on your blog, by using Ping-o-matic , a FREE online tool
Here we see how to inform to the Search Engines like Google, My Yahoo, Weblogs.com, Collecta, SkyGrid, Topics Exchange or NewsGator,  that your Blog or Web Site has been updated.
The online WordPress Foundation FREE project called Ping-o-matic, allows you to avoid the frequent situation in which your new Blog content is ignored by search engines for a long time.
In order to solve that problem, Ping-o-matic just sends pings to more than 20 Search Engines , calling them to re-index your Blog or Web Site again, since new content has been added.

With the simple click of a button, all the relevant Search Engines will be notified of your Web Site updates :

Update and Notify the Search Engines about new Content on your blog



Update and Notify the Search Engines about new Content on your blog using Pingomatic


First, browse to Pingomatic.com , to find the following graphic user interface :








Then , type a name to represent your Web Site or Blog, and enter the URL of the Web Page or the Blog Post where you added new content:



You can also add an RSS URL if you wish, but that's optional.

Then select several Search Engines to notify, checking all the "Services to Ping" that you want.

If you don't know which web services are relevant for you, just click on "Check All":




Notify the Search Engines about new Content on your blog


Finally, click on the "Send Pings" button :




Then check whether all Search Engines have been notified of the changes:




The next time you browse to Ping-o-matic, the fields will be filled automatically for you. Just change the URL of the updated post, and that's all.


In this article we learned Step by Step How to Update and Notify the Search Engines about new Content on your blog, by using Ping-o-matic
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן



Sunday, October 5, 2014

How to edit a file on a deployed AngularJS web site FREE hosted at 000webhost, without using any FTP software


In this post we will see step by step how to edit a file on a deployed AngularJS web site FREE hosted at  000webhostwithout the using of any FTP software.  In the case that your web site is not very big, you could manage it with no FTP software besides the one that  000webhost puts at your disposition for free . In this article we'll learn how to edit a file in order to fix a bug on your web site using free software.
This post is the continuation of the previous one about how to deploy your web site at the free       000webhost  web hosting.
Therefore, this tutorial supposes that you have a working web site at 000webhost .
And now you are confronted with the need to edit a file at your deployed site. For this purpose, i'll use one of my web sites hosted at 000webhost:

How to edit a file on a deployed AngularJS web site FREE hosted at 000webhost



How to edit a file on a deployed AngularJS web site FREE hosted at 000webhost


Let's say that my 000webhost web site , which sends requests to an OData Web Service, stops working properly , showing as follows :



I can see that the request call to the OData protocol based web service renders a 404 (NOT FOUND) response code, because the OData URI has been changed. Therefore i need to fix this bug by editing the javascript file of the web site hosted at 000webhost.
Open the CPanel of the web site:


edit a file on a deployed AngularJS web site FREE hosted at 000webhost


At the CPanel click the "Another File Manager" :



 Find the file to update and click on "download" :



After the  download , open the file in order to edit it. You can edit the file with Notepad, by clicking "Edit" , or alternatively you can use the excellent  Notepad++ editor , which you can download for FREE at the Notepad++ site :



Notepad++ offers a lot of functionality  , such as testing your web pages on several browsers :



When you are done, save the file and return to the   000webhost dashboard. There, open the "Another File Manager",  look for the file that you want to replace (the one you just edited) . Click on "Upload File" and "Choose file"   :


In our example, the edition of the javascript file fixed the problem, and now the requests to the OData service are sent properly, and are returning  code 200 ("OK") responses :



Important: If you are faced with the following error while opening the 000webhost File Manager,  that's because the session ended, then close the file manager ,  log in again to 000webhost , and  open again the file manager :



That's all!! 
In this article we learned How to edit a file on a deployed AngularJS web site FREE hosted at 000webhost, in order to fix a bug.
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן