ReactJS and Virtual DOM Diffing

 Here's a nice article on ReactJS, and Virtual DOM: https://medium.com/@happymishra66/virtual-dom-in-reactjs-43a3fdb1d130

TypeScript: A basic understanding

• TypeScript is a superset of JavaScript.
• TypeScript file gets transpiled into a JavaScript file.
• TypeScript is all about Types. A JavaScript variable can be assigned with any primitive type. TypeScript on the other hand helps to define the type of a variable.
• Following are the pre-defined types in TypeScript: boolean, bigint, null, number, string, symbol, object, undefined, any, unknown, never, void.
• On the other hand, TypeScript provides two syntaxes to build types: Interfaces and Types.
• Also, TypeScript helps you to create complex types by combining simple ones. There are two popular ways to do so: Unions, Generics.
• Read more: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html. This page is good enough to get a clear understanding of TypeScript.

Other references:

https://objectcomputing.com/resources/publications/sett/typescript-the-good-parts

https://www.typescriptlang.org/play#show-examples

Jest (just) in Five Minutes

• What is Jest?
• Jest is a JavaScript testing framework maintained by Facebook, Inc.

• How to set up Jest?
• https://jestjs.io/docs/en/getting-started

• Any easy tip to remember the syntactical steps of what you do when you write a test?
• DIE Matchers (Describe the Test(It) that Expects the result to Match the expectation)

• How does Jest supports mocking?
• jest.fn - allows you to mock a function. All mock functions have this '.mock' property.
• jest.mock - allows you to mock a module (module is the JavaScript module that was exported using module.exports or export default)
• jest.spyOn - allows you to mock either the whole module or the individual functions of the module. At its most general usage, it can be used to track calls on a method (read this nice article: https://blog.echobind.com/how-to-mock-using-jest-spyon-d13d57a8434d)
• NOTE: you can't spy something that doesn't exist on the object.

• How does the mock functions help you in the testing?
• Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with new, and allowing test-time configuration of return values. Read more: https://jestjs.io/docs/en/mock-functions

• How do I mock an API call using Jest? Well, thanks to this blog given below...
• https://dev.to/zaklaughton/the-only-3-steps-you-need-to-mock-an-api-call-in-jest-39mb

• What is React-Testing-Library (RTL)?  
• RTL is a light-weight solution for testing react components. Unlike Enzyme, React will test DOM nodes instead of component instances.
• https://testing-library.com/docs/react-testing-library/intro/
• https://blog.echobind.com/writing-functional-tests-with-react-testing-library-part-1-470870ee1a6

What if I try here to cover a little bit on Jasmine?

• How does Jasmine supports mocking?
• jasmine.createSpy - to mock a function
• jasmine.createSpyObj - to mock a module
• jasmine.spyOn - to mock the individual functions of the module

About Web Accessibility in 5 simple steps

 I know you are already moving away because I touched this subject, the accessibility. But spend 5 minutes of watching this video and you will get a gist of a11y in no time:

https://www.youtube.com/watch?v=2zpcDL9r-QI

Learn .NET Tutorial

 I was browsing thru and found this web site: https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/intro. Looks good for a beginner, happy coding :)

Useful tutorial from MSFT on .net

https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/intro

https://docs.microsoft.com/en-us/dotnet/fundamentals/

https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-5.0

Azure

Build Azure pipeline to build, test, deploy .net apps: https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/dotnet-core?view=azure-devops&tabs=dotnetfive

Visual Studio Code IDE

Also, this is the link to download VisualStudio for Mac: https://visualstudio.microsoft.com/vs/mac/

DOM, Shadow DOM, and Virtual DOM

Found this article today that made a good effort in explaining the DOM, Shadow DOM, Virtual DOM and the differences between them.

Read on:

https://www.blog.duomly.com/what-is-the-difference-between-shadow-dom-and-virtual-dom/

Node express up and running in 5 minutes

Follow the guidelines here: https://expressjs.com/en/starter/generator.html

All in all, from command prompt:

1. npx express-generator my-app
2. cd my-app
3. npm install
4. npm start