How to improve your React App's load time

 Stumbled on this blog post that every react app developer should read: https://www.infoq.com/articles/reduce-react-load-time/

CSS: Position Sticky

A 5-minute read on CSS sticky: https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46 

What does npm run do?

 npm run helps to run the scripts defined in package.json, read more: https://stackoverflow.com/questions/49275342/what-npm-run-do

OO vs FP

 Fumbled across this article that explained in simple terms the difference between Object Oriented Program Vs Functional Programming.

https://www.codenewbie.org/blogs/object-oriented-programming-vs-functional-programming

OAuth

 What if a little thing that you learned increases your appetite and inquisitiveness to learn more? I found the following you tube introductory tutorial on OAuth and got into the rabbit hole of learning more. Check it out:

https://www.youtube.com/watch?v=t4-416mg6iU

About OAuth flows from the same presenter:

https://www.youtube.com/watch?v=3pZ3Nh8tgTE

Here's another one from the same author on JWT:

https://www.youtube.com/watch?v=soGRyl9ztjI

Real-time apps

 Could somebody please explain me in simple english what real-time apps mean?

https://www.freecodecamp.org/news/5-ways-to-build-real-time-apps-with-javascript-5f4d8fe259f7/#:~:text=Real%2Dtime%20apps%20are%20those,time%20is%20a%20messaging%20application.

Android development

 I will start with the reference web sites before I write any details:

Android

A simple tutorial for a beginner: 

https://www.tutorialspoint.com/android/index.htm

Android API: 

https://developer.android.com/reference/packages

Get Android Studio from here:

https://developer.android.com/studio

Application Fundamentals:

https://developer.android.com/guide/components/fundamentals

Kotlin

Kotlin crash course: 

https://blog.kotlin-academy.com/8-minute-crash-course-on-kotlin-programming-language-e8a804ed3d8a

Kotlin by example:

https://play.kotlinlang.org/byExample/overview?_ga=2.6925172.73421686.1613236114-1542845850.1613236112

Kotlin programming language:

https://www.geeksforgeeks.org/kotlin-programming-language/

Installing Kotlin for mac to run apps from command prompt:

https://medium.com/beware-of-the-app/using-kotlin-from-cli-on-mac-4560b5c70604

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/