HTML <video> elements can automatically start playing when the autoplay attribute is set on them. Except for when they can not, e.g. when the element enters the DOM without user interaction or on pageload or when the browser for some other reason decided to not start playing the video.
While there is no native "autoplay failed" event to listen to, you can wait for video data to be loaded and then check if the video actually started playing.
<video autoplay>
<source src="example.mp4" type="video/mp4" />
</video>
``...
Debugging performance issues in your Rails app can be a tough challenge.
To get more detailed insights consider using the rack-mini-profiler gem.
Add the following gems:
group :development do
gem 'memory_profiler'
gem 'rack-mini-profiler'
gem 'stackprof'
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 the profiler
up.link...
There are two ways a logout in SAML can happen: Service Provider (SP) initiated and Identity Provider (IDP) initiated logout. I'll explain how to implement both flows with devise_saml_authenticatable.
Note
SAML also supports a
SOAPand anArtifactbinding to do this. This guide only refers toPOSTandRedirectbindings.devise_saml_authenticatabledoes not supportSOAPandArtifactbindings.
When the user clicks on Logout within the app, the app can trigger...
Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.
This means that you should only use rem units in @media queries when you're relying on the font size provided by the user agent (mostly it's 16px).
If you set the base font size yourself (e.g. html { font-size: 18px }), do not express...
Developing or debugging SAML functionality can be a hassle, especially when you need to go back and forth with someone external who is managing the identity provider (IDP).
But you can setup a local keycloak server to act as your IDP to play around with. This might seam intimidating, but is actually quite simple when using docker and turning off some verification steps.
`mkdir -p keycloak_data && docker run --network=host -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN...
tl;dr
Prefer request specs over end-to-end tests (Capybara) to joyfully test file downloads!
Testing file downloads via Capybara is not easy and results in slow and fragile tests. We tried different approaches and the best one is just okay.
Tests for file downloads via Capybara ...
console command: You can now globally disable the IRB multiline feature by setting irb_flags: --nomultiline in ~/.config/geordi/global.yml. All configured irb_flags are automatically passed on to the console IRB.console command: Ctrl + C now properly exits a local Rails consolerspec and cucumber commands: Run specs even if the automatic chromedriver update failsdump command: Drop...Rachel Andrew has built a website about CSS Grid.
You can chain multiple Capybara matchers on the page or any element:
expect(page)
.to have_content('Example Course')
.and have_css('.course.active')
.and have_button('Start')
When you chain multiple matchers using and, [Capybara will retry the entire chain](https://github.com/teamcapybara/capybara/blob/c0cbf4024c1abd48b0c22c2930e7b05af58ab284/lib/capybara/rspec/matc...
A list of implementation details that make for a better / expected user experience. Have these in mind when implementing a web design.
This document outlines a non-exhaustive list of details that make a good (web) interface. It is a living document, periodically updated based on learnings. Some of these may be subjective, but most apply to all websites. The WAI-ARIA spec is deliberately not duplicated in this document. However, some accessibility guidelines may be pointed out.
A common cause of non-accessible web pages are elements that were made interactive via JavaScript but cannot be focused or activated with anything but the mouse.
Let's take a look at a common example:
<form filter>
<input filter--query name="query" type="text">
<span filter--reset>Clear Search</span>
</form>
The HTML above is being activated with an Unpoly compiler like this:
up.compiler('[filter]', function(filterForm) {
const resetButton = filterForm.querySelec...
It is still possible to style the -webkit-scrollbar-* pseudo elements in Chrome 121+. However the now supported spec-compliant properties scrollbar-color and scrollbar-width take precedence over the properties of these pseudo elements. With the limited styling options that these spec-compliant properties offer (at the moment) it is advisable to only use them when the ::webkit-scrollbar selector is not supported:
.example::-webkit-scrollbar {
width: 1rem;
height: 1rem;
}
.example::-webkit-scrollbar-thumb {
background-...
All browsers implement an event named beforeunload. It is fired when the active window is closed and can be used to display an alert to warn the user about unsaved changes.
To trigger the alert, you have to call preventDefault() on the event.
Note
The
beforeunloadevent is only dispatched when the user navigation makes a full page load, or if it closes the tab entirely. It will not be dispatched when navigating via JavaScript. In this case you need to ...
Up until Chrome 120, scrollbars could only be styled using the various -webkit-scrollbar-* pseudo elements, e.g. to make the scrollbars have no arrows, be rounded, or with additional margin towards their container.
Starting with version 121, Chrome now also supports the spec-compliant properties scrollbar-width and scrollbar-color.
These allow less styling. You may only specify the track and thumb colors, and a non-specific width like auto, thin, or none.
I recently noticed a new kind of flaky tests on the slow free tier GitHub Action runners: Integration tests were running on smaller screen sizes than specified in the device metrics. The root cause was the use of Selenium's page.driver.resize_window_to methods, which by design does not block until the resizing process has settled:
We discussed this issue again recent...
Any form fields where users enter numbers should be an <input type="number">.
Numeric inputs have several benefits over <input type="text">:
1,23 for <input type="number" value="1.23">."1.23" eve...The linked table shows the support lifecycle for Firefox Extended Support Releases (ESR) which we sometimes need to support for enterprise customers.
The ESR cadence works something like this:
tl;dr
We recommend configuring Selenium's unhandled prompt behavior to "ignore".
When running tests in a real browser, we use Selenium. Each browser is controlled by a specific driver, e.g. Selenium::WebDriver::Chrome for Chrome.
There is one quirk to all drivers (at least those following the W3C webdriver spec) that can be impractical:
When any user prompt (like an alert) is encountered when trying to perform an action, they will [dismiss the dialog by default](https://w3c....
A Rails script lives in lib/scripts and is run with bin/rails runner lib/scripts/.... They are a simple tool to perform some one-time actions on your Rails application. A Rails script has a few advantages over pasting some prepared code into a Rails console:
Although not part of the application, your script is code and should adhere to the common quality standards (e.g. no spaghetti code). However, a script...
87.140.79.42 - - [23/Jan/2024:09:00:46 +0100] "GET /monitoring/pings/ HTTP/1.1" 200 814 "-" "Ruby"
87.140.79.42 - - [23/Jan/2024:09:00:46 +0100] "GET /monitoring/pings/ HTTP/1.1" 200 814 "-" "Ruby"
87.140.79.41 - - [23/Jan/2024:09:00:46 +0100] "GET /monitoring/pings/ HTTP/1.1" 200 814 "-" "Ruby"
87.140.79.42 - - [23/Jan/2024:09:00:46 +0100] "GET /monitoring/pings/ HTTP/1.1" 200 814 "-" "Ruby"
Count and sort the number of requests for a single IP address.
awk '{ print $1}' test.log | sort...
I, [2024-01-21T06:22:17.484221 #2698200] INFO -- : [4cdad7a4-8617-4bc9-84e9-c40364eea2e4] test
I, [2024-01-21T06:22:17.484221 #2698200] INFO -- : [4cdad7a4-8617-4bc9-84e9-c40364eea2e4] more
I, [2024-01-21T06:22:17.484221 #2698200] INFO -- : [6e047fb3-05df-4df7-808e-efa9fcd05f87] test
I, [2024-01-21T06:22:17.484221 #2698200] INFO -- : [6e047fb3-05df-4df7-808e-efa9fcd05f87] more
I, [2024-01-21T06:22:17.484221 #2698200] INFO -- : [53a240c1-489e-4936-bbeb-d6f77284cf38] nope
I, [2024-01-21T06:22:17.484221 #2698200] INFO -- ...
There are a few tools to combat the dreaded n+1 queries. The bullet gem notifies you of missing eager-loading, and also if there is too much eager-loading. strict_loading in Rails 6.1+ forces developers to explicitly load associations on individual records, for a single association, for an entire model, or globally for all models.
But you can also actually **write spe...
Today I learned that you can animate HTML elements using the Web Animation API's method .animate(keyframes, options) (which seems to be Baseline for all browsers since 2022).
const fadeIn = [{ opacity: 0 }, { opacity: 1 }] // this is a keyframe example
const container = document.querySelector('.animate-me')
const animation = container.animate(fadeIn, 2000) // I am just using the animation duration as option here but it can also be given an object
// the animation object can be used for things like querying timings or stat...
Multiply by 1x the unit:
$number = 13
$length = $number * 1px // => 13px
Divide by 1x the unit:
$length = 13px
$number = $length / 1px // => 13
the result of an addition or subtraction between two numbers of different units is expressed in the first member’s unit
Thus, to convert a number, add it to 0 of the desired unit:
$duration: .21s
$duration-in-milliseconds: 0ms + $duration // => 210ms
An example is storing a transition duration as CS...