private def render_esbuild_error heading, errors = ESBUILD_ERROR.read.split("\n", 2) # Render error as HTML so rack-livereload can inject its code into # and refresh the error page when assets...
render html: <<~HTML.html_safe, layout: false #{ERB::Util.html_escape(heading)} #{ERB::Util.html_escape(errors)} HTML end def render_esbuild_error? ESBUILD_ERROR.exist? && ESBUILD_ERROR.size > 0 end end
...SVGs can be styled with CSS You need an and child tags in your HTML to apply CSS (which kind of makes sense). Rendering SVGs as images ( ) or s rules...
...or render ALL SVGs inline. However, this has another drawback: Inline SVGs bloat your HTML's size If you render all SVGs inline, you'll be injecting kilobytes of data...
...stored in ~/.config/mimeapps.list (and sometimes ~/.config/*-mimeapps.list). Further reading Stop sipgate softphone from opening html files on click
...the environment name in a data-environment of your . E.g., in your application layout: <html data-environment=<%= Rails.env %>> Now you can say in a piece of Javascript: if (document.documentElement.dataset.environment == 'test...
} else { // Code that should happen for other environments } Or in your CSS / Sass: html[data-environment="test"] { * { text-transform: none !important; } } See also Cucumber: Detect if the current Capybara...
...ApplicationController skip_before_action :verify_authenticity_token def not_found render :status => 404, :formats => [:html] end def server_error render :status => 500, :formats => [:html] end end Add the corresponding views...
Make sure that you use the correct property when editing an HTML attribute. Using innerHTML with unsafe arguments...
...makes your application vulnerable to XSS. textContent: Sets the content of a Node (arguments are HTML-safe escaped) innerHTML: Sets the HTML of an Element (arguments are not escaped and...
When you need to see the content of a page (i.e. not all the HTML but the relevant text body) you can do pp (html_content) pp will format the...
...html String human readable pretty printed where html_content can be replaced by one of the following commands: Rails body or response.body Capybara: page.driver.html.content page.body Webrat: Nokogiri::HTML(response.body).content...
...it will correctly display the expected context: @@ -24,7 +24,7 @@ def tickets_as_html # <=== Now correct ApplicationController.render( "tickets/index.html.haml", layout: "tickets", - assigns: { tickets: tickets } + assigns: { tickets: tickets, event_name: event...
When requests arrive at the application servers simultaneously, weird things can happen. Sometimes, this can also happen if a user...
...you teach a new to a browser The browser will automatically pair JavaScript and HTML when a matching element enters the DOM. No JavaScript activation required. https://makandracards.com/makandra/62353-javascript-without-jquery-presentation-from-2019-01-21/attachments/7224
...frameworks or without any framework. jQuery vs. Custom Elements jQuery has wrapped access to HTMLElement, but can't possible wrap custom element API. To interact with custom elements, we need...
...major browsers since 2022. Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount...
...of image tags from the browser with JS. This way, no modification of the HTML would be necessary and the whole lazy-loading could be accomplished by javascript. However, this...
Let's say you want to find the element with the text hello in the following DOM tree: hello
end end end World(HtmlSelectorsHelpers) nth-of-type matches by counting the actual HTML-tag Using :nth-of-type like this, might not work as you expect, as...
...it only cares about the HTML-Tag type. Example. This might lead to breaking tests when your html changes. Once browser support is fulfilled prefiltering nth-child selector will be...
...and footer files, add or modify these attributes in your PDFKit options hash: { header_html: 'app/views/foo/bar/header.html', footer_html: 'app/views/foo/bar/footer.html', margin_top: '200px', # Height of the header, can be px or...
Given you have a strict CSP that only allows elements from your own domain: Content-Security-Policy: script-src 'self' This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP: click me click me Solution 1: Move the handler into your JavaScript The recommended solution is to move the handler from the HTML to the allowed JavaScript file that we loaded via . In the example above we could invent a new [data-alert] attribute with the alert message: click me Then our JavaScript intercepts clicks on elements with that attribute: document.addEventListener('click', function(event) { let link = event.target.closest('[data-alert]') if (link) { let message = link.dataset.alert alert(message) event.preventDefault() } }) Solution 2: Allow that one handler in your CSP Some browsers allow the CSP directive script-src-attr. This lets you allow the hashes of actual JavaScript code. The SHA256 hash of alert('hello') is vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE= (in Base64). We can allow this one event handlers like this: Content-Security-Policy: script-src 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Note the sha256- prefix. This event handler now works when clicked: click me But any other script will still be blocked: click me Dealing with legacy browsers Currently (November 2023) about 75% of browsers support script-src-attr. Here is a forward-looking compromise that many users use with new CSP features: Have a liberal CSP with old directives supported by all browsers Make your CSP stricter with new, more specific directives for browsers that support it The CSP spec supports that approach in that using newer, more specific directives disable older, more general features. In our case this means: For old browsers, allow all inline scripts For new browsers, disallow inline scripts but allow inline handlers with given hashes Here is a CSP directive that works like this: Content-Security-Policy: script-src 'self' 'unsafe-inline'; script-src-elem 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Old browsers will only use script-src. New browsers will use script-src-elem (for tags) and script-src-attr (for inline event handlers), which override the more liberal rules from script-src.
A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs...
Our applications not only need to be functional, they need to be fast. But, to quote Donald Knuth, premature optimization...
...styles incorrectly. As a reminder, this will disallow inline styles you set in your html inline styles set by JS libraries using element.style = 'display: none;' What will keep working is...
...the multipart option like this in very old versions of Rails: form_for @invoice, :html => { :multipart => true } do If you do not, Rails will only receive the file name...
You have uncommited changes (you can always check by using git status), which you want to discard.
...Rack::MiniProfiler.config.skip_paths = [ # ignore most asset requests %r(/system.*), %r(/assets.*), ] Rack::MiniProfiler.config.html_container = 'html' # avoid unpoly replacements end end SQL Rack-Mini-Profiler will give you a lot of...
...like you know it from Rails. Reminder: Middleman brings the handy helper methods capture_html, content_tag and tag. Environments Middleman 4+ supports different environments. Think of them as config.rbs...
Configure Capybara-Screenshot with this file: # features/support/capybara_screenshot.rb require 'capybara-screenshot/cucumber' # Have HTML screenshot render with assets (while `middleman` is running) Capybara.asset_host = 'http://localhost:4567' module Capybara...
...will have a hard time using your page. ✔️ Better solution: Use a fitting native HTML element Do not use the hacks above. Instead, use the HTML element which was meant...
...ellipsis (...) after a specific amount of lines for a multi-line text in your HTML. Earlier, it was necessary to implement JavaScript solutions like Superclamp.js to enable this because the...
...a surrounding container and only focus on the text. This will, however, add more HTML to your DOM structure which may be annoying. Still, we recommend to use the CSS...