Wednesday, April 28, 2021

Custom Attribute ANGULAR ??

https://codecraft.tv/courses/angular/custom-directives/creating-a-custom-directive/

https://www.youtube.com/watch?v=YAlxSudXg_g&list=PL-TLnxxt_AVGz9wRWkCajUkcH5zfa9JKP&index=34&t=9s

https://youtu.be/YAlxSudXg_g  [Make a Custom Angular Directive]


<div class="card card-block" ccCardHover>...</div>


import { Renderer, Directive, ElementRef } from '@angular/core';

import {  } from '@angular/core';

@Directive({

  selector:"[ccCardHover]"

})

class CardHoverDirective {

  constructor(private el: ElementRef, private renderer: Renderer) { 

    //renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'gray'); 

	el.nativeElement.style.backgroundColor = 'gray';

  }

}

SASS, SCSS ? What is that ?

https://sass-lang.com/

https://sass-lang.com/guide - Variables, Nesting, Mixins, Partials, Modules, Inheritance, Operators



  • npm install -g sass
  • sass input.scss output.css 
  • sass --watch input.scss output.css


2 Types of Syntaxes
  • .scss - Brackets, Semicolon, More Popular
  • .saas - Indentation, Newline


When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files. 

---------------------------------------------------------------------------------------------------------------------------------------------------------------

https://dev.to/olawanle_joel/sass-vs-scss-odf

https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass/5654511#5654511

From the homepage of the language
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax.
 This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). 
Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS.
Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. 
Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
SASS is an interpreted language that spits out CSS. The structure of Sass looks like CSS (remotely), but it seems to me that the description is a bit misleading; it's not a replacement for CSS, or an extension. 
It's an interpreter which spits out CSS in the end, so Sass still has the limitations of normal CSS, but it masks them with simple code.

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------

Tuesday, April 20, 2021

Angular - Unit TESTING - Karma , Jasmine

Unit tests can be written in a variety of Javascript testing framework (Jasmine, QUnit, Mocha) ; this is JS code that is run in the browser.


Karma is a browser test runner.

Karma can launch the page in many browsers (FF, Chrome, or headless browsers like PhantomJs.)

The custom web page will be a bit different for each testing framework ; this is why karma has plugins for different frameworks.

Software Licenses

https://choosealicense.com/licenses/

https://www.synopsys.com/blogs/software-security/5-types-of-software-licenses-you-need-to-understand/


  1. Home

Licenses

Open source licenses grant permission for anybody to use, modify, and share licensed software for any purpose, subject to conditions preserving the provenance and openness of the software. The following licenses are sorted by the number of conditions, from most (GNU AGPLv3) to none (Unlicense). Notice that the popular licenses featured on the home page (GNU GPLv3 and MIT) fall within this spectrum.

If you’re looking for a reference table of every license on choosealicense.com, see the appendix.

GNU AGPLv3

Permissions of this strongest copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights. When a modified version is used to provide a service over a network, the complete source code of the modified version must be made available.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Patent use
  •  Private use
  •  Disclose source
  •  Network use is distribution
  •  Same license
  •  State changes
  •  Liability
  •  Warranty

View full GNU Affero General Public License v3.0 »

GNU GPLv3

Permissions of this strong copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Patent use
  •  Private use
  •  Disclose source
  •  Same license
  •  State changes
  •  Liability
  •  Warranty

View full GNU General Public License v3.0 »

GNU LGPLv3

Permissions of this copyleft license are conditioned on making available complete source code of licensed works and modifications under the same license or the GNU GPLv3. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights. However, a larger work using the licensed work through interfaces provided by the licensed work may be distributed under different terms and without source code for the larger work.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Patent use
  •  Private use
  •  Disclose source
  •  Same license (library)
  •  State changes
  •  Liability
  •  Warranty

View full GNU Lesser General Public License v3.0 »

Mozilla Public License 2.0

Permissions of this weak copyleft license are conditioned on making available source code of licensed files and modifications of those files under the same license (or in certain cases, one of the GNU licenses). Copyright and license notices must be preserved. Contributors provide an express grant of patent rights. However, a larger work using the licensed work may be distributed under different terms and without source code for files added in the larger work.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Patent use
  •  Private use
  •  Disclose source
  •  Same license (file)
  •  Liability
  •  Trademark use
  •  Warranty

View full Mozilla Public License 2.0 »

Apache License 2.0

A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Patent use
  •  Private use
  •  State changes
  •  Liability
  •  Trademark use
  •  Warranty

View full Apache License 2.0 »

MIT License

A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Private use
  •  Liability
  •  Warranty

View full MIT License »

Boost Software License 1.0

A simple permissive license only requiring preservation of copyright and license notices for source (and not binary) distribution. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Private use
  •  Liability
  •  Warranty

View full Boost Software License 1.0 »

The Unlicense

A license with no conditions whatsoever which dedicates works to the public domain. Unlicensed works, modifications, and larger works may be distributed under different terms and without source code.

PermissionsConditionsLimitations
  •  Commercial use
  •  Distribution
  •  Modification
  •  Private use
    •  Liability
    •  Warranty

    View full The Unlicense »

    The above licenses represent the entire spectrum of open source licenses, from highly protective to unconditional. One of these should work for most new open source projects. Many other open source licenses exist, including older versions of and close substitutes for some of the above. See the resources listed on our about page if you’d like to read more.

    Sunday, April 18, 2021

    UI/UX Concepts

    • Bootstrap [based on Flex] [Earlier on float]
    • Flexbox
    • CSS Grid
    • Float
    • Angular
    • Content < Padding < Border <Margin
    • em vs rem vs px vs %
    • inherited vs default 

    • JSON vs Javascript Object - "Keys" have quotes or not

    • CSS Box Model
    • @Mixins

    • LESS ?
    • SCSS ?
    • SASS ?

    Flexbox

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Bootstrap

    https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/



    Netflix OSS - Service Discovery (Eureka) Circuit Breaker (Hystrix) Intelligent Routing (Zuul) Client Side Load Balancing (Ribbon)

    http://salerno-rafael.blogspot.com/2016/08/spring-cloud-netflix-how-works-service.html


    Spring Cloud Netflix - How works Service Registration and Discovery


    Spring Cloud has a full stack for micro services. The main objective of the spring cloud is to provide a complete integration between Spring Boot and Netflix OSS project, where simple annotation is possible have some components used by Netflix running in your environment

    Some pattern provided by Netflix OSS that Spring Cloud provides: 
    • Service Discovery (Eureka)
    • Circuit Breaker (Hystrix)
    • Intelligent Routing (Zuul)
    • Client Side Load Balancing (Ribbon)

    In this post will talk about service discovery, showing the concept and how it is possible with a few annotation have the default working on a project with Spring Boot.
    Service Discovery is one of the key tenets of micro service based architecture. Trying to hand configure each client or some form of convention can be very difficult to do and can be very brittle. Eureka is the Netflix Service Discovery Server and Client. The server can be configured and deployed to be highly available, with each server replicating state about the registered services to the others.

    Why Use Service Discovery?
    Let's imagine we have many services dynamically distributed on the network. Where instances of services dynamically change because of auto-scaling, failures, upgrades, and we have no control of IP addresses, the name of the instance.
    In this situation the simplest would be if the service tell the server or other services where it is and if it is available.

    This is how the discovery service works, the service entered in the network and register on a server to make it available for the use of some other service.
    The pattern that will be addressed in this post will be The Server-Side Pattern Discovery.
    Where customers know where the server is and send to the server that is available.

    Registering:

    When a client registers with Eureka, it provides meta-data about itself such as host and port, health indicator URL, home page etc. Eureka receives heartbeat messages from each instance belonging to a service. If the heartbeat fails over a configurable timetable, the instance is normally removed from the registry.

    Status Page and Health Indicator:

    The network location of a service instance is registered with the service registry when it starts up. It is removed from the service registry when the instance terminates. The service instance’s registration is typically refreshed periodically using a heartbeat mechanism.
    Eureka’s Health Checks:

    By default, Eureka uses the client heartbeat to determine if a client is up. Unless specified otherwise the Discovery Client will not propagate the current health check status of the application per the Spring Boot Actuator. Which means that after successful registration Eureka will always announce that the application is in 'UP' state. Enabling Eureka health checks can alter this behavior, which results in propagating application status to Eureka. As a consequence every other application won’t be sending traffic to application in state other then 'UP'.

    Server code:





    Client 1 code:


                             defaultZone is the Eureka service address

    Tomcat port to client 1







    Client 2 code:

    The same of the client 1 but in other port

            Tomcat port to client 2


    STEPS TO RUN:

    1.The first step is run server:

    Will be available on http://localhost:8761 and will be showed some information’s and a screen with the instances available.
    2.The second step is run client, this client will be registered in the server:

    Now in the server is possible see the instance registered:
     

    3.The third step is run the second client:

    Now in the server is possible see the new instance registered:

    all instances already registered:
     

    In this links is possible see some information about instances:


    Health information image:
     

    Lombok

    https://projectlombok.org/features/GetterSetter

    Micro-FrontEnd

    https://medium.com/bb-tutorials-and-thoughts/6-different-ways-to-implement-micro-frontends-with-angular-298bc8d79f6b

    https://medium.com/bb-tutorials-and-thoughts/how-to-implement-micro-frontend-architecture-with-angular-e6828a0a049c

    Azure - Pipeline - Add Approver for Stage

    https://learn.microsoft.com/en-us/azure/devops/pipelines/process/approvals?view=azure-devops&tabs=check-pass