Below are collected things that helped us overcome encountered issues while working on specific features of our Clients projects.

We use wkhtmltopdf a lot in a bunch of projects, below are some discoveries ofc powered by searching on StackOverflow

https://stackoverflow.com/questions/42005819/how-to-insert-a-page-break-in-html-so-wkhtmltopdf-parses-it

Reminder: WKHTMLTOPDF ignore the media queries for print because it's actually not printing

Below some nice gems on the topic

WKHTMLTOPDF pagebreaks fix

Quickly generate Unique hash

Sometimes we need UID and this tool would help to come up with one quickly https://hashids.org/

var objectEntries = Object.entries(experienceObject);
// Result is:  0: [
//   ["name", "Raymon"],
//   ["title", "Lead Frontend/JavaScript Developer"],
//   ["yearsExperience", 8],
// ]

getEventListeners($0)

Will get all event listeners on the element focused in the Chrome Dev Tools currently

Scroll Page to Element

Often used to navigate to the top of the page or from table of contents to an element

el = document.getElementById('your-el-id');
var rect = el.getBoundingClientRect ();
window. scrollTo(rect.x, rect.y)

Master Console.logs

Named Console.logs

often times when something is heavily debugged there is a ton of console.logs added and thrown out in the devtools making it hard to understand which one is delivered by what part of the codebase, comes out console.logs can be named see example below:

console.groupCollapsed('Product list view tracked - preview')
console. log('gtag', 'event', 'page_view', google_page_view) 
console. log ('fbq',"track","ViewContent' fb_pixel_track)
console.groupEnd()

Output objects as a Table using Console.logs

output data from an object variable as a table in devtools using console.log

Quirks of triggering a click on <a> element using JavaScript

.click() works fine on buttons but we sometimes need to use smth similar on <a>

Below wisdom comes from - https://gomakethings.com/how-to-simulate-a-click-event-with-javascript/ this place contains a lot more interesting and useful gems

how to trigger a click on link element using javascript explained

JSX lifehacks - custom variable in the className

how to put custom data through variables into JSX className

Vanilla JS that captures screenshot of a DOM node

null

Return JS Selector for DOM element currently clicked

pick element to use further in JavaScript from right click user did on it

Return JS Selector for DOM element currently clicked

How to add a custom context menu item in Chrome using Javascript

Add this permission to your manifest.json file

"permissions": ["contextMenus"]

Then

chrome.contextMenus.create({
  'title' : 'Open this select text %s',
  'contexts' : ['selection'],
  'onclick' : function(info, tab) {
     console.log('Selected link: ' + info.selectionText);
  }
});