Tuesday, May 18, 2021

@Media , Transition, CSS Property

<!DOCTYPE html>
<html>
<head>
<style> 

div {
  width: 100px;
  height: 100px;
  background: green;
  transition: background 0s, width 3s;
}

@media screen and (max-width : 600px){
  div {
      width: 100px;
      height: 100px;
      background: cyan;
  }
}

div:hover {
  width: 300px;
  background:yellow;
  transform:rotate(10deg)
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div>Golu</div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Transform CSS Property

<!DOCTYPE html>
<html>
<head>
<style> 
  div.a {
     width: 150px;
     height: 80px;
     background-color: yellow;
     //-moz-transform: rotate(20deg);
     //-ms-transform: rotate(20deg);
     -webkit-transform: rotate(20deg);
     //transform: rotate(20deg);
  }
</style>
</head>
<body>
<h1>The transform Property</h1>
<div class="a">Hello World!</div>
</body>
</html>

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/

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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Patent use Private use	Disclose source License and copyright notice 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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Patent use Private use	Disclose source License and copyright notice 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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Patent use Private use	Disclose source License and copyright notice 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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Patent use Private use	Disclose source License and copyright notice 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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Patent use Private use	License and copyright notice 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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Private use	License and copyright notice	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.

Permissions	Conditions	Limitations
Commercial use Distribution Modification Private use	License and copyright notice for source	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.

Permissions	Conditions	Limitations
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 ?

Karan Kaw's Blog