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...
Restangular: How to remove an element from a collection without breaking restangular
So you have a restangular collection and you want to remove an element from it, after you've successfully deleted it from the server.
The README suggests to say something like $scope.users = _.without($scope.users, user)
. While that works at first glance (the element is no longer in your collection), it will break horribly when you want to use restangular's attributes on that collection.
This...
Understanding AngularJS service types
Angular comes with different types of services. Each one with its own use cases.
All of these services are singletons. You probably want to use Factory all the time.
Provider
- is the parent of all other services (except
constant
) - can be configured using `app.config(function(Provider) { ...})
- a little complex
Factory
- simpler than Provider, but without configuration
- definition: `app.factory('name', someFunction)
-
someFunction
is called when thename
service is instantiated and should return an object
Se...
LoDash: isBlank and isPresent mixins
When you need to check a value for presence, don't rely on JavaScript since it considers 0
or "0"
false. Also don't rely on LoDash's _.isEmpty
:
if ('0') { ... } // false
if (0) { ... } // false
^
if (!.isEmpty('0')) { ... } // true (= good)
if (!.isEmpty(0)) { ... } // false (= not good)
This is because isEmpty
it is only meant for objects with a length
.
While the name implies that it's meant only for collections, you probably still want something like isBlank
or `is...
Haml: Generating a unique selector for an element
Having a unique selector for an element is useful to later select it from JavaScript or to update a fragment with an Unpoly.
Haml lets you use square brackets ([]
) to generate a unique class name and ID from a given Ruby object. Haml will infer a class
attribute from the given object's Ruby class. It will also infer an id
attribute from the given object's Ruby class and #id
method.
This is especially useful with ActiveRecord instances, which have a persisted #id
and will hence **generate the same selector o...
How to click hidden submit buttons with Selenium
In your Cucumber features you can't really click hidden elements when using Selenium (it does work for a plain Webrat scenario, though).
Unfortunately you need to hack around it, like this:
When /^I press the hidden "([^\"]+)" submit button$/ do |label|
page.evaluate_script <<-JS
$('input[type=submit][value="#{label}"]').show().click();
JS
end
If your button is nested into a container that is hidden this will not do the trick. You need a more complex method to also show surrounding containers:
When /^I pre...
How to deal with MethodNotAllowed errors
One of the most common production errors are ActionController::MethodNotAllowed
errors. They usually happen when someone reloads a form by pressing enter
/return
in the URL field, or by opening JavaScript links incorrectly.
The attached initializer provides a default way to deal with this.
You'll get the following behaviour:
- if the incorrect request has a
HTTP_REFERER
coming from the same application, set a flash, and redirect back - if the incorrect request has no
HTTP_REFERER
or one coming from an external source, set a flash...
makandra/capybara-lockstep
capybara-lockstep can help you with flaky end-to-end tests:
This Ruby gem synchronizes Capybara commands with client-side JavaScript and AJAX requests. This greatly improves the stability of a full-stack integration test suite, even if that suite has timing issues.
Useful tricks for logging debugging information to the browser console
During debugging you might pepper your code with lines like these:
console.log('foo = ' + foo + ', bar = ' + bar)
I recommend to use variable interpolation instead:
console.log('foo = %o, bar = %o', foo, bar)
This has some advantages:
- It's easier to write
- Variables are colored in the console output
- You don't need to stringify arguments so the
+
operator doesn't explode - If the variable is a structured object like a D...
CSS3 Pie: Element not properly redrawn
Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.
Consider something like:
<ul>
<li class="active"><div class="content">Active element</div></li>
<li class="inactive"><div class="content">Inactive element</div></li>
</ul>
with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);
back...
Listening to bubbling events in Prototype is easy
If you come across an (older) application that is using Prototype instead of jQuery, you may often see events bound to single elements only, like this:
$('foo').observe('change', updateThings);
$('bar').observe('change', updateThings);
$('baz').observe('change', updateThings);
If you are calling only one method in each case, this is unnecessarily ugly. Also, when your page contents have been replaced via AJAX (like sections of a form after choosing something), those event hooks will no longer wo...
object-fit polyfill by lazysizes
All new browsers support the new object-fit
CSS property. It allows to specify how an element behaves within its parent element and is intended for images and videos. The most useful values are contain
(fit-in) and cover
(crop).
Unfortunately, IE does not support this yet. However, if you're already using lazysizes, you can use its object-fit polyfill!
Usage
In your Javascript manifest, require them like this:
#= require plugins/object-fit/ls.obj...
Selenium: How to close another tab (popup)
If you open a pop-up window [1] in your Selenium tests and you want to close it, you can do this:
# Find our target window
handle = page.driver.find_window("My window title")
# Close it
page.driver.browser.switch_to.window(handle)
page.driver.browser.close
# Have the Selenium driver point to another window
last_handle = page.driver.browser.window_handles.last
page.driver.browser.switch_to.window(last_handle)
Mind these:
-
find_window
returns a window handle, which is something like `"{485fa8bd-fa99-...
Use different CSS depending on whether elements render on the same line or multiple lines
You will find this useful when creating responsive designs that work well on small screens.
The attached Javascript gives a container different CSS classes (single_line
or multiple_lines
) depending on whether its children render on one line or multiple lines.
Initialize it with the selectors for container and children:
$(function() {
$('.navigation').countLines('a');
});
You can now use different CSS styles like this:
.navigation
&.single_line a
// styles when all anchors are rendered on the same line...
Click on a piece of text in Cucumber / Capyabra
The step definition below lets you write:
When I click on "Foo"
This is useful in Selenium features where the element you click on is not necessarily a link or button, but could be any HTML element with a Javascript event binding.
The easiest way to get this step is to use Spreewald. If you would like to add it manually, here is the step definition:
When /^I click on "([^\"]+)"$/ do |text|
matcher = ['*', { :text => text }]
element = page.find(:css, *matcher)
while be...
Pay attention to the order of your submit buttons
If you have several submit elements (input
s or button
s with type="submit"
) that each cause different things to happen (e.g. you might have a button that sends an extra attribute) you might run into trouble when submitting the form by pressing the return key in a field.
When nothing fancy like a tabindex
is defined it seems as if the first submit element inside a form is chosen (and has its attributes submitted) when pressing return.\
So, if possible, put your "default" (aka least harmful) submit element before others.
NB: If you s...
Geocoding Strategies - Google Maps API
The attached article outlines considerations when choosing client-side vs. server-side implementations of the Google Geocoding APIs (geocoder, directions, not maps drawing). The main points are:
- On the server side you only get a fixed daily request quota
- On the client side the quota is per-client, so basically unlimited
- When implementing APIs on the server-side, be aware that quota is measured by IP. When hosting in the cloud **you don't always know which other services might...
Test that a form field is visible with Cucumber/Capybara
Spreewald now comes with a step that tests if a form field is visible:
Then the "Due date" field should be visible
But the "Author" field should not be visible
The step works by looking up the field for the given label, then checks if that field is hidden via CSS (or Javascript).
It is not currently tested if the label is visible or hidden. For this see: [Check that an element is visible or hidden via CSS with Cucumber/Capybara](https://makandracards.com/makandra/1049-check-that-an-elem...
include_tags with the asset pipeline
You can include files from app/assets
or from the public
folder with javascript_include_tag
. The subtle difference that tells rails how to build the path correctly is a single slash at the beginning of the path:
<%= javascript_include_tag('ckeditor/config') %> # for assets/ckeditor/config.js
<%= javascript_include_tag('/ckeditor/ckeditor') %> # for public/ckeditor/ckeditor.js
This also applies to stylesheet_link_tag
.
Note that when you refer to a Javascript or stylesheet in /assets
you need to add it to [the list of asse...
Navigating through the browser history in a cucumber feature using selenium
In order to navigate through the browser history. you can manipulate the window.history object via javascript like follows:
When /^I go back in the browser history$/ do
page.evaluate_script('window.history.back()')
end
For further functions of the window and history objects check out this link.
An improved version of this step is now part of our gem spreewald on Github.
Disable text selection on iOS and Android devices
When you double-tap a string of text on an iPhone or iPad a complicated context menu for copying and pasting will appear. This can confuse unexperienced users.
Use the Javascript hack below to disable text selection on mobile devices:
// Deactivating distracting Text Selection:
// from: http://stackoverflow.com/questions/1794220/how-to-disable-mobilesafari-auto-selection
$.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() {
return false;
...
Updated: Capybara: Check that a page element is hidden via CSS
- The step we used in the past (
Then "foo" should not be visibile
) doesn't reliably work in Selenium features. - I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
- The step has support for jQuery and Prototype projects, so it should be a drop-in replacement for all your projects.
- For Rack::Test the step no longer uses XPath so you should be able to understand it when you are not a cyborg :)
- There were some other cards detailing alternative steps to detect visibility. I deleted all these other cards s...
Embed Google Analytics code for some environments only
When you use google analytics to track your visitors interactions, you should ensure that it runs on your production site only. Otherwise it will spoil your statistics. To prevent this, test for the right environment and place the JS-code afterwards:
- if Rails.env.production?
:javascript
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
...
Why you might not need MVC with React.js
React.js is a relatively new Javascript templating engine that has two-way-bindings like AngularJS or Batman. The interesting idea here is that React keeps a virtual copy of the DOM tree in memory, and when you re-render, it only changes the DOM as little as required. That means if you re-render a list with 1000 items, and only one item has changed, the browser-DOM will only remove and add a single element instead of 1000 elements. This makes React.js views insanely fast.
The attached article proposes that React.js is so fast that you don...