About IE's Compatibility mode
IE has a "Compatibility Mode" for old browsers. You can keep IE from offering it (and fix some other things, too) by adding this meta tag to your <head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Or in Haml:
%meta(http-equiv="X-UA-Compatible" content="IE=Edge")
However, there are some things you need to bear in mind:
-
X-UA-Compatible is ignored unless it's present inside the first 4k of you page. If you put it somewhere in the bottom of your head section (or in the body) move it to top. The best place for ...
Rails Env Widget
Have you ever mistaken one Rails environment for another? The attached helper will help you to never do it again.
Save the attached file to app/helpers/ and use the widget in your layout like this:
%body
= rails_env_widget unless Rails.env.production?
It'll render a small light gray box in the top left corner of your screen, containing the current Rails environment. On click, it'll disappear. Actually, it has the same UX as our Query Diet widget.
Dynamically uploading files to Rails with jQuery File Upload
Say we want …
- to create a
Gallerythat has a name andhas_many :images, which in turn have a caption - to offer the user a single form to create a gallery with any number of images
- immediate uploads with a progress bar per image
- a snappy UI
Enter jQuery File Upload. It's a mature library that can do the job frontend-wise. On the server, we'll use Carrierwave, because it's capable of caching images.
(FYI, [here's how to do the u...
UI Sortable on table rows with dynamic height
UI sortable helps reordering items with drag 'n drop. It works quite fine.
Proven configuration for sorting table rows
When invoking the plugin, you may pass several options. This set is working fine with table rows:
$tbody.sortable # Invoke on TBODY when ordering tables
axis: 'y' # Restrict drag direction to "vertically"
cancel: 'tr:first-child:last-child, input' # Disable sorting a single tr to prevent jumpy table headers
containment: 'parent' # Only drag within this container
placehol...
Javascript: Wait until an image has finished loading
The attached ImageLoader helper will start fetching an image and return an image that is resolved once the image is loaded:
ImageLoader.load('/my/image.png').then(function(image) {
...
});
The image argument that is yielded to the promise callback is an HTMLImageElement. This is the kind of object you get when you call new Image().
Testing Cookie Limits
TL;DR If you want to support most browsers, then don't exceed 50 cookies per domain, and don't exceed 4093 bytes per domain (i.e. total size of all cookies <= 4093 bytes)
Behind the link, you'll find a simple HTML page that offers some cookie tests (how large, how many etc) and an overview of this data for various browsers.
Fun fact: You cannot delete cookies with a key that hits the size limit and has a small value.
How to inspect RSS feeds with Spreewald, XPath, and Selenium
Spreewald gives you the <step> within <selector> meta step that will constrain page inspection to a given scope.
Unfortunately, this does not work with RSS feeds, as they're XML documents and not valid when viewed from Capybara's internal browser (e.g. a <link> tag cannot have content in HTML).
Inspecting XML
If you're inspecting XML that is invalid in HTML, you need to inspect the page source instead of the DOM. You may use Spreewald's "... in the HTML" meta step, or add this proxy step fo...
How to preview an image before uploading it
When building a form with a file select field, you may want to offer your users a live preview before they upload the file to the server.
HTML5 via jQuery
Luckily, HTML5 has simple support for this. Just create an object URL and set it on an <img> tag's src attribute:
$('img').attr('src', URL.createObjectURL(this.files[0]))
Unpoly Compiler
As an Unpoly compiler, it looks like this:
up.compiler '[image_p...
Install MySQL 5.6 in Ubuntu 16.04
Instead of using this hack you might want to use MariaDB 10.x which can work with both old and new apps.
An alternative could be to use the MySQL Docker image which is still updated for 5.6.
Ubuntu 16.04 only provides packages for MySQL 5.7 which has a range of backwards compatibility issues with code written against older MySQL versions.
Oracle maintains a list of official APT repositories for MySQL 5.6, but those repositories do...
Using Bumbler to Reduce Runtime Dependencies - The Lean Software Boutique
Tool to show you which gems are slow to load:
➜ git:(master) ✗ bundle exec bumbler
[################################################# ]
(49/65) travis-lint...
Slow requires:
110.21 render_anywhere
147.33 nokogiri
173.83 haml
179.62 sass-rails
205.04 delayed_job_active_record
286.76 rails
289.36 mail
291.98 capistrano
326.05 delayed_job
414.27 pry
852.13 salesforce_bulk_api
An interactive Git shell
Git commands tend to come in groups. Avoid typing git over and over and over by running them in a dedicated git shell.
You might want to run git config --global help.autocorrect true before using gitsh. This will silently swallow a muscle-memory "git" prefix to your commands inside the git shell.
jQuery promises: done() and then() are not the same
jQuery's deferred objects behave somewhat like standard promises, but not really.
One of many subtle differences is that there are two ways to chain callbacks to an async functions.
The first one is done, which only exists in jQuery:
$.ajax('/foo').done(function(html) {
console.debug("The server responded with %s", html);
});
There is also then, which all promise libraries have:
$.ajax('/foo').then(function(html) {
console.debug("The server resp...
Stretching an HTML page to full height
This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current list of browsers we support.
By default your html and body elements are only as high as the actual page content inside their container. If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser window.
You might be surprised by this, since setting a background on either html and `body...
How to fix: HTML5 video not working in IE9
While IE9 does support HTML5 <video> tags, it fails to work until you force HTML5 mode.
Here are two ways to do that.
Option 1: Doctype
Make sure your HTML document uses HTML5. It should start like this:
<!DOCTYPE html>
Option 2: Magic meta tag
If you can not set a doctype, you use the X-UA-Compatible meta tag in your HTML <head>.
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
IE11: Trigger native mouse events with Javascript
The attached Coffeescript helper will let you create mouse events:
$element = $('div')
Trigger.mouseover($element)
Trigger.mouseenter($element)
Trigger.mousedown($element)
Trigger.mouseup($element)
Trigger.mouseout($element)
Trigger.mouseleave($element)
Trigger.click($element)
The dispatched events are real DOM events, which will trigger both native and jQuery handlers.
jQuery's .trigger is simpler, but will only trigger event handlers that were bound by jQuery's .on.
Real user actions t...
Ever wanted man pages that actually help? Here you go
Enter any command into explainshell and it will explain it to you: split into separate commands (if present), with each option explained.
About
Hello,
This site contains 29761 parsed manpages from sections 1 and 8 found in Ubuntu's manpage repository. A lot of heuristics were used to extract the arguments of each program, and there are errors here and there, especially in manpages that have a non-standard layout.
It is written in Python and uses bashlex, a bit of NLTK (to find the interesting parts of the manpage), a little d3....
Manually uploading files via AJAX
To upload a file via AJAX (e.g. from an <input type='file'>) you need to wrap your params in a FormData object.
You can initialize a FormData using the contents of a form:
var form = document.querySelector('form.my-form') // Find the <form> element
var formData = new FormData(form); // Wrap form contents
Or you can construct it manually, param by param:
var fileInput = document.querySelector('form input[type=file]');
var attachment = fileInput.files[0];
var f...
Get compiled code of a view template in Rails 4.2
If you want to inspect the compiled code of your erb (or haml) templates, you can run the following code in your view or your controller:
template = lookup_context.find_template(action_name, lookup_context.prefixes)
template.handler.call(template.refresh(self))
The output will be something like
@output_buffer = output_buffer || ActionView::OutputBuffer.new;@output_buffer.safe_append='My template
'.freeze;@output_buffer.to_s
Linux: Open a file with the default application
If you are on a Linux shell and want to open a file with whatever default application is configured for that type, this often works:
xdg-open Quote.odt
xdg-open invoice.pdf
xdg-open index.html
Pro Tip
Make an alias so you have a simpler API (like Mac OS): alias open=xdg-open or alias x=xdg-open.
Background
You can choose your "Default applications" via UI in the Ubuntu "Settings" application (gnome-control-center). This is just a very rough setting (e.g. open Photos with Shotwell Viewer).
If a certain file...
Capybara: Find the innermost DOM element that contains a given string
Let's say you want to find the element with the text hello in the following DOM tree:
<html>
<body>
<article>
<strong>hello</strong>
<strong>world</strong>
</article>
</body>
</html>
You might think of XPath's contain() function:
page.find(:xpath, ".//*[contains(text(), 'hello')")
Unfortunately that returns a lot more elements than you expect:
[ <html>...<html>,
<body>...</body>,
<article>...</article>,
<strong>hello</strong> ]
What you need to do instead is to *find all...
How to reverse the order of HTML elements with CSS
Imagine you have a list you want to render inline on large screens, but stacked on small screens.
<ul>
<li>high</li>
<li>medium</li>
<li>low</li>
</ul>
ul { white-space: nowrap } /* optional: keep items in one line no matter the available width */
li { display: inline-block }
@media (max-width: 600px) {
li { display: block }
}
Now imagine you want the rightmost item to be the topmost item on small screens. You'll need to invert the order of list items, but only for large screens. Here are some approaches to do so:...
Rails route namespacing (in different flavors)
TL;DR There are three dimensions you can control when scoping routes: path helpers, URL segments, and controller/view module.
scope module: 'module', path: 'url_prefix', as: 'path_helper_name' do
resources :examples, only: :index
end
as → prefixes path helpers: path_helper_name_examples_path and path_helper_name_examples_url
path → prefixes URL segments: /url_prefix/examples
module → nests the controller: controller Module::ExamplesController, found at app/controllers/module/examples_controller.rb with views ...
Create and send any HTTP request using the Postman request builder
Talking with APIs makes more fun using Postman. As an alternative you can also use command line tools like cURL.
snap install postman
How does it help me?
- Editing multiline JSON bodies is much more comfortable than in the terminal
- Saving named requests in a collection (can be shared with others)
- Syntax highlighting when writing JSON bodies
- History with all my requests
- Multiple environments
- Cookie manager
Testing ActiveRecord callbacks with RSpec
Our preferred way of testing ActiveRecord is to simply create/update/destroy the record and then check if the expected behavior has happened.
We used to bend over backwards to avoid touching the database for this. For this we used a lot of stubbing and tricks like it_should_run_callbacks.
Today we would rather make a few database queries than have a fragile test full of stubs.
Example
Let's say your User model creates a first Project on cr...