Bug in Chrome 56+ prevents filling in fields with slashes using selenium-webdriver/Capybara
Chrome 56+ can drop slashes when fill_in runs through Selenium and Capybara, breaking form input for paths and HTML strings; a JavaScript workaround updates the field directly.
Check that an element is hidden via CSS with Spreewald
CSS-hidden text can pass Rack::Test because it inspects only the DOM, while Selenium checks actual visibility for user-facing content.
How to test print stylesheets with Cucumber and Capybara
Print stylesheets often regress as apps evolve, leaving paper output cluttered or unreadable. Cucumber and Capybara can verify visible content, white backgrounds, and hidden controls.
JavaScript: Don't throw synchronous exceptions from functions that return a Promise
Promise-returning functions are hard to use when they sometimes throw synchronously; returning a rejected promise keeps failure handling consistent.
Disable built-in dragging of text and images
Browser text and image dragging can block custom horizontal scrolling or pointer-based movement. Disabling native drag behavior needs CSS and, in Firefox, JavaScript.
How to make select2 use a Bootstrap 4 theme
Select2 can be styled to match Bootstrap 4, using a Bootstrap 4 theme fork and matching Sass imports for consistent dropdown controls.
How to click hidden submit buttons with Selenium
Hidden form submit buttons cannot be clicked directly in Selenium-based Cucumber scenarios; temporarily revealing the element and ancestor containers makes the click possible.
AngularJS: Access the scope for a rendered DOM element
Accessing the AngularJS scope attached to a rendered DOM node helps inspect or manipulate repeated elements, useful for advanced directives and drag-and-drop trees.
Implementing social media "like" buttons: Everything you never wanted to know
Embedding social widgets can expose cookies, trigger background tracking, and slow pages; privacy-friendly two-step buttons and async loading reduce the impact.
How to solve Selenium focus issues
Browser focus loss makes Selenium tests flicker red and green, especially with Firefox and parallel runs. Explicit focus and blur handling and focus-independent tests improve stability.
Jasmine: Testing AJAX calls that manipulate the DOM
AJAX DOM updates are hard to test when requests are asynchronous and the target element is missing. jasmine-ajax, jasmine-fixture, and done make network mocking and DOM setup possible.
JavaScript events: target vs currentTarget
event.target points to the clicked descendant, while event.currentTarget points to the element handling the listener; currentTarget is usually the safer choice.
Howto: Select2 with AJAX
Load large choice lists on demand with AJAX in Select2 to avoid huge HTML and support paged, infinite-scrolling results.
Keyboard Navigation Plugin for Safari, Chrome and Firefox with a rich feature set
Keyboard-driven web navigation reduces mouse use and can speed up common browser actions, with selector-based element picking for command-line-minded users.
How to preview an image before uploading it
Live image previews in file upload forms improve user feedback before sending files to the server, using URL.createObjectURL with img tags or Unpoly compilers.
Javascript equivalent of Ruby's array.collect(&:method)
Calling a method on every element and collecting the results into a new array has no native JavaScript shorthand; library helpers like pluck fill the gap for property values.
You cannot use :before or :after on img in CSS
CSS pseudo-elements :before and :after do not render on img elements in browsers, so generated content cannot be added directly to images.
Prevent double clicks on link_to_remote (simple case)
Prevent repeated clicks on an AJAX link by swapping it for a harmless duplicate after the first click, avoiding duplicate requests in simple disappearing-link cases.
Cucumber: Wait for any requests to finish before moving on to the next scenario
Selenium/Cucumber scenarios can finish before browser requests and redirects are done, leaving the session busy and breaking later steps and hooks.
Use different CSS depending on whether elements render on the same line or multiple lines
Responsive layouts can switch styles when content wraps onto multiple lines or stays on one line, enabling different treatment for narrow screens.
simple_format helper for Javascript
Rough JavaScript equivalent of Rails simple_format for turning plain text into HTML paragraphs and line breaks. Whitespace preservation is not included.
Re-enable submit buttons disabled by the :disable_with option
Rails submit buttons with :disable_with can stay disabled after back navigation, leaving forms unusable until they are re-enabled on page unload.
Disable text selection on iOS and Android devices
Mobile browsers can trigger accidental text highlighting and copy menus, confusing users. A small JavaScript/jQuery workaround suppresses selection on touch devices.
Nice way to set data attributes when creating elements with Rails helpers
link_to and content_tag accept a :data hash for HTML5 data attributes in Rails 3, simplifying data-foo and data-bam output.