When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app: app/assets/fonts app/assets/images app/assets/javascripts app/assets/stylesheets With the asset pipeline, you can use the...
...power of Ruby to generate assets. E.g. you can have ERB tags in your Javascript. Or you can have an ERB template which generates Haml which generates HTML. You can...
...redirect with GET as expected. This is also what Unpoly or the Rails unobtrusive Javascript adapter does when you annotate a link with data-method="PATCH...
...for a multi-line text in your HTML. Earlier, it was necessary to implement JavaScript solutions like Superclamp.js to enable this because the browser support has been rather limited and...
Still, we recommend to use the CSS approach whenever possible, since Clamping in JavaScript has significant performance costs. Usage display: -webkit-box overflow: hidden overflow-wrap: break-word
Jasmine is a great way to unit test your JavaScript components without writing an expensive end-to-end test for every small requirement. After we integrated Jasmine into a Rails...
...your footprint small. Check your JS bundles Webpack(er): Analyze the size of your JavaScript components
...event on window. It will be emitted for all uncaught errors in the current JavaScript VM: window.addEventListener('error', function(event) { console.log("Got an uncaught error: ", event.error) }) Tip Testing tools like...
...concept, like a Ruby class attribute (snake_case) that is also exposed to the JavaScript world (camelCase). # This query matches "foobar", "foo-bar" and "foo_bar" # The query is case...
...a package functionality from window e.g. $(...).datepicker() from your dev console or any other javascript within the application. Background By default yarn will create a folder node_modules that includes...
...to window, to have access to jQuery from our dev console or any other javascript within the application. app/webpack/packs/main.js window.$ = jQuery window.jQuery = jQuery Now this will not allow us to...
...Our primary concern here is users uploading .html or .svg files that can run JavaScript and possibly hijack another user's session. A secondary concern is that malicious users can...
...E.g. console.log("Current string:", string, "Current number:", 12) Your output can have hyperlinks to Javascript objects E.g. console.log("Check out the current %o, it's great", location) Displaying tabular data...
...sometimes your application will explode with an error outside your control. Two examples: A JavaScript library references a source map in its build, but forgets to package the source map...
...leading to validation errors and thus user confusion. We can fix all that with JavaScript: const element = document.querySelector('#your-input') // Number inputs allow incrementing/decrementing with arrow keys, and support exponential...
...missing an href attribute. This will probably happen to you every now and then on JavaScript-heavy applications. An example would be an AngularJS application where the following HTML actually...
...jQuery cache even exists. After all jQuery could simply attach event handlers to the Javascript object that represents the DOM element. The reason for the existence of the jQuery cache...
...is that old versions of Internet Explorer could not garbage-collect Javascript objects with circular references. For instance, the following object graph could not be reclaimed by old IE's...
...the required controller actions with @model.nested_model.build. If you are adding fields dynamically by using JavaScript, then the form helper method should take care of this: new_nested_record = f.object.send(nested...
timemachine.js allows you to mock the client's time by monkey-patching into Javascript core classes. We use timemachine.js in combination with the Timecop gem to synchronize the local...
...we see that Timecop is mocking the time: - if defined?(Timecop) && Timecop.top_stack_item = javascript_include_tag "timemachine.js" :javascript timemachine.config({ dateString: #{Time.now.to_json}, tick: true }) Warning timemachine.js will mock the...
...want to track interactions that don't have a corresponding URL + request (e.g. a Javascript button or a PDF download) Luckily the Analytics code snippet allows you to freely choose...
...disabled text field is not possible (copy&paste does not work) Firefox cancels any JavaScript events at a fieldset[disabled] readonly fields post to the server get focus
...language settings. For example, German users will see 1,23 for . Values in the JavaScript API or when submitting forms to the server will always use a point as decimal...
...the matchers fail. This helps when browser state changes between expectations, e.g. by async JavaScript that mutates the DOM tree while you're making multiple observations. Custom matchers must be...
...knowing what to look for. When coming from jQuery, also see the card on JavaScript without jQuery. This card includes a link to You Don't Need jQuery, which summarizes...
...most of the alternatives in native Javascript implementation to jQuery methods...
extract_css: true 3. Change stylesheet_link_tag to stylesheet_pack_tag and javascript_include_tag to javascript_pack_tag 4. Replace image_tag with image_pack_tag if...
...the modules in other files, like the app/webpack/stylesheets/boostrap.sass imports the bootstrap stylesheet. For old Javascript libraries you need to expose jQuery to the window object. Here is an example how...
...you understand "impossible" behavior of your tests. When you run a Rack::Test (non-Javascript) test with Capybara, there is a single process in play. It runs both your test...
...and the server responding to the user interactions scripted by your test. A Selenium (Javascript) test has a lot more moving parts: One process runs your test script. This is...
...app, browser: :chrome, options: options) end Before do Capybara.current_driver = :rack_test end Before('@javascript') do Capybara.current_driver = :selenium