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...
Custom transclusion with Angular
Angular's directives have a transclude option, that allows for rendering an element's original content within the directive's template:
# HTML
<wrapping-directive>
Content ...
</wrapping-directive>
# Directive template
<div class="wrapper">
<ng-transclude></ng-transclude>
</div>
# Result
<div class="wrapper">
Content ...
</div>
However, if you need more control over the transcludable content you need heavier armor. For this case, Angular provides you with a transclusion function as the 5th argument of...
HTTP 302 redirects for PATCH or DELETE will not redirect with GET
A HTTP 302 Found redirect to PATCH and DELETE requests will be followed with PATCH or DELETE. Redirect responses to GET and POST will be followed with a GET. The Rails form_for helper will use a workaround to send POST requests with a _method param to avoid this issue for PATCH/DELETE.
If you make requests yourself, watch out for the following behavior.
When you make an AJAX request PATCH /foo and the /foo action redirects to /bar, browsers will request PATCH /bar. You probably expected the second requ...
Centering with CSS vertically and horizontally (all options overview)
There are a million ways to center <div>s or text in CSS, horizontally or vertically. All the ways are unsatisfying in their own unique way, or have restrictions regarding browser support, element sizes, etc.
Here are two great resources for finding the best way of aligning something given your use case and browser support requirements:
- How to center in CSS
-
A long form that lets you define your use case and browser support requirements, then shows you the preferred way of aligning.
[Centering CSS: A co...
ActiveRecord meets database views with scenic
Using Scenic, you can bring the power of SQL views to your Rails application without having to switch your schema format to SQL. Scenic provides a convention for versioning views that keeps your migration history consistent and reversible and avoids having to duplicate SQL strings across migrations. As an added bonus, you define the structure of your view in a SQL file, meaning you get full SQL syntax highlighting in the editor of your choice and can easily test your SQL in the database console during development.
[https://robots.thoughtb...
Showing a custom maintenance page while deploying
Note
The maintenance mode is enabled on all application server as soon as the file
/public/system/maintenance.htmlis present.
Installation
Add this line to your application's Gemfile:
gem 'capistrano', '~> 3.0'
gem 'capistrano-maintenance', '~> 1.0'
Add this line to you application's Capfile:
require 'capistrano/maintenance'
Enable task
Present a maintenance page to visitors. Disables your application's web interface by writing a #{maintenance_basename}.html file to each web server. The servers m...
How to render an html_safe string escaped
Once Rails knows a given string is html_safe, it will never escape it. However, there may be times when you still need to escape it. Examples are some safe HTML that you pipe through JSON, or the display of an otherwise safe embed snippet.
There is no semantically nice way to do this, as even raw and h do not escape html_safe strings (the former just marks its argument as html_safe). You need to turn your string into an unsafe string to get the escaping love from Rails:
embed = javascript_tag('var foo = 1337;') # This is an h...
Top 10 Email Developments of 2015
You know that layouting HTML e-mails is terrible.
For more fun, check Litmus' list of top 10 e-mail developments of 2015 that did not make things better.
Use jQuery's selector engine on vanilla DOM nodes
There are cases when you need to select DOM elements without jQuery, such as:
- when jQuery is not available
- when your code is is extremely performance-sensitive
- when you want to operate on an entire HTML document (which is hard to represent as a jQuery collection).
To select descendants of a vanilla DOM element (i.e. not a jQuery collection), one option is to use your browser's native querySelector and [querySelectorAll](https://developer.mozilla.org/de/docs/We...
Git: Keep your repository tidy
When you're using feature branches, they will stack up if you don't delete them after the merge to master. Here's how to tidy them up.
Delete feature branches
Find already-merged branches by running
# On branch master
git branch --merged
You may safely delete each of the listed branches, because they point to commits that are contained in the history of your current branch (i.e. master).
git branch -d my/feature-branch # Delete feature branch locally
git push origin :my/feature-branch # Push *nothi...
How to open a new tab with Selenium
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
...
Make Nokogiri use system libxml2
The nokogiri gem provides different packages for several platforms. Each platform-specific variant ships pre-built binaries of libxml2, e.g. x86_64-linux includes binaries for 64bit Linux on Intel/AMD. This significantly speeds up installation of the gem, as Nokogiri no longer needs to compile libxml2.
However, this also means that for each security issue with libxml2, Nokogiri maintainers have to update their pre-built binaries and release a new version of the gem. Then, you need to update and ...
RSpec & Devise: How to sign in users in request specs
You know that Devise offers RSpec test helpers for controller specs. However, in request specs, they will not work.
Here is a solution for request specs, adapted from the Devise wiki. We will simply use Warden's test helpers -- you probably already load them for your Cucumber tests.
First, we define sign_in and sign_out methods. These will behave just like ...