My Years of Learning @myyearsoflearning - Tumblr Blog

ARIA-Accessible Rich Internet Applications

Accessible Rich Internet Applications specification , which defines a way to make Web content and Web applications more accessible to people with disabilities.

Chrome Extension :

https://accessibilityinsights.io/en/downloads/

Tools :

https://www.totalvalidator.com/downloads/index.html

https://webaim.org/

https://www.powermapper.com/products/sortsite/checks/accessibility-checks/

Links:

https://www.w3.org/TR/wai-aria-practices-1.1/

How to make HTML form elements Web Accessible

Today, we will make textboxes, checkboxes and buttons web accessible using ARIA attributes.In 2021, Develop web applications that are access

Source Code

#Youtube

Azure Static Web Apps

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

The workflow of Azure Static Web Apps is tailored to a developer's daily workflow. Apps are built and deployed based off code changes.

When you create an Azure Static Web Apps resource, Azure interacts directly with GitHub or Azure DevOps to monitor a branch of your choice. Every time you push commits or accept pull requests into the watched branch, a build is automatically run and your app and API is deployed to Azure.

Static web apps are commonly built using libraries and frameworks like Angular, React, Svelte, Vue, or Blazor where server side rendering is not required. These apps include HTML, CSS, JavaScript, and image assets that make up the application. With a traditional web server, these assets are served from a single server alongside any required API endpoints.

With Static Web Apps, static assets are separated from a traditional web server and are instead served from points geographically distributed around the world. This distribution makes serving files much faster as files are physically closer to end users. In addition, API endpoints are hosted using a serverless architecture, which avoids the need for a full back-end server all together.

Key features

Web hosting for static content like HTML, CSS, JavaScript, and images.

Integrated API support provided by Azure Functions with the option to link an existing Azure Functions app using a standard account.

First-class GitHub and Azure DevOps integration where repository changes trigger builds and deployments.

Globally distributed static content, putting content closer to your users.

Free SSL certificates, which are automatically renewed.

Custom domains to provide branded customizations to your app.

Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.

Authentication provider integrations with Azure Active Directory, GitHub, and Twitter.

Customizable authorization role definition and assignments.

Back-end routing rules enabling full control over the content and routes you serve.

Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

What you can do with Static Web Apps

Build modern web applications with JavaScript frameworks and libraries like Angular, React, Svelte, Vue, or using Blazor to create WebAssembly applications, with an Azure Functions back-end.

Publish static sites with frameworks like Gatsby, Hugo, VuePress.

Deploy web applications with frameworks like Next.js and Nuxt.js.

Source : https://docs.microsoft.com/en-us/azure/static-web-apps/overview

Deploying Angular to Azure Static Web Apps

PWA Service Worker

Angular 10 -11 waitForAsync

In Angular 10.1.0, waitForAsync() has replaced async().async() has been marked as deprecated and will be removed entirely in version 12.

more : https://github.com/angular/angular/pull/37583

Reorder Columns with Bootstrap

HTML <datalist> Tag

Angular Lifecycle Hooks

1)Constructor: A default method which is called when the class is instantiated.

2)ngOnChanges: Executes when a new component is created, when one of the bound properties with @Input changes, also it is the only hook that takes an argument when it is called which is called as SimpleChanges.

3)ngOnInit: Called once the component is initialized. This doesn't allow the component to be visible over the DOM. This runs just after the constructor.

4)ngDoCheck: Runs when change detection runs. It also runs if there is no change and even if it is just an event that occurred, just in case to make sure if there is something that has changed. (for eg: It will run after a button click event irrespective of that it is making ant change or not)

5)ngAfterContentInit: This is called after content(ng-content) has been projected into the view.

6)ngAfterContentChecked: This is called after every projected content has been checked.

7)ngAfterViewInit: Called after the components view (and child view) has been initialized.

8)ngAfterViewChecked: Called every time the view (and child view) has been checked.

9)ngOnDestroy: Called when we generally use an if condition and render the component accordingly. This is mainly called right before the object is destroyed by the angular.

#angular

ngOnDestroy and other alternates

Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Cleaning up on instance destruction

Put cleanup logic in ngOnDestroy(), the logic that must run before Angular destroys the directive.

This is the place to free resources that won't be garbage-collected automatically. You risk memory leaks if you neglect to do so.

Unsubscribe from Observables and DOM events.

Stop interval timers.

Unregister all callbacks that the directive registered with global or application services.

The ngOnDestroy() method is also the time to notify another part of the application that the component is going away.

note : If the parent component is removed while the *ngIf expression is true, the parent and child will be destroyed together. I don't know what ngDestroy() is called first though.

Other options, Using takeUntil(..) or Using take(1)

optimized usage – Using take(1)

A lot of times when we fetch data into our angular component, say from a REST API, we don’t expect that value to change very often.

For example, say I’m fetching a value of a feature flag from a REST API call, I know I can just take the first value from the observable and be done with it. I just require that value to initialize the behavior of the component (the first time).

For these scenarios, we can go further and use the operator take() from rxjs and just get the first value emitted from the observable. After the first value, the observable actually completes (preventing any more values from being emitted/consumed) and there is nothing the developer has to do to manage it.

Well, if you start thinking about it, there are actually a lot of places where you can get away with using take(1). Not all observable data in your view requires it to change every time a new item is pushed into the observable. In fact, some observables (backed by REST API calls) do not even emit more than 1 value.

Source :

THE PROPER WAY TO DESTROY ANGULAR COMPONENTS

@angular/platform-browser - Title

"Platform-browser" Package is used to control some of the following browser things.

We can change the title of the page dynamically.

Its used to set,get,update browser meta data's

Also we can disable or enable browser debugging tool with the help of functions available in this package

more : angular.io

#angular

NPM Scripts

NPM scripts are, well, scripts. We use scripts to automate repetitive tasks. For example, building your project, minifying Cascading Style Sheets (CSS) and JavaScript (JS) files. Scripts are also used in deleting temporary files and folders, etc,. There are many ways to pull this off — you could write bash/batch scripts, or use a task runner like Gulp or Grunt. However, a lot of people are moving over to NPM scripts for their simplicity and versatility. They also offer possibility of having fewer tools to learn, use, and keep track of.

Source : Introduction to NPM Scripts

more details : NPM Script and Why NPM Scripts

npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

This npm-run-all package provides 3 CLI commands.

npm-run-all

run-s

run-p

The main command is npm-run-all. We can make complex plans with npm-run-all command.

Both run-s and run-p are shorthand commands. run-s is for sequential, run-p is for parallel. We can make simple plans with those commands.

#npm #npm-run-all

Remote debugging an Azure Web App

How to Debug Azure App Services Using Remote Debugging in Visual Studio

#azure #webapp

NCRONTAB expressions

An NCRONTAB expression is similar to a CRON expression except that it includes an additional sixth field at the beginning to use for time precision in seconds: Source

{second} {minute} {hour} {day} {month} {day-of-week}

The default time zone used with the CRON expressions is Coordinated Universal Time (UTC). To have your CRON expression based on another time zone, create an app setting for your function app named WEBSITE_TIME_ZONE.

Details : NCrontab: Crontab for .NET

CRON Expression

The Cron time string format consists of five fields that Cron converts into a time interval. Cron then uses this interval to determine how often to run an associated command on your Drupal site.

Online Editor : https://crontab.guru/

Note: It is also possible to specify */n to run for every n-th interval of time. Also, specifying multiple specific time intervals can be done with commas (e.g., 1,2,3)

For example, a Cron time string of 0 10 15 * * executes a command on the 15th of each month at 10:00 A.M. UTC.

Example : runs every hour from 9 AM to 5 PM - > 0 0 9-17 * * *

Example : At every 5th minute past hour 1, 2, and 3 > */5 1,2,3 * * *

Details : support.acquia.com and Wiki

#cron

Azure Web Jobs - C# - revisit

WebJobs is a feature of Azure App Service that enables you to run a program or script in the same instance as a web app, API app, or mobile app.

WebJob types : continuous and triggered WebJob

For the scheduling to work reliably, enable the Always On feature. Always On is available only in the Basic, Standard, and Premium pricing tiers.

Using Azure WebJobs in .NET Applications

Azure WebJobs with .NET Core

Issues : AzureWebJobsDashboard Configuration Error

You need to set the AzureWebJobsDashboard connection string in the portal in your Web App Application Settings blade (steps to do that here). The Dashboard runs as a separate site extension and doesn't have access to app.config. Add the connection string to the connection strings section on the settings blade.

Open the Azure (Management) Portal at https://portal.azure.com

Goto Home > App Services

Select the App service that is hosting your WebJob

Goto Settings > Choose Application settings

Scroll down to Connection strings

Add a new connection string with Name as 'AzureWebJobsDashboard' and Value as . from Storage Account connection string : more

Press Save Button ( at the Page Top)

The AzureWebJobsDashboard connection string is your Azure Storage Account used by the Azure SDK to store logs used by the WebJobs dashboard.

Timer trigger are used for scheduled jobs,

Here the list of triggers in Microsoft.Azure.WebJobs.Extensions

#azure #webjobs

Three dots ( … ) in JavaScript

Spread syntax can be used when all elements from an object or array need to be included in a list of some kind. The spread syntax is a new addition to the set of operators in JavaScript ES6. Source : mozilla.org

more details

#javascript #ES6

HTTP Strict Transport Security header

HTTP Strict Transport Security is a web security policy sent via header, that forces browsers to make secure HTTPS connections when they visit a specified website. This prevents cookie hijacking and protocol downgrade attacks. This is accomplished by setting a Strict-Transport-Security parameter that forces all connections to be made securely and disregards and scripts that attempt to load assets over unsecure HTTP. The header sets a period of time that the parameter applies for. Source : Wiki

MSDN : HSTS Settings for a Web Site

more details,

#hsts #security

Trending Blogs

Recently Viewed Blogs

My Years of Learning