...and generate a base64-encoded version of it. You can copy the result as HTML tag with data URI, CSS rule with background-image and data URI, plain Base64-encoded...
Using this gem, whenever a Capybara test in Cucumber, Rspec or Minitest fails, the HTML for the failed page and a screenshot (when using capybara-webkit, Selenium or poltergeist) is...
CSS3 comes with new unit rem. It works like em but it is always relative to the element instead of...
Examples how to create dozens of shapes using pure CSS and a single HTML element...
As the title says: this jQuery plugin creates bar charts from HTML tables. It comes in some different flavors. Check the examples page: http://alphagov.github.com/magna-charta/.
pjax loads HTML from your server into the current page without a full reload. It's ajax with real permalinks, page titles, and a working back button that fully degrades...
...in regular textareas to make them suitable for in-browser coding of languages like HTML, CSS, Javascript, or your favorite server-side language. The idea is to be able to...
...nodes based on rendered text, even if it spans over multiple elements in the HTML. Imagine a page that includes this HTML: Hi! Try to match me. Even though the...
...text is separated by a tag in the HTML, it is matched until Capybara 2 which used to "squish" text prior to the comparison. # Capyabara 1 or 2 page.find('.haystack...
...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.
...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...
Our applications not only need to be functional, they need to be fast. But, to quote Donald Knuth, premature optimization...