HOW TO ADD DIRECTIVES THAT TAKES CARE OF ADDING MORE DIRECTIVES TO THE ELEMENT IT WAS CREATED ON?

How to add directives that takes care of adding more directives to the element it was created on? i.e. build a directive that takes care of adding date picker or other elements to the existing element.?

In cases where you have multiple directives on a single DOM element and where the order in which they’re applied matters, you can use the priority property to order their application. Higher numbers run first. The default priority is 0 if you don’t specify one. The key was to remove the attribute: element.removeAttr(“common-things”); and also element.removeAttr(“data-common-things”); (in case users specify data-common-things in the html).

See working solution with html below:
angular.module(‘plunker’)
.directive(‘commonThings’, function ($compile) {
return {
restrict: ‘A’,
replace: false,
terminal: true,
priority: 1000,
compile: function compile(element, attrs) {
element.attr(‘tooltip’, ‘{{dt()}}’);
element.attr(‘tooltip-placement’, ‘bottom’);
element.removeAttr(“common-things”);
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
} }; } }; );

<html ng-app=”plunker”>
<div ng-controller=”DatepickerDemoCtrl”>
<hr/>
<select ng-options=”s for s in selects” ng-model=”el” common-things>
<option value=””></option>
</select>
</div>
</html>

Explanation why we have to set terminal: true and priority: 1000 (a high number):

When the DOM is ready, angular walks the DOM to identify all registered directives and compile the directives one by one based on priority if these directives are on the same element. We set our custom directive’s priority to a high number to ensure that it will be compiled first and with terminal: true, the other directives will be skipped after this directive is compiled.

When our custom directive is compiled, it will modify the element by adding directives and removing itself and use $compile service to compile all the directives (including those that were skipped).

If we don’t set terminal:true and priority: 1000, there is a chance that some directives are compiled before our custom directive. And when our custom directive uses $compile to compile the element => compile again the already compiled directives. This will cause unpredictable behavior especially if the directives compiled before our custom directive have already transformed the DOM.

HOW TO CENTER ABSOLUTE ELEMENT IN DIV ?

How to center absolute element in div i.e I need to place a div (with position:absolute;) element in the center of my window.?

Create the any class mentioned as below and assign it to your div..inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Here the clue is, that left:50% is relative to the parent while the translate in transform is relative to the elements width/height.

This way you have a perfectly centered element, with a flexible width on both child and parent.This works even if the child is bigger than the parent.

You can also center it vertically with this (Note : width and height of parent and child can be totally flexible(i.e. Unknown)). cheap hotels

HOW TO WRITE CSS MEDIA QUERIES IN IE8?

How to write CSS media queries in IE8?

Internet Explorer versions before IE9 do not support media queries. But we use IE’s conditional commenting to achieve this. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css”/>
<!–[if lt IE 9]> <link rel=”stylesheet” type=”text/css” media=”all” href=”style-ie.css”/>
<![endif]–>

This won’t allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.

USING CSS, HOW TO MAKE THE BACKGROUND OF AN ELEMENT TRANSPARENT/SEMI-TRANSPARENT BUT HAVE THE CONTENT (TEXT & IMAGES) OF THE ELEMENT OPAQUE?

Using CSS ,how to make the background of an element transparent/semi-transparent but have the content (text & images) of the element opaque?

Give opacity as 0.5 in your background color rgba like background-color:rgba(255,0,0,0.5); based on your color in your style property of the element tag.

Eg.
<p style=”background-color: rgba(255,0,0,0.5);”></p>

Media Announcement

Media Announcement
” Pro-Tek Consulting is excited to announce the expansion of its services to Australia under the name “Pro-Tek Consulting Australia Pty Ltd”. Pro-Tek Consulting has already proven itself in Staffing, Web Design and Application Development services in USA and India. Pro-Tek’s monthly technical magazine “UI Street” is another successful offering to web development community in both the countries which has been receiving much of accolades from the web development community. Same services are planned to be offered in Australia. This Australian company is expected to be fully operational by the end of 2015. “

TOP 5 BEST APP MAKER TOOLS

Top 5 Best App Maker Tools

As the popularity of mobile dependence on applications grows day by day, more and more businesses are realizing the fact that its not just the web they need to have a presence on. They require their own specific applications catering to their customers’ requirements. The challenge however is that building an app isn’t everybody’s cup of tea. The costs involved are more often than not such that can only be afforded by significantly large businesses which leaves the small businesses and start­ups on the bench.

The silver lining to the cloud of expensive app building is that there are now several app making tools out in the market that can be used for building DIY apps. The benefit of resorting to these app building tools is that anybody can create apps of their own without having to learn how to code and other technicalities. This means that small business owners and those who cannot afford hiring a developer to create an app for them can now build apps of their own easily.

Best App Maker Tools

We decided to do a little research and come up with 5 of the best app making tools available. However, the user friendliness and efficiency of these apps could not have been tested adequately if used and scrutinized by the technically proficient. Therefore, we decided to get these apps tested by non-developers, asking them to
create a simple to-do list app using the following app building tools. Based on the reviews given by our testers and those of the online community, we discuss the following app making tools:

1. AppMakr

Primarily used for building native IOS and Android apps, App Makr is a free DIY app building platform that eliminates the need of coding in building apps. Any number of apps with unlimited updates can be built absolutely free. In addition to navigation control, monetization and tab viewing, push notifications, HTML5 functionality, live updates, branding, design customizations and high resolution photo galleries are some of the features.

If you’re building an app for the iphone, App Makr enables users to preview the app by publishing a test app that helps in assessing its look and feel before it can be launched in the app store. The app’s App Quality Index (AQI) which is a set of parameters that informs whether the built app would be rejected by Apple during the app review, is at all times displayed.

Is Appmark Safe

All apps created using the AppMakr are published under the developer’s account and brand, not under AppMakr’s name. AppMakr is a free platform with advertisements. Ad-less service is available too but for a cost of $1 a month which is inclusive of a native android app. A $9 per month plan allows creation of iphone, Android & HTML5 apps along with the ability of submitting the built apps to Apple’s App store and Google’s Play store.

Pros:

  • Any number of apps with unlimited updates can be built absolutely free.
  • Can preview the app by publishing a test app that helps in assessing its look and feel before it can be launched in the app store.
  • Awesome features and highly customizable. Based on the required needs we can have our app look exactly the way we want and can upload icons, headers, artwork, etc.

Cons:

  • We can’t view pages as they are published, instead you can preview by sending the app to yourself on your phone or by email.
  • Apple Publishing can be a little trickier and it takes more effort to build.

2. Bizness Apps

Bizness Apps

This tool is suitable for building apps for businesses spanning across industries. This tool has been designed bearing small businesses in mind. The tool enables users to build Android, iphone, ipad and mobile Webapps in addition to customizing them which is made possible by hundreds of customizable design templates that Bizness Apps offers.

Its features include push notifications, GPS, content sharing, social media, custom Email forms, food ordering, mobile reservations etc. It also enables users to preview their built apps before they are published.

Inter-app integration with other business apps is made possible which can be better understood with the example of importing contacts from the app to email marketing services such as MyEmma, MailChimp etc. In addition to the availability of a White Label Plan, the tool comes at a price of $24 a month for mobile websites and $49 a month for a native and mobile app.

Pros:

  • Makes mobile apps affordable and simple for small businesses.
  • Offers a user-friendly CMS that lets companies design and customize iPhone, iPad, Android and mobile Web apps.
  • Should pay a flat rate for unlimited Android apps and mobile websites.

Cons:

  • Limited options for E-commerce websites and it requires a proper app in place to handle all day to day activities.
  • Brand customization only available in custom pricing with White Label Reseller plan.

3. Canvas Business App

Canvas Business Apps

The Canvas Business App is a drag and drop app builder that aims at streamlining and organizing data collection and converting forms into mobile-ready digital formats. Functions such as workflow automation, confirmation or authorization via signature capturing, product tracking (via GPS) and purchase order calculations can be performed by apps built using the Canvas. In addition to accepting mobile payments, tracking inventory via barcode scanning and maintaining databases, Canvas offers something quite secure Cloud storage for its users. This feature is very enticing for users as it can be very useful in sharing of files and documents between the app users.This tool can be used for building iOS, Android and Windows Apps.

Pros:

  • Canvas Business Apps & Forms works on iOS, Android and Windows devices.
  • Makes apps easy, fast and affordable to create a mobile business application.
  • Integrates with cloud apps to replace paper forms everywhere.

Cons:

  • A 30-day free trial is available at the expiration of which, service can be continued for $13 a month per user.
  • Great with a few bugs – Resizing crashes the app sometimes.

4. Appy Pie

Appy Pie

A drag and drop platform which happens to be the fastest growing DIY app building tool feasible for building apps across all major platforms such as Android, Windows, iOS & Blackberry. Appy Pie enables automatic publishing of apps on their respective app stores including Appy Pie’s own marketplace.

Appy Pie’s functions include Social media and Blog integration, Push notifications, sharing capabilities, photo galleries, restaurant tools such as passbook coupons, Menu builder, OpenTable, GrubHub, GPS tracking for strategic location based marketing and One touch calling, QR code etc.

In addition to the aforementioned features, some features that make Appy Pie stand out from the rest of the tools are app analytics, real time updates and revisions, app monetization and custom coding. HTML5 apps can be designed using this tool for free.Appy Pie offers subscription plans for publishing an app starting at $7 a month for a single app. Every plan includes a free mobile website and all paid plans are inclusive of customer support.

Pros:

  • The interface provided by Appy Pie is user friendly and is easy to use.
  • Has its own market place which gives more visibility to your app.

Cons:

  • Few bugs in the interface, as it has not yet released its stable version.
  • Does not provide support for users to publish their apps on app store such as Google Play Store or Apple App Store.

5. Mobile Roadie

Mobile Rroadie

Used by renowned stalwarts like the NBA, NFL, NBCUniversal, TED, Verizon etc. Mobile Roadie is the most popular do-it-yourself app building tool available to businesses.

Mobile Roadie can be used for building apps laden with features such as geotargeted push notifications, location maps for filter engagement, mobile marketing tools, in-app activity rewards and points, chat options, news updates and a fan wall with threaded posts. In addition to these, features that facilitate photo gallery uploads via Flickr, Instagram, Twitpic, Facebook and video integration from You- Tube, Vimeo, Dailymotion etc. and audio imports from iTunes, SoundCloud etc. are also available. Using Mobile Roadie, Quick Response (QR) codes could be created which when scanned, unlock or link to other content.

Realizing the potential and the growing significance of analytics and data, Mobile Roadie offers businesses advanced analytics feature which reveals important customer activity data. Mobile Roadie’s services can be availed at $1499 per year.

Pros:

  • Offers great mobile marketing features to reach out wide range of audience.
  • Supports anytime content updates, geo-targeted marketing campaigns, user analytics, push notifications and more.

Cons:

  • Slightly expensive when compared to other app maker platforms.
  • Limited E-commerce support and no live chat option available.

AN OVERVIEW ON ANGULARJS 1.X to 2.X MIGRATION

An Overview on AngularJS 1.X to 2.X Migration

AngularJS, the open source library that everyone could contribute to will now have a sequel in the form of AngularJS 2.x. The lion’s share of contribution in the development of AngularJS is courtesy of Google employees which in a way makes AngularJS, a project of Google.

When AngularJS 2 was first rolled out with the information that 2.x wouldn’t be compatible with AngularJS 1.x, it created a huge havoc in theglobal developer community. Developers complained that this incompatibility would result in numerous hurdles that would be very difficult to deal with. Google, exercising their famed prudence and troubleshooting policy, announced that there would be a few intermediary releases (1.5x) that would pave the way to facilitate a hassle free roll out of the 2.x branch. This consolation however could not calm the nerves of developers.

  • The death of the controller, and a new emphasis on components
  • There’s no $scope object!
  • Dynamic Loading (lets developers add new directives or controllers on the fly)
  • Directives are 3 types. Component Directives, Decorator Directives (ex: ng‐show), Template Directives (ex: ng‐if)

benefits of Angular 2.x

Let’s have a look at what does Angular 2.x contain and what could be some of the steps to be taken to migrate from Angular 1.x to 2.x (that many devs are discussing).

Handling ANGULARJS 2.0:

AngularJS 1 application can be migrated to Angular 2 application over many commits ­ one component at a time. For this, we can utilize ng­upgrade (library) that “will automatically make all of the Angular 1 injectables available in Angular 2”. Mostly probably, Angular 2 will ship with ngUpgrade.js

Typical application upgrade process (at a high­level)

Here is an example of what an Angular 1 project upgrade to Angular 2 may look like (explains how to handle Scope, Directives, Services and the new “component” style)

1. Include the Angular 2 and ng­upgrade libraries with your existing application

  • Handling $scope.

The Big Question: Angular 2 doesn’t support 2­way bindings. How to handle this scenario?

Handling Angularjs 2.0

Directives. You can also write directives in a more future­minded way. First, you can remove almost all references to $scope

Angular 1 project upgrade to Angular 2

2. Pick a component which you would like to migrate

  • Edit an Angular 1 directive’s template to conform to Angular 2 syntax
  • Convert the directive’s controller/linking function into Angular 2 syntax/semantics
  • Use ng­upgrade to export the directive (now a Component) as an Angular 1 component (this is needed if you wish to call the new Angular 2 component from an Angular 1 template)

Angular2 component from an Angular 1 template

3. Pick a service which you would would like to migrate

  • Most services should require minimal to no change.
  • You can write services with the future in mind simply by creating an ES6 class to define the service, rather than a function
  • (optionally) re­export the service into Angular 1 using ng­upgrade if it’s still used by other parts of your Angular 1 code.

Angular 1 using ng­upgrade
4. Repeat doing steps in an order convenient for your application development
5. Once no more services/components need to be converted drop the top level Angular 1 bootstrap and replace with Angular 2 bootstrap.

If you are starting a brand new Application:

1. As the web is moving towards ES6, many web development leaders advise to start writing apps in ES6 (or TypeScript)
2. Stay away from $scope.
3. Start matching controllers with directives (by using ‘controllerAs’ and ‘bindToController’ properties in the directive)

BEST NODE.JS PERFORMANCE TIPS YOU CAN ADOPT

Best Node.js Performance Tips You Can Adopt

All of us know about the rapid adoption of JavaScript in the previous decade and major reason behind the popularity of JavaScript is the influence of Node.js. Node.js is the software platform used for building fast, robust and scalable network applications. It is mainly based on Google’s V8 Javascript search engine or the Chrome browser runtime. Node.js features an event­driven architecture and an I/O API that optimizes application scalability. One of the most important feature of Node.js is that it contains built­in library that acts as a web server and there is no need for web server such as IIS or Apache Web Server.

It is perceived that Javascript is the most used language on GitHub. Ryan Dahl, the creator of Node.js says , “ after over twenty years of stateless­web based on the stateless request-response paradigm, we finally have web applications with real time two way connections”. Need for adapting to the new technology of Node.js is actively discussed in global tech community including these prominent performance tips.

Going Asynchronous
Node.js is single threaded and there are lots of synchronous components that can lock up the entire application. It is practical to use an external library that has a blocking call and use of asynchronous API is the best possible solution. While choosing third party modules, it is to be ensured that external library does not revert to synchronous calls.

Keeping Code Small
Keeping code small and light is one of the most talked about node.js performance tips we can adopt. In the contemporary age of critical mobile application performance, it is important to keep Node.js code as compact as possible. Node.js is made compact for reducing latency as well as speeding things up.

Developers of node.js face the following questions during development stage

  • “Do we really need this module”?
  • “Why are we using this framework”?
  • “Is it worth the overhead”?

“Is there another way to optimize application performance by concatenating multiple JS files into one?”­ This statement can be explained with the help of an example. If a web app has five Javascript files, the browser will make five separate HTTP requests to fetch them and the best approach would definitely be to concatenate those five files into a single one.

DO NOT use Node.js for static assets:
Don’t use Nodejs to serve static assets like client JS, CSS, fonts or images. This is not good because Node doesn’t do this efficiently. Say we ask for a reasonably large image file and we’re serving it from a Express mount-point, this works when we’re developing it locally, because it’s just us using it. No load really. Use NGINX or CDN to deliver such static assets to reduce the load on your application server.

Don’t Store Too Much in Sessions
By default in a typical Express web app, the session data is stored in memory. Storing too much data in the session, it adds significant load to the server. Instead storing their id in the session will reduce the load on an app server rather than storing the entire object. So, either you can switch to different storages like MongoDB or Redis to store session data or go session­free with EXPRESS JS.

Here is an example of initializing the session.
app.use(express.session({ secret: “mysterious triangle” }));

Run in Parallel
Generally if we want to run multiple functions at a time, we need to wait for the previous function to execute. So to reduce latency we can go for parallel operations to run. To execute these calls in parallel, we can use Step.JS (A simple control-flow library for node.JS that makes parallel execution, serial execution, and error handling painless). This accepts any number of functions as arguments and runs as the callback to the next step.

Use Client Side Rendering When Possible
DO NOT render (or send) templates from Node JS side. Do it on client side using templating engines like Handlebar. Infact better do it using CDN so it can be cached. For dynamic content (like data), deliver it via JSON. So after the initial page load, the only data sent to the client is the dynamic JSON, which is maximally efficient. This approach dramatically reduces the CPU, IO, and load on Node.js.

Major companies using NODEJS and Why?
Global business giants like PayPal, Yahoo, EBay, Netflix, The Mail Online, and Walmart are betting big on Node.js. Tech giants are passionate of embracing power of Node.js for embedded devices and robotics. Node.js dominates the real time web application arena by using push technology that gives them a distinctive edge over server side web applications.

Chat applications are classic examples of lightweight, real time and data intensive applications of Node.js. It has been debated that two way communication and communication has been there since many years in the form of Java applets or Flash.

The promising technology of Node.js plays a pivotal role in the technology realm of any large business organization. What would be the possible reason? It is only because Node.js allows web developers to build one code base using one language. Performance, scalability, and short web development cycles help Node.js to find a place in the big league of technology innovations in 21st century.

“Node.js powers our web applications and has allowed our teams to move much faster in bringing their designs to life”­ PayPal