Saturday, February 11, 2023

How do I disable my HP laptop keyboard and use an external keyboard | How to turn off a laptop keyboard | Permanently disable laptop keyboard

Understandably, Microsoft makes it a bit more difficult to permanently disable the keyboard. To do so, you’ll have to turn off Windows’ ability to automatically install the driver again. Without doing this, the keyboard will be back up and running every time you reboot your device.
  • Open the Start menu and type group policy into the search bar
  • Click the result named Edit group policy and the Local Group Policy Editor window should open
  • Now expand Computer Configuration then Administrative Templates then System followed by Device Installation then Device Installation Restrictions
  • Right-click the option marked Prevent installation of devices not described by other policy settings and choose Edit
  • From the window that appears, click the circle next to Enabled to select it and click OK to confirm
  • Now Open the Start menu and type device manager into the search bar or press Window + X button at the same time
  • Open the Device Manager, then find the Keyboards heading and double-click it
  • You should see two or three drivers listed here. Right-click on the keyboard you want to unstall and select action Uninstall or Uninstall device
  • For my case it's the keyboard named Standard PS/2 keyboard
  • It will require restart sometimes, and task completed

Thursday, February 9, 2023

How do I Refresh on page Focus - Web Development | How to refresh page after focus on browser tab

I would like to refresh a page after it got back into the focus
The tricky part is how do I determine when to refresh? Because ta may get focused many times in it's lifecycle.

First the window has to loose the focus (which could be determined through .blur() I assume and hope will work this way).

Only after the window which lost focus gets back into focus should trigger the refresh of itself and thats it.
In my development environment I added below snippet of JavaScript to the expected page - whenever the page becomes active after becoming inactive it reloads automatically, so for example if you type in your text editor then click back onto your browser the page will reload once without an infinite loop. It also works when chaining active tab or active window within the same browser session will occur.
var blurred = false;
window.onblur = function() { blurred = true; };
window.onfocus = function() { blurred && (location.reload()); };

html2pdf.js | Client-side HTML-to-PDF rendering using pure JS JavaScript

Import html2pdf using CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"/>
Once installed, html2pdf.js is ready to use. The following command will generate a PDF of #element-to-print and prompt the user to save the result:
var element = document.getElementById('element-to-print');
html2pdf(element);
Below is a advance example using header and footer:
var date = new Date().toISOString().split("T")[0];
var opt = {
    margin:       0.5,
    filename:     'work-log-report-' + date + '.pdf',
    enableLinks:  false,
    pagebreak:    { mode: 'avoid-all' },
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
};
var element = document.getElementById('element-to-print');
html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
    console.log("Done");

    var totalPages = pdf.internal.getNumberOfPages();
    for (var i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);
        pdf.setTextColor(150);
        pdf.text('Work Log Report - ' + date, (pdf.internal.pageSize.getWidth()/2) - 0.99, 0.35);
        pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth()/2) - 0.3, pdf.internal.pageSize.getHeight() - 0.25);
    }
}).save();
Output would be as below:

Live Example

html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.
Company Name Employee Name Country
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name
Some company name which is very bigemployee-name-without-any-space-between-those-wordsCountry-name

Tuesday, February 7, 2023

Convert URLSearchParams to a JavaScript Object | JavaScript jQuery Get Parameters from URL | Get Params from URL using JavaScript

Use the Object.fromEntries method and pass the URLSearchParams instance as an argument. This creates a JavaScript object from the parsed query parameters:
const params = Object.fromEntries(  
  new URLSearchParams(window.location.search)
)

// URL: example.com/path?foo=bar&name=futurestudio&num=1
// { foo: 'bar', name: 'futurestudio', num: '1' }
Here’s how it works: the URLSearchParams class implements JavaScript’s iterator interface. The iterator interface contains the Iterator#entries method. This entries methods returns an iterator providing an array of [key, value] pairs:
const params = new URLSearchParams('?foo=bar&name=futurestudio&num=1')

const iterator = params.entries()

iterator.next()  
// { done: false, value: ['foo', 'bar'] } 

iterator.next()  
// { done: false, value: ['name', 'futurestudio'] } 

iterator.next()  
// { done: false, value: ['num', '1] } 

iterator.next()  
// { done: true, value: undefined } 

How to Get URL Parameters with JavaScript

URL parameters (also called query string parameters or URL variables) are used to send small amounts of data from page to page, or from client to server via a URL. They can contain all kinds of useful information, such as search queries, link referrals, product information, user preferences, and more.
In modern browsers, this has become a lot easier, thanks to the URLSearchParams interface. This defines a host of utility methods to work with the query string of a URL.
Assuming that our URL is https://example.com/?product=shirt&color=blue&newuser&size=m, we can grab the query string using window.location.search:
const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m
We can then parse the query string’s parameters using URLSearchParams:
const urlParams = new URLSearchParams(queryString);
Then we call any of its methods on the result.

For example, URLSearchParams.get() will return the first value associated with the given search parameter:
const product = urlParams.get('product')
console.log(product);
// shirt

const color = urlParams.get('color')
console.log(color);
// blue

const newUser = urlParams.get('newuser')
console.log(newUser);
// empty string
Use the Object.fromEntries method and pass the URLSearchParams instance as an argument. This creates a JavaScript object from the parsed query parameters:

const params = Object.fromEntries(  
  new URLSearchParams(window.location.search)
)

// URL: example.com/path?foo=bar&name=futurestudio&num=1
// { foo: 'bar', name: 'futurestudio', num: '1' }
Checking for the Presence of a Parameter

You can use URLSearchParams.has() to check whether a certain parameter exists:
console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false
Getting All of a Parameter’s Values

You can use URLSearchParams.getAll() to return all of the values associated with a particular parameter:
console.log(urlParams.getAll('size'));
// [ 'm' ]

//Programmatically add a second size parameter.
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// [ 'm', 'xl' ]
Iterating over Parameters

URLSearchParams also provides some familiar Object iterator methods, allowing you iterate over its keys, values and entries:
const
  keys = urlParams.keys(),
  values = urlParams.values(),
  entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for(const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m

Monday, February 6, 2023

Prevent scroll position of window when focus on LeafLet Map - Mouse wheel zoom on leaflet map only after click - Leaflet map scrolls top on focus on Browsers

I have a leaflet map on an HTML page. When the map is focused the map jumps so that it's completely visible in the viewport. If the whole map doesn't fit, then the top of the map becomes aligned with the top of the viewport and the bottom just hangs off the end.
This is annoying, because then the whole page area jumped to top.
We need to add the listener immediately after the map initialized. So the whole thing becomes normal as we want like no scroll on focus.
const map = L.map('leaflet-js-map').setView([latLng[0].Longitude, latLng[0].Latitude], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    minZoom: 10,
    maxZoom: 18,
    attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);

map.once('focus', function(e) {
    console.log(e);
    if (map.scrollWheelZoom.enabled()) {
        map.scrollWheelZoom.disable();
    }
    else {
        map.scrollWheelZoom.enable();
    }
});