...does not block the browser from rendering content. Deferred scripts will run after the HTML was parsed. That means you can query the entire DOM tree with querySelector() and friends...
...have multiple deferred scripts, they will run in the order they appear in the HTML, regardless of how long individual scripts take to load. You can put your...
...set icon font classes directly. Instead I use another helper (icon) that wraps a HTML snippet with the icon class and some additional markup: <%= icon(:email, 'Send message') %>
...produce the following HTML: Send message You can also use the helper to write an icon without a label: <%= icon(:email) %> Advantages of using the helper are:
...on JavaScript-heavy applications. An example would be an AngularJS application where the following HTML actually works. [1] Hello Capybara will fail to find that link, even though looking it...
...are usually styled correctly, and Angular will take care of the click event), the HTML spec defines hyperlinks as anchor tags ( ) that have an href attribute. Without an href they...
Modifiers: .-modifier Pros: Clear ownership, reusable, no namespace conflicts, modular Cons: Verbose HTML, requires BEM knowledge Preferred for ViewComponent For views components we mainly rely on this pattern...
...field :description %td= tag.a delete_icon, id: 'delete' Pros: Simple, quick to implement, natural HTML Cons: Namespace collisions, fragile, unclear ownership 3. Attribute Pattern When: Form field enhancements, configuration-driven...
...validations which could be used to give fields that have a presence validation the HTML required attribute. We usually turn it off due to difficulties controlling its behavior and appearance...
module Components module AriaRequired def aria_required(_wrapper_options) if required_field? input_html_options['aria-required'] = 'true' end nil end end end end SimpleForm::Inputs::Base.include(SimpleForm::Components...
A short tutorial for XPath. It's the first XPath introduction that ever stuck with me. Also see XPath in...
...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...
end + content_tag(:div, :class => 'clear') ) end # Rails 2 def center_float(&block) html = "".html_safe html << content_tag(:div, :class => 'center_float_outer_container') do content_tag(:div...
...class => 'center_float_container') do content_tag(:div, h(capture(&block)), :class => 'center_float').html_safe end end html << content_tag(:div, :class => 'clear') html end Use it with
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.
...propagation, dynamically created elements. Three ways to handle a click You have the following HTML structure:
If you want to run Javascript code whenever someone clicks on a ...
..., you can...
We will implement a simplified version of Whac-A-Mole in HTML and Javascript. Start with this HTML structure: Now add some Javascript to implement the following...
...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...
A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs...
Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many...
A look at Prawn, PDFKit, and Wicked PDF
Given a list of acceptable elements and attributes, Sanitize will remove all unacceptable HTML from a string...
MailStyle allows you to write the css for your html emails as you normally would, then writes the styles inline when you send your emails. It also makes sure that...
...the component makes a request to /foo. The server is expected to respond with HTML containing an element with the same [id] (news in the example). The component parses the...
...a message like Error 404 while loading. When the server does not respond with HTML containing an element with matching [id], the inner text of will be replaced by a...
Our applications not only need to be functional, they need to be fast. But, to quote Donald Knuth, premature optimization...
...plain-text response, and can cause trouble. \ For example, consider a middleware that transforms HTML responses; it would also touch such wannabe-plain-text responses sent with the incorrect content...
...response.content_type # => "text/plain" Latest Rails Rails 4.1 deprecates render :text. You should use render :html or render :plain instead. render html: 'Hello' response.body # => "Hello" response.content_type # => "text/html" render plain: 'Hello...
...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...
...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...
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
...user', (event, element, data) => { console.log(`${data.name} is ${data.age} years old`) }) Arbitrary Attributes Access any HTML attribute with standard methods or Unpoly helpers: %span.user{ name: 'Bob', age: '18', active: 'true' }
Hint If you are using our opscomplete.com hosting we can set all environment variables mentioned below for your deployment on...