Until recently, you could open a new tab via window.open when using execute_script in Selenium tests. It no longer works in Chrome (will show a "popup blocked" notification).

This is because browsers usually block window.open unless the user interacted with an element for security reasons. I am not sure why it did work via Selenium before.

Here is an approach that will insert a link into the page, and have Selenium click it:

path = "/your/path/here"
id = "helper_#{SecureRandom.hex(8)}"
execute_script <<-JAVASCRIPT
  ...

CSS4 comes with :has. E.g. h1:has(b) would select all <h1> tags that contain a <b> tag.

This is implemented in no browser but the jQuery query engine already supports it as a custom extension.

Spreewald 1.4.0 comes with this step:

When I click on the element ".sidebar"

We recommend to define a selector_for method in features/support/selectors.rb so you can refer to the selector in plain English:

When I click on the element for the sidebar

Spreewald 1.3.0 comes with these steps:

Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"

We recommend to define a selector_for method in features/support/selectors.rb so you can refer to the selector in plain English:

Then I should see an element for a panel
Then I should not see an element for the sidebar
Then I should see an element for the Twitter timeline

Navigation

CTRL + SHIFT + ALT + N
: Search for any symbol in your application, like CSS classes, Ruby classes, methods, helpers etc.

CTRL + SHIFT + N
: Search for filename in your application (also dependencies)

CTRL + E
: Open a list of recently opened files

ALT + POS1
: Open a the navigation bar as a context menu. Allows you to quickly navigate between files.

Actions

CTRL + SHIFT + A
: Find and execute a menu actio...

iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.

Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:

<table>
  <tr>
    <td>hello</td>
  </tr>
</table>

^

$(document).on('click', 'tr', function () {
  alert('row clicked')
});

While this works on a desktop browser, clicking the row/cell on an iPad will just do nothing.

Turns out, the iPad will only trigger such events for ...

This blew my mind today:

• 12 Little-Known CSS Facts
• 12 Little-Known CSS Facts (The Sequel)

Please make sure to check browser support for CSS features on Can I Use and the Mozilla Development Network before using.

Favorites

• outline-offset: specify how far away from the element an outline is rendered
• ::first-letter: matches the first letter insid...

Note: Making a reverse proxy with nginx is much more straightforward.

A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:

• Expose a local service that you cannot directly reach over the internet
• "Change" the domain or path of a web application by rewriting them on the fly
• Instantly change servers that respond to a name or ...

Rails comes with a Rake task notes that shows code comments that start with "TODO", "FIXME", or "OPTIMIZE".

While it's generally not good practice to leave them in your code (your work is not done until it's done), in larger projects you will occasionally have to use them as other parts of the application that you depend upon are not yet available.
To keep track of them, run rake notes. Its output looks something like this:

$ rake notes
app/controllers/fron...