Linked contentAuto-destruct in 51 days

Spreewald 1.12 no longer depends on jQuery

In the past, some Spreewald steps (most prominently the "… should be visible") only worked, if the application under test used jQuery. This is no longer necessary.

Please don't re-introduce jQuery for new steps.

Does <html> or <body> scroll the page?

Scrolling overflowing elements with JavaScript

HTML elements with overflow-y: auto or overflow-y: scroll will get a scrollbar when their content is higher than their own height.

When you scroll an element , the element's scrollTop property is updated with the scrollbar's new position. You can also set element.scrollTop = 30 to scroll the element to a vertical pixel position counted from the top.

Scrolling the main viewport with JavaScript

The browser's main docment viewport is also scrollable by default. The element that c…

Using ES6 without a transpiler

If your app does not need to support IE11, you can use most ES6 features without a build step. Just deliver your plain JavaScript without transpilation through Babel or TypeScript, and modern browsers will run them natively.

Features supported by all modern browsers include:

  • fat arrow functions (() => { expr })
  • let / const
  • class
  • async / await
  • Promises
  • Generators
  • Symbols
  • Rest arguments (...args)
  • Destructuring

You won't be able to use import and export, or use npm modules.

See this [ES6 compatibility mat…


How to emulate simple classes with plain JavaScript

If you want a class-like construct in JavaScript, you can use the module pattern below. The module pattern gives you basic class concepts like a constructor, private state, public methods.

Since the module pattern only uses basic JavaScript, your code will run in any browser. You don't need CoffeeScript or an ES6 transpiler like Babel.

A cosmetic benefit is that the module pattern works without the use of this or prototypes.


Here is an example for a Ruby class that we want to translate into Javascript using the module patter…

Linked contentRepeats

The Easiest Way to Parse URLs with JavaScript

A very clever hack to parse a structured URL object is to create a <a> element and set its href to the URL you want to parse.

You can then query the <a> element for its components like schema, hostname, port, pathname, query, hash:

var parser = document.createElement('a');
parser.href = '';
parser.hostname; // => ''
pathname = parser.pathname; // => '/bar'

if (pathname[0] != '/')
  pathname = '/' + pathname // Fix IE11

One advantag…

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

Integrating it with Webpack as described in the documentation – by using ace-builds and ace-builds/webpack-resolver – failed pretty hard for me. Maybe because Rails' Webpacker is still on Webpack 2.
The following works for Ruby on Rails with Webpacker / Webpack 2.

  1. Do not use the `ace-builds…

Javascript: Don't throw exceptions from async functions

TLDR: A function is hard to use when it sometimes returns a promise and sometimes throws an exception. When writing an async function, prefer to signal failure by returning a rejected promise.

The full story

When your function returns a promise ("async function"), try not throw synchronous exceptions when encountering fatal errors.

So avoid this:

function foo(x) {
if (!x) {
throw "No x given"
} else
return new Promise(function…


Regular tasks for long-running projects

When projects run for many years, they require special regular maintenance to stay fresh. This kind of maintenance is usually not necessary for small or quick projects, but required to keep long-running projects from getting stale.

You should be able to fit this into a regular development block.


Check which libraries need updating
As time goes by, libraries outdate. Check your software components and decide if any of it needs an update. Your main components (e.g. Ruby, Rails, Angular) should always be reasonably up to dat…

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…

Linked content

jQuery: How to remove classes from elements using a regular expression

jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching a given pattern, you can do that.

For example, consider a DOM node for the following HTML. We'll reference it by $element below.

<div class="example is-amazing is-wonderful"></div>

Option A: Selecting classes, then removing them

You can iterate over existing classes, and select matching ones. The example below is ES6, on ES5 could write something similar using jQuery.grep.

let classes ...
Linked contentRepeats

JavaScript basics tutorial: 33 Concepts Every JavaScript Developer Should Know

This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis.

Table of Contents

  • Call Stack
  • Primitive Types
  • Value Types and Reference Types
  • Implicit, Explicit, Nominal, Structuring and Duck Typing
  • == vs === vs typeof
  • Function Scope, Block Scope and Lexical Scope
  • Expression vs Statement
  • IIFE, Modules and Namespaces
  • Message Queue and Event Loop
  • setTimeout, setInte…
Linked content

Angular 1: Analyze how many watchers are registered on the page

A nice bookmarklet to analyze how many watchers have been registered on the current page. Good for keeping an eye on watchers count while developing.

  • Use as a bookmarklet.
  • Works with Angular 1.x
  • Logs to the browser's console.
Linked content

AngularJS 1 Performance: One-time bindings in expressions

In addition to the {{ myValue }} two-way binding syntax, since Angular 1.3 there's a one-time binding syntax, prefixing the value or expression with ::, e.g. {{ ::myValue }}, {{ ::myValue >= 42 }} and {{ ::myExpression(value) | someFilter }}.

One-time bound expressions get dropped from the list of watchers as soon as they can be resolved. Performance-wise the impact for this small change is huge, since Angular apparently slowes down with too many watchers registered [(Source)](…


How to create memory leaks in jQuery

jQuery doesn't store information about event listeners and data values with the element itself. This information is instead stored in the global $.cache object. Every time you add an event listener or data value to a jQuery object, $.cache gains another entry.

The only way that a $.cache entry gets deleted is when you call remove() on the element that put it there!

Since cache entries also have a pointer back to the element that spawned them, it is easy to create DOM elements that can never be garbage-collected.

Below are …

Minify Font Awesome fonts with webpack

Font Awesome 5 is a comprehensive solution for vector icons on your website.

Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will render icons as inline <svg> tags), or even as SVG sprites.

All solutions have their pros and cons:

Icon font:

  • little CPU load (no JavaScript)
  • fonts are relatively large
  • 1 extra HTTP request

Javascript + inline SVG:

  • higher CPU load (needs to watch the DOM via mutation observers to ad…

Javascript: Comparing two arrays for equality

Don't Google this, you will lose all will to live. Instead use Object#isEqual from Lodash or Underscore.js:

_.isEqual([1, 2], [2, 3]) // => false

To compare two arrays for equality in a Jasmine spec assertion, see Jasmine: Testing complex types for equality.


Debugging cucumber feature with javascript + firefox vnc

TL;DR Debugging problems with javascript errors in cucumber tests is sometimes easier in the browser. Run the test, stop at the problematic point (with Then pause from Spreewald 1.7+) and open VNC for Firefox.


This website uses cookies to improve usability and analyze traffic.
Accept or learn more