What’s new in Angular 15
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.
Standalone APIs are now out of developer preview!
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);
Router and HttpClient tree-shakable standalone APIs
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.
Directive composition API
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.
Image directive is now stable!
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:
- Automatic srcsetgeneration: the directive ensures that an appropriately sized image is requested by generating the srcset attribute for you. This can reduce download times for your images.
- Fill mode [experimental]: this mode causes the image to fill its parent container, removing the requirement to declare the image’s width and height. It’s a handy tool if you don’t know the sizes of your images or if you’d like to migrate CSS background images to use the 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.
Functional router guards
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.
Router unwraps default imports
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'),
}
Better stack traces
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:
- There’s only one line corresponding to code that the developer has authored. Everything else is coming from third-party dependencies (Angular framework, Zone.js, RxJS)
- There’s no information about what user interaction caused the error
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.
Release MDC-based components to stable
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.
More improvements in components
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.
CDK Listbox
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.
Improvements in the experimental esbuild support
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.
Automatic imports in language service
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
CLI improvements
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:
- medium.com
Angular Best Practices and Standards
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.
- Avoid ‘any’ type
- Avoid Logic in templates
- Use Lint Rules
- Break large components into small reusable components
- Documentation in Code
- Use Environment Variables
- Small functions
- Maintain proper folder structure
- Follow consistent Angular coding styles
- Use Lazy Loading
Let’s go through this one by one!
1. Avoid ‘any’ type
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.
2. Avoid Logic in templates
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.
3. Use Lint Rules
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.
4. Break large components into small reusable components
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
5. Documentation in Code
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.
6. Use Environment Variables
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.
7. Small functions
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.
8. Maintain proper folder structure
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
9. Follow consistent Angular coding styles
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.
- Files should be limited to maximum 400 lines of code.
- Define small functions which are limited to not more than 75 lines.
- If the values of the variables are not varying, then declare it with ‘const’.
- Use dashes to separate words in the descriptive name and use dots to separate the descriptive name from the type.
- Use lower camel case to name properties and methods.
- Do name an interface using upper camel case.
- Use upper camel case when naming classes.
10. Use Lazy Loading
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:
- medium.com
What’s new in Angular 13
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.
Goodbye View Engine – 100% Ivy
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.
Ergonomic APIs
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
No More Support for IE11
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.
Update of Component API
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
Improved Debugging and Test Times
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.
New Type for Forms
Angular 13 has introduced a new type for forms, which is FormControlStatus. It’s a union of all possible status strings for form controls:
- The type of AbstractControl.status, for example, is now FormControlStatus instead of string.
- And the type of StatusChanges is Observable<FormControlStatus> instead of Observable<any>.
Router
- There is an improvement for the router so that it will not replace the browser URL when new navigation cancels ongoing navigation.
- There is a proposition to fix an incorrect parsing for navigation. This happens when the default URL serializer drops everything afterward like a question mark in query parameters: /users?start=1?&pages=15
- You can add missing outlet events to RouterOutletContract, which is useful when the module federation renders components dynamically at some point in the future.
Accessibility (A11y)
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
Other Changes
- The framework core now supports TypeScript version 4.4.
- Version 7 of the reactive programming library RxJs (Reactive Extensions for JavaScript) is now supported.
- Inlining fonts speed up the First Contentful Paint (FCP), which can improve the web performance. That’s why the team has introduced now support for inlining Adobe Fonts just like they did for inlining Google Fonts in Angular 11.
- We can disable or enable built-in validators such as min, max, and minLength dynamically.
- We can set custom conditions in ng_package.
- There is an improvement of error messages, like the error about “a missing animation trigger” for the platform-browser.
- Clear service worker cache in the safety worker. This ensures that broken or stale content will not be served in future requests.
- Improvement for the localization API. You can check the documentation for $localize.
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:
- betterprogramming.pub
Top 5 Angular UI kits and frameworks
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
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
Pros
- Very popular
- Represent the base on which other UI kits lean
- A decent number of components
- Integrates the Material Design
- Multiple modules, not monolithic
- Integrates a good CDK
- Provides some accessibility features
- Still supporting IE 11
Cons
- Hard to customize: working with this kit will make you suffer against weird DOM structures, ghosted tags, and hard-to-code CSS styles, which in some cases required the notorious (and bad) approach of ::ng-deep rules
- Strictly bound to the Material design style
- Documentation is not much exhaustive, will lead you to StackOverflow searches. Also missing a good search engine in docs pages.
Verdict
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.
Ng-bootstrap
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
Pros
- Essential, which could be an advantage
- Easy to use
- Very close to the original one in terms of look and feel
- Easy to customize
- Multiple modules, not monolithic
- It’s legacy
Cons
- Essentially… you probably won’t be ok with just this one and will lead the developer to integrate features with other stuff
- Not so much popular nowadays could miss support for specific issues
Verdict
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.
Ngx-bootstrap
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
Pros
- It’s bootstrap-like but more advanced
- Very good documentation
- Multiple modules, not monolithic
- Got specific components out of Bootstrap, like “Rating”
- Very stable, even on advanced components
Cons
- The look-and-feel is essential, requires custom CSS rules
- Sometimes it’s hard to understand what’s real Ngx and what’s not, because the term Ngx is today adopted by many other libraries and components
Verdict
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.
MDBootstrap
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
Pros
- Probably the biggest one in terms of the number of components
- Good esthetic feel, way better than the basic bootstrap
- Looks good if you need a premium UI Kit
- Provides external services: hosting and a tool for building
- MDB Pro version available (required in some cases)
- Multiple modules, not monolithic… but in this case not much effective in terms of performances
- Available also for Vue.js and React
Cons
- Looks “heavy”
- Hard to understand because of its complexity, need some time be mastered
- Looks like a commercial product
Verdict
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.
Carbon Components 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
Pros
- Professional tool, supported by IBM
- Exhaustive documentation with live examples
- Multiple modules, not monolithic
- Built-in Design patterns and approaches
Cons
- Too much professionalism for some B2C needings
- Not much popular… will you solve your issues?
- Requires good skills
Verdict
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:
- betterprogramming.pub
How to make your site 25x faster
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.
What should you cache?
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.
Why Redis?
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.
Installation
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.
Usage
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'));
Content Delivery Network(CDN)
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.
- javascript.plainenglish.io
Top 5 JavaScript trends to adopt in 2021
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
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.
React
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.
Animations
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.
Data Visualization
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.
Full-Screen Videos
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.
- betterprogramming.pub
7 useful JavaScript shorthands you must know about
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.
1. Convert string to a number
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
2. Using the ternary operator
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.
3. Short-circuit evaluation
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.
4. Flattening an array
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]
5. Merging and cloning arrays
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]
6. For loop shorthand
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*/
7. Arrow functions
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.
- medium.com
The best JavaScript practices to make your code look and work better
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!
1. Run Event Listeners Only Once
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 })
2. Use the ‘defer’ Attribute
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>
3. Fast Conditional Checking
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();
4. Random Number in a Given Range
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)
5. Empty an Array in One Line
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)
6. Check Whether the Object Is Empty
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
7. Filter Duplicate Values From Array
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"]
8. Clone Object Using One Line
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.
- betterprogramming.pub
The most useful Frontend coding tips and Database concepts
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.
Hiding an HTML element
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>
Use the inset shorthand in CSS
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;
}
Detect internet speed
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.
Vibrate your phone
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.
Disable pull to refresh
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;
}
Prevent the user from pasting text
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.
Database Concepts
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.
Choosing the Right Database Is Hard
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.
Moving to the Right Database Is Harder
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.
NoSQL Doesn’t Replace SQL, It Complements It
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:
- blog.devgenius.io
- betterprogramming.pub
What’s new in Angular 12
Angular provides unmatchable features that make it the most preferred framework in the Web Development industry today. The Angular version 12.0.0 release has come up again with the most compelling features and customization options to take your development journey to a new horizon. The new release of the Angular 12.0.0 version brings updates on the framework, the CLI, and components.
Let’s have a look at the unique and unparalleled features in Angular 12.0.0:
1. Better developer ergonomics with strict typing for @Angular/forms.
The Angular team has focused on enforcing secure and strict methods of checking for reactive forms. The new update will help developers to look out for issues in the development stage. This upgrade will also enable better text editor and ide support allowing the developer better developer ergonomics with strict typing for Angular/forms. The previous versions were not as aggressive in addressing this issue, but Angular 12 does it perfectly.
2. Removing legacy View Engine.
When the transition to Ivy of all internal tooling gets done, removing the legacy View engine becomes the next challenge. No worries! The newly added removing legacy View Engine aims to reduce framework overheads. This is because of smaller Angular conceptual overhead, smaller package size, saving on maintenance cost, and decrease in the complexity of the codebase. With the knowledge of Ivy, it’s the best path to take while using the latest version of Angular. An application that has upgraded to the latest version of Angular (Angular 12.0) and is keeping enable Ivy as false, should consider this since in the future they cannot upgrade to the latest version if they don’t start using Ivy.
3. Leverage full framework capabilities.
Design and implement a plan to make Zone.js optional. This will, in turn, simplify the framework, improve debugging, and minimize application bundle size.Zone.js does not support native async/await syntax and when Zone.js is optional and a developer can choose not to use it then Angular will be able to support native async/ await syntax.
4. Improving test time, debugging, and test time environment.
Testbed automatic clean-up and tear down of the test environment after each test run, will improve test time and create better isolation across tests.
5. Easier Angular mental model with optional modules.
This will simplify the Angular mental model and learning. This will allow the developers to develop standalone components and implement other types of APIs for the declaration of the component compilation scope. On the other hand, we have to note that this change might make it hard for existing applications to migrate to this.
This feature will allow developers to have more control over the compilation scope for a particular component without giving much thought to the NgModule they belong to.
6. Adding Directives to Host Elements.
Adding directives to host elements has been on high request by Angular developers for a long time. The new release allows developers to architecture their components with additional characteristics without using inheritance. At the moment you cannot add directives to host elements, but you can improvise using: host CSS selector. As the selector of these components also becomes a DOM element, we could have more possibilities if we could add more directives to this element too.
7. Better Build performance with NGC as TypeScript plugin distribution.
The Angular compiler being distributed as a TypeScript plugin will significantly improve the developer’s build performance and reduce the cost.
8. Ergonomic Component level code-splitting APIs.
The slow initial load time is the major problem with web applications. Applying more granular code-splitting on a component level can solve this problem. This will mean smaller builds and faster launch time and in return result in improved FCP.
That’s all for the new release.
Now, let us take a look at the possibilities that are in progress and will be available shortly.
Inlining critical styles in universal applications.
Firstly, this will result in faster applications. Loading external stylesheets is a blocking operation. This means that the browser cannot initiate rendering an application without first loading all the referenced CSS. Its FCP (First Contentful Paint) can be improved by having a render-blocking in the header of a page that can visibly improve the load performance.
Angular language service to Ivy.
To date, the Angular language service still uses the View Engine compiler and type checking even for Ivy applications. The goal is to improve the experience and to remove the legacy dependency. This will be achieved by transitioning from View Engine to Ivy. The team at Angular wants to start using the Ivy template parser and improved type checking for the Angular language service to match Angular application behaviour. This will simplify Angular, npm size reduction, and improve the framework’s maintainability.
Debugging with better angular error messages.
The error messages bring limited information on how a developer can take actions to resolve them. The Angular team is working on codes, developing guides, and other measures to ensure an easy debugging experience and make error messages more discoverable.
Better security with native Trusted Types in Angular.
In conjunction with the Google security team, the Angular team is working on adding support for the new Trusted Type API. This API will aid developers to make more secure web applications.
Optimized build speed and bundle size.
With Angular, the CLI Webpack 5 stability will continue urging for the implementation to enable build speed and bundle size improvements.
Advanced Angular Material Components.
Integrating MDC weblink will align Angular Material closely with the material design specification, expand the accessibility reach, improve component quality and improve the overall team velocity.
Faster debugging and performance profiling.
The team at Angular could focus its attention on working on tooling that will help in the provision of utilities for debugging and performance profiling. The primary aim is to help the developers understand the component structure and the means to note changes in the angular application.
MDC web is a library created by the Google Material Design team that provides reusable primitives for building material design components.
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:
- knowledgehut.com
