Tag Archives: web
Flutter Web App Commands – Cheatsheet
In this post, I will list down some of the key commands (cheatsheet) which can help one build and release web application (app) using Flutter. In order for the following commands to work, follow the steps given below: Install Flutter: Make sure you have installed Flutter. Follow the steps in this page for setting up / installing flutter. Create Flutter Project: Once installed, create a template project for getting started with a project. Use this page for creating a flutter project. Flutter Commands for Web Once flutter is set up and a template project is created, execute the following one-time commands for setting up Flutter web development environment. These commands can be run from anywhere …
How to Upgrade from Angular 5 App to Angular 6
In this post, you will learn about How to update or migrate your Angular 5 app (using Angular 5.1 or Angular 5.2 version) to use Angular 6.0.0. The following are some of the points covered: Pre-requisites Upgrade/Update steps for migrating Angular 5 to Angular 6.0.0 app. Pre-requisites The following needs to be done before you start on the migration: Make sure your NodeJS version is Node 8 or later. Make sure your code used HttpClientModule and the HttpClient service instead of HttpModule and Http service. Make sure to import animation services from @angular/animations rather than @angular/core. Upgrade/update Angular 5.* to Angular 6.0.0 The following commands need to be executed as part of …
Google Recaptcha with Angular and Spring App – Example
In this post, you will learn about how to implement Google Recaptcha with Angular and Spring/Java App. Get Recaptcha code (Key) from Google Angular – Process the Recaptcha code in Login/Sign up Component Spring/Java – RecaptchaVerifier utility class Spring/Java – Verify the Recaptcha Response in Server Side Code Get Recaptcha Code (Secret Keys) from Google Go to Google Recaptcha website and get the code for your website. The Google recaptcha code looks like following: Place the code in appropriate place in login, signup pages. In the login form, it would with code such as following: The Signup form with Google Recaptcha would look like following. The working example can be …
Angular – Http, HttpClient Get API Example with Observable
Observable is one of the most important aspect of reactive programming paradigm which represents the data streams such as variables, user inputs, properties, caches, data structures, server responses etc.. These data streams (or Observable) are listened/observed (you may also read subscribe) in asynchronous manner and reacted appropriately as per the application requirement. Observable emits the following three class of outputs which can be processed asynchronously: Value Error Completion status Different functions can be used to process above mentioned different types of outputs emitted by observable. In this post, we will see the usage of subscribe method to process the value emitted by Observable. On the lighter note, the following comic …
Angular – Promise Explained with Code Example
Promise, in Javascript, is a concept which allows the callee function to send back a promise (sort of assurance) to the caller function that it would, for sure, send back a resolution, be it a success or a failure at a little later point of time. The caller believes the callee if a promise is sent back, and, proceeds ahead with the program execution. On a lighter note, the following comic strip represents the relationship between the caller and callee. As like the below, caller function can believe on callee function sending back Javascript promise object, which does result in the state of either resolution or a rejection (in case …
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 5 – How to Create Progressive Web Apps (PWA)
This article represents steps and instructions on how to create a progressive web app (PWA) using Angular 5. In the previous article, we saw the steps to create PWA with Angular 4 and earlier versions, along with installation pre-requisites and introduction to PWA. This article will refer the previous article at various places. What are Progressive Web Apps (PWA)? Check out the details in my previous article, How to create progressive web app using Angular 4. The following are key requirements of PWA which shall be addressed in this article: Discoverable (Using manifest file) App-like offline experience (Using out-of-box Service-worker) Installation pre-requisites Install Lightspeed Chrome plugin for testing the aspects …
Angular – How to Search or Filter Table by Column
This article represents concepts and code samples in relation to filtering or searching table by one or more column data when working with Angular (Angular 2.*, Angular 4.* Angular 5.*). One can achieve the search/filter table by column functionality by creating custom pipes. Although Angular recommends it by handling the logic in services, one can always create custom pipes as shown in this article. The following topic is discussed later in this article: No Out-of-box support for Filter or OrderBy in Angular How to create search filter for filtering table by column The details on creating custom pipes can be read from this page, Angular Pipes. No Out-of-box support for Filter or OrderBy in Angular Unlike AngularJS, …
Spring Framework Interview Questions & Answers – Set 1
This is a practice test / interview questions and answers for Java Developers working on Spring Framework. These questions can be used to check your knowledge on Spring framework fundamentals. They could be useful and helpful in preparing you for upcoming interview in relation with Spring framework. The following are some of the topics in relation with Spring Framework Fundamentals which are covered in this practice test: Spring IOC concepts Configuration metadata Beans packages for IOC container Beans instantiation Different types of DI techniques (Constructor-based, Setter-based DI) Beans initialization (Eager / lazy initialization) Method injection techniques (lookup method, arbitrary method injection) Bean Scopes (Singleton, Prototype, Request, Session, Application, WebSocket) Practice Test on Spring Framework Fundamentals [wp_quiz id=”6035″]
List of Facebook Opensource Projects
This page lists down high level summary of facebook open-source projects in the field of web and mobile technologies along with links for relevant pages. This information is intended to be useful and helpful for mobile and web (Javascript) developers. Facebook Open-source Projects Facebook has open-source projects in some of the following areas: Android (React Native, redex, buck, rebound, makeitopen, Fresco, Stetho, Infer) iOS (React Native, pop, Shimmer for iOS, buck, ComponentKit, FBMemoryProfiler, FBRetainCycleDetector, FBAllocationTracker) Web (React, HHVM, Parse Server, flow, Nuclide, Flux, rebound, huxley) Backend (HHVM, Parse Server, presto, GraphQL, osquery, rocksdb, haxl, parse-dashboard) Hardware (fboss, fbtftp) Pages / Links for Facebook projects Here are some links where you …
Spring Boot App on Google App Engine Standard Environment
This blog represents tips and techniques on how to deploy a Spring Boot app on Google App Engine standard environment. Create a Google AppEngine (GAE) Project Login into Google Cloud Console and create an AppEngine project. Configure GCloud Setup In order to upload GAE project from command prompt, the GCLoud setup needs to be configured. Execute following command from the command prompt to start configuring your appengine project: Do some of the following while configuring the setup: Select a new configuration; Enter the configuration name Login into your cloud account Successful login will list down existing Google Appengine (GAE) project. Pick the one which you created from the cloud console. …
Angular – How to Create Your First Angular App
This blog represents concepts and commands which would help you setup development environment to build Angular apps. Introduction to Angular CLI Angular CLI is a command line interface for Angular. With Angular CLI commands, the following are some of the key functionality which can be achieved using Angular CLI commands: Create an application that follows best practices recommended by Angular. ng new command is used. Test the app locally as you develop. ng serve is used. Greater details can be found on this page, Angular CLI. The documentation in relation with Angular CLI can be found on this page, Angular CLI Documentation. Install the Angular CLI The following command can …
Spring Boot with JSP Pages – Code Example
Following needs to be done to setup Spring boot web app with JSP pages Create a Spring Starter Project Create a Spring Starter Project by selecting “Web” as one of the dependencies. This will create a Springboot project. POM.xml Entries Place following entries in pom.xml for processing JSP pages Configuration in application.properties Place following configuration in application.properties Create Controller class Create a sample controller class such as following: Create JSP pages Create a folder src/main/webapp/WEB-INF/views Create a file index.jsp. Place the content such as following: Run Project as Spring Boot App Access URL such as http://localhost:8080/ in browser. Following would be displayed.
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 …
ReactJS – Online Playground for JSX-HTML Expertise
This article represents quick introduction to online playground for JSX to HTML conversion and vice-versa. Very handy for those, especially the Javascript beginners, to get a hang on component-oriented programming related with ReactJS which is at the heart of it. 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: HTML to JSX Compiler JSX to HTML Compiler Following are two online tool or playground to enhance familiarity with JSX. HTML to JSX Compiler: This Online playground for HTML-JSX compiler would help you to write HTML on one end, …
Javascript Frameworks Job Pattern with IT Companies in India
This article represents my analysis on job patterns vis-a-vis javascript frameworks with IT companies in India. This may also be read as a pattern of adoption of JS frameworks by developers community with IT companies in India. The analysis has been done based on number of job openings related with below listed JS frameworks, posted last month e.g., octobar 2014, on one of the topmost job portal catering to Indian IT market. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are top 7 javascript frameworks which are most seeked after skillsets in potential UI related candidates, from …
I found it very helpful. However the differences are not too understandable for me