...between smooth and instant scrolling. Preferring instant scrolling CSS can prefer instant scrolling behavior: html { scroll-behavior: auto; /* the default */ } An auto behavior causes the browser to instantly jump to...
...smooth scrolling CSS can prefer a smooth scrolling animation: @media not (prefers-reduced-motion) { html { scroll-behavior: smooth; } } An smooth behavior causes the browser to animate scrolling in these situations...
As you may know, HAML expands data attributes that are given as a hash: %div{ data: { count: 3 } }
Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the content inside is too long. While you can only truncate single lines with CSS...
When you replace parts of the DOM with new HTML, using .innerHTML = newHtml is usually the simplest and fastest option. It comes at the price of your DOM elements losing...
...will try to do the minimum DOM changes required to arrive at the target HTML. Idiomorph seems to be a bit smarter when your DOM structure changes, and you can...
...it's set to ActionDispatch::PublicExceptions (documentation) called from the ActionDispath::ShowExceptions middleware. For HTML requests, ActionDispatch::PublicExceptions will render html files public/ .html. For other content types, it will...
...be overwritten per controller when consider_all_requests_local is set to false. For HTML requests, DebugExceptions will respond with the default red Rails error page that everyone knows.
...breaking spaces are hard to distinguish for a human. Instead of using the HTML entity or code like " " # this is an nbsp, use a well-named helper method instead...
The Javascript code below is a rough equivalent to the simple_format helper that ships with Rails: function simpleFormat(str...
A haml angular 1 template with .thing(class="is-{{:: item.type }}") will be compiled (by haml) to which is not what...
...element. So don't do this: text The browser will think you wrote invalid HTML by accident, and will sometimes reorder elements silently. There is one notable exception: It's...
...OK to wrap block elements in a tag in HTML5 (not 4). The spec says: The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even...
When requests arrive at the application servers simultaneously, weird things can happen. Sometimes, this can also happen if a user...
...sync vs. async control flow Talking to synchronous (or "blocking") API print('script start') html = get('/foo') print(html) print('script end') Script outputs 'script start', (long delay), '...
...', 'script end...
...Talking to asynchronous (or "evented") API print('script start') get('foo', done: function(html) { print(html) }) print('script end') Script outputs 'script start', 'script end', (long delay), '...
Properties of sync...
...we want to hide via CSS and fill using JS = form.file_field_tag(:invoice, html: { class: 'visually-hidden' }) # You may also use CSS classes, of course %span(file-input-name...
...stored in ~/.config/mimeapps.list (and sometimes ~/.config/*-mimeapps.list). Further reading Stop sipgate softphone from opening html files on click
When a Rails controller action should handle both HTML and JSON responses, do not use request.xhr? to decide that. Use respond_to. I've too often seen code like this...
# ... if request.xhr? render json: @user.as_json else # renders default HTML view end end This is just plain wrong. Web browsers often fetch JSON via XHR, but they (should...
To have your text input field pre-filled in with some text that disappears as soon as the user selects...
You know Firebug as a Firefox extension but there is also a "Lite" version which runs purely off JavaScript.
...forms and page updates. The spectrum Multi-page app (MPA). The server renders complete HTML pages. Every link and form submission loads a new page. The browser does almost nothing...
...which limits how fluid the UI can feel. Progressively enhanced MPA. Still server-rendered HTML, but a small JavaScript layer swaps page fragments instead of reloading, handles forms without a...
When you encouter an unsafe string that you actually made html_safe before, perhaps you called one of the following methods on it: "capitalize", "chomp", "chop", "delete", "downcase", "gsub", "lstrip...
...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...
...or navigation shows up on ten screens, and soon the same twelve lines of HTML live in ten places. Rails partials are the first tool against this; ViewComponent is the...
...You can explain the benefits of a view component over a partial: it hides HTML details behind an explicit interface and co-locates the template with its helpers, its JavaScript...
...as it is given. Behavior of "boolean attributes" remains unchanged No Haml value => no HTML value Boolean Haml value => attribute is rendered depending on that value All other values => rendered...
Haml HTML generated by Haml 5 & 6 %button(disabled) %button(disabled=true) %button(disabled=false) %button(disabled=nil) %button(disabled='123') Other attributes will be handled differently by Haml...
Also, sanitizing user input for CSS injection is much harder than sanitizing HTML...
The DB schema is the most important source of truth for your application and should be very self-explanatory. If...