HTML: Making browsers wrap long words
By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only.
This card explains some options to make browsers wrap inside a long word like "Donaudampfschifffahrt".
Option 1: Soft hyphens
Unicode has a soft hyphen character you can use to mark optional word division opportunities. The soft hyphen is an invisible character with zero width. Only when the browser decides to wrap at a soft hyphen, it is turned in...
Lazy-loading images
Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the total load time. When your internet connection is good, this is usually not an issue. However, users with limited bandwidth (i.e. on mobile) need to mine their data budget better.
One popular strategy to improve the website performance is to not load images until they enter the viewport – aka "lazy-loading images".
General Issues
- Crawlers do not execute JavaScript (generally sp...
How to evaluate CSS media queries in JavaScript
To make CSS rules dependent on the screen size, we use media queries:
@media (max-width: 500px) {
// rules for screen widths of 500px or smaller
}
Browsers will automatically enable and disable the conditional rules as the screen width changes.
To detect responsive breakpoints from JavaScript, you may use the global matchMedia() function. It is supported in all brow...
How to grep through the DOM using the Capybara API
When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use all and find to grep through the DOM and then perform your search in plain Ruby.
Here is an example for this technique:
Then /^I should see an image with the filename...
Jasmine: Testing AJAX calls that manipulate the DOM
Here is a Javascript function reloadUsers() that fetches a HTML snippet from the server using AJAX and replaces the current .users container in the DOM:
window.reloadUsers = ->
$.get('/users').then (html) ->
$('.users').html(html)
Testing this simple function poses a number of challenges:
- It only works if there is a
<div class="users">...</div>container in the current DOM. Obviously the Jasmine spec runner has no such container. - The code requests
/usersand we want to prevent network interaction in our unit test...
Printing background color of elements
Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don't want to spent tons of ink printing the background of a web page. But in some cases you want to print the background color of elements, e.g. bars of a chart. For those elements you need to set the following css styles:
-webkit-print-color-adjust: exact; /* Chrome and Safari */
color-adjust: exact; /* Firefox */
Note that if you're using autoprefixer, you don't need...
CSS: Opacity is not inherited in Internet Explorer
Non-static elements will not inherit their parent's opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.
To fix it, give the parent element defining the opacity a non-static positioning. For example:
.parent {
opacity: 0.2;
position: relative; /* for IE */
}
While the linked article describes this problem for IE9 and below, I have encountered the same issue in IE10 and IE11.
Just go away, Internet Explorer!
Defining new elements for your HTML document
Browsers come with a set of built-in elements like <p> or <input>. When we need a new component not covered by that, we often build it from <div> and <span> tags. An alternative is to introduce a new element, like <my-element>.
When a browser encounters an unknown element like <my-element>, the browser will proceed to render <my-element>'s children. The visual rendering of your page will not be affected.
If you care about their HTML being valid, your new element should contain a dash character (-) to mark it as a *custom el...
Detect the current Rails environment from JavaScript or CSS
Detecting if a Javascript is running under Selenium WebDriver is super-painful. It's much easier to detect the current Rails environment instead.
You might be better of checking against the name of the current Rails environment. To do this, store the environment name in a data-environment of your <body>. E.g., in your application layout:
%body{'data-environment' => Rails.env}
Now you can say in a piece of Jav...
Waiting for page loads and AJAX requests to finish with Capybara
If you're using the Capybara webdriver, steps sometimes fail because the browser hasn't finished loading the next page yet, or it still has a pending AJAX request. You'll often see workarounds like
When I wait for the page to load
Then ...
Workarounds like this do not work reliably, will result in flickering tests and should be avoided. There is no known reliable way to detect if the browser has finished loading the page.
Solution
Instead you should wait until you can observe the result of a page load. E.g. if y...
Organize large I18n dictionary files in Rails 3+
If you're suffering from a huge de.yml or similiar file, cry no more. Rails lets you freely organize your dictionary files in config/locales.
My organization works like this:
config/locales/rails.de.ymlmodified Rails boilerplateconfig/locales/faker.de.ymlmodified Faker boilerplateconfig/locales/models.de.ymlmodel names, attribute names, assignable_value labels- `config/locales/views.de.y...