Imagine the following HTML structure, where the scrolling container has overflow-y: scroll:

+--scrolling container+-+
|                       |
| +-child element+----+ |
| | ++iframe++        | |
| | |        |        | |
| | |        |        | |
+-----------------------+
  | |        |        |   <-- actually cut off by
  | +--------+        |   <-- scrolling container
  +-------------------+

The issue: On iOS, the child element cannot be scrolled when grabbing the iframe (i.e. putting your finger somewhere on the iframe).
...

Some pseudo-elements need to be addressed with vendor prefixes. E.g. ::selection is not supported by Firefox, you need to use ::-moz-selection instead.

What you cannot do is to define a single CSS rule to address both the standard and vendor-prefixed form:

::selection, ::-moz-selection {
  background-color: red;
}

This rule will be ignored by all browsers. The reason is that if a browser doe...

Sometimes you want/have to send specific http(s) requests. You can do that easy with curl or just write the request yourself.

make a http request with nc

nc example.com 80
GET / HTTP/1.1
Host: example.com
# press enter

make a http request with telnet

telnet example.com 80
GET / HTTP/1.1
Host: example.com
# press enter

make https request with openssl

openssl s_client -connect example.com:443
GET / HTTP/1.1
Host: example.com
# press enter

You can specify more headers if you want:

nc example.c...

ImageMagick has a command line tool called identify which can read image metadata:

>identify -verbose DSC00136.JPG
Image: DSC00136.JPG
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Class: DirectClass
  Geometry: 5472x3648+0+0
  Resolution: 350x350
  Print size: 15.6343x10.4229
  Units: PixelsPerInch
  Type: TrueColor
  Endianess: Undefined
  Colorspace: sRGB
  Depth: 8-bit
  Channel depth:
    red: 8-bit
    green: 8-bit
    blue: 8-bit
  Channel statistics:
    Red:
      min: 0 (0)
      max: 255 (1)
      mean: 11...

You can start vim with a read-only option. This prevents making accidentally changes in files you don't want to touch.

view /file/to/open

view is actually vim.

Use case

You have opened many similar files and accidentally type :wq in the wrong one. Did you make changes? Which changes you made? When do you notice you edited the wrong file?

Disclaimer

This is not an issue in newer versions of HAML (starting with 5.0.0), as the ugly-option was removed so that in development everything is rendered ugly, too.

Problem

When HTML is rendered from HAML in production or staging environment, whitespace is removed to reduce the download size of the resulting pages. Therefore it might happen that whitespace you see in development is missing in production or staging.

Here is an example of two inlined bootstrap buttons in a t...

There are various ways to run external commands from within Ruby, but the most powerful ones are Open3.capture3 and Open3.popen3. Since those can do almost everything you would possibly need in a clean way, I prefer to simply always use them.

Behind the scenes, Open3 actually just uses Ruby's spawn command, but gives you a much better API.

Open3.capture3

Basic usage is

require 'open3'

stdout_str, error_str, status = Open3.capture3('/some/binary', 'with', 'some', 'args')
if status.success?...

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that...

Sometimes your code has long lines:

describe 'foo' do
  describe 'bar' do
    really_long_line_really_long_line_really_long_line
    another_line

When you're working with multiple editor panes, such code will often be wider than the pane area:

describe 'foo' do                |
  describe 'bar' do              |
    really_long_line_really_long_|
    another_line                 |

To help with this you can activate Soft wraps in the RubyMine options under General → Editor .

Your code will now look like this:

des...

There seems to be a nasty bug in Chrome 56 when testing with Selenium and Capybara: Slashes are not written to input fields with fill_in. A workaround is to use javascript / jquery to change the contents of an input field.

Use the following code or add the attached file to your features/support/-directory to overwrite fill_in.

module ChromedriverWorkarounds

  def fill_in(locator, options = {})
    text = options[:with].to_s
    if Capybara.current_driver == :selenium && text.include?('/')
      # There is a nasty Bug in Chrome ...

We generally use multiple application servers (at least two) and you have to search on all of them if you don't know which one handled the request you are looking for.

Rails application logs usually live in /var/www/<project-environment-name>/shared/log.
Web server logs usually live in /var/www/<project-environment-name>/log.

Searching through single logs with grep / zgrep

You can use grep in this directory to only search the latest logs or zgrep to also search older (already zipped) logs. zgrep is used just like grep ...

If you use Angular 1.4+ together with Angular Animate, all ng-show, ng-hide, ng-class etc. are animated on default.

If you want only some elements to be animated there are 2 possibilities: Either disable animations globally and only run animations if the element has a certain class or enable animations globally and add a certain class if no animation is wanted.

Option 1: Enable animations only for html elements with class 'animate'

@app.config ['$animateProvider', ($animateProvider) ->
  $animateProvider.classNameFilter(/\ban...

First find the reference for the entry you want through looking at the stash:

$ git stash list
stash@{0}: WIP on feature/foo
stash@{1}: WIP on feature/bar
stash@{2}: WIP on fix/baz

Now you can simply use that reference, but curly braces must be escaped:

git stash pop stash@\{1\}

or quoted:

git stash apply "stash@{1}"

Quick reminder to [not shoot yourself in the foot](https://makandracards.com/makandra/634-use-the-git-stash-withou...

Collection of useful tools in the Chrome JavaScript console.

Make the whole page editable

This is not special to Chrome, but still a clever thing:

document.body.contentEditable=true 

Taking time

You can easily measure the time on the console with named timers:

console.time('myTime'); // Start timer
console.timeEnd('myTime'); // End timer and print the time

Reference previously inspected elements (from the Elements panel)

Variables $0, $1, ... $n reference the nth-last inspected Element. $0 ...

A comprehensive introduction to sending HTML emails.

Intro:

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

Table of Contents

• Introduction To Sending Email Link
• Email List B...

In general, you should not put a block element inside an inline element. So don't do this:

<span>
  <div>text</div>
</span>

The browser will think you wrote invalid HTML by accident, and will sometimes reorder elements silently.

There is one notable exception: It's OK to wrap block elements in a <a> tag in HTML5 (not 4). The spec says:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long ...

Building plain text emails with an .erb template doesn't allow you to indent code like you normally do in HTML mails.

❌ DON'T

<%= 'foo' if bar %>

"\n" if bar is false

"foo\n" if bar is true

<%= nil %>

"\n"

<% if true %>
  <%= 'foo' %>
<% end %>  

" foo"

<%= 'foo' %>

<%= 'bar' %>

"foo\n\nbar\n"

✔️ DO

Write unindented code to get the expected result.

<% if bar %>
<%= 'bar' %>
<% end %>
<%= 'foo' %>
<%= 'bar' %> 

• Use [Form Models](https://github.com/makandr...

This card tries to summarize by example the different uses of heredoc.

• In Ruby << vs. <<- vs. <<~
• In Rails strip_heredoc vs. squish

strip_heredoc should be used for a text, where you want to preserve newlines. (multi-line -> multi-line)

squish should be used for a text, where you want to squish newlines. (multi-line -> one-line)

Ruby 2.3+

def foo
  bar = <<~TEXT
    line1
    line2
    line3
  TEXT
  puts bar.inspect
end
foo => "line1\nline2\nline3\n"

Read more: [Unindent HEREDOCs in Ruby 2.3](/m...

When giving a presentation with a projector it is sometimes better to use a dual screen layout instead of a cloned display. If you still want a preview of the projector screen on your primary screen, you can do this:

0. Install x11vnc and a vnc viewer (e.g. xtightvncviewer).

1. Connect the projector.

2. In your system display settings, move the projector to the left or your primary screen (not strictly necessary, but I had weird clipping issues otherwise).

3. Start a vnc server for your second display with

   x11vnc -clip xinera...
   

We used zeroclipboard.js in some of our projects but now we switched to clipboard.js because it does not rely on flash. Flash support of the major browsers has ended.

Some more advantages of clipboard.js:

• it consists only of a single javascript file, so it does not trigger additional requests with rails
• it automagically provides user feedback by selecting the text it has copied
• it provides callbacks for success and error which make it easier to add custom behaviour after copying to the clipboar...