Tag Archives: Javascript


Top Mistakes Developers Do While Coding with Angular

Top Mistakes Developers Do While Coding with Angular

AngularJS is one of the most popular JavaScript frameworks accessible today. AngularJS major goal is to bridge the development process which makes it great for prototyping small applications, but its power allows scaling to full-featured client-side applications. The combination affluence of development, breadth of features, and performance has led to wide implementation, and wide implementation comes with many common drawbacks. This list captures common AngularJS mistakes, so explore this article and know the major mistakes done by developers while coding with Angular.


In Angular 1, if the user wanted to be notified when a value changed, the user has to set a $scope.$watch and physically check for changes in each digest cycle. In Angular 2, the ngOnChanges links greatly and streamlines this process. Once the user defines a ngOnChanges method in his/her component class, it will be called whenever the component’s inputs change.

But, the ngOnChanges method executes only when the component’s inputs change -especially, those items the user have included in his/her inputs array or explicitly labeled with an @Input decorator. It will not be called when items are added or removed from @ViewChildren or @ContentChildren query lists.

If the user wants to be alerted for changes in a query list, then the user should not use ngOnChanges. In its place, the user should subscribe to the query list’s built-in observable, it “changes” property. As long as the user do so in the proper lifecycle link, the user will be alerted whenever an item is added or removed.

@Component({ selector: ‘my-list’ })
export class MyList implements AfterContentInit {
@ContentChildren(ListItem) items: QueryList;

ngAfterContentInit() {
this.items.changes.subscribe(() => {
// will be called every time an item is added/removed

There are very few circumstances where manipulating the DOM directly is necessary. Angular 2 provides a set of leading, high-level APIs such as queries that one can use instead. Leveraging these APIs confers distinct advantages:

  • It is possible to unit test the application without touching the DOM, which removes difficulty from testing and helps the user tests run faster.
  • It decouples the user’s code from the browser, allowing the user to run the application in any rendering context, such as web workers or outside of the browser completely.

When the user manipulates the DOM manually, the user will miss out the above advantages and ultimately end up writing less expressive code.


While playing around with queries, it is easy to fall into this ploy.
export class MyComp {
@ViewChild(SomeDir) someDir: SomeDir;
constructor() {
console.log(this.someDir);    // undefined

When the console logs are “undefined”, the developer might assume the query is not working or the developer itself constructed it imperfectly. It is important to remember that query results are not yet available when the constructor executes.


In Angular 1, if the user wants to adjust the visibility of an element, the user can use one of the Angular’s built-in directives, such as ng-show or ng-hide

Angular 1 example:

<div ng-show=”showGreeting”>

Hello, there!


In Angular 2, template syntax makes it available to bind to any native property of an element. This is very powerful and opens up a number of possibilities. One option to bind to the native hidden property, which is similar to ng-show, and sets the display to “none”.

Angular 2 [hidden] example:

<div [hidden]=”!showGreeting”>

Hello, there!


At first sight, binding to the hidden property seems like the closest cousin to Angular 1 ng-show. However, there is one “!important” difference.

ng-show & ng-hide together handles visibility by adjusting “ng-hide” CSS class on the element, which sets the show property to “none” when applied. Importantly, Angular controls this style and postscripts it with “!important” to assure that it always overrides any other display styles set on that element.


AngularJS is a great framework that continues to grow with the community. AngularJS is still a growing concept, but hopefully by following these pacts some of the major pitfalls of scaling an AngularJS can be averted.


UC Davis web development certificate program

The IT sector is thriving very fast, and the demand for web developers and IT professionals continues to rise. In response to this growing demand, UC Davis Extension has launched a new online web development certificate program designed to provide students with the core skill set necessary to succeed in almost any IT environment. It is designed in partnership with national employers like (Amazon, Google, and Hewlett-Packard), Robert Half Technology and highly regarded UC Davis Computer Science faculty. This program delivers exactly the skills which are needed for an employer.

The web development certificate program is an in-depth foundational program that will prepare students for fulfilling, long-term careers in web development. The program covers all the functionalities of web development from programming to databases from both client to server side, allowing students to fully understand and execute web development using trending technologies and languages. Courses have strong applied focus, with an emphasis on project-based assignments, ensuring that students build a portfolio that demonstrates their ability to create dynamic and modern websites.

Designed for professionals like you:

This in-depth programming designed for the people who are interested in learning current technologies and tools used to develop and design websites for professional or personal use. Individuals with less or no experience in web development or those looking to brush up their skills like web professionals, graphic designers, and multimedia designers who are looking out to change their careers or excel in their current position will get benefited from this program.

Learn where ever and whenever you want:

This program is designed by the award-winning educational design team at UC Davis Extension, this online program offers high-quality instructions from industry experts in an engaging multimedia format that leverage screencasts and interactive graphics to illustrate key concepts.

UC Davis web development certificate program consists of five courses; they are as follows,
Creating functional websites:

Design and build your own professional and attractive web pages. In this course you can learn the basics of hypertext mark-up language(HTML), how to write code in HTML and how to work with HTML editors. Discover how to construct your own web pages by using the concepts involved in CSS and HTML, including fundamentals such as lists, menus, hyperlinks, images, forms, tables, frames, and other customizable parts.

Web programming with JavaScript:

Once you are keen with the concept of building static web pages then learning JavaScript is the next step in creating dynamic interactions with your web pages. Because JavaScript is built into web browsers, there is no need of installing extra software tools. Learn the introduction of JavaScript and discover how to create usable, interactive pages that can respond to the web browser and user input. Examine the techniques for controlling the web browser and user environment. Although a programming background is helpful it is not a requirement for learning the powerful features of JavaScript. This is not specifically a programming course, students will learn a great deal about programming while learning JavaScript.

Server side scripting with PHP:

Transform basic websites into interactive experiences with server-side scripting languages. Server-side scripting languages allows a user to create dynamic web pages driven by programming logic, data from databases and server files, or content based on user input. This course makes you learn PHP, which is the most common programming language, to create interactive web pages

Database design, development, and management

Learn the basics of modern database terminology, architecture, design, and creation, as well as how to access the stored data. Acquire the skills to describe the functions of a database management system and its internal components, and construct logical data models for the implementation of a specific database requirement. Students also go through with the concepts like how to code simple SQL statements to create, retrieve, update, and delete data values stored in a relational database.

Creating web applications with AJAX

AJAX has been described as the special sauce that makes the web-magic really happen. In reality, it is a combination of technologies working together to create highly interactive web content. AJAX combines HTML5, CSS, JavaScript and server side scripting to allow fully dynamic web page content without the need to reload the pages in the browser, including database-driven content. Learning AJAX combines the skills of learning HTML5, CSS, and JavaScript, Database development and PHP is a complete package allowing the user to build any type of website.


Importance of Client-Side JavaScript Security

Javascript is extensively used for several years ever since it was first developed. There are so many reasons in the bucket that why we need to use Javascript. Firstly, Javascript is so natural to learn and utilize. And another reason is, it has the wide accessibility to simple-to-join, open source libraries like jQuery, React.js, Backbone.js, Angular.js, and Ember.js.

To better understand of Javascript security, let’s explore in deep to outline and know why it has become the future wave in developer’s perspective

Javascript is everywhere

As we all know Javascript is incredibly powerful language. It is a high-level and interpreted programming language that has been widely used since its release. Javascript is world’s 11th most prominent programming language. It is commonly used in dynamic web pages to provide extended functionalities such as interactivity, animations, user activity, tracking and more. In order to do this, the Javascript is embedded in an HTML page, where it can interact with pages Document Object Model (DOM) to perform specific functions. In addition to its usage in web browser applications, Javascript is progressively used in mobile applications via cross-platform development tools like Titanium and PhoneGap, and in server-side code via frameworks like Node.js.

Javascript Security

Since its release, there have been several Javascript security issues that have gained outspread attention. The way javascript interacts with the DOM poses a risk for end users by enabling deleterious actors to deliver scripts over the web and run them on client computers. There are two measures that can be taken to contain this Javascript security risk. The first one is sandboxing, or running scripts separately so that they can only access certain resources and perform only specific tasks. Secondly, implementing the same origin policy, this prevents scripts from one site, accessing the data that is

Javascript is one of the most versatile and effective languages used to extend functionality in websites. However, it also possesses some negative effects that might make you think twice before implementing Javascript on your websites. Every programming language has its own advantages and disadvantages. Let us review some of its pros and cons.

Advantages :

Javascript is executed on the client side: The code is executed in the user’s processor rather in the web server, thus saving the bandwidth on the web server.

Extended functionalities to web pages: Third party ad-ons like Greasemonkey enable Javascript developers to write snippets, which can execute on desired web pages to enhance its functionality. If you are using a website and you wanted to add some certain features, you can write it by yourself and can use add-ons like Greasemonkey to implement it on the webpage.


Security Issues: Javascript snippets, once it is adjoined onto the web pages, it executes on the client server immediately and, therefore, can also be used to exploit the user’s system. While a cer tain restriction is set by modern web standards on browsers, the malicious code can be still execut ed by compiling with the restrictions set.

Javascript rendering varies: Different layout engines may render the Javascript differently, thus resulting in inconsistency in terms of functionality and interface. Though the latest versions of Java script and rendering have been regulated towards a universal standard, certain variations still exist.

Thus, the rise in the use of Javascript brings you with a great promise, but the combination of its interpreted nature and its increase use also opens the entryway to more risk. You need not to be scared off, as there is much you can do to reduce the risks for your business.


In Javascript, What is call() & apply() vs bind()?

Call attaches this into function and executes the function immediately. We need to list the arguments one-by-one (comma separated): person.hello.call(person, “world”);

Apply is similar to call except that it takes an array-like object instead of listing the arguments out one at a time:person.hello.apply(person, [ar1,ar2…]);

Bind attaches this into function and it needs to be invoked separately like this:var helloFunc = person.hello.bind(person);helloFunc(“world”);


How do JavaScript closures work?

Closure is related to Scope. Let’s assume that we have a function named ‘Outer’. Inside this function, let’s create a ‘inner’ function. Looks something like below:

function outer(){
function inner(){

Let’s create a variable in outer function. Now, the inner function will have access to this outer function variable. The inner function is now a closure.

function outer(){
var info = “Hello”;
function inner(){
console.log(info); //Prints Hello – inner() fn has access to info var

So, to put it in as a text book definition, A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.The inner function shall have access to three different scope vars:

• It’s own variables
• Outer function variables
• Global variables
var greet = “Welcome”;
function outer(){
var info = “Hello”;
function inner(){
var name = “James”;
console.log(info); //Prints Hello – inner() fn has access to info var
console.log(name); //Prints James
console.log(greet); //Prints Welcome
P.S: The inner function shall have access to the outer function parameters as well
Dispelling the Myths of closure:
Myth 1. Closures are created only after an inner function has been returned
Myth 2. Closures only apply to inner functions


Explain the bind() method in JavaScript?

We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.

The this value in methods and functions must be set explicitly when you need a specific object bound to the function’s this value.

The need for bind usually occurs when we use the this keyword in a method and we call that method from a receiver object; in such cases, sometimes this is not bound to the object that we expect it to be bound to, resulting in errors in our applications.


How do JavaScript closures work?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly. You create a closure by adding a function inside another function.

Closures have access to the outer function’s variable even after the outer function returns.

Closures store references to the outer function’s variables.

Closures have access to the updated values of the outer function’s variables, they can also lead to bugs when the outer function’s variable changes with a for loop. To fix this side effect (bug) in closures, you can use an Immediately Invoked Function Expression (IIFE).


Difference between Bower and NPM?

The main difference between NPM and Bower is the approach for installing package dependencies. NPM installs dependencies for each package separately, and as a result makes a big package dependency tree(node_modules/grunt/node_modules/glob/node_modules/…), where there could be several versions of the same package. For client-side JavaScript this is unacceptable: you can’t add two different versions for jQuery or any other library to a page.

With Bower each package is installed once(jQuery will always be in the bower components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won’t install the package incompatible with one that’s already installed.

Explain the same-origin policy with regards to JavaScript?

Explain the same-origin policy with regards to JavaScript?

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. Same-origin Policy is used as a means to prevent some of the Cross-site Request Forgery attacks.

The “origin” is the same if three things are the same: the protocol (http vs. https), the domain (subdomain.yoursite.com vs. yoursite.com vs. google.com), and the port (: 80 vs.: 4567). Using JS, we would be able to fetch resources (typically data like text,html,json,etc) using JSONP where we create a script tag dynamically with src attr pointing to the end source. Insert the script tag into the head section of the page. This will force the browser to fetch the end source similar to how it fetches any other JS or image via http.