Posted on

How to loop through JSON Object using JQuery

Sometimes you get into a need where you need to loop through a JSON object while using JQuery or Angular 6 (with typescript). This is become very useful when you are not fully aware of what is the JSON object has in term of properties but you still needs to do some operations on the object properties..
So Let’s assume that you have a JSON Object called employee and you need to print the keys and values of these keys:

var employee = {
firstName: "FName",
lastName: "LName"
}

var keys = Object.keys(employee);

for (var i = 0; i < keys.length; i++) {
    console.log(keys[i]]); /*printing the key, so it will be firstName and lastName */
   console.log(employee[keys[i]]); /*printing the values; which will be FName and LName */
}

Note: This syntax is working fine with Angular 6 while using Type Script and with JQuery.

Posted on

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory

Recently I faced a strange issue where I’m not being able to compile my Angular 7.0+ application because of the below error message

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::DecodeWrite
2: node_module_register
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::FatalProcessOutOfMemory
5: v8::internal::Heap::MaxHeapGrowingFactor
6: v8::internal::Factory::NewJSPromise
7: v8::internal::interpreter::operator<<
8: v8::internal::NativesCollection<0>::GetScriptsSource
9: v8::internal::NativesCollection<0>::GetScriptsSource
10: v8::internal::NativesCollection<0>::GetScriptsSource
11: 00000044D2784281

I tried to upgrade the nodeJs and Angular version for my app but with no luck. I even tried to increase the RAMs on my development PC and that didn’t solve the issue.
In order to solve this issue, you will need to adjust the default nodeJs used spaces by using the following command:

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --build-optimizer

Below is the original command that I was using and it was giving me the error in concern

ng build --prod --prod-optimizer

Posted on

Using Bootstrap with Angular Project

Having bootstrap in any web project is becoming crucial because it is making developer’s life much easier and making the web project mobile-friendly portals. I’ve been using bootstrap for more than 8 years by now and it is becoming a main component for any project that I’m working on. In this post we will cover how to install bootstrap on Angualr project, we will be covering this step by step starting form creating a new angular project, below are steps:

  1. Open command prompt with admin permissions. To do so, on start menu search for “command prompt” and right click on it then select “Run as Administrator”
  2. Navigate to the location you want to store the project.
  3. Type the following command
ng new <Project Name>

it will be taking few minutes to download files from internet and creating the needed angular files for your project to run.

After this command completed, you will have angular project ready for run. But without bootstrap.

  1. Above command will create a new folder with your project name, navigate to it
  2. Type the following command on cmd
            npm install bootstrap jquery –save

           what above command do, is basically instructing npm to download and save bootstrap and jquery for you on the project.

  1.  Now you have bootstrap installed on your project. Let’s try to run the project, type the following command:
                  ng s -o

              sometimes, you will get the following error message

              “node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected”

             To fix this issue, we need to use older version of RX to do that type the following command

                            npm install rxjs@6.0.0 –save
  1. Try run the project again.. it should be working. Next is to import the needed css files and js, Open angular.json file with any text editor file
  2. On styles tag, add the following value which is basically CSS path

               “node_modules/bootstrap/dist/css/bootstrap.min.css”

        On script tag, add the following values which is basically JS path

                 “node_modules/jquery/dist/jquery.min.js”, 

                 “node_modules/bootstrap/dist/js/bootstrap.min.js”

  1. Try to run the project using the following command
ng s -o

              you should be getting the new project open on your web browser. To test if the bootstrap is installed correctly or not, basically you can open app.component.html and add the following tag

<button class=”btn btn-primary”>test bootstrap</button>

By doing above, you will get a blue button on the main page.

Posted on

Agile Software Development Principles

It has been proven that Agile software development life cycle is the best approach to follow. it is making sure the client is more engaged into the development cycle, which is in turn reflecting on the project success. Some basic agile Software Development Principles:

  1. Satisfy client by continuous delivery of valuable-workable software components/modules.
  2. Welcome changes even in late development cycles
  3. Deliver Workable software frequently, the shorter Agile sprints the better.
  4. Keep client’s business people involved and work closely with them to get the project completed.
  5. Make sure to have team of motivated and trusted individuals from both parties; client and development team.
  6. Communicate frequently with client and make sure they are part of the process
  7. The deliverable are the primary measurement for project progress
  8. It is essential to do the simplest thing that works and satisfy client needs. Don’t seek for complicated solutions that overwhelmed the development
  9. Make sure your team is self-organized. Having self-organized team will produce high quality software on time/budget/quality.
  10. Always always always check how make things better and easy on everybody. This will make your team and your client more effective, which means moving towards the goal faster

These are the basic Agile Software development principles and of course there is more. I always recommending to go with Agile development approach, it is proven to have project succeeded over other approaches.

#AgileSoftwareDevelopment #AgilePrinciples

Posted on

MS SQL Management Studio Snippet

It is normal to keep writing very similar SQL statements while working on database logic. Over the course of the past 10 years, I’ve been using SQL Prompt from RedGate in order to make my life easier while writing repeated SQL statement, it is very nice tool that is integrated with SQL Server Management Studio (SSMS). I mean by repeated statement things like “Select * from “, “Select Count(1) from “, etc… to a more complex statement which is checking what is being running currently on specific database. well, I can save these complex statement into files and just keep opening these files and use them. But that’s takes time. RedGate SQL Prompt, is relatively expensive tool specially when you need to purchase it to for your large team.

There is a cool feature on SSMS that helps me solving this issue. which is basically code snippet. which I save certain queries on SSMS IDE and use it later on. in order to do that I follow the following steps:

1. Open Notepad or any text editor, paste the below XML

<?xml version="1.0" encoding="utf-16"?>
 <CodeSnippets>
 <CodeSnippet Format="1.0.0">
 <Header>
 <Title>createIndex</Title>
 <Shortcut>createIndex</Shortcut>
 <Description>Create Index</Description>
 <Author>Yasser Jaber</Author>
 <SnippetTypes>
 <SnippetType>Expansion</SnippetType>
 </SnippetTypes>
 </Header>
<Snippet>
 <Declarations />
 <Code Language="sql"><![CDATA[

You SQL Snippet Goes here

]]></Code>
 </Snippet>
 </CodeSnippet>
 </CodeSnippets>

2. Before saving the file, change the text “You SQL Snippet Goes here” to your repeating sql statement.

3. Save the notepad with extension .snippet

4. On SSMS, select Tools menu , then ‘Code Snippets Manager‘, this will bring below popup

5. Click on Import, navigate to where you saved the notepad file, and select it. choose the folder that you want to have the snippet to show

By doing above steps, you will have new snippets imported into your SSMS IDE. to use you, do right click, click on “Insert Snippet”, select your correct folder, then select your correct Snippets.

Posted on

How to get the off screen window back (windows 10) ?

Couple of days ago, I came across a very small issue but it is really annoying one. my chrome’s development tool went off screen and I couldn’t get it back on screen. it was completely invisible to me and I couldn’t see it any where but on windows 10 status bar. to overcome this issue, I used a simple trick on windows 10, which is

pressing Right-Shift and clicking on the chrome’s development tool on status bar.

doing so, windows 10 brought to me a context menu where I could click on Maximize which maximized the window on my screen again.

Posted on

How to solve Access-Control-Allow-Origin

When you are trying to do an http post from your Jquery, Angular or any client side script language to an web API that has a different domain name as yours, you will be getting error on the web browser that says:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

This is happening because the website and web API has a different domain names. solving this issue can be done using the following steps:

  1. On the wbe API project, Right click References and select “Manage Nuget”
  2. Search for “Cors” and install “Microsoft.AspNet.WebApi.Cors” , this will install a new dll to your project; System.Web.Http.Cors
  3. go to App_Start/WebApiConfig.cs file
  4. Add using statement  to include System.Web.Http.Cors
  5. On Register method, add the following 2 lines 
    var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

    the EnableCorsAttribute has the following parameters:

Origins:  Comma-separated list of origins that are allowed to access the resource. Use “*” to allow all.
Headers: Comma-separated list of headers that are supported by the resource. Use “*” to allow all. Use null or empty string to allow none.
Methods: Comma-separated list of methods that are supported by the resource. Use “*”  to allow all. Use null or empty string to allow none.

Posted on

LastIndexOf in TSQL

I came a cross a case where I need to parse a string and get a everything after specific character. Unfortunately there is no a function that is being shipped out of the box with MS SQL Server that is doing the needed job. So we had to use 3 built-in functions in SQL in order to do the job, here is a sample TSQL statement that demonstrate how you can do it

DECLARE @SomeString VARCHAR(100)
SET @SomeString = 'Part1;Part2;Part3'

SELECT RIGHT(@SomeString, CHARINDEX(';', REVERSE(@SomeString) + ';') - 1)
Posted on

Deploy Angular app to IIS Web Server

After finishing development your Angular 2+ application, I think you would be thinking of what available options to publish your app, there is plenty of options available and described on Angular website but I’m summarizing the list of actions needed to deploy  your app to IIS server.

Deploying Angular 2+ applications to IIS Web server is very easy step, it is only couple of steps.. to do so follow the below steps:

1. Build your AngularJs application for production. to do so type the following command

ng build -prod --output-path [Path]

2. Copy the generated files from step# 1 into your IIS folder.

3. Create a new website for new your application.

4. Create a new web.config file with the following contents:\

<?xml version="1.0" encoding="utf-8"?> 
<configuration>   
   <system.webServer>     
      <rewrite>       
         <rules>         
            <rule name="Angular Routes" stopProcessing="true">           
               <match url=".*" />           
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />            
                   <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />          
                </conditions>           
               <action type="Rewrite" url="/" />        
             </rule>      
          </rules> 
       </rewrite>   
   </system.webServer> 
</configuration>

It is very important to make sure that your IIS web Server has the rewrite module installed on it.. the following URL has the downloadable file

https://www.iis.net/downloads/microsoft/url-rewrite

Posted on

Restarting Computer Remotely using cmd

I came across and issue where I can’t RDP to my PC which is located on another country and I need to get connected to it. Unfortunately, while there is no one physically can restarting the PC. So I had no option but restarting the PC remotely.. Thankfully, there was an easy way where I can restarting the PC using command prompt. Below are the steps that I follow to restart the PC

1. Run the Command Prompt with admin mode. to do so, right click cmd short cut and choose “run as Administrator”

2. type the following command:

net use \PCIPAddressIPC$

lets assume the IP Address is 192.168.1.5 then the command will be

net user \192.168.1.1IPC$

you will get this response

The password or user name is invalid for \192.168.1.1IPC$.
Enter the user name for '192.168.1.1':

3. Enter username along with domain name like below

Enter the user name for '192.168.1.1':   DomainName\UserName

4. you will get prompted to enter the Password as below

Enter the password for 192.168.1.1 :

if the username and password is correctly provided, then you will get the below message confirming things are good:

The command completed successfully.

5. Now we are ready to send the restarting command to the target PC as bellow

shutdown /r /m \192.168.1.1 /c "Comments"