Angular has recently rolled out its latest update – Angular 17 which is more than just an incremental update. Angular 17 has taken a bold leap forward by refactoring the narrative with lightning-fast performance, developer-centric features, and a fresh new identity. Let’s dive into its amazing updates:
Angular 17 isn’t messing around when it comes to speed. Say goodbye to laggy loading times and unresponsive UI. With the help of Deferrable Views, Angular now allows dynamic loading of components, saving around 90% off runtime! This means smoother animations, instant responsiveness, and a user experience that will leave your audience with a smile.
And the speed boost doesn’t stop there. The new built-in control flow syntax in Angular 17, eliminates the need for third-party libraries, resulting in up to 87% faster builds for hybrid rendering and 67% for client-side rendering. Developers now can spend less time waiting and more time creating.
Control flow just got optimized. Forget clunky directives and leverage the elegance of native-like if, else, and for loops within your templates. This long-awaited feature in Angular 17 enhances readability, simplifies logic, and makes your code organized.
Angular 17 doesn’t just speed things up; it also cleans things up. The newly revamped website, Angular.dev, reflects the framework’s modern spirit with a sleek design and intuitive navigation. It’s your one-stop shop for documentation, learning resources, and a thriving community.
Angular 17 brings in inclusivity with an interactive learning journey tailored for diverse learning styles. Whether you’re a seasoned pro or a curious beginner, this personalized path ensures you level up your Angular skills at your own pace.
The list of updates doesn’t end there. View transitions API support unlocks stunning animation possibilities, while improved SSR (Server-side Rendering) boosts SEO and first-load performance. The cherry on top? A plethora of smaller enhancements and bug fixes polish the overall experience.
Angular 17 isn’t just about the present; it’s a stepping stone towards a brighter future. The team’s commitment to performance optimizations, developer experience, and accessibility paves the way for even more exciting iterations to come.
Angular 17 is a proof to the Angular framework’s unwavering commitment to pushing boundaries. It’s not just a technology upgrade; it’s a tech revolution. It’s about building faster, building smarter, and building with developer delight at the core.
So, should you upgrade to Angular 17? The answer is a resounding yes! Whether you’re building a new project or breathing life into an existing one, v17 offers undeniable advantages. Experience the speed, the finesse, the joy of development – experience the all new Angular 17.
For more information & to develop Web Application using Angular, visit our Hire Angular Developer page. At HK Infosoft, we are destined to provide you with an innovative solution using the latest technology stacks. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
Content Source:
Over the past year, the team has removed Angular’s legacy compiler and rendering pipeline which enabled the development of a series of developer experience improvements in the past couple of months. Angular v15 is the culmination of this with dozens of refinements that lead to better developer experience and performance.
In v14 they introduced new standalone APIs which enable developers to build applications without using NgModules. they’re happy to share that these APIs graduated from developer preview and are now part of the stable API surface. From here on they will evolve them gradually following semantic versioning.
As part of making sure standalone APIs were ready to graduate they have ensured that standalone components work across Angular, and they now fully work in HttpClient, Angular Elements, router and more.
The standalone APIs allow you to bootstrap an application using a single component:
import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';
@Component({
standalone: true,
selector: 'photo-gallery',
imports: [ImageGridComponent],
template: `
… <image-grid [images]="imageList"></image-grid>
`,
})
export class PhotoGalleryComponent {
// component logic
}
bootstrapApplication(PhotoGalleryComponent);
You can build a multi-route application using the new router standalone APIs! To declare the root route you can use the following:
export const appRoutes: Routes = [{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.routes')
.then(routes => routes.lazyRoutes)
}];
Where lazyRoutes are declared in:
import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];
and finally, register the appRoutes in the bootstrapApplication call:
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes)
]
});
Another benefit of the provideRouter API is that it’s tree-shakable! Bundlers can remove unused features of the router at build-time. In their testing with the new API, they found that removing these unused features from the bundle resulted in an 11% reduction in the size of the router code in the application bundle.
The directive composition API brings code reuse to another level! This feature was inspired by the most popular feature request on GitHub asking for the functionality to add directives to a host element.
The directive composition API enables developers to enhance host elements with directives and equips Angular with a powerful code reuse strategy, that’s only possible thanks to their compiler. The directive composition API only works with standalone directives.
Let’s look at a quick example:
@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}
In the code snippet above they enhanced MatMenu with two directives: HasColor and CdkMenu. MatMenu reuses all the inputs, outputs, and associated logic with HasColors and only the logic and the selected inputs from CdkMenu.
This technique may remind you of multiple inheritance or traits in some programming languages, with the difference that they have a mechanism for resolution of name conflicts and it’s applicable to user interface primitives.
They announced developer preview of the Angular image directive that they developed in collaboration with Chrome Aurora in v14.2.
Pic courtesy: medium.com
Before and after of a demo application
The’re excited to share that it is now stable! Land’s End experimented with this feature and observed 75% improvement in LCP in a lighthouse lab test.
The v15 release also includes a few new features for the image directive:
You can use the standalone NgOptimizedImage directive directly in your component or NgModule:
import { NgOptimizedImage } from '@angular/common';
// Include it into the necessary NgModule
@NgModule({
imports: [NgOptimizedImage],
})
class AppModule {}
// ... or a standalone Component
@Component({
standalone: true
imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}
To use it within a component just replace the image’s src attribute with ngSrc and make sure you specify the priority attribute for your LCP images.
Together with the tree-shakable standalone router APIs they worked on reducing boilerplate in guards. Let’s look at an example where they define a guard which verifies if the user is logged in:
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
}
}
const route = {
path: 'somePath',
canActivate: [MyGuardWithDependency]
};
LoginService implements most of the logic and in the guard we only invoke isLoggedIn(). Even though the guard is pretty simple, they have lots of boilerplate code.
With the new functional router guards, you can refactor this code down to:
const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};
They expressed the entire guard within the guard declaration. Functional guards are also composable — you can create factory-like functions that accept a configuration and return a guard or resolver function.
To make the router simpler and reduce boilerplate further, the router now auto-unwraps default exports when lazy loading.
Let’s suppose you have the following LazyComponent:
@Component({
standalone: true,
template: '...'
})
export default class LazyComponent { ... }
Before this change, to lazy load a standalone component you had to:
{
path: 'lazy',
loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}
Now the router will look for a default export and if it finds it, use it automatically, which simplifies the route declaration to:
{
path: 'lazy',
loadComponent: () => import('./lazy-file'),
}
The team gets lots of insights from their annual developer surveys so they want to thank you for taking the time to share your thoughts! Digging deeper into the struggles with debugging experience developers face they found that error messages could use some improvement.
Pic courtesy: medium.com
Debugging struggles for Angular developers
They partnered with Chrome DevTools to fix this! Let’s look at a sample stack trace that you may get working on an Angular app:
ERROR Error: Uncaught (in promise): Error Error at app.component.ts:18:11 at Generator.next (<anonymous>) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:25:1) at _ZoneDelegate.invoke (zone.js:372:26) at Object.onInvoke (core.mjs:26378:33) at _ZoneDelegate.invoke (zone.js:371:52) at Zone.run (zone.js:134:43) at zone.js:1275:36 at _ZoneDelegate.invokeTask (zone.js:406:31) at resolvePromise (zone.js:1211:31) at zone.js:1118:17 at zone.js:1134:33
This snippet suffers from two main problems:
The Chrome DevTools team created a mechanism to ignore scripts coming from node_modules by annotating source maps via the Angular CLI. They also collaborated on an async stack tagging API which allowed them to concatenate independent, scheduled async tasks into a single stack trace. Jia Li integrated Zone.js with the async stack tagging API, which allowed them to provide linked stack traces.
These two changes dramatically improve the stack traces developers see in Chrome DevTools:
ERROR Error: Uncaught (in promise): Error Error at app.component.ts:18:11 at fetch (async) at (anonymous) (app.component.ts:4) at request (app.component.ts:4) at (anonymous) (app.component.ts:17) at submit (app.component.ts:15) at AppComponent_click_3_listener (app.component.html:4)
Here you can follow the execution from the button press in the AppComponent all the way to the error.
They’re happy to announce the refactoring of the Angular material components based on Material Design Components for Web (MDC) is now done! This change allows Angular to align even closer to the Material Design specification, reuse code from primitives developed by the Material Design team, and enable us to adopt Material 3 once they finalize the style tokens.
For many of the components they’ve updated the styles and the DOM structure and others they rewrote from scratch. They kept most of the TypeScript APIs and component/directive selectors for the new components identical to the old implementation.
They migrated thousands of Google projects which allowed us to make the external migration path smooth and document a comprehensive list of the changes in all the components.
Due to the new DOM and CSS, you will likely find that some styles in your application need to be adjusted, particularly if your CSS is overriding styles on internal elements on any of the migrated components.
The old implementation of each new component is now deprecated, but still available from a “legacy” import. For example, you can import the old mat-button implementation by importing the legacy button module.
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
Visit the migration guide for more information.
They moved many of the components to use design tokens and CSS variables under the hood, which will provide a smooth path for applications to adopt Material 3 component styles.
They resolved the 4th most upvoted issue — range selection support in the slider.
To get a range input use:
&lt;mat-slider&gt; &lt;input matSliderStartThumb&gt; &lt;input matSliderEndThumb&gt; &lt;/mat-slider&gt;
Additionally, all components now have an API to customize density which resolved another popular GitHub issue.
You can now specify the default density across all of your components by customizing your theme:
@use '@angular/material' as mat; $theme: mat.define-light-theme(( color: ( primary: mat.define-palette(mat.$red-palette), accent: mat.define-palette(mat.$blue-palette), ), typography: mat.define-typography-config(), density: -2, )); @include mat.all-component-themes($theme);
The new versions of the components include a wide range of accessibility improvements, including better contrast ratios, increased touch target sizes, and refined ARIA semantics.
The Component Dev Kit (CDK) offers a set of behavior primitives for building UI components. In v15 they introduced another primitive that you can customize for your use case — the CDK listbox:
Pic courtesy: medium.com
The @angular/cdk/listbox module provides directives to help create custom listbox interactions based on the WAI ARIA listbox pattern.
By using @angular/cdk/listbox you get all the expected behaviors for an accessible experience, including bidi layout support, keyboard interaction, and focus management. All directives apply their associated ARIA roles to their host element.
Pic courtesy: medium.com
In v14 they announced the experimental support for esbuild in ng build to enable faster build times and simplify our pipeline.
In v15 they now have experimental Sass, SVG template, file replacement , and ng build –watchsupport! Please give esbuild a try by updating your builders angular.json from:
"builder": "@angular-devkit/build-angular:browser"
to:
"builder": "@angular-devkit/build-angular:browser-esbuild"
If you encounter any issues with your production builds, let us know by filing an issue on GitHub.
The language service now can automatically import components that you’re using in a template but haven’t added to a standalone component or an NgModule.
Pic courtesy: medium.com
In the Angular CLI they introduced support for standalone stable APIs. Now you can generate a new standalone component via ng g component –standalone.
They’re also on a mission to simplify the output of ng new. As a first step they reduced the configuration by removing test.ts, polyfills.ts, and environments. You can now specify your polyfills directly in angular.json in the polyfills section:
"polyfills": [ "zone.js" ]
To reduce configuration overhead further, they now use .browserlist to allow you define the target ECMAScript version.
For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
To develop your custom web app using Angular, please visit our technology page.
Content Source:
Angular is a TypeScript-based free and open-source web application framework. It is a complete rewrite of AngularJS.
This article outlines a few of the standards and best practices of Angular that you could use and experience when developing the applications.
Let’s go through this one by one!
Typescript is a type-checking language. But there may be some instances like where you need dynamic contents, where you don’t know the exact data type of some variables etc. In such cases, you can use the data type ‘any’ to tell typescript that the variable can be of any type.
But using ‘any’ always is not a good practice. Using ‘any’ tells the typescript to skip the type checking. This may expose your code to issues that are difficult to trace and debug which will cost you a lot.
You can minimize these issues by trying to declare variables or constants with a type other than ‘any’ whenever possible.
Another advantage of having good and proper type declarations in the application is that it makes refactoring easier.
A template in an angular application defines the component’s view. It is very important to keep them neat and understandable.
If you add logic in the template, it becomes difficult for unit testing and will lead the application more prone to bugs. Even if you have a simple logic in your template, it is better to extract it out into its component.
Linting forces an application codebase to be cleaner and more consistent. Lint rules will ensure the readability of the code. Having lint rules will give a nice error when you do something that you should not be. It is widely supported across all modern editors and also possible to customize with your own lint rules and configurations. You can apply lint rules for Typescript and SCSS.
Before Angular 11, linting was supported via a library called TSLint. However, the TSLint has been deprecated. Fortunately, thanks to tools from the Angular ecosystem, migrating to ESLint has become easier.
ESLint is compatible with both JavaScript and TypeScript. This makes jumping between the two languages a bit easier, especially for new developers.
tslint, eslint and stylelint have many inbuilt options.
Some lint rules even come with fixes to resolve the lint error.
If there are parts which you need in many places in the code in the application, extract the parts which can be reused in the component and make it a new one. Make the component as dumb as possible where the component does not contain any special logic in it and operates purely based on the inputs and outputs provided to it.
As a general rule, the last child in the component tree will be the dumbest of all. (You may have to use property and event bindings to pass inputs to the components and receive output events from the components, respectively.)
This will be very effective for many reasons.
If the UI has to be changed at any point, there is no need of going around and changing the UI code in all the places where it is used. Instead, you can change the code in the common component created.
Also, It is very difficult to debug, manage and test Large components. So If the component becomes large, break it down into more reusable smaller components, so that you can easily manage, maintain and debug with less effort. Reusable components reduce duplication of code, therefore, making it easier to maintain and make changes.
Pic courtesy: medium.com
The same developers will not always be involved continuously with the same project they work on. So always document the code as much as possible. It will help the new developers involved in a project to understand its logic and increase readability.
For methods, you need to define them using multi-line comments on what task the method actually performs and all parameters should be explained.
The default environments in angular are development and production environments. Angular has different environment configurations to declare individual variables for each of the different types of environments. It is possible to even add more environments, or add new variables in existing environment files.
E.g:
Dev environment -> environment.ts
Production environment -> environment.prod.ts
The environment variables are applied automatically from the specified environment file during the application build.
Always try to define small functions which would have a limit of no more than 75 lines.
Advantages of using small functions are that it is easier to test and reuse since they may probably do one thing and serve one purpose. Also they are easier to maintain and read.
Creating and Maintaining a proper folder structure is an important factor developers should consider before initiating any angular project. The folder structure should be easily flexible to adapt new changes throughout development.
Below image shows one of such example folder structure.
Pic courtesy: medium.com
It is better to follow a set of rules as much as possible in order to have the project with the proper coding standard and a best user experience. Here are a few out of them.
Lazy loading is the process which loads some features of the Angular application only when their routes are navigated for the first time. Lazy loading will load something only when it is used. This helps to improve the application’s performance and helps keep initial bundle sizes smaller, which can decrease the application load time by not loading the modules that are not used.
So, try to lazy load the modules in an Angular application whenever possible.
For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
To develop your custom web app using Angular, please visit our technology page.
Content Source:
The new release of Google’s popular TypeScript-based web framework is available now.
This post will bring you closer to the most important new features and breaking changes in Angular 13 and help you decide whether an update for your project is worthwhile.
Angular has introduced its next-generation compilation and rendering pipeline Ivy since its version 8. Angular 9 has used Ivy by default while maintaining support for the predecessor compiler and runtime View Engine.
The new version of the framework is now 100 percent Ivy.
To streamline and modernize the Angular Package Format (APF), View Engine specific metadata and older output formats are now removed, which will reduce maintenance costs and the complexity of the codebase in Angular 13. All internal tools are converted to Ivy beforehand so that the change should work smoothly.
Ivy compiles individual components more independently of one another, which improves development times. The use of ngcc (Angular compatibility compiler) is no more required for libraries built with the latest version of the APF. This will offer a faster execution for libraries developers.
The load time is reduced in Angular 13 with the help of ergonomic code-splitting APIs and granular code breakdown at a component level.
A performance improvement was also achieved with the introduction of ESBuild, an extremely fast JavaScript bundler. ESBuild works now with terser to optimize global scripts and supports CSS sourcemaps, which enables optimized global CSS.
The time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps.
Pic courtesy: betterprogramming.pub
To benefit from native web APIs and modern browser features such as web animations and CSS variables, the Angular team has removed the Internet Explorer 11 support.
This offers a smaller bundle size and faster load for apps and an improved user experience because of the absence of IE-specific polyfills and the no need for differential loading.
This breaking change will certainly affect authorities or institutions that still use IE 11 and have not yet switched to Microsoft Edge or other modern browsers.
You can now create dynamic components with less boilerplate code thanks to an improvement of ViewContainerRef.createComponent API.
Here is the old way of creating a dynamic component:
export class InquiryDialog implements OnInit {
componentRef: ComponentRef;
@ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;
constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData, private componentFactoryResolver: ComponentFactoryResolver) {}
ngOnInit(): void {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.inquiryPageComponent);
this.componentRef = this.container.createComponent(componentFactory);
}
}
And with Angular 13, there is no need to use ComponentFactoryResolver:
export class InquiryDialog implements OnInit {
componentRef: ComponentRef;
@ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;
constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData) {}
ngOnInit(): void {
this.componentRef = this.container.createComponent(this.data.inquiryPageComponent);
}
}
Angular 13 way of creating a dynamic component
TestBed is the primary unit tests API for Angular applications and libraries.
In order to decrease the test time in TestBed, the new version is released with an improved test API. The framework can now set up and tear down the test environment and learn the DOM automatically after each test run. This leads to faster, less memory-intensive, and better-isolated tests.
Angular 13 has introduced a new type for forms, which is FormControlStatus. It’s a union of all possible status strings for form controls:
There is an Accessibility (A11y) improvement in Angular Material: all Material Design Components (MDC) have been checked for better Accessibility.
Checkboxes and radio buttons, for example, have now larger touch sizes, and other components have better high contrast modes.
A comparison of touch target sizes. The sizes on the right are the new sizes.
A comparison of touch target sizes. The sizes on the right are the new sizes.
Pic courtesy: betterprogramming.pub
For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
To develop your custom web app using Angular, please visit our technology page.
Content Source:
Angular keeps growing in adoption and keeps becoming every day more popular among Frontend implementations.
In this brief guide, we will have a look around some of the greatest and most popular UI kits and frameworks, trying to understand which one of those could be the right choice for your next project.
Angular Material is considered today one of the most popular UI kit for Angular, probably the most one, despite its root feature that makes it anchored to the material design style, which could be not good for everyone. With more than 22k stars on GitHub, this kit is proving its so much beloved by developers and guarantees good community support that keeps posting and discussing bugs, features to integrate, eventually performances issues, and more.
Pic courtesy: betterprogramming.pub
Good to develop a CRM or an admin software, very bad for general-purpose Front end needings. Still missing good documentation and the material look-and-feel could not be good for everyone. Found it very stable: use it and don’t pretend to customize it a lot, because despite the CDK it will drive you mad as hell.
Defined as “Bootstrap widgets — The angular way” by its authors, the Ng-bootstrap UI kit has been popular for a lot and was one of the first kits available around.
The anthem has been “let’s replicate Bootstrap features and make them all available to Angular”. The result is a good basic UI kit without complaints, but really essential. Some components are a bit inadequate compared to the original ones and the documentation is very concise. A good choice if you need the “basic bootstrap”, but not much more.
Pic courtesy: betterprogramming.pub
Ng-bootstrap is a good kit if you need plain Bootstrap features, not useful if you need more. Today it’s suffering the Ngx library as a rival, but Ngx is more complete, newer, and even more professional in some cases, so let’s choose this if you don’t need much.
This recent UI kit designed by Valor Software is becoming rapidly popular and lives on the “Develop faster and better” motto. Could sound like an Ng-bootstrap clone and it could be considered something similar, but the truth is that this one is completely redesigned and provides better features and advanced components.
Supports Bootstrap 3, 4, and even the 5th version proving that this library provides a good supporting community and that is often updated.
Pic courtesy: betterprogramming.pub
To me, Ngx is the best Bootstrap-based UI Kit. Very solid, very comprehensive documentation, and never had issues. Consider this one to be the basic standard for modern web apps. If you miss something, just integrate. This is a real bootstrap to me.
Yet another Bootstrap-based UI kit, MDBootstrap is a HUGE kit and is almost the quintessential of UI components for Angular, providing really everything for any need.
It’s the only one that comes with a CLI, premium support, and which looks like a “professional” tool. But other than that the result is not much satisfying. I found it really messy, really heavy, and hard to set up.
Pic courtesy: betterprogramming.pub
I’ve had a brief experience with this and it just didn’t fit my needings. Could be a good choice if you want to invest some time to really understand it and to adopt it as a “company standard” development process, not really suited for spare developers or Open source projects. Too complex and too less immediate, it feels like working with a “big Java framework” more than a UI Kit for angular.
The IBM’s solution for Front end needings: this UI kit looks enterprise, professional, and even beautiful. Carbon didn’t become a real breakthrough in the UI kits panorama and competition, but it’s worth trying.
The documentation is superb, covering really a lot of aspects about components implementations.
Pic courtesy: betterprogramming.pub
The Carbon IBM’s solution looks very fascinating and charming but must be considered an advanced tool which could not suit your needings. There are many projects where you really don’t need that much technique and its complexity will force you to spend some hours to really understand approaches and mechanisms. Give it a try if you need an enterprise tool.
For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
To develop your custom web app using Angular, please visit our technology page.
Content Source:
Organic traffic is a great way to get eyeballs on your website and Google is the most popular search engine of choice that you can use to get that organic traffic coming.
Although Google ranks your site based on a lot of metrics, how fast your website loads is one of the critical factors.
Websites that load quickly are not just great for rankings but also for the overall user experience.
Since most of us developers( especially indie developers) are using JavaScript frameworks, such as React and Angular, which probably do a client-side rendering of data, the speed at which data is fetched forms an important aspect of the development process.
There is a simple way of making your site load faster, and that is caching and CDN(Content Delivery Network).
Using a combination of both can lead to miraculous drops in time taken to load the first byte.
In this blog, I will demonstrate caching with an example using Redis and also explain what is CDN.
Caching, in layman’s language, is storing data that you think might be used frequently into memory(called cache).
So the next time you need that data, you check whether it’s stored in the memory and if not, then you make a call to the database to fetch it and maybe store it into the cache for future use.
Pic courtesy: javascript.plainenglish.io
As you can see from the image above, caching is simply a layer of a data structure containing frequently accessed data between your data source and the app.
Not all data needs to be cached. For example, a user’s personal setting or shouldn’t be cached on the server. However, you can always store them in the client’s local storage for faster access.
Caching of data is one of the simplest ways to reduce the load time, at the same time, you have to be smart about how you cache your data.
As stated before, frequently accessed data should be cached to provide a responsive and quick experience.
Different developers have different caching strategies depending on their preferences and needs. If you want me to cover various common caching strategies, then drop a response to this blog.
Below are some examples of items that you should cache:
Authorization & Session Tokens
Landing page data that doesn’t change often(such as recent projects in a portfolio site).
Blog and post drafts can be stored in cache for a while and then inserted into the database after a fixed amount of time.
Real-time comment streams & analytics.
Although you are free to use whatever option you are comfortable with, I highly recommend at least checking Redis out.
Redis is an open-sourced in-memory data structure store that has familiar data types such as lists, dictionaries, strings, hashes, etc.
It is a key-value data store with extended abilities such as the ability to set expiry dates.
Redis is the most loved database as per the Stack Overflow 2021 survey.
AWS’s MemoryDB for Redis is a great choice if you need a durable transactional log that stores data across multiple Availability Zones.
Installing Redis is incredibly straightforward if you are on Linux.
Head over to the Redis download page and download the latest stable version available or you can simply run the following command in your terminal:
sudo apt-get install redis
Once you are done installing Redis, simply type redis-server to spin up a Redis server. The default port of this server is port 6379.
However, if you are on Windows, there are two options.
You can either follow the simple guide on how to install an outdated Redis on your Windows machine or you can use Windows Subsystem for Linux(WSL) and get the latest Redis.
I personally went with the WSL way and it created an Ubuntu 20.04 system for me to install Redis and any other packages I might need in the future.
There are plenty of guides available online on how to get started with Redis, hence I will just be providing a demo of what Redis can do to speed up your website.
I will be creating a simple Node.js server that fetches some data from the web and then sends them to its clients and later we will be adding caching to it and see the massive difference.
Below is a server that simply fetches the data from a data source and then passes it along to the client.
const express = require('express');
const app = express();
const redis = require('redis');
const fetch = require('cross-fetch');
const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
await fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(json => {
console.log('Newly fetched data')
return res.json({ data: json });
})
});
app.listen(3000, () => console.log('listening on port 3000'));
You can see the response time in the image attached below:
Pic courtesy: javascript.plainenglish.io
Now we will implement caching using Redis.
First of all, we need an npm package.
npm i --save redis
Once this is installed, we will import it into our server.js file & create a client.
const redis = require('redis');
const cacheClient = redis.createClient(); // => Redis client
We need to edit our app.get() function and add caching logic to it.
It’s simple if-else logic. We first check if the data is present in our Redis server or not by calling the Redis client and using the .get() to get data.
If the data is not present, then we make a call to our data source to get fresh data. We insert this data into our Redis store by calling the .setex() function on our Redis client.
cacheClient.setex('sample',60,JSON.stringify(json));
The first parameter is the name(key) of the data we want to store, followed by the time to expire, and then finally the actual data(value) goes in as the third parameter.
We are using JSON.stringify() method to convert our JSON data to a string data type.
With the data stored in the Redis store, the next time the app.get(‘/’) function is called, the client will be able to fetch the data from the Redis server instead of fetching from our original data source.
Pic courtesy: javascript.plainenglish.io
With this implemented, we can instantly see amazing results as the time taken is just 52ms compared to 1301ms from before.
This was a very simplistic view of caching and Redis is capable of much more than caching and can even be used as a permanent storage option.
Our final server.js file will look like this:
const express = require('express')
const app = express();
const redis = require('redis');
const fetch = require('cross-fetch');
const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
await cacheClient.get('sample', async (err, data) => {
if (err) console.error(err);
if (data) {
console.log('Data was cached before')
return res.json({ data: JSON.parse(data) });
}
else
await fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(json => {
console.log('Newly fetched data')
cacheClient.setex('sample',
60,
JSON.stringify(json));
return res.json({ data: json });
})
})
});
app.listen(3000, () => console.log('listening on port 3000'));
Caching data on the server is surely a great improvement but what about caching large HTML, video & image files?
CDN provides a simple solution to this issue. It is important to know that CDN and caching are not the same.
While CDN does cache content, not everything that cache data can be called a CDN.
CDN refers to a geographically distributed group of servers that work together to provide fast delivery of sites & other assets(like image & video files).
Popular sites such as Netflix and Facebook leverage the benefits of the CDN and deliver content quickly to you using the nearest group of servers near you.
Pic courtesy: javascript.plainenglish.io
CDN stores a cached copy of your content in multiple locations throughout the world.
So if someone from Australia visits your UK-hosted site, they will instead visit the nearest CDN server available to Australia and get a cached copy of your UK-hosted site.
This also saves bandwidth costs and increases reliability & uptime.
In some platforms and hosts, a CDN is at your disposal by default, and generally, using it is as simple as adding a header to your HTML file.
Personally, in my experience, I have found Vercel’s CDN to be the simplest to use with a good, detailed guide with a useful feature that prevents your data from being stale(outdated).
In Vercel, you just need to add a header to inform the CDN that the site needs to be cached. An example header is given below:
Cache-Control: s-maxage=1
It is worth noting that any data that you load client side will not be included in your site’s cached CDN copy. This is because the data is loaded dynamically on the client-side and not server-rendered.
However, you can always cache the data that is being loaded on the client-side via Redis, CDN, or any other option available to make the dynamic loading faster.
For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop your custom web app using JavaScript, please visit our technology page.
As the world leans more towards digital technologies, as more businesses focus on online and physical presence, and as content continues to dominate, web development becomes even more essential.
Accordingly, one of the best programming languages for better frontend development is JavaScript. That’s why, today, we want to show you some of the top JavaScript trends that can help boost your web application’s success.
Dark mode has been one of the recent web development trends that have been blowing up everywhere. As a result, almost all popular apps can switch to a dark mode or stick with the standard light mode.
Moreover, since it uses less color and brightness, the dark mode also helps preserve the battery and makes it last longer. Some people also claim that dark selection can be beneficial for specific visual impairments. For web designers, the dark mode also allows them to use colors more creatively, as the black background of the dark option can help colors stand out even more.
Using this script snippet results in the widget appearing on your site automatically so that users can conveniently switch between their preferred themes. The plugin is relatively lightweight, and since it uses local storage, it will remember and save the last chosen theme.
Another JavaScript trend that remains on top for a few years and is gradually garnering more popularity is React.js. React is an open source, frontend, and entirely free JavaScript library for developing smooth and effective user interfaces, especially for single-page apps.
Facebook developed the React library several years ago and has built it into one of the most popular JavaScript libraries for frontend developers. In 2020, 80% of front-end developers were using React only. In addition, many companies like WhatsApp and Airbnb have taken on this library as well.
The reason behind this is that React offers a lot of convenience and benefits for today’s developers. The programming library is easy to learn and even easier to use. It comes with many tutorials and documents explaining how to utilize the library best.
If you are already skilled in JavaScript, picking up React will be no trouble at all, and you will find yourself easily using it within a few days. React also comes with a lot of reusable components, which are a lifesaver for any developer.
The JavaScript framework uses small user interface components, which you can use to create more prominent parts or reuse again to save your time and efforts. All the pieces have their logic, and they can control their rendering, which allows you to use them again wherever and whenever you need them quickly.
Convenience is important to me. It helps me navigate the flow more efficiently. How about you?
All this makes it easy to develop and maintain apps. In addition, since you are reusing the same essential components, you can keep your projects’ same feel and look. Other popular libraries besides React include Angular, Vue, and Svelte.
A better user experience does not just include a smooth and fast website. It also contains a unique and creatively designed website and what better way to show off your creativity than through animations.
Animations can make your website visually striking and keep visitors hooked on your page. They can help differentiate your website from all the usual static websites. If you think you need to go out and do some special courses on animation, we’ve got some good news.
JavaScript has several libraries that allow you to integrate animations on your website easily. These libraries include anime.js and JSTweener. You can input these into your website code, customize the code, and voila! Your animations are ready.
Especially if you are running a business or have a product checkout page on your website, employing data visualization tools can significantly help you in many ways. First, it can improve the user interface and experience by filling out fields quickly and accurately.
As a result, the whole checkout experience for visitors and potential customers becomes much more accessible and makes them more willing to follow through on their purchases. Due to all these benefits, data visualization is a big trend within JavaScript for business and marketing purposes.
All you need is a little <input />
One specific library that is quite useful is Algolia Places. It allows you to create much more efficient forms, which help inaccurate data input and quick form filling. In addition, you can incorporate a map that will conveniently display a specific location for better data visualization.
Algolia Places uses OpenStreetMap’s extensive database and is incredibly fast to use. In addition, it can handle some typing mistakes and simplifies the entire checkout process for users.
Incorporating full-screen videos on your webpage is one of the most popular JavaScript trends developers utilize these days. Again, rather than creating an essential static website, incorporating dynamic videos and GIFs can help make your website more interactive and offer a better user experience.
A better user experience, then, can help drive more traffic to your website, making it easy to push your content, raise awareness about your brand and increase your ROI for your marketing and business objectives. But, how can you add full-screen videos to your website?
JavaScript offers a great resource: Bideo.js. This library makes it super easy to add full-screen videos to your website’s background. While it takes a while to load, you do not have to write endless code to incorporate the video smoothly.
The library has everything you need to add the videos along with several customization options quickly. The code works great for screens of all sizes and various platforms as well. This JavaScript tool can help play high-quality and engaging videos smoothly in the background, whether a computer or mobile. You can resize the video according to the browser, and it is also easy to implement using CSS or HTML.
For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop your custom web app using JavaScript, please visit our technology page.
JavaScript is a very powerful programming language these days. There is a lot that you can do with it. In addition to that, JavaScript has a huge ecosystem that allows you to discover a lot of useful tools, frameworks, and libraries.
JavaScript has a lot of powerful features and tools that make the life of the developer much easier. The syntax contains a lot of shorthands that you can use to write JavaScript code much faster and reduce lines. Especially in the latest ECMAScript specifications.
In this article, we will give you a list of shorthands that you can use in JavaScript. So let’s get right into it.
Normally, to convert a string to a number, we use the method parseInt() . However, there is a shorthand that allows us to do that.
By using the unary operator + , we can easily convert a string into a number.
Here is an example:
let speed = "60"; console.log(typeof speed); //string console.log(typeof +speed); //number console.log(+speed); //60, not "60".
As you can see, only by adding + at the beginning of the variable speed , we were able to convert the speed to a number.
There is also another shorthand to convert from a number into a string. It’s by simply adding an empty string to the number.
Here is an example:
let speed = 100; speed += ""; //returns "100" , not 100. console.log(typeof speed); //string
Another shorthand is the ternary operator, it allows us to easily write conditional statements in a short way using the keywords ? and : .
Here is an example using IF else statements:
Longhand:
let speed = 80;
if(speed < 30){
console.log('slow');
}else if(speed > 60){
console.log('fast');
}else{
console.log('between 30 and 60');
}
//output: fast
Here is the same example, but now using the ternary operator instead:
Shorthand:
let speed = 80; console.log(speed < 30 ? 'slow': speed > 60 ? 'fast' : 'between 30 & 60'); //output: fast
As you can see, by using the ternary operator shorthand, we were able to easily reduce the amount of code we had to write. It only took us 2 lines of code to write the conditional statements.
Have a look at the below example using an IF statement.
Longhand:
let isOnline = true;
if(isOnline){
console.log("Online");
}
//returns "online"
We can write the same statement using the short circuit && . Here is the example:
Shorthand:
let isOnline = true;
isOnline && console.log("Online"); //returns "online"
The short circuit evaluation && is one of the shorthands that allow you to write short conditionals. It’s used between two values, if the first value is truthy, it returns the second value. Otherwise, it returns the first value.
The best shorthand to flatten a multidimensional array is by using the method flat(). We have seen, a lot of developers use the method filter, concat, and all other long ways to flatten an array. Maybe because they don’t know about the flat method yet.
So this amazing method allows you to flatten an array in one single line of code. It accepts one optional argument(number), which is the level of flattening(how deep you want to flatten an array).
Here is an example:
let numbers = [9, [102, 5], [6, 3], 2]; numbers.flat(); //returns [9, 102, 5, 6, 3, 2]
When it comes to merging and cloning arrays in JavaScript, the spread operator {…} is the best shorthand you can use.
Merging arrays:
const employees = ["Chris", "John"]; const entrepreneurs = ["James", "Anna"]; //merging both arrays to a new array. const all = [...employees, ...entrepreneurs]; console.log(all); //output: ["Chris", "John", "James", "Anna"]
Cloning an array:
const numbers = [4, 8, 9, 0]; //cloning the numbers array. const clone = [...numbers]; console.log(clone); //output: [4, 8, 9, 0]
Mostly when we want to loop through an array using a for loop, we do it like this:
Longhand:
const users = ["John", "Chris", "Mehdi", "James"];
for(let i = 0; i < users.length; i++){
console.log(users[i]);
}
/*output:
John
Chris
Mehdi
James
*/
But we can achieve the same thing using the loop for of shorthand:
Shorthand:
const users = ["John", "Chris", "Mehdi", "James"];
for (let user of users){
console.log(user);
}
/*output:
John
Chris
Mehdi
James*/
Arrow functions are a shorthand that allows you to easily write functions in a short way and reduce your code.
Here are the examples:
Normal function:
function addNums(x, y){
return x + y;
}
addNums(6, 5); //11
Arrow function:
const addNums = (x, y)=> x + y; addNums(6, 5); //11
As you can see, these are some of the popular shorthands that you can use in JavaScript. They allow you to reduce code syntax and keep your code short as much as you can.
For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop your custom web app using JavaScript, please visit our technology page.
We always say that JavaScript is full of surprises. It never fails to amaze us. Every day, we learn something new about this programming language. Something which is very small but can make a huge impact on your code. Something which is worth sharing.
In this article, we’re going to share eight JavaScript hacks that you can use in your day-to-day stuff. So let’s learn something new!
It’s very common to use event listeners in your web app, not just in Vanilla JS applications, but also in modern JS frameworks and libraries like Angular and React.
To cite an example, let’s say we want to do something on a button click. We can use event listeners here. Often, we want to act whenever a specific event fires. But what if we want to do it only once?
Not to worry. We can actually execute our event listeners only once by simply doing this:
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('We will only run once');
},{ once: true })
To be honest, all of us have faced a situation where we felt like our web application is getting slower and we are not able to find out why. We’ve felt like we are doing everything as it should be, but still the browser is taking time to show the first content of our application.
Well, this might be because of long scripts getting executed before HTML. Often, we add our scripts inand we forgot that the next statements will not be executed until the script in <HEAD> finishes its execution.
We can simply use the defer attribute with our scripts to execute them after the HTML content.
/* No matter where you place this script tag inside the HTML, this will only run when the HTML content is completely loaded. */ <script src="main.js" defer></script>
It’s always recommended to use shorthand to make our code look cleaner. As no application can survive without conditionals like the if statement, we should know the shortcuts for that, too. And thankfully, JavaScript provides the && operator.
We can shorten our conditional checking by using the && operator.
let condition = true;
// Long way
if (condition) {
someFunction();
}
// Short way
condition && someFunction();
We can simply generate a random number from a given range with just one line of code. These kinds of tricks are very useful in real-world applications.
function randomNumber(num1, num2) {
return Math.random() * (num2 - num1) + num1;
}
console.log(randomNumber(50, 100)); // Expected output - random number between 50 and 100 (50 and 100 will be inclusive)
This is one of the hacks which We love the most. We can empty an array just by giving the value 0 to its length property.
let sampleArray = ["John", "Bob", "Mark", "Alex"]; sampleArray.length = 0; console.log(sampleArray); // Output - [] (it's empty now)
We can use the Object.entries() method to check whether an object is empty or not. Since Object.entries() returns the array of the object’s enumerable properties, therefore if the length of that array is 0, that means the object is empty such that the object has 0 property.
let sampleObj = {
name: "Mark",
occupation: "Developer"
};
let emptyObj = {};
console.log(Object.entries(sampleObj).length === 0); // false
console.log(Object.entries(emptyObj).length === 0); // false
From ES6, we have a new concept in JavaScript which is called Set.
"Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection." — MDN Docs
Since Set in JavaScript is a collection of items that are unique, i.e., no element can be repeated, therefore we can use it to filter duplicate values from an array.
This trick is again very simple but very useful. First, we will convert our array into Set, and as Set doesn’t have duplicate values, our new Set will have unique values from our array. Then we simply convert this new Set back into an array.
let namesArray = ["John", "Bob", "Mark", "Alex", "Mark", "Alain", "Bob"]; console.log([...new Set(namesArray)]); // Output - ["John", "Bob", "Mark", "Alex", "Alain"]
Since objects in JavaScript are reference types, we can’t simply use = to clone them, so with the below three methods, you can properly clone an object using just one line.
const person = {
name: "Mark",
username: "@markcodes"
};
// Using Object.assign() Method
const clonePerson1 = Object.assign({}, person);
// Using JSON
const clonePerson2 = JSON.parse(JSON.stringify(person));
// Using Spread Operator
const clonePerson3 = { ...person };
For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop your custom web app using JavaScript, please visit our technology page.
Frontend development is very important these days. There are a lot of tasks that a frontend developer has to do on a daily basis.
As front-end developers, we write a lot of HTML, CSS, and JavaScript code all the time. Knowing some coding tips could be very beneficial for us. That’s why in this article, I decided to share with you some frontend coding tips that you probably don’t know.
Do you know that you can hide an HTML element without using JavaScript?
By using the attribute hidden, you can easily hide an HTML element natively. As a result, that element won’t be displayed on the web page.
Here is the code example:
<p hidden>This paragraph won't show up. It's hidden by HTML.</p>
It’s always a good practice to use shorthands in order to make your CSS code smaller. The property inset in CSS is a useful shorthand for the four properties top , left , right , and bottom .
If these four properties have the same value, you can just use the property inset instead and your code will look much cleaner.
Here is an example:
Bad practice:
div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Good practice:
div{
position: absolute;
inset: 0;
}
You can easily detect internet speed in JavaScript by using the navigator object. It’s very simple.
Here is an example:
navigator.connection.downlink;
Pic courtesy: blog.devgenius.io
As you can see above, it gives me 5.65 since my internet speed is not good at all.
Again, you can easily use the method vibrate()in the navigator object to vibrate your phone.
Here is an example:
//vibrating the device for 500 milliseconds window.navigator.vibrate(500);
So as you can see, the device in this situation will vibrate for 500 milliseconds.
By using only CSS, you can disable pull to refresh on mobile. The property overscroll-behavior-y allows us to do that. Just give it the value contain .
Here is the example:
body{
overscroll-behavior-y: contain;
}
There will be situations where you will need to prevent the user from pasting text into inputs.
Well, you can easily do that in JavaScript using a paste event listener.
Here is an example:
<input type="text"></input>
<script>
//selecting the input.
const input = document.querySelector('input');
//prevent the user to paste text by using the paste eventListener.
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
As a result, now users can’t paste the copied text into the input field.
Databases are the backbone of our applications, and the more you learn about how they work, the better you will be at using them, writing applications against them, and troubleshooting problems when things inevitably go wrong.
So let’s dive into seven things you should (probably) know about databases.
We’ve seen a lot of dogmatic fist-banging about “the best” or “the worst” database, but the truth is the best database is the one that works best for your application. There’s no one-size-fits-all sort of database just like there’s no one-size-fits-all programming language or operating system.
When starting a new project, choosing the right database can be one of the most crucial decisions that you’ll make. So how should you choose which DB to use? We put together a list of five things to consider in our article on databases for developers, but let us also quickly go through them here.
What kind of data will be stored in the database?
Are you storing log files or user accounts?
How complex is the data that will be stored?
Can the data be normalized easily?
How uniform is the data?
Does your data roughly follow the same schema or is it disparate or heavily nested?
How often will it need to be read or written?
Is your application read- or write-heavy, or both?
Are there environmental or business considerations?
Do we have existing agreements with vendors? Do I need vendor support?
By answering these questions, you can help narrow down your choices to a few candidates. Once there, testing should tell you which one is the best for your application.
Sometimes you don’t have a choice and the database is already chosen for you. Whether you came to the project after it was started or political winds forced you a certain way, using the wrong database for the job can be frustrating.
But equally, if not more, frustrating is the progress of migrating databases should you get the opportunity. Once you start down one path, it’s not easy to simply change paths in the middle of things. Not only do you have to figure out a way to replicate your data from one database to another and learn a whole new system, but depending on how tightly coupled your database code is with the rest of your application, you might also be looking at extensive rewrites as well. Changing databases is not a task that should be undertaken lightly and without a lot of consideration, debate, testing, and planning. There are so many ways that things can go horribly wrong. This is why #2 is so important: Once you choose, it’s hard to undo that choice.
The debate about using a SQL or NoSQL database will go on forever. We get that. But often missed in this argument is the fact that NoSQL databases don’t replace SQL databases. They complement them.
There are some things that NoSQL databases do very well and there are some things that SQL databases do very well. Prometheus is very good at storing time-series data like metrics, but you wouldn’t want to use MySQL for that. Is it technically possible? Yes, but it’s not designed for that and you’re not going to get the best performance or developer experience out of it. On the flip side, you wouldn’t want to use Redis to store highly relational data like user accounts or financial transactions for the same reasons. Sure, you could make it work in the code, but why add that complexity and headache when you could just use the right tool for the job?
There is going to be some inevitable overlap in some areas. There are some excellent databases that are technically NoSQL that do a good job of storing relational data (see: Couchbase), but there are other outside factors that go into using one over the other. Factors like client language support, operational tooling, cloud support, and others are all things to take into account when choosing a database.
For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop your custom web app using JavaScript, please visit our technology page.
Content Source:
606, Suvas Scala,
Nr. Parikh Hospitals, S P Ring Road,
Nikol, Ahmedabad – 380049, Gujarat, India.
57 Sherway St,
Stoney Creek, ON
L8J 0J3
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
606, Suvas Scala,
Nr. Parikh Hospitals, S P Ring Road,
Nikol, Ahmedabad - 380049, Gujarat, India.
With a client-centric approach, we provide cutting-edge Web & App Development Services to businesses across the globe, ensuring successful project delivery that drive growth and innovation.
© 2024 — HK Infosoft. All Rights Reserved.
© 2023 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap