Use of Equations in Microsoft word.

Many of us don't know that we can do calculations and put equations in Microsoft Word. Below is the way you can put equations in any version of Microsoft Word.

Note:   If an "error" message comes, right-click it and select the toggle field code and make the correction.

Javascript Tips and Best Practices

1. Check property exists in an object

const emp = { empno : 1, name : 'rakesh', salary : 50000 }; const keySalaryExist = 'salary' in emp; console.log (keySalaryExist); // true const keyGenderExist = 'gender' in emp; console.log (keyGenderExist); // false

The in operator returns the boolean value true/false.
The in operator returns true if a property exists in the object or its prototype chain.

2. String to a number using the plus (+) operator

const num = '101'; console.log(+num); // 101 as string console.log(typeof +code) // 101 as number

The unary plus operator (+) is the fastest and preferred way of converting something into a number.

3. Mask numbers using slice and padStart

const adharNumber = '1234567890123456'; const last4Number = adharNumber.slice(-4); const maskadharNumber = last4Number.padStart(adharNumber.length,'*'); console.log(maskadharNumber); // output : ************3456

The slice() method returns selected elements in an array, as a new array. Negative numbers select from the end of the array.
The padStart() method pads the current string with another string until the resulting string reaches the given length. The padding is applied from the start of the current string.

4. Swap two variables

let num1 = 10; let num2 = 20; [num1,num2] = [num2, num1]; console.log(num1); // 20; console.log(num2); // 10;

Use destructuring assignment approach because it is short and expressive. Swapping is performed in just one line statement. It works with any data type like numbers, strings, booleans, or objects.

5. Check every element of the array using Array.every

const employees = [ {empno:1, name:'Suresh',designation:'Mgr',salary:8000}, {empno:2, name:'Suresh',designation:'Sales',salary:6000}, {empno:3, name:'Suresh',designation:'Mgr',salary:7000} ] const isAllMgr = employees.every((m) => m.designation === 'Mgr'); const salGt5K = employees.every((m) => m.salary > 5000); console.log(isAllMgr); // false; console.log(salGt5K); // true;

The Array every() method checks whether all the array elements pass the test implemented by the provided function.
It returns true if the function returns true for all elements.
It returns false if the function returns false for one element. When every() finds a false result, it will stop the loop and continue no more which improves the performance. The every() method does not change the original array.

6. Use of nullish coalescing operator with numbers

I have use lot of time || operator for the logical disjunction, but it ends when value is 0 in the variable. So found better way to handle this. let num1 = 0; let num2; const defaultNum1 = num1 || 1; const defaultNum2 = num2 || 2; console.log(defaultNum1); // 1; // as value is 0, it return 1 console.log(defaultNum2); // 2; // insted of using || let use ?? const defaultNum1 = num1 ?? 1; const defaultNum2 = num2 ?? 2; console.log(defaultNum1); // 0; console.log(defaultNum2); // 2;

A Nullish value is a value that is either null or undefined.
The Nullish Coalescing Operator (??) is a logical operator that accepts two values and returns the second value if the first one is null or undefined and otherwise returns the first value.

7. Filter Array with only values

Many times we have an issue with array to have empty values and need to handle we write extra code. To avoid it just you have to use filter(). let arr1 = [7,null,10,false,11] let arrval1 = arr1.filter(Boolean) console.log(arrval1) let arr2 = ['rakesh',null,,0,100,'patel'] let arrval2 = arr2.filter(Boolean) console.log(arrval2)

Pass the Boolean to Array.filter as the first argument.

HTML Tags, which does not require CSS or JS

(1) The <details> tag is used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands and displays the content within. The <summary> tag is used in conjunction with <details> to specify the details of a visible heading. 

 Here is an example:- <details> <summary>Loram Ipsum</summary> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </details>

Output

Loram Ipsumis simply dummied

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

---

(2) Tag <picture>
The <picture> tag gives you flexibility in specifying image resources. This tag is used in responsive designs. As it allows you to use multiple images of different sizes to nicely fill the browser viewport, so you don’t need to use one image that is scaled up or down based on the viewport width.
The <picture> element contains two tags: one or more <source> tags and one <img> tag.

Here is an example

<p>Resize the browser window to load different images.</p> <picture> <source media="(min-width:650px)" srcset="https://images.freeimages.com/images/large-previews/106/photographer-1464286.jpg"> <source media="(min-width:465px)" srcset="https://images.freeimages.com/images/large-previews/fd2/photographer-1436459.jpg"> <img src="https://images.freeimages.com/images/large-previews/579/my-camera-1-1435207.jpg" alt="Flowers" style="width:auto;"> </picture>

Output:

Resize the browser window to load different images.

---

(3) Tag <template>
The <template> tag is a container to hold some HTML content hidden from the user. This hidden content can be displayed by Javascript.

Here is an example

<h1>The template Element</h1> <p>Click the button below to display the hidden content from the template element.</p> <button onclick="showContent()">Show hidden content</button> <template> <h2>Image</h2> <img src="https://images.freeimages.com/images/large-previews/106/photographer-1464286.jpg" width="214" height="204"> </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script>

The template Element

Click the button below to display the hidden content from the template element.

Resets CSS for all browser default values

 

The CSS code snippet below resets all browser default values and makes your CSS codes work in the same way in all browsers and neutralizes browser incompatibility.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ‘’; content: none; } /** * remember to define focus styles! */ :focus { outline: 0; } /** * remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /** * tables still need ‘cellspacing=”0"’ in the markup */ table { border-collapse: collapse; border-spacing: 0; }

Input type = number, remove the arrow at the end

Input type = number, remove the arrow at the end

Example:

Without class

With class

<style> .no-arrow::-webkit-outer-spin-button, .no-arrow::-webkit-inner-spin-button { -webkit-appearance: none; } </style> <input type="number" /> <input type="number" class="no-arrow" />

Online status when working from home !! with Python Script

Run this program and your cursor will move regularly enough to keep your online status when working from home!

//install PIP, you need to type into the terminal

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python get-pip.py

pip --version

// Is used to control the mouse and keyboard.

pip install pyautogui

//Code to move mouse every 2 second of sleep.. moveRel(x,y) -- move by pixel

import pyautogui;

import time;

while True:

    pyautogui.moveRel(0, 10)

    time.sleep(2)

Sharepoint Online: Read user profile details.

Read current login user profile details in Sharepoint Online.

function getUserProfile(){ var urlString = _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties"; var call = $.ajax({ url: urlString, type: "GET", dataType: "json", headers: { Accept: "application/json;odata=verbose" } }); call.done(function (data,textStatus, jqXHR){ var Name = data.d.DisplayName; var email = data.d.Email; var oneUrl = data.d.PersonalUrl; var imgUrl = data.d.PictureUrl; var jobTitle = data.d.Title; var profUrl = data.d.UserUrl; }); call.fail(function (jqXHR,textStatus,errorThrown){ alert("Error retrieving Tasks: " + jqXHR.responseText); }); }//getUserProfile