...application from Sprockets to Webpack(er), you can either transpile your CoffeeScript files to JavaScript or integrate a CoffeeScript compiler to your new process. This checklist can be used to...
...except that it returns all types of child nodes) Filter manually using either plain Javascript or jQuery's filter() method Example Let's write a function that takes a jQuery...
If you use Cucumber for integration testing, wrap that into something like Before('@javascript') {...
Benefits of using device metrics are: You can configure any device resultion and are not...
...emulation file below. Problems and Solutions while upgrade capybara and cucumber problems with capybara javascript emulation Remove the following line from your features/support/env.rb file if present. require 'cucumber/rails/capybara_javascript_emulation'
...still have problems with teh capybara javascript emulation, please download capybara_javascript_emulation.rb to features/support/. undefined method click' for class Capybara::Driver::RackTest::Node' (NameError) Capybara::Driver::RackTest namespace moved to Capybara...
...explained in this card. It will prevent attackers from reading your cookies by malicious Javascript and prevent the user's browser from sending it over insecure HTTP connections. Generally: prefer...
In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails). Step 1: Moving HTML snippets Add a find-as-you...
...of HTML from the server. For the part of the implementation that lives in Javascript, implement a Search.match(query) method that returns a promise. You should be able to use...
...regex editors that help you by highlighting matching text and capture groups: Ruby: Rubular Javascript: RegExr Regular expression visualizer using railroad diagrams
...want to reference a card from a different deck, this bookmarklet might be useful: javascript:(function () { const doAlert = () => { alert("Maybe not a makandra card?") }; let cardsPathPattern = /(\/[\w-]+\/\d+)-.+/; if (window.location.pathname.match...
Capybara gives you two different methods for executing Javascript: page.evaluate_script("$('input').focus()") page.execute_script("$('input').focus()") While you can use both, the first line (with evaluate_script) might freeze...
config.rb activate :livereload activate :sprockets configure :build do activate :minify_css activate :minify_javascript activate :asset_hash end # Middleman fails to reload helpers, although it notices their modification
Complex "static" pages might need some integration testing, especially if they contain complex Javascript code. To employ Cucumber with Spreewald and Selenium, add these gems to the Gemfile:
...canvas.pad{:width => Signature::WIDTH, :height => Signature::HEIGHT} = form.hidden_field :signature, :value => nil, :class => 'output' :javascript $(function() { $('.signature_form') .signaturePad({ drawOnly: true, validateFields: false, lineTop: #{Signature::HEIGHT - 30} }) .regenerate(#{JSON.parse(@signature.signature...
...file into spec/fixtures. When /^I sign the form$/ do signature = File.read('spec/fixtures/signature.json') page.execute_script(<<-JAVASCRIPT) $('.signature_form').data('plugin-signaturePad').regenerate(#{signature}); JAVASCRIPT
...browsers has ended. Some more advantages of clipboard.js: it consists only of a single javascript file, so it does not trigger additional requests with rails it automagically provides user feedback...
Add clipboard.js to your project through bower or by downloading and adding the javascript file to the asset pipeline. Require it in your application.js: #= require clipboard Prepare your html...
Automatically builds gems from Bower packages (currently 1700 gems available). Packaged Javascript files are then automatically available in your asset pipeline manifests. Why we're not using it
...choice to use bower-rails instead. While we believe Rubygems/Bundler to be superior to Javascript package managers, we wanted to use something with enough community momentum behind it that it...
...also namespaces files compiled files inside a pack CSS files are stored inside css, JavaScripts inside js and images inside media If you namespaced your pack's contents like /your-pack-name/images...
...attribute will become standard soon. Feel free to use to feel future-proof. On JavaScript file objects, webkitRelativePath is supported similarly to webkitdirectory in HTML. As a fallback for older...
Then I should see an error These step definitions will not work for @javascript scenarios using the selenium web-driver @allow-rescue @javascript Scenario: Accessing the admin area requires...
...measure to solve Selenium focus issues, but this would require you un-parallelize all @javascript scenarios, leading to decreased performance of your test suite. To un-parallelize all @javascript scenarios...
...change the code at the bottom to this: Around("@no_parallel, @javascript") do |scenario, block| NO_PARALLEL_MUTEX.acquire(&block)
CSS (+ some Javascript) framework, implementing Google's material design for static web pages. Can be used for plain websites without requiring a full blown Javascript framework, unlike the (also excellent...
...and will constantly scroll the page to the top. Using it together with a JavaScript framework requires some care, because you constantly need to "upgrade" elements with MDL.
Search engines, such as Google and Bing are engineered to crawl static web pages, not javascript-heavy, client-side apps. This is typical of a search engine which does not...
...render javascript when the search bot is crawling over web pages. This is because our javascript-heavy apps need a javascript engine to run, like PhantomJS or v8, for instance...
...a Firefox extension but there is also a "Lite" version which runs purely off JavaScript. Though all major browsers offer inspection tools you may like the Firebug style. Also, for...
Get the bookmarklet over at http://getfirebug.com/firebuglite#Stable. It usually loads the JavaScript code from a remote server but you can also download it to have it run...
...universal method present? which returns true for all values that are not blank?. In JavaScript you need to roll your own implementation of blank? and present?. If your application uses...
...console.log(up.util.isBlank(foo)) // prints false console.log(up.util.isBlank(bar)) // prints true Testing for missing values JavaScript has both undefined or null to represent a missing value. Although there used to be...
...best cost-benefit ratio. (Know that this does not detect touch devices, but browsers.) Javascript var isTouchDevice = 'ontouchstart' in window Coffeescript isTouchDevice = 'ontouchstart' of window On the difference between the...
...Javascript and the Coffeescript version, see Beware: Coffeescript "in" is not the Javascript "in...
The Rails asset pipeline improves delivery of application assets (javascripts, stylesheets, images, fonts). Here are some basic facts about its inner workings. No magic Manifests are the handle on your...
...files are just sub-manifests. The need the corresponding file ending (e.g. .js for Javascript files), because "Sprockets assumes you are requiring a .js file when done from within a...
...patiently will sometimes break: with_scope('.container') do # => this caches the container element # => here JavaScript swaps the container element page.find('.child') # => tries to find a child of the previously cached...
end with_scope('.container') do # => this caches the container element # => here JavaScript swaps the container element page.find('.child') # => tries to find a child of the previously cached...