Make a div fill the height of the remaining screen space

.the-container-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto min-content;
height: 100vh;
}
.view-to-remain-small {
grid-row: 2;
}

.view-to-be-stretched {
grid-row: 1
}

Safely identify null, nil, undefined and empty in javascript / typescript

One of the main differences between javascript family with languages like java, c++, python is the management of null and undefined values.

Javascript is loosely types programming lanuage and the grandparent of all web scripting languages. But maintaing null…


How to make all HTMLElements inside an <button> tag clickable?

Simple css solution is to disable pointer event of all other HTMLElements inside a button. This way only the button gets clicked no matter where you as a user click.

<button> 
<svg> <use xlink:href=”#gear”></use> </svg>
</button>

In the above code, clicking on svg does not means onClick event for the button will be triggered. If we use the simple css solution mentioned below, a click on svg element will trigger onClick event for the button.

button > * { 
pointer-events: none;
}

  1. List all keys
ls -al ~/.ssh/*.pub

2. Remove all keys

rm ~/.ssh/id_*.pub

3. Create keys

ssh-keygen -o -t rsa -b 4096 -C "email@example.com"

3. Copy keys signed with ed25519 algorithm

cat ~/.ssh/id_ed25519.pub | clip

4. Test ssh works

ssh -T git@(host t.ex. git.int.verket.se)

NVDA is a great tool for testing accessibility. It is the top free screed reader that is used worldwide. But if you just need it for testing your website, you do not need to install it.

If you install NVDA it starts automatically when you start your PC and often…


  1. When using an image as presentation / style, that will only be used for example as background, create an empty alt=’’ and role=’presentation’, then screen reader won’t read it
<img src="assets/background-img-2.svg" alt="" role="presentation">

2. If you have used an icon font in an span tag, by default it will not say anything in screen reader. Even aria-label won’t work. An workaround is

<span aria-label="This application is incomplete" class="fa-minus" role="img"></span>

3. If you have a <p> or <span> or <div> that is so important that the screen reader should read it in reading mode, then it needs to be tabbable with tabIndex=0 and role=”document”

<div tabIndex=”0” role=”document”>This is an important text that should be read in an screen reader.</div>

What is ngClass

The ngClass directive takes an expression that will be used to determine which state styles to apply at a given time to the styled element.

Using ngClass

The expression passed on to ngClass can be:

  • an object
<button [ngClass]=”{ btn:true, ‘btn-primary’:false}”>will become <button class="btn">
  • an array
<button [ngClass]=”[‘btn’, ‘btn-primary’]”>Button</button>will become <button class="btn btn-primary">
  • a string
<button [ngClass]=”’btn btn-primary’”>

Lets look at a more complete example using the object expression

/** parentComponent.component.ts **/
calculateClasses(){
return {
btn: condition ? true: false,
‘btn-primary’: true,
‘btn-extra-class’: this.someBooleanVariable
};
}
/** parentComponent.component.html**/
<button [ngClass]="calculateClasses()"

JSON.stringify converts almost all kind of typescript objects, arrays, formGroups into JSON formatted string.

JSON.stringify(object/array/formGoupValue) 

An alternative to JSON.stringify is string interpolation notation. Ex.`{$value}` or `{$object.property}`

Example using both JSON.stringify and string interpolation

this.formGroup.valueChanges.subscribe(val => {console.log(‘Changed: {$val.name} : {$val.password} ’);console.log('Changed: ' + JSON.stringify(val));});

We can do similar from Angular template using jsonPipe to quickly show object / array / formGroup value in JSON format in any HTML page

<b>Current Values:</b>{{profileForm.value | json}}First Name value: {{profileForm.get(‘firstName’).value | json}}

Scenario: We want to acccess an validation function located in parentComponent from childcomponent.

Step 1 : Create childComponent and declare input() that takes the function referense as parameter.

selector : ['c-child-component']
@Component
export class childComponent{
input() validationFunctionFromParent: any;
}
<button [ngClass]=”validationFunctionFromParent”>

Step 2: From the parentComponent pass the function to childComponent

<c-child-component [validationFunctionFromParent]="testValidationFunction()">
</c-child-component>
testValidationFunction(){
return {
btn: condition ? true: false,
‘btn-primary’: true,
‘btn-extra-class’: this.someBooleanVariable
};
}

Scenario: Get all visible buttons.

CSS

button.hiddenButtons{
display: none;
}
button.hiddenButtons2{
visibility: hidden;
}

Typescript / Javascript ES6

const buttons = document.querySelectorAll(‘button’);const visibleButtonArray = […buttons].filter((element) => window.getComputedStyle(element).display !== ‘none’ && 
window.getComputedStyle(element).visibility !== 'hidden'
);

Steps-

  1. First get all the button elements by querySelectorAll. It returns a NodeList<Element> (Node list of elements).
  2. Then convert it inte an array using three dots […NodeList] and use the es6 filter option that returns an array with desired values and takes away unwanted ones.
  3. In the example above, elements that does not have display = ‘none’ or visibility = ‘hidden’ will be filtered out from array

Be-aware : querySelector on style does not work in Typescript or Javascript

querySelectorAll (‘button:not([style*="display:none"])’) 

Above code may work only if you write inline css. Ex. <div style=”display: none”>

Monir Khan

System developer, Swedish board of agriculture

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store