DEV Community: Jamal

Fix AWS amplify React app error on Access Denied error

Jamal — Fri, 18 Dec 2020 03:07:32 +0000

When I deployed my build react app on AWS amplify, the first landing page is able to load. However, when you defined a path in your router, and try to access it, you would hit Access Denied error:
like /signin first page loaded but unable to go /signup route or any other routes .

Here, what i did,

Go AWS amplify console, select “ Rewrites and redirects ”, add a new rewrite and redirects, click on “ Open text editor ”, and add the below rule:

[{
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
}]

Looks like this:

Try again to access your url, it should work now.

Stackoverflow answer:
https://stackoverflow.com/questions/63546586/access-denied-error-from-protected-routes-from-react-app-hosted-on-aws-amplify

Docker Node Alpine Image Build Fails on node-gyp

Jamal — Wed, 23 Sep 2020 09:23:28 +0000

Docker node:7.9-alpine unable to build package due python is not installed :Resolved

I'm attempting to Dockerize a node.js application(Typescript). I'm using the node:12.18.4-alpine Docker image as a base.

I go this

gyp ERR! configure error

gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:484:19)
gyp ERR! stack at PythonFinder. (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! stack at F (/usr/local/lib/node_modules/npm/node_modules/which/which.js:68:16)
gyp ERR! stack at E (/usr/local/lib/node_modules/npm/node_modules/which/which.js:80:29)
gyp ERR! stack at /usr/local/lib/node_modules/npm/node_modules/which/which.js:89:16
gyp ERR! stack at /usr/local/lib/node_modules/npm/node_modules/isexe/index.js:42:5
gyp ERR! stack at /usr/local/lib/node_modules/npm/node_modules/isexe/mode.js:8:5
gyp ERR! stack at FSReqCallback.oncomplete (fs.js:159:21)
gyp ERR! System Linux 3.10.0-957.el7.x86_64
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/code/server/node_modules/bcrypt/lib/binding/bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=/code/server/node_modules/bcrypt/lib/binding" "--napi_version=4" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v67"
gyp ERR! cwd /code/server/node_modules/bcrypt
gyp ERR! node -v v11.9.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/code/server/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/code/server/node_modules/bcrypt/lib/binding --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v67' (1)
node-pre-gyp ERR! stack at ChildProcess. (/code/server/node_modules/bcrypt/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:197:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:978:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
node-pre-gyp ERR! System Linux 3.10.0-957.el7.x86_64
node-pre-gyp ERR! command "/usr/local/bin/node" "/code/server/node_modules/bcrypt/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /code/server/node_modules/bcrypt
node-pre-gyp ERR! node -v v11.9.0
node-pre-gyp ERR! node-pre-gyp -v v0.12.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/code/server/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/code/server/node_modules/bcrypt/lib/binding --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v67' (1)
npm WARN backend-botmanagementservice@1.0.0 No description
npm WARN backend-botmanagementservice@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
........

my docker file was

 #MY first stage, that is the Builder
FROM node:12.18.4 AS ts-sample-builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run clean
RUN npm run build
# My Second stage, that creates an image for production
FROM node:12.18.4 AS ts-sample-prod
WORKDIR /app
COPY --from=ts-sample-builder ./app/dist ./dist
COPY package* ./
RUN npm install --production
CMD npm run start-prod
EXPOSE 3001

To reduce image size I change node version node:12.18.4-alpine then it caches issues as I mentioned above.

When using alpine, you need to install build dependencies for some node modules to be able to be built natively. It should probably be documented
Note:
if just use the base as node:12 or any other version your image size will be more than 1GB some cases.

How to speed up Node re-builds by leveraging Docker multi-stage builds
if you are using alpine, you need to install build dependencies for some node module to be able to be built natively.

Example

FROM node:8.12-alpine
EXPOSE 8080
WORKDIR /app
COPY . .
#python
RUN apk add --no-cache --virtual .gyp \
        python \
        make \
        g++ \
    && npm install \
    && apk del .gyp
CMD ["npm", "start"]

Docker and Node.js Best Practices

I will suggest you for checking bcrypt $ bcryptjs npm docs.
node-gyp only works with stable/released versions of node. Since the bcrypt module uses node-gyp to build and install, you'll need a stable version of node to use bcrypt. If you do not, you'll likely see an error that starts with:

In the end, It resolves all issues like slow build &Python is not installed &, etc.

#My first stage, that is the Builder
FROM  node:12.18.4-buster AS build
#RUN apk add --update --no-cache \
#    python \
#    make \
#    g++
COPY . .
# If you have native dependencies, you'll need extra tools
RUN npm install
#RUN npm install
RUN npm run build
RUN npm prune --production
#CMD npm run start-prod
#EXPOSE 3001
## My Second stage, that creates an image for production
FROM node:12.18.4-alpine
WORKDIR /app
COPY --from=build ./dist ./dist
COPY --from=build ./node_modules ./node_modules
CMD npm run start-prod
EXPOSE 3001

It worked for me!

learn more about multi staging.

Using Multi-Stage Builds to Simplify And Standardize Build Processes

Add Me to Search: Google Launches Virtual Business Cards

Jamal — Wed, 12 Aug 2020 17:01:47 +0000

Google is testing virtual business cards in search results that show up when a person’s name is searched for.

Now rolling out in India, Google’s new ‘people cards’ let individuals highlight themselves in search results like never before.
For searchers, it can be challenging to find information about specific people if they don’t have a strong online presence.

Google India Tweet :

Google aims to address these challenges with people cards:

Today, we are solving these challenges with a new feature called people cards. It’s like a virtual visiting card, where you can highlight your existing website or social profiles you want people to visit, plus other information about yourself that you want others to know.

People cards are designed for business professionals, performers, influencers, entrepreneurs, job hunters, freelancers, or anyone looking to grow their presence online.

The prime purpose of people cards is to allow individuals to have a public profile on Google Search that will be displayed on top of all results. It was initially spotted as profile cards in February.

Google claims that with people cards, it is aiming to provide “helpful and reliable information” to the public. Thus, it gives the option to all users to flag abuse, impersonation, or even low-quality content, if they find anything odd through people cards. The search giant is also touting to have a combination of human review and automated techniques in place to flag policy violating content. Furthermore, only one people card is allowed per Google Account to limit fake profiles.

Individuals who have already created their cards on Google have the ability to opt-out of the experience anytime. In case of people who share the same name, Google Search will show multiple modules.

How secure is People Cards?

To make sure people find reliable and helpful information, the tech giant has put together several protections and controls. It has also added safeguard mechanisms to protect against offensive content.

There is a feedback button with the help of which users can identify and report low-quality information or a card that they believe was created by an impersonator.

For people looking to find someone on Search with their name, the card will be available. There will be a module with the name, profession and location which users can tap to see their card.

For people who share the same name, the Search will show multiple modules. The unique information will help users distinguish between different individuals to find accurate information.

How to create your own people card on Google

To create your own people card, sign into your Google Account and search for “add me to Search”. You'll now see a prompt saying, “Add yourself to Google Search.” Tap that prompt and then you'll be asked to provide your phone number that will be verified through a six-digit unique code to begin the process.

Google said that for every new card, the user must authenticate the account with a unique mobile number. He/she will have complete control of the information to be included on the card and can opt-out of the experience anytime, which will stop their details from appearing in Search.

Image credit:Google Image search

How to create your People Card on Google Search

Step 1: To create a People Card, users will first need to sign in to their Google Account, search for their name on Google Search

Step 2: Tap on the "add me to Search" option that appears on the page

Step 3: Upload an image of yourself from your Google account, add a description and links to social profiles or websites. You can even include your phone number or email address if you want it on your virtual visiting card

Step 4: Tap on the "save" option and that's it.

hope you find this informative

Counting Valleys Code Challenge Solved

Jamal — Mon, 29 Jun 2020 04:09:55 +0000

A valley is a sequence of consecutive steps below sea level, starting with a step down from sea level and ending with a step up to sea level.

Given Gary's sequence of up and down steps during his last hike, find and print the number of valleys he walked through.

For example, if Gary's path is s=[DDUUUUDD], he first enters a valley 2 units deep. Then he climbs out and up into a mountain 2 units high. Finally, he returns to sea level and ends the hike.
Gary is an avid hiker. He tracks his hikes meticulously, paying close attention to small details like topography. During his last hike he took exactly n steps.

For every step he took, he noted if it was an uphill, U, or a downhill, D step. Gary's hikes start and end at sea level and each step up or down represents a 1 unit change in altitude.

On Hackerrank change this function :JavaScript

function countingValleys(n, s) {

let e= 0;
let travel = 0;
for (let i = 0; i < n; i++) {
    if (s[i] === "D") {
        --e;
    } else if (s[i] === "U") {
        if (++e === 0) travel++;
    }
}
return travel;

}

Here Link
full details here: https://www.hackerrank.com/challenges/counting-valleys/problem?h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=warmup

How-to: call() , apply() and bind() in JavaScript

Jamal — Thu, 25 Jun 2020 07:12:11 +0000

This post covers some basic concepts in JavaScript. Every JavaScript programmer must know the concept and clear

Call()

The call() method calls a function with a given this value and arguments provided individually.

Syntax
func.call([thisArg[, arg1, arg2, ...argN]])

apply()

Similarly to call() method the first parameter in apply() method sets the "this" value which is the object upon which the function is invoked. In this case, it's the "obj" object above. The only difference of apply() with the call() method is that the second parameter of the apply() method accepts the arguments to the actual function as an array.

bind()

Syntax
let boundFunc = func.bind(context);

In JavaScript, function binding is happens using Bind() method. by this method, we can bind an object to a common function, so that the function gives different result when its need.

That's all for now. Thank you for reading and I hope this post will be helpful for beginners who are facing issues regarding the apply(), call(), and bind() methods of JavaScript.

What's New in Angular 9

Jamal — Tue, 31 Dec 2019 13:17:30 +0000

New Features in Angular 9

JavaScript Bundles and Performance
We’ll start by looking at one of the problems that plagued previous versions of Angular: large bundle files that have negatively impacted download times and, as a consequence, application performance.
Ivy Compiler
The big new feature we'll dive into is the Ivy compiler. We'll explain what Ivy does and why it's actually an important feature for the future of Angular (it solves some of the problems with large bundles and application performance).
Selector-less Bindings and Internationalization
We'll touch on a few other new features, including selector-less bindings and internationalization support. You'll see why we're calling this an evolutionary release rather than revolutionary.
Benchmarking Angular 8 and the Pre-release Version of Angular 9
We’ll run some benchmark tests to compare performance between Angular 8 and a pre-release version of Angular 9.

Added Angular 9 Features -
1.Added undecorated classes migration schematic in the core.
2.The formControlName also accepts a number in the form
3.Now allow selector-less directives as base classes in View Engine in the compiler
4.Added support selector-less directive as base classes in Ivy and also make the Ivy compiler the default for ngc.
5 Convert all ngtsc diagnostics to ts.Diagnostics
6.bazel: support ts_library targets as entry-points for ng_package.
7.core: add dynamic queries schematic.
8.core: Mark TestBed.get as deprecated.
9.ivy: expose window.ng.getDebugNode helper and also support ng-add in localize package.
10.ivy: i18n – add syntax support for $localize metadata block.
11.ivy: i18n – reorganize entry-points for better reuse.
12.language-service: enable logging on TypeScriptHost.
13.language-service: provide diagnostic for invalid templateUrls.
14.language-service: provide diagnostics for invalid styleUrls.

JavaScript Bundles and Performance

One of the ongoing problems with previous Angular versions is the relatively large file size of the app — more precisely, the file size of the generated JavaScript bundles. If you compare Angular to other libraries such as React or Vue.js, the Angular app is significantly bigger.

At runtime, you probably won’t feel the difference. While Angular runtime performance is good, the loading can take longer because even a simple app can be relatively large.

The size of the JavaScript bundles also hints at another problem: there's more to learn with Angular because Angular is a complete framework with many built-in developer tools, while other JavaScript libraries are more focused on components.

So what could the Angular team do to mitigate the problems stemming from the large bundle files in earlier Angular versions?

Understanding Angular ViewEngine

Before Angular 8, the framework relied exclusively on ViewEngine (sometimes referred to as the "VE") to build and render code in browsers. Angular components are written using the TypeScript language. TypeScript is a superset of JavaScript, and we use a compiler or "transpiler" to render TypeScript into a dialect of JavaScript that runs in the browser. Angular historically has relied on ViewEngine to do this transpiling from TypeScript code into JavaScript.

The Angular ViewEngine takes the templates and components and translates them into regular HTML and JavaScript so that the browser can interpret and display them.

Angular Ivy and Faster Mobile Apps

Smartphones and other mobile devices account for about half of the website traffic worldwide. A considerable percentage of these mobile devices access web pages from locations that suffer from slow internet connections.

Developers can redesign existing apps to reduce the size of the downloadable assets and enhance the mobile user experience, but these changes can be difficult, expensive, and introduce unforeseen risks to their projects.

By reducing the size of JavaScript bundles, Ivy becomes a welcome improvement for developers trying to speed up application startup.

Smaller Bundles and Better Performance Thanks to Ivy

Previous versions of Angular have relatively large file size of the final bundles compared to React or Vue.

The performance of the Angular runtime is quite good but the loading time is longer because of the large file size which affects the overall performance of the application.

So what the Angular team is doing to solve the large size of the final bundles?

Enter Ivy.

Before Angular 8, the framework used ViewEngine as the renderer,
With Angular 8, Ivy is in experimental mode behind an optional flag,
With Angular 9+, Ivy is the default compiler.
What is Ivy?

Ivy is a complete rewrite of the Angular renderer which is simply the part of Angular that transforms your Angular templates into JavaScript code.

Angular components are a mix of TypeScript code, HTML and CSS. TypeScript is a superset of JavaScript, that needs to be compiled into JavaScript before it can be consumed by a web browser.

Angular previuosly made use of ViewEngine to transform TypeScript code to JavaScript.

The Angular ViewEngine transforms the templates and components to HTML and JavaScript so that the browser can render them.

These are some informations about Ivy:

The Ivy compiler is abtsracted from developers, and will replace ViewEngine so what you know about Angular is still valid.
Angular 8 allows developers to play with Ivy but with Angular 9, Ivy is the default renderer.
The Ivy compiler outputs much smaller JavaScript bundles, so Ivy solves Angular’s bundle problems.
The Ivy compiler will not change how you work with Angular so what you previosly learned about Angular will still work in Angular 9+.

Angular 9.0.0-next.5
A build with Angular 9.0.0-next.5 yielded a slightly small main.js file at 214KB. That's a 13 percent improvement from Angular 8.

Angular 9.0.0-rc.7

Bug Fixes
animations: leaking detached nodes when parent has a leave transition (#34409) (6607fb4), closes #25744
common: ngStyle should ignore undefined values (#34422) (ee1eebd), closes #34310
ivy: avoid duplicate errors in safe navigations and template guards (#34417) (d6edeab)
ivy: avoid using proto when reading metadata in JIT mode (#34305) (08ce026)
ivy: don’t produce template diagnostics when scope is invalid (#34460) (c1fd629), closes #33849
ivy: generate a better error for template var writes (#34339) (418d586), closes #33674
ivy: i18n – remove translate function when clearing translations (#34346) (1489e5e), closes #32781
ivy: i18n instructions thrown off by sanitizer in IE11 (#34305) (bed62b1)
ivy: improve ExpressionChangedAfterChecked error (#34381) (7ea3984)
ivy: inconsistent attribute casing in DebugNode.attributes on IE (#34305) (9bff8e7)
ivy: incorrect injectable name logged in warning message on IE (#34305) (60d1d5e)
ivy: inheritance in JIT mode not working correctly on IE10 (#34305) (65fb2fd)
ivy: inheriting injectable definition from undecorated class not working on IE10 in JIT mode (#34305) (d83599d)
ivy: record correct absolute source span for ngForOf expressions (#31813) (931cb5e)
ivy: reorder provider type checks to align with VE (#34433) (7916b1e)
ivy: unknown property and element checks not working correctly in IE (#34305) (0ff54f2)
ivy: validate the NgModule declarations field (#34404) (03e236a)
language-service: HTML path should include last node before cursor (#34440) (76e4870)
language-service: Proper completions for properties and events (#34445) (4e41bf9)
language-service: Remove completions for let and of in ngFor (#34434) (ab61480)
ngcc: correctly match aliased classes between src and dts files (#34254) (4bffb6b), closes #33593
ngcc: handle CommonJS re-exports by reference (#34254) (9ca5faa)
ngcc: handle imports in dts files when processing UMD (#34356) (81c75cf)
ngcc: handle UMD re-exports (#34254) (84a7d8a)
ngcc: render UMD imports even if no prior imports (#34353) (c26738d), closes #34138
ngcc: use the correct identifiers when updating typings files (#34254) (c0c2ab3)
Features
forms: expand NgModel disabled type to work with strict template type checking (#34438) (b1d4c58)
ivy: error in ivy when inheriting a ctor from an undecorated base (#34460) (f563c7c)
ivy: throw compilation error when providing undecorated classes (#34460) (0638e65)
Performance Improvements
compiler: optimize cloning cursors state (#34332) (5d871b5)
compiler: speed up i18n digest computations (#34332) (adb0663)
compiler: use a shared interpolation regex (#34332) (940e62b)
ivy: cache export scopes extracted from declaration files (#34332) (eb9a8ac)
ivy: eagerly parse the template twice during analysis (#34334) (fb4a11a)
ivy: reuse prior analysis work during incremental builds (#34288) (c387952)
ivy: share instances of DomElementSchemaRegistry (#34332) (ce94192)
ivy: use module resolution cache (#34332) (82442c5)

Angular performance part 2

Jamal — Tue, 10 Dec 2019 16:10:24 +0000

Part1 link on the comment section please have a look : )

Preload and Prefetch attribute: These attributes help to load the static resources as quickly as possible thus improving the time for first meaningful paint. Having faster first meaningful paint greatly affect the user experience. Preload and Prefetch are almost similar with the only difference is that Preload resources have greater priority. So use Preload for the assets which are essential for the initial rendering and use Prefetch for the resources which are required after site load (required in future across the pages).
Updating Third Party Packages: Make sure you are regularly updating your third party packages. Many times newer packages may contain many performance improvements including smaller size and other build time performance optimizations (e.g. RxJS 6). Also by regularly updating the packages, you may get many improvements related to the bug fixes, security vulnerability fixes, fixes related to package compatibility etc.
Compressing images: It’s a good idea to compress the images without losing much of the quality thereby saving the bytes transferred over the network improving the build time. There are many tools available to achieve this. VS Code extension called TinyPNG can be used to compress Jpeg and PNG images without losing much of the quality.
Remove unused fonts: It’s a good idea to remove the unused fonts which may help you save few bytes over the network.
Slow DNS and SSL: Sometimes your DNS and SSL provider could be the reason for slow load time. So make sure the DNS and SSL are fast and configured correctly.

Run Time Performance

Change Detection: By default on each asynchronous event, Angular performs a dirty checking by performing a change detection for the whole component tree. Such dirty checking could be a lot computation heavy for a medium to large apps. You can drastically reduce the change detection by setting “ChangeDetectionStrategy” to “OnPush”. The OnPush strategy promotes the use of immutable data structures.
Detach Change Detector: We can completely detach the component from change detection thereby giving a developer the control to inform Angular as to when and where to perform the change detection.
Web Workers: The JavaScript implementation in all browser is single threaded thus making the whole app to run on a single thread. Such single-threaded execution drastically reduces the frame rate of the complex application as both UI painting and JS execution handled by the same thread. As Angular by default avoids direct DOM manipulation, it is possible to run the entire Angular app in a separate web worker thread thereby keeping the main thread free to just handle the UI rendering. Check this post to see how to run an angular-cli app inside web worker. However, there are many npm packages that try to access DOM directly thereby creating issues while running the whole app inside the worker process. If you want to run only a piece of code under a web worker thread then look at this npm package.
Web assembly: Web assembly is a low-level assembly like a language enabling near-native performance. WebAssembly aims to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms. You can take advantage of Webassembly to run some amount of your web app code with Web assembly. Take a look at this demo app created with angular-cli and wasm. However, you should be aware of the fact wasm is still new and using it sometimes may be tricky considering as of now it has only 4 supported data types (2 floating points and 2 integer points). Also as of now, for most of the cases, performance benefit of wasm is not that huge when you are using it to execute a small piece of code compared to inline JS. Properly evaluate which code you want to move to wasm.
trackBy: By default, *ngFor identifies object uniqueness by reference. If the object reference is broken by updating the content of the object, Angular removes
the related DOM node completely and recreate it again even though the actual change required is for only a small part of the DOM node. This issue can be easily solved by using trackBy.

@Component({
selector: 'app',
template: <ul> <li *ngFor="let item of items; trackBy: trackById">{{item.name}}</li> </ul>
})
class AppComponent {
Items = [
{
id: 1,
name: 'item 1'
}, {
id: 2,
name: 'item 2'
},
...
];
trackById(index, item) {

    return item.id;
}

}

Pure Pipes: In the “@pipe” decorator you can specify “pure” flag as true. This flag indicates that the pipe is not dependent on any outside or global state and is side effect free. This enables Angular to cache the outputs for all the input parameters the pipe has been invoked with and thus allows to reuse the values instead of recomputation. This can lead to a massive reduction in the duplicate operations performed in many cases thus hugely improving the performance.
Avoid complex computations in the template: Avoid doing complex calculation in the HTML template (ex calling some component method inside the template), instead leverage the use of pure pipes thereby taking advantage of Angular caching and hence avoiding duplicate operations or if the use of pipe is not possible, see the opportunity to pre-calculate the values and then directly bind values instead of calling the component method in the template.
enableProdMode: Invoking “enableProdMode()” avoids Angular from performing additional checks for change detection.

import {enableProdMode} from '@angular/core';
if (ENV === 'production') {
enableProdMode();
}

AOT Compilation: AOT not only improves the build time performance but also the runtime performance of the app.
Optimize Events: Slower DOM events block change detection until the event is not completed. For example, if you have a click event in your template which is handled in the component and the component itself is calling service method to process it, the change detection will not complete until the control is not returned from the service. If your service is taking more time to perform the intended operation, then it will ultimately slow down the change detection. See the opportunity to optimize your logic to improve the duration or if possible try to move your service logic to separate web worker thread or use wasm if needed.
Unsubscribing Observables: Observables could create the memory leak issue. So it is better to unsubscribe them when they are not needed anymore. However, you don’t have to unsubscribe all the observables used. Unsubscribing explicitly is required when a subscription is created inside a component that is destroyed before the observable completes. Check this SO thread for more info.
Observable share() operator: If you have subscribed the observable at multiple locations/components, then each subscription will try to produce the data even though the data is duplicate. We can avoid the processing of the duplicate data across subscriptions using the “share()” operator.

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {share} from 'rxjs/operators';
@Injectable()
export class AppService {
data: Observable < any >;
constructor(private http : HttpClient) {
this.data = this.http.get ('apiUrl').pipe(share());
}
getData() {
return this.data;
}
}

Progressive Web Apps: The PWA not just give you a load time optimization but also the runtime optimizations making your app more responsive, interactive, fast, smooth animations, offline support etc.
Updating Third-Party Packages: Again regularly updating your third party packages may also result in better run time performance.
console.log(): Using console.log() statements in your production code could be a bad idea as it will slow down the performance of the app and also logging objects with console.log() creates memory leak issue. When the browser’s console window is open, the console.log() execution slows down even further by many times thus impacting site’s performance significantly. It’s better to completely remove the console.log() statements from your production code or at least have an environment specific conditional logging.
Global Variables: There are many disadvantages of using global variables and one of them is the memory leak. The variables defined in the global scope won’t be cleared until the window is reloaded or tab is closed thus resulting in the memory leak if the global variable is not intended to be used throughout the app. If for some reason you want to have global variables, there are better ways to do it in the Angular.

20 tips for Angular performance(Part 1)

Jamal — Sat, 07 Dec 2019 16:50:01 +0000

Load Time Performance

AOT: As opposed to JIT Compilation where the compilation is done in the browser, AOT compiles much of the code during the build process (also called offline compilation) thus reducing much of the processing overhead on the client browser. With angular-cli just specify the “aot” flag (if prod flag is present, then aot flag not required) and AOT will be enabled.
Tree-shaking: This is the process of removing unused code resulting in smaller build size. If you are using angular-cli, Tree-Shaking is enabled by default.
Uglify: It is the process where the code size is reduced using various code transformations like mangling, removal of white spaces, removal of comments etc. For webpack use uglify plugin and with angular-cli specify the “prod” flag to perform the uglification process.
Webpack 4: Using Webpack 4 (and higher) for your angular-cli or custom webpack build results in more smaller build size compared to Webpack 3. Webpack 4 has mode option which lets you specify the optimization type (production or development) without you requiring to write any explicit configuration giving you the best possible results for the target environment. Also, build time with Webpack 4 is much faster (60% to 98%) than the earlier version thereby reducing the development time.
Prod flag: For the production, build specify the “prod” flag in the angular-cli application. It will enable various build optimizations like uglify, AOT, removal of sourcemaps, service workers (if enabled) producing a much smaller build size.
Build-optimizer flag: If you are using angular-cli make sure you specify “build-optimizer” flag for your production build. This will disable the vendor chunk and will result in more smaller code
Lazy loading: Lazy loading is the mechanism where instead of loading complete app, we load only the modules which are required at the moment thereby reducing the initial load time. In simple words, it means “don’t load something which you don’t need.”
Server side rendering: Rendering the first page of your application on the server (using Node.js, .Net, PHP) and serving it as a static page causes near to instant rendering thus greatly improves perceived performance, speed, and overall user experience. You can use Angular Universal to perform server side rendering.
Ivy Render Engine: Angular team recently announced a new render engine named Ivy. It results in much smaller bundle size than the current engine with improved debugging experience. Though it is still not production ready you can still try it in your app. You can look at this ng-conf keynote for more details.
Updating Angular and angular-cli: Updating your Angular and angular-cli regularly gives you the benefit of many performance optimizations, bug fixes, new features, security etc.
RxJS 6: RxJS 6 makes the whole library more tree-shakable thereby reducing the final bundle size. However, it has some breaking changes like operators chaining is not possible instead, pipe() function (helps in better tree shaking) is introduced to add operators. They have also renamed some operators.
Service worker cache: If you have configured your app to support Progressive Web App, make sure to specify all the necessary static resources in the PWA config JSON. These static files will be cached in the client’s browser making the second time load much faster.
Cache-control header: cache-control header controls who caches the response under what condition and for how long thus eliminating the need for network round trip for the resources which are cached.
Third party packages: Review the third party packages you are using and see if better and smaller alternative is available as it may reduce the final size of your build.
Unnecessary use of third-party packages: If you include a third-party package just to achieve a small functionality which could be easily done natively with JavaScript or Angular then you are adding unnecessary size overhead to your app which could have been easily saved. For example, if you are including Lodash just to do a simple object filtering then it is totally unnecessary as you could do the same thing natively in JavaScript.
defer attribute: Mentioning defer attribute to your script tag will defer the loading of the scripts (sychronous) until the document is not parsed thus making your site interactive quicker. For angular-cli app currently there is no way to add this automatically during the build, you have to do it manually after the build.
async attribute: Just like the defer attribute, async delays the loading of scripts until the document is not parsed but without respecting the order of loading of the scripts. The best example to use it with google analytics script which usually independent of any other scripts.
Gzip compression: Gzip compression can greatly decrease the size of the response body and hence increase the speed of a web app. Make sure you have enabled gzip compression in your backend. For express.js you can add compression middleware.

Android Q is officially named Android 10

Jamal — Fri, 23 Aug 2019 01:17:29 +0000

Android Q is now simply Android 10
Google ditches dessert-themed Android names in a push for accessibility.
Mariella Moon Mariella Moon, 4h ago
Google has finally revealed Android Q's release name, and it's not Quiche, Quinoa or Quesadilla. In fact, it's not named after any dessert that starts with the letter Q at all -- the tech giant has decided to simply call it Android 10. In a blog post, the company said it's changing the way it names its releases altogether in a push for greater accessibility. "[W]e've heard feedback over the years that the names weren't always understood by everyone in the global community," the company wrote.

Since L and R aren't always distinguishable when spoken in some languages, for instance, it's not immediately obvious for some people that Android Lollipop came after KitKat. The names of some previous Android versions aren't known desserts in certain parts of the world either. In other words, while the names are fun, they don't always resonate with users. The new scheme sounds much less quirky and delicious, but it'll likely serve Google's purpose: come up with more relatable and intuitive names. "[W]e think that at version 10 and 2.5 billion active devices," the blog post reads, "it was time to make this change."
Top Android 10 features you need to know about:-

1.The iconic back button is going away

2.There's finally a system-wide dark mode!
3.Live Caption transcribes media locally in real-time
4.An improved share menu.
5.Big changes coming to permissions
6.New theming options.
7.Better support for foldable phones.

When will it be released?

On March 13, 2019, Android 10 Beta 1 was launched out in the wild and made available to download on the Pixel, Pixel 2, and Pixel 3 series. Beta 2 was released on April 3, Beta 3 debuted on May 7 during Google I/O, Beta 4 arrived on June 5, Beta 5 hit on July 10, and Beta 6 made an appearance on August 7.

Now, we're just waiting for the final build of Android 10 to be released at some point before Q3 is over.

HTTP response status codes List:

Jamal — Thu, 22 Aug 2019 09:08:02 +0000

HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped into five classes: informational responses, successful responses, redirects, client errors, and server errors. The below status codes are defined by .

1.Information responses

100 Continue
101 Switching Protocol
102 Processing (WebDAV)
103 Early Hints

2.Successful responses

200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
207 Multi-Status (WebDAV)
208 Already Reported (WebDAV)
226 IM Used (HTTP Delta encoding)

3.Redirection messages

300 Multiple Choice
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
306 unused
307 Temporary Redirect
308 Permanent Redirect

Client error responses

400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Payload Too Large
415 Unsupported Media Type
415 Unsupported Media Type

421 Misdirected Request
422 Unprocessable Entity (WebDAV)
423 Locked (WebDAV)
424 Failed Dependency (WebDAV)
425 Too Early

429 Too Many Requests
451 Unavailable For Legal Reasons

5.Server error responses

500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
506 Variant Also Negotiates
507 Insufficient Storage (WebDAV)
508 Loop Detected (WebDAV)
510 Not Extended
511 Network Authentication Required

ALL these are same for every for Chrome,Edge,Firefox,Internet Explorer,Opera, Safari,Android webview Chrome for Android,Firefox for Android Opera for Android Safari on iOS Samsung Internet............etc