Accessible by all(no barriers that prevent interaction or access to the web)

Web Accessibility- Means creating a web application for all. Whenever we create a web application, we always should consider that whether this application can be access by all kinds of people. there should no barriers for people with disabilities to access your web application.

As per data given by the ‘world bank’ about 1 billion people around the world are having some form of disability and they are contributing more than 8 trillion disposal income to the economy. So this is the factor that we have to keep…


New ES2020/ES2021 features you may have missed

TC39 — is the organization behind the standardization of the ECMAScript (JavaScript) specification

ES2020

Dynamic Import — There are many cases when a section of your code is dependent on the module which is not loaded initially but needed if a user visits that conditional section- In that case loading the conditional module as default will be not good practice. So, now we have syntax for conditional loading a module or say loading a module dynamically.

if(condition){import(‘/modules/my-module.js’)
.then(module => {
module.loadPageInto(main);
})

Nullish Coaslescing — Returning the second operand when the first one…


Before going in deep, let's start with some breakfast like things-

Ivy- makes Angular simpler, faster, and easier to maintain(fine-tuning the balance between static checks and dynamic constructs to ensure Angular continues to provide type checking, efficient build-time optimizations, and fast change detection)

View Engine- Compilation and rendering pipeline.

Ivy Everywhere- The approach of converging the Angular ecosystem on Ivy.

Angular v12- New updates In Detail-

Moving Closer to Ivy Everywhere:
1.
View Engine has been deprecated
2. Current libraries using View Engine will still work with Ivy apps (no work is required by developers)
How it works
1. Deprecate View Engine and disable the functionality for creating new…


One Repo + Multiple Projects + Shared Libraries

Def- Monorepo is a software development strategy where applications are stored in a single repository where libraries are shared between. Companies like Google, Microsoft, Facebook, Twitter, and other companies using the concept of Monorepo.

Why Monorepo

  1. Code Reuse
  2. Better Dependency Management
  3. Single Node_Module Folder
  4. Single Package.Json

Problems/Disadvantages with Monorepo

  1. Setting up the entire project
  2. Maintaining Configurations
  3. Require a lot of coordination while the release process

SOLID is an acronym for the first five object-oriented design (OOD) principles.

SOLID stands for:
S — Single-responsibility Principle.
O — Open-closed Principle.
L — Liskov Substitution Principle.
I — Interface Segregation Principle.
D — Dependency Inversion Principle.

Single-responsibility Principle-
A class should have one, and only one responsibility and it should have only one reason to change.

Open-closed Principle-
Classes should be open for extension and closed to modification. Changing the current behavior of a Class will affect all the systems using that Class.

Liskov Substitution Principle-
Subclasses should be substitutable for their base classes. …


React Core Team released an alpha version of React18 recently. This release is more focused on UI and internals of React.

As per React team on June 08, 2021 — “We don’t have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.”

Want to Try React 18

Use the following commands for React 18

npm install react@alpha
npm install react-dom@alpha

What’s coming in React 18

Root API —

A new Root API is introduced in React18 for creating ROOT level DOM

Benefits — 
1. Easy to use hydrate function
const root = ReactDOM.createRoot(container, …


Content-Security-Policy HTTP response header helps you reduce risks like XSS, data injection attacks, and ClickJacking.

Content-Security-Policy(HTTP response header) used by modern browsers to enhance the security of the web page.

How to Enable CSP-
We can enable CSP in two ways -:
1. FROM SERVER WITH RESPONSE HEADER
2. SET AS META TAG

FROM SERVER WITH RESPONSE HEADER
Configure your webserver to return the Content-Security-Policy HTTP header

SET AS META TAG
<meta http-equiv=”Content-Security-Policy” content=”CSP Directive Reference”>
ex- <meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’; img-src https://*; ”>

CSP Directive References

default-src— Directive defines the default policy for fetching resources such as JavaScript, Images, CSS, Fonts, AJAX…


currentColor acts like a variable for the current value of the color property on the element.

//Html<div>Hello from currentColor</div>//cssdiv {    color: blue;  
border: 5px solid currentColor;
box-shadow: 0 0 5px solid currentColor; }

clamp()

clamps a value between an upper and lower bound
font-size: clamp(min, range, max);
font-size: clamp(1rem, 1vw + 1rem, 2rem);

Means-
Minimmum font size will be 1 rem
Max Font size will be 2 rem
Range — 1vw + 1rem
if Range value gets calculated less than min value(here 1rem) then 1 rem will be set as font size
if Range value gets calculated more than max value(here 2rem) then 2 rem will be set as font size
if Range value gets calculated between max value(here 2rem) and min value (here 1rem) then in that case whatever range value is calculated will be applied.

Max()
width: max(40%,300px)
it means min-width:300px and width:40%

Max()
width: min(40%,300px)
it means max-width:300px and width:40%

Happy learning 👏👏


Notifications are just like SMS but cost nothing, So most companies/businesses prefer it for sending offers, info to their customer who is using their mobile App.

Notifications Types-
1. Local Notifications
2. Push Notifications

Local Notifications — These are triggered by App itself. Ex. Alarm Reminder, Calendar Reminder

Push Notifications — Received By App and shown back to users locally.

Let’s Do Setup Local Notifications

Step 1. In Your React-Native APP install, following Packages

expo install expo-notifications — Used for Providing functions for notifications

expo install expo-permissions — In IOS devices, for notifications, we have to ask user permission

Step 2. Add “useNextNotificationsApi”: true in App.json for Android Obj like below image

Anil Verma

Hi there 👋, I am Anil Verma, a full stack web developer, and JavaScript enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store