Webmock normalizes arrays in urls
Typhoeus has a different way of representing array params in a get request than RestClient.
Typhoeus: http://example.com/?foo[0]=1&foo[1]=2&foo[2]=3
RestClient: http://example.com/?foo[]=1&foo[]=2&foo[]=3
Webmock normalizes this url when matching to your stubs, so it is always http://example.com/?foo[]=1&foo[]=2&foo[]=3. This might lead to green tests, but in fact crashes in real world. Rack::Utils.build_nested_query might help to build a get re...
Middleman: Use pretty URLs without doubling requests
By default Middleman generates files with a .html extension. Because of this all your URLs end in /foo.html instead of /foo, which looks a bit old school.
To get prettier URLs, Middleman lets you activate :directory_indexes in config.rb. This makes a directory for each of your pages and puts a single file index.html into it, e.g. /foo/index.html. This lets you access pages with http://domain/foo.
Don't double your requests!
Unfortunately you are now forcing every br...
Middleman configuration for Rails Developers
Middleman is a static page generator that brings many of the goodies that Rails developers are used to.
Out of the box, Middleman brings Haml, Sass, helpers etc. However, it can be configured to do even better. This card is a list of improvement hints for a Rails developer.
Gemfile
Remove tzinfo-data and wdm unless you're on Windows. Add these gems:
gem 'middleman-livereload'
gem 'middleman-sprockets' # Asset pipeline!
gem 'bootstrap-sass' # If you want to use Bootstrap
gem 'byebug'
gem 'capistrano'
gem 'capistrano-mid...
RSpec: Debug flickering test suites with rspec --bisect
In modern default RSpec configurations, your tests are usually run in random order. This helps to detect "flickering" tests that only fail when run in a certain order.
The reason for this are tests that have side effects causing other tests to fail later. The hard part is to find the offending test.
Enter rspec --bisect:
- Say you have a flickering test that passes on its own, but you just saw it fail in a full test run. At the top of the RSpec output, you will see a message like
Randomized with seed 12345. Take a note of the number....
Rubymine provides a visual merge conflict resolution tool
RubyMine provides a visual tool for resolving merge conflicts locally.
Follow
Git > Resolve Conflicts
in the context menu to open RubyMine's merge conflict tool.
- Left pane: local copy (read-only)
- Right pane: checked in version from repository (read-only)
- Central pane: base revision from which both conflicting versions are derived
You can also use a similar pane view to compare to files.
Mark two files and press Ctrl + D to compare.
How to use Parallel to speed up building the same html partial multiple times (for different data)
The parallel-gem is quite easy to use and can speed up rendering time if you want to render the same partial multiple times (e.g. for rendering long lists of things).
Parallel supports execution using forked processes (the default), threads (mind the GVL) and Ractors (some limitations for data sharing).
If your parallelized code talks to the database, you should [ensure not to leak database connections](https://makandracards.com/makandra/45360-using-activerecord-with-threads-will-leak-database-connect...
Solved: Element inside overflow:scroll container cannot be scrolled on iOS when dragged by a contained iframe
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).
...
How to disable Chrome's save password bubble for Selenium tests
When filling out forms in Selenium tests, Chrome shows the (usual) bubble, asking to store those credentials.
While the bubble does not interfere with tests, it is annoying when debugging tests. Here are two ways to disable it:
Option 1: prefs
You can set profile preferences to disable the password manager like so:
prefs = {
'credentials_enable_service' => false,
'profile.password_manager_enabled' => false
}
Capybara::Selenium::Driver.new(app, browser: :chrome, prefs: prefs)
Sadly, there are no command line s...
CSS: Don't target multiple vendor-prefixed pseudo-elements in a single rule
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. If a browser does not know al...
How to make http/https requests yourself with nc/telnet/openssl
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...
How to view Image Metadata on the Linux Command Line with ImageMagick
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...
Vim read-only option
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?
Beware: Nested Spreewald patiently blocks are not patient
Note: The behaviour of Spreewald's within step is as described below for version < 1.9.0; For Spreewald >= 1.9.0 it is as described in Solution 1.
When doing integration testing with cucumber and selenium you will often encounter problems with timing - For example if your test runs faster than your application, html elements may not yet be visible when the test looks for them. That's why Spreewald (a collection of cucumber steps) has a concept of doing things patiently, which means a given b...
Haml: Prevent whitespace from being stripped in production
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...
Running external commands with Open3
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?...
CSS font metrics in detail
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...
RubyMine: Better soft wraps
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...
Bug in Chrome 56+ prevents filling in fields with slashes using selenium-webdriver/Capybara
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 ...
How to search through logs on staging or production environments
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 ...
Partially disable animations for Angular 1.4+
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...
Geordi hints
Reminder of what you can do with Geordi.
Note: If you alias Geordi to something short like g, running commands gets much faster!
Note: You only need to type the first letters of a command to run it, e.g. geordi dep will run the deploy command.
geordi deploy
Guided deployment, including push, merge, switch branches. Does nothing without confirmation.
geordi capistrano
Run something for all Capistrano environments, e.g. geordi cap deploy
geordi setup -t -d staging
When you just clon...
Git stash: Working with old entries
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...
Things you probably didn’t know you could do with Chrome’s Developer Console
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 ...
An Introduction to Sending HTML Email for Web Developers
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...