In a continuous integration environment, deploying ASP.NET MVC applications are done by a click of a button, triggered by a check-in, and then many moving parts of the integration service will take care of distributing the artifacts to the relevant servers. But here we are discussing about how to get your ASP.NET code to be tested on a local IIS server environment. So let’s start with dependancies, and what needs to be included with the deployment.

In this article we are discussing how to get Node.js working on OSX along with npm, the package manager for node.

If we are building a web application, code complexity could grow and the app can get bigger. Number of plug-ins can grow bigger, and you will feel the need of adding more modular components. RequireJS can address these issues to increase the speed of your application in an efficient way.

The Chrome DevTools (Developer Tools), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.

If you are working on a project by your own, you might not worry about the structure, convention and organisation of your code given you fully understand how it works. But working in a team environment it is necessary to make sure that your team members understand your code, easily adaptable and extensible so the importance of maintainable javascript is inevitable.

There are more than one way to make AJAX calls in jQuery. In this tutorial, let’s compare these methods as well as inspect the AJAX calls with Firebug.

Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.

In this article, we’ll look at how to use Grunt in your project to automate some of your repetitive tasks. We’ll look at what Grunt is, how to setup Grunt and then create a simple project with Grunt doing the heavy lifting of the some of the tasks.

In this article, we’ll discuss different patterns that you can use with popular open-source JavaScript MV* framework, Backbone.js. Developers run into problems when they first use Backbone.js as it provides structure to the application leaving the developer to make decisions on design petterns.

PhoneGap is a web-based mobile development framework based on opened source Cordova project, which allows you to create app store ready mobile applications. PhoneGap allows you to use web technologies such as HTML, CSS and JavaScript for cross platform development. It was created by Nitobi in 2009. In 2011, Nitobi was bought by Adobe, and PhoneGap was donated to Apache Foundation, and PhoneGap was renamed to Cordova.

Ember.js is a JavaScript web application framework based on the MVC architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

Hoisting is JavaScript's default behaviour of moving all declarations to the top of the current scope (to the top of the current script or the current function). In different words, a variable can be used before it has been declared.

When your Angular.js application expands to a state that you no longer find it easy to understand, it's time you used dependency injection and modularise your application into units of interrelated modules.

Lexical scope means that scope is defined by author-time decisions of where functions are declared. The lexing phase of compilation is essentially able to know where and how all identifiers are declared, and predict how they will be looked up during execution.

Creating responsive web applications have been made easier with the arrival of the new JavaScript Framework Ext JS 5. In this article let's look at how we can use responsiveConfig to implement this feature.

Backbone collections are an ordered set of models, which only use one type of model. Customizing these collections can help your Backbone application to leverage data the way you want.

Before getting into handlebars, let's look at how routing works in Ember.js. Router is solely responsible for all URLs in Ember.

Google Drive is a file storage service that enables users to organize, backup, and share photos, videos, and other documents in the cloud. And allows you to access your files across many different devices, including smartphones.

JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Node.js allows you to build scalable network applications using JavaScript on the server-side. It uses the V8 JavaScript Runtime. It's written in C which makes it fast.

CSS is crafted to be simple, but over time your styles become large and your files become bloated with selectors growing out of control. Scaling simplicity is difficult.

CoffeeScript is a language that makes JavaScript easier to write and read. It simplifies JavaScript, making it readable and understandable, as well easier to maintain. CoffeeScript compiles into JavaScript

HTML5 is the latest HTML standard. It walks hand in hand with CSS3, the latest CSS standard.

The difference between resource() and route() in Ember.js is that you should use this.resource for URLs that represent a noun, and this.route for URLs that represent adjectives or verbs modifying those nouns.

Models are the heart of any JavaScript MVC application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

Imagine you are working in a team and one of your colleagues wants a copy of the your work, how do we start collaborating?

In the traditional MVC sense Routers don’t necessarily fit the semantics. Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities. Backbone routers are used for routing your applications URL’s when using hash tags(#).

When you are developing an application interfacing Google Driver API, it's mandatory to consider how you are going to handle the authentication for your user. In this article, we are discussing how to implement Google Drive Authentication for your app via its API.

Ext JS is a product of Sencha. Ext JS is the industry’s most powerful desktop application development platform with unparalleled cross-browser compatibility, advanced MVC architecture, plugin-free charting, and modern UI widgets.

In this article we’ll look at how we can use jquery to manipulate, traverse and select DOM elements at ease. Before we start we have to download jquery and load it in your HTML document

Many objects in Node emit events: a net.Server emits an event each time a peer connects to it, and fs.readStream emits an event when the file is opened. All objects which emit events are instances of events.EventEmitter.

Writing jQuery in CoffeeScript, further simplifies the syntax. The jQuery(function($)) can be written as jQuery($) -> or simply $ ->.

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accommodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

If you are thinking of consuming data in your Ember application, you can store them in fixtures. But what if you want to fetch data from a server?

In this article, we go through how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more efficient than jQuery and CSS-based animation libraries. We will discuss how those libraries work, where to use them and what other alternatives are out there for animation.

Arrows are a function shorthand using the => syntax (‘fat arrow’). They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both expression and statement bodies. Unlike functions, arrows share the same lexical this as their surrounding code.

We have learned about the new features ES6 brings us in ES6 New Features article. In this post, we will go through the advanced features of ES6 and how we can implement them.

A tail call happens when a function Foo calls a function Bar as its final action. At that point Foo stops and passes the execution to function Bar and disappears not having to do anything from there onwards.

Array comprehension is creating a list B based on another list A, where each entry of B is the result of a custom operation performed on the items of list A.

Proxies enable you to intercept and customize actions performed on JavaScript objects such as `getter` and `setter` for getting and setting properties. This is really helpful in scenarios like JSON based API interaction where you have to customize data coming back from the API.

Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Prototype objects are just simple JavaScript objects and may have their own prototypes. If a prototype has a non-null reference to its prototype, and so on, this is called the prototype chain.

ECMAScript is a object based language. An object has a built-in property named constructor.

In a scaling project, the way CSS spans out can bring us various problems. Let’s look at these issues, and discuss them in detail.

JavaScript classes are simply syntactic sugar over existing JavaScript prototype chain. But classes give you a cleaner way to organise your code, and make it slightly easier for the beginner or people who are familiar with class oriented languages to read JS and understand.

In this article, we are discussing about how to perform a production deployment for React

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.

Grunt is a task runner that has a ton of plugins for doing things like compiling LESS/SASS into CSS, concatenating JavaScript, minifying, etc. It also has a package for watching files (the same way CodeKit and Prepros does) and firing off certain tasks when they’re modified.

Arrow functionss are a function shorthand using the => syntax (fat arrow). They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both expression and statement bodies. Unlike functions, arrows share the same lexical this as their surrounding code.

Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.

The destructuring assignment syntax is a JavaScript expression in ES6 that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

Gulp is a JavaScript task runner. It’s an alternative to Grunt, which allowed you to define your tasks using JavaScript inside of a file called Gruntfile.js. In this tutorial, I’ll show you how to install Gulp and create a simple configuration file to get your feet wet with this great new task runner.

If you are familiar with JavaScript, you have probably known the term scope. If you are familiar with other languages, you would know that a scope of a variable is to the nearest block – block scope. But JavaScript is different. A variable created with var will be scoped to the nearest parent function.

Sass control directives helps creating libraries for reuse and distribution, there by contribute to writing leaner Sass. Advanced frameworks use mixins. These mixins use directives such as @if, @for, each and @while.

A module is a self-contained unit of code, which is usually stored in a file. In ES6, modules get language-level support for component definition. Modules export values, which can then be imported by other modules.

To loop over an array or a collection JavaScript has been traditionally using for loops. ES5 introduced the for ..each loop. But ES6 introduces a little shorter version, a new interface for iteration called Iterable.

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework.

Many programming languages support the concept of a default argument for a function parameter so that the caller does not always need to specify the argument value. Unfortunately, ES5 does not have a default argument support in its syntax. ES6 functions have come a long way by taking aboard the years of complaints and improving parameter handling that is less error-prone and more powerful.

Isomorphic JavaScript means that we get to share the same code on the client and on the server. So basically, you are rendering your application markup on the server and piping it down as complete HTML to the browser.

Template strings in JavaScript consist of literal text, and placeholders where the runtime can evaluate an expression to inject data into the text.

ES6 is here and now. So writing React JS components in ES6 will be beneficial considering the new features ES6 brings to us.

Symbols are a new primitive type in ES6. If you ask me, they’re an awful lot like strings. They are tokens that serve as unique IDs. They will help avoid name clashes between properties.

Created by Eran Hammer, hapi.js is an open source framework built on top of Node.js for building web applications and services by Wallmart. In this tutorial, we will go through the advantages of hapi and build a simple application using hapi as the server.

In this article we discuss about React best practices & patterns for writing React components, and the recommendations here aim at coding convensions and patterns.

To understand Functional JavaScript and the quirks of JavaScript, we will have to look into the history of JavaScript and how it was created.

Node.js has gained momentum in the recent years but there are not many security guidelines available out there.

Service Worker is a new browser feature which provides event-driven scripts that run independently of web pages. Unlike other workers, Service Workers can be shut down at the end of events, note the lack of retained references from documents, and they have access to domain-wide events such as network fetches.

If you have written a search component that returns matching result as you type – you would realise that sending a request to the server on every key press is not required as that can result in burdening the server with too many requests.

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default, eleminating the problems with global nature of the CSS namespace.

As we know, React is a library for creating user interfaces. It renders your UI and responds to events aka: the V in MVC. Because it is not as opinionated as many of other front-end JavaScript libraries, it plays nicely with your stack, whatever it maybe, Ruby, Java, Node.js or .NET.

Redux allows you to manage the state with a minimal API but completely predictable behaviour – a predictable state container for JavaScript apps. Redux is a Flux implementation but that does not use Flux. It is inspired by functional programming and immutability (Elm, Clojure) and written by Dan Abramov.

React Router is the most popular routing library for React, which synchronizes your UI with the URL. It is built on top of React and helps you to build new screens quickly.

This beginner-level article will discuss further about JavaScript arrays in detail. JavaScript arrays are used to store multiple values in a single variable. JavaScript has an built-in object for manipulating arrays called Array.

Babel has been one of the big newcomers of JavaScript community in 2015. It allows us to use features from the future of JavaScript. It will transform your futuristic code into a format, browsers understand. You can even use it to develop your own language features. Babel’s built-in JSX support will come in handy here.

The Fetch API is a Promise-based standard for performing AJAX requests. It provides a fetch method which returns a Promise on the window object, which we can use to perform requests from remote resources.

Immutable.js is a library from Facebook which provides immutable data structures and utilities that we can introduce to our applications

D3 is a data visualization library written in JavaScript. It stands for Data-Driven Documents where Document stand for the DOM or the Docucment Object Model of a wweb page.

Node Version Manager is a simple bash script to manage multiple active node.js versions. In this article, we are going to discuss about managing NodeJS install with NVM.

In reality, for a real world application, just consuming an API end point and displaying the data is not going to cut it.

BrowserSync & Gulp are a two very useful combination when it comes to developing applications efficiently, without having to refresh the web page every time you make a change. Let’s look at what BrowserSync & Gulp are, and how to install and use them.

If you are using React, there is a better chance you have heard about virtual DOM. In a nutshell, virtual DOM is an abstract version of the DOM, a lightweight copy of the actual DOM which we can manipulate the way we want and then apply to the DOM tree.

Angular Translate is an AngularJS module called angular-translate which makes i18n and l10n easier with your Angular application. The acronym i18n stands for internationalization, and l10n for localization.

IndexedDB stands for Indexed Database, is a web standard for storing large amounts of client-side data in a structured manner. This low-level API is able to index data which enables performance rich search on data.

Facebook released React v15.0.0 on 07/04/2016. The most noticeable change was the version number jump from 0.14 to 15.0.

ESLint is a pattern identifying and reporting tool for JavaScript code. Somewhat it is similar to JSLint and JSHint with few differences.

The JavaScript Console or the Console Object provides access to the browser’s debugging console. Chrome’s debugging console is DevTools Console and for Firefox it is Web Console. It is available in browser’s Window scope

Tape & Tap are testing tools you can use instead of Mocha or Jasmine. The Test Anything Protocol (TAP) is a definition that has been around since 1987 and Tape is a test harness written in JavaScript for Node and the browser.

React stateless functional components are pure JavaScript functions that only have a render() function and no lifecycle methods like componentDidMount.

Task runners like Gulp or Grunt have been go to choice for the front end projects for last few years. Gulp being the latest between the two, and being the popular choice for last couple of years, one might wonder what’s wrong with it.

You may be working in a complex project, where multiple isolated modules need to be imported into a single parent module, you might want to configure Webpack.config to enable exporting modules.

Nightwatch is an end-to-end test framework. The reasons nightwatch is your best choice can be decided upon the reasons described in this article.

Abstract control flow and operations on data with functions in order to avoid side effects & reduce mutation of state

Some of the modern browsers are yet to catch up with the new language additions to ES6. This means we have to use Babel to transpile our code into ES5.

Web page rendering is an important subject to study in order to optimize page load times, and to understand how to design solutions to cater for that. For understanding how web pages get rendered, we need to study how browsers render a web page.

ES6 generators are functions that can be paused or resumed, and work cooperatively in a multitasking applications.

React has become the framework of choice recently within the JavaScript community. And the tools for testing React components has also gained lot of attention.

In this article, we are going to use ES6 recursion with functional programming to understand how we can implement list operations like map, reduce, filter and join.

ES6 introduced improved parameter handling in JavaScript. Instead of the half array arguments object, these new improvements will significantly improve how we handle arguments and parameters.

Promises are great but the its nested syntax can get easily complex and hard to follow. With ES2017 async and await keywords for writing asynchronous code makes it more readable and easier to follow than equivalent code based on long promise chains or deeply nested callbacks.

The context API will finally become a first-class citizen with the release of React 16.3. Facebook has announced that they are going to release a stable yet revamped version of the context API.

Node.js memory management provides means to dynamically allocate memory chunks for programs when they request them and free it when they are no longer needed, so they can be reused. Application-level memory management can be manual or automatic.

Using Material UI which supports Styled Components is an excellent combination of libraries to start building a design system of your own

React is known for providing a fast user experience by only updating the parts of the UI that have changed. In this article, we discuss how we can optimise the render performance by understanding how React decides to re-render

Since ES2015, updates from the TC39 committee are released annually. Their latest release ES2020 comes with many new features.

The future of SEO and search ranking algorithms are now in heavy favour of static or server-side rendering. This means building static or server-side rendered apps instantly gain advantages in rankings.

We use linting to automate code formatting issues, to fix syntax errors and coding style. For example, you may have forgotten a semi-colon during aor bug fix you may have accidentally left a console.log statement.

Enums help to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases.

If you have been writing React functional components for a while now, you may have encountered two ways of declaring a component - an arrow function or a function declaration.

React 18 will include architectural improvements to React server-side rendering (SSR) performance.

In this article we discuss about a few things to avoid when writing React Hooks and forming good habits through understanding

React provides several APIs for transforming elements: cloneElement, isValidElement.

When TypeScript was originally invented by Microsoft in 2010, they implemented features missing from JavaScript at the time including module systems, classes, enums and decorators.

JavaScript optimisation is becoming increasingly necessary for improving application performance. Let’s look at some of the challenges associated with JavaScript and how to optimise performance.

Next.js is a zero-config React framework for building server-side and static web applications bundled with enhanced developer experience with features for products such as smart bundling, TypeScript support, route pre-fetching, hybrid static & server rendering, and more.

Design patterns are advanced object-oriented solutions to commonly occurring software problems.  Patterns are about reusable designs and interactions of objects.  Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions.

Turborepo is a high-performance build system for JavaScript and TypeScript codebases. Vercel who acquired Turborepo claims, through incremental builds, intelligent remote caching, and optimized task scheduling, Turborepo can boost build speeds by 85% or more, enabling teams of all sizes to maintain a fast and efficient build system that scales as codebases and teams grow.

Tree shaking is the process used by bundlers like Webpack for dead-code elimination in JavaScript.