In this exercise we take a closer look at how the HTML forms produced by Rails helpers, and how user input in those forms is sent over...
...that view. Right-click into your form and select Inspect. You should see the HTML generated by your view. It will look something like this: Again your actual HTML will...
...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:
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
...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...
...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...
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
You have the following HTML structure:
If you want to run Javascript code whenever someone clicks on a ...
..., you can do this in three different ways: function code(event...
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...
...interactive behavior to our interfaces that would not be possible through declarative rules in HTML and CSS alone. Goals Know how to use the native DOM API to do the...
...elements, e.g. hiding them all Resources Introduction to the DOM: MDN article DOM Cheatsheet HTML attributes vs. DOM properties Exercises Playing with the DOM Visit https://makandracards.com/makandra
...stored in ~/.config/mimeapps.list (and sometimes ~/.config/*-mimeapps.list). Further reading Stop sipgate softphone from opening html files on click
...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...
...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...
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...
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...
...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...
...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...
...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...
...Rails error messages for models and attributes Rails I18n scope for humanized attribute names HTML: Making browsers wrap long words Use the same translations for ActiveRecord and ActiveModel Organize large...
...I18n dictionary files in Rails 3+ I18n fallback locales Rails: Including HTML in your i18n locales Even for a single language, locales are useful Even if your application only supports...
...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...
...strong parameters? (now part of Rails) How does Rails protect you against injecting unwanted HTML tags? How to prevent users from uploading malicious content? How do we organize our application...
...an attacker with bad intentions. Exercise: XSS in Rails Intentionally make MovieDB vulnerable to HTML code injection Boot up a second Rails application on another port (e.g. rails server -p...
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.
Let's say you want to find the element with the text hello in the following DOM tree: hello
...implement basic e-mail styling (not required for the exercises below) Watch the talk "HTML E-Mails mit MJML 🔒" (slides) Visit Can I Email. Can you use flex styles in...
...this array in your tests. Discuss With your mentor, discuss the challenges of implementing HTML mails well...
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...