Author: John Au-Yeung

Sometimes, we want to check if a key exists with HTML5 LocalStorage and JavaScript.

In this article, we’ll look at how to check if a key exists with HTML5 LocalStorage and JavaScript.

How to check if a key exists with HTML5 LocalStorage and JavaScript?

To check if a key exists with HTML5 LocalStorage and JavaScript, we can use the getItem method.

For instance, we write

if (localStorage.getItem("username") === null) {
  //...
}

to check if the entry with key 'username' exists or not with getItem.

If it returns null, then the entry doesn’t exist.

Conclusion

To check if a key exists with HTML5 LocalStorage and JavaScript, we can use the getItem method.

Sometimes, we want to test Chrome extensions with JavaScript.

In this article, we’ll look at how to test Chrome extensions with JavaScript.

How to test Chrome extensions with JavaScript?

To test Chrome extensions with JavaScript, we can use sinon-chrome.

For instance, we write

const vm = require("vm");
const fs = require("fs");
const chrome = require("sinon-chrome");

chrome.tabs.query.yields([
  { id: 1, title: "Tab 1" },
  { id: 2, title: "Tab 2" },
]);

const context = {
  chrome,
};

const code = fs.readFileSync("src/background.js");
vm.runInNewContext(code, context);

sinon.assert.calledOnce(chrome.browserAction.setBadgeText);
sinon.assert.calledWithMatch(chrome.browserAction.setBadgeText, {
  text: "2",
});

to mock the open tabs with

chrome.tabs.query.yields([
  { id: 1, title: "Tab 1" },
  { id: 2, title: "Tab 2" },
]);

Then we inject the mocked chrome.* API into the environment with

const context = {
  chrome,
};

And then we run the extension with

const code = fs.readFileSync("src/background.js");
vm.runInNewContext(code, context);

Finally, we do the assertions with

sinon.assert.calledOnce(chrome.browserAction.setBadgeText);
sinon.assert.calledWithMatch(chrome.browserAction.setBadgeText, {
  text: "2",
});

Conclusion

To test Chrome extensions with JavaScript, we can use sinon-chrome.

Sometimes, we want to get the caret column (not pixels) position in a textarea, in characters, from the start with JavaScript.

In this articl;e, we’ll look at how to get the caret column (not pixels) position in a textarea, in characters, from the start with JavaScript.

How to get the caret column (not pixels) position in a textarea, in characters, from the start with JavaScript?

To get the caret column (not pixels) position in a textarea, in characters, from the start with JavaScript, we can use the text area’s selectionStart and selectionEnd properties.

For instance, we write

textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)

to call textarea.value.substring with textarea.selectionStart and textarea.selectionEnd to get the highlighted string in the text area.

Conclusion

To get the caret column (not pixels) position in a textarea, in characters, from the start with JavaScript, we can use the text area’s selectionStart and selectionEnd properties.

Sometimes, we want to prevent sticky hover effects for buttons on touch devices with CSS.

In this article, we’ll look at how to prevent sticky hover effects for buttons on touch devices with CSS.

How to prevent sticky hover effects for buttons on touch devices with CSS?

To prevent sticky hover effects for buttons on touch devices with CSS, we can use the hover media query.

For instance, we write

@media (hover: hover) {
  button:hover {
    background-color: blue;
  }
}

to apply styles for the hover media query.

We set buttons’ background color to blue if we’re hovering on a touch screen by using the media query.

Conclusion

To prevent sticky hover effects for buttons on touch devices with CSS, we can use the hover media query.

Sometimes, we want to use the includes method in lodash to check if an object is in the collection with JavaScript.

In this article, we’ll look at how to use the includes method in lodash to check if an object is in the collection with JavaScript.

How to use the includes method in lodash to check if an object is in the collection with JavaScript?

To use the includes method in lodash to check if an object is in the collection with JavaScript, we can use the some function.

For instance, we write

const hasB = _.some([{ a: 1 }, { b: 2 }], { b: 2 });

to call some with the array [{ a: 1 }, { b: 2 }] that we want to check if { b: 2 } is in the array.

it should return true since { b: 2 } is in the array.

Conclusion

To use the includes method in lodash to check if an object is in the collection with JavaScript, we can use the some function.