...To get more detailed insights consider using the rack-mini-profiler gem. Setup with Unpoly Add the following gems: group :development do gem 'memory_profiler' gem 'rack-mini-profiler'
end Unpoly will interfere with the rack-mini-profiler widget, but configuring the following works okayish: // rack-mini-profiler + unpoly if (process.env.NODE_ENV === 'development') { // disable unpoly for links in...
...server, Rails will show a minimal error page with only basic information. Because all Unpoly updates work using AJAX requests, you won't get the more detailled better_errors page...
...isDevelopmentError() function so it returns true when your particular development server shows an error. Unpoly >= 2.x // Only do this in development. This requires a `[data-environment="development"]` attribute on...
...variants, that add a more intuitive workflow when working with nested attributes in Rails + Unpoly. Example For the following examples we use a simple data model where a user has...
...error if a targeted fragment is destroyed while a validation request is loading. Instead Unpoly will only update the fragments that are still present on the page (if any).
You can use Unpoly's up.on with a named listener function and immediately unbind this event listener with { once: true }: up.on('up:fragment:inserted', { once: true }, function () {...
...for the callback function, which should run only once }) Example case I had an Unpoly compiler for a tab navigation, which sets an -active class per default to the first...
Usually, Unpoly compiler destructors are returned from the compiler function. However, when using async compiler functions, you can not register destructors via return. This will not work: up.compiler('my-example...
...is waiting. Then, up.destructor would register the destructor function on the detached element, but Unpoly never calls that destructor and your application effectively leaks memory. In almost all cases you...
...behavior to matching HTML elements as they enter the DOM. This works like an Unpoly compiler for apps that don't use Unpoly, Custom Elements or any other mechanism that...
Unpoly's [up-observe], [up-autosubmit] and [up-validate] as well as their programmatic variants up.observe() and up.autosubmit() are a nightmare for integration tests. Tests are usually much...
...Therefore, it may happen that you already entered something into the next field before unpoly updates that field with a server response, discarding your changes. The steps I wait for...
When your JavaScript bundle is so massive that you cannot load it all up front, I would recommend to load...
...the file and insert it in the DOM, which is never what you want. Unpoly 2 Unpoly (since version 2) can be configured to follow all links (or submit all...
...as a Content-Disposition: attachment header sent by the server. You can also tell Unpoly to treat that one link as a vanilla Javascript link...
...external libraries To use an external library, install it with yarn, e.g. yarn add unpoly Then simply import it in your main.js (or anywhere else), by adding import 'unpoly'
You can import stylesheets from external libraries the same way. To load Unpoly's default CSS for example, add // packs/main.js import 'unpoly/dist/unpoly.css' As above, we usually want to...
...need to roll your own implementation of blank? and present?. If your application uses Unpoly you may also use up.util.isBlank(). By default, this function returns true for: undefined null
...tests, see Detect the current Rails environment from JavaScript or CSS. Disabling animations in Unpoly In Unpoly you can globally disable animations like this: up.motion.config.enabled = false Disabling animations in AngularJS...
...This will implicit serialize UI interactions that make an AJAX request. You can configure Unpoly to only allow a single pending request at a time: // Unpoly 2 up.network.config.concurrency = 1
The default Google Analytics might not work as expected with your Unpoly app. This is because your app only has a single page load when the user begins her session...
...one for the submission. Sometimes the validation request would return after the submit request. 💥 Unpoly tried to show the validation error, but the form was already gone.
...looked at the validation results. 🤷 Note The issue above can no longer occur in Unpoly 2's [up-validate]. Example: Locking forms against concurrent edits This is from a real...
...written in jQuery and you don't plan to use native libraries (like modern Unpoly versions), this does not affect you. Fixing your own code If possible, change your code...
...t use jQuery's trigger() function. Instead trigger native events using Element#dispatchEvent() or Unpoly's up.emit(). To simplify this refactoring, here is a jQuery function triggerNative() that you can...
...Simple change this: ga('send', 'pageview'); ... to this: ga('send', 'pageview', { 'page': '/YOUR-CUSTOM-PATH' }); With Unpoly With Unpoly you want to trigger an Analytics pageview whenever a major content fragment is...
See Unpoly instructions here. Legacy snippet Change this: _gaq.push(['_trackPageview']); ... to this: _gaq.push(['_trackPageview', '/YOUR-CUSTOM-PATH...
...much nicer than it used to be, and we can polyfill the missing pieces Unpoly 0.60.0 works with or without jQuery Is jQuery slow? From: Sven To: unpoly@googlegroups.com Subject: performance...
mobile devices. Actually very often it feels much slower, than without unpoly. This defies it's purpose. And it is nowhere on the page stated, that it...
...or npm update on all minor and patch updates. Examples Bad { "dependencies": { "autosize": "^6.0.1", "unpoly": "^2.7.2" } } This blocks automatic updates of autosize and unpoly when running yarn upgrade or npm...
Good { "dependencies": { "autosize": "x", "unpoly": "x" } } All packages are easily updateable with yarn upgrade or npm update Note: "unpoly": "x" and "unpoly": "*" expresses the same version constraint Good { "dependencies...
...at a common example: Clear Search The HTML above is being activated with an Unpoly compiler like this: up.compiler('[filter]', function(filterForm) { const resetButton = filterForm.querySelector('[filter--reset]') const queryInput = filterForm.querySelector...
...readers will announce it as a "button" when focused: Clear Search Now change your Unpoly compiler to activate the button on keydown in addition to click: up.compiler('[filter]', function(filterForm...
...a selector like "span.foo" and turn it into a element for you: up.element (from Unpoly) jasmine-fixture (requires jQuery) dom-create-element-query-selector Here is the example above using...
...Unpoly's up.element.affix() function: let list = up.element.affix(jasmine.fixtures, 'ul[type=square]') up.element.affix(list, 'li', text: 'item 1') up.element.affix(list, 'li', text: 'item 2') Note how every call to up.element.affix() returns...
addMatchingEventListener(container, 'click', '.message', function(event) { console.log("A message was clicked!") } With Unpoly If you're using Unpoly you can use up.on() to register a delegating event listener...
# config/initializers/haml.rb Haml::BOOLEAN_ATTRIBUTES.push(/^app-/) Haml::BOOLEAN_ATTRIBUTES.push(*%w[one another]) Boolean ARIA and Unpoly attributes Be very selective about adding up- attributes so you can still use expressions like...
...aria-expanded=false] or [up-follow=false] without the attribute disappearing entirely. Starting with Unpoly 3.8, most Unpoly attributes can be enabled with a value "true" and be disabled with...
...and how do they compare with cookies? Have look at the MDN page and Unpoly's comparison table. You don't have to understand what a layer context is, we...
...ll talk about Unpoly in a later card Resources Rails Guides - ActionController#cookies Rails Guides - ActionController#session Exercise: Star movies In your MovieDB, implement a feature to star / unstar your...