View
Auto-destruct in 59 days

Updated: Snom VOIP phone shows your own name instead of the incoming number

There's an additional solution now that also logs the correct number to your call log in VoIP clients like Ekiga and Linphone. The new solution has a drawback though, in case you're using multiple phone numbers and need to see which line is ringing.

Repeats

Testing regular expressions visually

Developing complex regular expressions quickly blows my mind. Here are some online regex editors that help you by highlighting matching text and capture groups:

Repeats

Don't ever use the float type for database columns

Like in any language, a FLOAT will eventually corrupt data due to rounding errors.

Please use DECIMAL, which has well-defined behavior for rounding and range overflows.

External contentRepeats

Don't open user-supplied links with target="_blank"

This will give the target site full access to your Javascript environment through window.opener, if the target is on the same domain.

Even if the target site is on another domain, it still has some access and can for example manipulate window.location to perform a phishing attack.

You may use a rel="noopener" attribute to avoid this in modern browsers, except IE or Edge.

Repeats

Firefox cancels any JavaScript events at a fieldset[disabled]

If you try to listen to events on elements that are nested inside a <fieldset disabled>, Firefox will stop event propagation once the event reaches the fieldset. Chrome and IE/Edge will propagate events.

Since we often bind event listeners to document this can be annoying.

You could solve it by…

CSS: Giving text lines a background-color (with configurable line padding and margin)

The gist is:

  • wrap the text with a span
  • use line-height for the spacing between lines ("margin")
  • use box-shadow to control the line background size ("padding")

Example

span
  box-shadow: 0 0 0 10px #fff
  background-color: #fff
  line-height: 2.4

The fourth number of box-shadow indicates spread, which can be imagined as the shadow growth when moving the light source closer towards the object. The shadow in my example creates a visual padding of 10px.

Custom Padding

You can combine multiple shadows, movin…

Jasmine: Expecting objects as method invocation arguments

To check if a method has been called in Jasmine, you first need to spy on it:

spyOn(window, 'alert')
codeThatAlerts()
expect(window.alert).toHaveBeenCalledWith('Important message')

To expect an object of a given type, pass the constructor function to jasmine.any():

expect(spy).toHaveBeenCalledWith(jasmine.any(Object))
expect(spy).toHaveBeenCalledWith(jasmine.any(String))
expect(spy).toHaveBeenCalledWith(jasmine.any(Number))

To expect an oject with given key/value properties, use jasmine.objectContaining():

Repeats

Be careful when using buttons without a "type" attribute

Be careful when using buttons without a type attribute, since browsers will consider them the default submit button of a form.

Suppose you have this form:

<form action="/save">
  <input type="text" />
  <button onclick="alert('Alert!')">Alert</button>
  <button type="submit">Save</button>
</form>

If you press the enter key inside in the text input, browsers will trigger the first button and show the alert.

To fix this, add a type="button" attribute to the first button.

How to fix HTML elements being cut off when printing

When you print (or print preview) and elements are cut off (e.g. after 1st page, or "randomly") you should check your CSS rules for these:

  • Is there an element with "display: inline-block" that surrounds your content? Make sure it has "display: block" for printing.
    This primarily affects Firefox and Internet Explorer. Chrome seems to be able to handle inline-block elements in most cases.

  • Does the element itself, or a container, define "overflow: hidden"? Use "overflow: auto" (or maybe "overflow: visible") instead.

  • Is th…

Repeats

PSA: Chrome and Firefox do not always clear session cookies on exit

Cookies without an expiration timestamp are called "session cookies". [1] They should only be kept until the end of the browsing session.

However, when Chrome or Firefox are configured to reopen tabs from last time upon start, they will keep session cookies when closing the browser. This even applies to tabs that were closed before shutting down the browser.

This is by design in Chrome and [Firefox](https://bugzilla.mozilla.org/buglist.cgi?bug_id=337551,345830,358042,362212,36…

Repeats

HTML: Making browsers wrap long words

By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only.

This card explains some options to make browsers wrap inside a long word like "Donaudampfschifffahrt".

Option 1: Soft hyphens

Unicode has a soft hyphen character you can use to mark optional word division opportunities. The soft hyphen is an invisible character with zero width. Only when the browser decides to wrap at a soft hyphen, it is turned in…

Repeats

How to: Context-dependent word expansion in RubyMine

One of the many useful features of TextMate is autocompletion of words. If I were in TextMate right now, I could write "au[tab]", and it would complete it to "autocompletion". RubyMine can do this, too. When you write a word (e.g. a variable name), just hit ALT + / repeatedly and it will offer all completions for the letters you typed. This action is called Cyclic Expand Word in RubyMine / IntelliJ IDEA.

This feature keeps you from mistyping variable names, saves you keystrokes and speeds up development. ~10 keystrokes to the price …

Repeats

Why your Cucumber feature loses cookies when run under Selenium or capybara-webkit

When your Cucumber feature seems to forget cookies / sessions when you run it with Selenium or capybara-webkit, check if the test travels in time like here:

Given the date is 1981-10-20
When I sign in
Then I should see "Welcome!"

What happens here is that the Rails application serving pages runs in 1984, but the process running your Firefox or Webkit still lives today. This gap of 27+ years will expire most Cookies immediately.

If all you need is to freeze the time to a date, a workaround is to travel to the future instead.

Auto-destruct in 48 days

Updated: Test if two date ranges overlap in Ruby or Rails

Simplified the algorithm and made it database-agnostic.

Jasmine: Mocking API requests in an Angular service spec

Situation: You want to write a spec for a function inside an Angular service. This function at some point makes an API request and acts upon response. Notably, your Angular app employs uiRouter, although it is not used nor actually required for this test.

Working test setup

```
# Capitalized expressions are intended to be replaced with YOUR values

describe 'SERVICE', ->

beforeEach ->
module 'MODULE'

module ($urlRouterProvider) ->
  # Prevent uiRouter's initialization, i.e. do not sync the current URL
  # with its r...

Limitations you should be aware of when Internet Explorer 9 parses CSS files

Internet Explorer until version 9 has some limitations when parsing CSS files

Summarized, these are:

  • Up to 31 CSS files or
  • Up to 4095 selectors per CSS file.
  • Up to 3 nested @import rules

To test the selector limit for a specific browser, check this CSS selector limitation test website.

When you run into this issue, the following links might be helpful to fix the problem. The Idea is to split up the css fi…

Auto-destruct in 42 days

Updated: JavaScript: Testing the type of a value

Since typeof returns 'object' for both arrays and null, I rewrote the sections for object and array detection:


An object with keys and values

When a developer talks about an "object" in JavaScript, she probably means a variable where you can assign values to keys. However, JavaScript has a different notion of what constitutes an "object". When a library has a function to test for an object, it detects the notion that is more useful to the developer.

Let's start with the easiest case, a…

View
3404 cards