Category Archives: UI
LuminJS – How to Highlight Text in HTML Pages
If you have been looking for some utility which could assist in highlighting the text or paragraph on the web or HTML pages, here is a new Javascript kid in the town. It is called as LuminJS. LuminJS is a Javascript library which could help in achieving some of the following objectives: Highlight the text on the web page in an animated manner. One could configure speed and styling (color) of the highlighting. One could create typing effect by making use of colors. Control the text which needs to be highlighted. One could use the progress bar for controlling purpose. Highlight the HTML nodes along with its children nodes. One …
Angular – Create PWA with Angular Material UI/UX
This article represents instructions and concepts related to How to create a Progressive Web Angular App (PWA) with Angular Material. Angular Material represents material design components for Angular apps. Create Progressive Web App (PWA) with Angular The following page represents instructions and related concepts on creating PWAs using different Angular versions such as Angular 4 and Angular 5: How to create PWA using Angular 4 and earlier versions How to create PWA using Angular 5 Why Angular Material Design? Angular PWA can be created with both, Bootstrap as well as Angular Material. From some of the following pages, it looks like Angular Material is preferred choice if you are looking …
Angular – Top 10 Security Best Practices vis-a-vis Security Risks
Are you concerned about security vulnerabilities in your angular app? Have you been wondering whether one or more of your angular apps are at security risks? Your worries regarding potential security bugs in your angular apps are well justified given security threats to web apps in general. This article would help you learn some of the top security best practices for your Angular apps. Some of these best practices may as well be applied for earlier versions of AngularJS. We shall be referring the security best practices in relation to some of the OWASP Top 10 Security Vulnerabilities. Some of the recommendations include out-of-box support from Angular Http utility such as DomSanitizer and HttpClient which is part of Angular 2, Angular 4 and Angular 5. Quick Recall …
Top 10+ Mobile / Web App UI Mockup Tools
If you are looking to create UI mockups for your upcoming mobile / web app, then, here is the the list of top 10+ Mobile / Web app UI mockup tools: JustinMind: A great tool where one can define various mobile gestures / transitions during prototyping and test the look-and-feel using mobile app Axure: Good tool for creating and publishing mockups in collaborative manner Marvel App: Easy to use and cloud-based tool Hotgloo: A UX, wireframe and prototyping tool designed to build wireframes for web, mobile and wearables. Used by companies like Disney, Deloitte, IBM etc. Proto.io: Helps create fully-interactive prototypes that look and work exactly like your app with absolutely no coding required. …
Angular 2 – How to Configure Route Definitions – Part 1
This blog series would be used to describe different techniques which can be used to configure route definitions in Angular apps. The routing can be defined based on following three patterns: Route definitions within AppModule Routing defined as a separate module at app root level Routing module defined within feature modules (recommended for enterprise apps) In this blog, we will learn different aspects related with creating route definitions within AppModule. The most simple way of configuring route definitions is creating route definitions within AppModule file such as app.module.ts which is found at root level. This technique can be used for only learning purpose. When creating complex or enterprise apps, this …
Javascript – Promise Chain Explained with Code Samples
This article represents tips and code samples on How to create and use a Promise Chain objects in Javascript. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Promise Chain Explained with Code Samples Following diagram represents the interaction between signup, Auth and User modules. Pay attention to some of the following in above diagram: Signup module invokes login API on Auth service which returns a Promise object. The Signup completes the sync operation & watches for the Promise returned by Auth service to be resolved. The Login API in turns invokes Get API on User object as a …
Javascript – Jasmine Unit Tests for Promise Object
This article represents tips and code samples in relation with how to write unit tests for Promise object when using Jasmine framework. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Sample Promise Object Unit Tests related with Promise Object Sample Promise Object Pay attention to some of the following in the code below: Auth module returns a Promise object that returns a User object when resolved or returns an error object in case of error. A JSON object is passed to resolve or reject method. Save the file …
Top 4 Javascript Frameworks to Watch out in 2015
This article presents analytics on popular Javascript frameworks and call out top 4 javascript frameworks (event-handling) one should watch out in 2015. From the analysis below, AngularJS Rocks!!! Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the top 7 Javascript frameworks that are considered in this analysis: AngularJS JQuery BackboneJS KnockoutJS ReactJS MeteorJS EmberJS The analytics presents data based on trends captured from Google Trends and Indeed.com job trends. Please feel free to suggest any javascript frameworks that I may have missed. From the analysis below, following are top 4 javascript frameworks that you may want to watch out …
AngularJS QuizApp Framework on Github
This article describes the QuizApp web application written with AngularJS & Bootstrap that I open-sourced it today on GitHub. Here is the link for the QuizApp Project Homepage for you to get started. I have made use of this app in my other website, Free Online Tests and trust me, creating quizzes is so very smooth experience. The primary reason why I decided to make it open-source is the fact that there are several requests that I received in the past for posting the source code. However, as I created the app for my personal usage, I went ahead and modified it suitably for easy re-use. Please feel free to suggest …
AngularJS – Why & How to Create Custom Module
This article represents key concepts and code samples on why and how to create a custom module with AngularJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Why create a custom module? How to create a custom module? Why Create A Custom Module? A module in AngularJS wires together some of the following components: Controllers Directives Filters Service In simple words, a module could also be thought of as container of above components. As per the design, if there is a need to bundle together …
AngularJS – How to Create a Custom Filter – Code Example
This article represents high level concepts and code sample/example for how to create a custom filter. The demo for the code example given below could be found on this following page: How to Create A Custom Filter. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Key aspects of creating a custom filter Code Samples – Custom Filter Key Aspects of Creating Custom Filter Following are some of the key aspects that one needs to pay attention to, while creating a custom filter: To create a new filter, …
AngularJS Directives Hello World – Code Example
This article represents high level concepts and code examples on how to create a custom directive. For detailed documentation, one could access AngularJS page on custom directive. You could check out live demo of the code example in this article on http://hello-angularjs.appspot.com/angularjs-directives-hello-world Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Key aspects of Directive Code Examples – Directives Hello World Key Aspects of Directive The directive discussed in the blog is following: <hello name=”Calvin Hobbes”></hello> Following are some of the key aspects: Define directive. In this …
Sublime – AngularJS – Useful Auto-complete Snippets
This article presents code samples and instructions to configure your Sublime editor to include ng (angular) scripts in auto-complete fashion. I found it important to get quickly started with my new angular apps. Based on following, you could define custom autocomplete snippets for all angular scripts. Following are the steps to create snippet file for each angularjs script: In Sublime Text Editor, go to Tools > New Snippet. A new untitled file consisting of following code would open: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!– Optional: Set a tabTrigger to define how to trigger the snippet –> <!– <tabTrigger>hello</tabTrigger> –> <!– Optional: Set a scope to limit …
AngularJS – How to Pass Parameters to Controllers on Initialization
The article presents quick concepts and code samples on how one could pass the parameters to the controller during bootstrapping process. Feel free to comment/suggest. Usecase: Edit Page to Populate Data Retrieved from Server I came across a use case where I had to edit an existing object. Thus, I was required to populate the input fields with the existing value. When I tried to do in the usual manner which is like retrieving the object from the server and updating each of the input fields with the right value, it didn’t work out. The input fields were not getting the value retrieved from the server. This is primarily because …
ReactJS & Bootstrap UI Template – Code Example
This article represents take away code for working with ReactJS and Bootstrap CSS library. I chose to post it as I need the copy and paste code to get started quickly with every new ReactJS tiny projects and, wanted a place on web which serves my purpose. Pay attention to some of the following: All JS libraries are accessed from CDNs Inclusion of JSX code snipper /** @jsx React.DOM */ <html> <head> <title>Some Title</title> <link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”> <script src=”http://fb.me/react-0.11.1.js”></script> <script src=”http://fb.me/JSXTransformer-0.11.1.js”></script> <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> </head> <body> <div class=”container”> <div class=”page-header”> <h1>Some Heading</h1> </div> <div id=”helloApp”></div> </div> <script type=”text/jsx”> /** @jsx React.DOM */ var HelloApp = React.createClass({ render: function() { return ( …
ReactJS Tutorial – How to Add or Delete Table Row Dynamically
The article represents high-level concepts including component design and event delegation and, demo/code samples in relation with how to add or delete a table row dynamically. For AngularJS enthusiasts, it also presents quick differences and few similarities (so to say) as well. The UI is demonstrated on the following page: http://tuts-javascript.appspot.com/reactjs-add-remove-table-row. Feel free to comment/suggest on any aspects of the article including concepts and code samples. Following is how the design is laid out: CompanyApp: The app has a top-level component named as CompanyApp. This component is composed of following components: CompanyList: CompanyList component represents a list of companies and has code to render the same. Company: Company component represents the company …
I found it very helpful. However the differences are not too understandable for me