How to access Chrome Devtools when running JavaScript tests via CLI
While we are used to run our JavaScript tests on a test page within our Browser, it's also possible to run them on the command line with NodeJS. I think that's actually the most common way to run JS tests.
Given a Vue project that uses Jest (via vue-cli-service
) with the following package.json
:
{
"scripts": {
"test": "vue-cli-service test:unit --testMatch='**/tests/**/*.test.js' --watch"
},
}
This allows us to run J...
JavaScript: Moving elements inside an array, modifying the array in place
If you want to move an element inside an array, neither JavaScript/ES6+ nor libraries like LoDash offet that natively.
Here is a simple function instead that modifies the input array in place.
function moveArrayElement(array, element, offset) {
const index = array.indexOf(element)
const newIndex = index + offset
if (newIndex > -1 && newIndex < array.length) {
// Remove the element from the array
const removedElement = array.splice(index, 1)[0]
// At "newIndex", remove 0 elements and insert the removed el...
Google Chrome now has a JavaScript bundle visualizer
Similar to the Webpack Bundle Analyzer, Chrome's new Lighthouse feature …
… shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used by your page. It can also visualise unused bytes.
This is very helpful to visualize Javascript files in development. It also works on production code, where its usefulness depends on the structure of the productive Javascr...
JavaScript Sentry: How to check if errors will be reported
One really simple way to check whether JavaScript Sentry integration was successful (raven-js or @sentry/browser), is to create an erroneous event handler like this:
<h1 onClick="throw new Error('JavaScript Sentry was successfully integrated')">
My Website
</h1>
… and clicking on the element afterwards.
If your site has a strict CSP, see Using inline event handlers with a strict Content Security Policy (CSP).
JavaScript: How to query the state of a Promise
Native promises have no methods to inspect their state.
You can use the promiseState
function below to check whether a promise is fulfilled, rejected or still pending:
promiseState(promise, function(state) {
// `state` now either "pending", "fulfilled" or "rejected"
});
Note that the callback passed to promiseState
will be called asynchronously in the next [microtask](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/...
JavaScript: Working with Query Parameters
tl;dr: Use the URLSearchParams
API to make your live easier if you want to get or manipulate query parameters (URL parameters).
URLSearchParams
API
The URLSearchParams
API is supported in all major browsers except IE 11.
It offers you a bunch of useful methods:
-
URLSearchParams.append()
- appends a query parameter -
URLSearchParams.delete()
- deletes the specified query parameter -
URLSearchParams.get()
- returns the value of the specified query parameter - `URLSearchP...
Detecting when fonts are loaded via JavaScript
Webfonts are not always available when your JavaScript runs on first page load. Since fonts may affect element sizes, you may want to know when fonts have been loaded to trigger some kind of recalculation.
Vanilla JavaScript / Modern DOM API
In modern browsers (all but IE and legacy Edge) you can use document.fonts
. Use load
to request a font and receive a Promise that will be resolved once the font is available. Example:
document.fonts.load('1rem "Open S...
Jasmine: Spy on value properties
Jasmine has spyOnProperty()
, but it only works if the property is implemented using getter and setter functions. This is a known limitation of Jasmine.
If the mocked property is a simple value, it will not work:
const x = { foo: 1 }
console.log(x.foo) // 1
spyOnProperty(x, 'foo').and.returnValue(2)
// Throws: Error: <spyOnProperty> : Property foo does not have access type get
Below you can find a function `spyOnValuePr...
Reading and writing cookies in JavaScript
You can use JavaScript to get or set cookie values on the client.
Using the vanilla JavaScript API
In JavaScript, document.cookie
is an accessor to all cookies on the current site. It looks like a String, but its setter is actually more powerful.
When setting cookies this way, remember to set the path=/
option.
Reading cookies
A result may look like this:
hello=universe; foo=bar
This means that there are 2 cookies: "hello" with value "universe", and "foo" with value "bar...
JavaScript bookmarklet to click an element and copy its text contents
Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents (or value, in case of inputs).
The approach is simple: we place an overlay so you don't really click the target element. When you click the overlay, we look up the element underneath it and show its text in a browser dialog. You can then copy it from there.
While moving the mouse, the detected element is highlighted.
Here is the one-liner URL that you can store as a bookmark. Place it in your bookmarks bar and click it to activate....
Manually trigger a delegated DOM event
When you register a delegated event using on
(or the deprecated delegate
/ live
), it is somewhat hard to manually trigger these events manually, e.g. for testing.
After trying jQuery's trigger
to no avail, I had success by using native Javascript methods to create and dispatch an event. For instance, to trigger a mousedown
event:
element = $('...').get(0);
event = new MouseEvent('mousedown', { view: window, cancelable: true, bubbles: true }...
Guideline for moving from jQuery to vanilla JavaScript
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery.
[Practical and clear reference with the most common jQuery patterns and their equivalent translations in vanilla JS](https://tobiasahlin.com/blog/move-from-j...
Merging two JavaScript objects
Let's say you want to merge the properties of two JavaScript objects:
let a = { foo: 1, bar: 2 }
let b = { bar: 3, baz: 4 }
let merged = merge(a, b) // => { foo: 1, bar: 3, baz: 4 }
Depending on your build, there are several ways to implement merge()
.
When you have ES6
When you have an ES6 transpiler or don't support IE11, you may use the spread operator (...
) to expand both objects into a new object literal:
let merg...
Check whether an element is visible or hidden with Javascript
jQuery
You can say:
$(element).is(':visible')
and
$(element).is(':hidden')
jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.
Native DOM API
Emulate jQuery's implementation :
element.offsetWidth > 0 && element.offsetHeight > 0;
jQuery > 3
Query 3 slightly modifies the meaning of :visible (and therefore of :hidden).
Emulate jQuery'...
Trigger a link's click action with Javascript
Use the click
method on the DOM element:
let link = document.querySelector('a')
link.click()
High-level Javascript frameworks: Backbone vs. Ember vs. Knockout
This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title.
As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such high-level frameworks typically offer support for client-side view rendering, routing, data bindings, etc. This is useful, and when you write a moderately complex Javascript ...
Why your javascripts should be executed after the dom has been loaded
Most of the JavaScript snippets have code that manipulates the DOM. For that reason dom manipulating javascript code should have been executed after the DOM has loaded completely. That means when the browser has finished HTML parsing and built the DOM tree. At that time, you can manipualte the DOM although not all resources (like images) are fully loaded.
The following snippets show how you can do this with plain JavaScript, jquery or prototype ([dom ready ...
Flexible overflow handling with CSS and JavaScript
You can use text-overflow
to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncate one of two strings in one line that can both vary in length, while fully keeping one of them. See this example screenshot where we never want to show an ellipsis for the distance:
, debugging support (it becomes pure, readable JavaScript), existing support from test suites (it’s normal JavaScript) and growing support from various text editors (TextMate, Vim, Emacs).
Howto prompt before accidentally discarding unsaved changes with JavaScript
Ask before leaving an unsaved CKEditor
Vanilla JavaScript way, but removes any other onbeforeunload
handlers:
$(function(){
document.body.onbeforeunload = function() {
for(editorName in CKEDITOR.instances) {
if (CKEDITOR.instances[editorName].checkDirty()) {
return "Unsaved changes present!"
}
}
}
}
A robuster implementation example
Note: Don't forget to mark the 'search as you type' forms with the skip_pending_changes_warning
class.
var WarnBeforeAccidentallyDiscard...
How to access before/after pseudo element styles with JavaScript
Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.
Using getComputedStyle
First, find the element in question.
let element = document.querySelector('.my-element') // or $('.my-element').get(0) when using jQuery
Next, use JavaScript's getComputedStyle
. It takes an optional 2nd argument to filter for pseudo elements.
let style = window.getComputedStyle(element, '::before')
let color = style.getPropertyValue('background-color...
markbates/coffeebeans
When CoffeeScript was added to Rails 3.1 they forgot one very important part, the ability to use it when responding to JavaScript (JS) requests!
In Rails 3.1 it’s incredibly easy to build your application’s JavaScript using CoffeeScript, however if you fire off an AJAX request to your application you can only write your response using regular JavaScript and not CoffeeScript, at least until CoffeeBeans came along.
Minified JavaScript and CSS
JavaScripts and CSS should be minified for production use.
In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.
In Rails 2.3 and 3.0 you should at least embed external JavaScript libraries in minified form, using something like JavaScript compressor.